diff --git a/README.md b/README.md
index 2b5d85cd..6a216a93 100644
--- a/README.md
+++ b/README.md
@@ -1,134 +1,10 @@
 # three-mesh-ui
 
-<a href="https://three-mesh-ui.herokuapp.com/#interactive_button">
-  <img alt="buttons example" target="_blank" src="https://felixmariotto.s3.eu-west-3.amazonaws.com/three-mesh-ui-teasers/buttons_opti.gif" width="45%">
-</a>
 
-<a href="https://three-mesh-ui.herokuapp.com/#hidden_overflow">
-  <img alt="tuto example" target="_blank" src="https://felixmariotto.s3.eu-west-3.amazonaws.com/three-mesh-ui-teasers/hidden_overflow_opti.gif" width="45%">
-</a>
+Branch 7.1.x is ready to starts 7.x.x evaluation period.
+It has no release but its source code
 
-<a href="https://three-mesh-ui.herokuapp.com/#nested_blocks">
-  <img alt="big text example" target="_blank" src="https://felixmariotto.s3.eu-west-3.amazonaws.com/three-mesh-ui-teasers/nested_layout_opti.gif" width="45%">
-</a>
-
-<a href="https://three-mesh-ui.herokuapp.com/#keyboard">
-  <img alt="big text example" target="_blank" src="https://felixmariotto.s3.eu-west-3.amazonaws.com/three-mesh-ui-teasers/keyboard_opti.gif" width="45%">
-</a>
-
-## [Examples 7.x.x (live)](https://felixmariotto.github.io/three-mesh-ui/7.x.x/) &nbsp;|	&nbsp;[NPM](https://www.npmjs.com/package/three-mesh-ui)	&nbsp;|	&nbsp;[Documentation](https://github.com/felixmariotto/three-mesh-ui/wiki)	&nbsp;|	&nbsp;[Contributing](https://github.com/felixmariotto/three-mesh-ui/wiki/Roadmap-&-Contributions)
-
-# What is it ?
-
-**three-mesh-ui** is a small library for building VR user interfaces. The objects it creates are [three.object3Ds](https://github.com/mrdoob/three.js/blob/dev/src/core/Object3D.js), usable directly in a [three.js](https://threejs.org) scene like any other Object3D.    
-        
-**It is not a framework**, but a minimalist library to be used with the last version of three.js. It has no dependency but three.js.
-
-# Why ?
-
-In a normal three.js workflow, the common practice is to build user interfaces with HTML/CSS.
-
-In immersive VR, it is impossible, therefore this library was created.
-
-# Quick Start
-
-## Try it now
-
-Give it a try in [this jsFiddle](https://jsfiddle.net/felixmariotto/y81rf5t2/44/)
-
-Using react-three-fiber ? Here is a [codesandbox](https://codesandbox.io/s/react-three-mesh-ui-forked-v7n0b?file=/src/index.js) to get started.
-
-## Import
-### JSM
-#### With NPM 
-`npm install three-mesh-ui`
-*:warning: It requires three as peer dependency*
-
-##### ES6 ([codesandbox demo](https://codesandbox.io/s/npm-package-demo-2onzpo))
-
-```javascript
-import ThreeMeshUI from 'three-mesh-ui'
-```
-
-##### CommonJS   
-```javascript
-const ThreeMeshUI = require('three-mesh-ui');
-```
-
-##### HTML &lt;script&gt; tag ([codesandbox demo](https://codesandbox.io/s/module-build-demo-bkmfi8?file=/index.html:281-913))
-```html
- <!-- Defines the import map -->
-<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
-<script type="importmap">
-{
-    "imports": {
-        "three": "https://unpkg.com/three@0.132.2/build/three.module.js",
-        "three-mesh-ui": "https://unpkg.com/three-mesh-ui@6.4.0/build/three-mesh-ui.module.js"
-    }
-}
-</script>
-
-<!-- Then we can code our app -->
-<script type="module">
-    import * as THREE from "three";
-    import * as ThreeMeshUI from "three-mesh-ui";
-
-    // code goes here ...
-</script>
-```
-:muscle: *You can use the minified version named __three-mesh-ui.module.min.js__ ([codesandbox demo](https://codesandbox.io/s/module-build-demo-minified-pm6jwx))*
-
-
-### JS
-#### HTML &lt;script&gt; tag ([codesandbox demo](https://codesandbox.io/s/js-build-demo-061eku))
-```html
-<!-- As three-mesh-ui has a peer dependency on three.js -->
-<!-- Be sure to load three before three-mesh-ui -->
-<script src="https://unpkg.com/three@0.132.2/build/three.js"></script>
-
-<script src="https://unpkg.com/three-mesh-ui@6.4.1/build/three-mesh-ui.js"></script>
-
-<!-- Then we can code our app -->
-<script>
-    /* global THREE, ThreeMeshUI */
-
-    // code goes here ...
-</script>
-```
-:muscle: *You can use the minified version named __three-mesh-ui.min.js__ ([codesandbox demo](https://codesandbox.io/s/js-build-demo-minified-onh8zi))*    
-:warning: *Although this would theorically allows you to build 'something', loading js libraries instead of using jsm, might restrict the global features you would have. This is true for both three and three-mesh-ui libraries.*
-
-
-## Font files
-
-In order to display some text with three-mesh-ui, you will need to provide font files.   
-You can use the two files named `Roboto-msdf` in [this directory](https://github.com/felixmariotto/three-mesh-ui/tree/master/examples/assets), or [create your own font files](https://github.com/felixmariotto/three-mesh-ui/wiki/Creating-your-own-fonts)
-
-## API
-
-Here is an example of basic three-mesh-ui usage : 
-
-```javascript
-const container = new ThreeMeshUI.Block({
- width: 1.2,
- height: 0.7,
- padding: 0.2,
- fontFamily: './assets/Roboto-msdf.json',
- fontTexture: './assets/Roboto-msdf.png',
-});
-
-//
-
-const text = new ThreeMeshUI.Text({
- content: "Some text to be displayed"
-});
-
-container.add( text );
-
-// scene is a THREE.Scene (see three.js)
-scene.add( container );
-
-// This is typically done in the render loop :
-ThreeMeshUI.update();
-```
+## [Examples (7.x.x)](https://felixmariotto.github.io/three-mesh-ui/7.x.x/)
+## [Documentation (7.x.x)](https://github.com/felixmariotto/three-mesh-ui/wiki)
+## [Contributing (7.x.x)](https://github.com/felixmariotto/three-mesh-ui/wiki/Roadmap-&-Contributions)
 
diff --git a/build/build.browser.html b/build/build.browser.html
index 62ce7ca4..1e438442 100644
--- a/build/build.browser.html
+++ b/build/build.browser.html
@@ -11,7 +11,7 @@
 
 <!-- As three-mesh-ui has a peer dependency on three.js -->
 <!-- Be sure to load three before three-mesh-ui -->
-<script src="https://unpkg.com/three@0.132.2/build/three.js"></script>
+<script src="https://unpkg.com/three@0.145.0/build/three.js"></script>
 <script src="./three-mesh-ui.js"></script>
 
 <!-- Then we can code our app -->
@@ -77,7 +77,7 @@
 
 		container.add(
 			new ThreeMeshUI.Text( {
-				content: 'three-mesh-ui.js',
+				textContent: 'three-mesh-ui.js\n7.x.x',
 				fontSize: 0.125
 			} ),
 		);
diff --git a/build/build.browser.min.html b/build/build.browser.min.html
index 1cf26c17..a7d78928 100644
--- a/build/build.browser.min.html
+++ b/build/build.browser.min.html
@@ -11,7 +11,7 @@
 
 <!-- As three-mesh-ui has a peer dependency on three.js -->
 <!-- Be sure to load three before three-mesh-ui -->
-<script src="https://unpkg.com/three@0.132.2/build/three.min.js"></script>
+<script src="https://unpkg.com/three@0.145.0/build/three.min.js"></script>
 <script src="./three-mesh-ui.min.js"></script>
 
 <!-- Then we can code our app -->
@@ -77,7 +77,7 @@
 
 		container.add(
 			new ThreeMeshUI.Text( {
-				content: 'three-mesh-ui.min.js',
+				textContent: 'three-mesh-ui.min.js\n7.x.x',
 				fontSize: 0.125
 			} ),
 		);
diff --git a/build/build.module.html b/build/build.module.html
index d0632820..dfca60c0 100644
--- a/build/build.module.html
+++ b/build/build.module.html
@@ -14,8 +14,8 @@
 <script type="importmap">
 {
 	"imports": {
-		"three": "https://unpkg.com/three@0.132.2/build/three.module.js",
-		"three-mesh-ui": "https://unpkg.com/three@6.4.0/build/three-mesh-ui.module.js"
+		"three": "https://unpkg.com/three@0.145.0/build/three.module.js",
+		"three-mesh-ui": "./three-mesh-ui.module.js"
 	}
 }
 </script>
@@ -86,7 +86,7 @@
 
 		container.add(
 			new ThreeMeshUI.Text( {
-				content: 'three-mesh-ui.module.js',
+				textContent: 'three-mesh-ui.module.js\n7.x.x',
 				fontSize: 0.125
 			} ),
 		);
diff --git a/build/build.module.min.html b/build/build.module.min.html
index 352f95e0..95eda421 100644
--- a/build/build.module.min.html
+++ b/build/build.module.min.html
@@ -14,7 +14,7 @@
 <script type="importmap">
   {
     "imports": {
-      "three": "https://unpkg.com/three@0.132.2/build/three.module.js",
+      "three": "https://unpkg.com/three@0.145.0/build/three.module.js",
       "three-mesh-ui" : "./three-mesh-ui.module.min.js"
     }
   }
@@ -85,7 +85,7 @@
 
 		container.add(
 			new ThreeMeshUI.Text( {
-				content: 'three-mesh-ui.module.min.js',
+				textContent: 'three-mesh-ui.module.min.js\n7.x.x',
 				fontSize: 0.125
 			} ),
 		);
diff --git a/build/three-mesh-ui.js b/build/three-mesh-ui.js
index 1be5b83c..03bce076 100644
--- a/build/three-mesh-ui.js
+++ b/build/three-mesh-ui.js
@@ -47,5061 +47,4398 @@
 /************************************************************************/
 var __webpack_exports__ = {};
 
-// UNUSED EXPORTS: AlignItems, Block, ContentDirection, FontLibrary, FontStyle, FontWeight, InlineBlock, JustifyContent, Keyboard, MSDFFontMaterialUtils, ShaderChunkUI, Text, TextAlign, Whitespace, default, update
-
-// NAMESPACE OBJECT: ./src/utils/block-layout/ContentDirection.js
-var ContentDirection_namespaceObject = {};
-__webpack_require__.r(ContentDirection_namespaceObject);
-__webpack_require__.d(ContentDirection_namespaceObject, {
-  "COLUMN": () => (COLUMN),
-  "COLUMN_REVERSE": () => (COLUMN_REVERSE),
-  "ROW": () => (ROW),
-  "ROW_REVERSE": () => (ROW_REVERSE),
-  "contentDirection": () => (contentDirection)
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "wb": () => (/* reexport */ DefaultValues_namespaceObject)
 });
 
-// NAMESPACE OBJECT: ./src/utils/block-layout/AlignItems.js
-var AlignItems_namespaceObject = {};
-__webpack_require__.r(AlignItems_namespaceObject);
-__webpack_require__.d(AlignItems_namespaceObject, {
-  "CENTER": () => (CENTER),
-  "END": () => (END),
-  "START": () => (START),
-  "STRETCH": () => (STRETCH),
-  "alignItems": () => (alignItems),
-  "warnAboutDeprecatedAlignItems": () => (warnAboutDeprecatedAlignItems)
-});
-
-// NAMESPACE OBJECT: ./src/utils/block-layout/JustifyContent.js
-var JustifyContent_namespaceObject = {};
-__webpack_require__.r(JustifyContent_namespaceObject);
-__webpack_require__.d(JustifyContent_namespaceObject, {
-  "CENTER": () => (JustifyContent_CENTER),
-  "END": () => (JustifyContent_END),
-  "SPACE_AROUND": () => (SPACE_AROUND),
-  "SPACE_BETWEEN": () => (SPACE_BETWEEN),
-  "SPACE_EVENLY": () => (SPACE_EVENLY),
-  "START": () => (JustifyContent_START),
-  "justifyContent": () => (justifyContent)
-});
+// UNUSED EXPORTS: BaseProperty, Behavior, Block, FontLibrary, FontVariant, InheritableProperty, Inline, InlineBlock, InlineGlyph, MSDFFontMaterialUtils, MaterialTransformers, MeshUIBaseElement, ShaderChunkUI, Text, TypographicFont, TypographicGlyph, default, update
 
-// NAMESPACE OBJECT: ./src/utils/inline-layout/Whitespace.js
-var Whitespace_namespaceObject = {};
-__webpack_require__.r(Whitespace_namespaceObject);
-__webpack_require__.d(Whitespace_namespaceObject, {
-  "NORMAL": () => (NORMAL),
-  "NOWRAP": () => (NOWRAP),
-  "PRE": () => (PRE),
-  "PRE_LINE": () => (PRE_LINE),
-  "PRE_WRAP": () => (PRE_WRAP),
-  "WHITE_CHARS": () => (WHITE_CHARS),
-  "collapseWhitespaceOnInlines": () => (collapseWhitespaceOnInlines),
-  "collapseWhitespaceOnString": () => (collapseWhitespaceOnString),
-  "isValid": () => (isValid),
-  "newlineBreakability": () => (newlineBreakability),
-  "shouldBreak": () => (Whitespace_shouldBreak)
+// NAMESPACE OBJECT: ./src/core/DefaultValues.js
+var DefaultValues_namespaceObject = {};
+__webpack_require__.r(DefaultValues_namespaceObject);
+__webpack_require__.d(DefaultValues_namespaceObject, {
+  "get": () => (get),
+  "set": () => (set)
 });
 
-// NAMESPACE OBJECT: ./src/utils/inline-layout/TextAlign.js
-var TextAlign_namespaceObject = {};
-__webpack_require__.r(TextAlign_namespaceObject);
-__webpack_require__.d(TextAlign_namespaceObject, {
-  "CENTER": () => (TextAlign_CENTER),
-  "JUSTIFY": () => (JUSTIFY),
-  "JUSTIFY_CENTER": () => (JUSTIFY_CENTER),
-  "JUSTIFY_LEFT": () => (JUSTIFY_LEFT),
-  "JUSTIFY_RIGHT": () => (JUSTIFY_RIGHT),
-  "LEFT": () => (LEFT),
-  "RIGHT": () => (RIGHT),
-  "textAlign": () => (textAlign)
-});
+;// CONCATENATED MODULE: ./src/core/DefaultValues.js
+/** List the default values of the lib components */
+const _values = {
+	fontFamily: null,
+	fontSize: 0.05,
+	fontKerning: 'normal',
+	fontStyle: 'normal',
+	fontWeight : 'normal',
+	offset: 0.005,
+	lineHeight: 1.2,
+	lineBreak: '- ,.:?!\n',// added '\n' to also acts as friendly breaks when white-space:normal
+	whiteSpace: 'pre-line',
+	flexDirection : 'column',
+	justifyContent : 'start',
+	alignItems : 'start',
+	backgroundImage: null,
+	textAlign : 'left',
+	boxSizing: 'content-box',
+	position: 'static',
+	color: 0xffffff,
+	fontOpacity: 1,
+	opacity: 1,
+	fontPXRange: 4,
+	fontSupersampling: true,
+	fontSmooth: 'antialiased',
+	borderRadius: 0,
+	borderWidth: 0,
+	borderColor: 'black',
+	borderOpacity: 1,
+	backgroundSize: "cover",
+	backgroundColor: 0x000000,
+	backgroundOpacity: 0,
+	overflow: 'visible',
+	letterSpacing: 0,
+	invertAlpha : false,
+	segments: 1,
+	backgroundSide : 0, //FrontSide
+	backgroundAlphaTest: 0.02,
+	fontSide: 0, // FrontSide
+	fontAlphaTest: 0.02,
+	padding: 0,
+	margin: 0,
+	verticalAlign: "baseline"
+};
 
-// NAMESPACE OBJECT: ./src/utils/font/FontWeight.js
-var FontWeight_namespaceObject = {};
-__webpack_require__.r(FontWeight_namespaceObject);
-__webpack_require__.d(FontWeight_namespaceObject, {
-  "BOLD": () => (BOLD),
-  "BOLDER": () => (BOLDER),
-  "LIGHTER": () => (LIGHTER),
-  "NORMAL": () => (FontWeight_NORMAL),
-  "_100": () => (_100),
-  "_200": () => (_200),
-  "_300": () => (_300),
-  "_400": () => (_400),
-  "_500": () => (_500),
-  "_600": () => (_600),
-  "_700": () => (_700),
-  "_800": () => (_800),
-  "_900": () => (_900)
-});
+const _blocks = {
 
-// NAMESPACE OBJECT: ./src/utils/font/FontStyle.js
-var FontStyle_namespaceObject = {};
-__webpack_require__.r(FontStyle_namespaceObject);
-__webpack_require__.d(FontStyle_namespaceObject, {
-  "ITALIC": () => (ITALIC),
-  "NORMAL": () => (FontStyle_NORMAL),
-  "OBLIQUE": () => (OBLIQUE),
-  "obliqueCustomAngle": () => (obliqueCustomAngle)
-});
+};
 
-;// CONCATENATED MODULE: external "THREE"
-const external_THREE_namespaceObject = THREE;
-;// CONCATENATED MODULE: ./src/utils/block-layout/ContentDirection.js
-const ROW = "row";
-const ROW_REVERSE = "row-reverse";
-const COLUMN = "column";
-const COLUMN_REVERSE = "column-reverse";
+const _inlines = {
+	fontStyle: 'inherit',
+	fontWeight: 'inherit',
+	color: 'inherit'
+}
 
+const _registry = {
+	default: _values,
+	block: _blocks,
+	inline : _inlines
+}
 
 /**
- * @tests '/test/specs/utils/box-layout/content-direction.js'
- * @param {BoxComponent} container
- * @param {string} DIRECTION
- * @param {number} startPos
- * @param {number} REVERSE
+ * @param {import('./../core/elements/MeshUIBaseElement').Options} overrideProperties
+ * @param [type='default']
  */
-function contentDirection( container, DIRECTION, startPos, REVERSE ){
-
-	// end to end children
-	let accu = startPos;
-
-
-	let childGetSize = "getOffsetWidth";
-	let axisPrimary = "x";
-	let axisSecondary = "y";
+const set = function ( overrideProperties , type = 'default' ) {
 
-	// left right
-	let margins = ['w','y'];
+	const values = _registry[type] || _registry.default;
 
-	if( DIRECTION.indexOf( COLUMN ) === 0 ){
+	for ( const property in overrideProperties ) {
 
-		childGetSize = "getOffsetHeight";
-
-		axisPrimary = "y";
-		axisSecondary = "x";
-
-		// top bttom
-		margins = ['x', 'z'];
-
-	}
-
-	if ( DIRECTION.indexOf('-reverse') !== -1 ) {
-
-		margins.reverse();
+		values[property] = overrideProperties[property];
 
 	}
 
-	// Refactor reduce into fori in order to get rid of this keyword
-	for ( let i = 0; i < container.childrenBoxes.length; i++ ) {
+}
 
-		const child = container.childrenBoxes[ i ];
+/**
+ *
+ * @param {string} property
+ * @return {any}
+ */
+const get = function ( property, type = 'default' ) {
 
-		const CHILD_ID = child.id;
-		const CHILD_SIZE = child[childGetSize]();
+	const values = _registry[type] ? {..._values,..._registry[type]} : {..._registry.default};
 
-		accu += child._margin[margins[0]] * REVERSE;
+	if( !property ) return values;
 
-		container.childrenPos[ CHILD_ID ] = {
-			[axisPrimary]: accu + ( ( CHILD_SIZE / 2 ) * REVERSE ),
-			[axisSecondary]: 0
-		};
+	if( !Object.prototype.hasOwnProperty.call( values, property) ) {
 
-		// update accu for next children
-		accu += ( REVERSE * ( CHILD_SIZE + child._margin[margins[1]] ) );
+		console.warn( `ThreeMeshUI::DefaultValues is trying to retrieve non-existing property '${property}'`);
 
 	}
 
+	return values[property];
+
 }
 
+;// CONCATENATED MODULE: ./src/core/properties/BaseProperty.js
 
 
-;// CONCATENATED MODULE: ./src/utils/block-layout/AlignItems.js
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
+/* eslint-enable no-unused-vars */
 
+class BaseProperty {
 
-const START = "start";
-const CENTER = "center";
-const END = "end";
-const STRETCH = "stretch"; // Still bit experimental
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 * @param primitive
+	 */
+	constructor( propertyId, value = null, primitive = true ) {
 
-/**
- * @tests '/test/specs/utils/box-layout/align-items.js'
- * @param {BoxComponent} boxComponent
- * @param {string} DIRECTION
- */
-function alignItems( boxComponent, DIRECTION){
+		/**
+		 *
+		 * @type {string}
+		 * @internal
+		 */
+		this._id = propertyId;
 
-	const ALIGNMENT = boxComponent.getAlignItems();
-	if( AVAILABLE_ALIGN_ITEMS.indexOf(ALIGNMENT) === -1 ){
+		/**
+		 *
+		 * @type {any}
+		 * @internal
+		 */
+		this._value = value;
 
-		console.warn( `alignItems === '${ALIGNMENT}' is not supported` );
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._needsUpdate = true;
 
-	}
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._needsProcess = false;
 
-	let getSizeMethod = "getInnerWidth";
-	let axis = "x";
-	if( DIRECTION.indexOf( ROW ) === 0 ){
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._needsRender = false;
 
-		getSizeMethod = "getInnerHeight";
-		axis = "y";
+		/**
+		 *
+		 * @type {boolean}
+		 * @protected
+		 */
+		this._isPrimitive = primitive;
 
 	}
-	const AXIS_TARGET = ( boxComponent[getSizeMethod]() / 2 );
 
-	boxComponent.childrenBoxes.forEach( ( child ) => {
+	/**
+	 *
+	 * @return {string}
+	 */
+	get id() { return this._id; }
 
-		let offset = 0;
+	/**
+	 *
+	 * @return {any}
+	 */
+	get value() { return this._value; }
 
-		switch ( ALIGNMENT ){
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set value( value ) {
 
-			case END:
-			case 'right': // @TODO : Deprecated and will be remove upon 7.x.x
-			case 'bottom': // @TODO : Deprecated and will be remove upon 7.x.x
-				if( DIRECTION.indexOf( ROW ) === 0 ){
+		if( ! this.isValid( value) ) return;
 
-					offset = - AXIS_TARGET + ( child[getSizeMethod]() / 2 );
+		if( this._value !== value ) {
 
-				}else{
+			this._value = value;
 
-					offset = AXIS_TARGET - ( child[getSizeMethod]() / 2 );
+			this._needsUpdate = true;
 
-				}
+		}
 
-				break;
+	}
 
-			case START:
-			case 'left': // @TODO : Deprecated and will be remove upon 7.x.x
-			case 'top': // @TODO : Deprecated and will be remove upon 7.x.x
-				if( DIRECTION.indexOf( ROW ) === 0 ){
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @param {Object.<string,any>} out
+	 */
+	update( element , out ) { 	/* eslint-enable no-unused-vars */
 
-					offset = AXIS_TARGET - ( child[getSizeMethod]() / 2 );
+		// the value has been updated from setter
+		// if there is no additional logic
+		// then just output it
+		// => out[this._id] = this._value;
+		this.output( out );
 
-				}else{
 
-					offset = - AXIS_TARGET + ( child[getSizeMethod]() / 2 );
+		// ??
+		//this.computeOutputValue( element );
+		// if( this._isPrimitive ) this.output( out );
 
-				}
+	}
 
-				break;
-		}
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Output this property in a dictionnary
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) { 	/* eslint-enable no-unused-vars */
 
-		boxComponent.childrenPos[ child.id ][axis] = offset;
+		// ie:
+		// out['borderRadius'] = this;
+		// out[this._id] = this._value;
 
-	} );
+	}
 
-}
 
-/**
- * @deprecated
- * // @TODO: Be remove upon 7.x.x
- * @param alignment
- */
-function warnAboutDeprecatedAlignItems( alignment ){
 
-	if( DEPRECATED_ALIGN_ITEMS.indexOf(alignment) !== - 1){
+	/**
+	 *
+	 * @param {Out} out
+	 */
+	_outputValue( out ) {
 
-		console.warn(`alignItems === '${alignment}' is deprecated and will be remove in 7.x.x. Fallback are 'start'|'end'`)
+		out[this._id] = this._value;
 
 	}
 
-}
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Execute additional process after all properties have been updated
+	 * @param {MeshUIBaseElement} element
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */ }
 
-const AVAILABLE_ALIGN_ITEMS = [
-	START,
-	CENTER,
-	END,
-	STRETCH,
-	'top', // @TODO: Be remove upon 7.x.x
-	'right', // @TODO: Be remove upon 7.x.x
-	'bottom', // @TODO: Be remove upon 7.x.x
-	'left' // @TODO: Be remove upon 7.x.x
-];
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Execute additional process after all properties have been updated
+	 * @param {MeshUIBaseElement} element
+	 */
+	render( element ) { /* eslint-enable no-unused-vars */ }
 
-// @TODO: Be remove upon 7.x.x
-const DEPRECATED_ALIGN_ITEMS = [
-	'top',
-	'right',
-	'bottom',
-	'left'
-];
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	getInheritedInput ( element ) {
 
+		if( this._value !== 'inherit' ) return this._value;
 
-;// CONCATENATED MODULE: ./src/utils/block-layout/JustifyContent.js
-const JustifyContent_START = "start";
-const JustifyContent_CENTER = "center";
-const JustifyContent_END = "end";
-const SPACE_AROUND = 'space-around';
-const SPACE_BETWEEN = 'space-between';
-const SPACE_EVENLY = 'space-evenly';
+		const parent = element._parent._value;
+		if( parent && parent[`_${this._id}`] ) {
 
-/**
- * @tests '/test/specs/utils/box-layout/justify-content.js'
- * @param {BoxComponent} boxComponent
- * @param {string} direction
- * @param {number} startPos
- * @param {number} REVERSE
- */
-function justifyContent( boxComponent, direction, startPos, REVERSE){
+			return parent[`_${this._id}`].getInheritedInput( parent )
 
-	const JUSTIFICATION = boxComponent.getJustifyContent();
-	if ( AVAILABLE_JUSTIFICATIONS.indexOf( JUSTIFICATION ) === -1 ) {
+		}
 
-		console.warn( `justifyContent === '${ JUSTIFICATION }' is not supported` );
+		return this.getDefaultValue();
 
 	}
 
-	const side = direction.indexOf('row') === 0 ? 'width' : 'height'
-	const usedDirectionSpace = boxComponent.getChildrenSideSum( side );
-
-	const INNER_SIZE = side === 'width' ? boxComponent.innerWidth : boxComponent.innerHeight;
-	const remainingSpace = INNER_SIZE - usedDirectionSpace;
-
-	// Items Offset
-	const axisOffset = ( startPos * 2 ) - ( usedDirectionSpace * Math.sign( startPos ) );
-	// const axisOffset = ( startPos * 2 ) - ( usedDirectionSpace * REVERSE );
-	const justificationOffset = _getJustificationOffset( JUSTIFICATION, axisOffset );
-
-	// Items margin
-	const justificationMargins = _getJustificationMargin( boxComponent.childrenBoxes, remainingSpace, JUSTIFICATION, REVERSE );
+	/**
+	 *
+	 * @return {any}
+	 */
+	getDefaultValue() {
 
-	// Apply
-	const axis = direction.indexOf( 'row' ) === 0 ? "x" : "y"
-	boxComponent.childrenBoxes.forEach( ( child , childIndex ) => {
+		return get( this._id );
 
-		boxComponent.childrenPos[ child.id ][axis] -= justificationOffset - justificationMargins[childIndex];
+	}
 
-	} );
-}
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {any} value
+	 * @return {boolean}
+	 */
+	isValid( value ) { 	/* eslint-enable no-unused-vars */
 
-const AVAILABLE_JUSTIFICATIONS = [
-	JustifyContent_START,
-	JustifyContent_CENTER,
-	JustifyContent_END,
-	SPACE_AROUND,
-	SPACE_BETWEEN,
-	SPACE_EVENLY
-];
+		return true;
 
-/**
- *
- * @param {string} justification
- * @param {number} axisOffset
- * @returns {number}
- */
-function _getJustificationOffset( justification, axisOffset ){
+	}
 
-	// Only end and center have justification offset
-	switch ( justification ){
+	/**
+	 *
+	 */
+	emptyStrategyLogic () {
 
-		case JustifyContent_END:
-			return axisOffset;
+		throw new Error( `ThreeMeshUI::${this.constructor.name} has empty strategy. Update has not been processed.` );
 
-		case JustifyContent_CENTER:
-			return axisOffset / 2;
 	}
 
-	return 0;
 }
 
+
 /**
- *
- * @param items
- * @param spaceToDistribute
- * @param justification
- * @param reverse
- * @returns {any[]}
+ * @typedef Out
+ * @type {Object & Object.<string,any>}
  */
-function _getJustificationMargin( items, spaceToDistribute, justification, reverse ){
 
-	const justificationMargins = Array( items.length ).fill( 0 );
+;// CONCATENATED MODULE: ./src/core/properties/RenderOrderProperty.js
 
-	if ( spaceToDistribute > 0 ) {
 
-		// Only space-*  have justification margin betweem items
-		switch ( justification ) {
+class RenderOrderProperty extends BaseProperty{
 
-			case SPACE_BETWEEN:
-				// only one children would act as start
-				if ( items.length > 1 ) {
+	constructor() {
 
-					const margin = spaceToDistribute / ( items.length - 1 ) * reverse;
-					// set this margin for any children
+		super( 'renderOrder', 'auto', true);
 
-					// except for first child
-					justificationMargins[ 0 ] = 0;
+		this.output = this._outputValue;
 
-					for ( let i = 1; i < items.length; i++ ) {
+		this._actualValue = 0;
+	}
 
-						justificationMargins[ i ] = margin * i;
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set value( value ) {
 
-					}
+		if( ! this.isValid( value) ) return;
 
-				}
+		this._value = value;
 
-				break;
+		this._needsUpdate = true;
 
-			case SPACE_EVENLY:
-				// only one children would act as start
-				if ( items.length > 1 ) {
+	}
 
-					const margin = spaceToDistribute / ( items.length + 1 ) * reverse;
+	update( element, out ) {
 
-					// set this margin for any children
-					for ( let i = 0; i < items.length; i++ ) {
+		if( this._value !== 'auto' ) {
 
-						justificationMargins[ i ] = margin * ( i + 1 );
+			this._actualValue = this._value;
 
-					}
+		} else {
 
-				}
+			const parent = element._parent._value;
+			if( parent !== null ) {
 
-				break;
+				const parentIndex = parent._renderOrder._actualValue;
+				const positionInParent = 1 + parent._children._uis.indexOf( element );
+
+				this._actualValue = parentIndex + positionInParent;
 
-			case SPACE_AROUND:
-				// only one children would act as start
-				if ( items.length > 1 ) {
+			}
 
-					const margin = spaceToDistribute / ( items.length ) * reverse;
+		}
 
-					const start = margin / 2;
-					justificationMargins[ 0 ] = start;
+		// update any children
+		for ( const childUIElement of element._children._uis ) {
 
-					// set this margin for any children
-					for ( let i = 1; i < items.length; i++ ) {
+			const property = childUIElement[`_renderOrder`];
+			if( property._value === 'auto' ) childUIElement[`_renderOrder`]._needsUpdate = true;
 
-						justificationMargins[ i ] = start + margin * i;
+		}
 
-					}
+		this._outputValue( out );
 
-				}
+	}
 
-				break;
+	_outputValue( out ) {
 
-		}
+		out[this._id] = this._actualValue;
 
 	}
 
-	return justificationMargins;
 
-}
+	/**
+	 *
+	 * @return {number}
+	 */
+	get value() { return this._value; }
 
-;// CONCATENATED MODULE: ./src/utils/inline-layout/Whitespace.js
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace#whitespace_helper_functions
- *
- * Throughout, whitespace is defined as one of the characters
- *  "\t" TAB \u0009
- *  "\n" LF  \u000A
- *  "\r" CR  \u000D
- *  " "  SPC \u0020
- *
- * This does not use Javascript's "\s" because that includes non-breaking
- * spaces (and also some other characters).
- **/
-const WHITE_CHARS = { '\t': '\u0009', '\n': '\u000A', '\r': '\u000D', ' ': '\u0020' };
+}
 
-const NORMAL = 'normal';
-const NOWRAP = 'nowrap';
-const PRE = 'pre';
-const PRE_LINE = 'pre-line';
-const PRE_WRAP = 'pre-wrap';
+;// CONCATENATED MODULE: ./src/core/properties/InheritableProperty.js
 
-const AVAILABLE_VALUES = [ NORMAL, NOWRAP, PRE, PRE_LINE, PRE_WRAP ];
 
-/**
- * Check the validity of a whitespace
- * @param value
- * @returns {string}
- */
-function isValid ( value ){
+class InheritableProperty extends BaseProperty {
 
-	if( AVAILABLE_VALUES.indexOf(value) === -1 ){
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 * @param primitive
+	 */
+	constructor( propertyId, value = null, primitive = true ) {
 
-		console.warn(`Whitespace::isValid() The provided white-space value ('${value}') is not valid !`);
-		console.warn(`    - Automatic fallback to ('${PRE_LINE}')`);
+		super( propertyId, value, primitive );
 
-		value = PRE_LINE;
+		// @TODO : I would like to remove this rules ( here )
+		this.output = this._outputValue;
 
+		this._notInheritedValue = null;
 	}
 
-	return value;
-
-}
-
-/**
- * Collapse whitespaces and sequence of whitespaces on string
- *
- * @param textContent
- * @param whiteSpace
- * @returns {*}
- */
-const collapseWhitespaceOnString = function ( textContent, whiteSpace ) {
+	update( element , out ) { 	/* eslint-enable no-unused-vars */
 
-	switch ( whiteSpace ) {
+		this._notInheritedValue = this._value;
 
-		case NOWRAP:
-		case NORMAL:
-			// newlines are treated as other whitespace characters
-			textContent = textContent.replace( /\n/g, ' ' );
-		//falls through
+		if( this._notInheritedValue === 'inherit' )
+		{
+			this._notInheritedValue = this.getInheritedInput( element );
+		}
+		// else
+		// {
+		// 	this.propagate( element );
+		// }
 
-		case PRE_LINE:
-			// collapsed white spaces sequences
-			textContent = textContent.replace( /[ ]{2,}/g, ' ' );
-			break;
+		// @TODO: Evaluate. This might be too much
+		this.propagate( element );
 
-		default:
+		this._outputValue( out );
 
 	}
 
-	return textContent;
-
-};
+	propagate( element ) {
 
-/**
- * Get the breakability of a newline character according to white-space property
- *
- * @param whiteSpace
- * @returns {string|null}
- */
-const newlineBreakability = function ( whiteSpace ) {
+		// rebuild same properties on children 'inheritance'
+		for ( const childUIElement of element._children._uis ) {
 
-	switch ( whiteSpace ) {
+			const property = childUIElement[`_${this._id}`];
+			if( property !== undefined && property._value === 'inherit' ) {
+				childUIElement[`_${this._id}`]._needsUpdate = true;
+			}
 
-		case PRE:
-		case PRE_WRAP:
-		case PRE_LINE:
-			return 'mandatory';
+		}
 	}
 
-	// case NOWRAP:
-	// case NORMAL:
-	// default:
-
-	return null;
+	/**
+	 * Output this property in a dictionnary
+	 * @override
+	 */
+	_outputValue( out ) { 	/* eslint-enable no-unused-vars */
 
-};
+		out[this._id] = this._notInheritedValue;
 
-/**
- * Check for breaks in inlines according to whiteSpace value
- *
- * @param inlines
- * @param i
- * @param lastInlineOffset
- * @param options
- * @returns {boolean}
- */
-const Whitespace_shouldBreak = function( inlines, i, lastInlineOffset, options){
-	const inline = inlines[i];
+	}
 
-	switch ( options.WHITESPACE ){
+	set value ( value ) {
 
-		case NORMAL:
-		case PRE_LINE:
-		case PRE_WRAP:
+		if( ! this.isValid( value) ) return;
 
-			// prevent additional computation if line break is mandatory
-			if( inline.lineBreak === 'mandatory' ) return true;
+		if( this._value !== value ) {
 
-			// Part of inline now
-			// const kerning = inline.kerning ? inline.kerning : 0;
-			// const xoffset = inline.xoffset ? inline.xoffset : 0;
-			// const xadvance = inline.xadvance ? inline.xadvance : inline.width;
+			this._value = value;
 
+			this._needsUpdate = true;
 
-			// ?? Missing letterSpacing ?
-			// prevent additional computation if this character already exceed the available size
-			if( lastInlineOffset + inline.xadvance + inline.xoffset + inline.kerning > options.INNER_WIDTH ) return true;
+		}
 
+	}
+	/**
+	 *
+	 * @override
+	 * @return {any|"inherit"}
+	 */
+	get value() {
 
-			const nextBreak = _distanceToNextBreak( inlines, i, options );
-			return _shouldFriendlyBreak( inlines[ i - 1 ], lastInlineOffset, nextBreak, options );
+		if( this._value === 'inherit' ) return this._notInheritedValue;
 
-		case PRE:
-			return inline.lineBreak === 'mandatory';
+		return this._value;
 
-		case NOWRAP:
-		default:
-			return false;
 	}
+
 }
 
+;// CONCATENATED MODULE: ./src/core/properties/OffsetProperty.js
 
-/**
- * Alter a line of inlines according to white-space property
- * @param line
- * @param {('normal'|'pre-wrap'|'pre-line')} whiteSpace
- */
-const collapseWhitespaceOnInlines = function ( line, whiteSpace ) {
 
-	if( !line[0] ) return 0;
+class OffsetProperty extends InheritableProperty {
 
-	const firstInline = line[ 0 ];
-	const lastInline = line[ line.length - 1 ];
+	constructor( ) {
 
-	// @see https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace
-	//
-	// current implementation is 'pre-line'
-	// if the breaking character is a space, get the previous one
-	switch ( whiteSpace ) {
+		super( 'offset', 'inherit', false );
 
-		// trim/collapse first and last whitespace characters of a line
-		case PRE_WRAP:
-			// only process whiteChars glyphs inlines
-			// if( firstInline.glyph && whiteChars[firstInline.glyph] && line.length > 1 ){
-			if ( firstInline.char && firstInline.char === '\n' && line.length > 1 ) {
+	}
 
-				_collapseLeftInlines( [ firstInline ], line[ 1 ] );
 
-			}
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
 
-			// if( lastInline.glyph && whiteChars[lastInline.glyph] && line.length > 1 ){
-			if ( lastInline.char && lastInline.char === '\n' && line.length > 1 ) {
+		super.update( element, out);
 
-				_collapseRightInlines( [ lastInline ], line[ line.length - 2 ] );
+		// only process if element has ui parent
+		if( element._parent._value !== null ) element.position.z = this._notInheritedValue;
 
-			}
+	}
 
-			break;
 
+}
 
-		case PRE_LINE:
-		case NOWRAP:
-		case NORMAL:
-			let inlinesToCollapse = [];
-			let collapsingTarget;
-			// collect starting whitespaces to collapse
-			for ( let i = 0; i < line.length; i++ ) {
+;// CONCATENATED MODULE: ./src/core/properties/FontSmoothProperty.js
 
-				const inline = line[ i ];
 
-				if ( inline.char && WHITE_CHARS[ inline.char ] && line.length > i ) {
+class FontSmoothProperty extends InheritableProperty{
 
-					inlinesToCollapse.push( inline );
-					collapsingTarget = line[ i + 1 ];
-					continue;
+	constructor() {
 
-				}
+		super( 'fontSmooth', 'inherit', true);
 
-				break;
+		// configure
+		this._needsUpdate = false;
+		this.isValid = _isValid;
+		this.output = this._outputValue;
+	}
 
-			}
+}
 
-			_collapseLeftInlines( inlinesToCollapse, collapsingTarget );
+const AVAILABLE_VALUES = ['inherit','none','antialiased'];
 
+/**
+ *
+ * @param {string} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
 
-			inlinesToCollapse = [];
-			collapsingTarget = null;
-			// collect ending whitespace to collapse
-			for ( let i = line.length - 1; i > 0; i-- ) {
+	if(  AVAILABLE_VALUES.indexOf( value ) === -1 ) {
 
-				const inline = line[ i ];
-				if ( inline.char && WHITE_CHARS[ inline.char ] && i > 0 ) {
+		console.warn(`.fontSmoothing value '${value}' is not valid. Aborted`);
+		return false;
 
-					inlinesToCollapse.push( inline );
-					collapsingTarget = line[ i - 1 ];
-					continue;
+	}
 
-				}
+	return true;
 
-				break;
+}
 
-			}
+;// CONCATENATED MODULE: external "THREE"
+const external_THREE_namespaceObject = THREE;
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/SubStyleProperty.js
 
-			_collapseRightInlines( inlinesToCollapse, collapsingTarget );
-			break;
 
-		case PRE:
-			break;
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
+/* eslint-enable no-unused-vars */
 
-		default:
-			console.warn( `whiteSpace: '${whiteSpace}' is not valid` );
-			return 0;
+/* eslint-disable no-unused-vars */
+class SubStyleProperty extends BaseProperty{
 
-	}
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {boolean} [primitive=true]
+	 * @param {any} defaultValue
+	 */
+	constructor( propertyId, defaultValue, primitive = true) {
 
-	return firstInline.offsetX;
+		super( propertyId, 'unset', primitive );
 
-};
+		/**
+		 * @type {any}
+		 * @internal
+		 */
+		this._input = 'inherit';
 
+		/**
+		 *
+		 * @type {boolean}
+		 * @protected
+		 */
+		this._allowsInherit = true;
 
-/***********************************************************************************************************************
- * Internal logics
- **********************************************************************************************************************/
+		/**
+		 * The input value that won't be 'inherit'
+		 * @type {any}
+		 * @protected
+		 */
+		this._inheritedInput = undefined;
 
+		/**
+		 *
+		 * @type {any}
+		 * @internal
+		 */
+		this._inline = undefined;
 
-/**
- * Visually collapse inlines from right to left ( endtrim )
- * @param {Array} inlines
- * @param targetInline
- * @private
- */
-function _collapseRightInlines( inlines, targetInline ) {
+	}
 
-	if ( !targetInline ) return;
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 * @param {Object.<string,any> } out
+	 */
+	update( element, out ) {
 
-	for ( let i = 0; i < inlines.length; i++ ) {
+		if( !this._allowsInherit ) {
 
-		const inline = inlines[ i ];
+			this._inheritedInput = this.getInheritedInput( element );
 
-		// inline.width = 0;
-		// inline.height = 0;
-		inline.fontFactor = 0;
-		// inline.offsetX = targetInline.offsetX + targetInline.width;
-		inline.offsetX = targetInline.offsetX + targetInline.cumulativeWidth;
-		// inline.offsetX -= inline.cumulativeWidth;
+		}
 
-	}
+		this.computeOutputValue( element );
 
-}
+		// rebuild same properties on children 'inheritance'
+		for ( const childUIElement of element._children._uis ) {
 
-/**
- * Visually collapse inlines from left to right (starttrim)
- * @param {Array} inlines
- * @param targetInline
- * @private
- */
-function _collapseLeftInlines( inlines, targetInline ) {
+			const property = childUIElement[`_${this._id}`];
 
-	if ( !targetInline ) return;
+			if( !property ) continue;
 
-	for ( let i = 0; i < inlines.length; i++ ) {
+			const target = property._input ? property._input : property._value;
 
-		const inline = inlines[ i ];
+			if( target === 'inherit' ) childUIElement[`_${this._id}`]._needsUpdate = true;
 
-		// inline.width = 0;
-		// inline.height = 0;
-		inline.fontFactor = 0;
-		// inline.offsetX = targetInline.offsetX;
-		inline.offsetX += inline.cumulativeWidth;
+		}
 
-	}
+		this.output( out );
 
-}
+	}
 
-/**
- * get the distance in world coord to the next glyph defined
- * as break-line-safe ( like whitespace for instance )
- * @private
- */
-function _distanceToNextBreak( inlines, currentIdx, options, accu ) {
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) {
 
-	accu = accu || 0;
+		this._value = this._input;
 
-	// end of the text
-	if ( !inlines[ currentIdx ] ) return accu;
+	}
 
-	const inline = inlines[ currentIdx ];
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	_computeFromInherited( element ) {
 
-	// const kerning = inline.kerning ? inline.kerning : 0;
-	// const xoffset = inline.xoffset ? inline.xoffset : 0;
-	// const xadvance = inline.xadvance ? inline.xadvance : inline.width;
+		this._value = this._inheritedInput;
 
-	// if inline.lineBreak is set, it is 'mandatory' or 'possible'
-	if ( inline.lineBreak ) return accu + inline.xadvance;
+	}
 
-	// no line break is possible on this character
-	return _distanceToNextBreak(
-		inlines,
-		currentIdx + 1,
-		options,
-		accu + inline.xadvance + inline.xoffset + inline.kerning + options.LETTERSPACING
-	);
 
-}
+	/**
+	 * @override
+	 * @deprecated
+	 * @param {any} v
+	 */
+	set value( v ) {
 
-/**
- * Test if we should line break here even if the current glyph is not out of boundary.
- * It might be necessary if the last glyph was break-line-friendly (whitespace, hyphen..)
- * and the distance to the next friendly glyph is out of boundary.
- */
-function _shouldFriendlyBreak( prevChar, lastInlineOffset, nextBreak, options ) {
+		console.warn(".(style) sub-property cannot be directly set. It must comes from inline or computed setter.")
 
-	// We can't check if last glyph is break-line-friendly it does not exist
-	if ( !prevChar || !prevChar.char ) return false;
+	}
 
-	// Next break-line-friendly glyph is inside boundary
-	if ( lastInlineOffset + nextBreak < options.INNER_WIDTH ) return false;
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set inline( value ) {
 
-	// Previous glyph was break-line-friendly
-	return options.BREAKON.indexOf( prevChar.char ) > -1;
+		if( ! this.isValidValue( value ) ) return;
 
-}
+		if( value === this._inline ) {
 
-;// CONCATENATED MODULE: ./src/utils/inline-layout/TextAlign.js
-//JSDoc related import
-/* eslint-disable no-unused-vars */
+			// do nothing no update, the value hasn't changed
+			return;
 
-/* eslint-enable no-unused-vars */
+		}
 
-const LEFT = 'left';
-const RIGHT = 'right';
-const TextAlign_CENTER = 'center';
-const JUSTIFY = 'justify';
-const JUSTIFY_LEFT = 'justify-left';
-const JUSTIFY_RIGHT = 'justify-right';
-const JUSTIFY_CENTER = 'justify-center';
+		this._input = this._inline = value;
 
-/**
- *
- * @param boxComponent
- * @param {Array.<Array.<InlineGlyph>>} lines
- * @param ALIGNMENT
- * @param INNER_WIDTH
- */
-function textAlign( boxComponent, lines, ALIGNMENT, INNER_WIDTH ) {
+		this._needsUpdate = true;
 
-	// Start the alignment by sticking to directions : left, right, center
-	for ( let i = 0; i < lines.length; i++ ) {
+	}
 
-		const line = lines[ i ];
+	/**
+	 *
+	 * @return {any}
+	 */
+	get inline() { return this._inline; }
 
-		// compute the alignment offset of the line
-		const offsetX = _computeLineOffset( line, ALIGNMENT, INNER_WIDTH, i === lines.length - 1 );
+	/**
+	 *
+	 * @param {any} value
+	 * @return {boolean}
+	 */
+	isValidValue( value ) {
 
-		const padding = boxComponent._padding;
-		const border = boxComponent._borderWidth;
+		return true;
 
-		// const paddingAmount = - ( padding.w + padding.y ) / 2 - ( border.w + border.y ) / 2;
-		// const paddingAmount = - ( padding.w + padding.y ) / 2;
-		const paddingAmount = ( - padding.w + padding.y ) / 2 + ( - border.w + border.y ) / 2;
+	}
 
-		// apply the offset to each characters of the line
-		for ( let j = 0; j < line.length; j++ ) {
+	/**
+	 * @param {MeshUIBaseElement} element
+	 */
+	getInheritedInput ( element ) {
 
-			line[ j ].offsetX += offsetX - paddingAmount;
-			// line[ j ].offsetX += offsetX;
+		if( this._input !== 'inherit' ) return this._input;
 
-		}
+		const parent = element._parent._value;
+		if( parent ) {
 
-	}
+			const parentProperty = parent[`_${this._id}`];
 
-	// last operations for justifications alignments
-	if ( ALIGNMENT.indexOf( JUSTIFY ) === 0 ) {
+			if( !parentProperty ) return this.getDefaultValue();
 
-		for ( let i = 0; i < lines.length; i++ ) {
+			return parent[`_${this._id}`].getInheritedInput( parent )
 
-			const line = lines[ i ];
+		}
 
+		return this.getDefaultValue();
 
-			// do not process last line for justify-left or justify-right
-			if ( ALIGNMENT.indexOf( '-' ) !== -1 && i === lines.length - 1 ) return;
+	}
 
-			// can only justify is space is remaining
-			const REMAINING_SPACE = INNER_WIDTH - line.width;
-			if ( REMAINING_SPACE <= 0 ) return;
+}
+/* eslint-enable no-unused-vars */
 
-			// count the valid spaces to extend
-			// Do not take the first nor the last space into account
-			let validSpaces = 0;
-			for ( let j = 1; j < line.length - 1; j++ ) {
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/StyleVector4Property.js
 
-				validSpaces += line[ j ].char === ' ' ? 1 : 0;
 
-			}
-			const additionalSpace = REMAINING_SPACE / validSpaces;
 
+class StyleVector4Property extends SubStyleProperty {
 
-			// for right justification, process the loop in reverse
-			let inverter = 1;
-			if ( ALIGNMENT === JUSTIFY_RIGHT ) {
+	constructor( propertyId, defaultValue ) {
 
-				line.reverse();
-				inverter = -1;
+		super( propertyId, defaultValue, false );
 
-			}
+		/**
+		 *
+		 * @type {Vector4}
+		 * @private
+		 */
+		this._input = this._vector4ValueSetter( new external_THREE_namespaceObject.Vector4(0,0,0,0), defaultValue);
 
-			let incrementalOffsetX = 0;
+		/**
+		 *
+		 * @type {any}
+		 * @internal
+		 */
+		this._inline = null;
 
-			// start at ONE to avoid first space
-			for ( let j = 1; j <= line.length - 1; j++ ) {
+		/**
+		 * @override
+		 * @type {Vector4}
+		 * @protected
+		 */
+		this._value = new external_THREE_namespaceObject.Vector4(0,0,0,0);
 
-				// apply offset on each char
-				const inlineCharacter = line[ j ];
-				inlineCharacter.offsetX += incrementalOffsetX * inverter;
+	}
 
-				// and increase it when space
-				incrementalOffsetX += inlineCharacter.char === ' ' ? additionalSpace : 0;
+	/**
+	 * @override
+	 * @return {Vector4}
+	 */
+	get value(){
 
-			}
+		return this._value;
 
-			// for right justification, the loop was processed in reverse
-			if ( ALIGNMENT === JUSTIFY_RIGHT ) {
-				line.reverse();
-			}
+	}
 
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @override
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-		}
+		this._vector4ValueSetter( this._value, this._input, element );
 
 	}
 
-}
+	set inline( value ) {
 
+		this._vector4ValueSetter( this._input, value );
 
-const _computeLineOffset = ( line, ALIGNMENT, INNER_WIDTH, lastLine ) => {
+		if( this._input.equals( this._value) ) return;
 
-	switch ( ALIGNMENT ) {
+		this._needsUpdate = true;
 
-		case JUSTIFY_LEFT:
-		case JUSTIFY:
-		case LEFT:
-			return -INNER_WIDTH / 2;
+	}
 
-		case JUSTIFY_RIGHT:
-		case RIGHT:
-			return -line.width + ( INNER_WIDTH / 2 );
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set top( v ) {
 
+		if( this._input.x === v ) return;
 
-		case TextAlign_CENTER:
-			return -line.width / 2;
+		this._input.x = v;
+		this._needsUpdate = true;
 
-		case JUSTIFY_CENTER:
-			if ( lastLine ) {
+	}
 
-				// center alignement
-				return -line.width / 2;
 
-			}
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get top() { return this._input.x; }
 
-				// left alignment
-				return -INNER_WIDTH / 2;
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set right( v ) {
 
-		default:
-			console.warn( `textAlign: '${ALIGNMENT}' is not valid` );
+		if( this._input.y === v ) return;
 
+		this._input.y = v;
+		this._needsUpdate = true;
 	}
 
-};
-
-;// CONCATENATED MODULE: ./src/utils/inline-layout/InlineJustification.js
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get right() { return this._input.y; }
 
-function justifyInlines( boxComponent, lines, JUSTIFICATION, INNER_HEIGHT ){
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set bottom( v ) {
+		if( this._input.z === v ) return;
 
-	const textHeight = Math.abs( lines.height );
+		this._input.z = v;
+		this._needsUpdate = true;
+	}
 
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get bottom() { return this._input.z; }
 
-	// Line vertical positioning
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set left( v ) {
 
-	let justificationOffset = ( () => {
-		switch ( JUSTIFICATION ) {
+		if( this._input.w === v ) return;
 
-			case 'start':
-				// return ( INNER_HEIGHT / 2 ) - lines[ 0 ].lineHeight - boxComponent._padding.x ;
-				// return boxComponent._padding.x - lines[0].lineHeight ;
-				// return (INNER_HEIGHT * .5) + boxComponent._padding.x - (lines[0].lineHeight * .5);
-				return (INNER_HEIGHT * .5) - lines[0].lineHeight;
+		this._input.w = v;
+		this._needsUpdate = true;
+	}
 
-			case 'end':
-				return textHeight - lines[ 0 ].lineHeight - ( INNER_HEIGHT / 2 );
 
-			case 'space-around':
-			case 'space-between':
-			case 'space-evenly':
-			case 'center':
-				return ( textHeight / 2 ) - lines[ 0 ].lineHeight ;
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get left() { return this._input.w; }
 
-			default:
-				console.warn( `justifyContent: '${JUSTIFICATION}' is not valid` );
+	dispose(){
 
-		}
-	} )();
+		this._computed = null;
+		this._inline = null;
+		this._input = null;
+		this._output = null;
 
-	// Apply padding
-	const padding = boxComponent._padding;
-	const border = boxComponent._borderWidth;
+	}
 
-	justificationOffset += ( - padding.x + padding.z ) / 2 + ( - border.x + border.z ) / 2;
+	/**
+	 *
+	 * @param {Vector4} vector4
+	 * @param {Vector4|Array.<Number>|Number|String} value
+	 * @protected
+	 */
+	_vector4ValueSetter( vector4, value ) {
 
-	//
+		if ( value instanceof external_THREE_namespaceObject.Vector4 ) {
 
-	lines.forEach( ( line ) => {
+			return vector4.copy( value );
 
-		line.y += justificationOffset;
-		line.forEach( ( inline ) => {
+		}
 
-			inline.offsetY += justificationOffset;
+		if ( typeof value === 'string' || value instanceof String ) {
 
-		} );
+			value = value.split( ' ' );
 
-	} );
+		}
 
-}
+		if ( Array.isArray( value ) ) {
 
-;// CONCATENATED MODULE: ./src/components/core/Line.js
-//JSDoc related imports
-/* eslint-disable no-unused-vars */
+			value = value.map( v => parseFloat( v ) );
 
-/* eslint-enable no-unused-vars */
+			switch ( value.length ) {
 
+				case 1:
+					return vector4.setScalar( value[ 0 ] );
 
-/**
- * Line represents an horizontal combination of positioned inlines with additional properties
- */
-class Line extends Array {
+				case 2:
+					vector4.x = vector4.z = value[ 0 ];
+					vector4.y = vector4.w = value[ 1 ];
+					return vector4;
 
-	/**
-	 *
-	 * @param {Inline[]} items
-	 */
-	constructor(...items) {
-		super(...items);
+				case 3:
+					vector4.x = value[ 0 ];
+					vector4.y = value[ 1 ];
+					vector4.z = value[ 2 ];
+					return vector4;
 
-		/**
-		 * The width of this line
-		 * @type {number}
-		 */
-		this.width = 0;
+				case 4:
+					vector4.x = value[ 0 ];
+					vector4.y = value[ 1 ];
+					vector4.z = value[ 2 ];
+					vector4.w = value[ 3 ];
+					return vector4;
 
-		/**
-		 * The maximum lineBase of this line of inlines
-		 * @type {number}
-		 */
-		this.lineBase = 0;
+				default:
+					console.error( 'StyleVector4Property::set() Four Dimension property had more than four values' );
+					return;
 
-		/**
-		 * The maximum lineHeight of this line of inlines
-		 * @type {number}
-		 */
-		this.lineHeight = 0;
+			}
 
-		/**
-		 * The vertical position of this line
-		 * @type {number}
-		 */
-		this.y = 0;
+		}
+
+		if ( !isNaN( value ) ) {
+
+			vector4.setScalar( value );
+
+		}
+
+		return vector4;
 
 	}
 
 }
 
-;// CONCATENATED MODULE: ./src/components/core/Lines.js
-//JSDoc related imports
-/* eslint-disable no-unused-vars */
 
-/* eslint-enable no-unused-vars */
 
-/**
- * Lines represents a vertical succession of Line
- */
-class Lines extends Array {
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/bounds/PaddingProperty.js
 
-	/**
-	 *
-	 * @param {Line} items
-	 */
-	constructor(...items) {
-		super(...items);
 
-		/**
-		 * The maximum width of Line items
-		 * @type {number}
-		 */
-		this.width = 0;
 
-		/**
-		 * The addition of height of any Line
-		 * @type {number}
-		 */
-		this.height = 0;
 
-	}
+class PaddingProperty extends StyleVector4Property {
 
-}
+	constructor( defaultValue ) {
 
-;// CONCATENATED MODULE: ./src/font/FontVariant.js
+		super('padding', defaultValue )
 
+	}
 
+	computeOutputValue( element ) {
 
-// JSDoc related imports
-/* eslint-disable no-unused-vars */
+		super.computeOutputValue( element );
 
+		element._bounds._needsUpdate = true;
+		element._bounds._needsRender = true;
+		element._layouter._needsProcess = true;
+		element._renderer._needsRender = true;
 
+		if( element._parent._value ){
+			element._parent._value._layouter._needsProcess = true;
+		}
+	}
 
+}
 
-/* eslint-enable no-unused-vars */
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/Style4DimensionsProperty.js
 
 
-/**
- * @abstract
- */
-class FontVariant extends external_THREE_namespaceObject.EventDispatcher {
 
-	/**
-	 *
-	 * @param {string} weight
-	 * @param {string} style
-	 */
-	constructor( weight, style ) {
 
-		super();
+class Style4DimensionsProperty extends StyleVector4Property {
 
-		/** @private */ this._isReady = false;
+	constructor( propertyId, defaultValue ) {
 
-		/** @protected */ this._weight = weight;
-		/** @protected */ this._style = style;
+		super( propertyId, defaultValue, false );
 
-		/** @protected */ this._size = 42;
-		/** @protected */ this._lineHeight = 42;
-		/** @protected */ this._lineBase = 42;
+	}
 
-		/**
-		 *
-		 * @type {TypographicFont}
-		 * @protected
-		 */
-		this._font = null;
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		console.log( this._value, this._input)
+		this._vector4ValueSetterFinal( this._value, this._input, element );
 
 	}
 
-	/**
-	 *
-	 * @returns {TypographicFont}
-	 */
-	get typographic() { return this._font; }
+	set inline( value ) {
 
-	/**
-	 *
-	 * @returns {boolean}
-	 */
-	get isReady() {
+		this._input = value;
 
-		return this._isReady;
+		this._needsUpdate = true;
 
 	}
 
 	/**
 	 *
-	 * @returns {string}
+	 * @param {Vector4} vector4
+	 * @param {Vector4|Array.<Number>|Number|String} value
+	 * @protected
 	 */
-	get weight() {
+	_vector4ValueSetterFinal( vector4, value, element ) {
 
-		return this._weight;
+		if ( value instanceof external_THREE_namespaceObject.Vector4 ) {
 
-	}
+			return vector4.copy( value );
 
-	/**
-	 *
-	 * @returns {string}
-	 */
-	get style() {
+		}
 
-		return this._style;
+		if ( typeof value === 'string' || value instanceof String ) {
 
-	}
+			value = value.split( ' ' );
 
-	/**
-	 *
-	 * @returns {Texture}
-	 */
-	get texture() {
+		}
 
-		return this._texture;
+		if ( Array.isArray( value ) ) {
 
-	}
+			switch ( value.length ) {
 
-	/**
-	 * @param {Function.<ShaderMaterial|Material>} v
-	 * @abstract
-	 */
-	set fontMaterial( v ) {
-		throw Error( `FontVariant('${this.id}')::fontMaterial - is abstract.` );
-	}
+				case 1:
+					return vector4.setScalar( this._parseValue( value[ 0 ], element ) );
 
-	/**
-	 * @return {Function.<ShaderMaterial|Material>}
-	 * @abstract
-	 */
-	get fontMaterial() {
-		throw Error( `FontVariant('${this.id}')::fontMaterial - is abstract.` );
-	}
+				case 2:
+					vector4.x = vector4.z = this._parseValue(value[ 0 ]);
+					vector4.y = vector4.w = this._parseValue(value[ 1 ]);
+					return vector4;
 
-	/**
-	 *
-	 * @returns {string}
-	 */
-	get id(){
-		return `${this._name}(w:${this.weight},s:${this.style})`;
-	}
+				case 3:
+					vector4.x = this._parseValue(value[ 0 ]);
+					vector4.y = this._parseValue(value[ 1 ]);
+					vector4.z = this._parseValue(value[ 2 ]);
+					return vector4;
 
-	/**
-	 *
-	 * @param {string} character
-	 * @returns {MSDFTypographicGlyph}
-	 */
-	getTypographicGlyph( character ) {
+				case 4:
+					vector4.x = this._parseValue(value[ 0 ]);
+					vector4.y = this._parseValue(value[ 1 ]);
+					vector4.z = this._parseValue(value[ 2 ]);
+					vector4.w = this._parseValue(value[ 3 ]);
+					return vector4;
 
-		let typographicGlyph = this._chars[ character ];
-		if ( typographicGlyph ) return typographicGlyph;
+				default:
+					console.error( 'StyleVector4Property::set() Four Dimension property had more than four values' );
+					return;
 
-		if ( character.match( /\s/ ) ) return this._chars[ " " ];
+			}
 
-		const fallbackCharacter = font_FontLibrary.missingCharacter( this, character );
-		if( fallbackCharacter ) {
+		}
 
-			typographicGlyph = this._chars[ fallbackCharacter ];
-			if ( typographicGlyph ) return typographicGlyph;
+		if ( !isNaN( value ) ) {
+
+			vector4.setScalar( value );
 
 		}
 
-		throw Error( `FontVariant('${this.id}')::getTypographicGlyph() - character('${character}') and/or fallback character were not found in provided msdf charset.` );
+		return vector4;
+
 	}
 
-	/* eslint-disable no-unused-vars */
 
+	_parseValue( v , element ){
 
-	/**
-	 * Convert an InlineCharacter to a geometry
-	 *
-	 * @abstract
-	 * @param {InlineGlyph} inline
-	 * @returns {BufferGeometry|Array.<BufferGeometry>}
-	 */
-	getGeometricGlyph( inline, segments = 1 ) {
+		if( !isNaN(v) ) return parseFloat(v);
 
-		throw new Error(`FontVariant(${typeof this})::getGeometryCharacter() is abstract and should therefore be overridden.`);
+		if( v.endsWith('em') ) {
 
-	}
+			return parseFloat( v.replace(/[^0-9.]+/,"") ) * element._fontSize._value;
 
-	/* eslint-enable no-unused-vars */
+		}
 
+	}
 
-	/**
-	 * Obtain the kerning amount of a glyphPair
-	 * @param {string} glyphPair
-	 * @returns {number}
-	 */
-	getKerningAmount( glyphPair ){
+}
 
-		//or zero offset if kerning glyphPais is not defined
-		return this._kernings[ glyphPair ] ? this._kernings[ glyphPair ] : 0;
 
-	}
 
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/bounds/MarginProperty.js
 
-	/**
-	 * Perform some changes on the character description of this font
-	 * @param {Object.<string,Object.<string,number|string>>} adjustmentObject
-	 */
-	adjustTypographicGlyphs( adjustmentObject ){
 
-		for ( const char in adjustmentObject ) {
 
-			const typographicGlyph = this.getTypographicGlyph( char );
-			const glyphAdjustment = adjustmentObject[ char ];
-			for ( const propertyToAdjust in glyphAdjustment ) {
 
-				typographicGlyph["_"+propertyToAdjust] = adjustmentObject[char][propertyToAdjust];
+// export default class MarginProperty extends StyleVector4Property {
+class MarginProperty extends Style4DimensionsProperty {
 
-			}
+	constructor() {
 
-		}
+		super('margin', new external_THREE_namespaceObject.Vector4(0,0,0,0) )
 
 	}
 
-	/**
-	 *
-	 * @private
-	 */
-	_checkReadiness() {
+	computeOutputValue( element ) {
 
-		if ( this._readyCondition() ) {
+		super.computeOutputValue( element );
 
-			_setReady( this );
+		element._renderer._needsRender = true;
 
+		if( element._parent._value ){
+			element._parent._value._flexDirection._needsProcess = true;
 		}
-
 	}
 
-	/**
-	 *
-	 * @abstract
-	 * @returns {boolean}
-	 * @protected
-	 */
-	_readyCondition () {
+}
 
-		// ie: MSDFFontVariant
-		// Must have chars and a texture
-		// return this._chars && this._texture
+;// CONCATENATED MODULE: ./src/utils/mediator/transformers/CommonTransformers.js
+/**
+ * Transfer the alphaTest value from MeshUIComponent to material
+ * @type {import('../Mediator').MediationTransformer}
+ */
+const directTransfer = function ( target, targetProperty, value ) {
 
-		throw new Error(`FontVariant(${typeof this})::_readyCondition() is abstract and should therefore be overridden.`);
-	}
+	target[targetProperty] = value;
 
 }
 
-/***********************************************************************************************************************
- * INTERNAL STUFF
- **********************************************************************************************************************/
+const directTransferNotNull = function( target, targetProperty, value ) {
 
+	if( value === null ) return;
 
-const _readyEvent = { type: 'ready' };
-
-/**
- * Set the ready status of a fontVariant
- * @param {FontVariant} fontVariant
- * @private
- */
-function _setReady( fontVariant ) {
-
-	fontVariant._isReady = true;
-	fontVariant.dispatchEvent( _readyEvent );
+	target[targetProperty] = value;
 
 }
 
+;// CONCATENATED MODULE: ./src/utils/mediator/Mediator.js
 
-;// CONCATENATED MODULE: ./src/font/TypographicFont.js
-class TypographicFont {
 
-	constructor() {
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-		/** @protected */ this._size = 42;
-		/** @protected */ this._lineHeight = 42;
-		/** @protected */ this._lineBase = 38;
-		/** @protected */ this._name = "-";
-		/** @protected */ this._charset = "";
+/* eslint-enable no-unused-vars */
+/**
+ * An option function to transform value from subject to target
+ * @typedef {(target:any, targetProperty:string, value:any) => void} MediationTransformer
+ *
+ */
 
-	}
+/**
+ * @typedef {Object.<{subjectProperty:string, trans?:MediationTransformer}>} MediationDefinition
+ *
+ */
 
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get size() { return this._size; }
+class Mediator{
 
 	/**
-	 *
-	 * @returns {number}
+	 * @constructor
+	 * @param {MediationDefinition} definition
 	 */
-	get lineHeight() { return this._lineHeight; }
+	constructor( definition ) {
 
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get lineBase() { return this._lineBase; }
+		/**
+		 *
+		 * @type {MediationDefinition}
+		 * @private
+		 */
+		this._definition = definition;
 
-	/**
-	 *
-	 * @returns {string}
-	 */
-	get name() { return this._name; }
+	}
 
 	/**
 	 *
-	 * @returns {string}
+	 * @param {MediationDefinition} value
 	 */
-	get charset() { return this._charset; }
-
-}
+	set definition( value ) {
 
-;// CONCATENATED MODULE: ./src/font/msdf/MSDFTypographicFont.js
+		this._definition = value;
 
+	}
 
-class MSDFTypographicFont extends TypographicFont{
 
 	/**
 	 *
-	 * @param {import('./MSDFFontVariant').MSDFJson} json
+	 * @param {MeshUIBaseElement} subject
+	 * @param {any} target
+	 * @param {Object.<(string|number), any>} options
+	 * @param {any} [secondTarget=null]
 	 */
-	constructor( json ) {
+	mediate( subject, target, options, secondTarget = null ) {
 
-		super();
+		// Mediate each subject properties to material
+		for ( const subjectProperty in this._definition ) {
+			const mediationDefinition = this._definition[subjectProperty];
 
-		// base description
-		this._size = json.info.size;
-		this._lineHeight = json.common.lineHeight;
-		this._lineBase = json.common.base;
+			if ( options[subjectProperty] !== undefined ) {
 
-		this._name = json.info.face;
+				// retrieve the mediation transformer to use for this property
+				const mediationTransformer = mediationDefinition.t ? mediationDefinition.t : directTransfer;
+				mediationTransformer( target, mediationDefinition.m, options[subjectProperty] );
 
-		// MSDF
-		this._textureWidth = json.common.scaleW;
-		this._textureHeight = json.common.scaleH;
+				// Also transfert to second target is isset
+				if( secondTarget ) {
 
-		this._charset = json.chars.map( char => char.char ).join("");
+					mediationTransformer( secondTarget, mediationDefinition.m, options[subjectProperty] );
+
+				}
+
+			}
+
+		}
 
 	}
 
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get textureWidth() { return this._textureWidth; }
+
+	/***********************************************************************************************************************
+	 * STATIC
+	 **********************************************************************************************************************/
 
 	/**
 	 *
-	 * @returns {number}
+	 * @param {MeshUIComponent} subject
+	 * @param {any} target
+	 * @param {Object.<(string|number), any>} options
+	 * @param {Object.<{subjectProperty:string, t?:(target:any, targetProperty:string, value:any) => void}>} mediationDefinitions
+	 * @param {any} [secondTarget=null]
 	 */
-	get textureHeight() { return this._textureHeight; }
+	static mediate( subject, target, options, mediationDefinitions, secondTarget = null ) {
+
+		// Cannot mediate if target not defined
+		if( !target ) return;
+
+		// Mediate each subject properties to material
+		for ( const subjectProperty in mediationDefinitions ) {
+			const definition = mediationDefinitions[subjectProperty];
+
+			if ( options[subjectProperty] !== undefined ) {
+
+				// retrieve the mediation transformer to use for this property
+				const mediationTransformer = definition.t ? definition.t : directTransfer;
+				mediationTransformer( target, definition.m, options[subjectProperty] );
+
+				// Also transfert to second target is isset
+				if( secondTarget ) {
+
+					mediationTransformer( secondTarget, definition.m, options[subjectProperty] );
+
+				}
+
+			}
+
+		}
+
+	}
+
 
 }
 
-;// CONCATENATED MODULE: ./src/font/TypographicGlyph.js
+;// CONCATENATED MODULE: ./src/core/properties/hierarchy/ParentProperty.js
+
+
 //JSDoc related imports
 /* eslint-disable no-unused-vars */
 
-
 /* eslint-enable no-unused-vars */
 
-/**
- * @class
- * @abstract
- */
-class TypographicGlyph {
-
-	/**
-	 *
-	 * @param {TypographicFont} typographicFont
-	 */
-	constructor( typographicFont ) {
+class ParentProperty extends BaseProperty {
 
-		/** @protected */ this._char = "";
-		/** @protected */ this._width = 1;
-		/** @protected */ this._heigth = 1;
-		/** @protected */ this._xadvance = 1;
-		/** @protected */ this._xoffset = 0;
-		/** @protected */ this._yoffset = 0;
+	constructor() {
 
-		/**
-		 *
-		 * @type {TypographicFont}
-		 * @protected
-		 */
-		this._font = typographicFont;
+		super('parent', null, false);
 
 	}
 
+	/* eslint-disable no-unused-vars */
 	/**
+	 * Update when :
+	 * 		- element has been added
+	 * 		- element has been removed
 	 *
-	 * @returns {TypographicFont}
+	 * @param element
+	 * @param out
 	 */
-	get font() {
+	update( element, out ) {
+		/* eslint-enable no-unused-vars */
 
-		return this._font;
+		if ( element.parent && element.parent.isUI ) {
 
-	}
+			this._value = element.parent;
+			// this.position.z = this.getOffset();
 
-	/**
-	 *
-	 * @return {string}
-	 */
-	get char() {
+		} else {
 
-		return this._char;
+			this._value = null;
 
-	}
+		}
 
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get width() {
+		// @TODO : parentElement
+		// // set elements as root
+		// if ( element.isBlock && !this._value ) {
+		//
+		// 	ThreeMeshUI.addRoot( element );
+		// 	element.pseudoClassList.add('root');
+		//
+		// } else {
+		//
+		// 	ThreeMeshUI.removeRoot( element );
+		// 	element.pseudoClassList.remove('root');
+		//
+		// }
 
-		return this._width;
 
 	}
 
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get height() {
+	set value( value ) {
 
-		return this._heigth;
+		console.warn('ParentProperty is readonly');
 
 	}
 
 	/**
 	 *
-	 * @returns {number}
+	 * @return {MeshUIBaseElement}
 	 */
-	get xadvance() {
-
-		return this._xadvance;
+	get value() { return this._value; }
 
-	}
 
 	/**
 	 *
-	 * @returns {number}
+	 * @param {(p:Object3D)=>boolean } conditionCallback
 	 */
-	get xoffset() {
+	find( conditionCallback ) {
 
-		return this._xoffset;
+		if( this._value ) {
 
-	}
+			if( conditionCallback( this._value) ) {
 
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get yoffset() {
+				return this._value;
 
-		return this._yoffset;
+			}
 
-	}
+			return this._value._parent.find( conditionCallback );
 
-	/**
-	 *
-	 * @param value
-	 */
-	set yoffset( value ) {
+		}
 
-		this._yoffset = value;
+		return null;
 
 	}
 
+
 	/**
 	 *
-	 * @abstract
-	 * @returns {InlineGlyph}
 	 */
-	asInlineGlyph() {
+	dispose() {
 
-		throw new Error("Abstract... Need to be implemented")
+		this._value = null;
 
 	}
 
+
 }
 
-;// CONCATENATED MODULE: ./src/components/core/Inline.js
+;// CONCATENATED MODULE: ./src/utils/NumberUtils.js
 /**
- * This is the abstract/base class / interface of any inline
- * Inline can be positioned according to text rules
+ * Get rid of the precision issue
+ * @param numA
+ * @param numB
+ * @param precision
+ * @return {boolean}
  */
-class Inline {
+const numberEquals = function ( numA, numB, precision = 6 ) {
 
-	constructor() {
+	return numA.toFixed(precision) === numB.toFixed(precision)
 
-		/** @protected */ this._offsetX = 0;
-		/** @protected */ this._offsetY = 0;
+}
 
-		/** @protected */ this._lineBreak = null;
+/**
+ *
+ * @param unprecisedNumber
+ * @param precision
+ * @return {number}
+ */
+const numberPrecise = function ( unprecisedNumber, precision = 6 ) {
 
-		/** @protected */ this._kerning = 0;
+	return parseFloat( unprecisedNumber.toFixed( precision ) );
 
-		/** @protected */ this._fontFactor = 1;
-		/** @protected */ this._fontSize = 0;
+}
 
-		/** @protected */ this._cumulativeWidth = 0;
+;// CONCATENATED MODULE: ./src/core/properties/NumberProperty.js
 
-		/** @protected */ this._paddingLeft = 0;
-		/** @protected */ this._paddingRight = 0;
 
-		/** @protected */ this._marginLeft = 0;
-		/** @protected */ this._marginRight = 0;
 
-	}
+class NumberProperty extends BaseProperty{
 
 	/**
-	 * @returns {void}
+	 *
+	 * @param {string} propertyId
+	 * @param {number} [value]
 	 */
-	resetOffsets() {
+	constructor( propertyId, value ) {
 
-		this._offsetX = this._offsetY = 0;
-		this._cumulativeWidth = 0;
+		super( propertyId, value, true);
 
+		this.output = this._outputValue;
 	}
 
 	/**
-	 * The horizontal distance this inline fills
-	 * @returns {number}
+	 *
+	 * @param {number} value
 	 */
-	get xadvance() { return 0 }
+	set value( value ) {
 
-	/**
-	 * The offset x of this inline in a line
-	 * @returns {number}
-	 */
-	get xoffset() { return 0 }
+		if( ! this.isValid( value) ) return;
 
-	/**
-	 * The offset y of this inline in a line
-	 * @returns {number}
-	 */
-	get yoffset() { return 0 }
+		if( numberEquals(this._value, value) ) return;
 
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get width() { return 0 }
+		this._value = value;
 
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get height() { return 0 }
+		this._needsUpdate = true;
 
-	/**
-	 *
-	 * @param {string|null} value
-	 */
-	set lineBreak( value ){
+	}
 
-		this._lineBreak = value;
 
-	}
 
 	/**
 	 *
-	 * @returns {string|null}
+	 * @return {number}
 	 */
-	get lineBreak() { return this._lineBreak; }
+	get value() { return this._value; }
 
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get anchor() { return 0 }
+}
 
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get kerning() { return this._kerning * this._fontFactor; }
+;// CONCATENATED MODULE: ./src/core/properties/SideProperty.js
 
-	/**
-	 *
-	 * @param {number} value
-	 */
-	set kerning( value ) {
 
-		this._kerning = value;
 
-	}
+/**
+ * @property {number|"inherit"} value
+ */
+class SideProperty extends InheritableProperty {
 
 	/**
 	 *
-	 * @returns {number}
+	 * @param {string} propertyId
 	 */
-	get fontSize() { return this._fontSize }
+	constructor( propertyId ) {
 
-	/**
-	 *
-	 * @param {number} value
-	 */
-	set fontSize( value ) {
+		super( propertyId, 'inherit', true);
 
-		this._fontSize = value;
+		this.isValid = SideProperty_isValid;
 
 	}
 
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get lineHeight() { return 0 }
+}
 
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get offsetX() { return this._offsetX; }
+const SideProperty_AVAILABLE_VALUES = [ external_THREE_namespaceObject.FrontSide, external_THREE_namespaceObject.BackSide, external_THREE_namespaceObject.DoubleSide ];
 
-	/**
-	 *
-	 * @param value
-	 */
-	set offsetX( value ){
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function SideProperty_isValid( value ) {
 
-		this._offsetX = value;
+	if( SideProperty_AVAILABLE_VALUES.indexOf( value) === -1 ){
+
+		console.warn(`SideProperty value '${value}' is not valid. Abort`);
+		return false;
 
 	}
 
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get offsetY() { return this._offsetY; }
+	return true;
 
-	/**
-	 *
-	 * @param {number} value
-	 */
-	set offsetY( value ){
+}
 
-		this._offsetY = value;
+;// CONCATENATED MODULE: ./src/font/FontVariant.js
 
-	}
 
-	/**
-	 *
-	 * @return {number}
-	 */
-	get cumulativeWidth() { return this._cumulativeWidth; }
+
+// JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+
+
+
+
+/* eslint-enable no-unused-vars */
+
+
+/**
+ * @abstract
+ */
+class FontVariant extends external_THREE_namespaceObject.EventDispatcher {
 
 	/**
 	 *
-	 * @param {number} value
+	 * @param {string} weight
+	 * @param {string} style
 	 */
-	set cumulativeWidth( value ) {
+	constructor( weight, style ) {
 
-		this._cumulativeWidth = value;
+		super();
+
+		/** @private */ this._isReady = false;
+
+		/** @protected */ this._weight = weight;
+		/** @protected */ this._style = style;
+
+		/** @protected */ this._size = 42;
+		/** @protected */ this._lineHeight = 42;
+		/** @protected */ this._lineBase = 42;
+
+		/**
+		 *
+		 * @type {TypographicFont}
+		 * @protected
+		 */
+		this._font = null;
 
 	}
 
 	/**
 	 *
-	 * @return {number}
+	 * @returns {TypographicFont}
 	 */
-	get marginLeft() { return this._marginLeft; }
+	get typographic() { return this._font; }
 
 	/**
 	 *
-	 * @param {number} value
+	 * @returns {boolean}
 	 */
-	set marginLeft( value ) {
+	get isReady() {
 
-		this._marginLeft = value;
+		return this._isReady;
 
 	}
 
 	/**
 	 *
-	 * @return {number}
-	 */
-	get marginRight() { return this._marginRight; }
-
-	/**
-	 *
-	 * @param {number} value
+	 * @returns {string}
 	 */
-	set marginRight( value ) {
+	get weight() {
 
-		this._marginRight = value;
+		return this._weight;
 
 	}
 
 	/**
 	 *
-	 * @return {number}
+	 * @returns {string}
 	 */
-	get paddingLeft() { return this._paddingLeft; }
+	get style() {
+
+		return this._style;
+
+	}
 
 	/**
 	 *
-	 * @param {number} value
+	 * @returns {Texture}
 	 */
-	set paddingLeft( value ) {
+	get texture() {
 
-		this._paddingLeft = value;
+		return this._texture;
 
 	}
 
 	/**
-	 *
-	 * @return {number}
+	 * @param {Function.<ShaderMaterial|Material>} v
+	 * @abstract
 	 */
-	get paddingRight() { return this._paddingRight; }
+	set fontMaterial( v ) {
+		throw Error( `FontVariant('${this.id}')::fontMaterial - is abstract.` );
+	}
 
 	/**
-	 *
-	 * @param {number} value
+	 * @return {Function.<ShaderMaterial|Material>}
+	 * @abstract
 	 */
-	set paddingRight( value ) {
-
-		this._paddingRight = value;
-
+	get fontMaterial() {
+		throw Error( `FontVariant('${this.id}')::fontMaterial - is abstract.` );
 	}
 
 	/**
 	 *
-	 * @returns {number}
+	 * @returns {string}
 	 */
-	get lineBase() { return 0 }
+	get id(){
+		return `${this._name}(w:${this.weight},s:${this.style})`;
+	}
 
 	/**
 	 *
-	 * @param {number} value
+	 * @param {string} character
+	 * @returns {TypographicGlyph}
 	 */
-	set fontFactor( value ){
+	getTypographicGlyph( character ) {
 
-		this._fontFactor = value;
+		let typographicGlyph = this._chars[ character ];
+		if ( typographicGlyph ) return typographicGlyph;
 
-	}
-}
+		// Auto generate whitespace chars
+		if ( character.match( /\s/ ) ) return this._chars[ " " ];
 
-;// CONCATENATED MODULE: ./src/font/InlineGlyph.js
+		const fallbackCharacter = this._getFallbackCharacter( character );
+		if( fallbackCharacter ) {
 
+			typographicGlyph = this._chars[ fallbackCharacter ];
+			if ( typographicGlyph ) return typographicGlyph;
 
-//JSDoc related imports
-/* eslint-disable no-unused-vars */
+		}
 
-/* eslint-enable no-unused-vars */
+		throw Error( `FontVariant('${this.id}')::getTypographicGlyph() - character('${character}') and/or fallback character were not found in provided msdf charset.` );
+	}
 
-class InlineGlyph extends Inline {
 
+	/* eslint-disable no-unused-vars */
 	/**
-	 *
-	 * @param {TypographicGlyph} characterDesc
+	 * @abstract
+	 * @protected
+	 * @param {string} missingChar
+	 * @returns {string|null}
 	 */
-	constructor( characterDesc ) {
-
-		super();
-
-		/** @protected */ this._typographic = characterDesc;
-
+	_getFallbackCharacter( missingChar ) {  /* eslint-enable no-unused-vars */
+		throw new Error(`FontVariant(${typeof this})::_getFallbackCharacter() is abstract and should therefore be overridden.`);
 	}
 
+	/* eslint-disable no-unused-vars */
 	/**
+	 * Convert an InlineCharacter to a geometry
 	 *
-	 * @returns {TypographicGlyph}
+	 * @abstract
+	 * @param {InlineGlyph} inline
+	 * @param {MeshUIBaseElement} element
+	 * @returns {BufferGeometry|Array.<BufferGeometry>}
 	 */
-	get typographic(){
+	getGeometricGlyph( inline, element ) {
 
-		return this._typographic;
+		throw new Error(`FontVariant(${typeof this})::getGeometryCharacter() is abstract and should therefore be overridden.`);
 
 	}
 
-	/*********************************************************************************************************************
-	 * GETTERS FROM CHARACTER DESCRIPTION
-	 ********************************************************************************************************************/
+	/* eslint-enable no-unused-vars */
 
-	/**
-	 * @override
-	 * @returns {number}
-	 */
-	get xadvance() { return this._typographic.xadvance * this._fontFactor; }
 
 	/**
-	 * @override
+	 * Obtain the kerning amount of a glyphPair
+	 * @param {string} glyphPair
 	 * @returns {number}
 	 */
-	get xoffset() { return this._typographic.xoffset * this._fontFactor; }
+	getKerningAmount( glyphPair ){
 
-	/**
-	 * @override
-	 * @returns {number}
-	 */
-	get yoffset() { return this._typographic.yoffset * this._fontFactor; }
+		//or zero offset if kerning glyphPais is not defined
+		return this._kernings[ glyphPair ] ? this._kernings[ glyphPair ] : 0;
+
+	}
 
-	/**
-	 * @override
-	 * @returns {number}
-	 */
-	get width() { return this._typographic.width * this._fontFactor ; }
 
 	/**
-	 * @override
-	 * @returns {number}
+	 * Perform some changes on the character description of this font
+	 * @param {Object.<string,Object.<string,number|string>>} adjustmentObject
 	 */
-	get height() { return this._typographic.height * this._fontFactor; }
+	adjustTypographicGlyphs( adjustmentObject ){
+
+		for ( const char in adjustmentObject ) {
+
+			const typographicGlyph = this.getTypographicGlyph( char );
+			const glyphAdjustment = adjustmentObject[ char ];
+			for ( const propertyToAdjust in glyphAdjustment ) {
+
+				typographicGlyph["_"+propertyToAdjust] = adjustmentObject[char][propertyToAdjust];
+
+			}
+
+		}
+
+	}
 
 	/**
 	 *
-	 * @return {string}
+	 * @private
 	 */
-	get char() { return this._typographic.char; }
+	_checkReadiness() {
 
-	/**
-	 * @override
-	 * @returns {number}
-	 */
-	get anchor() {
+		if ( this._readyCondition() ) {
 
-		const lineHeight = this._typographic.font.lineHeight;
-		const lineBase = this._typographic.font.lineBase;
+			_setReady( this );
 
-		return ( ( this._typographic.yoffset + this._typographic.height - lineBase ) * this._fontSize ) / lineHeight;
+		}
 
 	}
 
+	/* eslint-disable no-unused-vars */
 	/**
-	 * @override
-	 * @returns {number}
+	 * @abstract
+	 * @param element
+	 * @internal
 	 */
-	get lineHeight() { return this._typographic.font.lineHeight * this._fontFactor; }
+	_alterElementProperties( element ) {  /* eslint-enable no-unused-vars */
+
+		throw new Error(`FontVariant(${typeof this})::_alterElementProperties() is abstract and should therefore be overridden.`);
+
+	}
 
 	/**
-	 * @override
-	 * @returns {number}
+	 *
+	 * @abstract
+	 * @returns {boolean}
+	 * @protected
 	 */
-	get lineBase() { return this._typographic.font.lineBase * this._fontFactor; }
+	_readyCondition () {
 
+		// ie: MSDFFontVariant
+		// Must have chars and a texture
+		// return this._chars && this._texture
 
-}
+		throw new Error(`FontVariant(${typeof this})::_readyCondition() is abstract and should therefore be overridden.`);
+	}
 
-;// CONCATENATED MODULE: ./src/font/msdf/MSDFInlineGlyph.js
+}
 
+/***********************************************************************************************************************
+ * INTERNAL STUFF
+ **********************************************************************************************************************/
 
-//JSDoc related imports
-/* eslint-disable no-unused-vars */
 
-/* eslint-enable no-unused-vars */
+const _readyEvent = { type: 'ready' };
 
 /**
- * @extends InlineGlyph
+ * Set the ready status of a fontVariant
+ * @param {FontVariant} fontVariant
+ * @private
  */
-class MSDFInlineGlyph extends InlineGlyph{
-
-	/**
-	 *
-	 * @param {MSDFTypographicGlyph} characterDesc
-	 */
-	constructor( characterDesc ) {
-
-		super( characterDesc );
-
-	}
+function _setReady( fontVariant ) {
 
-	/**
-	 *
-	 * @returns {{left:number, right:number, top:number, bottom:number}|null}
-	 */
-	get uv() { return this.typographic.uv; }
+	fontVariant._isReady = true;
+	fontVariant.dispatchEvent( _readyEvent );
 
 }
 
-;// CONCATENATED MODULE: ./src/font/msdf/MSDFTypographicGlyph.js
-
+/**
+ * @typedef {Object.<string,number>} KerningPairs
+ *
+ */
 
+/* harmony default export */ const font_FontVariant = (FontVariant);
 
-//JSDoc related imports
-/* eslint-disable no-unused-vars */
+;// CONCATENATED MODULE: ./src/core/properties/FontProperty.js
 
-/* eslint-enable no-unused-vars */
 
 
-class MSDFTypographicGlyph extends TypographicGlyph {
+class FontProperty extends BaseProperty{
 
 	/**
-	 * @param {MSDFTypographicFont} fontDescription
-	 * @param {import('./MSDFFontVariant').MSDFJsonChar} characterData
+	 *
+	 * @param {FontVariant} [value=null]
 	 */
-	constructor( fontDescription, characterData ) {
+	constructor( value = null ) {
 
-		super(fontDescription);
+		super( 'font', value, false);
 
-		this._char = characterData.char;
-		this._width = characterData.width;
-		this._heigth = characterData.height;
+		this._needsUpdate = false;
 
-		this._xadvance = characterData.xadvance ? characterData.xadvance : this._width;
-		this._xoffset = characterData.xoffset ? characterData.xoffset : 0;
-		this._yoffset = characterData.yoffset ? characterData.yoffset : 0;
+		/**
+		 *
+		 * @type {FontVariant|null}
+		 * @internal
+		 */
+		this._fontVariant = null;
 
-		// Msdf requires uvs
-		this._uv = null;
 
-		if( !isNaN( characterData.x ) ) {
-			// transform absolute pixel values into uv values [0,1]
-			this._uv = {
-				left: characterData.x / fontDescription.textureWidth,
-				right: ( characterData.x + characterData.width ) / fontDescription.textureWidth,
-				top: 1 - ( ( characterData.y + characterData.height ) / fontDescription.textureHeight ),
-				bottom: 1 - ( characterData.y / fontDescription.textureHeight )
-			};
-		}
-	}
+		/**
+		 * @typedef ReadyClosure
+		 * @type { ()=> void|null }
+		 */
 
+		/**
+		 *
+		 * @type {ReadyClosure}
+		 * @private
+		 */
+		this._handleFontReadyClosure = null;
 
-	/**
-	 *
-	 * @returns {{left: number, right: number, top: number, bottom: number}|null}
-	 */
-	get uv() {
+		/**
+		 * @override
+		 */
+		this.isValid = FontProperty_isValid;
 
-		return this._uv;
+	}
+
+	output( out ) {
+
+		out[this._id] = this._fontVariant;
 
 	}
 
+	/* eslint-disable no-unused-vars */
 	/**
+	 *
 	 * @override
-	 * @returns {MSDFInlineGlyph}
 	 */
-	asInlineGlyph() {
+	update( element, out ) { 	/* eslint-enable no-unused-vars */
 
-		return new MSDFInlineGlyph( this );
+		// if a previous font isset, be sure no event remains
+		if ( this._fontVariant && !this._fontVariant.isReady ) {
 
-	}
+			this._fontVariant.removeEventListener( 'ready', this._handleFontReadyClosure );
 
-}
+		}
 
-;// CONCATENATED MODULE: ./src/font/msdf/MSDFGeometricGlyph.js
+		// obtain font from value or from style combinaison
+		if( this._value && this._value instanceof font_FontVariant ) {
 
+			this._fontVariant = this._value;
 
-//JSDoc related imports
-/* eslint-disable no-unused-vars */
+		} else {
 
-/* eslint-enable no-unused-vars */
 
-class MSDFGeometricGlyph extends external_THREE_namespaceObject.PlaneBufferGeometry {
+			const fontFamily = element._fontFamily._value;
 
-	/**
-	 *
-	 * @param {MSDFInlineGlyph} inline
-	 */
-	constructor( inline, segments = 1 ) {
+			if( typeof fontFamily !== 'string'  ) {
 
+				this._fontVariant = fontFamily.getVariant(
+					element._fontWeight._value,
+					element._fontStyle._value,
+				);
 
-		// default w & h segments
-		let wS = 1, hS=1;
+			}
 
-		// If charOBJ, try to distribute segments proportionally
-		const typographicFontSize = inline.typographic.font.size;
+		}
 
-		wS = Math.ceil((inline.typographic.width / typographicFontSize) * segments);
-		hS = Math.ceil((inline.typographic.height / typographicFontSize) * segments);
+		if( !this._fontVariant ) return;
 
-		super( inline.width, inline.height, wS, hS );
+		this._fontVariant._alterElementProperties( element );
 
-		// If inline has UVs
-		if ( inline.uv ) {
+		this._handleFontReadyClosure = _readyClosure( element, this );
 
-			this._mapUVs( inline );
+		// new font, means rebuild inlines, now or soon
+		if ( !this._fontVariant.isReady ) {
 
-			this._transformGeometry( inline );
+			// @TODO : clear inlines components
+			// this.inlines = null;
+
+			this._fontVariant.addEventListener( 'ready', this._handleFontReadyClosure );
 
-			// White spaces (we don't want our plane geometry to have a visual width nor a height)
 		} else {
 
-			this._nullifyUVs();
+			this._handleFontReadyClosure();
 
-			this.scale( 0, 0, 1 );
+		}
 
-			this.translate( 0, inline.fontSize / 2, 0 );
+		// Set the default material
+		if( !element._fontMaterial._defaultMaterial || !(element._fontMaterial._defaultMaterial instanceof this._fontVariant.fontMaterial) ) {
+
+			element._fontMaterial._defaultMaterial = new this._fontVariant.fontMaterial();
+			element._fontMaterial._needsUpdate = true;
 
 		}
 
 	}
 
 	/**
-	 * Compute the right UVs that will map the MSDF texture so that the passed character
-	 * will appear centered in full size
-	 * @param {MSDFInlineGlyph} inline
-	 * @private
+	 * @override
+	 * @param {FontVariant} value
 	 */
-	_mapUVs( inline ) {
+	set value( value ) {
 
+		if( ! this.isValid( value) ) return;
 
-		const width = inline.uv.right - inline.uv.left;
-		const height = inline.uv.bottom - inline.uv.top;
+		if( this._value !== value ) {
 
-		const originalUvArray = this.getAttribute('uv').array.slice()
+			this._value = value;
 
-		const uvGlyph = [];
-		for (let i = 0; i < originalUvArray.length; i += 2) {
-			const u = originalUvArray[i];
-			const v = originalUvArray[i + 1];
+			this._needsUpdate = true;
 
-			uvGlyph.push(inline.uv.left + width * u);
-			uvGlyph.push(inline.uv.top + height * v);
 		}
-		this.setAttribute('uvG', new external_THREE_namespaceObject.BufferAttribute(new Float32Array(uvGlyph), 2));
 
 	}
 
 	/**
-	 * Set all UVs to 0, so that none of the glyphs on the texture will appear
-	 * @private
-	 * */
-	_nullifyUVs() {
-
-		// const uvAttribute = this.attributes.uv;
-		//
-		// for ( let i = 0; i < uvAttribute.count; i++ ) {
-		//
-		// 	uvAttribute.setXY( i, 0, 0 );
-		//
-		// }
+	 *
+	 * @return {FontVariant}
+	 */
+	get value() { return this._value; }
 
-		const uvGlyph = [];
-		const length = this.getAttribute('uv').array.length;
-		for ( let i = 0; i < length; i++ ) {
-			uvGlyph.push(0);
-		}
-		this.setAttribute('uvG', new external_THREE_namespaceObject.BufferAttribute(new Float32Array(uvGlyph), 2));
 
-	}
+	/**
+	 *
+	 * @return {FontVariant|null}
+	 */
+	get fontVariant() { return this._fontVariant; }
 
 	/**
 	 *
-	 * @TODO: Apply pivot properties when splitText isset
-	 * Gives the previously computed scale and offset to the geometry
-	 * @param {MSDFInlineGlyph} inline
-	 * @private
 	 */
-	_transformGeometry( inline ) {
+	dispose () {
 
-		//
+		if( this._handleFontReadyClosure ) {
 
-		// @TODO : Evaluate this as being a property. It can wait until splitGeometry
-		this.translate(
-			inline.width / 2,
-			( inline.height / 2 ) - inline.anchor,
-			0
-		);
+			this._fontVariant.removeEventListener( 'ready', this._handleFontReadyClosure );
+			this._handleFontReadyClosure = null;
+
+		}
+
+		this._value = null;
+		this._fontVariant = null;
 
 	}
 
 }
 
-;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl.js
-/* harmony default export */ const msdf_alphaglyph_pars_vertex_glsl = (/* glsl */`
-attribute vec2 uvG;
-varying vec2 vUvG;
-`);
 
-;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl.js
-/* harmony default export */ const msdf_alphaglyph_vertex_glsl = (/* glsl */`
-vUvG = uvG;
-`);
+/**
+ *
+ * @param {number} value
+ * @return {boolean}
+ * @private
+ */
+function FontProperty_isValid( value ) {
 
-;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl.js
-/* harmony default export */ const msdf_offsetglyph_vertex_glsl = (/* glsl */`
-gl_Position.z -= 0.00001;
-`);
+	if( ! ( value instanceof font_FontVariant )  ) {
 
-;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl.js
-/* harmony default export */ const msdf_alphaglyph_pars_fragment_glsl = (/* glsl */`
-varying vec2 vUvG;
-uniform sampler2D glyphMap;
-uniform vec2 unitRange;
-// functions from the original msdf repo:
-// https://github.com/Chlumsky/msdfgen#using-a-multi-channel-distance-field
-float median(float r, float g, float b) {
-	return max(min(r, g), min(max(r, g), b));
-}
-float screenPxRange() {
+		console.warn(`.font value '${value}' is not valid. It requires a FontVariant instance. Aborted`);
+		return false;
+
+	}
+
+	return true;
 
-	// precomputed unitRange as recommended by Chlumsky
-	// vec2 unitRange = vec2(pxRange)/vec2(textureSize(glyphMap, 0));
-	vec2 screenTexSize = vec2(1.0)/fwidth(vUvG);
-	return max(0.5*dot(unitRange, screenTexSize), 1.0);
-}
-float tap(vec2 offsetUV) {
-	vec3 msd = texture( glyphMap, offsetUV ).rgb;
-	float sd = median(msd.r, msd.g, msd.b);
-	float screenPxDistance = screenPxRange() * (sd - 0.5);
-	float alpha = clamp(screenPxDistance + 0.5, 0.0, 1.0);
-	return alpha;
 }
-`);
 
-;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl.js
-/* harmony default export */ const msdf_alphaglyph_fragment_glsl = (/* glsl */`
-	float alpha;
-#ifdef NO_RGSS
+/**
+ *
+ * @param {MeshUIBaseElement} element
+ * @param {FontProperty} fontProperty
+ * @return {() => void}
+ * @private
+ */
+function _readyClosure( element, fontProperty ) {
+	return function () {
 
-	alpha = tap( vUvG );
+		fontProperty._needsUpdate = true;// ? update itself?
+		element._glyphs._needsProcess = true;
 
-#else
+		// this._transferToMaterial();
 
-	// shader-based supersampling based on https://bgolus.medium.com/sharper-mipmapping-using-shader-based-supersampling-ed7aadb47bec
-	// per pixel partial derivatives
-	vec2 dx = dFdx(vUvG);
-	vec2 dy = dFdy(vUvG);
-	// rotated grid uv offsets
-	vec2 uvOffsets = vec2(0.125, 0.375);
-	vec2 offsetUV = vec2(0.0, 0.0);
-	// supersampled using 2x2 rotated grid
-	alpha = 0.0;
-	offsetUV.xy = vUvG + uvOffsets.x * dx + uvOffsets.y * dy;
-	alpha += tap(offsetUV);
-	offsetUV.xy = vUvG - uvOffsets.x * dx - uvOffsets.y * dy;
-	alpha += tap(offsetUV);
-	offsetUV.xy = vUvG + uvOffsets.y * dx - uvOffsets.x * dy;
-	alpha += tap(offsetUV);
-	offsetUV.xy = vUvG - uvOffsets.y * dx + uvOffsets.x * dy;
-	alpha += tap(offsetUV);
-	alpha *= 0.25;
+		// request parse update and parent layout
+		// this.update( true, true, false );
+		// this.getHighestParent().update( false, true, false );
 
-#endif
+		// remove the listener
+		fontProperty._fontVariant.removeEventListener( 'ready', fontProperty._handleFontReadyClosure );
+		fontProperty._handleFontReadyClosure = null;
 
-	alpha = clamp( alpha, 0.0, 1.0 );
+	}
+}
 
-#ifdef INVERT_ALPHA
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/visibility/Display.js
 
-	alpha = 1.0 - alpha;
 
-#endif
 
-	diffuseColor.a *= alpha;
-`);
+class Display extends SubStyleProperty {
 
-;// CONCATENATED MODULE: ./src/utils/mediator/transformers/MaterialTransformers.js
+	constructor( defaultValue ) {
 
-/**
- * Transfer the alphaTest value from MeshUIComponent to material
- * @type {import('../Mediator').MediationTransformer}
- */
-const alphaTestTransformer = function ( target, targetProperty, value) {
+		super( 'display', defaultValue );
+
+		// configure
+		this._value = 'flex';
+		this._allowsInherit = false;
+		this._needsUpdate = false;
 
-	// set the value in the material
-	target.alphaTest = value;
 
-	toPreprocessorTriggerTransformer(target, 'USE_ALPHATEST', value === 0 ? '' : null );
+		this.isValidValue = Display_isValid;
 
+	}
+
+	computeOutputValue( element ) {
+
+		element._visible._value = this._output !== 'none';
+
+	}
 }
 
+const Display_AVAILABLE_VALUES = ['none','flex'];
+
 /**
- * Transform a value as a preprocessor trigger
- * @type {import('../Mediator').MediationTransformer}
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
  */
-const toPreprocessorTriggerTransformer = function ( target, targetProperty, value) {
+function Display_isValid( value ) {
 
-	if ( value ) {
+	if( Display_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
 
-		if( target.defines[targetProperty] === undefined ) {
+		console.warn( `(.style) display value '${value}' is not valid. Aborted` );
+		return false;
 
-			target.defines[targetProperty] = '';
-			target.needsUpdate = true;
+	}
 
-		}
+	return true;
 
-	} else if( target.defines[targetProperty] !== undefined ) {
+}
 
-		delete target.defines[targetProperty];
-		target.needsUpdate = true;
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/bounds/BoxSizing.js
 
-	}
 
-}
 
-/**
- * Transform a value as a preprocessor value
- * @type {import('../Mediator').MediationTransformer}
- */
-const asPreprocessorValueTransformer = function ( target, targetProperty, value) {
+class BoxSizing extends SubStyleProperty {
 
-	// abort if nothing to update, same value
-	if( target.defines[targetProperty] && target.defines[targetProperty] === value ) return;
+	constructor( defaultValue ) {
 
-	// or change the preprocessor and update
-	target.defines[targetProperty] = value;
-	target.needsUpdate = true;
+		super( 'boxSizing', defaultValue );
 
-}
+		// Configure
+		this._allowsInherit = false;
 
-/**
- * Transform a value as a uniform or userData value
- * @type {import('../Mediator').MediationTransformer}
- */
-const uniformOrUserDataTransformer = function( material, property, value ) {
+		this.isValidValue = BoxSizing_isValid;
 
-	if( material.userData[property] ) {
+	}
 
-		material.userData[property].value = value;
+	computeOutputValue( element ) {
 
-	}else{
+		this._value = this._inheritedInput;
 
-		material.uniforms[property].value = value;
+		element._bounds._needsUpdate = true;
 
 	}
 
 }
 
-const toUserDataTransformer = function( material, property, value ) {
 
-	material.userData[property].value = value;
+/**
+ *
+ * @type {Array.<string>}
+ */
+const BoxSizing_AVAILABLE_VALUES = ['border-box', 'content-box'];
 
-}
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function BoxSizing_isValid( value ) {
 
-;// CONCATENATED MODULE: ./src/font/msdf/utils/MSDFFontMaterialUtils.js
+	if( BoxSizing_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) boxSizing value '${value}' is not valid. Aborted` );
+		return false;
 
+	}
 
+	return true;
 
+}
 
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/StyleColorProperty.js
 
 
 
+//JSDoc related imports
 /* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
 
+class StyleColorProperty extends SubStyleProperty {
 
-/* eslint-enable no-unused-vars */
+	constructor( propertyId, defaultValue ) {
 
-/**
- * MSDFFontMaterialUtils provides utilities
- * for customizing other threejs or custom materials
- * into a three-mesh-ui MSDFFontMaterial
- */
-class MSDFFontMaterialUtils {
+		super( propertyId, defaultValue, false );
 
-	/**
-	 * Alter a material options with required fontMaterial options and or default values
-	 * @param {Object.<string,any>} materialOptions
-	 */
-	static ensureMaterialOptions( materialOptions ) {
-		materialOptions.transparent = true;
-		materialOptions.alphaTest = materialOptions.alphaTest || 0.02;
+		/**
+		 * @type {Color|string|number}
+		 * @private
+		 */
+		this._input = defaultValue;
+
+		/**
+		 * @type {Color}
+		 * @protected
+		 */
+		this._value = new external_THREE_namespaceObject.Color();
+
+		this.output = this._outputValue;
 	}
 
+	/* eslint-disable no-unused-vars */
 	/**
-	 * As three-mesh-ui FontMaterial relies on webgl preprocessors,
-	 * lets force the material to have a proper defines object
-	 * @param {Material|ShaderMaterial} threeMaterial
+	 * @override
 	 */
-	static ensureDefines( threeMaterial ) {
-		if ( !threeMaterial.defines ) {
-			threeMaterial.defines = {};
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._input !== 'inherit' ) {
+
+			this._value.set(this._input);
+
 		}
-	}
 
-	/**
-	 *
-	 * @param {Material|ShaderMaterial} threeMaterial
-	 * @param {Object.<string,any>} materialOptions
-	 */
-	static ensureUserData( threeMaterial, materialOptions ) {
-		threeMaterial.userData.glyphMap = { value: materialOptions.glyphMap };
-		threeMaterial.userData.unitRange = { value: new external_THREE_namespaceObject.Vector2() };
 	}
 
-	/**
-	 *
-	 * @param {any} shader
-	 * @param {Material|ShaderMaterial} threeMaterial
-	 */
-	static bindUniformsWithUserData( shader, threeMaterial ) {
+	set inline( value ) {
 
-		shader.uniforms.glyphMap = threeMaterial.userData.glyphMap;
-		shader.uniforms.unitRange = threeMaterial.userData.unitRange;
-	}
+		// Colors are too wide to perform validation checks each time
+		// if( ! this.isValidValue( value ) ) return;
+
+		this._input = this._inline = value;
+
+		this._needsUpdate = true;
 
-	/**
-	 *
-	 * @param shader
-	 */
-	static injectShaderChunks( shader ) {
-		MSDFFontMaterialUtils.injectVertexShaderChunks( shader );
-		MSDFFontMaterialUtils.injectFragmentShaderChunks( shader );
 	}
 
-	/**
-	 *
-	 * @param shader
-	 */
-	static injectVertexShaderChunks( shader ) {
-		shader.vertexShader = shader.vertexShader.replace(
-			'#include <uv_pars_vertex>',
-			'#include <uv_pars_vertex>\n' + msdf_alphaglyph_pars_vertex_glsl
-		);
+}
 
-		// vertex chunks
-		shader.vertexShader = shader.vertexShader.replace(
-			'#include <uv_vertex>',
-			'#include <uv_vertex>\n' + msdf_alphaglyph_vertex_glsl
-		)
 
-		shader.vertexShader = shader.vertexShader.replace(
-			'#include <project_vertex>',
-			'#include <project_vertex>\n' + msdf_offsetglyph_vertex_glsl
-		)
-	}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/StyleFactorProperty.js
+
+
+class StyleFactorProperty extends SubStyleProperty {
 
 	/**
 	 *
-	 * @param shader
+	 * @param {string} propertyId
+	 * @param {any} defaultValue
 	 */
-	static injectFragmentShaderChunks( shader ) {
-		shader.fragmentShader = shader.fragmentShader.replace(
-			'#include <uv_pars_fragment>',
-			'#include <uv_pars_fragment>\n' + msdf_alphaglyph_pars_fragment_glsl
-		)
+	constructor( propertyId, defaultValue ) {
 
-		// fragment chunks
-		shader.fragmentShader = shader.fragmentShader.replace(
-			'#include <alphamap_fragment>',
-			'#include <alphamap_fragment>\n' + msdf_alphaglyph_fragment_glsl
-		)
-	}
+		super( propertyId, defaultValue, true );
 
+		this.isValidValue = StyleFactorProperty_isValid;
 
+		this._allowsInherit = false;
 
-	/**
-	 * Mix a threejs Material into a three-mesh-ui FontMaterial
-	 * @param {typeof Material|ShaderMaterial} materialClass
-	 * @returns {typeof Material|ShaderMaterial}
-	 */
-	static from( materialClass ) {
+		this._input = defaultValue;
 
-		return class extends materialClass {
+		this._value = defaultValue;
 
-			/**
-			 *
-			 * @abstract
-			 * @returns {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
-			 */
-			static get fontMaterialProperties() {
-				return MSDFFontMaterialUtils.mediation;
-			}
+		this.output = this._outputValue;
 
-			constructor( options = {} ) {
+		this.computeOutputValue = this._computeFromInherited;
 
-				// same as FontMaterial extension
-				MSDFFontMaterialUtils.ensureMaterialOptions( options );
-				super( options );
-				MSDFFontMaterialUtils.ensureDefines( this );
-				MSDFFontMaterialUtils.ensureUserData( this, options );
-
-				// defines two internal properties in order to kept
-				// user allowed to use onBeforeCompile for its own stuff
-				// 1- store an callback for user
-				/* eslint-disable no-unused-vars */
-				this._userDefinedOnBeforeCompile = (shader) => {};
-				/* eslint-enable no-unused-vars */
-				// 2- store the cumulative callback
-				this._onBeforeCompile = this._cumulativeOnBeforeCompile;
-			}
-
-			////////////////////////////
-			// OnBeforeCompile Override
-			///////////////////////////
-
-			/**
-			 * Override the setter of onBeforeCompile in order to never overwrite
-			 * the three-mesh-ui fontMaterial onBeforeCompile
-			 * @param { (shader:any) => void }fct
-			 */
-			set onBeforeCompile( fct ) {
-				// only store it as userDefinedCallback
-				this._userDefinedOnBeforeCompile = fct;
-			}
+	}
 
-			/**
-			 * Override the getter of onBeforeCompile in order to
-			 * always deliver the cumulativeCallbacks to threejs
-			 * @returns { (shader:any) => void }
-			 */
-			get onBeforeCompile() {
-				return this._onBeforeCompile;
-			}
 
-			/**
-			 *
-			 * On before compile that first run three-mesh-ui fontMaterial
-			 * then user defined onBeforeCompile
-			 * @param shader
-			 * @private
-			 */
-			_cumulativeOnBeforeCompile = ( shader ) => {
-				// bind uniforms
-				MSDFFontMaterialUtils.bindUniformsWithUserData( shader, this );
+	_outputValue( out ) {
 
-				// inject both vertex and fragment shaders
-				MSDFFontMaterialUtils.injectShaderChunks( shader );
+		out[this._id] = this._inheritedInput;
 
-				// user defined additional onBeforeCompile
-				this._userDefinedOnBeforeCompile( shader );
-			}
-		}
 	}
 
-	/**
-	 *
-	 * @returns {Object<{m: string, t?: (function((Material|ShaderMaterial), string, *): void)}>}
-	 */
-	static get mediation() {
-
-		return mediationDefinitions;
 
-	}
 
 }
 
 /**
- * Convert a fontVariant to a material glyphMap texture
- * @type {(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void }
+ *
+ * @param {any} value
+ * @return {boolean}
  * @private
  */
-const _fontToGlyphMapTransformer = function( fontMaterial, materialProperty, value) {
+function StyleFactorProperty_isValid( value ) {
 
-	const texture = value ? value.texture : null;
-	const unitRange = value ? value.unitRange : new external_THREE_namespaceObject.Vector2();
+	if ( value < 0 && value > 1.0 ) {
 
-	if( fontMaterial[materialProperty] !== undefined ) {
+		console.warn( `(.style) styleFactorProperty('${this.id}') value '${value}' is not valid)` );
+		return false;
 
-		fontMaterial.glyphMap = texture;
-		fontMaterial.unitRange = unitRange;
-		return;
 	}
 
-	if( fontMaterial.userData && fontMaterial.userData.glyphMap ) {
+	return true;
+
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/background/BackgroundImage.js
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
 
-		fontMaterial.userData.glyphMap.value = texture;
-		fontMaterial.userData.unitRange.value = unitRange;
+
+class BackgroundImage extends SubStyleProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'backgroundImage', defaultValue, true );
+
+
+		this._input = null;
+
+		// configure
+		this._allowsInherit = false;
+
+		/**
+		 *
+		 * @type {Vector2}
+		 * @internal
+		 */
+		this._textureSize = new external_THREE_namespaceObject.Vector2( 1,1 );
+
+		this.isValidValue = BackgroundImage_isValid;
 
 	}
 
-}
+	/**
+	 * @override
+	 * @return {any|Texture|null}
+	 */
+	get value() {
 
-/**
- *
- * @type {(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void }
- * @private
- */
-const _RGSSTransformer = function( fontMaterial, materialProperty, value){
+		return this._value;
 
-	if ( !value ) {
+	}
 
-		fontMaterial.defines['NO_RGSS'] = '';
+	output( out ) {
 
-	} else {
+		out[this._id] = this._value;
 
-		delete fontMaterial.defines['NO_RGSS'];
+		out['tSize'] = this._textureSize;
 
 	}
 
-	fontMaterial.needsUpdate = true;
 
-}
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
+		// @TODO : URL
+		this._value = this._inheritedInput;
 
-/**
- *
- * @type {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
- */
-const mediationDefinitions = {
-	alphaTest: { m: 'alphaTest', t: alphaTestTransformer },
-	_side: { m: 'side' },
-	// side: { m: 'side' },
-	_font: { m: "glyphMap", t: _fontToGlyphMapTransformer },
-	fontColor: { m: 'color' },
-	fontOpacity: { m: 'opacity' },
-	fontSupersampling: { m: 'NO_RGSS', t: _RGSSTransformer },
-	invertAlpha: { m: 'INVERT_ALPHA', t: toPreprocessorTriggerTransformer },
-}
+		// ?
+		// out[this.id] = this._value;
 
-;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderLib/msdf-fontmaterial.glsl.js
+		if( this._value instanceof external_THREE_namespaceObject.Texture && !this._value.image ) {
+			console.warn( `ThreeMeshUI - .backgroundImage :: Please provide preloaded texture in order to have accurate sizing.`);
+			return;
+		}
 
+		this._needsProcess = true;
 
+	}
 
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */
 
+		if( this._value ) {
 
+			this._textureSize.set( this._value.image.width, this._value.image.height );
+
+		} else {
+
+			this._textureSize.set( 1 , 1 );
+
+		}
+
+	}
 
-/**
- *
- * @type {string}
- */
-const vertexShader = /* glsl */`
-${msdf_alphaglyph_pars_vertex_glsl}
-#include <clipping_planes_pars_vertex>
-void main() {
-	${msdf_alphaglyph_vertex_glsl}
-	#include <begin_vertex>
-	#include <project_vertex>
-	${msdf_offsetglyph_vertex_glsl}
-	#include <clipping_planes_vertex>
 }
-`
 
+/* eslint-disable no-unused-vars */
 /**
  *
- * @type {string}
+ * @param {any} value
+ * @return {boolean}
+ * @private
  */
-const fragmentShader = /* glsl */`
-uniform vec3 diffuse;
-uniform float opacity;
-${msdf_alphaglyph_pars_fragment_glsl}
-#include <alphatest_pars_fragment>
-#include <clipping_planes_pars_fragment>
-void main() {
-	// instead of <color_fragment> : vec4 diffuseColor
-	vec4 diffuseColor = vec4( diffuse, opacity );
-	${msdf_alphaglyph_fragment_glsl}
-	#include <alphatest_fragment>
-	// instead of <output_fragment>
-	gl_FragColor = diffuseColor;
-	#include <clipping_planes_fragment>
+function BackgroundImage_isValid( value ) { /* eslint-enable no-unused-vars */
+
+	// @TODO : Texture or URL() or String or ID ?
+	//console.log( "todo, validate image value", value);
+
+	return true;
+
 }
-`
 
-;// CONCATENATED MODULE: ./src/font/msdf/materials/MSDFFontMaterial.js
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/background/BackgroundSize.js
+
+
 
+/**
+ * @property {"cover"|"contain"|"stretch"} value
+ */
+class BackgroundSize extends SubStyleProperty {
 
+	constructor( defaultValue ) {
 
+		super( 'backgroundSize', defaultValue, true );
 
-// JSDoc related import
-/* eslint-disable no-unused-vars */
+		this.isValidValue = BackgroundSize_isValid;
 
-/* eslint-enable no-unused-vars */
+		this.output = this._outputValue;
+	}
 
-const ALPHA_TEST = 0.02;
+}
 
+const BackgroundSize_AVAILABLE_VALUES = ['cover','contain','stretch'];
 
 /**
- * This material implements the msdf rendering shader
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
  */
-class MSDFFontMaterial extends external_THREE_namespaceObject.ShaderMaterial {
+function BackgroundSize_isValid( value ) {
 
-	/**
-	 * This static method is mandatory for extending ThreeMeshUI.MSDFFontMaterial
-	 * It will provide a transfer description for properties from ThreeMeshUI.Text to THREE.Material
-	 * @see {MSDFFontMaterialUtils.mediation}
-	 * @returns {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
-	 */
-	static get mediation() {
+	if( BackgroundSize_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
 
-		return MSDFFontMaterialUtils.mediation;
+		console.warn( `(.style) backgroundSize value '${value}' is not valid. Aborted` );
+		return false;
 
 	}
 
-	constructor( materialOptions = {} ) {
+	return true;
 
-		super( {
+}
 
-			uniforms: {
-				'glyphMap': { value: null }, // texture
-				'diffuse': { value: null }, // vec3
-				'opacity': { value: 1 },
-				'unitRange': { value: new external_THREE_namespaceObject.Vector2(0,0) }, // vec2
-				'alphaTest': { value: ALPHA_TEST },
-			},
-			transparent: true,
-			clipping: true,
-			vertexShader: vertexShader,
-			fragmentShader: fragmentShader,
-			extensions: {
-				derivatives: true
-			},
-		} );
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/visibility/Overflow.js
 
-		// webgl preprocessor AlphaTest set by default
-		this.defines[ 'USE_ALPHATEST' ] = '';
-		this.needsUpdate = true;
 
-		// initiate additional properties
-		this.noRGSS = materialOptions.noRGSS || false;
 
-	}
 
-	/**
-	 * The color will be the diffuse uniform
-	 * @returns {Color}
-	 */
-	get color() {
+class Overflow extends SubStyleProperty {
 
-		return this.uniforms.diffuse.value;
+	constructor( defaultValue ) {
 
-	}
+		super( 'overflow', defaultValue, true );
 
-	/**
-	 *
-	 * @param {Color} v
-	 */
-	set color( v ) {
+		this.isValidValue = Overflow_isValid;
 
-		this.uniforms.diffuse.value = v;
+		/**
+		 *
+		 * @type {Array.<Plane>|null}
+		 * @internal
+		 */
+		this._clippingPlanes = null;
 
+		this._renderStrategy = this._emptyRender;
 	}
 
 	/**
-	 *
-	 * @param {number} v
+	 * Update of overflow is a bit different, as parent may trigger changes on it
+	 * @override
 	 */
-	set opacity( v ) {
+	update( element, out ) {
 
-		if( this.uniforms )
-			this.uniforms.opacity.value = v;
+		// in any case, it will compute value. It doesn't have updateRequire evaluation
+		// let updateRequired = true;
 
-	}
+		// Inline has priority if set
+		if ( this._inline !== undefined && this._inline !== 'unset' ) {
 
-	/**
-	 * The color will be the diffuse uniform
-	 * @returns {number}
-	 */
-	get opacity() {
+			this._input = this._inline;
 
-		return this.uniforms.opacity.value;
+		}
+		// or fallback on computed
+		else if ( this._computed !== undefined ) {
 
-	}
+			this._input = this._computed;
 
+		}
 
+		if ( !this._allowsInherit ) {
 
+			this._inheritedInput = this.getInheritedInput( element );
 
-	/**
-	 * The color will be the diffuse uniform
-	 * @returns {Vector2}
-	 */
-	get unitRange() {
+		}
 
-		return this.uniforms.unitRange.value;
+		this.computeOutputValue( element );
+
+		// rebuild same properties on children 'inheritance'
+		for ( const childUIElement of element._children._uis ) {
+			childUIElement[ `_overflow` ]._needsUpdate = true;
+		}
+
+		this.output( out );
 
 	}
 
-	/**
-	 *
-	 * @param {Vector2} v
-	 */
-	set unitRange( v ) {
+	output( out ) {
 
-		this.uniforms.unitRange.value.copy( v );
+		out['clippingPlanes'] = this._clippingPlanes;
 
 	}
 
-	/**
-	 *
-	 * @returns {Texture}
-	 */
-	get glyphMap() {
+	computeOutputValue( element ) {
 
-		return this.uniforms.glyphMap.value;
+		// update self --------------------
+		super.computeOutputValue( element );
 
-	}
+		if( this._value === 'hidden' ) {
 
-	/**
-	 *
-	 * @param {Texture} v
-	 */
-	set glyphMap( v ) {
+			this._renderStrategy = this._propagateRender;
 
-		this.uniforms.glyphMap.value = v;
+		}else{
+
+			this._renderStrategy = this._emptyRender;
+			this._clippingPlanes = null;
+		}
+
+
+		const parent = element._parent._value;
+		if( parent !== null ) {
+
+			// Check that parent is hiddenOverflow or has clippingPlanes
+			const overflowParent = parent._overflow;
+			if ( ( overflowParent._value === 'hidden' || overflowParent._clippingPlanes !== null ) && !this._clippingPlanes ) {
+
+				// add planes and render
+				this._clippingPlanes =  [
+					// top
+					new external_THREE_namespaceObject.Plane( new external_THREE_namespaceObject.Vector3( 0, -1, 0 ), 1 ),
+					// right
+					new external_THREE_namespaceObject.Plane( new external_THREE_namespaceObject.Vector3( -1, 0, 0 ), 1 ),
+					// bottom
+					new external_THREE_namespaceObject.Plane( new external_THREE_namespaceObject.Vector3( 0, 1, 0 ), 1 ),
+					// left
+					new external_THREE_namespaceObject.Plane( new external_THREE_namespaceObject.Vector3( 1, 0, 0 ), 1 ),
+				];
+
+				// bind the parent to the clipping plane in a custom property
+				for ( let i = 0; i < this._clippingPlanes.length; i++ ) {
+					this._clippingPlanes[ i ].parent = parent;
+				}
+
+				// Also add parent clipping planes if isset
+				if( overflowParent._clippingPlanes !== null ) {
+					this._clippingPlanes.push( ...overflowParent._clippingPlanes );
+				}
+
+				this._renderStrategy = this._hiddenRender;
+				this._needsRender = true;
+
+			} else if ( ( overflowParent._value === 'visible' || overflowParent._clippingPlanes === null ) && this._clippingPlanes !== null ){
+
+				// remove planes and render
+				this._clippingPlanes = null;
+				this._renderStrategy = this._emptyRender;
+				this._needsRender = true;
+
+			}
+
+		}
 
 	}
 
-	/**
-	 * Is this a default fontMaterial instance
-	 * @returns {boolean}
-	 */
-	get isDefault() {
+	render( element) {
 
-		return this.constructor === MSDFFontMaterial;
+		this._renderStrategy( element );
 
 	}
 
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get alphaTest() {
-		return this.uniforms.alphaTest.value;
+	/* eslint-disable no-unused-vars */	_emptyRender( element ) { /* eslint-enable no-unused-vars */ }
+
+	_hiddenRender( element ) {
+
+
+		const parentUI = element._parent._value;
+
+		const yLimit = parentUI._bounds._offsetHeight;
+		const xLimit = parentUI._bounds._offsetWidth;
+		const padding = parentUI._padding._value;
+		const border = parentUI._borderWidth._value;
+
+		for ( let i = 0; i < 4 && i < this._clippingPlanes.length ; i++ ) {
+			const clippingPlane = this._clippingPlanes[ i ];
+
+			switch ( i % 4 ) {
+				// top
+				case 0:
+					clippingPlane.constant = yLimit / 2 - ( padding.x + border.x );
+					break;
+
+				// right
+				case 1:
+					clippingPlane.constant = xLimit / 2 - ( padding.y + border.y );
+					break;
+
+				// bottom
+				case 2:
+					clippingPlane.constant = yLimit / 2 - ( padding.z + border.z );
+					break;
+
+				// left
+				case 3:
+					clippingPlane.constant = xLimit / 2 - ( padding.w + border.w );
+					break;
+			}
+
+			clippingPlane.applyMatrix4( parentUI.matrixWorld )
+
+		}
+
+		for ( let i = 0; i < element._children._uis.length; i++ ) {
+			const ui = element._children._uis[ i ];
+			ui._overflow._needsRender = true;
+		}
+
 	}
 
-	/**
-	 *
-	 * @param {number} v
-	 */
-	set alphaTest( v ) {
-		this.uniforms.alphaTest.value = v;
+	_propagateRender( element ) {
+
+		for ( let i = 0; i < element._children._uis.length; i++ ) {
+			const ui = element._children._uis[ i ];
+			ui._overflow._needsRender = true;
+		}
+
 	}
 
 }
 
-;// CONCATENATED MODULE: ./src/font/msdf/MSDFFontVariant.js
+const Overflow_AVAILABLE_VALUES = ['visible', 'hidden'];
+function Overflow_isValid( value ) {
 
+	if( Overflow_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
 
+		console.warn( `(.style) overflow value '${value}' is not valid. Aborted` );
+		return false;
 
+	}
 
+	return true;
 
+}
 
+;// CONCATENATED MODULE: ./src/utils/Units.js
+const WORLD_UNITS = 'rem';
 
-//JSDoc related imports
-/* eslint-disable no-unused-vars */
+//
+const CENTIMETERS = 'cm';
+const MILLIMETERS = 'mm';
+const INCHES = 'in';
+
+const UV = 'em';
+const PERCENT = '%';
+
+const availableUnits = [ WORLD_UNITS, UV, PERCENT ];
 
-/* eslint-enable no-unused-vars */
 
 /**
- * @extends {FontVariant}
+ * Obtain a valid unit
+ * @param {string} requestedUnits
+ * @returns {string}
  */
-class MSDFFontVariant extends FontVariant {
-
-	constructor( weight, style, json, texture ) {
+const validateUnits = function( requestedUnits ) {
 
-		super(weight, style);
+	// Sent default units if requested units not available
+	if( availableUnits.indexOf( requestedUnits) === -1 ) return WORLD_UNITS;
 
-		// provide default values
-		this._unitRange = new external_THREE_namespaceObject.Vector2( 1, 1 );
+	return requestedUnits;
 
-		if ( json.pages ) {
+}
 
-			this._buildData( json );
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/border/BorderRadius.js
 
-		} else {
 
-			_loadJson( this, json );
 
-		}
 
-		if ( texture instanceof external_THREE_namespaceObject.Texture ) {
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-			this._buildTexture( texture );
+/* eslint-enable no-unused-vars */
 
-		} else {
+class BorderRadius extends StyleVector4Property {
 
-			_loadTexture( this, texture );
+	/**
+	 *
+	 * @param {Vector4} defaultValue
+	 */
+	constructor( defaultValue ) {
 
-		}
+		super( 'borderRadius', defaultValue );
 
-		this._defaultMaterialClass = MSDFFontMaterial;
+		/**
+		 *
+		 * @type {Vector4}
+		 * @private
+		 */
+		this._valueUV = this._value.clone();
 
+		/**
+		 *
+		 * @type {Vector4}
+		 * @private
+		 */
+		this._input = this._vector4ValueSetter(new external_THREE_namespaceObject.Vector4(0,0,0,0), defaultValue);
+		/**
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		this._mediation = true;
 
-		this._checkReadiness();
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerTL = new external_THREE_namespaceObject.Vector2(0, 1);
 
-	}
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerTR = new external_THREE_namespaceObject.Vector2(1, 1);
 
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerBR = new external_THREE_namespaceObject.Vector2(1, 0);
 
-	get texture() {
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerBL = new external_THREE_namespaceObject.Vector2(0, 0);
 
-		return this._texture;
+		const mediationTop = new BorderRadiusMediator( this._valueUV, [ 'x', 'y' ] ); // bottom
+		const mediationBottom = new BorderRadiusMediator( this._valueUV, [ 'z', 'w'] ); // top
+		const mediationLeft = new BorderRadiusMediator( this._valueUV, [ 'x', 'w'] ); // right
+		const mediationRight = new BorderRadiusMediator( this._valueUV, [ 'y', 'z'] ); // left
 
-	}
+		mediationTop.complementaryMediation = mediationBottom;
+		mediationBottom.complementaryMediation = mediationTop;
+		mediationLeft.complementaryMediation = mediationRight;
+		mediationRight.complementaryMediation = mediationLeft;
 
-	get unitRange() {
+		/**
+		 *
+		 * @type {Array.<BorderRadiusMediator>}
+		 * @private
+		 */
+		this._sideMediators = [ mediationTop, mediationBottom, mediationLeft, mediationRight ];
 
-		return this._unitRange;
+		this._units = WORLD_UNITS;
 
 	}
 
 	/**
-	 * @param {Function.<Material|ShaderMaterial>} v
-	 * @override
+	 *
+	 * @param {string} units
 	 */
-	set fontMaterial( v ) {
+	set units( units ) {
 
-		this._defaultMaterialClass = v;
+		this._units = validateUnits( units );
+
+		this._needsProcess = true;
 
 	}
 
 	/**
 	 *
-	 * @override
-	 * @returns {Function.<Material|ShaderMaterial>}
+	 * @returns {string}
 	 */
-	get fontMaterial() {
-
-		return this._defaultMaterialClass;
-
-	}
+	get units() { return this._units; }
 
 	/**
 	 *
-	 * @param {MSDFJson} json
-	 * @private
+	 * @param {boolean} v
 	 */
-	_buildData( json ) {
+	set mediation ( v) {
 
-		this._font = new MSDFTypographicFont( json );
+		if( v !== this._mediation ){
 
-		this._kernings = this._buildKerningPairs( json );
-		this._chars = this._buildCharacters( json );
-		this._chars[ " " ] = this._buildCharacterWhite( json );
+			this._mediation = v;
 
-		this._size = json.info.size;
-		this._lineHeight = json.common.lineHeight;
-		this._lineBase = json.common.base;
+			this._needsUpdate = true;
 
-		this._distanceRange = json.distanceField.distanceRange;
+		}
 
-		// precompute the unit range as recommended by chlumsky
-		// @see https://github.com/Chlumsky/msdfgen
-		// "I would suggest precomputing unitRange as a uniform variable instead of pxRange for better performance."
-		this._unitRange = new external_THREE_namespaceObject.Vector2(this._distanceRange, this._distanceRange)
-			.divide( new external_THREE_namespaceObject.Vector2( json.common.scaleW, json.common.scaleH ) );
 	}
 
 	/**
 	 *
-	 * @param texture
-	 * @private
+	 * @returns {boolean}
 	 */
-	_buildTexture( texture ) {
+	get mediation () { return this._mediation; }
 
-		texture.generateMipmaps = false;
-		texture.minFilter = external_THREE_namespaceObject.LinearFilter;
-		texture.magFilter = external_THREE_namespaceObject.LinearFilter;
 
-		texture.needsUpdate = true;
+	/**
+	 *
+	 * @param {Object.<string,any>} out
+	 */
+
+	output( out ) {
+
+		out["cornerTL"] = this._cornerTL;
+		out["cornerTR"] = this._cornerTR;
+		out["cornerBR"] = this._cornerBR;
+		out["cornerBL"] = this._cornerBL;
 
 	}
 
 	/**
 	 *
-	 * @param {MSDFInlineGlyph} inline
-	 * @returns {MSDFGeometricGlyph}
+	 * @override
 	 */
-	getGeometricGlyph( inline, segments = 1 ) {
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		this._vector4ValueSetter( this._value, this._input );
 
-		return new MSDFGeometricGlyph( inline, segments );
+		this._needsProcess = true;
 
 	}
 
+
+	/* eslint-disable no-unused-vars */
 	/**
-	 * Abstraction implementation
 	 *
-	 * @returns {boolean}
-	 * @private
+	 * @override
 	 */
-	_readyCondition() {
+	process( element ){ /* eslint-enable no-unused-vars */
 
-		return this._chars && this._texture;
+		this._needsRender = true;
 
 	}
 
 	/**
-	 * Ensure that each font variant has its kerning dictionary
-	 * @see src/font/msdf/FontVariantMSDF.js for an implementation
-	 *
-	 * @param {MSDFJson} json
 	 *
-	 * @returns {Object.<string, number>}
-	 * @private
+	 * @override
 	 */
-	_buildKerningPairs( json ) {
+	render( element ){
 
-		const friendlyKernings = {};
+		this._valueUV.copy( this._value );
 
-		// Loop through each kernings pairs defined in msdf json
-		for ( let i = 0; i < json.kernings.length; i++ ) {
+		const elementWidth = element._bounds._offsetWidth;
+		const elementHeight = element._bounds._offsetHeight;
 
-			const kerning = json.kernings[ i ];
+		// @TODO: Units process could be strategies
+		if( this._units === PERCENT ) {
+			this._valueUV.divideScalar(100);
+		}
 
-			// ignore zero kerned glyph pair
-			if ( kerning.amount === 0 ) continue;
+		// @TODO: Units process could be strategies
+		if( this._units === WORLD_UNITS ) {
+			this._valueUV.divideScalar( Math.min(elementWidth , elementHeight) );
+		}
 
-			// Build and store the glyph paired characters "ij","WA", ... as keys, referecing their kerning amount
-			const glyphPair = String.fromCharCode( kerning.first, kerning.second );
 
-			// This would then be available for fast access
-			friendlyKernings[ glyphPair ] = kerning.amount;
+
+		/**
+		 * mediate
+		 * Be sure no side is greater than 1 (uv units)
+		 */
+		if( this._mediation ) {
+
+			do {
+
+				this._sideMediators.forEach( srm => srm.computeValue() );
+				this._sideMediators.sort( ( a, b ) => {
+					return a.value < b.value ? 1 : -1
+				} );
+
+				if ( this._sideMediators[ 0 ].value > 1.0 ) {
+					this._sideMediators[ 0 ].mediate();
+				}
+
+			} while ( this._sideMediators[ 0 ].value > 1.0 );
 
 		}
 
-		// update the font to keep it
-		return friendlyKernings;
 
-	}
+		let sX = elementWidth > elementHeight ? elementHeight/elementWidth : 1;
+		let sY = elementWidth < elementHeight ? elementWidth/elementHeight : 1;
+
+		// Do not scale pourcentages, allowing ovals
+		if( this._units === PERCENT ){
+			sX = sY = 1.0;
+		}
+
+		this._cornerTL.x = this._valueUV.x * sX;
+		this._cornerTL.y = 1 - (this._valueUV.x * sY );
+
+		this._cornerTR.x = 1 - (this._valueUV.y * sX );
+		this._cornerTR.y = 1 - (this._valueUV.y * sY );
 
+		this._cornerBR.x = 1 - (this._valueUV.z * sX );
+		this._cornerBR.y = this._valueUV.z * sY;
+
+		this._cornerBL.x = this._valueUV.w * sX;
+		this._cornerBL.y = this._valueUV.w * sY;
+
+	}
 
 	/**
 	 *
-	 * @param {MSDFJson} json
-	 * @private
 	 */
-	_buildCharacters( json ) {
-
-		const friendlyChars = {};
+	dispose() {
 
-		for ( let i = 0; i < json.chars.length; i++ ) {
-			const charOBJ = json.chars[ i ];
+		for ( const sideMediator of this._sideMediators ) {
 
-			friendlyChars[ charOBJ.char ] = new MSDFTypographicGlyph( this._font, charOBJ );
+			sideMediator.dispose();
 
 		}
 
-		return friendlyChars;
+		this._sideMediators = null;
+
+		this._cornerTL = null;
+		this._cornerTR = null;
+		this._cornerBR = null;
+		this._cornerBL = null;
+
+		super.dispose();
 
 	}
 
 	/**
 	 *
-	 * @param {MSDFJson} json
-	 * @private
+	 * @param {Number} v
 	 */
-	_buildCharacterWhite( json ) {
-		return new MSDFTypographicGlyph( this._font,
-			{
-				char: ' ',
-				width: json.info.size / 3,
-				height: json.info.size * 0.7,
-			});
+	set topLeft( v ) {
+
+		if( this._input.x === v ) return;
+
+		this._input.x = v;
+		this._needsUpdate = true;
+
 	}
 
-}
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get topLeft() { return this._input.x; }
 
-/***********************************************************************************************************************
- * INTERNAL STUFF
- **********************************************************************************************************************/
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set topRight( v ) {
 
+		if( this._input.y === v ) return;
 
-/**
- * Load a msdf json then build fontVariant data
- *
- * @param {FontVariant} fontVariant
- * @param {string} jsonUrl
- * @private
- */
-function _loadJson( fontVariant, jsonUrl ) {
+		this._input.y = v;
+		this._needsUpdate = true;
+	}
 
-	new external_THREE_namespaceObject.FileLoader().setResponseType( 'json' ) .load( jsonUrl, ( response ) => {
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get topRight() { return this._input.y; }
 
-		fontVariant._buildData( response );
-		fontVariant._checkReadiness();
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set bottomRight( v ) {
+		if( this._input.z === v ) return;
 
-	} );
+		this._input.z = v;
+		this._needsUpdate = true;
+	}
 
-}
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get bottomRight() { return this._input.z; }
 
-/**
- * Load a msdf texture then build texture
- *
- * @param {FontVariant} fontVariant
- * @param {string} textureUrl
- * @private
- */
-function _loadTexture( fontVariant, textureUrl ) {
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set bottomLeft( v ) {
 
-	fontVariant._texture = new external_THREE_namespaceObject.TextureLoader().load( textureUrl, ( texture ) => {
+		if( this._input.w === v ) return;
 
-		fontVariant._buildTexture( texture );
-		fontVariant._checkReadiness();
+		this._input.w = v;
+		this._needsUpdate = true;
+	}
 
-	} );
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get bottomLeft() { return this._input.w; }
 
-}
 
-/***********************************************************************************************************************
- * MSDF FILE FORMAT DESCRIPTION
- * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
- **********************************************************************************************************************/
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set top( v ) {
 
+		if( this._input.x === v && this._input.y === v ) return;
 
-/**
- * @typedef {Object} MSDFJson
- *
- * @property {MSDFJsonInfo} info
- * @property {MSDFJsonCommon} common
- * @property {Array.<MSDFJsonPage>} pages
- * @property {Array.<MSDFJsonChar>} chars
- * @property {{fieldType:string, distanceRange:number}} distanceField
- * @property {Array.<MSDFJsonKerning>} kernings
- */
+		this._input.x = this._input.y = v;
+		this._needsUpdate = true;
 
-/**
- *
- * @typedef {Object} MSDFJsonInfo
- *
- * @property {string} face This is the name of the true type font.
- * @property {number} size The size of the true type font.
- * @property {boolean} bold The font is bold.
- * @property {boolean} italic The font is italic.
- * @property {string[]} charset The name of the OEM charset used (when not unicode).
- * @property {boolean} unicode 	Set to 1 if it is the unicode charset.
- * @property {number} stretchH The font height stretch in percentage. 100% means no stretch.
- * @property {number} smooth Set to 1 if smoothing was turned on.
- * @property {number} aa The supersampling level used. 1 means no supersampling was used.
- * @property {Array.<number>} padding TThe padding for each character (up, right, down, left).
- * @property {Array.<number>} spacing The spacing for each character (horizontal, vertical).
- * @property {number} outline (not found) The outline thickness for the characters.
- */
+	}
 
-/**
- *
- * @typedef {Object} MSDFJsonCommon
- *
- * @property {number} lineHeight This is the distance in pixels between each line of text.
- * @property {number} base The number of pixels from the absolute top of the line to the base of the characters.
- * @property {number} scaleW The width of the texture, normally used to scale the x pos of the character image.
- * @property {number} scaleH The height of the texture, normally used to scale the y pos of the character image.
- * @property {number} pages The number of texture pages included in the font.
- * @property {boolean} packed
- * @property {number} alphaChnl
- * @property {number} redChnl
- * @property {number} greenChnl
- * @property {number[]} blueChnl
- */
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get top() { return (this._input.x + this._input.y) / 2; }
 
-/**
- * @typedef {Object} MSDFJsonPage
- *
- * @property {string} id The page id.
- * @property {string} file The texture file name.
- */
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set right( v ) {
 
-/**
- *
- * @typedef {Object} MSDFJsonChar
- *
- * @property {number} id The character id.
- * @property {number} index The character index.
- * @property {string} char The character.
- * @property {number} x The left position of the character image in the texture.
- * @property {number} y The top position of the character image in the texture.
- * @property {number} width The width of the character image in the texture.
- * @property {number} height The height of the character image in the texture.
- * @property {number} xoffset How much the current position should be offset when copying the image from the texture to the screen.
- * @property {number} yoffset How much the current position should be offset when copying the image from the texture to the screen.
- * @property {number} xadvance How much the current position should be advanced after drawing the character.
- * @property {string} page The texture page where the character image is found.
- * @property {number} chnl The texture channel where the character image is found (1 = blue, 2 = green, 4 = red, 8 = alpha, 15 = all channels).
- */
+		if( this._input.y === v && this._input.z === v ) return;
 
+		this._input.y = this._input.z = v;
+		this._needsUpdate = true;
+	}
 
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get right() { return (this._input.y + this._input.z) / 2; }
 
-/**
- *
- * @typedef {Object} MSDFJsonKerning
- *
- * @property {number} first The first character id.
- * @property {number} second The second character id.
- * @property {number} amount How much the x position should be adjusted when drawing the second character immediately following the first.
- *
- */
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set bottom( v ) {
+		if( this._input.z === v && this._input.w === v ) return;
 
-;// CONCATENATED MODULE: ./src/font/FontFamily.js
+		this._input.z = this._input.w = v;
+		this._needsUpdate = true;
+	}
 
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get bottom() { return (this._input.z + this._input.w) / 2; }
 
-//JSDoc related imports
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set left( v ) {
 
-/* eslint-disable no-unused-vars */
+		if( this._input.w === v && this._input.x === v ) return;
 
+		this._input.w = this._input.x = v;
+		this._needsUpdate = true;
+	}
 
-/* eslint-enable no-unused-vars */
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get left() { return (this._input.w + this._input.x) / 2; }
 
-class FontFamily extends external_THREE_namespaceObject.EventDispatcher {
+}
+
+/**
+ * Job: Contains two border radiuses values of the same side
+ * 			If their sums is greater than 1 (uv units) mediation could occurs
+ */
+class BorderRadiusMediator {
 
 	/**
 	 *
-	 * @param {string} name
+	 * @param {Vector4} borderRadiuses
+	 * @param {Array.<string>} sideProperties
 	 */
-	constructor( name ) {
-
-		super();
+	constructor( borderRadiuses, sideProperties ) {
 
 		/**
 		 *
-		 * @type {string}
+		 * @type {Vector4}
 		 * @private
 		 */
-		this._name = name;
+		this._borderRadiuses = borderRadiuses;
 
 		/**
 		 *
-		 * @type {Array.<FontVariant>}
+		 * @type {Array<string>}
 		 * @private
 		 */
-		this._variants = [];
+		this._sideProperties = sideProperties;
 
 		/**
 		 *
-		 * @type {boolean}
+		 * @type {BorderRadiusMediator|null}
 		 * @private
 		 */
-		this._isReady = false;
+		this._complementaryMediation = null;
 
+		/**
+		 *
+		 * @type {number}
+		 * @private
+		 */
+		this._value = 0;
 	}
 
-	get isReady() { return this._isReady; }
+	/**
+	 * The sum of the border radius of that side
+	 * @returns {number}
+	 */
+	get value(){ return this._value; }
 
 	/**
-	 *
-	 * @param {string} weight
-	 * @param {string} style
-	 * @param {string|Object} json
-	 * @param {string|Texture} texture
-	 * @param {boolean} [override=false]
+	 * A complementary side mediation ie: For top, complementary is bottom
+	 * @param {BorderRadiusMediator} brm
 	 */
-	addVariant( weight, style, json, texture, override = false){
+	set complementaryMediation( brm ){
 
-		if( override || !this.getVariant( weight, style) ){
+		this._complementaryMediation = brm;
 
-			this._isReady = false;
+	}
 
-			const newVariant = new MSDFFontVariant( weight, style, json, texture);
+	/**
+	 * Adds all side property to compute the value of that side
+	 */
+	computeValue(){
 
-			this._variants.push( newVariant );
+		let totalRadius = 0;
 
-			if( !newVariant.isReady ){
+		for ( const radius of this._sideProperties ) {
 
-				newVariant.addEventListener( "ready", this._checkReadiness )
+			totalRadius += this._borderRadiuses[radius];
 
-			} else {
+		}
 
-				this._checkReadiness();
+		this._value = totalRadius;
+	}
 
-			}
+	/**
+	 *
+	 * @param {boolean} [mediateOpposite=true]
+	 */
+	mediate( mediateOpposite = true ){
 
-		} else {
+		// Mediation only occurs when sum of radius are greater than 1 (uv units)
+		if( this._value < 1.0 ) return;
 
-			console.warn(`FontFamily('${this._name}')::addVariant() - Variant(${weight}, ${style}) already exists.`);
+		// Simply divide each component by the sum
+		for ( const radius of this._sideProperties ) {
+
+			this._borderRadiuses[radius] /= this._value;
 
 		}
 
-		return this;
+		if( mediateOpposite ) {
+
+			// and also mediate the complementary
+			this._complementaryMediation.mediate( false );
+
+		}
 
 	}
 
 	/**
 	 *
-	 * @param {FontVariant} variantImplementation
-	 * @param {boolean} [override=false]
 	 */
-	addCustomImplementationVariant( variantImplementation, override = false){
+	dispose() {
 
-		if( override || !this.getVariant( variantImplementation.weight, variantImplementation.style) ){
+		this._complementaryMediation = null;
+		this._borderRadiuses = null;
 
-			this._isReady = false;
+	}
 
-			this._variants.push( variantImplementation );
+}
 
-			if( !variantImplementation.isReady ){
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/border/BorderWidth.js
 
-				variantImplementation.addEventListener( "ready", this._checkReadiness )
 
-			} else {
 
-				this._checkReadiness();
+class BorderWidth extends StyleVector4Property{
 
-			}
+	/**
+	 *
+	 * @param defaultValue
+	 */
+	constructor( defaultValue ) {
 
-		} else {
+		super ( 'borderWidth', defaultValue, false );
 
-			console.warn(`FontFamily('${this._name}')::addCustomImplementationVariant() - Variant(${variantImplementation.weight}, ${variantImplementation.style}) already exists.`);
 
-		}
+		this._valueUV = this._value.clone();
 
-		return this;
+		// configure
+		this.output = this._outputValue;
+
+		this._units = WORLD_UNITS;
 
 	}
 
 	/**
 	 *
-	 * @param {string} weight
-	 * @param {string} style
-	 * @returns {FontVariant|null}
+	 * @param {string} units
 	 */
-	getVariant( weight, style ){
+	set units( units ) {
 
-		return this._variants.find( fontVariant => fontVariant.weight === weight && fontVariant.style === style );
+		this._units = validateUnits( units );
+
+		this._needsUpdate = true;
 
 	}
 
 	/**
 	 *
-	 * @return {string}
+	 * @returns {string}
 	 */
-	get name(){ return this._name; }
-
-	_checkReadiness = () => {
-
-		if( this._variants.every( v => v.isReady ) ) {
-
-			FontFamily_setReady( this );
-
-		}
-
-	}
-
-}
-
-const FontFamily_readyEvent = { type: 'ready' };
-
-/**
- * Set the ready status of a fontVariant
- * @param {FontFamily} fontFamily
- * @private
- */
-function FontFamily_setReady( fontFamily ) {
-
-	fontFamily._isReady = true;
-	fontFamily.dispatchEvent( FontFamily_readyEvent );
-
-}
-
-;// CONCATENATED MODULE: ./src/font/FontLibrary.js
+	get units() { return this._units; }
 
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 */
+	computeOutputValue( element) { /* eslint-enable no-unused-vars */
 
-// JSDoc related imports
-/* eslint-disable no-unused-vars */
+		this._vector4ValueSetter( this._value, this._input );
 
-/* eslint-enable no-unused-vars */
+		this._needsProcess = true;
 
+		element._bounds._needsUpdate = true;
+		element._layouter._needsUpdate = true;
 
-const _fontFamilies = {};
+		// for ( let i = 0; i < element._children._uis.length; i++ ) {
+		// 	const child = element._children._uis[ i ];
+		// 	element._bounds._needsUpdate = true;
+		// }
 
-/* eslint-disable no-unused-vars */
+	}
 
-/**
- *
- * @param {FontFamily} fontFamily
- * @returns {Promise<unknown>}
- */
-function prepare( fontFamily ) {
+	_outputValue( out ) {
+		out[this._id] = this._valueUV;
+	}
 
 	/**
 	 *
-	 * @type {FontFamily[]}
+	 * @override
 	 */
-	const families = [ ...arguments ];
-
-	// Check all family are right instance
-	families.forEach( f => {
-
-		if( !(f instanceof FontFamily) ) {
-
-			throw new Error(`FontLibrary::prepare() - One of the provided parameter is not a FontFamily. Instead ${typeof f} given.`);
-
-		}
-
-	})
+	process( element ) {
+		this._needsRender = true;
+		element._borderRadius._needsRender = true;
+	}
 
 	/**
-	 * Check that all provided families are loaded
-	 * @returns {boolean}
+	 * @override
 	 */
-	const areAllLoaded = function() {
+	render( element ) {
 
-		return families.every( f => f.isReady );
+		this._valueUV.copy( this._value );
 
-	}
+		const offsetWidth = element._bounds._offsetWidth;
+		const offsetHeight = element._bounds._offsetHeight;
 
-	// @TODO: Should handle possible rejection
-	return new Promise((resolve,reject)=>{
+		// @TODO: Units process could be strategies
+		if( this._units === PERCENT ){
 
-		// Direct resolve if all loaded
-		if ( areAllLoaded() ){
+			console.log( "Percent" );
+			// this._valueUV.divideScalar( 100 );
+			console.log( this._valueUV );
 
-			resolve();
+		}
 
-		} else {
+		// @TODO: Units process could be strategies
+		if( this._units === WORLD_UNITS ) {
 
-			// Add listener on each family not ready
-			for ( let i = 0; i < families.length; i++ ) {
+			if( offsetWidth !== 0) {
+				this._valueUV.w /= offsetWidth;
+				this._valueUV.y /= offsetWidth;
+			}
 
-				const family = families[ i ];
-				if( !family.isReady ){
 
-					family.addEventListener( "ready" , ()=> {
+			if( offsetHeight !== 0 ) {
+				this._valueUV.x /= offsetHeight;
+				this._valueUV.z /= offsetHeight;
+			}
 
-						// Resolve if all other families are loaded
-						if( areAllLoaded() ) {
 
-							resolve();
+		} else if( this._units === UV ) {
 
-						}
+			// @TODO: Units process could be strategies
 
-					});
+			if( offsetWidth !== 0 ) {
+				const sX = offsetWidth > offsetHeight ? offsetHeight/offsetWidth : 1;
+				this._valueUV.y *= sX;
+				this._valueUV.w *= sX;
+			}
 
-				}
+			if( offsetHeight !== 0 ) {
+				const sY = offsetWidth < offsetHeight ? offsetWidth/offsetHeight : 1;
 
+				this._valueUV.x *= sY;
+				this._valueUV.z *= sY;
 			}
 
 		}
 
-	});
+	}
 
 }
 
-/* eslint-enable no-unused-vars */
-
-
-/**
- *
- * @param {string} name
- * @returns {FontFamily}
- */
-function addFontFamily( name ) {
+;// CONCATENATED MODULE: ./src/core/properties/VisibleProperty.js
 
-	if ( _fontFamilies[ name ] ) {
-		console.error( `FontLibrary::addFontFamily - Font('${name}') is already registered` );
-	}
 
-	_fontFamilies[ name ] = new FontFamily( name );
+class VisibleProperty extends BaseProperty{
 
-	return _fontFamilies[ name ];
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 */
+	constructor( propertyId, value = true ) {
 
-}
+		super( 'visible', value, true );
 
-/**
- *
- * @param {string} name
- * @returns {FontFamily}
- */
-function getFontFamily( name ) {
+		this._needsUpdate = false;
 
-	return _fontFamilies[ name ];
+	}
 
-}
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
 
+		element.visible = this._value;
 
-/**
- *
- * @param { (fontVariant:FontVariant, character:string ) => string|null } handler
- */
-function setMissingCharacterHandler( handler ) {
+		if( element._parent._value ) {
 
-	_missingCharacterHandler = handler;
+			element._parent._value._children._needsUpdate = true;
 
-}
+		}
 
-//
+	}
 
-const FontLibrary = {
-	addFontFamily,
-	getFontFamily,
-	prepare,
-	setMissingCharacterHandler,
-	missingCharacter
-};
+	set value( value ) {
 
-/* harmony default export */ const font_FontLibrary = (FontLibrary);
+		if( ! this.isValid( value) ) return;
 
-/**
- *
- * @type { (fontVariant:FontVariant, character:string ) => string|null }
- * @private
- */
-let _missingCharacterHandler = function ( fontVariant, character ) {
+		if( this._value !== value ) {
 
-	console.error( `The character '${character}' is not included in the font characters set.` );
+			this._value = value;
 
-	// return a glyph has fallback
-	return " ";
+			this._needsUpdate = true;
 
-};
+		}
 
-/**
- *
- * @param {FontVariant} fontVariant
- * @param {string} character
- *
- * @returns {string}
- */
-function missingCharacter( fontVariant, character ) {
+	}
 
-	// Execute the user defined handled
-	return _missingCharacterHandler( fontVariant, character );
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get value() { return this._value; }
 
 }
 
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/background/BackgroundColorProperty.js
 
 
-;// CONCATENATED MODULE: ./src/components/core/UpdateManager.js
-/**
- * Job:
- * - recording components required updates
- * - trigger those updates when 'update' is called
- *
- * This module is a bit special. It is, with FontLibrary, one of the only modules in the 'component'
- * directory not to be used in component composition (Object.assign).
- *
- * When MeshUIComponent is instanciated, it calls UpdateManager.register().
- *
- * Then when MeshUIComponent receives new attributes, it doesn't update the component right away.
- * Instead, it calls UpdateManager.requestUpdate(), so that the component is updated when the user
- * decides it (usually in the render loop).
- *
- * This is best for performance, because when a UI is created, thousands of componants can
- * potentially be instantiated. If they called updates function on their ancestors right away,
- * a given component could be updated thousands of times in one frame, which is very ineficient.
- *
- * Instead, redundant update request are moot, the component will update once when the use calls
- * update() in their render loop.
- */
-class UpdateManager {
-
-	/*
-	 * get called by MeshUIComponent when component.set has been used.
-	 * It registers this component and all its descendants for the different types of updates that were required.
-	 */
-	static requestUpdate( component, updateParsing, updateLayout, updateInner ) {
 
-		component.traverse( ( child ) => {
 
-			if ( !child.isUI ) return;
+class BackgroundColorProperty extends StyleColorProperty {
 
-			// request updates for all descendants of the passed components
-			if ( !this.requestedUpdates[ child.id ] ) {
+	constructor( defaultValue ) {
 
-				this.requestedUpdates[ child.id ] = {
-					updateParsing,
-					updateLayout,
-					updateInner,
-					needCallback: ( updateParsing || updateLayout || updateInner )
-				};
+		super( 'backgroundColor', defaultValue, false );
 
-			} else {
+		this._input = new external_THREE_namespaceObject.Color(defaultValue);
 
-				if ( updateParsing ) this.requestedUpdates[ child.id ].updateParsing = true;
-				if ( updateLayout ) this.requestedUpdates[ child.id ].updateLayout = true;
-				if ( updateInner ) this.requestedUpdates[ child.id ].updateInner = true;
+	}
 
-			}
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-		} );
+		element._backgroundMesh.visible = !(this._input === 'none' || this._input === 'transparent');
 
-	}
+		if( this._input === 'inherit' ) {
 
-	/** Register a passed component for later updates */
-	static register( component ) {
+			this._value.set(this.getInheritedInput( element ));
 
-		if ( !this.components.includes( component ) ) {
+		} else {
 
-			this.components.push( component );
+			this._value.set( this._input );
 
 		}
 
 	}
 
-	/** Unregister a component (when it's deleted for instance) */
-	static disposeOf( component ) {
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set inline( value ) {
 
-		const idx = this.components.indexOf( component );
+		if( ! this.isValidValue( value ) ) return;
 
-		if ( idx > -1 ) {
+		if( value === this._inline ) {
 
-			this.components.splice( idx, 1 );
+			// do nothing no update, the value hasn't changed
+			return;
 
 		}
 
+		this._input = this._inline = value;
+
+		this._needsUpdate = true;
+
 	}
 
-	/** Trigger all requested updates of registered components */
-	static update() {
+}
 
-		if ( Object.keys( this.requestedUpdates ).length > 0 ) {
 
-			const roots = this.components.filter( ( component ) => {
 
-				return !component.parentUI;
+;// CONCATENATED MODULE: ./src/core/properties/EmptyProperty.js
 
-			} );
 
-			roots.forEach( root => this.traverseParsing( root ) );
-			roots.forEach( root => this.traverseUpdates( root ) );
+class EmptyProperty extends BaseProperty {
 
-		}
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId = 'untitled' ) {
+
+		super( propertyId, undefined, false );
 
 	}
 
+	/* eslint-disable no-unused-vars */
 	/**
-	 * Calls parseParams update of all components from parent to children
-	 * @private
+	 *
+	 * @param element
+	 * @param {Object.<string,any>} out
 	 */
-	static traverseParsing( component ) {
+	update( element , out ) { /* eslint-enable no-unused-vars */ }
 
-		const request = this.requestedUpdates[ component.id ];
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Output this property in a dictionnary
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) { /* eslint-enable no-unused-vars */ }
 
-		if ( request && request.updateParsing ) {
+}
 
-			component.parseParams();
+;// CONCATENATED MODULE: ./src/core/properties/InlineJustificator.js
 
-			request.updateParsing = false;
 
-		}
+class InlineJustificator extends BaseProperty {
 
-		component.childrenUIs.forEach( child => this.traverseParsing( child ) );
+	constructor() {
+		super( 'inlineJustificator', null, false );
 
+		/**
+		 *
+		 * @type {Lines}
+		 * @private
+		 */
+		this._value = null;
 	}
 
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */ }
+
 	/**
-	 * Calls updateLayout and updateInner functions of components that need an update
-	 * @private
+	 *
+	 * @override
 	 */
-	static traverseUpdates( component ) {
-
-		const request = this.requestedUpdates[ component.id ];
-		// instant remove the requested update,
-		// allowing code below ( especially onAfterUpdate ) to add it without being directly remove
-		delete this.requestedUpdates[ component.id ];
+	process( element ) {
 
-		//
+		const INNER_HEIGHT = element._bounds._innerHeight;
+		const lines = element._layouter._value;
 
-		if ( request && request.updateLayout ) {
+		const textHeight = Math.abs( lines.height );
 
-			request.updateLayout = false;
 
-			component.updateLayout();
+		// Line vertical positioning
+		let justificationOffset = ( () => {
 
-		}
+			switch ( element._alignItems._value ) {
 
-		//
+				case 'inherit':
+				case 'start':
+					return INNER_HEIGHT / 2 ;
 
-		if ( request && request.updateInner ) {
+				case 'end':
+					return textHeight - ( INNER_HEIGHT / 2 );
 
-			request.updateInner = false;
 
-			component.updateInner();
+				case 'stretch': // @TODO : Stretch should trigger an error in own property
+				case 'center':
+					return textHeight/2;
 
-		}
+			}
+		} )();
 
+		//console.log( justificationOffset );
 
-		// Update any child
-		component.childrenUIs.forEach( ( childUI ) => {
+		// Apply padding
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
 
-			this.traverseUpdates( childUI );
+		justificationOffset += ( - padding.x + padding.z ) / 2 + ( - border.x + border.z ) / 2;
 
-		} );
+		//
 
-		// before sending onAfterUpdate
-		if ( request && request.needCallback ) {
+		lines.forEach( ( line ) => {
 
-			component.performAfterUpdate();
+			line.y += justificationOffset;
 
-		}
+			line.forEach( ( inline ) => {
 
-	}
+				inline.offsetY += justificationOffset;
 
-}
+			} );
 
-// TODO move these into the class (Webpack unfortunately doesn't understand
-// `static` property syntax, despite browsers already supporting this)
-UpdateManager.components = [];
-UpdateManager.requestedUpdates = {};
+		} );
 
-;// CONCATENATED MODULE: ./src/utils/font/FontWeight.js
-const LIGHTER = '100';
-const _100 = '100';
-const _200 = '200';
-const _300 = '300';
-const FontWeight_NORMAL = '400';
-const _400 = '400';
-const _500 = '500';
-const _600 = '600';
-const BOLD = '700';
-const _700 = '700';
-const _800 = '800';
-const BOLDER = '900';
-const _900 = '900';
+	}
 
+}
 
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/AlignItemsProperty.js
 
-;// CONCATENATED MODULE: ./src/utils/font/FontStyle.js
-const FontStyle_NORMAL = "normal";
-const ITALIC = "italic";
-const OBLIQUE = "oblique";
 
-const MAX_OBLIQUE_ANGLE = 90;
+/**
+ *
+ * @type {Array.<string>}
+ */
+const AlignItemsProperty_AVAILABLE_VALUES = ['start', 'center', 'end', 'stretch'];
 
 /**
- * Get the oblique style with custom angle
- * @param angleInDegree
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
  */
-function obliqueCustomAngle( angleInDegree ){
+const AlignItemsProperty_isValid = function ( value ) {
 
-	// Clamp the angle
-	angleInDegree = angleInDegree < - MAX_OBLIQUE_ANGLE ? - MAX_OBLIQUE_ANGLE : angleInDegree > MAX_OBLIQUE_ANGLE ? MAX_OBLIQUE_ANGLE : angleInDegree;
+	if( AlignItemsProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
 
-	return `${OBLIQUE} ${angleInDegree}deg`;
+		console.warn( `(.style) alignItems value '${value}' is not valid. Aborted` );
+		return false;
 
-}
+	}
 
+	return true;
 
-;// CONCATENATED MODULE: ./src/utils/Defaults.js
+}
 
+class AlignItemsProperty extends SubStyleProperty {
 
+	constructor() {
 
+		super( 'alignItems', 'inherit', true );
 
+		this.isValidValue = AlignItemsProperty_isValid;
 
+	}
 
+}
 
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/TextAlignProperty.js
 
 
 
-/** List the default values of the lib components */
-/* harmony default export */ const Defaults = ({
-	container: null,
-	fontFamily: null,
-	fontSize: 0.05,
-	fontKerning: 'normal', // FontKerning would act like css : "none"|"normal"|"auto"("auto" not yet implemented)
-	fontStyle: FontStyle_NORMAL,
-	fontWeight: FontWeight_NORMAL,
-	bestFit: 'none',
-	offset: 0.01,
-	interLine: 0.01,
-	breakOn: '- ,.:?!\n',// added '\n' to also acts as friendly breaks when white-space:normal
-	whiteSpace: PRE_LINE,
-	contentDirection: COLUMN,
-	alignItems: CENTER,
-	justifyContent: JustifyContent_START,
-	fontTexture: null,
-	textAlign: TextAlign_CENTER,
-	fontColor: new external_THREE_namespaceObject.Color( 0xffffff ),
-	fontOpacity: 1,
-	fontPXRange: 4,
-	fontSupersampling: true,
-	borderRadius: new external_THREE_namespaceObject.Vector4( 0.01,0.01,0.01, 0.01 ),
-	borderWidth: new external_THREE_namespaceObject.Vector4( 0, 0, 0, 0 ),
-	borderColor: new external_THREE_namespaceObject.Color( 'black' ),
-	borderOpacity: 1,
-	backgroundSize: "cover",
-	backgroundColor: new external_THREE_namespaceObject.Color( 0x222222 ),
-	backgroundWhiteColor: new external_THREE_namespaceObject.Color( 0xffffff ),
-	backgroundOpacity: 0.8,
-	backgroundOpaqueOpacity: 1.0,
-	// this default value is a function to avoid initialization issues (see issue #126)
-	// backgroundTexture: makeBackgroundTexture,
-	backgroundTexture: null,
-	hiddenOverflow: false,
-	letterSpacing: 0
-});
+class TextAlignProperty extends SubStyleProperty {
 
-;// CONCATENATED MODULE: ./src/utils/mediator/transformers/CommonTransformers.js
-/**
- * Transfer the alphaTest value from MeshUIComponent to material
- * @type {import('../Mediator').MediationTransformer}
- */
-const directTransfer = function ( target, targetProperty, value ) {
+	constructor() {
 
-	target[targetProperty] = value;
+		super( 'textAlign', 'inherit', true );
 
-}
+		this.isValidValue = TextAlignProperty_isValid;
 
-;// CONCATENATED MODULE: ./src/utils/mediator/Mediator.js
+	}
 
+}
 
 /**
- * An option function to transform value from subject to target
- * @typedef {(target:any, targetProperty:string, value:any) => void} MediationTransformer
  *
+ * @type {Array.<string>}
  */
+const TextAlignProperty_AVAILABLE_VALUES = ['left', 'right', 'center', 'justify', 'justify-left', 'justify-right','justify-center'];
 
 /**
- * @typedef {Object.<{subjectProperty:string, trans?:MediationTransformer}>} MediationDefinition
  *
+ * @param {any} value
+ * @return {boolean}
+ * @private
  */
+const TextAlignProperty_isValid = function ( value ) {
 
-class Mediator{
-
-	/**
-	 * @constructor
-	 * @param {MediationDefinition} definition
-	 */
-	constructor( definition ) {
+	if( TextAlignProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
 
-		/**
-		 *
-		 * @type {MediationDefinition}
-		 * @private
-		 */
-		this._definition = definition;
+		console.warn( `(.style) textAlign value '${value}' is not valid. Aborted` );
+		return false;
 
 	}
 
-	/**
-	 *
-	 * @param {MediationDefinition} value
-	 */
-	set definition( value ) {
-
-		this._definition = value;
+	return true;
 
-	}
+}
 
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/FlexDirectionProperty.js
 
-	/**
-	 *
-	 * @param {MeshUIComponent} subject
-	 * @param {any} target
-	 * @param {Object.<(string|number), any>} options
-	 * @param {any} [secondTarget=null]
-	 */
-	mediate( subject, target, options, secondTarget = null ) {
 
-		// Mediate each subject properties to material
-		for ( const subjectProperty in this._definition ) {
-			const mediationDefinition = this._definition[subjectProperty];
 
-			if ( options[subjectProperty] !== undefined ) {
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-				// retrieve the mediation transformer to use for this property
-				const mediationTransformer = mediationDefinition.t ? mediationDefinition.t : directTransfer;
-				mediationTransformer( target, mediationDefinition.m, options[subjectProperty] );
+/* eslint-enable no-unused-vars */
 
-				// Also transfert to second target is isset
-				if( secondTarget ) {
+class FlexDirectionProperty extends SubStyleProperty {
 
-					mediationTransformer( secondTarget, mediationDefinition.m, options[subjectProperty] );
+	constructor() {
 
-				}
+		super( 'flexDirection', 'inherit', true );
 
-			}
+		// configure
 
-		}
+		this.isValid = FlexDirectionProperty_isValid;
 
 	}
 
+}
 
-	/***********************************************************************************************************************
-	 * STATIC
-	 **********************************************************************************************************************/
-
-	/**
-	 *
-	 * @param {MeshUIComponent} subject
-	 * @param {any} target
-	 * @param {Object.<(string|number), any>} options
-	 * @param {Object.<{subjectProperty:string, trans?:(target:any, targetProperty:string, value:any) => void}>} mediationDefinitions
-	 * @param {any} [secondTarget=null]
-	 */
-	static mediate( subject, target, options, mediationDefinitions, secondTarget = null ) {
-
-		// Cannot mediate if target not defined
-		if( !target ) return;
+const FlexDirectionProperty_AVAILABLE_VALUES = ['row','row-reverse', 'column', 'column-reverse'];
 
-		// if no options found, retrieve all need options
-		if( !options ){
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function FlexDirectionProperty_isValid( value ) {
 
-			options = {};
-			for ( const materialProperty in mediationDefinitions ) {
+	if( FlexDirectionProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
 
-				let value = subject[materialProperty];
-				if( value === undefined ){
+		console.warn( `(.style) flexDirection value '${value}' is not valid. Aborted` );
+		return false;
 
-					const upperCaseProperty = materialProperty[0].toUpperCase() + materialProperty.substring(1)
-					if( subject["get"+upperCaseProperty] ) {
+	}
 
-						value = subject["get"+upperCaseProperty]();
+	return true;
 
-					}
+}
 
-				}
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/JustifyContentProperty.js
 
-				if( value !== undefined ) {
 
-					options[materialProperty] = value;
+class JustifyContentProperty extends SubStyleProperty {
 
-				}
+	constructor() {
 
-			}
+		super( 'justifyContent', 'inherit', true );
 
-		}
+		/**
+		 *
+		 * @override
+		 */
+		this.isValidValue = JustifyContentProperty_isValid;
 
+	}
 
-		// Mediate each subject properties to material
-		for ( const subjectProperty in mediationDefinitions ) {
-			const definition = mediationDefinitions[subjectProperty];
+}
 
-			if ( options[subjectProperty] !== undefined ) {
+/**
+ *
+ * @type {Array.<string>}
+ */
+const JustifyContentProperty_AVAILABLE_VALUES = [ 'start', 'center', 'end', 'space-between', 'space-around', 'space-evenly' ];
 
-				// retrieve the mediation transformer to use for this property
-				const mediationTransformer = definition.t ? definition.t : directTransfer;
-				mediationTransformer( target, definition.m, options[subjectProperty] );
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function JustifyContentProperty_isValid( value ) {
 
-				// Also transfert to second target is isset
-				if( secondTarget ) {
+	if ( JustifyContentProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
 
-					mediationTransformer( secondTarget, definition.m, options[subjectProperty] );
+		console.warn( `(.style) justifyContent value '${value}' is not valid. Aborted` );
+		return false;
 
-				}
+	}
 
-			}
+	return true;
 
-		}
+}
 
-	}
 
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/OrderProperty.js
 
-}
 
-;// CONCATENATED MODULE: ./src/components/core/MeshUIComponent.js
+class OrderProperty extends SubStyleProperty {
 
+	constructor( ) {
 
+		super( 'order', 0, true );
 
+		this._value = 0;
 
+		this._input = 0;
 
+		// configure
+		this._allowsInherit = false;
+	}
 
+	/* eslint-disable no-unused-vars */computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
+		this._value = this._inheritedInput;
 
+		// require parent children (order) update, which will require layout update
+		if( element._parent._value ) {
 
+			element._parent._value._children._needsProcess = true;
 
+		}
 
+	}
 
+}
 
-//JSDoc related imports
-/* eslint-disable no-unused-vars */
 
 
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/PositionProperty.js
 
-/* eslint-enable no-unused-vars */
 
-/**
 
+class PositionProperty extends SubStyleProperty {
 
-Job:
-- Set this component attributes and call updates accordingly
-- Getting this component attribute, from itself or from its parents
-- Managing this component's states
+	constructor( ) {
 
-This is the core module of three-mesh-ui. Every component is composed with it.
-It owns the principal public methods of a component : set, setupState and setState.
+		super( 'position', 'static', true );
 
- */
+		// configure
+		this._allowsInherit = false;
 
-class MeshUIComponent extends external_THREE_namespaceObject.Object3D {
+		this._value = 'static';
+		this._needsUpdate = false;
 
-	/**
-	 *
-	 * @param {Object.<(string), any>} options
-	 */
-		constructor( options ) {
+		this.computeOutputValue = this._computeFromInherited;
 
-			super( options );
+		this.isValidValue = PositionProperty_isValid;
 
-			this.states = {};
-			this.currentState = undefined;
-			this.isUI = true;
-			this.autoLayout = true;
+	}
 
-			// children
+	_computeFromInherited( element ) {
+		super._computeFromInherited( element );
 
-			/**
-			 *
-			 * @type {MeshUIComponent[]}
-			 */
-			this.childrenUIs = [];
+		//console.log( "Position update")
+		// require parent to compute children -> bounds -> etc...
+		if( element._parent._value ) element._parent._value._children._needsProcess = true;
+	}
 
-			/**
-			 *
-			 * @type {MeshUIComponent[]}
-			 */
-			this.childrenBoxes = [];
+}
 
-			/**
-			 *
-			 * @type {MeshUIComponent[]}
-			 */
-			this.childrenTexts = [];
+const PositionProperty_AVAILABLE_VALUES = ['static', 'absolute'];
 
-			/**
-			 *
-			 * @type {MeshUIComponent[]}
-			 */
-			this.childrenInlines = [];
+function PositionProperty_isValid( value ) {
 
+	if( PositionProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
 
-			/**
-			 * parents
-			 * @type {MeshUIComponent|null}
-			 */
-			this.parentUI = null;
+		console.warn( `(.style) position value '${value}' is not valid. Aborted` );
+		return false;
 
-			// update parentUI when this component will be added or removed
-			this.addEventListener( 'added', this._rebuildParentUI );
-			this.addEventListener( 'removed', this._rebuildParentUI );
+	}
 
-			/**
-			 *
-			 * @type {Mesh|null}
-			 * @protected
-			 */
-			this._main = null;
+	return true;
 
-			// hooks
-			this._hooks = {};
-			this._onAfterUpdates = [];
+}
 
-			this.position.z = this.getOffset();
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/bounds/StyleSideProperty.js
 
-			/**
-			 *
-			 * @type {Object.<{m:string, t?:(value:any) => any}>}
-			 * @protected
-			 */
-			this._materialMediation = {};
 
-			this._meshMediation = {
-				_castShadow:{m:'castShadow'},
-				_receiveShadow:{m:'receiveShadow'},
-				// _renderOrder:{m:'renderOrder'}
-			}
+class StyleSideProperty extends SubStyleProperty {
 
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {number} defaultValue
+	 */
+	constructor( propertyId, defaultValue = null ) {
 
-			/**
-			 *
-			 * @type {Vector4}
-			 * @private
-			 */
-			this._borderRadius = new external_THREE_namespaceObject.Vector4().copy( Defaults.borderRadius );
+		super( propertyId, defaultValue, true );
 
-			/**
-			 *
-			 * @type {Vector4}
-			 * @private
-			 */
-			this._borderWidth = new external_THREE_namespaceObject.Vector4().copy( Defaults.borderWidth );
+		/**
+		 * @type {any}
+		 * @internal
+		 */
+		this._input = 'auto';
 
-			/**
-			 *
-			 * @type {Vector4}
-			 * @private
-			 */
-			this._padding = new external_THREE_namespaceObject.Vector4( 0, 0, 0, 0 );
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._auto = true;
 
-			/**
-			 *
-			 * @type {Vector4}
-			 * @private
-			 */
-			this._margin = new external_THREE_namespaceObject.Vector4( 0, 0, 0, 0 );
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._relative = false;
 
-			/**
-			 * @Todo: Probably only for boxComponents
-			 * @type {Lines}
-			 */
-			this.lines = new Lines();
+		this._updateRequired = true;
 
-			/**
-			 *
-			 * @type {FontVariant}
-			 * @protected
-			 */
-			this._font = null;
 
-		}
 
-		/////////////
-		/// GETTERS
-		/////////////
+	}
 
-		getClippingPlanes() {
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set inline( value ) {
 
-			const planes = [];
+		if( ! this.isValidValue( value ) ) return;
 
-			if ( this.parentUI ) {
+		if( value === this._inline ) {
 
-				if ( this.isBlock && this.parentUI.getHiddenOverflow() ) {
+			// do nothing no update, the value hasn't changed
+			return;
 
-					// const yLimit = ( this.getInsetHeight() / 2 );
-					const yLimit = this.parentUI.getOffsetHeight();
-					const xLimit = this.parentUI.getOffsetWidth();
-					const padding = this.parentUI._padding;
-					const border = this.parentUI._borderWidth;
+		}
 
-					const newPlanes = [
-						// top
-						new external_THREE_namespaceObject.Plane( new external_THREE_namespaceObject.Vector3( 0, -1, 0 ), yLimit / 2 - ( padding.x + border.x ) ),
-						// right
-						new external_THREE_namespaceObject.Plane( new external_THREE_namespaceObject.Vector3( -1, 0, 0 ), xLimit / 2  - ( padding.y + border.y ) ),
-						// bottom
-						new external_THREE_namespaceObject.Plane( new external_THREE_namespaceObject.Vector3( 0, 1, 0 ), yLimit / 2 - ( padding.z + border.z ) ),
-						// left
-						new external_THREE_namespaceObject.Plane( new external_THREE_namespaceObject.Vector3( 1, 0, 0 ), xLimit / 2 - ( padding.w + border.w ) ),
-					];
+		this._inline = value;
 
-					newPlanes.forEach( plane => {
+		if( this._input === this._inline ) return;
 
-						plane.applyMatrix4( this.parentUI.matrixWorld );
+		this._parseInput();
 
-					} );
+	}
 
-					planes.push( ...newPlanes );
+	get inline() { return this._inline; }
 
-				}
+	_parseInput() {
 
-				if ( this.parentUI.parentUI ) {
+		let updateRequired = true;
 
-					planes.push( ...this.parentUI.getClippingPlanes() );
+		// Inline has priority if set
+		if( this._inline !== undefined && this._inline !== 'unset' ) {
 
-				}
+			this._input = this._inline;
 
-			}
+		}
+		// or fallback on computed
+		else if( this._computed !== undefined ) {
 
-			return planes;
+			// do not require an update if the value remains
+			if( this._computed === this._input ) updateRequired = false;
+			this._input = this._computed;
 
 		}
+		// or fallback on default value
+		else {
 
-		/**
-		 * @TODO : This is already present in MaterialManager
-		 * Update a component's materials clipping planes.
-		 * Called every frame.
-		 */
-		updateClippingPlanes( value ) {
+			updateRequired = this._input === 'inherit';
 
-			const newClippingPlanes = value !== undefined ? value : this.getClippingPlanes();
+		}
 
-			if ( JSON.stringify( newClippingPlanes ) !== JSON.stringify( this.clippingPlanes ) ) {
+		if( updateRequired ) {
 
-				this.clippingPlanes = newClippingPlanes;
+			this._auto = !this._input || this._input === 'auto';
 
-				if ( this.material ) this.material.clippingPlanes = this.clippingPlanes;
 
-			}
+			if ( !this._auto ) {
 
-		}
+				// string can be percentages
+				// console.log( this._input, typeof this._input, this._input.endsWith('%'))
+				if ( ( typeof this._input === 'string' || this._input instanceof String ) && this._input.endsWith( '%' ) ) {
 
-		/** Get the highest parent of this component (the parent that has no parent on top of it) */
-		getHighestParent() {
 
-			if ( !this.parentUI ) {
+					this._relative = true;
+					this._value = 0;
 
-				return this;
 
-			}
+					const floatValue = parseFloat( this._input.replace( '%', '' ).trim() );
+					if ( !isNaN( floatValue ) ) {
 
-			return this.parent.getHighestParent();
+						this._value = floatValue / 100;
 
+					}
 
-		}
+				} else {
 
-		/**
-		 * look for a property in this object, and if does not find it, find in parents or return default value
-		 * @private
-		 */
-		_getProperty( propName ) {
+					this._relative = false;
+					this._value = this._input;
 
-			if ( this[ propName ] === undefined && this.parentUI ) {
+				}
 
-				return this.parent._getProperty( propName );
+			} else {
 
-			} else if ( this[ propName ] !== undefined ) {
 
-				return this[ propName ];
+				this._relative = false;
 
 			}
 
-			return Defaults[ propName ];
+			this._needsUpdate = this._updateRequired = updateRequired;
 
 		}
 
-		//
+	}
 
-		getFontSize() {
+	update( element, out ) {
 
-			return this._getProperty( 'fontSize' );
+		if( this._updateRequired ) {
 
-		}
+			this._updateRequired = false;
 
-		getSegments() {
+			if( !this._allowsInherit ) {
 
-			return this.segments || 1;
+				this._inheritedInput = this.getInheritedInput( element );
 
-		}
+			}
 
-		getAlphaTest() {
+			this.computeOutputValue( element );
 
-			return this.alphaTest || 0.02;
+			// rebuild same properties on children 'inheritance'
+			for ( const childUIElement of element._children._uis ) {
 
-		}
+				childUIElement[`_${this._id}`]._needsUpdate = true;
+
+			}
 
-		getFontKerning() {
+			this.output( out );
 
-			return this._getProperty( 'fontKerning' );
+			if( element._parent._value ) element._parent._value._layouter._needsProcess = true;
 
 		}
 
-		getFontStyle() {
+	}
 
-			return this._getProperty( 'fontStyle' );
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-		}
+		element._bounds._needsUpdate = true;
+		element._renderer._needsRender = true;
+		// element._autoSize._needsProcess = true;
 
-		getFontWeight() {
+	}
 
-			return this._getProperty( 'fontWeight' );
+	getInheritedInput ( element ) {
 
-		}
+		if( this._input !== 'inherit' && !this._auto ) return this._input;
 
-		getLetterSpacing() {
+		const parent = element._parent._value;
+		if( parent ) {
 
-			return this._getProperty( 'letterSpacing' );
+			return parent[`_${this._id}`].getInheritedInput( parent )
 
 		}
 
-		getFontTexture() {
+		return this.getDefaultValue();
 
-			if( this._font && this._font.isReady ){
+	}
 
-				return this._font.texture;
+	getDefaultValue() {
 
-			}
+		return 0;
 
-			return this._getProperty( 'fontTexture' );
+	}
 
-		}
+	/**
+	 *
+	 * @return {number}
+	 */
+	get value() { return this._value; }
 
-		getFontFamily() {
+}
 
-			return this._getProperty( 'fontFamily' );
 
-		}
 
-		getBreakOn() {
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/bounds/WidthProperty.js
 
-			return this._getProperty( 'breakOn' );
 
-		}
+class WidthProperty extends StyleSideProperty {
 
-		getWhiteSpace() {
-
-			return this._getProperty( 'whiteSpace' );
+	constructor() {
 
-		}
+		super( 'width' );
 
-		getTextAlign() {
+	}
 
-			return this._getProperty( 'textAlign' );
+}
 
-		}
 
-		getFontColor() {
 
-			return this._getProperty( 'fontColor' );
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/bounds/HeightProperty.js
 
-		}
 
+class HeightProperty extends StyleSideProperty {
 
-		getFontSupersampling() {
+	constructor() {
 
-			return this._getProperty( 'fontSupersampling' );
+		super( 'height' );
 
-		}
+	}
 
-		getFontOpacity() {
+	computeOutputValue( element ) {
 
-			return this._getProperty( 'fontOpacity' );
+		super.computeOutputValue( element );
 
-		}
+	}
 
-		getFontPXRange() {
+}
 
-			return this._getProperty( 'fontPXRange' );
 
-		}
 
-		getBorderRadius() {
+;// CONCATENATED MODULE: ./src/core/properties/TextContentEmpty.js
 
-			return this._getProperty( 'borderRadius' );
 
-		}
+class TextContentEmpty extends EmptyProperty{
 
-		getBorderWidth() {
+	constructor() {
 
-			return this._getProperty( 'borderWidth' );
+		super( "textContent" );
 
-		}
+		this._needsUpdate = false;
 
-		getBorderColor() {
+	}
 
-			return this._getProperty( 'borderColor' );
 
-		}
+	/* eslint-disable no-unused-vars */ set value( v ) { 	/* eslint-enable no-unused-vars */ }
 
-		getBorderOpacity() {
 
-			return this._getProperty( 'borderOpacity' );
+	/* eslint-disable no-unused-vars */ process( element ) { /* eslint-enable no-unused-vars */
 
-		}
+		let content = "";
+		for ( let i = 0; i < element.children.length; i++ ) {
+			const child = element.children[i];
 
-		/// SPECIALS
+			if( child.isUI ) {
 
-		/** return the first parent with a 'threeOBJ' property */
-		getContainer() {
+				content += child.textContent;
 
-			if ( !this.threeOBJ && this.parent ) {
+			}
 
-				return this.parent.getContainer();
+		}
 
-			} else if ( this.threeOBJ ) {
+		this._value = content;
 
-				return this;
+	}
 
-			}
 
-			return Defaults.container;
+}
 
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontStyleProperty.js
 
-		}
 
-		/** Get the number of UI parents above this elements (0 if no parent) */
-		getParentsNumber( i ) {
 
-			i = i || 0;
+class FontStyleProperty extends SubStyleProperty {
 
-			if ( this.parentUI ) {
+	constructor( defaultValue ) {
 
-				return this.parentUI.getParentsNumber( i + 1 );
+		super( 'fontStyle', defaultValue, true );
 
-			}
+		this.isValidValue = FontStyleProperty_isValid;
 
-			return i;
+	}
 
-		}
+}
 
-		////////////////////////////////////
-		/// GETTERS WITH NO PARENTS LOOKUP
-		////////////////////////////////////
 
-		getBackgroundOpacity() {
+const FontStyleProperty_AVAILABLE_VALUES = ['normal', 'italic'];
+function FontStyleProperty_isValid( value ) {
 
-			return ( !this.backgroundOpacity && this.backgroundOpacity !== 0 ) ?
-				Defaults.backgroundOpacity : this.backgroundOpacity;
+	if( FontStyleProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
 
-		}
+		console.warn( `(.style) fontStyle value '${value}' is not valid. Aborted` );
+		return false;
 
-		getBackgroundColor() {
+	}
 
-			return this.backgroundColor || Defaults.backgroundColor;
+	return true;
 
-		}
+}
 
-		getBackgroundTexture() {
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontWeightProperty.js
 
-			// return this.backgroundTexture || DEFAULTS.backgroundTexture();
-			return this.backgroundTexture || Defaults.backgroundTexture;
 
-		}
 
-		/**
-		 * @deprecated
-		 * @returns {string}
-		 */
-		getAlignContent() {
+class FontWeightProperty extends SubStyleProperty {
 
-			return this.alignContent || Defaults.alignContent;
+	constructor( def ) {
 
-		}
+		super( 'fontWeight', def , true );
 
-		getAlignItems() {
+		this.isValid = FontWeightProperty_isValid;
+	}
 
-			return this.alignItems || Defaults.alignItems;
+}
 
-		}
+const FontWeightProperty_AVAILABLE_VALUES = ['100','200','300','400','500','600','700','800','900','light','normal','bold','bolder'];
+function FontWeightProperty_isValid( value ) {
 
-		getContentDirection() {
+	if( FontWeightProperty_AVAILABLE_VALUES.indexOf( value.toString() ) === -1 ) {
 
-			return this.contentDirection || Defaults.contentDirection;
+		console.warn( `(.style) fontWeight value '${value}' is not valid. Aborted` );
+		return false;
 
-		}
+	}
 
-		getJustifyContent() {
+	return true;
 
-			return this.justifyContent || Defaults.justifyContent;
+}
 
-		}
+;// CONCATENATED MODULE: ./src/font/TypographicFont.js
+class TypographicFont {
 
-		getInterLine() {
+	constructor() {
 
-			return ( this.interLine === undefined ) ? Defaults.interLine : this.interLine;
+		/** @protected */ this._size = 42;
+		/** @protected */ this._lineHeight = 42;
+		/** @protected */ this._lineBase = 38;
+		/** @protected */ this._name = "-";
+		/** @protected */ this._charset = "";
 
-		}
+	}
 
-		getOffset() {
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get size() { return this._size; }
 
-			return ( this.offset === undefined ) ? Defaults.offset : this.offset;
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get lineHeight() { return this._lineHeight; }
 
-		}
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get lineBase() { return this._lineBase; }
 
-		getBackgroundSize() {
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get name() { return this._name; }
 
-			return ( this.backgroundSize === undefined ) ? Defaults.backgroundSize : this.backgroundSize;
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get charset() { return this._charset; }
 
-		}
+}
 
-		getHiddenOverflow() {
+;// CONCATENATED MODULE: ./src/font/msdf/MSDFTypographicFont.js
 
-			return ( this.hiddenOverflow === undefined ) ? Defaults.hiddenOverflow : this.hiddenOverflow;
 
-		}
+class MSDFTypographicFont extends TypographicFont{
 
-		getBestFit() {
+	/**
+	 *
+	 * @param {import('./MSDFFontVariant').MSDFJson} json
+	 */
+	constructor( json ) {
 
-			return ( this.bestFit === undefined ) ? Defaults.bestFit : this.bestFit;
+		super();
 
-		}
+		// base description
+		this._size = json.info.size;
+		this._lineHeight = json.common.lineHeight;
+		this._lineBase = json.common.base;
 
-		///////////////
-		///  UPDATE
-		///////////////
+		this._name = json.info.face;
 
-		/**
-		 * Filters children in order to compute only one times children lists
-		 * @private
-		 */
-		_rebuildChildrenLists() {
+		// MSDF
+		this._textureWidth = json.common.scaleW;
+		this._textureHeight = json.common.scaleH;
 
-			// Stores all children that are ui
-			this.childrenUIs = this.children.filter( child => child.isUI && child.visible );
+		this._charset = json.chars.map( char => char.char ).join("");
 
-			// Stores all children that are box
-			this.childrenBoxes = this.childrenUIs.filter( child => child.isBoxComponent );
+	}
 
-			// Stores all children that are inline
-			this.childrenInlines = this.childrenUIs.filter( child => child.isInline );
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get textureWidth() { return this._textureWidth; }
 
-			// Stores all children that are text
-			this.childrenTexts = this.childrenUIs.filter( child => child.isText );
-		}
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get textureHeight() { return this._textureHeight; }
 
-		/**
-		 * Try to retrieve parentUI after each structural change
-		 * @private
-		 */
-		_rebuildParentUI = () => {
+}
 
-			if ( this.parent && this.parent.isUI ) {
+;// CONCATENATED MODULE: ./src/font/TypographicGlyph.js
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-				this.parentUI = this.parent;
-				this.position.z = this.getOffset();
 
-			} else {
+/* eslint-enable no-unused-vars */
 
-				this.parentUI = null;
+/**
+ * @class
+ * @abstract
+ */
+class TypographicGlyph {
 
-			}
+	/**
+	 *
+	 * @param {TypographicFont} typographicFont
+	 */
+	constructor( typographicFont ) {
 
-		};
+		/** @protected */ this._char = "";
+		/** @protected */ this._width = 1;
+		/** @protected */ this._heigth = 1;
+		/** @protected */ this._xadvance = 1;
+		/** @protected */ this._xoffset = 0;
+		/** @protected */ this._yoffset = 0;
 
 		/**
-		 * When the user calls component.add, it registers for updates,
-		 * then call THREE.Object3D.add.
+		 *
+		 * @type {TypographicFont}
+		 * @protected
 		 */
+		this._font = typographicFont;
+
+	}
 
-	/* eslint-disable no-unused-vars */
 	/**
 	 *
-	 * @override
-	 * @param {...Object3D} object
-	 * @return {this}
+	 * @returns {TypographicFont}
 	 */
-	add( object) {
+	get font() {
 
-			for ( const id of Object.keys( arguments ) ) {
+		return this._font;
 
-				// An inline component relies on its parent for positioning
-				if ( arguments[ id ].isUI ) this.update( null, true );
-				// if ( arguments[ id ].isInline ) this.update( null, true );
+	}
 
-			}
+	/**
+	 *
+	 * @return {string}
+	 */
+	get char() {
 
-			super.add( ...arguments );
+		return this._char;
 
-			this._rebuildChildrenLists();
+	}
 
-			return this;
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get width() {
 
-		}
+		return this._width;
 
+	}
 
 	/**
-	 * When the user calls component.remove, it registers for updates,
-	 * then call THREE.Object3D.remove.
-	 * @override
-	 * @param {...Object3D} object
-	 * @return {this}
+	 *
+	 * @returns {number}
 	 */
-		remove(object) {
-
-			for ( const id of Object.keys( arguments ) ) {
+	get height() {
 
-				// An inline component relies on its parent for positioning
-				if ( arguments[ id ].isInline ) this.update( null, true );
+		return this._heigth;
 
-			}
+	}
 
-			super.remove( ...arguments );
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get xadvance() {
 
-			this._rebuildChildrenLists();
+		return this._xadvance;
 
-			return this;
+	}
 
-		}
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get xoffset() {
 
-	/* eslint-enable no-unused-vars */
+		return this._xoffset;
 
-		//
+	}
 
-		update( updateParsing, updateLayout, updateInner ) {
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get yoffset() {
 
-			UpdateManager.requestUpdate( this, updateParsing, updateLayout, updateInner );
+		return this._yoffset;
 
-		}
+	}
 
-		/**
-		 *
-		 * @param {Function} func
-		 */
-		set onAfterUpdate( func ) {
+	/**
+	 *
+	 * @param value
+	 */
+	set yoffset( value ) {
 
-			console.warn( '`onAfterUpdate` property has been deprecated, please rely on `addAfterUpdate` instead.' );
-			this.addAfterUpdate( func );
+		this._yoffset = value;
 
-		}
+	}
 
 	/**
 	 *
-	 * @param {Function} func
+	 * @abstract
+	 * @param {string} otherChar
+	 * @returns {TypographicGlyph}
 	 */
-		addAfterUpdate( func ) {
+	/* eslint-disable no-unused-vars */ clone( otherChar ) { /* eslint-enable no-unused-vars */
 
-			this._onAfterUpdates.push( func );
+		throw new Error("Abstract... Need to be implemented");
 
-		}
+	}
 
-		/**
-		 *
-		 * @param {Function} func
-		 */
-		removeAfterUpdate( func ) {
+	/**
+	 *
+	 * @abstract
+	 * @returns {InlineGlyph}
+	 */
+	asInlineGlyph() {
 
-			const index = this._onAfterUpdates.indexOf( func );
-			if( index !== -1 ) {
+		throw new Error("Abstract... Need to be implemented")
 
-				this._onAfterUpdates.splice( index, 1 );
+	}
 
-			}
+}
 
-		}
+;// CONCATENATED MODULE: ./src/core/elements/glyphs/Inline.js
+/**
+ * This is the abstract/base class / interface of any inline
+ * Inline can be positioned according to text rules
+ */
+class Inline {
 
-		performAfterUpdate() {
+	constructor() {
 
-			for ( let i = 0; i < this._onAfterUpdates.length; i++ ) {
+		/** @protected */ this._offsetX = 0;
+		/** @protected */ this._offsetY = 0;
 
-				this._onAfterUpdates[ i ]();
+		/** @protected */ this._lineBreak = null;
 
-			}
+		/** @protected */ this._kerning = 0;
 
-		}
+		/** @protected */ this._fontFactor = 1;
+		/** @protected */ this._fontSize = 0;
 
-		/**
-		 * Set this component's passed parameters.
-		 * If necessary, take special actions.
-		 * Update this component unless otherwise specified.
-		 */
-		set( options ) {
-
-			let parsingNeedsUpdate, layoutNeedsUpdate, innerNeedsUpdate;
-
-			// Register to the update manager, so that it knows when to update
-
-			UpdateManager.register( this );
-
-			// Abort if no option passed
-
-			if ( !options || JSON.stringify( options ) === JSON.stringify( {} ) ) return;
-
-			// Set this component parameters according to options, and trigger updates accordingly
-			// The benefit of having two types of updates, is to put everthing that takes time
-			// in one batch, and the rest in the other. This way, efficient animation is possible with
-			// attribute from the light batch.
-
-			for ( const prop of Object.keys( options ) ) {
-
-				if ( this[ prop ] != options[ prop ] ) {
-
-					const value = options[ prop ];
-
-					switch ( prop ) {
-
-						case 'content' :
-						case 'fontWeight' :
-						case 'fontStyle' :
-						case 'whiteSpace': // @TODO : Whitespace could also just be layouting
-							if ( this.isText ) parsingNeedsUpdate = true;
-							layoutNeedsUpdate = true;
-							this[ prop ] = value;
-							break;
-
-						// Only layout now - Not anymore parsing
-						case 'fontSize' :
-						case 'fontKerning' :
-						case 'breakOn':
-						case 'segments':
-							layoutNeedsUpdate = true;
-							this[ prop ] = value;
-							break;
-
-						case 'bestFit' :
-							if ( this.isBlock ) {
-								parsingNeedsUpdate = true;
-								layoutNeedsUpdate = true;
-							}
-							this[ prop ] = value;
-							break;
-
-						case 'width' :
-						case 'height' :
-						// case 'padding' :
-							// @TODO: I don't think this is true anymore
-							if ( this.isInlineBlock || ( this.isBlock ) ) parsingNeedsUpdate = true;
-							layoutNeedsUpdate = true;
-							this[ prop ] = value;
-							break;
-
-						case 'padding':
-							this._fourDimensionsValueSetter(this._padding, value );
-							layoutNeedsUpdate = true;
-							break;
-						case 'paddingTop':
-							this._padding.x = value;
-							layoutNeedsUpdate = true;
-							break;
-						case 'paddingRight':
-							this._padding.y = value;
-							layoutNeedsUpdate = true;
-							break;
-						case 'paddingBottom':
-							this._padding.z = value;
-							layoutNeedsUpdate = true;
-							break;
-						case 'paddingLeft':
-							this._padding.w = value;
-							layoutNeedsUpdate = true;
-							break;
-
-						case 'letterSpacing' :
-						case 'interLine' :
-							// @TODO: I don't think this is true anymore
-							if ( this.isBlock ) parsingNeedsUpdate = true;
-							layoutNeedsUpdate = true;
-							this[ prop ] = value;
-							break;
-
-						case 'margin' :
-							this._fourDimensionsValueSetter(this._margin, value );
-							layoutNeedsUpdate = true;
-							break;
-						case 'marginTop':
-							this._margin.x = value;
-							layoutNeedsUpdate = true;
-							break;
-						case 'marginRight':
-							this._margin.y = value;
-							layoutNeedsUpdate = true;
-							break;
-						case 'marginBottom':
-							this._margin.z = value;
-							layoutNeedsUpdate = true;
-							break;
-						case 'marginLeft':
-							this._margin.w = value;
-							layoutNeedsUpdate = true;
-							break;
-						// case 'margin':
-						case 'contentDirection' :
-						case 'justifyContent' :
-						case 'alignContent' :
-						case 'alignItems' :
-						case 'textAlign' :
-						case 'textType' :
-							layoutNeedsUpdate = true;
-							this[ prop ] = value;
-							break;
-
-						case 'fontColor' :
-						case 'fontOpacity' :
-						case 'fontSupersampling' :
-						case 'backgroundColor' :
-						case 'backgroundOpacity' :
-						case 'backgroundTexture' :
-						case 'backgroundSize' :
-						case 'borderColor' :
-						case 'borderOpacity' :
-							// innerNeedsUpdate = true;
-							this[ prop ] = value;
-							break;
-
-						case 'hiddenOverflow' :
-							this[ prop ] = value;
-							break;
-
-						case 'offset':
-							// if( !this.isBlock || this.parentUI ){
-
-								this[ prop ] = value;
-								this.position.z = value;
-
-							// }
-							break;
-
-						// abstracted properties, those properties don't need to be store as this[prop] = value
-						case 'borderRadius' :
-							this._fourDimensionsValueSetter( this._borderRadius, value);
-							break;
-						case 'borderTopLeftRadius':
-							this._borderRadius.x = value;
-							break;
-						case 'borderTopRightRadius':
-							this._borderRadius.y = value;
-							break;
-						case 'borderBottomRightRadius':
-							this._borderRadius.z = value;
-							break;
-						case 'borderBottomLeftRadius':
-							this._borderRadius.w = value;
-							break;
-						case 'borderTopRadius':
-							this._borderRadius.x = value;
-							this._borderRadius.y = value;
-							break;
-						case 'borderRightRadius':
-							this._borderRadius.y = value;
-							this._borderRadius.z = value;
-							break;
-						case 'borderLeftRadius':
-							this._borderRadius.x = value;
-							this._borderRadius.w = value;
-							break
-						case 'borderBottomRadius':
-							this._borderRadius.z = value;
-							this._borderRadius.w = value;
-							break;
-
-
-						case 'borderWidth' :
-							this._fourDimensionsValueSetter( this._borderWidth, value);
-							layoutNeedsUpdate = true;
-							break;
-						case 'borderTopWidth' :
-							this._borderWidth.x = value;
-							layoutNeedsUpdate = true;
-							break;
-						case 'borderRightWidth':
-							this._borderWidth.y = value;
-							layoutNeedsUpdate = true;
-							break;
-						case 'borderBottomWidth':
-							this._borderWidth.z = value;
-							layoutNeedsUpdate = true;
-							break;
-						case 'borderLeftWidth':
-							this._borderWidth.w = value;
-							layoutNeedsUpdate = true;
-							break;
-
-						default:
-							this[ prop ] = value;
-					}
-
-				}
-
-			}
-
-			// special cases, this.update() must be called only when some files finished loading
-
-			// Selection of fontFamily and font property
-			// 1. Preferred way, give a {FontFamily} property
-			if ( options.fontFamily instanceof FontFamily ) {
-
-				this.fontFamily = options.fontFamily;
-				this.font = options.fontFamily.getVariant( this.getFontWeight(), this.getFontStyle() );
-
-			}
-
-			// 1.1 Preferred way, a bit annoying to check options.fontTexture ( retro-compatibility )
-			else if( typeof options.fontFamily === 'string' && !options.fontTexture ) {
-
-				const fontFamily = font_FontLibrary.getFontFamily( options.fontFamily );
-
-				if( fontFamily ){
-
-					this.fontFamily = fontFamily;
-					this.font = fontFamily.getVariant( this.getFontWeight(), this.getFontStyle() );
-
-				}
-
-			}
-			// 2. < v7.x.x way
-			else if ( options.fontFamily && options.fontTexture ) {
-
-				// Set from old way, check if that family is already registered
-				const fontName = options.fontFamily.pages ? options.fontFamily.info.face : options.fontFamily;
-
-				let fontFamily = font_FontLibrary.getFontFamily( fontName );
-
-				if ( !fontFamily ) {
-
-					fontFamily = font_FontLibrary.addFontFamily( fontName )
-						.addVariant( FontWeight_NORMAL, FontStyle_NORMAL, options.fontFamily, options.fontTexture );
-
-				}
-
-				this.fontFamily = fontFamily;
-
-				// @TODO: Add more variant selection
-				this.font = fontFamily.getVariant( FontWeight_NORMAL, FontStyle_NORMAL );
-
-			}
-
-			// if font kerning changes for a child of a block with Best Fit enabled, we need to trigger parsing for the parent as well.
-			if ( this.parentUI && this.parentUI.getBestFit() != 'none' ) this.parentUI.update( true, true, false );
-
-			// Call component update
-
-			this.update( parsingNeedsUpdate, layoutNeedsUpdate, innerNeedsUpdate );
-
-
-			if ( layoutNeedsUpdate ) this.getHighestParent().update( false, true, false );
-
-
-			//
-			this._transferToMaterial( options );
-
-			//
-			// this._transferToMesh( options );
-
-
-
-		}
-
-		/////////////////////
-		// STATES MANAGEMENT
-		/////////////////////
-
-		/** Store a new state in this component, with linked attributes */
-		setupState( options ) {
-
-			this.states[ options.state ] = {
-				attributes: options.attributes,
-				onSet: options.onSet
-			};
-
-		}
-
-		/** Set the attributes of a stored state of this component */
-		setState( state ) {
-
-			const savedState = this.states[ state ];
-
-			if ( !savedState ) {
-				console.warn( `state "${state}" does not exist within this component` );
-				return;
-			}
-
-			if ( state === this.currentState ) return;
-
-			this.currentState = state;
-
-			if ( savedState.onSet ) savedState.onSet();
-
-			if ( savedState.attributes ) this.set( savedState.attributes );
-
-		}
-
-		/**
-		 * Get completely rid of this component and its children, also unregister it for updates
-		 * @override
-		 * @return {this}
-		 */
-		clear() {
-
-			this.traverse( ( obj ) => {
-
-				UpdateManager.disposeOf( obj );
-
-				if ( obj.material ) obj.material.dispose();
-
-				if ( obj.geometry ) obj.geometry.dispose();
-
-			} );
-
-			return this;
-		}
-
-		/***********************************************************************************************************************
-		 * TO MATERIAL HOLDER
-		 **********************************************************************************************************************/
-
-		get material() {
-			return this._material;
-		}
-
-		/**
-		 *
-		 * @param {Material|ShaderMaterial} material
-		 */
-		set material( material ) {
-
-			this._material = material;
-
-			// Update the fontMaterialProperties that need to be transferred to
-			this._materialMediation = {...material.constructor.mediation }
-
-			// transfer all the properties to material
-			this._transferToMaterial();
-
-			if( this._main ) {
-
-				this._main.material = this._material;
-
-			}
-
-		}
-
-		/**
-		 *
-		 * @param {Material|null} material
-		 */
-		set customDepthMaterial( material ) {
-
-			this._customDepthMaterial = material;
-
-			this._transferToMaterial();
-
-			if ( this._main ) {
-				// transfer to the main if isset
-				this._main.customDepthMaterial = this._customDepthMaterial;
-
-			}
-
-		}
-
-		get customDepthMaterial() { return this._customDepthMaterial; }
-
-		/**
-		 * According to the list of materialProperties
-		 * some properties are sent to material
-		 * @private
-		 */
-		_transferToMaterial( options = null ) {
-
-			Mediator.mediate(this, this._material, options, this._materialMediation, this.customDepthMaterial);
-
-		}
-
-		_transferToMesh( options = null ) {
-
-			Mediator.mediate( this, this._main, options, this._meshMediation );
-
-		}
-
-		/**
-		 *
-		 * @param {Vector4} vector4
-		 * @param {string|number|Array.<string|number>} value
-		 * @private
-		 */
-		_fourDimensionsValueSetter( vector4, value ) {
-
-			if( value instanceof external_THREE_namespaceObject.Vector4 ) {
-
-				vector4.copy( value );
-				return ;
-
-			}
-
-			if (typeof value === 'string' || value instanceof String) {
-
-				value = value.split(" ");
-
-			}
-
-			if( Array.isArray( value ) ) {
-
-				value = value.map( v => parseFloat(v) );
-
-				switch ( value.length ) {
+		/** @protected */ this._cumulativeWidth = 0;
 
-					case 1:
-						vector4.setScalar( value[0] );
-						return;
+		/** @protected */ this._paddingLeft = 0;
+		/** @protected */ this._paddingRight = 0;
 
-					case 2:
-						vector4.x = vector4.z = value[0];
-						vector4.y = vector4.w = value[1];
-						return;
+		/** @protected */ this._marginLeft = 0;
+		/** @protected */ this._marginRight = 0;
 
-					case 3:
-						vector4.x = value[0];
-						vector4.y = value[1];
-						vector4.z = value[2];
-						return;
+	}
 
-					case 4:
-						vector4.x = value[0];
-						vector4.y = value[1];
-						vector4.z = value[2];
-						vector4.w = value[3];
-						return;
+	/**
+	 * @returns {void}
+	 */
+	resetOffsets() {
 
-					default:
-						console.error("Four Dimension property has more than four values");
-						return;
+		this._offsetX = this._offsetY = 0;
+		this._cumulativeWidth = 0;
 
-				}
+	}
 
-			}
+	/**
+	 * The horizontal distance this inline fills
+	 * @returns {number}
+	 */
+	get xadvance() { return 0 }
 
-			if( !isNaN(value) ) {
+	/**
+	 * The offset x of this inline in a line
+	 * @returns {number}
+	 */
+	get xoffset() { return 0 }
 
-				vector4.setScalar( value );
+	/**
+	 * The offset y of this inline in a line
+	 * @returns {number}
+	 */
+	get yoffset() { return 0 }
 
-			}
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get width() { return 0 }
 
-		}
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get height() { return 0 }
 
 	/**
-	 * @param {FontVariant} value
+	 *
+	 * @param {string|null} value
 	 */
-	set font( value ) {
+	set lineBreak( value ) {
 
-		this._font = value;
+		this._lineBreak = value;
 
 	}
 
 	/**
 	 *
-	 * @returns {FontVariant}
+	 * @returns {string|null}
 	 */
-	get font() {
-
-		return this._font;
-
-	}
+	get lineBreak() { return this._lineBreak; }
 
-	/*********************************************************************************************************************
-	 * MESH MEDIATION
-	 ********************************************************************************************************************/
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get anchor() { return 0 }
 
 	/**
 	 *
-	 * @param {boolean} value
+	 * @returns {number}
 	 */
-	set visible( value ) {
+	get kerning() { return this._kerning * this._fontFactor; }
 
-		this._visible = value;
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set kerning( value ) {
 
-		// @TODO: Instead of direct execution of _rebuildChildrenList
-		//				It could be better to "dirtying" the children list and compute it only once on next frame
-		this.parentUI?._rebuildChildrenLists();
+		this._kerning = value;
 
 	}
 
 	/**
 	 *
-	 * @return {boolean}
+	 * @returns {number}
 	 */
-	get visible() { return this._visible; }
+	get fontSize() { return this._fontSize }
 
 	/**
 	 *
-	 * @param {boolean} value
+	 * @param {number} value
 	 */
-	set castShadow( value ) {
-
-		this._castShadow = value;
-
-		if ( this._main ) {
-
-			this._main.castShadow = this._castShadow;
+	set fontSize( value ) {
 
-		}
+		this._fontSize = value;
 
 	}
 
 	/**
 	 *
-	 * @return {boolean}
+	 * @returns {number}
 	 */
-	get castShadow() { return this._castShadow; }
+	get lineHeight() { return 0 }
 
 	/**
 	 *
-	 * @param {boolean} value
+	 * @returns {number}
 	 */
-	set receiveShadow( value ) {
-
-		this._receiveShadow = value;
-
-		if ( this._main ) {
+	get offsetX() { return this._offsetX; }
 
-			this._main.receiveShadow = this._receiveShadow;
+	/**
+	 *
+	 * @param value
+	 */
+	set offsetX( value ){
 
-		}
+		this._offsetX = value;
 
 	}
 
 	/**
 	 *
-	 * @return {boolean}
+	 * @returns {number}
 	 */
-	get receiveShadow() { return this._receiveShadow; }
+	get offsetY() { return this._offsetY; }
 
 	/**
 	 *
 	 * @param {number} value
 	 */
-	set renderOrder( value ) {
-
-		this._renderOrder = value;
-
-		if( this._main ) {
-
-			this._main.renderOrder = this._renderOrder;
+	set offsetY( value ){
 
-		}
+		this._offsetY = value;
 
 	}
 
@@ -5109,21 +4446,15 @@ class MeshUIComponent extends external_THREE_namespaceObject.Object3D {
 	 *
 	 * @return {number}
 	 */
-	get renderOrder( ) { return this._renderOrder; }
-
-	/*********************************************************************************************************************
-	 * MATERIAL MEDIATION
-	 ********************************************************************************************************************/
+	get cumulativeWidth() { return this._cumulativeWidth; }
 
 	/**
 	 *
 	 * @param {number} value
 	 */
-	set side( value ) {
-
-		this._side = value;
+	set cumulativeWidth( value ) {
 
-		if ( this._material ) this._material.side = value;
+		this._cumulativeWidth = value;
 
 	}
 
@@ -5131,2496 +4462,10274 @@ class MeshUIComponent extends external_THREE_namespaceObject.Object3D {
 	 *
 	 * @return {number}
 	 */
-	get side() { return this._side; }
+	get marginLeft() { return this._marginLeft; }
 
-}
-
-;// CONCATENATED MODULE: ./src/components/core/InlineManager.js
-/**
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set marginLeft( value ) {
 
-Job: Positioning inline elements according to their dimensions inside this component
+		this._marginLeft = value;
 
-Knows: This component dimensions, and its children dimensions
+	}
 
-This module is used for Block composition (Object.assign). A Block is responsible
-for the positioning of its inline elements. In order for it to know what is the
-size of these inline components, parseParams must be called on its children first.
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginRight() { return this._marginRight; }
 
-It's worth noting that a Text is not positioned as a whole, but letter per letter,
-in order to create a line break when necessary. It's Text that merge the various letters
-in its own updateLayout function.
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set marginRight( value ) {
 
- */
+		this._marginRight = value;
 
+	}
 
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingLeft() { return this._paddingLeft; }
 
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set paddingLeft( value ) {
 
+		this._paddingLeft = value;
 
+	}
 
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingRight() { return this._paddingRight; }
 
-class InlineManager extends MeshUIComponent{
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set paddingRight( value ) {
 
-		constructor(options) {
+		this._paddingRight = value;
 
-			super(options);
+	}
 
-		}
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get lineBase() { return 0 }
 
-		/** Compute children .inlines objects position, according to their pre-computed dimensions */
-		computeInlinesPosition() {
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set fontFactor( value ){
 
-			// computed by BoxComponent
-			const INNER_WIDTH = this.innerWidth;
-			// const INNER_WIDTH = this.getInnerWidth();
-			const INNER_HEIGHT = this.innerHeight;
-			// const INNER_HEIGHT = this.getInnerHeight();
+		this._fontFactor = value;
 
-			// got by MeshUIComponent
-			const JUSTIFICATION = this.getJustifyContent();
-			const ALIGNMENT = this.getTextAlign();
+	}
 
-			// Compute lines
-			const lines = this.computeLines();
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get fontFactor() { return this._fontFactor }
+}
 
-			/////////////////////////////////////////////////////////////////
-			// Position lines according to justifyContent and contentAlign
-			/////////////////////////////////////////////////////////////////
+;// CONCATENATED MODULE: ./src/font/InlineGlyph.js
 
-			// Vertical positioning
-			justifyInlines( this, lines, JUSTIFICATION, INNER_HEIGHT);
 
-			// Horizontal positioning
-			textAlign( this, lines, ALIGNMENT, INNER_WIDTH );
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
+/* eslint-enable no-unused-vars */
 
-			// Make lines accessible to provide helpful informations
-			this.lines = lines;
+class InlineGlyph extends Inline {
 
-		}
+	/**
+	 *
+	 * @param {TypographicGlyph} characterDesc
+	 */
+	constructor( characterDesc ) {
 
-		/**
-		 * computes lines based on children's inlines array.
-		 * @private
-		 */
-		computeLines() {
+		super();
 
-			// computed by BoxComponent
-			const INNER_WIDTH = this.innerWidth;
-			const INTERLINE = this.getInterLine();
+		/** @protected */ this._typographic = characterDesc;
 
-			// Will stock the characters of each line, so that we can
-			// correct lines position before to merge
-			const lines = new Lines( new Line() );
+	}
 
-			let lastInlineOffset = 0;
-			this.childrenInlines.forEach( ( inlineComponent ) => {
+	/**
+	 *
+	 * @returns {TypographicGlyph}
+	 */
+	get typographic(){
 
-					// Abort condition
+		return this._typographic;
 
-					if ( !inlineComponent.inlines ) return;
+	}
 
-					//////////////////////////////////////////////////////////////
-					// Compute offset of each children according to its dimensions
-					//////////////////////////////////////////////////////////////
+	/*********************************************************************************************************************
+	 * GETTERS FROM CHARACTER DESCRIPTION
+	 ********************************************************************************************************************/
 
-					const FONTSIZE = inlineComponent._fitFontSize || inlineComponent.getFontSize();
-					const LETTERSPACING = inlineComponent.isText ? inlineComponent.getLetterSpacing() * FONTSIZE : 0;
-					const WHITESPACE = inlineComponent.getWhiteSpace();
-					const BREAKON = inlineComponent.getBreakOn();
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get xadvance() { return this._typographic.xadvance * this._fontFactor; }
 
-					const whiteSpaceOptions = {
-						WHITESPACE,
-						LETTERSPACING,
-						BREAKON,
-						INNER_WIDTH
-					}
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get xoffset() { return this._typographic.xoffset * this._fontFactor; }
 
-					lastInlineOffset += inlineComponent._margin.w + inlineComponent._padding.w;
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get yoffset() { return this._typographic.yoffset * this._fontFactor; }
 
-					inlineComponent.inlines.forEach( ( inline, i, inlines ) => {
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get width() { return this._typographic.width * this._fontFactor ; }
 
-						const line = lines[lines.length - 1];
-						// Line break
-						const shouldBreak = Whitespace_shouldBreak(inlines,i,lastInlineOffset, whiteSpaceOptions );
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get height() { return this._typographic.height * this._fontFactor; }
 
-						if ( shouldBreak ) {
+	/**
+	 *
+	 * @return {string}
+	 */
+	get char() { return this._typographic.char; }
 
-							lines.push( new Line( inline ) );
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get anchor() {
 
-							inline.offsetX = inline.xoffset;
+		// const lineHeight = this._typographic.font.lineHeight;
+		// const lineBase = this._typographic.font.lineBase;
+		//
+		// return ( ( this._typographic.yoffset + this._typographic.height - lineBase ) * this._fontSize ) / lineHeight;
 
-							// restart the lastInlineOffset as zero.
-							if ( inline.width === 0 ) {
-								lastInlineOffset = 0;
-								return;
-							}
+		return this.yoffset;
 
-							// compute lastInlineOffset normally
-							// except for kerning which won't apply
-							// as there is visually no lefthanded glyph to kern with
-							inline.cumulativeWidth = inline.xadvance + LETTERSPACING;
-							lastInlineOffset = inline.cumulativeWidth;
-							return;
+	}
 
-						}
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get lineHeight() { return this._typographic.font.lineHeight * this._fontFactor; }
 
-						lines[ lines.length - 1 ].push( inline );
-						inline.offsetX = lastInlineOffset + inline.xoffset + inline.kerning;
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get lineBase() { return this._typographic.font.lineBase * this._fontFactor; }
 
-						inline.cumulativeWidth = inline.xadvance + inline.kerning + LETTERSPACING;
-						lastInlineOffset += inline.cumulativeWidth;
 
-						// in case of lineBreak mandatory
-						if( line.length-1 === 1) {
+}
 
-							if ( line[ line.length - 2 ].width === 0 ) {
+;// CONCATENATED MODULE: ./src/font/msdf/MSDFInlineGlyph.js
 
-								// remove the offset of the character following the newline
-								inline.offsetX -= inline.xoffset;
-								lastInlineOffset -= inline.xoffset;
 
-							}
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-						}
+/* eslint-enable no-unused-vars */
 
-					} );
+/**
+ * @extends InlineGlyph
+ */
+class MSDFInlineGlyph extends InlineGlyph{
 
-					lastInlineOffset += inlineComponent._margin.y + inlineComponent._padding.y;
+	/**
+	 *
+	 * @param {MSDFTypographicGlyph} characterDesc
+	 */
+	constructor( characterDesc ) {
 
-			} );
+		super( characterDesc );
 
-			// Compute single line and combined lines dimensions
-			const WHITESPACE = this.getWhiteSpace();
+	}
 
-			let width = 0;
-			let lineOffsetY = 0;
-			lines[0].y = 0;
+	/**
+	 *
+	 * @returns {{left:number, right:number, top:number, bottom:number}|null}
+	 */
+	get uv() { return this.typographic.uv; }
 
-			lines.forEach( ( line, i ) => {
+}
 
-				// starts by processing whitespace, it will return a collapsed left offset
-				const whiteSpaceOffset = collapseWhitespaceOnInlines( line, WHITESPACE );
+;// CONCATENATED MODULE: ./src/font/msdf/MSDFTypographicGlyph.js
 
-				//
-				let lineHeight = 0;
-				let lineBase = 0;
 
-				line.forEach( ( inline ) => {
 
-					lineHeight = Math.max( lineHeight, inline.lineHeight );
-					lineBase = Math.max( lineBase, inline.lineBase );
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-					inline.offsetX -= whiteSpaceOffset;
+/* eslint-enable no-unused-vars */
 
-				});
 
-				line.lineHeight = lineHeight;
-				line.lineBase = lineBase;
+/**
+ * @property {MSDFTypographicFont} _font
+ */
+class MSDFTypographicGlyph extends TypographicGlyph {
 
-				const baseLineDelta = lineHeight - lineBase;
+	/**
+	 * @param {MSDFTypographicFont} fontDescription
+	 * @param {import('./MSDFFontVariant').MSDFJsonChar} characterData
+	 */
+	constructor( fontDescription, characterData ) {
 
-				// process yoffset
-				line.forEach( ( inline ) => {
+		super( fontDescription );
 
-					inline.offsetY = lineOffsetY - line.lineHeight + baseLineDelta + lines[ 0 ].lineHeight;
+		this._char = characterData.char;
+		this._width = characterData.width;
+		this._heigth = characterData.height;
 
-				});
+		this._xadvance = characterData.xadvance ? characterData.xadvance : this._width;
+		this._xoffset = characterData.xoffset ? characterData.xoffset : 0;
+		this._yoffset = characterData.yoffset ? characterData.yoffset : 0;
 
-				if( i !== 0 ){
+		// Msdf requires uvs
+		this._uv = characterData.uv ? characterData.uv : null;
 
-					// get the previousLine y and increase
-					line.y =  lines[i-1].y - line.lineHeight - INTERLINE;
+		if ( !isNaN( characterData.x ) ) {
+			// transform absolute pixel values into uv values [0,1]
+			this._uv = {
+				left: characterData.x / fontDescription.textureWidth,
+				right: ( characterData.x + characterData.width ) / fontDescription.textureWidth,
+				top: 1 - ( ( characterData.y + characterData.height ) / fontDescription.textureHeight ),
+				bottom: 1 - ( characterData.y / fontDescription.textureHeight )
+			};
+		}
+	}
 
-				}
 
-				lineOffsetY = lineOffsetY - line.lineHeight - INTERLINE
+	/**
+	 *
+	 * @returns {{left: number, right: number, top: number, bottom: number}|null}
+	 */
+	get uv() {
 
-				//
+		return this._uv;
 
-				line.width = 0;
-				// if this line have inlines
-				if ( line[ 0 ] ) {
+	}
 
-					// compute its width: length from firstInline:LEFT to lastInline:RIGHT
-					// only by the length of its extremities
-					const lastInline = line[ line.length - 1 ];
+	/**
+	 * @override
+	 * @param {string} otherChar
+	 * @returns {MSDFTypographicGlyph}
+	 */
+	clone( otherChar ) {
 
-					// Right + Left ( left is negative )
-					line.width = ( lastInline.offsetX + lastInline.cumulativeWidth + lastInline.paddingRight + lastInline.marginRight ) + line[ 0 ].offsetX;
+		return new MSDFTypographicGlyph( this._font, {
+			char: otherChar,
+			width: this._width,
+			height: this._heigth,
+			xadvance: this._xadvance,
+			xoffset: this._xoffset,
+			yoffset: this._yoffset,
 
-					width = Math.max( width, line.width);
-				}
+			// Msdf requires uvs
+			uv: null
+		} );
 
-			} );
+	}
 
-			lines.height = Math.abs(lineOffsetY + INTERLINE );
-			lines.width = width;
 
-			return lines;
+	/**
+	 * @override
+	 * @returns {MSDFInlineGlyph}
+	 */
+	asInlineGlyph() {
 
-		}
+		return new MSDFInlineGlyph( this );
 
+	}
 
 }
 
-;// CONCATENATED MODULE: ./src/utils/block-layout/Padding.js
-/**
- * @TODO: This could be integrated in AlignItems
- * @param {BoxComponent} boxComponent
- * @param {string} DIRECTION
- * @param {string} ALIGNMENT
- */
-const padItems = function( boxComponent, DIRECTION, ALIGNMENT ){
-
-	let snap = 'center';
-	let snapXon = 'center';
-	let snapYon = 'center';
-
-	const padding = boxComponent._padding;
-	const border = boxComponent._borderWidth;
-
-	if( DIRECTION.indexOf('column') !== -1 ) {
-
-		if( ALIGNMENT === 'start' ) {
-			snap = snapXon = 'left';
-		}else if( ALIGNMENT === 'end' ){
-			snap = snapXon ='right';
-		}else {
-			snap = 'centerX';
-		}
-
-	} else {
-
-		/* eslint-disable no-lonely-if */
-		if( ALIGNMENT === 'start' ) {
-			snap = snapYon = 'top';
-		}else if( ALIGNMENT === 'end' ){
-			snap = snapYon ='bottom';
-		}else{
-			snap = 'centerY';
-		}
-		/* eslint-enable no-lonely-if */
+;// CONCATENATED MODULE: ./src/font/msdf/MSDFGeometricGlyph.js
 
-	}
 
-	// apply 4 directional padding and borders
-	let y = -(padding.x - padding.z) / 2 - (border.x - border.z) / 2;
-	let x = -(padding.y - padding.w) / 2 - ( border.y - border.w ) / 2;
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
 
-	if( snapXon === 'left' ) {
+/* eslint-enable no-unused-vars */
 
-		x = (padding.w - padding.y) / 2 + (border.w - border.y) / 2;
+class MSDFGeometricGlyph extends external_THREE_namespaceObject.PlaneGeometry {
 
-	} else if( snapXon === 'right' ) {
+	/**
+	 *
+	 * @param {MSDFInlineGlyph} inline
+	 * @param {MeshUIBaseElement} element
+	 */
+	constructor( inline, element ) {
 
-		x = - ( padding.y - padding.w ) / 2 - ( border.y - border.w ) / 2;
 
-	}
+		// default w & h segments
+		let wS = 1, hS=1;
 
-	if( snapYon === 'top' ) {
+		// If charOBJ, try to distribute segments proportionally
+		const typographicFontSize = inline.typographic.font.size;
 
-		y = - (padding.x - padding.z) / 2 - (border.x - border.z) / 2;
+		const segments = element._segments.value;
 
-	} else if( snapYon === 'bottom' ) {
+		wS = Math.ceil((inline.typographic.width / typographicFontSize) * segments );
+		hS = Math.ceil((inline.typographic.height / typographicFontSize) * segments );
 
-		y = (padding.z - padding.x) / 2 + (border.z - border.x) / 2;
+		super( inline.width, inline.height, wS, hS );
 
-	}
+		// If inline has UVs
+		if ( inline.uv ) {
 
+			this._mapUVs( inline );
 
-	boxComponent.childrenBoxes.forEach( ( child ) => {
+			this._transformGeometry( inline );
 
-		let marginX = 0;
-		let marginY = 0;
-		// let marginY = ( -child._margin.x + child._margin.z ) /2;
-		// let marginY = ( -child._margin.x + child._margin.z ) /2;
+			// White spaces (we don't want our plane geometry to have a visual width nor a height)
+		} else {
 
-		if( snap === 'top' ) {
+			this._nullifyUVs();
 
-			marginY = - child._margin.x;
+			this.scale( 0, 0, 1 );
 
-		} else if( snap === 'bottom' ) {
+			this.translate( 0, inline.fontSize / 2, 0 );
 
-			marginY = child._margin.z;
+		}
 
-		} else if( snap === 'left' ) {
+		this.name = "GlyphGeometry";
+		// Demo alter geometry
+		// const maxOffset = inline.fontSize / 10;
+		// this.translate(0 , -maxOffset + Math.random() * maxOffset*2, 0 )
+		// this.rotateZ(-0.1 + 0.2 * Math.random() )
 
-			marginX = child._margin.w;
+	}
 
-		} else if( snap === 'right' ) {
-
-			marginX = - child._margin.y;
+	/**
+	 * Compute the right UVs that will map the MSDF texture so that the passed character
+	 * will appear centered in full size
+	 * @param {MSDFInlineGlyph} inline
+	 * @private
+	 */
+	_mapUVs( inline ) {
 
-		} else if( snap === 'centerX' ) {
 
-			marginX = ( child._margin.w - child._margin.y ) /2;
+		const width = inline.uv.right - inline.uv.left;
+		const height = inline.uv.bottom - inline.uv.top;
 
-		} else if( snap === 'centerY' ) {
+		const originalUvArray = this.getAttribute('uv').array.slice()
 
-			marginY = ( - child._margin.x + child._margin.z ) /2;
+		const uvGlyph = [];
+		for (let i = 0; i < originalUvArray.length; i += 2) {
+			const u = originalUvArray[i];
+			const v = originalUvArray[i + 1];
 
+			uvGlyph.push(inline.uv.left + width * u);
+			uvGlyph.push(inline.uv.top + height * v);
 		}
+		this.setAttribute('uvG', new external_THREE_namespaceObject.BufferAttribute(new Float32Array(uvGlyph), 2));
 
-		boxComponent.childrenPos[ child.id ]['x'] += x + marginX;
-		boxComponent.childrenPos[ child.id ]['y'] += y + marginY;
+	}
 
+	/**
+	 * Set all UVs to 0, so that none of the glyphs on the texture will appear
+	 * @private
+	 * */
+	_nullifyUVs() {
 
+		// const uvAttribute = this.attributes.uv;
+		//
+		// for ( let i = 0; i < uvAttribute.count; i++ ) {
+		//
+		// 	uvAttribute.setXY( i, 0, 0 );
+		//
+		// }
 
-	} );
+		const uvGlyph = [];
+		const length = this.getAttribute('uv').array.length;
+		for ( let i = 0; i < length; i++ ) {
+			uvGlyph.push(0);
+		}
+		this.setAttribute('uvG', new external_THREE_namespaceObject.BufferAttribute(new Float32Array(uvGlyph), 2));
 
+	}
 
-}
+	/**
+	 *
+	 * @TODO: Apply pivot properties when splitText isset
+	 * Gives the previously computed scale and offset to the geometry
+	 * @param {MSDFInlineGlyph} inline
+	 * @private
+	 */
+	_transformGeometry( inline ) {
 
-;// CONCATENATED MODULE: ./src/components/core/BoxComponent.js
-/**
+		//
 
-Job: Handle everything related to a BoxComponent element dimensioning and positioning
+		// @TODO : Evaluate this as being a property. It can wait until splitGeometry
+		this.translate(
+			inline.width / 2,
+			-inline.height/2,
+			0
+		);
 
-Knows: Parents and children dimensions and positions
+	}
 
-It's worth noting that in three-mesh-ui, it's the parent Block that computes
-its children position. A Block can only have either only box components (Block)
-as children, or only inline components (Text, InlineBlock).
+}
 
+;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl.js
+/**
+ *
+ * @type {string}
  */
+const program = /* glsl */`
+attribute vec2 uvG;
+varying vec2 vUvG;
+`;
 
+/* harmony default export */ const msdf_alphaglyph_pars_vertex_glsl = (program);
 
+;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const msdf_alphaglyph_vertex_glsl_program = /* glsl */ `
+vUvG = uvG;
+`;
 
+/* harmony default export */ const msdf_alphaglyph_vertex_glsl = (msdf_alphaglyph_vertex_glsl_program);
 
+;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const msdf_offsetglyph_vertex_glsl_program = /* glsl */`
+gl_Position.z -= 0.00001;
+`;
 
+/* harmony default export */ const msdf_offsetglyph_vertex_glsl = (msdf_offsetglyph_vertex_glsl_program);
 
+;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const msdf_alphaglyph_pars_fragment_glsl_program = /* glsl */`
+varying vec2 vUvG;
+uniform sampler2D glyphMap;
+uniform vec2 unitRange;
+// functions from the original msdf repo:
+// https://github.com/Chlumsky/msdfgen#using-a-multi-channel-distance-field
+float median(float r, float g, float b) {
+	return max(min(r, g), min(max(r, g), b));
+}
+float screenPxRange() {
 
-class BoxComponent extends InlineManager {
-
+	// precomputed unitRange as recommended by Chlumsky
+	// vec2 unitRange = vec2(pxRange)/vec2(textureSize(glyphMap, 0));
+	vec2 screenTexSize = vec2(1.0)/fwidth(vUvG);
+	return max(0.5*dot(unitRange, screenTexSize), 1.0);
+}
+float tap(vec2 offsetUV) {
+	vec3 msd = texture( glyphMap, offsetUV ).rgb;
+	float sd = median(msd.r, msd.g, msd.b);
+	float screenPxDistance = screenPxRange() * (sd - 0.5);
+	float alpha = clamp(screenPxDistance + 0.5, 0.0, 1.0);
+	return alpha;
+}
+`;
 
-		constructor( options ) {
+/* harmony default export */ const msdf_alphaglyph_pars_fragment_glsl = (msdf_alphaglyph_pars_fragment_glsl_program);
 
-			super( options );
+;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const msdf_alphaglyph_fragment_glsl_program = /* glsl */`
+	float alpha;
+#ifdef NO_RGSS
 
-			this.isBoxComponent = true;
-			this.childrenPos = {};
+	alpha = tap( vUvG );
 
-			// Box properties only update once per update layout
-			this.offsetWidth = 0;
-			this.offsetHeight = 0;
-			this.innerWidth = 0;
-			this.innerHeight = 0;
+#else
 
-			this.centerX = 0;
-			this.centerY = 0;
+	// shader-based supersampling based on https://bgolus.medium.com/sharper-mipmapping-using-shader-based-supersampling-ed7aadb47bec
+	// per pixel partial derivatives
+	vec2 dx = dFdx(vUvG);
+	vec2 dy = dFdy(vUvG);
+	// rotated grid uv offsets
+	vec2 uvOffsets = vec2(0.125, 0.375);
+	vec2 offsetUV = vec2(0.0, 0.0);
+	// supersampled using 2x2 rotated grid
+	alpha = 0.0;
+	offsetUV.xy = vUvG + uvOffsets.x * dx + uvOffsets.y * dy;
+	alpha += tap(offsetUV);
+	offsetUV.xy = vUvG - uvOffsets.x * dx - uvOffsets.y * dy;
+	alpha += tap(offsetUV);
+	offsetUV.xy = vUvG + uvOffsets.y * dx - uvOffsets.x * dy;
+	alpha += tap(offsetUV);
+	offsetUV.xy = vUvG - uvOffsets.y * dx + uvOffsets.x * dy;
+	alpha += tap(offsetUV);
+	alpha *= 0.25;
 
-		}
+#endif
 
-	/**
-	 *
-	 */
-	computeBoxProperties() {
+	alpha = clamp( alpha, 0.0, 1.0 );
 
-			this.offsetWidth = this.getOffsetWidth();
-			this.offsetHeight = this.getOffsetHeight();
+#ifdef INVERT_ALPHA
 
-			this.innerWidth = this.getInnerWidth();
-			this.innerHeight = this.getInnerHeight();
+	alpha = 1.0 - alpha;
 
-			this.centerX = this.getCenterX();
-			this.centerY = this.getCenterY();
+#endif
 
-		}
+	diffuseColor.a *= alpha;
+`;
 
+/* harmony default export */ const msdf_alphaglyph_fragment_glsl = (msdf_alphaglyph_fragment_glsl_program);
 
-	/**
-	 * Return the sum of all this component's children sides + their margin
-	 * @param {string} side
-	 * @return {number}
-	 */
-		getChildrenSideSum( side ) {
+;// CONCATENATED MODULE: ./src/utils/mediator/transformers/MaterialTransformers.js
 
-			return this.childrenBoxes.reduce( ( accu, child ) => {
+/**
+ * Transfer the alphaTest value from MeshUIComponent to material
+ * @type {import('../Mediator').MediationTransformer}
+ */
+const alphaTestTransformer = function ( target, targetProperty, value) {
 
-				const CHILD_SIZE = ( side === 'width' ) ?
-					( child.getOffsetWidth() + child._margin.y + child._margin.w  ) :
-					( child.getOffsetHeight() + child._margin.x + child._margin.z );
+	// set the value in the material
+	target.alphaTest = value;
 
-				return accu + CHILD_SIZE;
+	toPreprocessorTriggerTransformer(target, 'USE_ALPHATEST', value > 0 );
 
-			}, 0 );
+}
 
-		}
+/**
+ * Transform a value as a preprocessor trigger
+ * @type {import('../Mediator').MediationTransformer}
+ */
+const toPreprocessorTriggerTransformer = function ( target, targetProperty, value) {
 
-		/**
-		 * Look in parent record what is the instructed position for this component, then set its position
-		 **/
-		setPosFromParentRecords() {
+	if( !target.defines ) return;
 
-			if ( this.parentUI && this.parentUI.childrenPos[ this.id ] ) {
+	if ( value ) {
 
-				this.position.x = this.parentUI.childrenPos[ this.id ].x;
-				this.position.y = this.parentUI.childrenPos[ this.id ].y;
+		if( target.defines[targetProperty] === undefined ) {
 
-			}
+			target.defines[targetProperty] = '';
+			target.needsUpdate = true;
 
 		}
 
-		/**
-		 * Position inner elements according to dimensions and layout parameters.
-		 * */
-		computeChildrenPosition() {
+	} else if( target.defines[targetProperty] !== undefined ) {
 
-			if ( this.childrenUIs.length > 0 ) {
+		delete target.defines[targetProperty];
+		target.needsUpdate = true;
 
-				const DIRECTION = this.getContentDirection();
-				const ALIGNMENT = this.getAlignItems();
+	}
 
-				let directionalOffset;
+}
 
+/**
+ * Transform a value as a preprocessor value
+ * @type {import('../Mediator').MediationTransformer}
+ */
+const asPreprocessorValueTransformer = function ( target, targetProperty, value) {
 
-				switch ( DIRECTION ) {
+	// abort if nothing to update, same value
+	if( target.defines[targetProperty] && target.defines[targetProperty] === value ) return;
 
-					case ROW :
-						directionalOffset = -this.innerWidth / 2;
-						break;
+	// or change the preprocessor and update
+	target.defines[targetProperty] = value;
+	target.needsUpdate = true;
 
-					case ROW_REVERSE :
-						directionalOffset = this.innerWidth / 2;
-						break;
+}
 
-					case COLUMN :
-						directionalOffset = this.innerHeight / 2;
-						break;
+/**
+ * Transform a value as a uniform or userData value
+ * Non primitive values are bounds
+ * @type {import('../Mediator').MediationTransformer}
+ */
+const uniformOrUserDataTransformer = function( material, property, value ) {
 
-					case COLUMN_REVERSE :
-						directionalOffset = -this.innerHeight / 2;
-						break;
+	if( material.userData[property] ) {
 
-				}
+		material.userData[property].value = value;
 
+	}else{
 
-				const REVERSE = -Math.sign( directionalOffset );
+		material.uniforms[property].value = value;
 
-				contentDirection( this, DIRECTION, directionalOffset, REVERSE );
-				justifyContent( this, DIRECTION, directionalOffset, REVERSE );
-				alignItems( this, DIRECTION );
-				padItems( this, DIRECTION, ALIGNMENT );
+	}
 
-			}
+}
 
-		}
+const toUserDataTransformer = function( material, property, value ) {
 
+	material.userData[property].value = value;
 
-	/**
-	 * Returns the highest linear dimension among all the children of the passed component
-	 * MARGIN INCLUDED
-	 * @param {string} direction
-	 * @return {number}
-	 */
-		getHighestChildSizeOn( direction ) {
+}
 
-			return this.childrenBoxes.reduce( ( accu, child ) => {
+;// CONCATENATED MODULE: ./src/font/msdf/utils/MSDFFontMaterialUtils.js
 
-				const maxSize = direction === 'width' ?
-					child.getOffsetWidth() + child._margin.y + child._margin.w :
-					child.getOffsetHeight() + child._margin.x + child._margin.z;
 
-				return Math.max( accu, maxSize );
 
-			}, 0 );
 
-		}
 
-	/**
-	 * Obtain the outer width according to box-sizing
-	 * @return {number}
-	 */
-		getOffsetWidth() {
 
-			const base = this.getStretchedWidth() || this.width || this.getAutoWidth();
-			if ( this.getBoxSizing() === 'border-box' ) {
 
-				return base;
+/* eslint-disable no-unused-vars */
 
-			}
 
-			return base + this._padding.y + this._padding.w + this._borderWidth.y + this._borderWidth.w;
+/* eslint-enable no-unused-vars */
 
-		}
+/**
+ * MSDFFontMaterialUtils provides utilities
+ * for customizing other threejs or custom materials
+ * into a three-mesh-ui MSDFFontMaterial
+ */
+class MSDFFontMaterialUtils {
 
 	/**
-	 * Obtain the outer height according to box-sizing
-	 * @return {number}
+	 * Alter a material options with required fontMaterial options and or default values
+	 * @param {Object.<string,any>} materialOptions
 	 */
-	getOffsetHeight() {
-
-		const base = this.getStretchedHeight() || this.height || this.getAutoHeight();
-
-		if ( this.getBoxSizing() === 'border-box' ) {
-
-			return base;
-
-		}
-
-		return base + this._padding.x + this._padding.z + this._borderWidth.x + this._borderWidth.z;
-
+	static ensureMaterialOptions( materialOptions ) {
+		materialOptions.transparent = true;
+		materialOptions.alphaTest = materialOptions.alphaTest || 0.02;
 	}
 
 	/**
-	 * Obtain the inner width according to box-sizing
-	 * @return {number}
+	 * As three-mesh-ui FontMaterial relies on webgl preprocessors,
+	 * lets force the material to have a proper defines object
+	 * @param {Material|ShaderMaterial} threeMaterial
 	 */
-	getInnerWidth() {
-
-		const base = this.width || this.getAutoWidth();
-
-		if ( this.getBoxSizing() === 'border-box' ) {
-
-			return base - ( this._padding.y + this._padding.w + this._borderWidth.y + this._borderWidth.w );
-
+	static ensureDefines( threeMaterial ) {
+		if ( !threeMaterial.defines ) {
+			threeMaterial.defines = {};
 		}
-
-		return base;
-
 	}
 
 	/**
-	 * Obtain the inner height according to box-sizing
-	 * @return {number}
+	 *
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 * @param {Object.<string,any>} materialOptions
 	 */
-	getInnerHeight() {
-
-		const base = this.height || this.getAutoHeight();
-
-		if ( this.getBoxSizing() === 'border-box' ) {
-
-			return base - (this._padding.x + this._padding.z + this._borderWidth.x + this._borderWidth.z );
-
-		}
-
-		return base;
-
-	}
-
-
-		getBoxSizing() { return this.boxSizing || 'border-box'; }
+	static ensureUserData( threeMaterial, materialOptions ) {
+		threeMaterial.userData.glyphMap = { value: materialOptions.glyphMap };
+		threeMaterial.userData.unitRange = { value: new external_THREE_namespaceObject.Vector2() };
+	}
 
 	/**
-	 * Retrieve the center X according to box sized dimensions
-	 * @return {number}
+	 *
+	 * @param {any} shader
+	 * @param {Material|ShaderMaterial} threeMaterial
 	 */
-	getCenterX() {
-		const leftSide = this._padding.w + this._borderWidth.w;
-		const rightSide = this._padding.y + this._borderWidth.y;
+	static bindUniformsWithUserData( shader, threeMaterial ) {
 
-		return (leftSide - rightSide ) / 2;
+		shader.uniforms.glyphMap = threeMaterial.userData.glyphMap;
+		shader.uniforms.unitRange = threeMaterial.userData.unitRange;
 	}
 
 	/**
-	 * Retrieve the center Y according to box sized dimensions
-	 * @return {number}
+	 *
+	 * @param shader
 	 */
-	getCenterY() {
-		const topSide = this._padding.x + this._borderWidth.x;
-		const bottomSide = this._padding.z + this._borderWidth.z;
-
-		return ( bottomSide - topSide ) / 2;
+	static injectShaderChunks( shader ) {
+		MSDFFontMaterialUtils.injectVertexShaderChunks( shader );
+		MSDFFontMaterialUtils.injectFragmentShaderChunks( shader );
 	}
 
-
 	/**
-	 * Retrieve the automatic height from children boxes
-	 * @return {number}
+	 *
+	 * @param shader
 	 */
-	getAutoHeight() {
-
-		const DIRECTION = this.getContentDirection();
-
-		switch ( DIRECTION ) {
+	static injectVertexShaderChunks( shader ) {
+		shader.vertexShader = shader.vertexShader.replace(
+			'#include <uv_pars_vertex>',
+			'#include <uv_pars_vertex>\n' + msdf_alphaglyph_pars_vertex_glsl
+		);
 
-			case 'row' :
-			case 'row-reverse' :
-				return this.getHighestChildSizeOn( 'height' );
+		// vertex chunks
+		shader.vertexShader = shader.vertexShader.replace(
+			'#include <uv_vertex>',
+			'#include <uv_vertex>\n' + msdf_alphaglyph_vertex_glsl
+		)
 
+		shader.vertexShader = shader.vertexShader.replace(
+			'#include <project_vertex>',
+			'#include <project_vertex>\n' + msdf_offsetglyph_vertex_glsl
+		)
+	}
 
-			case 'column' :
-			case 'column-reverse' :
-				return this.getChildrenSideSum( 'height' );
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectFragmentShaderChunks( shader ) {
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <uv_pars_fragment>',
+			'#include <uv_pars_fragment>\n' + msdf_alphaglyph_pars_fragment_glsl
+		)
 
-			default :
-				console.error( `Invalid contentDirection : ${DIRECTION}` );
-				break;
+		// fragment chunks
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <alphamap_fragment>',
+			'#include <alphamap_fragment>\n' + msdf_alphaglyph_fragment_glsl
+		)
+	}
 
-		}
 
-	}
 
 	/**
-	 *
-	 * @return {number}
+	 * Mix a threejs Material into a three-mesh-ui FontMaterial
+	 * @param {typeof Material|ShaderMaterial} materialClass
+	 * @returns {typeof Material|ShaderMaterial}
 	 */
-	getAutoWidth() {
-
-		const DIRECTION = this.getContentDirection();
+	static from( materialClass ) {
 
-		switch ( DIRECTION ) {
+		return class extends materialClass {
 
-			case 'row' :
-			case 'row-reverse' :
-				return this.getChildrenSideSum( 'width' );
+			/**
+			 *
+			 * @abstract
+			 * @returns {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+			 */
+			static get fontMaterialProperties() {
+				return MSDFFontMaterialUtils.mediation;
+			}
 
+			constructor( options = {} ) {
 
-			case 'column' :
-			case 'column-reverse' :
-				return this.getHighestChildSizeOn( 'width' );
+				// same as FontMaterial extension
+				MSDFFontMaterialUtils.ensureMaterialOptions( options );
+				super( options );
+				MSDFFontMaterialUtils.ensureDefines( this );
+				MSDFFontMaterialUtils.ensureUserData( this, options );
 
-			default :
-				console.error( `Invalid contentDirection : ${DIRECTION}` );
-				break;
+				// defines two internal properties in order to kept
+				// user allowed to use onBeforeCompile for its own stuff
+				// 1- store an callback for user
+				/* eslint-disable no-unused-vars */
+				this._userDefinedOnBeforeCompile = (shader) => {};
+				/* eslint-enable no-unused-vars */
+				// 2- store the cumulative callback
+				this._onBeforeCompile = this._cumulativeOnBeforeCompile;
+			}
 
-		}
+			////////////////////////////
+			// OnBeforeCompile Override
+			///////////////////////////
 
-	}
+			/**
+			 * Override the setter of onBeforeCompile in order to never overwrite
+			 * the three-mesh-ui fontMaterial onBeforeCompile
+			 * @param { (shader:any) => void }fct
+			 */
+			set onBeforeCompile( fct ) {
+				// only store it as userDefinedCallback
+				this._userDefinedOnBeforeCompile = fct;
+			}
 
-	/**
-	 *
-	 * @return {number}
-	 */
-	getStretchedHeight(){
+			/**
+			 * Override the getter of onBeforeCompile in order to
+			 * always deliver the cumulativeCallbacks to threejs
+			 * @returns { (shader:any) => void }
+			 */
+			get onBeforeCompile() {
+				return this._onBeforeCompile;
+			}
 
-		if( this.parentUI && this.parentUI.getAlignItems() === 'stretch' && this.parentUI.getContentDirection().indexOf('row') !== -1 ) {
+			/**
+			 *
+			 * On before compile that first run three-mesh-ui fontMaterial
+			 * then user defined onBeforeCompile
+			 * @param shader
+			 * @private
+			 */
+			_cumulativeOnBeforeCompile = ( shader ) => {
+				// bind uniforms
+				MSDFFontMaterialUtils.bindUniformsWithUserData( shader, this );
 
-			return this.parentUI.getInnerHeight();
+				// inject both vertex and fragment shaders
+				MSDFFontMaterialUtils.injectShaderChunks( shader );
 
+				// user defined additional onBeforeCompile
+				this._userDefinedOnBeforeCompile( shader );
+			}
 		}
-
-		return 0;
 	}
 
 	/**
 	 *
-	 * @return {number}
+	 * @returns {Object<{m: string, t?: (function((Material|ShaderMaterial), string, *): void)}>}
 	 */
-	getStretchedWidth(){
-
-		if( this.parentUI && this.parentUI.getAlignItems() === 'stretch' && this.parentUI.getContentDirection().indexOf('column') !== -1 ) {
-
-			return this.parentUI.getInnerWidth();
+	static get mediation() {
 
-		}
+		return mediationDefinitions;
 
-		return 0;
 	}
 
 }
 
-
-;// CONCATENATED MODULE: ./src/frame/Frame.js
-
-
-
 /**
- * Returns a basic plane mesh.
+ * Convert a fontVariant to a material glyphMap texture
+ * @type {(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void }
+ * @private
  */
-class Frame extends external_THREE_namespaceObject.Mesh {
+const _fontToGlyphMapTransformer = function( fontMaterial, materialProperty, value) {
 
-	constructor( material ) {
+	const texture = value ? value.texture : null;
+	const unitRange = value ? value.unitRange : new external_THREE_namespaceObject.Vector2();
 
-		const geometry = new external_THREE_namespaceObject.PlaneBufferGeometry();
+	if( fontMaterial[materialProperty] !== undefined ) {
 
-		// Add uv for borders computations by copying uv
-		geometry.setAttribute('uvB', new external_THREE_namespaceObject.BufferAttribute(
-			new Float32Array(
-				geometry.getAttribute('uv').array
-			), 2)).name = 'uvB';
+		fontMaterial.glyphMap = texture;
+		fontMaterial.unitRange = unitRange;
+		return;
+	}
 
-		super( geometry, material );
+	if( fontMaterial.userData && fontMaterial.userData.glyphMap ) {
 
-		this.name = 'MeshUI-Frame';
+		fontMaterial.userData.glyphMap.value = texture;
+		fontMaterial.userData.unitRange.value = unitRange;
 
 	}
 
 }
 
-;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-border.pars.vertex.glsl.js
-/* harmony default export */ const frame_border_pars_vertex_glsl = (/* glsl */`
-
-// FrameBorder vertex pars
-attribute vec2 uvB;
-varying vec2 vUvB;
-
-`);
-
-;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-border.vertex.glsl.js
-/* harmony default export */ const frame_border_vertex_glsl = (/* glsl */`
-
-	// FrameBorder vertex shader
-	vUvB = uvB;
+/**
+ *
+ * @type {(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void }
+ * @private
+ */
+const _RGSSTransformer = function( fontMaterial, materialProperty, value){
 
-`);
+	if ( value && value !== 'antialiased' ) {
 
-;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-border.pars.fragment.glsl.js
-/* harmony default export */ const frame_border_pars_fragment_glsl = (/* glsl */`
+		fontMaterial.defines['NO_RGSS'] = '';
 
-// borders sequences are : x:TOP, y:RIGHT, z:BOTTOM, w:LEFT
-uniform vec4 borderWidth;
-uniform vec3 borderColor;
-uniform float borderOpacity;
-uniform vec4 borderRadius;
+	} else {
 
-varying vec2 vUvB;
+		delete fontMaterial.defines['NO_RGSS'];
 
-// Borders
-float getEdgeDist() {
+	}
 
-	// This allows to go the uv position in a [-1, 1] referencial system
-	vec2 ndc = vec2( vUvB.x * 2.0 - 1.0, vUvB.y * 2.0 - 1.0 );
+	fontMaterial.needsUpdate = true;
 
-	//
-	vec2 planeSpaceCoord = vec2( frameSize.x * 0.5 * ndc.x, frameSize.y * 0.5 * ndc.y );
-	vec2 corner = frameSize * 0.5;
-	vec2 offsetCorner = corner - abs( planeSpaceCoord );
+}
 
-	float innerRadDist = min( offsetCorner.x, offsetCorner.y ) * -1.0;
 
-	if (vUvB.x < 0.5 && vUvB.y >= 0.5) {
-		float roundedDist = length( max( abs( planeSpaceCoord ) - frameSize * 0.5 + borderRadius.x, 0.0 ) ) - borderRadius.x;
-		float s = step( innerRadDist * -1.0, borderRadius.x );
-		return mix( innerRadDist, roundedDist, s );
-	}
-	if (vUvB.x >= 0.5 && vUvB.y >= 0.5) {
-		float roundedDist = length( max( abs( planeSpaceCoord ) - frameSize * 0.5 + borderRadius.y, 0.0 ) ) - borderRadius.y;
-		float s = step( innerRadDist * -1.0, borderRadius.y );
-		return mix( innerRadDist, roundedDist, s );
-	}
-	if (vUvB.x >= 0.5 && vUvB.y < 0.5) {
-		float roundedDist = length( max( abs( planeSpaceCoord ) - frameSize * 0.5 + borderRadius.z, 0.0 ) ) - borderRadius.z;
-		float s = step( innerRadDist * -1.0, borderRadius.z );
-		return mix( innerRadDist, roundedDist, s );
-	}
-	if (vUvB.x < 0.5 && vUvB.y < 0.5) {
-		float roundedDist = length( max( abs( planeSpaceCoord ) - frameSize * 0.5 + borderRadius.w, 0.0 ) ) - borderRadius.w;
-		float s = step( innerRadDist * -1.0, borderRadius.w );
-		return mix( innerRadDist, roundedDist, s );
-	}
+/**
+ *
+ * @type {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+ */
+const mediationDefinitions = {
+	clippingPlanes: { m: 'clippingPlanes' },
+	fontAlphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+	fontSide: { m: 'side' },
+	font: { m: "glyphMap", t: _fontToGlyphMapTransformer },
+	color: { m: 'color' },
+	fontOpacity: { m: 'opacity' },
+	fontSmooth: { m: 'NO_RGSS', t: _RGSSTransformer },
+	invertAlpha: { m: 'INVERT_ALPHA', t: toPreprocessorTriggerTransformer },
 }
 
-`);
+;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderLib/msdf-fontmaterial.glsl.js
 
-;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-border.fragment.glsl.js
-/* harmony default export */ const frame_border_fragment_glsl = (/* glsl */`
 
-float edgeDist = getEdgeDist();
-float change = fwidth( edgeDist );
 
-float alpha = smoothstep( change, 0.0, edgeDist );
-diffuseColor.a *= alpha;
 
-// if the length square is not zerp
-if( borderWidth.x * borderWidth.x + borderWidth.y * borderWidth.y + borderWidth.z * borderWidth.z + borderWidth.w * borderWidth.w  > 0.0 )
-{
 
-	vec4 borderColor = vec4( borderColor, borderOpacity * alpha );
-	float stp = smoothstep( edgeDist + change, edgeDist, borderWidth.x * -1.0 );
 
-	// @TODO: Implement border width sequence : top,right,bottom,left
-	// if( vUvB.x <= borderWidth.w || vUvB.x >= 1.0 - borderWidth.y || vUvB.y >= 1.0 - borderWidth.x || vUvB.y <= borderWidth.z )
-	// {
+/**
+ *
+ * @type {string}
+ */
+const vertexShader = /* glsl */`
+${msdf_alphaglyph_pars_vertex_glsl}
+#include <clipping_planes_pars_vertex>
+void main() {
+	${msdf_alphaglyph_vertex_glsl}
+	#include <begin_vertex>
+	#include <project_vertex>
+	${msdf_offsetglyph_vertex_glsl}
+	#include <clipping_planes_vertex>
+}
+`
 
-	//	// would be nicer with smoothstep
-	//	diffuseColor.rgb = borderColor.rgb;
+/**
+ *
+ * @type {string}
+ */
+const fragmentShader = /* glsl */`
+uniform vec3 diffuse;
+uniform float opacity;
+${msdf_alphaglyph_pars_fragment_glsl}
+#include <alphatest_pars_fragment>
+#include <clipping_planes_pars_fragment>
+void main() {
+	// instead of <color_fragment> : vec4 diffuseColor
+	vec4 diffuseColor = vec4( diffuse, opacity );
+	${msdf_alphaglyph_fragment_glsl}
+	#include <alphatest_fragment>
+	// instead of <output_fragment>
+	gl_FragColor = diffuseColor;
+	#include <clipping_planes_fragment>
+}
+`
 
-	//}
+;// CONCATENATED MODULE: ./src/font/msdf/materials/MSDFFontMaterial.js
 
-	diffuseColor = mix( diffuseColor, borderColor, stp );
 
-}
-`);
 
-;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-common.pars.fragment.glsl.js
-/* harmony default export */ const frame_common_pars_fragment_glsl = (/* glsl */`
 
-// To be removed - required for both border and background
-uniform vec2 frameSize;
-uniform vec2 textureSize;
+// JSDoc related import
+/* eslint-disable no-unused-vars */
 
-`);
+/* eslint-enable no-unused-vars */
 
-;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-background.pars.fragment.glsl.js
-/* harmony default export */ const frame_background_pars_fragment_glsl = (/* glsl */`
+const ALPHA_TEST = 0.02;
 
-#ifdef USE_MAP
 
-vec4 sampleTexture() {
+/**
+ * This material implements the msdf rendering shader
+ */
+class MSDFFontMaterial extends external_THREE_namespaceObject.ShaderMaterial {
 
-	vec2 uv = vUv;
+	/**
+	 * This static method is mandatory for extending ThreeMeshUI.MSDFFontMaterial
+	 * It will provide a transfer description for properties from ThreeMeshUI.Text to THREE.Material
+	 * @see {MSDFFontMaterialUtils.mediation}
+	 * @returns {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+	 */
+	static get mediation() {
 
-	// default stretch
-	#if BACKGROUND_MAPPING != 0
+		return MSDFFontMaterialUtils.mediation;
 
-	float textureRatio = textureSize.x / textureSize.y;
-	float panelRatio = frameSize.x / frameSize.y;
-	float ratio = panelRatio / textureRatio;
-	float ratio2 = textureRatio / panelRatio;
+	}
 
-		// contain
-		#if BACKGROUND_MAPPING == 1
-		if ( textureRatio < panelRatio ) { // repeat on X
-			float newX = uv.x * ratio;
-			newX += 0.5 - 0.5 * ratio;
-			uv.x = newX;
-		} else { // repeat on Y
-			float newY = uv.y * ratio2;
-			newY += 0.5 - 0.5 * ratio2;
-			uv.y = newY;
-		}
-		#else
-		// cover
-		if ( textureRatio < panelRatio ) { // stretch on Y
-			float newY = uv.y * ratio2;
-			newY += 0.5 - 0.5 * ratio2;
-			uv.y = newY;
-		} else { // stretch on X
-			float newX = uv.x * ratio;
-			newX += 0.5 - 0.5 * ratio;
-			uv.x = newX;
-		}
+	constructor( materialOptions = {} ) {
 
-		#endif
+		super( {
 
-	#endif
+			uniforms: {
+				'glyphMap': { value: null }, // texture
+				'diffuse': { value: null }, // vec3
+				'opacity': { value: 1 },
+				'unitRange': { value: new external_THREE_namespaceObject.Vector2(0,0) }, // vec2
+				'alphaTest': { value: ALPHA_TEST },
+			},
+			transparent: true,
+			clipping: true,
+			vertexShader: vertexShader,
+			fragmentShader: fragmentShader,
+			extensions: {
+				derivatives: true
+			},
+		} );
 
-	return texture2D( map, uv );
+		// webgl preprocessor AlphaTest set by default
+		this.defines[ 'USE_ALPHATEST' ] = '';
+		this.needsUpdate = true;
 
-}
-#endif
-`);
+		// initiate additional properties
+		this.noRGSS = materialOptions.noRGSS || false;
 
-;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-background.fragment.glsl.js
-/* harmony default export */ const frame_background_fragment_glsl = (/* glsl */`
-#ifdef USE_MAP
+	}
 
-	vec4 textureSample = sampleTexture();
-	diffuseColor *= textureSample;
+	/**
+	 * The color will be the diffuse uniform
+	 * @returns {Color}
+	 */
+	get color() {
 
-#endif
-`);
+		return this.uniforms.diffuse.value;
 
-;// CONCATENATED MODULE: ./src/renderers/shaders/ShaderChunkUI.js
+	}
 
+	/**
+	 *
+	 * @param {Color} v
+	 */
+	set color( v ) {
 
+		this.uniforms.diffuse.value = v;
 
+	}
 
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set opacity( v ) {
 
+		if( this.uniforms )
+			this.uniforms.opacity.value = v;
 
+	}
 
+	/**
+	 * The color will be the diffuse uniform
+	 * @returns {number}
+	 */
+	get opacity() {
 
+		return this.uniforms.opacity.value;
 
+	}
 
 
 
 
+	/**
+	 * The color will be the diffuse uniform
+	 * @returns {Vector2}
+	 */
+	get unitRange() {
 
-/* eslint-disable camelcase */
-const ShaderChunkUI = {
-	msdf_alphaglyph_pars_vertex: msdf_alphaglyph_pars_vertex_glsl,
-	msdf_alphaglyph_vertex: msdf_alphaglyph_vertex_glsl,
-	msdf_offset_vertex: msdf_offsetglyph_vertex_glsl,
-	msdf_alphaglyph_pars_fragment: msdf_alphaglyph_pars_fragment_glsl,
-	msdf_alphaglyph_fragment: msdf_alphaglyph_fragment_glsl,
-	frame_border_pars_vertex: frame_border_pars_vertex_glsl,
-	frame_border_vertex: frame_border_vertex_glsl,
-	frame_common_pars: frame_common_pars_fragment_glsl,
-	frame_border_pars_fragment: frame_border_pars_fragment_glsl,
-	frame_border_fragment: frame_border_fragment_glsl,
-	frame_background_pars_fragment: frame_background_pars_fragment_glsl,
-	frame_background_fragment: frame_background_fragment_glsl,
-};
-/* eslint-enable camelcase */
+		return this.uniforms.unitRange.value;
 
-;// CONCATENATED MODULE: ./src/frame/renderers/ShaderLib/framematerial.glsl.js
-// import { ShaderChunkUI } from 'three-mesh-ui';
+	}
 
+	/**
+	 *
+	 * @param {Vector2} v
+	 */
+	set unitRange( v ) {
 
-const framematerial_glsl_vertexShader = /* glsl */`
-// Would be automatic on three materials and from USE_UV
-#ifdef USE_MAP
-varying vec2 vUv;
-#endif
+		this.uniforms.unitRange.value.copy( v );
 
-${ShaderChunkUI.frame_border_pars_vertex}
+	}
 
-#include <clipping_planes_pars_vertex>
+	/**
+	 *
+	 * @returns {Texture}
+	 */
+	get glyphMap() {
 
-void main() {
+		return this.uniforms.glyphMap.value;
 
-	#ifdef USE_MAP
-	vUv = uv;
-	#endif
+	}
+
+	/**
+	 *
+	 * @param {Texture} v
+	 */
+	set glyphMap( v ) {
 
-	${ShaderChunkUI.frame_border_vertex}
+		this.uniforms.glyphMap.value = v;
 
-	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
-	gl_Position = projectionMatrix * mvPosition;
+	}
 
-	#include <clipping_planes_vertex>
+	/**
+	 * Is this a default fontMaterial instance
+	 * @returns {boolean}
+	 */
+	get isDefault() {
+
+		return this.constructor === MSDFFontMaterial;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get alphaTest() {
+		return this.uniforms.alphaTest.value;
+	}
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set alphaTest( v ) {
+		this.uniforms.alphaTest.value = v;
+	}
 
 }
-`
 
-const framematerial_glsl_fragmentShader = /* glsl */`
+;// CONCATENATED MODULE: ./src/font/msdf/MSDFFontVariant.js
 
-// Basic
-uniform vec3 diffuse;
-uniform float opacity;
 
-${ShaderChunkUI.frame_common_pars}
 
-${ShaderChunkUI.frame_border_pars_fragment}
 
 
-#ifdef USE_MAP
-varying vec2 vUv;
-uniform sampler2D map;
-#endif
 
-${ShaderChunkUI.frame_background_pars_fragment}
 
-#include <clipping_planes_pars_fragment>
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-void main() {
 
-	vec4 diffuseColor = vec4( diffuse, opacity );
+/* eslint-enable no-unused-vars */
 
-	// map
-	${ShaderChunkUI.frame_background_fragment}
+/**
+ * @extends {FontVariant}
+ */
+class MSDFFontVariant extends font_FontVariant {
 
-	${ShaderChunkUI.frame_border_fragment}
+	constructor( weight, style, json, texture ) {
 
-	if( diffuseColor.a < 0.02 ) discard;
+		super(weight, style);
 
-	// output
-	gl_FragColor = diffuseColor;
+		// provide default values
+		this._unitRange = new external_THREE_namespaceObject.Vector2( 1, 1 );
 
+		if ( json.pages ) {
 
-	#include <clipping_planes_fragment>
-}
-`
+			this._buildData( json );
 
-;// CONCATENATED MODULE: ./src/frame/utils/FrameMaterialUtils.js
+		} else {
 
+			_loadJson( this, json );
 
-//JSDoc related import
-/* eslint-disable no-unused-vars */
+		}
 
+		if ( texture instanceof external_THREE_namespaceObject.Texture ) {
 
+			this._texture = texture;
+			this._buildTexture( texture );
 
-/* eslint-enable no-unused-vars */
+		} else if( typeof(texture) === 'string' || texture instanceof String ){
 
+			_loadTexture( this, texture );
 
-class FrameMaterialUtils {
+		} else {
 
+			throw new Error(`ThreeMeshUI::MSDFVariant provided 'texture' parameter is '${typeof texture}'. Only Texture and String allowed.`)
 
+		}
 
-	/**
-	 *
-	 * @returns {Object<{m: string, t?: (function((Material|ShaderMaterial), string, *): void)}>}
-	 */
-	static get mediation() {
+		this._defaultMaterialClass = MSDFFontMaterial;
 
-		return _mediationDefinitions;
+
+		this._checkReadiness();
 
 	}
 
 
-	/**
-	 * Alter a material options with required fontMaterial options and or default values
-	 * @param {Object.<string,any>} materialOptions
-	 */
-	static ensureMaterialOptions( materialOptions ) {
-		materialOptions.transparent = true;
-		materialOptions.alphaTest = materialOptions.alphaTest || 0.02;
+	get texture() {
+
+		return this._texture;
+
 	}
 
-	/**
-	 * As three-mesh-ui FontMaterial relies on webgl preprocessors,
-	 * lets force the material to have a proper defines object
-	 * @param {Material|ShaderMaterial} threeMaterial
-	 */
-	static ensureDefines( threeMaterial ) {
-		if ( !threeMaterial.defines ) {
-			threeMaterial.defines = {};
-		}
+	get unitRange() {
+
+		return this._unitRange;
+
 	}
 
-	/* eslint-disable no-unused-vars */
 	/**
-	 *
-	 * @param {Material|ShaderMaterial} threeMaterial
-	 * @param {Object.<string,any>} materialOptions
-	 */
-	static ensureUserData( threeMaterial, materialOptions ) {
-		threeMaterial.userData.borderColor = { value: null };
-		threeMaterial.userData.borderRadius = { value: new external_THREE_namespaceObject.Vector4(0,0,0,0) };
-		threeMaterial.userData.borderWidth = { value: new external_THREE_namespaceObject.Vector4(0,0,0,0) };
-		threeMaterial.userData.borderOpacity = { value: null };
-		threeMaterial.userData.frameSize = { value: new external_THREE_namespaceObject.Vector2( 1, 1 ) };
-		threeMaterial.userData.textureSize = { value: new external_THREE_namespaceObject.Vector2( 1, 1 ) };
-
-	}
-	/* eslint-enable no-unused-vars */
-
-	/**
-	 *
-	 * @param {any} shader
-	 * @param {Material|ShaderMaterial} threeMaterial
+	 * @param {Function.<Material|ShaderMaterial>} v
+	 * @override
 	 */
-	static bindUniformsWithUserData( shader, threeMaterial ) {
+	set fontMaterial( v ) {
 
-		shader.uniforms.borderColor = threeMaterial.userData.borderColor;
-		shader.uniforms.borderRadius = threeMaterial.userData.borderRadius;
-		shader.uniforms.borderWidth = threeMaterial.userData.borderWidth;
-		shader.uniforms.borderOpacity = threeMaterial.userData.borderOpacity;
-		shader.uniforms.frameSize = threeMaterial.userData.frameSize;
-		shader.uniforms.textureSize = threeMaterial.userData.textureSize;
-	}
+		this._defaultMaterialClass = v;
 
-	/**
-	 *
-	 * @param shader
-	 */
-	static injectShaderChunks( shader ) {
-		FrameMaterialUtils.injectVertexShaderChunks( shader );
-		FrameMaterialUtils.injectFragmentShaderChunks( shader );
 	}
 
 	/**
 	 *
-	 * @param shader
+	 * @override
+	 * @returns {Function.<Material|ShaderMaterial>}
 	 */
-	static injectVertexShaderChunks( shader ) {
-		shader.vertexShader = shader.vertexShader.replace(
-			'#include <uv_pars_vertex>',
-			'#include <uv_pars_vertex>\n' + ShaderChunkUI.frame_border_pars_vertex
-		);
+	get fontMaterial() {
 
-		// vertex chunks
-		shader.vertexShader = shader.vertexShader.replace(
-			'#include <uv_vertex>',
-			'#include <uv_vertex>\n' + ShaderChunkUI.frame_border_vertex
-		)
+		return this._defaultMaterialClass;
 
 	}
 
 	/**
 	 *
-	 * @param shader
+	 * @param {MSDFJson} json
+	 * @private
 	 */
-	static injectFragmentShaderChunks( shader ) {
-		shader.fragmentShader = shader.fragmentShader.replace(
-			'#include <map_pars_fragment>',
-			'#include <map_pars_fragment>\n' + ShaderChunkUI.frame_background_pars_fragment
-		)
-
-		shader.fragmentShader = shader.fragmentShader.replace(
-			'#include <map_pars_fragment>',
-			'#include <map_pars_fragment>\n' + ShaderChunkUI.frame_border_pars_fragment
-		)
-
-		shader.fragmentShader = shader.fragmentShader.replace(
-			'#include <map_pars_fragment>',
-			'#include <map_pars_fragment>\n' + ShaderChunkUI.frame_common_pars
-		)
-
-		// fragment chunks
-		shader.fragmentShader = shader.fragmentShader.replace(
-			'#include <map_fragment>',
-			ShaderChunkUI.frame_background_fragment
-		)
-
-		shader.fragmentShader = shader.fragmentShader.replace(
-			'#include <alphamap_fragment>',
-			ShaderChunkUI.frame_border_fragment+'\n#include <alphamap_fragment>'
-		)
-
-
-	}
+	_buildData( json ) {
 
-}
+		this._font = new MSDFTypographicFont( json );
 
-const _backgroundSizeTransformer = function( target, property, value ) {
+		/**
+		 *
+		 * @type {import('../FontVariant').KerningPairs}
+		 * @private
+		 */
+		this._kernings = this._buildKerningPairs( json );
+		this._chars = this._buildCharacters( json );
 
-	value = ['stretch','contain','cover'].indexOf(value);
-	asPreprocessorValueTransformer(target, 'BACKGROUND_MAPPING', value);
+		this._chars[ " " ] = this._buildCharacterWhite( json );
+		this._chars[ "\n" ] = this._buildCharacterWhite( json, '\n' , 0.001, 1);
+		this._chars[ "\t" ] = this._buildCharacterWhite( json, '\t' , 4, 1);
 
-}
+		this._size = json.info.size;
+		this._lineHeight = json.common.lineHeight;
+		this._lineBase = json.common.base;
 
-/**
- *
- * @type {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
- */
-const _mediationDefinitions = {
-	alphaTest: { m: 'alphaTest', t: alphaTestTransformer },
-	backgroundTexture: { m: 'map' },
-	backgroundColor: { m: 'color' },
-	backgroundOpacity: { m:'opacity' },
-	backgroundSize: { m: 'u_backgroundMapping', t: _backgroundSizeTransformer },
-	_borderWidth: { m: 'borderWidth', t: uniformOrUserDataTransformer },
-	borderColor: { m: 'borderColor', t: uniformOrUserDataTransformer },
-	_borderRadius: { m: 'borderRadius', t: uniformOrUserDataTransformer },
-	borderOpacity: { m: 'borderOpacity', t: uniformOrUserDataTransformer },
-	size: { m: 'frameSize', t: uniformOrUserDataTransformer },
-	tSize: { m: 'textureSize', t: uniformOrUserDataTransformer }
-}
+		this._distanceRange = json.distanceField.distanceRange;
 
+		// precompute the unit range as recommended by chlumsky
+		// @see https://github.com/Chlumsky/msdfgen
+		// "I would suggest precomputing unitRange as a uniform variable instead of pxRange for better performance."
+		this._unitRange = new external_THREE_namespaceObject.Vector2(this._distanceRange, this._distanceRange)
+			.divide( new external_THREE_namespaceObject.Vector2( json.common.scaleW, json.common.scaleH ) );
 
-;// CONCATENATED MODULE: ./src/frame/materials/FrameMaterial.js
+	}
 
+	/**
+	 *
+	 * @param texture
+	 * @private
+	 */
+	_buildTexture( texture ) {
 
+		texture.generateMipmaps = false;
+		texture.minFilter = external_THREE_namespaceObject.LinearFilter;
+		texture.magFilter = external_THREE_namespaceObject.LinearFilter;
 
+		texture.needsUpdate = true;
 
-class FrameMaterial extends external_THREE_namespaceObject.ShaderMaterial {
+	}
 
+	/**
+	 * @abstract
+	 * @protected
+	 * @param {string} missingChar
+	 * @returns {string|null}
+	 */
+	_getFallbackCharacter( missingChar ) {
+		return font_FontLibrary.missingCharacter( this, missingChar );
+	}
 
 	/**
-	 * This static method is mandatory for extending ThreeMeshUI.FrameMaterial
-	 * It will provide a transfer description for properties from ThreeMeshUI.Text to THREE.Material
-	 * @see {FrameMaterialUtils.mediation}
-	 * @returns {Object.<{m:string, t?:(frameMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+	 *
+	 * @override
+	 * @param {import('./../InlineGlyph').default|import('./MSDFInlineGlyph').default} inline
+	 * @param {import('./../../core/elements/MeshUIBaseElement').default} element
+	 * @returns {MSDFGeometricGlyph}
 	 */
-	static get mediation() {
+	getGeometricGlyph( inline, element ) {
 
-		return FrameMaterialUtils.mediation;
+		return new MSDFGeometricGlyph( inline, element );
 
 	}
 
-	constructor() {
-		super ( {
-			uniforms: {
-				alphaTest: { value: 0.02 },
-				map: { value: null },
-				diffuse: { value: new external_THREE_namespaceObject.Color(0xffffff) },
-				opacity: { value: 1.0 },
-				borderColor: { value: null },
-				borderRadius: { value: new external_THREE_namespaceObject.Vector4(0,0,0,0) },
-				borderWidth: { value: new external_THREE_namespaceObject.Vector4(0,0,0,0) },
-				borderOpacity: { value: null },
-				frameSize: { value: new external_THREE_namespaceObject.Vector2( 1, 1 ) },
-				textureSize: { value: new external_THREE_namespaceObject.Vector2( 1, 1 ) }
-			},
-			side: external_THREE_namespaceObject.FrontSide,
-			transparent: true,
-			clipping: true,
-			vertexShader: framematerial_glsl_vertexShader,
-			fragmentShader: framematerial_glsl_fragmentShader,
-			extensions: {
-				derivatives: true
-			}
-		} );
+	/**
+	 * Abstraction implementation
+	 *
+	 * @returns {boolean}
+	 * @private
+	 */
+	_readyCondition() {
+
+		return this._chars && this._texture && this._texture.image;
 
-		// webgl preprocessor AlphaTest set by default
-		this.defines[ 'USE_ALPHATEST' ] = '';
-		this.needsUpdate = true;
 	}
 
-	set map( value ) {
+	/**
+	 * Ensure that each font variant has its kerning dictionary
+	 * @see src/font/msdf/FontVariantMSDF.js for an implementation
+	 *
+	 * @param {MSDFJson} json
+	 * @returns {import('../FontVariant').KerningPairs}
+	 * @private
+	 */
+	_buildKerningPairs( json ) {
 
-		this.uniforms.map.value = value;
-		if( !value ) {
+		const friendlyKernings = {};
 
-			if( this.defines['USE_UV'] !== undefined ) {
+		// Loop through each kernings pairs defined in msdf json
+		for ( let i = 0; i < json.kernings.length; i++ ) {
 
-				delete this.defines['USE_UV'];
-				this.needsUpdate = true;
+			const kerning = json.kernings[ i ];
 
-			}
+			// ignore zero kerned glyph pair
+			if ( kerning.amount === 0 ) continue;
 
-		} else if( this.defines['USE_UV'] === undefined ) {
+			// Build and store the glyph paired characters "ij","WA", ... as keys, referecing their kerning amount
+			const glyphPair = String.fromCharCode( kerning.first, kerning.second );
 
-			this.defines['USE_UV'] = '';
-			this.needsUpdate = true;
+			// This would then be available for fast access
+			friendlyKernings[ glyphPair ] = kerning.amount;
 
 		}
 
-		this.needsUpdate = true;
+		// update the font to keep it
+		return friendlyKernings;
 
 	}
 
-	get map(){
-		return this.uniforms.map.value;
-	}
 
 	/**
 	 *
-	 * @returns {number}
+	 * @param {MSDFJson} json
+	 * @private
 	 */
-	get alphaTest() {
+	_buildCharacters( json ) {
 
-		return this.uniforms.alphaTest.value;
+		const friendlyChars = {};
 
-	}
+		for ( let i = 0; i < json.chars.length; i++ ) {
+			const charOBJ = json.chars[ i ];
 
+			friendlyChars[ charOBJ.char ] = new MSDFTypographicGlyph( this._font, charOBJ );
+
+		}
+
+		return friendlyChars;
 
+	}
 
 	/**
 	 *
-	 * @param {number} v
+	 * @param {MSDFJson} json
+	 * @param char
+	 * @param scaleX
+	 * @param scaleY
+	 * @private
 	 */
-	set alphaTest( v ) {
-		this.uniforms.alphaTest.value = v;
+	_buildCharacterWhite( json, char = " ", scaleX = 1, scaleY = 1 ) {
+		return new MSDFTypographicGlyph( this._font,
+			{
+				char,
+				width: (json.info.size / 3)*scaleX,
+				height: (json.info.size * 0.7)*scaleY,
+			});
 	}
 
+
+	/* eslint-disable no-unused-vars */
 	/**
 	 *
-	 * @param {number} v
+	 * @param element
+	 * @private
 	 */
-	set opacity( v ) {
+	_alterElementProperties( element ) { /* eslint-enable no-unused-vars */ }
+}
+
+/***********************************************************************************************************************
+ * INTERNAL STUFF
+ **********************************************************************************************************************/
+
+
+/**
+ * Load a msdf json then build fontVariant data
+ *
+ * @param {FontVariant} fontVariant
+ * @param {string} jsonUrl
+ * @private
+ */
+function _loadJson( fontVariant, jsonUrl ) {
+
+	new external_THREE_namespaceObject.FileLoader().setResponseType( 'json' ) .load( jsonUrl, ( response ) => {
+
+		fontVariant._buildData( response );
+		fontVariant._checkReadiness();
+
+	} );
+
+}
+
+/**
+ * Load a msdf texture then build texture
+ *
+ * @param {FontVariant} fontVariant
+ * @param {string} textureUrl
+ * @private
+ */
+function _loadTexture( fontVariant, textureUrl ) {
+
+	fontVariant._texture = new external_THREE_namespaceObject.TextureLoader().load( textureUrl, ( texture ) => {
+
+		fontVariant._buildTexture( texture );
+		fontVariant._checkReadiness();
+
+	} );
+
+}
+
+/***********************************************************************************************************************
+ * MSDF FILE FORMAT DESCRIPTION
+ * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
+ **********************************************************************************************************************/
+
+/**
+ * @typedef {Object} MSDFJson
+ *
+ * @property {MSDFJsonInfo} info
+ * @property {MSDFJsonCommon} common
+ * @property {Array.<MSDFJsonPage>} pages
+ * @property {Array.<MSDFJsonChar>} chars
+ * @property {{fieldType:string, distanceRange:number}} distanceField
+ * @property {Array.<MSDFJsonKerning>} kernings
+ */
+
+/**
+ *
+ * @typedef {Object} MSDFJsonInfo
+ *
+ * @property {string} face This is the name of the true type font.
+ * @property {number} size The size of the true type font.
+ * @property {boolean} bold The font is bold.
+ * @property {boolean} italic The font is italic.
+ * @property {string[]} charset The name of the OEM charset used (when not unicode).
+ * @property {boolean} unicode 	Set to 1 if it is the unicode charset.
+ * @property {number} stretchH The font height stretch in percentage. 100% means no stretch.
+ * @property {number} smooth Set to 1 if smoothing was turned on.
+ * @property {number} aa The supersampling level used. 1 means no supersampling was used.
+ * @property {Array.<number>} padding TThe padding for each character (up, right, down, left).
+ * @property {Array.<number>} spacing The spacing for each character (horizontal, vertical).
+ * @property {number} outline (not found) The outline thickness for the characters.
+ */
+
+/**
+ *
+ * @typedef {Object} MSDFJsonCommon
+ *
+ * @property {number} lineHeight This is the distance in pixels between each line of text.
+ * @property {number} base The number of pixels from the absolute top of the line to the base of the characters.
+ * @property {number} scaleW The width of the texture, normally used to scale the x pos of the character image.
+ * @property {number} scaleH The height of the texture, normally used to scale the y pos of the character image.
+ * @property {number} pages The number of texture pages included in the font.
+ * @property {boolean} packed
+ * @property {number} alphaChnl
+ * @property {number} redChnl
+ * @property {number} greenChnl
+ * @property {number[]} blueChnl
+ */
+
+/**
+ * @typedef {Object} MSDFJsonPage
+ *
+ * @property {string} id The page id.
+ * @property {string} file The texture file name.
+ */
+
+/**
+ *
+ * @typedef {Object} MSDFJsonChar
+ *
+ * @property {number} id The character id.
+ * @property {number} index The character index.
+ * @property {string} char The character.
+ * @property {number} x The left position of the character image in the texture.
+ * @property {number} y The top position of the character image in the texture.
+ * @property {number} width The width of the character image in the texture.
+ * @property {number} height The height of the character image in the texture.
+ * @property {number} xoffset How much the current position should be offset when copying the image from the texture to the screen.
+ * @property {number} yoffset How much the current position should be offset when copying the image from the texture to the screen.
+ * @property {number} xadvance How much the current position should be advanced after drawing the character.
+ * @property {string} page The texture page where the character image is found.
+ * @property {number} chnl The texture channel where the character image is found (1 = blue, 2 = green, 4 = red, 8 = alpha, 15 = all channels).
+ * @property {Object} [uv]
+ * /
+
+
+
+/**
+ *
+ * @typedef {Object} MSDFJsonKerning
+ *
+ * @property {number} first The first character id.
+ * @property {number} second The second character id.
+ * @property {number} amount How much the x position should be adjusted when drawing the second character immediately following the first.
+ *
+ */
+
+;// CONCATENATED MODULE: ./src/font/FontFamily.js
+
+
+//JSDoc related imports
+
+/* eslint-disable no-unused-vars */
+
+
+/* eslint-enable no-unused-vars */
+
+class FontFamily extends external_THREE_namespaceObject.EventDispatcher {
+
+	/**
+	 *
+	 * @param {string} name
+	 */
+	constructor( name ) {
+
+		super();
+
+		/**
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		this._name = name;
+
+		/**
+		 *
+		 * @type {Array.<FontVariant>}
+		 * @private
+		 */
+		this._variants = [];
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		this._isReady = false;
+
+	}
+
+	get isReady() { return this._isReady; }
+
+	/**
+	 *
+	 * @param {string|number} weight
+	 * @param {string} style
+	 * @param {string|Object} json
+	 * @param {string|Texture} texture
+	 * @param {boolean} [override=false]
+	 */
+	addVariant( weight, style, json, texture, override = false){
+
+		if( override || !this.getVariant( weight, style) ){
+
+			this._isReady = false;
+
+			const newVariant = new MSDFFontVariant( weight, style, json, texture);
+
+			this._variants.push( newVariant );
+
+			if( !newVariant.isReady ){
+
+				newVariant.addEventListener( "ready", this._checkReadiness )
+
+			} else {
+
+				this._checkReadiness();
+
+			}
+
+		} else {
+
+			console.warn(`FontFamily('${this._name}')::addVariant() - Variant(${weight}, ${style}) already exists.`);
+
+		}
+
+		return this;
+
+	}
+
+	/**
+	 *
+	 * @param {FontVariant} variantImplementation
+	 * @param {boolean} [override=false]
+	 */
+	addCustomImplementationVariant( variantImplementation, override = false){
+
+		if( override || !this.getVariant( variantImplementation.weight, variantImplementation.style) ){
+
+			this._isReady = false;
+
+			this._variants.push( variantImplementation );
+
+			if( !variantImplementation.isReady ){
+
+				variantImplementation.addEventListener( "ready", this._checkReadiness )
+
+			} else {
+
+				this._checkReadiness();
+
+			}
+
+		} else {
+
+			console.warn(`FontFamily('${this._name}')::addCustomImplementationVariant() - Variant(${variantImplementation.weight}, ${variantImplementation.style}) already exists.`);
+
+		}
+
+		return this;
+
+	}
+
+	/**
+	 *
+	 * @param {string|number} weight
+	 * @param {string} style
+	 * @returns {FontVariant|null}
+	 */
+	getVariant( weight, style ){
+
+		return this._variants.find( fontVariant => fontVariant.weight === weight && fontVariant.style === style );
+
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	get name(){ return this._name; }
+
+	_checkReadiness = () => {
+
+		if( this._variants.every( v => v.isReady ) ) {
+
+			FontFamily_setReady( this );
+
+		}
+
+	}
+
+}
+
+const FontFamily_readyEvent = { type: 'ready' };
+
+/**
+ * Set the ready status of a fontVariant
+ * @param {FontFamily} fontFamily
+ * @private
+ */
+function FontFamily_setReady( fontFamily ) {
+
+	fontFamily._isReady = true;
+	fontFamily.dispatchEvent( FontFamily_readyEvent );
+
+}
+
+;// CONCATENATED MODULE: ./src/font/FontLibrary.js
+
+
+// JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+
+const _fontFamilies = {};
+
+/* eslint-disable no-unused-vars */
+
+/**
+ *
+ * @param {FontFamily} fontFamily
+ * @returns {Promise<unknown>}
+ */
+const prepare = function ( fontFamily ) {
+
+	/**
+	 *
+	 * @type {FontFamily[]}
+	 */
+	const families = [ ...arguments ];
+
+	// Check all family are right instance
+	families.forEach( f => {
+
+		if( !(f instanceof FontFamily) ) {
+
+			throw new Error(`FontLibrary::prepare() - One of the provided parameter is not a FontFamily. Instead ${typeof f} given.`);
+
+		}
+
+	})
+
+	/**
+	 * Check that all provided families are loaded
+	 * @returns {boolean}
+	 */
+	const areAllLoaded = function() {
+
+		return families.every( f => f.isReady );
+
+	}
+
+	// @TODO: Should handle possible rejection
+	return new Promise((resolve,reject)=>{
+
+		// Direct resolve if all loaded
+		if ( areAllLoaded() ){
+
+			resolve();
+
+		} else {
+
+			// Add listener on each family not ready
+			for ( let i = 0; i < families.length; i++ ) {
+
+				const family = families[ i ];
+				if( !family.isReady ){
+
+					family.addEventListener( "ready" , ()=> {
+
+						// Resolve if all other families are loaded
+						if( areAllLoaded() ) {
+
+							resolve();
+
+						}
+
+					});
+
+				}
+
+			}
+
+		}
+
+	});
+
+}
+
+/* eslint-enable no-unused-vars */
+
+
+/**
+ *
+ * @param {string} name
+ * @returns {FontFamily}
+ */
+const addFontFamily = function ( name ) {
+
+	if ( _fontFamilies[ name ] ) {
+		console.error( `FontLibrary::addFontFamily - Font('${name}') is already registered` );
+	}
+
+	_fontFamilies[ name ] = new FontFamily( name );
+
+	return _fontFamilies[ name ];
+
+}
+
+/**
+ *
+ * @param {string} name
+ * @returns {FontFamily}
+ */
+const getFontFamily = function( name ) {
+
+	return _fontFamilies[ name ];
+
+}
+
+
+/**
+ *
+ * @param { (fontVariant:FontVariant, character:string ) => string|null } handler
+ */
+const setMissingCharacterHandler = function ( handler ) {
+
+	_missingCharacterHandler = handler;
+
+}
+
+/**
+ *
+ * @type { (fontVariant:FontVariant, character:string ) => string|null }
+ * @private
+ */
+let _missingCharacterHandler = function ( fontVariant, character ) {
+
+	console.error( `The character '${character}' is not included in the font characters set.` );
+
+	// return a glyph has fallback
+	return " ";
+
+};
+
+/**
+ *
+ * @param {FontVariant} fontVariant
+ * @param {string} character
+ *
+ * @returns {string}
+ */
+function missingCharacter( fontVariant, character ) {
+
+	// Execute the user defined handled
+	return _missingCharacterHandler( fontVariant, character );
+
+}
+
+
+//
+
+const FontLibrary = {
+	addFontFamily,
+	getFontFamily,
+	prepare,
+	setMissingCharacterHandler,
+	missingCharacter
+};
+
+/* harmony default export */ const font_FontLibrary = (FontLibrary);
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontFamilyProperty.js
+
+
+
+
+
+class FontFamilyProperty extends SubStyleProperty {
+
+	constructor( ) {
+
+		super( 'fontFamily', 'inherit' , true );
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._input instanceof FontFamily ) {
+
+			this._value = this._input;
+
+		} else if ( this._input === 'inherit' ) {
+
+			// do nothing
+
+		} else if ( typeof this._input === 'string' ) {
+
+			// string - family
+			const fontFamily = font_FontLibrary.getFontFamily( this._input );
+
+			if( fontFamily ) {
+
+				this._value = fontFamily;
+
+			} else {
+
+				console.warn( `(.style) fontFamily, the font '${this._input}' is not registered. Aborted.`)
+
+			}
+
+		} else {
+
+			console.warn( `(.style) fontFamily requires a registered fontFamily instance, or the id of a registered fontFamily.`);
+			console.warn( `If you want to set a specific font, please use .font property instead.`);
+
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @return {any|FontFamily|null}
+	 */
+	get value() { return this._value; }
+
+	getInheritedInput ( element ) {
+
+		if( this._input !== 'inherit' ) return this._input;
+
+		const parent = element._parent._value;
+		if( parent ) {
+
+			return parent[`_${this._id}`].getInheritedInput( parent )
+
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/LineHeightProperty.js
+
+
+class LineHeightProperty extends SubStyleProperty {
+
+	/**
+	 *
+	 */
+	constructor() {
+
+		super( 'lineHeight', 'inherit', true );
+
+	}
+
+	update( element, out ) {
+		super.update( element, out );
+
+		element._layouter._needsProcess = true;
+	}
+
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/WhiteSpaceProperty.js
+
+
+
+class WhiteSpaceProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'whiteSpace', 'inherit' );
+
+		this.isValidValue = WhiteSpaceProperty_isValid;
+
+	}
+
+}
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const WhiteSpaceProperty_AVAILABLE_VALUES = ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function WhiteSpaceProperty_isValid( value ) {
+
+	if( WhiteSpaceProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) whiteSpace value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/LetterSpacingProperty.js
+
+
+class LetterSpacingProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'letterSpacing', 'inherit', true );
+
+	}
+
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontSizeProperty.js
+
+
+class FontSizeProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'fontSize', 'inherit', true );
+
+		this._fontRelative = false;
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 * @param {Object.<string,any> } out
+	 */
+	update( element, out ) {
+
+		console.log("fontSize update")
+		// /if( !this._allowsInherit ) {
+
+			this._inheritedInput = this.getInheritedInput( element );
+			console.log( 'inherit?', this._inheritedInput )
+			this._value = _parseValue( this._inheritedInput, element );
+
+		// }else{
+		//
+		// 	console.log( this._input )
+		// 	this._value = _parseValue( this._input, element )
+		// }
+
+		console.log( "    = ", this._value )
+
+		this.computeOutputValue( element );
+
+		// rebuild same properties on children 'inheritance'
+		for ( const childUIElement of element._children._uis ) {
+
+			const property = childUIElement[`_${this._id}`];
+
+			if( !property ) continue;
+
+			const target = property._input ? property._input : property._value;
+
+			if( target === 'inherit' || property._fontRelative ) childUIElement[`_${this._id}`]._needsUpdate = true;
+
+		}
+
+		this.output( out );
+
+	}
+
+	computeOutputValue( element ) {}
+
+}
+
+function _parseValue( v, element ){
+
+	element._fontSize._fontRelative = false;
+
+	if( !isNaN(v) ) return v;
+
+	if( v.endsWith('em') ) {
+
+		element._fontSize._fontRelative = true;
+
+		console.log("VVVVVV", v);
+
+		return parseFloat( v.replace(/[^0-9.]+/,"") ) * element._parent._value._fontSize.getInheritedInput(element._parent._value);
+
+	}
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/geometry/SegmentsProperty.js
+
+
+class SegmentsProperty extends BaseProperty {
+
+	constructor() {
+
+		super( 'segments', 1, false );
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/InvertAlphaProperty.js
+
+
+/**
+ * Class definition
+ * @property {boolean|"inherit"} value - propriety description
+ *
+ */
+class InvertAlphaProperty extends InheritableProperty {
+
+	constructor() {
+
+		super( 'invertAlpha', 'inherit' );
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontKerningProperty.js
+
+
+
+class FontKerningProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'fontKerning', 'inherit' );
+
+		this.isValidValue = FontKerningProperty_isValid;
+
+	}
+
+}
+
+
+const FontKerningProperty_AVAILABLE_VALUES = ['normal', 'none', 'inherit'];
+
+function FontKerningProperty_isValid( value ) {
+
+	if( FontKerningProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) fontKerning value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/InheritableBooleanProperty.js
+
+
+/**
+ * @property {boolean|"inherit"} value
+ */
+class InheritableBooleanProperty extends InheritableProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId) {
+
+		super( propertyId, 'inherit', true );
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/InheritableMaterialProperty.js
+
+
+
+/**
+ * @property {Material|null|"inherit"} value
+ */
+class InheritableMaterialProperty extends InheritableProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId ) {
+
+		super( propertyId, 'inherit', false );
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(target:any, targetProperty:string, value:any) => void}>}
+		 * @internal
+		 */
+		this._mediation = {};
+
+		/**
+		 *
+		 * @type {null}
+		 * @internal
+		 */
+		this._defaultMaterial = null;
+
+	}
+
+	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		this._notInheritedValue = this._value;
+
+		if ( this._notInheritedValue === 'inherit' ) {
+			this._notInheritedValue = this.getInheritedInput( element );
+		} else {
+			this.propagate( element );
+		}
+
+		// no material
+		if ( !this._notInheritedValue ) {
+
+			// reset mediation
+			this._mediation = {};
+
+		} else if ( this._notInheritedValue.constructor.mediation ) {
+
+			this._mediation = { ...this._notInheritedValue.constructor.mediation };
+
+		} else {
+
+			this._mediation = {
+				clippingPlanes: { m: 'clippingPlanes' },
+				fontAlphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+				fontSide: { m: 'side' },
+				color: { m: 'color' },
+				fontOpacity: { m: 'opacity' }
+			};
+
+		}
+
+		element._transferToFontMaterial();
+
+		// dispatch to children
+
+
+		this._outputValue( out );
+
+	}
+
+	/**
+	 * @override
+	 */
+	getInheritedInput( element ) {
+
+		if ( this._value !== 'inherit' ) return this._value;
+
+		let recursiveParent = element;
+		let inheritedValue = null;
+		while ( recursiveParent._parent._value ) {
+
+			recursiveParent = recursiveParent._parent._value;
+			if ( recursiveParent[ `_${this._id}` ]._value !== 'inherit' ) {
+
+				inheritedValue = recursiveParent[ `_${this._id}` ]._value;
+				break;
+			}
+
+		}
+
+		if ( inheritedValue !== null ) {
+			return inheritedValue;
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+	getDefaultValue() {
+		return this._defaultMaterial;
+	}
+
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/VerticalAlignProperty.js
+
+
+
+class VerticalAlignProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'verticalAlign', 'inherit', true );
+
+		this.isValidValue = VerticalAlignProperty_isValid;
+
+	}
+
+}
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const VerticalAlignProperty_AVAILABLE_VALUES = ['inherit', 'baseline', 'sub', 'super'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+const VerticalAlignProperty_isValid = function ( value ) {
+
+	if( VerticalAlignProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) verticalAlign value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+;// CONCATENATED MODULE: ./src/core/elements/MeshUIBaseElement.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+
+
+
+
+/* eslint-enable no-unused-vars */
+
+class MeshUIBaseElement extends external_THREE_namespaceObject.Object3D {
+
+	/**
+	 *
+	 * @param {Properties} properties
+	 * @param {Options} values
+	 */
+	constructor( properties, values) {
+
+		super();
+
+		Object.defineProperties( this, {
+				isUI: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+		let uiType = values.uiType || 'default';
+		if( values.uiType ){
+			delete values.uiType;
+		}
+
+		Object.defineProperties( this, {
+				uiType: {
+					configurable: false,
+					enumerable: true,
+					value: uiType
+				}
+			}
+		);
+
+		/**
+		 *
+		 * @type {Mesh|null}
+		 * @internal
+		 */
+		this._backgroundMesh = null;
+
+		/**
+		 *
+		 * @type {Material}
+		 * @internal
+		 */
+		this._backgroundMaterial = null;
+
+		/**
+		 *
+		 * @type {Material}
+		 * @protected
+		 */
+		this._backgroundCustomDepthMaterial = null;
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(target:any, targetProperty:string, value:any) => void}>}
+		 * @protected
+		 */
+		this._backgroundMaterialMediation = {};
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(value:any) => any}>}
+		 * @private
+		 */
+		this._backgroundMeshMediation = {
+			backgroundCastShadow: { m: 'castShadow' },
+			backgroundReceiveShadow: { m: 'receiveShadow' },
+			renderOrder: {m: 'renderOrder' }
+		};
+
+		/**
+		 *
+		 * @type {Mesh|null}
+		 * @internal
+		 */
+		this._fontMesh = null;
+
+		/**
+		 *
+		 * @type {InheritableMaterialProperty}
+		 * @internal
+		 */
+		this._fontMaterial = new InheritableMaterialProperty('fontMaterial');
+
+		/**
+		 *
+		 * @type {InheritableMaterialProperty}
+		 * @private
+		 */
+		this._fontCustomDepthMaterial = new InheritableMaterialProperty('fontCustomDepthMaterial');
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(value:any) => any}>}
+		 * @private
+		 */
+		this._fontMeshMediation = {
+			fontMaterial: { m: 'material' },
+			fontCustomDepthMaterial: { m : 'customDepthMaterial', t:directTransferNotNull},
+			fontCastShadow: { m: 'castShadow' },
+			fontReceiveShadow: { m: 'receiveShadow' },
+			renderOrder: {m: 'renderOrder' }
+		};
+
+		// Children lists
+
+
+		const defaults = get(null, this.uiType );
+		/**
+		 *
+		 * @type {EmptyProperty|ChildrenBox|ChildrenText}
+		 * @internal
+		 */
+		this._children = properties.children ? new properties.children : new EmptyProperty("children");
+		this._parent = new ParentProperty();
+
+		// update parentUI when this component will be added or removed
+		this.addEventListener( 'added', this._rebuildParentUI );
+		this.addEventListener( 'removed', this._rebuildParentUI );
+
+		//material properties
+		this._backgroundSide = new SideProperty( 'backgroundSide', defaults.backgroundSide );
+		this._fontSide = new SideProperty( 'fontSide', defaults.fontSide );
+		this._backgroundAlphaTest = new NumberProperty( 'backgroundAlphaTest', defaults.backgroundAlphaTest );
+		this._fontAlphaTest = new NumberProperty( 'fontAlphaTest', defaults.fontAlphaTest );
+
+		// mesh properties
+		this._visible = new VisibleProperty( 'visible', true );
+
+		this._backgroundCastShadow = new InheritableBooleanProperty( 'backgroundCastShadow' );
+		this._fontCastShadow = new InheritableBooleanProperty( 'fontCastShadow' );
+		this._backgroundReceiveShadow = new InheritableBooleanProperty( 'backgroundReceiveShadow' );
+		this._fontReceiveShadow = new InheritableBooleanProperty( 'fontReceiveShadow' );
+
+		// @TODO: RenderOrder for background and fonts
+		this._renderOrder = new RenderOrderProperty();
+
+		// @TODO : background & Text
+		this._segments = properties.segments ? new properties.segments() : new SegmentsProperty();
+
+
+		/**
+		 *
+		 * @type {BoundsBox|BoundsText|EmptyProperty}
+		 * @ignore
+		 * @internal
+		 */
+		this._bounds = properties.bounds ? new properties.bounds() : new EmptyProperty("bounds");
+
+		// styles ---;
+
+		this._order = new OrderProperty();
+
+		this._padding = new PaddingProperty( defaults.padding );
+		this._margin = new MarginProperty( defaults.margin );
+
+
+		this._position = new PositionProperty( defaults.position );
+
+		/**
+		 *
+		 * @type {FlexDirectionProperty}
+		 * @internal
+		 */
+		this._flexDirection = properties.flexDirection ? new properties.flexDirection() : new FlexDirectionProperty();
+
+		this._justifyContent = properties.justifyContent ? new properties.justifyContent() : new JustifyContentProperty();
+
+		this._alignItems = properties.alignItems ? new properties.alignItems() : new AlignItemsProperty();
+
+		this._display = new Display( 'flex' );
+
+		this._boxSizing = new BoxSizing( 'border-box' );
+		this._width = new WidthProperty();
+		this._height = new HeightProperty();
+
+		this._backgroundColor = properties.backgroundColor ? new properties.backgroundColor( defaults.backgroundColor ) : new BackgroundColorProperty(defaults.backgroundColor);
+		this._backgroundOpacity = new StyleFactorProperty('backgroundOpacity', defaults.backgroundOpacity);
+		this._backgroundImage = new BackgroundImage();
+		this._backgroundSize = new BackgroundSize( 'cover' );
+
+		this._color = properties.color ? new properties.color( defaults.color ) : new StyleColorProperty('color', defaults.color);
+		this._fontOpacity = new StyleFactorProperty( 'fontOpacity', 'inherit');
+
+		this._whiteSpace = properties.whiteSpace ? new properties.whiteSpace() : new WhiteSpaceProperty();
+
+		this._fontFamily = properties.fontFamily ? new properties.fontFamily() : new FontFamilyProperty();
+		this._fontStyle = properties.fontStyle ? new properties.fontStyle(defaults.fontStyle) : new FontStyleProperty( defaults.fontStyle );
+		this._fontWeight = properties.fontWeight ? new properties.fontWeight( defaults.fontWeight ) : new FontWeightProperty(defaults.fontWeight);
+		this._fontSize = properties.fontSize ? new properties.fontSize() : new FontSizeProperty();
+
+		this._lineHeight = properties.lineHeight ? new properties.lineHeight() : new LineHeightProperty();
+
+		this._fontKerning = properties.fontKerning ? new properties.fontKerning() : new FontKerningProperty();
+		this._letterSpacing = properties.letterSpacing ? new properties.letterSpacing() : new LetterSpacingProperty();
+
+		this._overflow = new Overflow( 'visible' );
+
+		this._borderRadius = new BorderRadius( defaults.borderRadius );
+		this._borderWidth = new BorderWidth( defaults.borderWidth );
+		this._borderColor = properties.borderColor ? new properties.borderColor() : new StyleColorProperty( 'borderColor', defaults.borderColor );
+		this._borderOpacity = new StyleFactorProperty( 'borderOpacity', defaults.borderOpacity);
+
+		// styles ---;
+
+		this._font = new FontProperty();
+
+		this._lineBreak = properties.lineBreak ? new properties.lineBreak() : new EmptyProperty("lineBreak");
+
+		/**
+		 *
+		 * @type {TextContentEmpty|TextContentText|TextContentInline}
+		 * @internal
+		 */
+		this._textContent = properties.textContent ? new properties.textContent() : new TextContentEmpty();
+
+		/**
+		 *
+		 * @type {GlyphsProperty}
+		 * @internal
+		 */
+		this._glyphs = properties.glyphs ? new properties.glyphs() : new EmptyProperty("glyphs");
+
+		this._inlines = properties.inlines ? new properties.inlines() : new EmptyProperty("inlines");
+
+
+		/**
+		 *
+		 * @type {BoxLayouter|TextLayouter|EmptyProperty}
+		 * @internal
+		 */
+		this._layouter = properties.layouter ? new properties.layouter() : new EmptyProperty("layouter");
+
+		this._inlineJustificator = new InlineJustificator();
+
+		this._textAlign = properties.textAlign ? new properties.textAlign() : new TextAlignProperty();
+
+		this._verticalAlign = properties.verticalAlign ? new properties.verticalAlign() : new VerticalAlignProperty();
+
+		this._autoSize = properties.autoSize ? new properties.autoSize() : new EmptyProperty("autoSize");
+
+		this._renderer = properties.renderer ? new properties.renderer() : new EmptyProperty("renderer");
+
+		this._offset = new OffsetProperty();
+
+		// adds
+		this._invertAlpha = new InvertAlphaProperty();
+		this._fontSmooth = properties.fontSmooth ? new properties.fontSmooth() : new FontSmoothProperty();
+
+		/**
+		 *
+		 * @type {Array.<BaseProperty>}
+		 * @internal
+		 */
+		this._components = [
+
+			this._textContent,
+			this._children,
+			this._parent,
+
+
+			this._autoSize,
+
+
+			this._fontFamily,
+			this._fontStyle,
+			this._fontWeight,
+			this._font,
+
+			this._whiteSpace,
+
+
+			this._glyphs,
+
+			this._inlines,
+
+			this._visible,
+
+			// Meshes interfaces
+			this._backgroundSide,
+			this._fontSide,
+			this._backgroundAlphaTest,
+			this._fontAlphaTest,
+			this._backgroundCastShadow,
+			this._fontCastShadow,
+			this._backgroundReceiveShadow,
+			this._fontReceiveShadow,
+			this._renderOrder,
+			this._segments,
+			// styles ---;
+
+			this._fontSize,
+
+			this._padding,
+			this._margin,
+			this._width,
+			this._height,
+			this._borderWidth,
+			this._boxSizing,
+
+			this._bounds,
+
+			this._position,
+
+
+			this._flexDirection,
+			this._justifyContent,
+			this._alignItems,
+			this._order,
+
+
+			this._display,
+
+			this._fontOpacity,
+			this._color,
+
+			this._backgroundColor,
+			this._backgroundOpacity,
+			this._backgroundImage,
+			this._backgroundSize,
+
+
+
+			// font : update order : WhiteSpace > Glyph > Inlines > Kerning > newlineBreakability > LineBreak > FontSize
+			// font : process order : ??
+			// this._font,
+
+
+			this._lineHeight,
+			this._fontKerning,
+			this._letterSpacing,
+
+			this._borderRadius,
+			this._borderColor,
+			this._borderOpacity,
+
+			// this._styles,
+			// styles ---;
+			this._lineBreak,
+			this._offset,
+
+			this._verticalAlign,
+			this._layouter,
+
+			this._inlineJustificator,
+			this._textAlign,
+
+
+			// !! this._renderer renderer MUST NOT BE in components !!
+
+			this._invertAlpha,
+			this._fontSmooth,
+
+			this._fontMaterial,
+			this._fontCustomDepthMaterial,
+			this._overflow,
+			this._renderer,
+
+		]
+
+
+		/**
+		 *
+		 * @type {*[]}
+		 * @private
+		 */
+		this._onAfterUpdates = [];
+
+
+		// breaks inheritance chains
+		// if( !values ) values = {};
+		if( !values.backgroundSide ) values.backgroundSide = 0; // FrontSide
+
+
+		if( values ) this.set( values );
+
+	}
+
+
+	///////////////
+	///  UPDATE
+	///////////////
+
+	update( ) {
+
+
+		// console.log( "Update Element", this.name , this.constructor.name );
+
+		const out = {};
+		for ( const component of this._components ) {
+
+			if( component._needsUpdate ) {
+
+				// console.log( '    ', component.id )
+				component.update( this, out );
+				component._needsUpdate = false;
+
+			}
+
+		}
+
+		this._transferToBackgroundMesh( out );
+		this._transferToFontMesh( out );
+
+		this._transferToBackgroundMaterial( out );
+		this._transferToFontMaterial( out );
+
+
+		// update children
+		for ( const child of this._children._uis ) {
+			child.update();
+		}
+
+	}
+
+	process() {
+
+		// process first time : Natural size
+		for ( const child of this._children._uis ) {
+			child.process();
+		}
+
+
+		// console.log( 'Process ', this.name );
+		for ( const component of this._components ) {
+
+			if( component._needsProcess ) {
+
+				// console.log( '    ', component.id );
+				component.process( this );
+				component._needsProcess = false;
+
+			}
+
+		}
+
+	}
+
+	render() {
+
+		// console.log( 'render ', this.name );
+		for ( let i = 0; i < this._components.length; i++ ) {
+			const component = this._components[ i ];
+			if( component._needsRender ) {
+				// console.log( '    ', component.id);
+				component.render( this );
+				component._needsRender = false;
+			}
+		}
+
+		// render all children
+		for ( const child of this._children._uis ) {
+			child.render();
+		}
+
+	}
+
+
+	/**
+	 *
+	 * @param {Options} options
+	 */
+	set( options ) {
+
+		// Retro compatibility, when not recommended way
+		// 2. < v7.x.x way
+		if( options.fontTexture ) {
+
+			console.warn( "ThreeMeshUI::set( {fontTexture} ) is deprecated. Please use fontLibrary to register font families and variants.")
+
+			if( options.fontFamily ) {
+
+				// Set from old way, check if that family is already registered
+				const fontName = options.fontFamily.pages ? options.fontFamily.info.face : options.fontFamily;
+
+				let fontFamily = font_FontLibrary.getFontFamily( fontName );
+
+				if ( !fontFamily ) {
+
+					const fontStyle = options.fontStyle ? options.fontStyle : 'normal';
+					// const fontWeight = options.fontWeight ? options.fontWeight : '400';
+					const fontWeight = options.fontWeight ? options.fontWeight : 'normal';
+
+					fontFamily = font_FontLibrary.addFontFamily( fontName )
+						.addVariant( fontWeight, fontStyle, options.fontFamily, options.fontTexture );
+
+				}
+
+				options['fontFamily'] = fontFamily;
+
+				delete options['fontTexture'];
+
+			}
+
+		}
+
+
+
+		for ( let prop of Object.keys( options ) ) {
+
+			const value = options[prop];
+
+			// 1. replace deprecated properties
+			switch ( prop ){
+				case 'contentDirection':
+					console.warn('ThreeMeshUI v7xx: property `contentDirection` is deprecated and has been renamed as `flexDirection`');
+					prop = 'flexDirection';
+					break;
+
+				case 'interLine':
+					console.warn('ThreeMeshUI v7xx: property `interLine` is deprecated and has been renamed as `lineHeight`');
+					prop = 'lineHeight';
+					break;
+
+				case 'content':
+					console.warn( 'ThreeMeshUI v7xx: property `content` is deprecated and has been renamed as `textContent`');
+					prop = 'textContent';
+					break;
+
+				case 'fontColor':
+					console.warn( 'ThreeMeshUI v7xx: property `fontColor` is deprecated and has been renamed as `color`');
+					prop = 'color';
+					break;
+
+				case 'hiddenOverflow':
+					console.warn( 'ThreeMeshUI v7xx: property `hiddenOverflow` is deprecated and has been renamed as `overflow`');
+					prop = 'overflow';
+					break;
+
+				case 'backgroundTexture':
+					console.warn( 'ThreeMeshUI v7xx: property `backgroundTexture` is deprecated and has been renamed as `backgroundImage`');
+					prop = 'backgroundImage';
+					break;
+
+				case 'alignContent':
+					console.warn( 'ThreeMeshUI v7xx: property `alignContent` is deprecated and has been renamed as `alignItems`');
+					prop = 'alignItems';
+					break;
+
+				case "borderTopColor":
+				case "borderBottomColor":
+				case "borderLeftColor":
+				case "borderRightColor":
+					prop = 'borderColor';
+					break;
+			}
+
+				switch ( prop ) {
+
+				// properties
+
+				// As textContent property might alter the hierarchy, do not wait until update
+				// 	case 'textContent' :
+
+					case 'fontSmooth':
+					case 'renderOrder':
+					case 'segments' :
+					case 'visible' :
+					case 'offset':
+						this[`_${prop}`].value = value;
+						break;
+
+					// styles properties
+					case 'flexDirection' :
+					case 'justifyContent' :
+					case 'alignItems' :
+					case 'color' :
+					case 'fontFamily' :
+					case 'fontOpacity' :
+					case 'fontKerning' :
+					case 'fontSize' :
+					case 'fontStyle' :
+					case 'fontWeight' :
+					case 'textAlign' :
+					case 'letterSpacing' :
+					case 'lineHeight' :
+					case 'whiteSpace':
+					case 'breakOn': // Not valid anymore?
+					case 'width' :
+					case 'height' :
+					case 'padding':
+					case 'margin' :
+					case 'backgroundColor' :
+					case 'backgroundOpacity' :
+					case 'backgroundImage' :
+					case 'backgroundSize' :
+					case 'borderColor' :
+					case 'borderOpacity' :
+					case 'borderRadius' :
+					case 'borderWidth':
+					case 'overflow' :
+					case 'order':
+					case 'boxSizing':
+					case 'position':
+					case 'verticalAlign':
+						if( this[`_${prop}`] ){
+							this[`_${prop}`].inline = value;
+						}
+						break;
+
+					case 'paddingTop':
+						this._padding.top = value;
+						break;
+					case 'paddingRight':
+						this._padding.right = value;
+						break;
+					case 'paddingBottom':
+						this._padding.bottom = value;
+						break;
+					case 'paddingLeft':
+						this._padding.left = value;
+						break;
+
+					case 'marginTop':
+						this._margin.top = value;
+						break;
+					case 'marginRight':
+						this._margin.right = value;
+						break;
+					case 'marginBottom':
+						this._margin.bottom = value;
+						break;
+					case 'marginLeft':
+						this._margin.left = value;
+						break;
+
+					case 'borderTopWidth':
+						this._borderWidth.top = value;
+						break;
+					case 'borderRightWidth':
+						this._borderWidth.right = value;
+						break;
+					case 'borderBottomWidth':
+						this._borderWidth.bottom = value;
+						break;
+					case 'borderLeftWidth':
+						this._borderWidth.left = value;
+						break;
+
+					case 'borderTopLeftRadius':
+						this._borderRadius.topLeft = value;
+						break;
+					case 'borderTopRightRadius':
+						this._borderRadius.topRight = value;
+						break;
+					case 'borderBottomRightRadius':
+						this._borderRadius.bottomRight = value;
+						break;
+					case 'borderBottomLeftRadius':
+						this._borderRadius.bottomLeft = value;
+						break;
+
+
+					// Back & Front linked properties
+					case 'side':
+					case 'castShadow':
+					case 'receiveShadow':
+						const upperCamelCaseProperty = prop.charAt(0).toUpperCase()+prop.substr(1);
+						this[`_background${upperCamelCaseProperty}`].value = value;
+						this[`_font${upperCamelCaseProperty}`].value = value;
+						break;
+
+
+						// Meshes & material properties
+					case 'fontSide':
+					case 'backgroundSide':
+					case 'fontCastShadow':
+					case 'backgroundCastShadow':
+					case 'fontReceiveShadow':
+					case 'backgroundReceiveShadow':
+					case 'fontMaterial':
+					case 'fontCustomDepthMaterial':
+						this[`_${prop}`].value = value;
+						break;
+
+
+					default:
+
+						console.log(prop)
+
+						if( this[ prop ] !== undefined ) {
+
+							console.log(`--		${prop} has setter`)
+
+							this[ prop ] = value
+						}else if( this[`_${prop}`] !== undefined ) {
+							this[`_${prop}`].value = value;
+						} else {
+							// error
+						}
+				}
+
+		}
+
+	}
+
+	get ( property ) {
+
+		switch ( property ) {
+
+			case 'overflow':
+			case 'width' :
+			case 'height' :
+				return this[`_${property}`].inline;
+		}
+
+	}
+
+	/**
+	 * Filters children in order to compute only one times children lists
+	 * @private
+	 */
+	_rebuildChildrenLists() {
+
+		//console.log( this.name, 'child added' );
+		this._children._needsUpdate = true;
+
+	}
+
+	/**
+	 * Try to retrieve parentUI after each structural change
+	 * @protected
+	 */
+	_rebuildParentUI = () => {
+
+		this._parent._needsUpdate = true;
+
+		// set elements as root
+		if ( this.parent && !this.parent.isUI ) {
+
+			UpdateManager.register( this );
+			this.activatePseudoState('root');
+
+		} else {
+
+			UpdateManager.remove( this );
+			this.deactivatePseudoState('root');
+		}
+
+
+	};
+
+	/**
+	 * When the user calls component.add, it registers for updates,
+	 * then call THREE.Object3D.add.
+	 */
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) {
+
+		let addedUIChildren = false;
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			super.add( arguments[ i ] );
+
+			if( arguments[i].isUI ) {
+				addedUIChildren = true;
+			}
+
+		}
+
+		if( addedUIChildren ) this._rebuildChildrenLists();
+
+		return this;
+
+	}
+
+
+	/**
+	 * When the user calls component.remove, it registers for updates,
+	 * then call THREE.Object3D.remove.
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	remove( object ) {
+
+		for ( const id of Object.keys( arguments ) ) {
+
+			// An inline component relies on its parent for positioning
+			if ( arguments[ id ].isInline ) this.update( null, true );
+
+		}
+
+		super.remove( ...arguments );
+
+		this._rebuildChildrenLists();
+
+		return this;
+
+	}
+
+	/**
+	 *
+	 * @return {Object3D}
+	 */
+	clear() {
+
+		this.removeFromParent();
+
+		this.traverse( ( obj ) => {
+
+			if ( obj.material ) obj.material.dispose();
+			if ( obj.geometry ) obj.geometry.dispose();
+
+		} );
+
+		super.clear();
+
+		// remove properties
+		this._backgroundMesh = null;
+		this._backgroundMaterial = null;
+		this._backgroundMaterialMediation = null;
+		this._backgroundMeshMediation = null;
+
+		this._children.dispose();
+		this._children = null;
+
+		this._parent.dispose();
+		this._parent = null;
+
+		this._backgroundSide = null;
+		this._backgroundAlphaTest = null;
+		this._visible = null;
+		this._backgroundCastShadow = null;
+		this._backgroundReceiveShadow = null;
+		this._renderOrder = null;
+		this._segments = null;
+		this._bounds = null;
+
+		// styles properties
+		this._boxSizing = null;
+		this._padding = null;
+		this._margin = null;
+		this._position = null;
+		this._flexDirection = null;
+		this._justifyContent = null;
+		this._alignItems = null;
+		this._display = null;
+		this._backgroundColor = null;
+		this._backgroundOpacity = null;
+		this._backgroundSize = null;
+		this._fontOpacity = null;
+		this._color = null;
+		this._whiteSpace = null;
+		this._fontFamily = null;
+		this._fontStyle = null;
+		this._fontWeight = null;
+		this._lineHeight = null;
+		this._fontKerning = null;
+		this._letterSpacing = null;
+		this._overflow = null;
+		this._textAlign = null;
+
+		this._font = null;
+		this._lineBreak = null;
+		this._layouter = null;
+
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	get textContent() {
+
+		this._textContent.process( this );
+
+		return this._textContent._value;
+
+	}
+
+	/***********************************************************************************************************************
+	 * TO MATERIAL HOLDER
+	 **********************************************************************************************************************/
+
+	/**
+	 *
+	 * @returns {Material|ShaderMaterial}
+	 */
+	get backgroundMaterial() { return this._backgroundMaterial; }
+
+	/**
+	 *
+	 * @param {Material|ShaderMaterial} material
+	 */
+	set backgroundMaterial( material ) {
+
+		this._backgroundMaterial = material;
+
+		// Update the fontMaterialProperties that need to be transferred to
+		this._backgroundMaterialMediation = { ...material.constructor.mediation };
+
+		// transfer all the properties to material
+		this._transferToBackgroundMaterial();
+
+		if ( this._backgroundMesh ) {
+
+			this._backgroundMesh.material = this._backgroundMaterial;
+			uniformOrUserDataTransformer( material, 'frameSize', this._backgroundMesh.scale );
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @param {Material|null} material
+	 */
+	set backgroundCustomDepthMaterial( material ) {
+
+		this._backgroundCustomDepthMaterial = material;
+
+		this._transferToBackgroundMaterial();
+
+		if ( this._backgroundMesh ) {
+			// transfer to the main if isset
+			this._backgroundMesh.customDepthMaterial = this._backgroundCustomDepthMaterial;
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @returns {Material|null}
+	 */
+	get backgroundCustomDepthMaterial() { return this._backgroundCustomDepthMaterial; }
+
+	/**
+	 * According to the list of materialProperties
+	 * some properties are sent to material
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToBackgroundMaterial( options = null ) {
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+		}
+
+		Mediator.mediate( this, this._backgroundMaterial, options, this._backgroundMaterialMediation, this._backgroundCustomDepthMaterial );
+
+	}
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set backgroundSide( value ) {
+
+		this._backgroundSide.value = value;
+
+		if ( this._backgroundMaterial ) this._backgroundMaterial.side = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get backgroundSide() { return this._backgroundSide.value; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set backgroundAlphaTest ( value ) {
+
+		this._backgroundAlphaTest.value = value;
+
+		if( this._backgroundMaterial ) this._backgroundMaterial.alphaTest = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get backgroundAlphaTest () { return this._backgroundAlphaTest.value; }
+
+	/** Font Material ----------------------------------------------------------*/
+
+	/**
+	 *
+	 * @returns {Material|ShaderMaterial}
+	 */
+	// get fontMaterial() { return this._fontMaterial__; }
+	get fontMaterial() { return this._fontMaterial.value; }
+
+	/**
+	 *
+	 * @param {Material|ShaderMaterial} material
+	 */
+	set fontMaterial( material ) {
+
+		this._fontMaterial.value = material;
+
+	}
+
+	/**
+	 *
+	 * @param {Material|null} material
+	 */
+	set fontCustomDepthMaterial( material ) {
+
+		this._fontCustomDepthMaterial.value = material;
+
+	}
+
+	/**
+	 *
+	 * @returns {Material|null}
+	 */
+	get fontCustomDepthMaterial() { return this._fontCustomDepthMaterial.value; }
+
+	/**
+	 * According to the list of materialProperties
+	 * some properties are sent to material
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToFontMaterial( options = null ) {
+
+		const fontMat = this._fontMaterial.value;
+		if( !fontMat ) return;
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+		}
+
+		Mediator.mediate( this, fontMat, options, this._fontMaterial._mediation, this._fontCustomDepthMaterial.value );
+
+	}
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set fontSide( value ) {
+
+		this._fontSide.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get fontSide() { return this._fontSide.value; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set fontAlphaTest ( value ) {
+
+		this._fontAlphaTest.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get fontAlphaTest () { return this._fontAlphaTest.value; }
+
+	/*********************************************************************************************************************
+	 * MESH MEDIATION
+	 ********************************************************************************************************************/
+
+	/**
+	 * According to the list of meshProperties
+	 * some properties are sent to mesh
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToBackgroundMesh( options = null ) {
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+
+		}
+
+		Mediator.mediate( this, this._backgroundMesh, options, this._backgroundMeshMediation );
+
+	}
+
+	/**
+	 * @internal
+	 * @param {Mesh|Array.<Mesh>|null} mesh
+	 */
+	setBackgroundMesh( mesh ) {
+
+		if( this._backgroundMesh ) {
+
+			this.remove( this._backgroundMesh );
+			this.unbindBackgroundMeshProperties();
+
+		}
+
+		this._backgroundMesh = mesh;
+
+		if ( this._backgroundMesh ) {
+
+			this.bindBackgroundMeshProperties();
+
+			if( this._backgroundCustomDepthMaterial ) {
+				this._backgroundMesh.customDepthMaterial = this._backgroundCustomDepthMaterial;
+			}
+
+			if( this._backgroundMaterial ) {
+				uniformOrUserDataTransformer( this._backgroundMaterial, 'frameSize', this._backgroundMesh.scale );
+			}
+
+			this._transferToBackgroundMesh();
+
+			this.add( this._backgroundMesh );
+
+		}
+
+	}
+
+	/**
+	 *
+	 */
+	bindBackgroundMeshProperties () { }
+
+	/**
+	 *
+	 */
+	unbindBackgroundMeshProperties () { }
+
+
+	activatePseudoState ( state ) {
+
+	}
+
+	deactivatePseudoState ( state ) {
+
+	}
+
+	togglePseudoState ( state ) {
+
+	}
+
+
+	hasPseudoState( state ) {
+		return false;
+	}
+
+	set borderRadiusMediation ( value ) {
+		this._borderRadius.mediation = value;
+	}
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set backgroundCastShadow( value ) {
+
+		if( this._backgroundCastShadow ) this._backgroundCastShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get backgroundCastShadow() { return this._backgroundCastShadow; }
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set backgroundReceiveShadow( value ) {
+
+		if( this._backgroundReceiveShadow ) this._backgroundReceiveShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get backgroundReceiveShadow() { return this._backgroundReceiveShadow; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set renderOrder( value ) {
+
+		if( this._renderOrder ) this._renderOrder.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get renderOrder() { return this._renderOrder.value; }
+
+	/** Font Mesh --------------------------------------------------------------*/
+
+	/**
+	 * According to the list of meshProperties
+	 * some properties are sent to mesh
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToFontMesh( options = null ) {
+
+		if( !this._fontMesh ) return;
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+		}
+
+		Mediator.mediate( this, this._fontMesh, options, this._fontMeshMediation );
+
+	}
+
+	/**
+	 * @internal
+	 * @param {Mesh|Array.<Mesh>|null} mesh
+	 */
+	setFontMesh( mesh ) {
+
+		if( this._fontMesh ) {
+
+			this.remove( this._fontMesh );
+
+			if ( this._fontMesh.material ) this._fontMesh.material.dispose?.();
+			if ( this._fontMesh.geometry ) this._fontMesh.geometry.dispose?.();
+
+			this._fontMesh = null;
+			// deepDelete( this._fontMesh );
+
+			this.unbindFontMeshProperties();
+
+		}
+
+		this._fontMesh = mesh;
+
+		if ( this._fontMesh ) {
+
+			this._fontMesh.raycast = () => {};
+
+			this.bindFontMeshProperties();
+
+			this._transferToFontMaterial();
+			this._transferToFontMesh();
+
+			this.add( this._fontMesh );
+
+		}
+
+	}
+
+	/**
+	 *
+	 */
+	bindFontMeshProperties () { }
+
+	/**
+	 *
+	 */
+	unbindFontMeshProperties () { }
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set fontCastShadow( value ) {
+
+		if( this._fontCastShadow ) this._fontCastShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get fontCastShadow() { return this._fontCastShadow; }
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set fontReceiveShadow( value ) {
+
+		if( this._fontReceiveShadow ) this._fontReceiveShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get fontReceiveShadow() { return this._fontReceiveShadow; }
+
+	/***********************************************************************************************************************
+	 * GEOMETRY
+	 **********************************************************************************************************************/
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set segments (v) {
+
+		this._segments.value = v;
+
+		// @TODO : Geometry Update
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get segments () { return this._segments.value; }
+
+
+	/***********************************************************************************************************************
+	 * HOOKS & ALTERS
+	 **********************************************************************************************************************/
+
+	/**
+	 *
+	 * @param {Function} func
+	 */
+	set onAfterUpdate( func ) {
+
+		console.warn( 'ThreeMeshUI v7xx : `onAfterUpdate()` property has been deprecated, please rely on `addAfterUpdate` instead.' );
+		this.addAfterUpdate( func );
+
+	}
+
+	/**
+	 *
+	 * @param {Function} func
+	 */
+	addAfterUpdate( func ) {
+
+		this._onAfterUpdates.push( func );
+
+	}
+
+	/**
+	 *
+	 * @param {Function} func
+	 */
+	removeAfterUpdate( func ) {
+
+		const index = this._onAfterUpdates.indexOf( func );
+		if ( index !== -1 ) {
+
+			this._onAfterUpdates.splice( index, 1 );
+
+		}
+
+	}
+
+	/**
+	 * @todo: afterUpdate not called anymore
+	 */
+	performAfterUpdate() {
+
+		for ( let i = 0; i < this._onAfterUpdates.length; i++ ) {
+
+			this._onAfterUpdates[ i ]();
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @param {string} name
+	 * @param {BaseProperty} instance
+	 * @returns {void}
+	 */
+	appendProperty( name, instance ) {
+
+		this[`_${name}`] = instance;
+		this._components.push( instance );
+
+	}
+
+	/**
+	 *
+	 * @param {string} name
+	 * @param {BaseProperty} instance
+	 * @returns {BaseProperty}
+	 */
+	replaceProperty( name, instance ) {
+
+		const oldProperty = this[`_${name}`];
+
+		const index = this._components.indexOf( oldProperty );
+
+		this._components[index] = this[`_${name}`] = instance;
+		instance.needsUpdate = true;
+
+		return oldProperty;
+
+	}
+
+}
+
+/**
+ * @typedef Properties
+ * @type {Object.<string,Function>}
+ */
+
+/**
+ * @typedef Options
+ * @type {DocumentedOptions & Object.<string,any>}
+ */
+
+/**
+ *
+ * @typedef {Object} DocumentedOptions
+ *
+ * @property [options.name] {string}
+ * @property [options.flexDirection] {"row"|"row-reverse"|"column"|"column-reverse"}
+ * @property [options.justifyContent] {"start"|"center"|"end"|"space-around"|"space-between"|"space-evenly"}
+ * @property [options.alignItems] {"start"|"center"|"end"|"stretch"}
+ * @property [options.overflow] {"visible"|"hidden"}
+ * @property [options.fontKerning] {"normal"|"none"}
+ * @property [options.segments] {number}
+ * @property [options.fontFamily] {FontFamily|string}
+ * @property [options.fontStyle] {"normal"|"italic"}
+ * @property [options.fontWeight] {"light"|"normal"|"bold"|"bolder"|100|200|300|400|500|600|700|800|900}
+ *
+ * @property [options.color]{Color|number|string} The font color
+ *
+ * @property [options.backgroundColor]{Color|number|string} The background color
+ * @property [options.backgroundOpacity] {number}
+ * @property [options.backgroundSize] {"cover"|"contain"|"stretch"}
+ * @property [options.backgroundImage] {Texture|string}
+ *
+ *
+ * @property [options.borderRadius] {Vector4|Array.<number>|number|string}
+ * @property [options.borderWidth] {Vector4|Array.<number>|number|string}
+ * @property [options.borderColor] {Color|number|string}
+ *
+ * @property [options.boxSizing] {"content-box"|"border-box"}
+ * @property [options.width] {number|string|"100%"|"auto"}
+ * @property [options.height] {number|string|"100%"|"auto"}
+ * @property [options.padding] {Vector4|Array.<number>|number|string}
+ * @property [options.margin] {Vector4|Array.<number>|number|string}
+ *
+ * @property [options.textAlign] {"left"|"right"|"center"|"justify"|"justify-left"|"justify-right"}
+ * @property [options.visible] {boolean}
+ * @property [options.letterSpacing] {number}
+ *
+ * @property [options.whiteSpace] {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"}
+ * @property [options.fontTexture] {Texture|string} @deprecated
+ * @property [options.textContent] {string}
+ *
+ * @property [options.verticalAlign] {"baseline","super","sub","inherit"}
+ *
+ *
+ */
+
+;// CONCATENATED MODULE: ./src/components/core/UpdateManager.js
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+/**
+ * Job:
+ * - recording components required updates
+ * - trigger those updates when 'update' is called
+ *
+ * This module is a bit special. It is, with FontLibrary, one of the only modules in the 'component'
+ * directory not to be used in component composition (Object.assign).
+ *
+ * When MeshUIComponent is instanciated, it calls UpdateManager.register().
+ *
+ * Then when MeshUIComponent receives new attributes, it doesn't update the component right away.
+ * Instead, it calls UpdateManager.requestUpdate(), so that the component is updated when the user
+ * decides it (usually in the render loop).
+ *
+ * This is best for performance, because when a UI is created, thousands of componants can
+ * potentially be instantiated. If they called updates function on their ancestors right away,
+ * a given component could be updated thousands of times in one frame, which is very ineficient.
+ *
+ * Instead, redundant update request are moot, the component will update once when the use calls
+ * update() in their render loop.
+ */
+class UpdateManager {
+
+
+	static register( component ) {
+
+		if ( !this.elements.includes( component ) ) {
+
+				this.elements.push( component );
+
+		}
+
+	}
+
+	static remove( component ) {
+
+		const index = this.elements.indexOf( component );
+		if ( index !== -1 ) {
+
+			this.elements.splice( index, 1 );
+
+		}
+
+	}
+
+
+	static update() {
+
+		for ( const UIElement of this.elements ) {
+			UIElement.update();
+
+			UIElement.process(); // Natural process
+			UIElement.process(); // Actual process (optional) - For auto size and stretch
+
+			UIElement.render();
+		}
+
+	}
+
+}
+
+/**
+ * @internal
+ * @type {Array.<MeshUIBaseElement>}
+ */
+UpdateManager.elements = [];
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-border.pars.vertex.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const frame_border_pars_vertex_glsl_program = /* glsl */`
+
+// FrameBorder vertex pars
+attribute vec2 uvB;
+varying vec2 vUvB;
+
+`;
+
+/* harmony default export */ const frame_border_pars_vertex_glsl = (frame_border_pars_vertex_glsl_program);
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-border.vertex.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const frame_border_vertex_glsl_program = /* glsl */`
+
+	// FrameBorder vertex shader
+	vUvB = uvB;
+
+`;
+
+/* harmony default export */ const frame_border_vertex_glsl = (frame_border_vertex_glsl_program);
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-border.pars.fragment.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const frame_border_pars_fragment_glsl_program = /* glsl */`
+
+// borders sequences are : x:TOP, y:RIGHT, z:BOTTOM, w:LEFT
+uniform vec4 borderWidth;
+uniform vec3 borderColor;
+uniform float borderOpacity;
+uniform vec4 borderRadius;
+
+uniform vec2 cornerTL;
+uniform vec2 cornerTR;
+uniform vec2 cornerBR;
+uniform vec2 cornerBL;
+
+varying vec2 vUvB;
+
+float getEllipticFactor( vec2 uv, vec2 center, float radiusX, float radiusY )
+{
+
+		float edx = uv.x - center.x;
+		float edy = uv.y - center.y;
+
+		float ddx = (edx * edx) / (radiusX * radiusX);
+		float ddy = (edy * edy) / (radiusY * radiusY);
+
+		return ddx + ddy;
+
+}
+
+`;
+
+/* harmony default export */ const frame_border_pars_fragment_glsl = (frame_border_pars_fragment_glsl_program);
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-border.fragment.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const frame_border_fragment_glsl_program = /* glsl */`
+
+vec4 borderColor = vec4( borderColor, borderOpacity );
+
+// This could be tweak to produce more smoothing
+float mult = 1.0;
+
+// Step 1 ----------------------------------------------
+// Draw the four borders ( top - right - bottom - left )
+// Without worrying about radiuses ( Straight boorders )
+
+// Top
+float topBorderUVy = 1.0 - borderWidth.x;
+if( borderWidth.x > 0.0 && vUvB.y > topBorderUVy )
+{
+
+	float w = fwidth( 1.0 - vUvB.y ) * mult;
+	float step = smoothstep( topBorderUVy , topBorderUVy + w , vUvB.y );
+	diffuseColor = mix( diffuseColor, borderColor, step );
+
+}
+
+// Left
+float leftBorderUVx = borderWidth.w;
+if( borderWidth.w > 0.0 && vUvB.x < leftBorderUVx )
+{
+
+	float w = fwidth( vUvB.x ) * mult ;
+	float step = smoothstep( leftBorderUVx , leftBorderUVx - w , vUvB.x );
+	diffuseColor = mix( diffuseColor, borderColor, step );
+
+}
+
+// Bottom
+float bottomBorderUVy = borderWidth.z;
+if( borderWidth.z > 0.0 && vUvB.y < bottomBorderUVy )
+{
+	float w = fwidth( vUvB.y ) * mult;
+	float step = smoothstep( bottomBorderUVy , bottomBorderUVy - w , vUvB.y );
+	diffuseColor = mix( diffuseColor, borderColor, step );
+}
+
+// Right
+float rightBorderUVx = 1.0 - borderWidth.y;
+if( borderWidth.y > 0.0 && vUvB.x > rightBorderUVx )
+{
+	float w = fwidth( 1.0 - vUvB.x ) * mult;
+	float step = smoothstep( rightBorderUVx , rightBorderUVx + w , vUvB.x );
+	diffuseColor = mix( diffuseColor, borderColor, step );
+}
+
+
+// Step 2 ----------------------------------------------
+// Process each corners ( topLeft, topRight, bottomRight, bottomLeft )
+// To transparentize outside radiuses
+// To draw ellipse border on the corner
+
+
+// Top Left corner
+if( vUvB.x < cornerTL.x && vUvB.y > cornerTL.y ) {
+
+		// Only draw border if width is set
+		if( borderWidth.w + borderWidth.x > 0.0 ){
+
+			float borderFactor = getEllipticFactor( vUvB, cornerTL, cornerTL.x - borderWidth.w,  ( 1.0 - cornerTL.y ) - borderWidth.x );
+			float step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );
+			diffuseColor = mix( diffuseColor, borderColor, step );
+
+		}
+
+		// Then then radius
+		float radiusFactor = getEllipticFactor( vUvB, cornerTL, cornerTL.x, 1.0 - cornerTL.y );
+		float alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );
+		diffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );
+
+}
+// Bottom Left
+if( vUvB.x < cornerBL.x && vUvB.y < cornerBL.y ) {
+
+		if( borderWidth.w + borderWidth.z > 0.0 ){
+
+			float borderFactor = getEllipticFactor( vUvB, cornerBL, cornerBL.x - borderWidth.w,  cornerBL.y - borderWidth.z );
+			float step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );
+			diffuseColor = mix( diffuseColor, borderColor, step );
+
+		}
+
+
+		float radiusFactor = getEllipticFactor( vUvB, cornerBL, cornerBL.x, cornerBL.y );
+		float alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );
+		diffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );
+
+}
+// Top Right
+if( vUvB.x > cornerTR.x && vUvB.y > cornerTR.y ) {
+
+		if( borderWidth.y + borderWidth.x > 0.0 ){
+
+			float borderFactor = getEllipticFactor( vUvB, cornerTR, ( 1.0 - cornerTR.x ) - borderWidth.y,  ( 1.0 - cornerTR.y ) - borderWidth.x );
+			float step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );
+			diffuseColor = mix( diffuseColor, borderColor, step );
+
+		}
+
+		float radiusFactor = getEllipticFactor( vUvB, cornerTR, 1.0 - cornerTR.x, 1.0 - cornerTR.y );
+		float alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );
+		diffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );
+
+}
+// Bottom Right
+if( vUvB.x > cornerBR.x && vUvB.y < cornerBR.y ) {
+
+		if( borderWidth.y + borderWidth.z > 0.0 ){
+
+			float borderFactor = getEllipticFactor( vUvB, cornerBR, ( 1.0 - cornerBR.x ) - borderWidth.y,  cornerBR.y - borderWidth.z );
+			float step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );
+			diffuseColor = mix( diffuseColor, borderColor, step );
+
+		}
+
+		float radiusFactor = getEllipticFactor( vUvB, cornerBR, 1.0 - cornerBR.x, cornerBR.y );
+		float alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );
+		diffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );
+
+}
+
+`;
+
+/* harmony default export */ const frame_border_fragment_glsl = (frame_border_fragment_glsl_program);
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-common.pars.fragment.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const frame_common_pars_fragment_glsl_program = /* glsl */`
+
+// To be removed - required for both border and background
+uniform vec3 frameSize;
+uniform vec2 textureSize;
+
+`;
+
+/* harmony default export */ const frame_common_pars_fragment_glsl = (frame_common_pars_fragment_glsl_program);
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-background.pars.fragment.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const frame_background_pars_fragment_glsl_program = /* glsl */`
+
+#ifdef USE_MAP
+
+vec4 sampleTexture() {
+
+	vec2 uv = vUv;
+
+	// default stretch
+	#if BACKGROUND_MAPPING != 0
+
+	float textureRatio = textureSize.x / textureSize.y;
+	float panelRatio = frameSize.x / frameSize.y;
+	float ratio = panelRatio / textureRatio;
+	float ratio2 = textureRatio / panelRatio;
+
+		// contain
+		#if BACKGROUND_MAPPING == 1
+		if ( textureRatio < panelRatio ) { // repeat on X
+			float newX = uv.x * ratio;
+			newX += 0.5 - 0.5 * ratio;
+			uv.x = newX;
+		} else { // repeat on Y
+			float newY = uv.y * ratio2;
+			newY += 0.5 - 0.5 * ratio2;
+			uv.y = newY;
+		}
+		#else
+		// cover
+		if ( textureRatio < panelRatio ) { // stretch on Y
+			float newY = uv.y * ratio2;
+			newY += 0.5 - 0.5 * ratio2;
+			uv.y = newY;
+		} else { // stretch on X
+			float newX = uv.x * ratio;
+			newX += 0.5 - 0.5 * ratio;
+			uv.x = newX;
+		}
+
+		#endif
+
+	#endif
+
+	return texture2D( map, uv );
+
+}
+#endif
+`;
+
+/* harmony default export */ const frame_background_pars_fragment_glsl = (frame_background_pars_fragment_glsl_program);
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-background.fragment.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const frame_background_fragment_glsl_program = /* glsl */`
+#ifdef USE_MAP
+
+	vec4 textureSample = sampleTexture();
+	diffuseColor *= textureSample;
+
+#endif
+`;
+
+/* harmony default export */ const frame_background_fragment_glsl = (frame_background_fragment_glsl_program);
+
+;// CONCATENATED MODULE: ./src/renderers/shaders/ShaderChunkUI.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* eslint-disable camelcase */
+
+/**
+ * @typedef {Object} ChunksUI
+ * @property msdf_alphaglyph_vertex {string}
+ * @property frame_border_fragment {string}
+ * @property frame_background_pars_fragment {string}
+ * @property frame_common_pars {string}
+ * @property msdf_alphaglyph_pars_vertex {string}
+ * @property frame_border_pars_fragment {string}
+ * @property msdf_offset_vertex {string}
+ * @property frame_border_pars_vertex {string}
+ * @property msdf_alphaglyph_pars_fragment {string}
+ * @property frame_border_vertex {string}
+ * @property frame_background_fragment {string}
+ * @property msdf_alphaglyph_fragment {string}
+ */
+
+
+const ShaderChunkUI = {
+	msdfAlphaglyphParsVertexGlsl: msdf_alphaglyph_pars_vertex_glsl,
+	msdfAlphaglyphVertexGlsl: msdf_alphaglyph_vertex_glsl,
+	msdfOffsetglyphVertexGlsl: msdf_offsetglyph_vertex_glsl,
+	msdfAlphaglyphParsFragmentGlsl: msdf_alphaglyph_pars_fragment_glsl,
+	msdfAlphaglyphFragmentGlsl: msdf_alphaglyph_fragment_glsl,
+	frameBorderParsVertexGlsl: frame_border_pars_vertex_glsl,
+	frameBorderVertexGlsl: frame_border_vertex_glsl,
+	frameCommonParsFragmentGlsl: frame_common_pars_fragment_glsl,
+	frameBorderParsFragmentGlsl: frame_border_pars_fragment_glsl,
+	frameBorderFragmentGlsl: frame_border_fragment_glsl,
+	frameBackgroundParsFragmentGlsl: frame_background_pars_fragment_glsl,
+	frameBackgroundFragmentGlsl: frame_background_fragment_glsl,
+};
+/* eslint-enable camelcase */
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderLib/framematerial.glsl.js
+
+
+
+
+
+
+
+
+const framematerial_glsl_vertexShader = /* glsl */`
+// Would be automatic on three materials and from USE_UV
+#ifdef USE_MAP
+varying vec2 vUv;
+#endif
+
+${frame_border_pars_vertex_glsl}
+
+#include <clipping_planes_pars_vertex>
+
+void main() {
+
+	#ifdef USE_MAP
+	vUv = uv;
+	#endif
+
+	${frame_border_vertex_glsl}
+
+	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+	gl_Position = projectionMatrix * mvPosition;
+
+	#include <clipping_planes_vertex>
+
+}
+`
+
+const framematerial_glsl_fragmentShader = /* glsl */`
+
+// Basic
+uniform vec3 diffuse;
+uniform float opacity;
+
+#ifdef USE_ALPHATEST
+	uniform float alphaTest;
+#endif
+
+${frame_common_pars_fragment_glsl}
+
+${frame_border_pars_fragment_glsl}
+
+
+#ifdef USE_MAP
+varying vec2 vUv;
+uniform sampler2D map;
+#endif
+
+${frame_background_pars_fragment_glsl}
+
+#include <clipping_planes_pars_fragment>
+
+void main() {
+
+	vec4 diffuseColor = vec4( diffuse, opacity );
+
+	// map
+	${frame_background_fragment_glsl}
+
+	${frame_border_fragment_glsl}
+
+	#ifdef USE_ALPHATEST
+
+	if ( diffuseColor.a < alphaTest ) discard;
+
+	#endif
+
+	// output
+	gl_FragColor = diffuseColor;
+
+
+	#include <clipping_planes_fragment>
+}
+`
+
+;// CONCATENATED MODULE: ./src/frame/utils/FrameMaterialUtils.js
+
+
+//JSDoc related import
+/* eslint-disable no-unused-vars */
+
+
+
+
+
+
+
+
+
+/* eslint-enable no-unused-vars */
+
+
+class FrameMaterialUtils {
+
+
+
+	/**
+	 *
+	 * @returns {Object<{m: string, t?: (function((Material|ShaderMaterial), string, *): void)}>}
+	 */
+	static get mediation() {
+
+		return _mediationDefinitions;
+
+	}
+
+
+	/**
+	 * Alter a material options with required fontMaterial options and or default values
+	 * @param {Object.<string,any>} materialOptions
+	 */
+	static ensureMaterialOptions( materialOptions ) {
+		materialOptions.transparent = true;
+		materialOptions.alphaTest = materialOptions.alphaTest || 0.02;
+	}
+
+	/**
+	 * As three-mesh-ui FontMaterial relies on webgl preprocessors,
+	 * lets force the material to have a proper defines object
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 */
+	static ensureDefines( threeMaterial ) {
+		if ( !threeMaterial.defines ) {
+			threeMaterial.defines = {};
+		}
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 * @param {Object.<string,any>} materialOptions
+	 */
+	static ensureUserData( threeMaterial, materialOptions ) {
+		threeMaterial.userData.borderColor = { value: null };
+		threeMaterial.userData.borderRadius = { value: new external_THREE_namespaceObject.Vector4(0,0,0,0) };
+		// Store corners based on borderRadiuses
+		threeMaterial.userData.cornerTL = { value : new external_THREE_namespaceObject.Vector2(0,1) };
+		threeMaterial.userData.cornerTR = { value : new external_THREE_namespaceObject.Vector2(1,1) };
+		threeMaterial.userData.cornerBR = { value : new external_THREE_namespaceObject.Vector2(1,0) };
+		threeMaterial.userData.cornerBL = { value : new external_THREE_namespaceObject.Vector2(0,0) };
+
+		threeMaterial.userData.borderWidth = { value: new external_THREE_namespaceObject.Vector4(0,0,0,0) };
+		threeMaterial.userData.borderOpacity = { value: null };
+		threeMaterial.userData.frameSize = { value: new external_THREE_namespaceObject.Vector3( 1, 1, 1 ) };
+		threeMaterial.userData.textureSize = { value: new external_THREE_namespaceObject.Vector2( 1, 1 ) };
+
+	}
+	/* eslint-enable no-unused-vars */
+
+	/**
+	 *
+	 * @param {any} shader
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 */
+	static bindUniformsWithUserData( shader, threeMaterial ) {
+
+		shader.uniforms.borderColor = threeMaterial.userData.borderColor;
+		// Border radiuses and corners
+		shader.uniforms.borderRadius = threeMaterial.userData.borderRadius;
+		shader.uniforms.cornerTL = threeMaterial.userData.cornerTL;
+		shader.uniforms.cornerTR = threeMaterial.userData.cornerTR;
+		shader.uniforms.cornerBR = threeMaterial.userData.cornerBR;
+		shader.uniforms.cornerBL = threeMaterial.userData.cornerBL;
+
+		shader.uniforms.borderWidth = threeMaterial.userData.borderWidth;
+		shader.uniforms.borderOpacity = threeMaterial.userData.borderOpacity;
+		shader.uniforms.frameSize = threeMaterial.userData.frameSize;
+		shader.uniforms.textureSize = threeMaterial.userData.textureSize;
+	}
+
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectShaderChunks( shader ) {
+		FrameMaterialUtils.injectVertexShaderChunks( shader );
+		FrameMaterialUtils.injectFragmentShaderChunks( shader );
+	}
+
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectVertexShaderChunks( shader ) {
+		shader.vertexShader = shader.vertexShader.replace(
+			'#include <uv_pars_vertex>',
+			'#include <uv_pars_vertex>\n' + frame_border_pars_vertex_glsl
+		);
+
+		// vertex chunks
+		shader.vertexShader = shader.vertexShader.replace(
+			'#include <uv_vertex>',
+			'#include <uv_vertex>\n' + frame_border_vertex_glsl
+		)
+
+	}
+
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectFragmentShaderChunks( shader ) {
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <map_pars_fragment>',
+			'#include <map_pars_fragment>\n' + frame_background_pars_fragment_glsl
+		)
+
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <map_pars_fragment>',
+			'#include <map_pars_fragment>\n' + frame_border_pars_fragment_glsl
+		)
+
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <map_pars_fragment>',
+			'#include <map_pars_fragment>\n' + frame_common_pars_fragment_glsl
+		)
+
+		// fragment chunks
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <map_fragment>',
+			frame_background_fragment_glsl
+		)
+
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <alphamap_fragment>',
+			frame_border_fragment_glsl+'\n#include <alphamap_fragment>'
+		)
+
+	}
+
+}
+
+/**
+ *
+ * @param target
+ * @param property
+ * @param value
+ * @private
+ */
+const _backgroundSizeTransformer = function( target, property, value ) {
+
+	value = ['stretch','contain','cover'].indexOf(value);
+	asPreprocessorValueTransformer(target, 'BACKGROUND_MAPPING', value);
+
+}
+
+// /**
+//  *
+//  * @type {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+//  */
+// const _mediationDefinitions = {
+// 	alphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+// 	backgroundTexture: { m: 'map' },
+// 	backgroundColor: { m: 'color' },
+// 	backgroundOpacity: { m:'opacity' },
+// 	backgroundSize: { m: 'u_backgroundMapping', t: _backgroundSizeTransformer },
+// 	_borderWidthComponent: { m: 'borderWidth', t: _linkComponentOutput },
+// 	borderColor: { m: 'borderColor', t: uniformOrUserDataTransformer },
+// 	_borderRadiusComponent: { m: 'computedCorners', t: _linkCornersOutput },
+// 	borderOpacity: { m: 'borderOpacity', t: uniformOrUserDataTransformer },
+// 	size: { m: 'frameSize', t: uniformOrUserDataTransformer },
+// 	tSize: { m: 'textureSize', t: uniformOrUserDataTransformer }
+// }
+
+
+/**
+ * 7xx
+ * @type {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+ */
+const _mediationDefinitions = {
+	clippingPlanes : {m: 'clippingPlanes'},
+	backgroundAlphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+	backgroundSide: { m: 'side' },
+	// backgroundTexture: { m: 'map' },
+	backgroundImage: { m: 'map'},
+	backgroundColor: { m: 'color' },
+	backgroundOpacity: { m:'opacity' },
+	backgroundSize: { m: 'computedBackgroundSize', t: _backgroundSizeTransformer },
+	borderWidth: { m: 'borderWidth', t: uniformOrUserDataTransformer },
+	borderColor: { m: 'borderColor', t: uniformOrUserDataTransformer },
+	cornerTL : { m: 'cornerTL', t: uniformOrUserDataTransformer },
+	cornerTR : { m: 'cornerTR', t: uniformOrUserDataTransformer },
+	cornerBR : { m: 'cornerBR', t: uniformOrUserDataTransformer },
+	cornerBL : { m: 'cornerBL', t: uniformOrUserDataTransformer },
+	borderOpacity: { m: 'borderOpacity', t: uniformOrUserDataTransformer },
+	size: { m: 'frameSize', t: uniformOrUserDataTransformer },
+	tSize: { m: 'textureSize', t: uniformOrUserDataTransformer }
+}
+
+;// CONCATENATED MODULE: ./src/frame/materials/FrameMaterial.js
+
+
+
+
+class FrameMaterial extends external_THREE_namespaceObject.ShaderMaterial {
+
+
+	/**
+	 * This static method is mandatory for extending ThreeMeshUI.FrameMaterial
+	 * It will provide a transfer description for properties from ThreeMeshUI.Text to THREE.Material
+	 * @see {FrameMaterialUtils.mediation}
+	 * @returns {Object.<{m:string, t?:(frameMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+	 */
+	static get mediation() {
+
+		return FrameMaterialUtils.mediation;
+
+	}
+
+	constructor() {
+		super ( {
+			uniforms: {
+				alphaTest: { value: 0.02 },
+				map: { value: null },
+				diffuse: { value: new external_THREE_namespaceObject.Color(0xffffff) },
+				opacity: { value: 1.0 },
+				borderColor: { value: new external_THREE_namespaceObject.Color(0x000000) },
+				borderOpacity: { value: 0 },
+				borderRadius: { value: new external_THREE_namespaceObject.Vector4(0,0,0,0) },
+				// Corners for customized radius not all starting on center [0.5,0.5];
+				// Corners will be generated from borderRadiuses
+				cornerTL: { value : new external_THREE_namespaceObject.Vector2(0,1) },
+				cornerTR: { value : new external_THREE_namespaceObject.Vector2(1,1) },
+				cornerBR: { value : new external_THREE_namespaceObject.Vector2(1,0) },
+				cornerBL: { value : new external_THREE_namespaceObject.Vector2(0,0) },
+				borderWidth: { value: new external_THREE_namespaceObject.Vector4(0,0,0,0) },
+
+				frameSize: { value: new external_THREE_namespaceObject.Vector3( 1, 1, 1 ) },
+				textureSize: { value: new external_THREE_namespaceObject.Vector2( 1, 1 ) }
+			},
+			side: external_THREE_namespaceObject.FrontSide,
+			transparent: true,
+			clipping: true,
+			vertexShader: framematerial_glsl_vertexShader,
+			fragmentShader: framematerial_glsl_fragmentShader,
+			extensions: {
+				derivatives: true
+			}
+		} );
+
+		// webgl preprocessor AlphaTest set by default
+		this.defines[ 'USE_ALPHATEST' ] = '';
+		this.needsUpdate = true;
+	}
+
+	set map( value ) {
+
+		this.uniforms.map.value = value;
+		if( !value ) {
+
+			if( this.defines['USE_UV'] !== undefined ) {
+
+				delete this.defines['USE_UV'];
+				this.needsUpdate = true;
+
+			}
+
+		} else if( this.defines['USE_UV'] === undefined ) {
+
+			this.defines['USE_UV'] = '';
+			this.needsUpdate = true;
+
+		}
+
+		this.needsUpdate = true;
+
+	}
+
+	get map(){
+		return this.uniforms.map.value;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get alphaTest() {
+
+		return this.uniforms.alphaTest.value;
+
+	}
+
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set alphaTest( v ) {
+		this.uniforms.alphaTest.value = v;
+	}
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set opacity( v ) {
+
+		if( this.uniforms )
+			this.uniforms.opacity.value = v;
+
+	}
+
+	/**
+	 * The color will be the diffuse uniform
+	 * @returns {number}
+	 */
+	get opacity() {
+
+		return this.uniforms.opacity.value;
+
+	}
+
+	/**
+	 * The color will be the diffuse uniform
+	 * @returns {Color}
+	 */
+	get color() {
+
+		return this.uniforms.diffuse.value;
+
+	}
+
+	/**
+	 *
+	 * @param {Color} v
+	 */
+	set color( v ) {
+
+		this.uniforms.diffuse.value = v;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/hierarchy/ChildrenBox.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class ChildrenBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'children', null, false );
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @private
+		 */
+		this._uis = [];
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._boxes = [];
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update requested when :
+	 * 		- New child has been added
+	 * 		- Existing child has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) { /* eslint-enable no-unused-vars */
+
+		this._compute( element );
+
+		element._layouter._needsUpdate = true;
+		element._renderOrder._needsUpdate = true;
+
+	}
+
+
+	/**
+	 * Process when :
+	 * 		- Existing child visibility changed
+	 *
+	 * @param element
+	 */
+	process( element ) {
+
+		this._compute( element );
+
+		element._flexDirection._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+		element._overflow._needsRender = true;
+
+	}
+
+	_compute( element ) {
+
+		// Stores all children that are box
+		this._uis = element.children.filter( child => child.visible && child.isUI );
+		this._boxes = this._uis.filter( child => child.isBox ).sort( this._sortOrder );
+
+		// @TODO: check if it has changes boxes values? with array join to 'fingerprint'?
+		// 				computation to remove computation? Does it worth it? When would it worth it?
+		//				// Changed order property of children but doesn't impact the output of boxes => Order have change, okay to have more computation
+		//				// Removed the Added the same element, at the same position => Rare case
+		// 		Conclusion : Not worth it at the time of writing
+
+
+
+	}
+
+
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		this._uis = null;
+		this._boxes = null;
+
+	}
+
+	/**
+	 *
+	 * Sort children according to their .style.order property or fallback on children index
+	 *
+	 * @param {HTMLElementVR} a
+	 * @param {HTMLElementVR} b
+	 * @return {number}
+	 * @private
+	 */
+	_sortOrder = ( a, b ) => {
+
+		if( a._order._value < b._order._value ) return -1;
+		if( a._order._value > b._order._value ) return 1;
+
+		// if both children have the same order value, use their children index to order them
+		if( this._uis.indexOf(a) < this._uis.indexOf(b) ) {
+			return -1;
+		}
+
+		return 1;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/BoundsBox.js
+
+
+
+
+class BoundsBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'bounds', null, false );
+
+		/**
+		 *
+		 * @type {Vector3}
+		 * @internal
+		 */
+		this._size = new external_THREE_namespaceObject.Vector3( 1, 1, 1 );
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._offsetWidth = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._offsetHeight = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._innerWidth = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._innerHeight = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._centerX = 0.5;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._centerY = 0.5;
+
+
+		this._needsProcess = true;
+
+	}
+
+	/**
+	 * Set the value of the width 100%
+	 * @param element
+	 * @param value
+	 */
+	setReferenceWidth( element, value ) {
+
+		const width = element._width;
+		const padding = element._padding._value;
+		const borderWidth = element._borderWidth._value;
+		const margin = element._margin._value;
+
+		const factor = width._auto ? 1 : width._value;
+		// const newOffsetWidth = (value * factor) - (margin.y + margin.w);
+		const newOffsetWidth = (value * factor) - (margin.y + margin.w);
+		if ( numberEquals( newOffsetWidth, this._offsetWidth ) ) return;
+
+		this._offsetWidth = newOffsetWidth;
+		this._innerWidth = this._offsetWidth - ( padding.y + padding.w + borderWidth.y + borderWidth.w );
+
+		this._centerX = _computeCenterX( element );
+
+		this._propagateWidth( element );
+
+		this._triggerCascadingDependencies( element );
+
+	}
+
+	/**
+	 * Set the value of the height 100%
+	 * @param element
+	 * @param value
+	 */
+	setReferenceHeight( element, value ) {
+
+		const height = element._height;
+		const padding = element._padding._value;
+		const borderWidth = element._borderWidth._value;
+		const margin = element._margin._value;
+
+		const factor = height._auto ? 1 : height._value;
+
+		const newOffsetHeight = (value * factor) - ( margin.x + margin.z );
+		if ( numberEquals( newOffsetHeight, this._offsetHeight ) ) return;
+
+		this._offsetHeight = newOffsetHeight;
+		this._innerHeight = this._offsetHeight - ( padding.x + padding.z + borderWidth.x + borderWidth.z );
+		this._centerY = _computeCenterY( element );
+
+		this._propagateHeight( element );
+
+		this._triggerCascadingDependencies( element );
+
+	}
+
+	setChildrenWidth( element, value ) {
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		this._innerWidth = value;
+		this._offsetWidth = this._innerWidth + ( padding.y + padding.w + border.y + border.w )
+
+		this._centerX = _computeCenterX( element );
+
+		this._propagateWidth( element );
+		this._triggerCascadingDependencies( element );
+
+
+	}
+
+	setChildrenHeight( element, value ) {
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		this._innerHeight = value;
+		this._offsetHeight = this._innerHeight + ( padding.x + padding.z + border.x + border.z )
+
+		this._centerY = _computeCenterY( element );
+
+		this._propagateHeight( element );
+		this._triggerCascadingDependencies( element );
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		// only compute new width if explicitely defined
+		const width = element._width;
+		if( !width._auto && !width._relative ) {
+
+			if ( element._boxSizing._value === 'content-box' ) {
+
+				this._innerWidth = width._value;
+				this._offsetWidth = this._innerWidth + padding.y + padding.w + border.y + border.w;
+
+			} else {
+
+				this._offsetWidth = width._value;
+				this._innerWidth = this._offsetWidth - ( padding.y + padding.w + border.y + border.w );
+
+			}
+
+			this._centerX = _computeCenterX( element );
+			this._needsProcess = true;
+
+			// tells children width has changed
+			this._propagateWidth( element );
+			this._triggerCascadingDependencies( element );
+
+		}
+
+		const height = element._height;
+		if( !height._auto && !height._relative ) {
+
+			if ( element._boxSizing._value === 'content-box' ) {
+
+				this._innerHeight = height._value;
+				this._offsetHeight = this._innerHeight + padding.x + padding.z + border.x + border.z;
+
+			} else {
+
+				this._offsetHeight = height._value;
+				this._innerHeight = this._offsetHeight - ( padding.x + padding.z + border.x + border.z );
+
+			}
+
+			this._centerY = _computeCenterY( element );
+			this._needsProcess = true;
+
+			// tells children height has changed
+			this._propagateHeight( element );
+			this._triggerCascadingDependencies( element );
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */ render( element ) { /* eslint-enable no-unused-vars */
+
+		this._size.x = this._offsetWidth;
+		this._size.y = this._offsetHeight;
+
+		element._renderer._needsRender = true;
+
+	}
+
+	/**
+	 *
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) {
+
+		out[ 'size' ] = this._size;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @override
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */
+
+		// this._triggerCascadingDependencies( element )
+
+		//console.log( 'process bounds box', element.name );
+
+		// update primitives or unbinded values
+
+		// require cascading processes
+
+		element._overflow._needsRender = true;
+
+
+	}
+
+	/**
+	 *
+	 * @param element
+	 * @internal
+	 */
+	_computeChildrenSideWidth( element ) {
+
+		return _computeChildrenSideWidth( element );
+
+	}
+
+	/**
+	 *
+	 * @param element
+	 * @internal
+	 */
+	_computeChildrenSideHeight( element ) {
+
+		return _computeChildrenSideHeight( element );
+
+	}
+
+	_propagateWidth( element ) {
+
+		for ( let i = 0; i < element._children._boxes.length; i++ ) {
+
+			const box = element._children._boxes[ i ];
+			const width = box._width;
+
+			if( width._relative ) box._bounds.setReferenceWidth( box, this._innerWidth );
+
+		}
+
+	}
+
+	_propagateHeight( element ) {
+
+		for ( let i = 0; i < element._children._boxes.length; i++ ) {
+
+			const box = element._children._boxes[ i ];
+			const height = box._height;
+
+			if( height._relative ) box._bounds.setReferenceHeight( box, this._innerHeight );
+
+		}
+
+	}
+
+	_triggerCascadingDependencies( element ) {
+
+		// also change parent when require
+		if ( element._parent._value ) {
+			element._parent._value._autoSize._needsProcess = true;
+		}
+
+		element._flexDirection._needsProcess = true;
+		element._fontSize._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+		this._needsRender = true;
+
+		element._borderWidth._needsRender = true;
+		element._borderRadius._needsRender = true;
+
+		element._overflow._needsRender = true;
+
+	}
+
+}
+
+
+
+
+/***********************************************************************************************************************
+ * INTERNAL FUNCTIONS
+ **********************************************************************************************************************/
+
+/**
+ * Retrieve the center X according to box sized dimensions
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeCenterX( element ) {
+
+	const padding = element._padding._value;
+	const borderWidth = element._borderWidth._value;
+
+	const leftSide = padding.w + borderWidth.w;
+	const rightSide = padding.y + borderWidth.y;
+
+	return ( leftSide - rightSide ) / 2;
+}
+
+/**
+ * Retrieve the center Y according to box sized dimensions
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeCenterY( element ) {
+
+
+	const padding = element._padding._value;
+	const borderWidth = element._borderWidth._value;
+
+	const topSide = padding.x + borderWidth.x;
+	const bottomSide = padding.z + borderWidth.z;
+
+	return ( bottomSide - topSide ) / 2;
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideWidth( element ) {
+
+	return element._children._boxes.reduce( ( accu, child ) => {
+
+		// if ( child._bounds._needsProcess ) child._bounds.process( child );
+
+		const margin = child._margin._value;
+		const CHILD_SIZE = child._bounds._offsetWidth + margin.y + margin.w;
+
+		return accu + CHILD_SIZE;
+
+	}, 0 );
+
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideHeight( element ) {
+
+	return element._children._boxes.reduce( ( accu, child ) => {
+
+
+		// if ( child._bounds._needsProcess ) child._bounds.process( child );
+
+		const margin = child._margin._value;
+
+		const CHILD_SIZE = child._bounds._offsetHeight + margin.x + margin.z;
+
+		return accu + CHILD_SIZE;
+
+	}, 0 );
+
+}
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/AlignItemsPropertyBox.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class AlignItemsPropertyBox extends AlignItemsProperty {
+
+	constructor( ) {
+
+		super();
+
+		// configure this property
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+		// strategies
+		/**
+		 *
+		 * @type {(element:MeshUIBaseElement, (child:MeshUIBaseElement, parentOffset:number )=> number ) =>  void  }
+		 * @private
+		 */
+		this._process = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {(child:MeshUIBaseElement, parentOffset:number )=> number}
+		 * @private
+		 */
+		this._childAlign = this.emptyStrategyLogic;
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) {
+
+		// Stretch : Current or previous requires a bounds update of children
+		// if( this._value === 'stretch' || this._input === 'stretch' ) {
+		//
+		// 	for ( let i = 0; i < element._children._boxes.length; i++ ) {
+		// 		element._children._boxes[ i ]._bounds._needsProcess = true;
+		// 	}
+		//
+		// }
+
+		this._value = this._inheritedInput;
+
+		switch( element._flexDirection._value ) {
+
+			case 'row':
+			case 'row-reverse':
+				this._process = _processRow;
+				switch ( this._value ) {
+					case 'start':
+						this._childAlign = _alignChildRowStart;
+						break;
+					case 'end':
+						this._childAlign = _alignChildRowEnd;
+						break;
+
+					default:
+						this._childAlign = _alignChild;
+				}
+				break;
+
+			case 'column':
+			case 'column-reverse':
+				this._process = _processColumn;
+
+				switch ( this._value ) {
+					case 'start':
+						this._childAlign = _alignChildColumnStart;
+						break;
+					case 'end':
+						this._childAlign = _alignChildColumnEnd;
+						break;
+
+					default:
+						this._childAlign = _alignChild;
+				}
+
+				break;
+
+		}
+
+		this._needsProcess = true;
+		// @TODO: Store children here
+		element._autoSize._needsProcess = true;
+
+		element._flexDirection._needsProcess = true; //not mandatory
+		element._justifyContent._needsProcess = true;
+
+		this._needsProcess = true;
+		element._fontSize._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @param element
+	 */
+	process( element ) {
+
+		// return;
+		// if( !element._children._boxes.length ) return;
+
+		this._process( element, this._childAlign );
+
+		// @TODO : Could be strategized
+		let snap = 'center';
+		let snapXon = 'center';
+		let snapYon = 'center';
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		if( element._flexDirection._value.indexOf('column') !== -1 ) {
+
+			if( this._value === 'start' ) {
+				snap = snapXon = 'left';
+			}else if( this._value === 'end' ){
+				snap = snapXon ='right';
+			}else {
+				snap = 'centerX';
+			}
+
+		} else {
+
+			/* eslint-disable no-lonely-if */
+			if( this._value === 'start' ) {
+				snap = snapYon = 'top';
+			}else if( this._value === 'end' ){
+				snap = snapYon ='bottom';
+			}else{
+				snap = 'centerY';
+			}
+			/* eslint-enable no-lonely-if */
+
+		}
+
+		// apply 4 directional padding and borders
+		let y = -(padding.x - padding.z) / 2 - (border.x - border.z)  / 2;
+		let x = -(padding.y - padding.w) / 2 - ( border.y - border.w ) / 2;
+
+
+		if( snapXon === 'left' ) {
+
+			x = (padding.w - padding.y) / 2 + (border.w - border.y) / 2;
+
+		} else if( snapXon === 'right' ) {
+
+			x = - ( padding.y - padding.w ) / 2 - ( border.y - border.w ) / 2;
+
+		}
+
+		if( snapYon === 'top' ) {
+
+			y = - (padding.x - padding.z) / 2 - (border.x - border.z)  / 2;
+
+		} else if( snapYon === 'bottom' ) {
+
+			y = (padding.z - padding.x) / 2 + (border.z - border.x)  / 2;
+
+		}
+
+
+		element._children._boxes.forEach( ( child ) => {
+
+			let marginX = 0;
+			let marginY = 0;
+			// let marginY = ( -child._margin._value.x + child._margin._value.z ) /2;
+			// let marginY = ( -child._margin._value.x + child._margin._value.z ) /2;
+
+			if( snap === 'top' ) {
+
+				marginY = - child._margin._value.x;
+
+			} else if( snap === 'bottom' ) {
+
+				marginY = child._margin._value.z;
+
+			} else if( snap === 'left' ) {
+
+				marginX = child._margin._value.w;
+
+			} else if( snap === 'right' ) {
+
+				marginX = - child._margin._value.y;
+
+			} else if( snap === 'centerX' ) {
+
+				marginX = ( child._margin._value.w - child._margin._value.y ) /2;
+
+			} else if( snap === 'centerY' ) {
+
+				marginY = ( - child._margin._value.x + child._margin._value.z ) /2;
+
+			}
+
+			element._layouter._childrenPos[ child.id ].x += x + marginX;
+			element._layouter._childrenPos[ child.id ].y += y + marginY;
+
+		} );
+
+	}
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
+function _alignChild() {
+	return 0;
+}
+
+/**
+ *
+ * @param child
+ * @param parentOffset
+ * @return {number}
+ * @private
+ */
+function _alignChildRowEnd( child, parentOffset ) {
+	return - parentOffset + ( child._bounds._offsetHeight / 2 );
+}
+
+function _alignChildRowStart( child, parentOffset ) {
+	return parentOffset - ( child._bounds._offsetHeight / 2 );
+}
+
+function _alignChildColumnEnd( child, parentOffset ) {
+	return parentOffset - ( child._bounds._offsetWidth / 2 );
+}
+
+function _alignChildColumnStart( child, parentOffset ) {
+	return - parentOffset + ( child._bounds._offsetWidth / 2 );
+}
+
+function _processColumn( element, childAligner ) {
+
+	const AXIS_TARGET = element._bounds._innerWidth / 2;
+
+	element._children._boxes.forEach( ( child ) => {
+
+		element._layouter._childrenPos[ child.id ].x = childAligner( child, AXIS_TARGET );
+
+	} );
+
+}
+
+function _processRow( element, childAligner ) {
+
+	const AXIS_TARGET = element._bounds._innerHeight / 2;
+
+	element._children._boxes.forEach( ( child ) => {
+
+		element._layouter._childrenPos[ child.id ].y = childAligner( child, AXIS_TARGET );
+
+	} );
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/FlexDirectionPropertyBox.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class FlexDirectionPropertyBox extends FlexDirectionProperty {
+
+	constructor( ) {
+
+		super();
+
+		// Configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._offset = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._reverse = 1;
+
+		/**
+		 *
+		 * @param { (element:MeshUIBaseElement) => void} element
+		 * @private
+		 */
+		this._process = this.emptyStrategyLogic;
+
+	}
+
+	computeOutputValue( element ) {
+
+		this._value = this._inheritedInput;
+
+		switch ( this._value ) {
+			case "row":
+				this._process = FlexDirectionPropertyBox_processRow;
+				// this._offset = - element._bounds._innerWidth / 2;
+				break;
+
+			case "row-reverse":
+				this._process = _processRowReverse;
+				// this._offset = element._bounds._innerWidth / 2;
+				break;
+
+			case "column":
+				this._process = FlexDirectionPropertyBox_processColumn;
+				// this._offset = element._bounds._innerHeight / 2;
+				break;
+
+			case "column-reverse":
+				this._process = _processColumnReverse;
+				// this._offset = - element._bounds._innerHeight / 2;
+				break;
+		}
+
+		// also update dependencies
+		if( !element._justifyContent._needsUpdate ) element._justifyContent.computeOutputValue( element );
+		if( !element._alignItems._needsUpdate ) element._alignItems.computeOutputValue( element );
+
+		this._needsProcess = true;
+
+	}
+
+	process( element ) {
+		// this will be defined from strategy
+
+		//console.log( element.name, 'flexDirection process');
+
+
+		switch ( this._value ) {
+			case "row":
+				this._offset = - element._bounds._innerWidth / 2;
+				break;
+
+			case "row-reverse":
+				this._offset = element._bounds._innerWidth / 2;
+				break;
+
+			case "column":
+				this._offset = element._bounds._innerHeight / 2;
+				break;
+
+			case "column-reverse":
+				this._offset = - element._bounds._innerHeight / 2;
+				break;
+		}
+
+		this._reverse = -Math.sign( this._offset );
+		if( this._reverse === 0 ) {
+			this._reverse = 1;
+		}
+
+
+		this._process( element );
+
+		element._justifyContent._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
+function FlexDirectionPropertyBox_processRow( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 */
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetWidth;
+
+		// increase with the left margin before placing the child
+		accu += child._margin._value.w * REVERSE;
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+		position.y = 0;
+
+
+		// increase the next child with this child right margin
+		accu += REVERSE * ( CHILD_SIZE + child._margin._value.y ) ;
+
+	}
+
+}
+
+function _processRowReverse( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 */
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetWidth;
+
+		// decrease with the right margin before placing the child
+		accu += child._margin._value.y * REVERSE;
+
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+		position.y = 0;
+
+		// decrease the next child with this child left margin
+		accu += (CHILD_SIZE + child._margin._value.w) * REVERSE ;
+
+	}
+
+}
+
+function FlexDirectionPropertyBox_processColumn( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetHeight;
+
+		// increase with the top margin before placing the child
+		accu += child._margin._value.x * REVERSE;
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = 0;
+		position.y = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+
+		// increase the next child with this child bottom margin
+		accu += (CHILD_SIZE + child._margin._value.z) * REVERSE ;
+
+	}
+
+}
+
+function _processColumnReverse( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetHeight;
+
+		// decrease with the bottom margin before placing the child
+		accu += child._margin._value.z * REVERSE;
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = 0;
+		position.y = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+
+		// decrease the next child with this child top margin
+		accu += ( CHILD_SIZE + child._margin._value.x ) * REVERSE ;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/JustifyContentPropertyBox.js
+
+
+class JustifyContentPropertyBox extends JustifyContentProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'justifyContent', defaultValue, true );
+
+		// configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+		// strategies
+		/**
+		 *
+		 * @type {(axisOffset:number) => number}
+		 * @private
+		 */
+		this._computeOffset = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {(element:MeshUIBaseElement, availableSpace:number, reverse:number) => Array.<number> }
+		 * @private
+		 */
+		this._computeMargin = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {(element:MeshUIBaseElement) => void}
+		 * @private
+		 */
+		this._process = this.emptyStrategyLogic;
+
+	}
+
+
+	computeOutputValue( element ) {
+
+		this._value = this._inheritedInput;
+
+		//console.log( element._flexDirection._value );
+		switch ( element._flexDirection._value ) {
+
+			case 'column-reverse':
+			case 'column':
+				this._process = _column.bind( this );
+				break;
+
+
+			case 'row-reverse':
+			case 'row':
+				this._process = _row.bind( this );
+				break;
+
+		}
+
+		switch ( this._value ) {
+			case 'end':
+				this._computeOffset = _justificationOffsetEnd;
+				this._computeMargin = _justificationMargin;
+				break;
+
+			case 'center':
+				this._computeOffset = _justificationOffsetCenter;
+				this._computeMargin = _justificationMargin;
+				break;
+
+			case 'start':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMargin;
+				break;
+
+			case 'space-between':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMarginSpaceBetween;
+				break;
+
+			case 'space-around':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMarginSpaceAround;
+				break;
+
+			case 'space-evenly':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMarginSpaceEvenly;
+				break;
+		}
+
+		// @TODO : 	If flexDirection was keeping its children position,
+		//  				it won't be necessary to compute the same result again
+		//					but it will increase the memory footprint
+		element._flexDirection._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		this._process( element );
+
+		element._alignItems._needsProcess = true; // not mandatory : Layout could sum each
+
+	}
+
+}
+
+function _row( element ) {
+
+	const startPos = element._flexDirection._offset;
+
+	const { usedDirectionSpace, remainingSpace } = _rowRemainingSpace( element );
+
+	// Items Offset
+	const axisOffset = ( startPos * 2 ) - ( usedDirectionSpace * Math.sign( startPos ) );
+	const justificationOffset = this._computeOffset( axisOffset );
+
+	// Items margin
+	// const justificationMargins = _getJustificationMargin( boxComponent.childrenBoxes, remainingSpace, JUSTIFICATION, REVERSE );
+	const justificationMargins = this._computeMargin( element, remainingSpace, element._flexDirection._reverse );
+
+
+	// Apply
+	element._children._boxes.forEach( ( child, childIndex ) => {
+
+		element._layouter._childrenPos[ child.id ].x -= justificationOffset - justificationMargins[ childIndex ];
+
+	} );
+
+}
+
+function _column( element ) {
+
+
+	const startPos = element._flexDirection._offset;
+
+	const { usedDirectionSpace, remainingSpace } = _columnRemainingSpace( element );
+
+	// Items Offset
+	const axisOffset = ( startPos * 2 ) - ( usedDirectionSpace * Math.sign( startPos ) );
+	const justificationOffset = this._computeOffset( axisOffset );
+
+	// Items margin
+	const justificationMargins = this._computeMargin( element, remainingSpace, element._flexDirection._reverse );
+
+	// Apply
+	element._children._boxes.forEach( ( child, childIndex ) => {
+
+		element._layouter._childrenPos[ child.id ].y -= justificationOffset - justificationMargins[ childIndex ];
+
+	} );
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
+/**
+ *
+ * @param {MeshUIBaseElement} element
+ * @return {{usedDirectionSpace: *, remainingSpace: number}}
+ * @private
+ */
+function _rowRemainingSpace( element ) {
+
+	const usedDirectionSpace = element._bounds._computeChildrenSideWidth( element );
+	return { usedDirectionSpace, remainingSpace: element._bounds._innerWidth - usedDirectionSpace };
+
+}
+
+function _columnRemainingSpace( element ) {
+
+	const usedDirectionSpace = element._bounds._computeChildrenSideHeight( element );
+	return { usedDirectionSpace, remainingSpace: element._bounds._innerHeight - usedDirectionSpace };
+
+}
+
+
+/* eslint-disable no-unused-vars */ function _justificationOffset( axisOffset ) { /* eslint-enable no-unused-vars */
+
+	return 0;
+
+}
+
+function _justificationOffsetEnd( axisOffset ) {
+
+	return axisOffset;
+
+}
+
+function _justificationOffsetCenter( axisOffset ) {
+
+	return axisOffset / 2;
+
+}
+
+/* eslint-disable no-unused-vars */
+function _justificationMargin( element, availableSpace = 0, reverse = 1 ) { /* eslint-enable no-unused-vars */
+
+	return Array( element._children._boxes.length ).fill( 0 );
+
+}
+
+function _justificationMarginSpaceBetween( element, availableSpace = 0, reverse = 1 ) {
+
+	const boxes = element._children._boxes;
+	const length = boxes.length;
+	const justificationMargins = Array( length ).fill( 0 );
+
+	if ( availableSpace > 0 ) {
+
+		// only one children would act as start
+		if ( length > 1 ) {
+
+			const margin = availableSpace / ( length - 1 ) * reverse;
+			// set this margin for any children
+
+			// except for first child
+			justificationMargins[ 0 ] = 0;
+
+			for ( let i = 1; i < length; i++ ) {
+
+				justificationMargins[ i ] = margin * i;
+
+			}
+
+		}
+
+	}
+
+	return justificationMargins;
+
+}
+
+function _justificationMarginSpaceEvenly( element, availableSpace = 0, reverse = 1 ) {
+
+	const boxes = element._children._boxes;
+	const length = boxes.length;
+	const justificationMargins = Array( length ).fill( 0 );
+
+	if ( availableSpace > 0 ) {
+
+		const margin = availableSpace / ( length + 1 ) * reverse;
+
+		// set this margin for any children
+		for ( let i = 0; i < length; i++ ) {
+
+			justificationMargins[ i ] = margin * ( i + 1 );
+
+		}
+
+	}
+
+	return justificationMargins;
+
+}
+
+function _justificationMarginSpaceAround( element, availableSpace = 0, reverse = 1 ) {
+
+	const boxes = element._children._boxes;
+	const length = boxes.length;
+	const justificationMargins = Array( length ).fill( 0 );
+
+	if ( availableSpace > 0 ) {
+
+
+		const margin = availableSpace / ( length ) * reverse;
+
+		const start = margin / 2;
+		justificationMargins[ 0 ] = start;
+
+		// set this margin for any children
+		for ( let i = 1; i < length; i++ ) {
+
+			justificationMargins[ i ] = start + margin * i;
+
+		}
+
+
+	}
+
+	return justificationMargins;
+
+}
+
+;// CONCATENATED MODULE: ./src/frame/Frame.js
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+/**
+ * Returns a basic plane mesh.
+ */
+class Frame extends external_THREE_namespaceObject.Mesh {
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	constructor( element ) {
+
+		const geometry = new external_THREE_namespaceObject.PlaneGeometry( 1, 1, element._segments.value, element._segments.value );
+
+		// Add additional uv for borders computations by copying initial uv
+		const uvB = new external_THREE_namespaceObject.BufferAttribute( new Float32Array( geometry.getAttribute('uv').array ), 2);
+		geometry.setAttribute('uvB', uvB ).name = 'uvB';
+
+		super( geometry, element.backgroundMaterial );
+
+		this.name = 'UIBackgroundBox';
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/rendering/RendererPropertyBox.js
+
+
+
+class RendererPropertyBox extends BaseProperty{
+
+	constructor() {
+
+		super( 'renderer' );
+
+	}
+
+
+	render( element ) {
+
+		if( !element._backgroundMesh ) {
+
+			element.setBackgroundMesh( new Frame(element) );
+
+		}
+
+		element.performAfterUpdate();
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/PositionPropertyBox.js
+
+
+class PositionPropertyBox extends PositionProperty {
+
+	constructor( ) {
+
+		super( 'position' );
+
+	}
+
+	update( element, out ) {
+
+		super.update( element, out );
+
+		this._needsProcess = true;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/AutoSizePropertyBox.js
+
+
+/**
+ * Autosize are only trigger when natural size changed
+ */
+class AutoSizePropertyBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'autosize' );
+
+		this._needsProcess = true;
+	}
+
+	process( element ) {
+
+		// if( parent ) return;
+
+
+		// has auto size get the height from children
+		if ( element._width._auto ) _processAutoWidth( element );
+		if ( element._height._auto ) _processAutoHeight( element );
+
+		const stretch = element._alignItems._value === 'stretch';
+		const stretchChildrenWidth = stretch && element._flexDirection._value.indexOf( 'column' ) !== -1;
+		const stretchChildrenHeight = stretch && !stretchChildrenWidth;
+
+		for ( const box of element._children._boxes ) {
+
+			if ( ( box._width._auto && stretchChildrenWidth ) || box._width._relative ) {
+
+				box._bounds.setReferenceWidth( box, element._bounds._innerWidth );
+
+			}
+
+			if ( ( box._height._auto && stretchChildrenHeight ) || box._height._relative ) {
+
+				box._bounds.setReferenceHeight( box, element._bounds._innerHeight );
+
+			}
+
+		}
+
+		// // justify stretch - Not that easy
+		// const stretchD = element._justifyContent._value === 'stretch';
+		// const stretchChildrenWidthD = stretchD && element._flexDirection._value.indexOf( 'row' ) !== -1;
+		// const stretchChildrenHeightD = stretchD && !stretchChildrenWidthD;
+		//
+		//
+		// if ( stretchChildrenWidthD ) {
+		//
+		// 	const used = _computeChildrenSideWidth( element );
+		// 	const available = element._bounds._innerWidth - used;
+		// 	if ( available > 0 ) {
+		//
+		// 		const autoElement = element._children._uis.filter( c => c._width._auto );
+		// 		const distributed = available / autoElement.length;
+		//
+		// 		for ( const child of autoElement ) {
+		//
+		// 			const width = child._bounds._offsetWidth + distributed;
+		// 			child._bounds.setReferenceWidth( child, width );
+		//
+		// 		}
+		//
+		// 		element._layouter._needsProcess = true;
+		// 		element._flexDirection._needsProcess = true;
+		//
+		// 	}
+		//
+		// } else if ( stretchChildrenHeightD ) {
+		//
+		// 	const used = _computeChildrenSideHeight( element );
+		// 	const available = element._bounds._innerHeight - used;
+		// 	if ( available > 0 ) {
+		//
+		// 		const autoElement = element._children._uis.filter( c => c._height._auto );
+		// 		const distributed = available / autoElement.length;
+		//
+		// 		for ( const child of autoElement ) {
+		//
+		// 			const height = child._bounds._offsetHeight + distributed;
+		// 			child._bounds.setReferenceHeight( child, height );
+		//
+		// 		}
+		//
+		// 		element._layouter._needsProcess = true;
+		// 		element._flexDirection._needsProcess = true;
+		//
+		// 	}
+		//
+		// }
+
+
+	}
+
+}
+
+function _processAutoWidth( element ) {
+
+	// column : retrieve the biggest child width
+	// row : retrieve the sum of children width
+	element._bounds.setChildrenWidth( element, _computeAutoWidth( element ) );
+
+}
+
+function _processAutoHeight( element ) {
+
+	// column : retrieve the sum of children height
+	// row : retrieve the biggest child height
+	element._bounds.setChildrenHeight( element, _computeAutoHeight( element ) );
+
+}
+
+/**
+ * Retrieve the automatic height from children boxes
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeAutoHeight( element ) {
+
+	switch ( element._flexDirection._value ) {
+
+		case 'row' :
+		case 'row-reverse' :
+			return _computeHighestChildHeight( element );
+
+
+		case 'column' :
+		case 'column-reverse' :
+			return AutoSizePropertyBox_computeChildrenSideHeight( element );
+
+	}
+
+}
+
+/**
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ *
+ */
+function _computeAutoWidth( element ) {
+
+	switch ( element._flexDirection._value ) {
+
+		case 'row' :
+		case 'row-reverse' :
+			return AutoSizePropertyBox_computeChildrenSideWidth( element );
+
+
+		case 'column' :
+		case 'column-reverse' :
+			return _computeHighestChildWidth( element );
+
+	}
+
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function AutoSizePropertyBox_computeChildrenSideWidth( element ) {
+
+	let sumWidth = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const width = box._bounds._offsetWidth + margin.y + margin.w;
+
+		sumWidth += width;
+
+	}
+
+	return sumWidth;
+
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function AutoSizePropertyBox_computeChildrenSideHeight( element ) {
+
+	let sumHeight = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const height = box._bounds._offsetHeight + margin.x + margin.z;
+
+		sumHeight += height;
+
+	}
+
+	return sumHeight;
+
+}
+
+/**
+ * Returns the highest linear dimension among all the children of the passed component
+ * MARGIN INCLUDED
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeHighestChildWidth( element ) {
+
+	let maxWidth = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const width = box._bounds._offsetWidth + margin.y + margin.w;
+
+		if ( width > maxWidth ) maxWidth = width;
+
+	}
+
+	return maxWidth;
+
+}
+
+/**
+ * Returns the highest linear dimension among all the children of the passed component
+ * MARGIN INCLUDED
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeHighestChildHeight( element ) {
+
+	let maxHeight = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const height = box._bounds._offsetHeight + margin.x + margin.z;
+
+		if ( height > maxHeight ) maxHeight = height;
+
+	}
+
+	return maxHeight;
+
+}
+
+;// CONCATENATED MODULE: ./src/elements/basic/BoxElement.js
+
+
+
+
+
+
+
+
+
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class BoxElement extends MeshUIBaseElement {
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	constructor( properties, values) {
+
+		BoxElement.definePropertiesValues( properties, values );
+
+		super( properties, values );
+
+		BoxElement.init( this );
+
+	}
+
+	/**
+	 * When the backgroundMesh has been set, bind properties
+	 * @override
+	 */
+	bindBackgroundMeshProperties () {
+
+		// bind the background scale with bounds
+		this._bounds._size = this._backgroundMesh.scale;
+		this._bounds._needsProcess = true;
+
+	}
+
+	/**
+	 * When the backgroundMesh has been unset, unbind properties
+	 * @override
+	 */
+	unbindBackgroundMeshProperties () {
+
+		// detach bounds size
+		this._bounds._size = new external_THREE_namespaceObject.Vector3(1,1,1);
+		this._bounds._needsProcess = true;
+
+	}
+
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {
+
+		// customize property
+		if( !properties.children ) properties.children = ChildrenBox;
+		if( !properties.bounds ) properties.bounds = BoundsBox;
+		if( !properties.flexDirection ) properties.flexDirection = FlexDirectionPropertyBox;
+		if( !properties.justifyContent ) properties.justifyContent = JustifyContentPropertyBox;
+		if( !properties.alignItems ) properties.alignItems = AlignItemsPropertyBox;
+		if( !properties.position ) properties.position = PositionPropertyBox;
+		if( !properties.autoSize ) properties.autoSize = AutoSizePropertyBox;
+
+		if( !properties.renderer ) properties.renderer = RendererPropertyBox;
+
+
+		// configure
+		// /* ie: * /if ( !values.width ) values.width = '100%';
+
+
+		// break inheritance chains
+		if ( !values.fontSide ) values.fontSide = 0; // FrontSide;
+		if ( !values.invertAlpha ) values.invertAlpha = false;
+		if ( !values.fontCastShadow ) values.fontCastShadow = false;
+		if ( !values.fontReceiveShadow ) values.fontReceiveShadow = false;
+		if ( !values.backgroundCastShadow ) values.backgroundCastShadow = false;
+		if ( !values.backgroundReceiveShadow ) values.backgroundReceiveShadow = false;
+
+		if( !values.uiType ) values.uiType = 'block';
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init( element ) {
+
+		Object.defineProperties( element, {
+				isBox: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+
+		element.backgroundMaterial = new FrameMaterial();
+		element._renderer.render( element );
+
+		element._backgroundMesh.visible = false;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/elements/glyphs/Line.js
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+
+/**
+ * Line represents an horizontal combination of positioned inlines with additional properties
+ */
+class Line extends Array {
+
+	/**
+	 *
+	 * @param {Inline[]} items
+	 */
+	constructor(...items) {
+		super(...items);
+
+		/**
+		 * The width of this line
+		 * @type {number}
+		 */
+		this.width = 0;
+
+		/**
+		 * The maximum lineBase of this line of inlines
+		 * @type {number}
+		 */
+		this.lineBase = 0;
+
+		/**
+		 * The maximum lineHeight of this line of inlines
+		 * @type {number}
+		 */
+		this.lineHeight = 0;
+
+		/**
+		 * The vertical position of this line
+		 * @type {number}
+		 */
+		this.y = 0;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/BoxLayouter.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+
+
+/* eslint-enable no-unused-vars */
+
+class BoxLayouter extends BaseProperty {
+
+	constructor() {
+
+		super( 'layouter', null, false);
+
+		// configure
+		this._needsUpdate = true;
+
+		/**
+		 * @typedef ChildrenPos
+		 * @type {Object & Object.<string,Vector3>}
+		 */
+
+		/**
+		 *
+		 * @type {ChildrenPos}
+		 * @internal
+		 */
+		this._childrenPos = {};
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Updated when :
+	 * 	- New child added
+	 * 	- Child removed
+	 * 	- Child position changed
+	 * 	- Child visibility changed
+	 * 	- ...?
+	 * 	@override
+	 */
+	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		//console.log( "BoxLayouter update", element.name );
+		// reset
+		this._childrenPos = {};
+
+		for ( const uiBoxElement of element._children._boxes ) {
+
+			//console.log( uiBoxElement._position._value )
+			if( uiBoxElement._position._value === 'static' ) {
+
+				// bind position
+				this._childrenPos[ uiBoxElement.id ] = uiBoxElement.position;
+
+			}
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @override
+	 */
+	/* eslint-disable no-unused-vars */ process( element ) { 	/* eslint-enable no-unused-vars */
+
+		// As _childrenPos are bounds with child.position, this is not required anymore
+		//
+		// element._position._needsProcess = true;
+		//
+		// for ( const box of element._children._boxes ) {
+		//
+		// 	if( this._childrenPos[box.id] ) {
+		//
+		// 		box.position.x = this._childrenPos[box.id].x;
+		// 		box.position.y = this._childrenPos[box.id].y;
+		//
+		// 	}
+		//
+		// }
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/elements/basic/BlockElement.js
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+
+/* eslint-enable no-unused-vars */
+
+
+class BlockElement extends BoxElement {
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 */
+	constructor( values = {} ) {
+
+		const properties = {};
+		BlockElement.definePropertiesValues( properties, values );
+
+		super( properties , values );
+
+		BlockElement.init( this );
+
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * A Block Element can only contains box elements
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) {
+		/* eslint-enable no-unused-vars */
+
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			const argument = arguments[ i ];
+
+			if ( !argument.isUI || argument.isBox ) {
+
+				validChildren.push( argument );
+
+			} else {
+
+				console.warn( 'Block element can only contain Box elements.', argument );
+
+			}
+
+		}
+
+		return super.add( ...validChildren );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {  /* eslint-enable no-unused-vars */
+
+		properties.layouter = BoxLayouter;
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init ( element ) {
+
+		Object.defineProperties( element , {
+				isBlock: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/TextContentInline.js
+
+
+class TextContentInline extends BaseProperty{
+
+	constructor() {
+
+		super( "textContent", null, false );
+
+	}
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		element._glyphs._needsUpdate = true;
+		element._whiteSpace._needsProcess = true;
+
+	}
+
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/InlinesProperty.js
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class InlinesProperty extends BaseProperty{
+
+	constructor() {
+
+		super( "inlines", null, false );
+
+		/**
+		 *
+		 * @type {Array.<Inline>}
+		 * @private
+		 */
+		this._value = null;
+
+		// value
+
+		// 3. Inlines
+		// this._textContentInlines = this._textContentGlyphs.map( ( glyphBox ) => glyphBox.asInlineGlyph() );
+
+		// 4. kerning
+		// this._buildContentKernings();
+
+
+		// 5.? Apply margin and padding on first and last inlines
+		// if( this._textContentInlines.length ) {
+		//
+		// 	// First gets left side
+		// 	this._textContentInlines[0].paddingLeft = this._padding.w;
+		// 	this._textContentInlines[0].marginLeft = this._margin.w;
+		//
+		// 	// Last gets right side
+		// 	const lastIndex = this._textContentInlines.length - 1;
+		// 	this._textContentInlines[lastIndex].paddingRight = this._padding.y;
+		// 	this._textContentInlines[lastIndex].marginRight = this._margin.y;
+		//
+		// }
+
+	}
+
+	process( element ) {
+
+		this._value = element._glyphs._value.map( ( glyphBox ) => glyphBox.asInlineGlyph() );
+
+		if( this._value.length ) {
+
+			// First gets left side
+			this._value[0].paddingLeft = element._padding._value.w;
+			this._value[0].marginLeft = element._margin._value.w;
+
+			// Last gets right side
+			const lastIndex = this._value.length - 1;
+			this._value[lastIndex].paddingRight = element._padding._value.y;
+			this._value[lastIndex].marginRight = element._margin._value.y;
+
+		}
+
+
+		element._verticalAlign._needsProcess = true;
+		element._fontSize._needsProcess = true;
+		element._lineBreak._needsProcess = true;
+		element._fontKerning._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @return {Array.<Inline>}
+	 */
+	get value() { return this._value; }
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/GlyphsProperty.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class GlyphsProperty extends BaseProperty{
+
+	constructor() {
+
+		super( "glyphs", null, false);
+
+		this._needsUpdate = false;
+
+		/**
+		 *
+		 * @type {Array.<TypographicGlyph>}
+		 * @private
+		 */
+		this._value = null;
+
+		// value
+
+		// 1. collapsed whiteSpace;
+		// this._textContent = Whitespace.collapseWhitespaceOnString( this.content, this.getWhiteSpace() );
+
+		// 2. glyphs
+		// this._textContentGlyphs = this._textContent.split( '' ).map( ( char ) => this._font.getTypographicGlyph( char ) );
+
+		// 3. Inlines
+		// this._textContentInlines = this._textContentGlyphs.map( ( glyphBox ) => glyphBox.asInlineGlyph() );
+
+		// 4. kerning
+		// this._buildContentKernings();
+
+
+		// 5.? Apply margin and padding on first and last inlines
+		// if( this._textContentInlines.length ) {
+		//
+		// 	// First gets left side
+		// 	this._textContentInlines[0].paddingLeft = this._padding.w;
+		// 	this._textContentInlines[0].marginLeft = this._margin.w;
+		//
+		// 	// Last gets right side
+		// 	const lastIndex = this._textContentInlines.length - 1;
+		// 	this._textContentInlines[lastIndex].paddingRight = this._padding.y;
+		// 	this._textContentInlines[lastIndex].marginRight = this._margin.y;
+		//
+		// }
+
+	}
+
+	process( element ) {
+
+		if( !element._font._fontVariant ) return;
+		if( !element._font._fontVariant.isReady ) return;
+
+		this._value = element._whiteSpace._whiteSpacedContent.split( '' ).map( ( char ) => element._font._fontVariant.getTypographicGlyph( char ) );
+
+		// @TODO : Even if the value is removed it should trigger a rebuild.
+		if( this._value ) element._inlines._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @return {Array.<TypographicGlyph>}
+	 */
+	get value() { return this._value; }
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/ColorProperty.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class ColorProperty extends StyleColorProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'color', defaultValue, false );
+
+		this._input = defaultValue;
+
+		this.output = this._outputValue;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._input === 'inherit' ) {
+
+			this._value.set( this.getInheritedInput( element ) );
+
+		} else {
+
+			this._value.set( this._input);
+
+		}
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/LineBreakProperty.js
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
+
+class LineBreakProperty extends BaseProperty{
+
+	constructor( defaultValue = "- ,.:?!\n" ) {
+
+		super( "lineBreak", defaultValue, true );
+
+		/**
+		 *
+		 * @type {"mandatory"|"possible"|null}
+		 * @private
+		 */
+		this._newLineBreakability = null;
+
+
+	}
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		this._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		const newLineBreakability = element._whiteSpace._newLineBreakability;
+
+		if( !element._inlines._value ) return;
+
+		// update inlines properties before inline placements in lines
+		for ( let i = 0; i < element._inlines._value.length; i++ ) {
+
+
+			const inline = element._inlines._value[ i ];
+			const char = inline.char;
+
+			// Whitespace Breakability ---------------------------------------------------------------------------------------
+			let lineBreak = null;
+
+			// could be inlineBlock without char
+			if( char !== undefined ) {
+
+				// @question : Does it worth to be strategy? I don't really think so
+				if ( newLineBreakability !== 'nowrap' ) {
+
+					if ( this._value.includes( char ) || char.match( /\s/g ) ) lineBreak = 'possible';
+
+				}
+
+				if ( char.match( /\n/g ) ) {
+
+					lineBreak = newLineBreakability;
+
+				}
+
+			}
+
+			inline.lineBreak = lineBreak;
+
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @return {string}
+	 */
+	get value() { return this._value; }
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/InlineLayouter.js
+
+
+class InlineLayouter extends BaseProperty {
+
+	constructor() {
+
+		super( 'layouter', null, false );
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 * @private
+		 */
+		this._value = null;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		// find the first text parent;
+		this._value = element._parent.find( (p) => { return p.isUI && p.isText } );
+
+		this._needsProcess = true;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 */
+	process( element ) { 	/* eslint-enable no-unused-vars */
+
+
+		// layout has been changed
+		if( this._value ) {
+
+			this._value._layouter._needsProcess = true;
+
+		}
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/background/BackgroundColorPropertyInline.js
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
+
+class BackgroundColorPropertyInline extends StyleColorProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'backgroundColor', defaultValue, false );
+
+		this._allowsInherit = false;
+
+		this._input = 'transparent';
+
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		// @TODO : Changes multiple mesh visibility
+		// element._backgroundMesh.visible = !(this._input === 'none' || this._input === 'transparent');
+
+		if( this._input === 'inherit' ) {
+
+			this._value.set(this.getInheritedInput( element ));
+
+		} else {
+
+			this._value.set( this._input );
+
+		}
+
+	}
+
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontStylePropertyInline.js
+
+
+
+class FontStylePropertyInline extends FontStyleProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+	}
+
+	_computeFromInherited( element ) {
+
+		super._computeFromInherited(element);
+
+		element._font._needsUpdate = true;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontWeightPropertyInline.js
+
+
+class FontWeightPropertyInline extends FontWeightProperty {
+
+	constructor( def ) {
+
+		super( def );
+
+	}
+
+	computeOutputValue( element ) {
+
+		const input = this.getInheritedInput( element );
+
+		const converted = LOOK_UP_TABLE[ input ];
+
+		if ( converted ) {
+
+			this._value = converted
+
+		} else {
+
+			this._value = input;
+
+		}
+
+		element._font._needsUpdate = true;
+
+	}
+
+}
+
+// @TODO : Evaluate the need
+const LOOK_UP_TABLE = {
+	// 'light'		: '100',
+	// 'normal'	: '400',
+	// 'bold' 		: '700',
+	// 'bolder' 	: '900'
+}
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontFamilyPropertyInline.js
+
+
+
+
+
+class FontFamilyPropertyInline extends FontFamilyProperty {
+
+	constructor( ) {
+
+		super( 'fontFamily', 'inherit' , true );
+
+		this._input = 'inherit';
+		this._needsUpdate = true;
+
+		// configure
+		this._allowsInherit = false;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		let abstractedInput = this._inheritedInput;
+
+		if( abstractedInput === 'inherit' ) {
+			abstractedInput = this.getInheritedInput( element );
+		}
+
+		if( abstractedInput instanceof FontFamily ) {
+
+			this._value = abstractedInput;
+			element._font._needsUpdate = true;
+
+		} else if ( typeof abstractedInput === 'string' ) {
+
+			// string - family
+			const fontFamily = font_FontLibrary.getFontFamily(abstractedInput);
+
+			if( fontFamily ) {
+
+				this._value = fontFamily;
+				element._font._needsUpdate = true;
+
+			} else {
+
+				console.warn( `(.style) fontFamily, the font '${abstractedInput}' is not registered. Aborted.`)
+
+			}
+
+		} else {
+
+			console.warn( `(.style) fontFamily requires a registered fontFamily instance, or the id of a registered fontFamily.`);
+			console.warn( `If you want to set a specific font, please use .font property instead.`);
+
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @return {any|FontFamilyPropertyInline|null}
+	 */
+	get value() { return this._value; }
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/WhiteSpacePropertyInline.js
+
+
+/**
+ * @typedef  StringCollapserStrategy
+ * @type {(textContent:{string}) => string}
+ */
+
+
+/**
+ * @typedef  InlineCollapserStrategy
+ * @type {(line:{Line}) => number }
+ */
+
+
+/**
+ * @typedef InlineWrapperStrategy
+ * @type {(inlines:{Array}, i:{number}, lastInlineOffset:{number}, options:Object<string,any>) => boolean}
+ */
+
+class WhiteSpacePropertyInline extends WhiteSpaceProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+
+		this._whiteSpacedContent = '';
+
+		// strategies
+
+		/**
+		 *
+		 * @type {StringCollapserStrategy}
+		 * @internal
+		 */
+		this._stringCollapser = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {InlineCollapserStrategy}
+		 * @internal
+		 */
+		this._inlineCollapser = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {InlineWrapperStrategy}
+		 * @internal
+		 */
+		this._inlineWrapper = this.emptyStrategyLogic;
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @private
+	 */
+	_computeFromInherited( element ) { /* eslint-enable no-unused-vars */
+		super._computeFromInherited( element );
+
+		// set strategies
+		this._newLineBreakability = _newlineBreakability( this._value );
+
+		// REDO Whitespace Matrix
+		// https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
+
+		switch ( this._value ) {
+
+			case 'nowrap':
+			case 'normal':
+				this._stringCollapser = _stringCollapseNewLine;
+				break;
+
+			case 'pre-line':
+				this._stringCollapser = _stringCollapseMultipleSpace;
+				break;
+
+			default:
+				this._stringCollapser = _stringCollapseNothing;
+
+		}
+
+		switch ( this._value ) {
+
+			case 'pre-line':
+			case 'nowrap':
+			case 'normal':
+				this._inlineCollapser = _inlineCollapseMultiple;
+				break;
+
+			case 'pre-wrap':
+				this._inlineCollapser = _inlineCollapseSingle;
+				break;
+
+			default:
+				this._inlineCollapser = _inlineCollapseNothing;
+
+		}
+
+		switch ( this._value ) {
+
+			case 'pre-line':
+			case 'pre-wrap':
+			case 'normal':
+				this._inlineWrapper = _lineBreakerWrapText;
+				break;
+
+			case 'pre':
+				this._inlineWrapper = _lineBreakerLineBreakOnly;
+				break;
+
+			default:
+				this._inlineWrapper = _lineBreakerNoWrap;
+
+		}
+
+
+		this._needsProcess = true;
+
+	}
+
+
+	process( element ) {
+
+		// @TODO: Make a property for Text -> inlineCollapser
+		if( element.isInline && !element.isInlineBlock ) {
+
+			this._whiteSpacedContent = this._stringCollapser( element._textContent._value );
+
+			element._glyphs._needsProcess = true;
+
+		}
+	}
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace#whitespace_helper_functions
+ *
+ * Throughout, whitespace is defined as one of the characters
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * This does not use Javascript's "\s" because that includes non-breaking
+ * spaces (and also some other characters).
+ **/
+const WHITE_CHARS = { '\t': '\u0009', '\n': '\u000A', '\r': '\u000D', ' ': '\u0020' };
+
+/**
+ * Get the breakability of a newline character according to white-space property
+ *
+ * @param whiteSpace
+ * @returns {string|null}
+ */
+const _newlineBreakability = function ( whiteSpace ) {
+
+	switch ( whiteSpace ) {
+
+		case 'pre':
+		case 'pre-wrap':
+		case 'pre-line':
+			return 'mandatory';
+	}
+
+	// case NOWRAP:
+	// case NORMAL:
+	// default:
+
+	return null;
+
+};
+
+
+// STRING COLLAPSER -----------------------------------------------------
+
+/**
+ * Treat newlines as spaces
+ * @param textContentValue
+ * @return {*}
+ * @private
+ *
+ */
+function _stringCollapseNewLine( textContentValue ) {
+
+	return _stringCollapseMultipleSpace( textContentValue.replace( /\n/g, ' ' ) );
+
+}
+
+/**
+ * Treat sequences of spaces as only one space
+ * @param textContentValue
+ * @return {*}
+ * @private
+ */
+function _stringCollapseMultipleSpace( textContentValue ) {
+
+	return textContentValue.replace( /[ ]{2,}/g, ' ' );
+
+}
+
+/**
+ *
+ * @param textContentValue
+ * @return {*}
+ * @private
+ */
+function _stringCollapseNothing ( textContentValue ) {
+	return textContentValue;
+}
+
+// LineBreakers -----------------------------------------------------
+
+/**
+ *
+ * @param inlines
+ * @param i
+ * @param lastInlineOffset
+ * @param options
+ * @return {boolean}
+ * @private
+ */
+function _lineBreakerWrapText( inlines, i, lastInlineOffset, options ) {
+	const inline = inlines[ i ];
+
+	// prevent additional computation if line break is mandatory
+	if ( inline.lineBreak === 'mandatory' ) return true;
+
+	// ?? Missing letterSpacing ?
+	// prevent additional computation if this character already exceed the available size
+	if ( lastInlineOffset + inline.xadvance + inline.xoffset + inline.kerning > options.INNER_WIDTH ) return true;
+
+
+	const nextBreak = _distanceToNextBreak( inlines, i, options );
+	return _shouldFriendlyBreak( inlines[ i - 1 ], lastInlineOffset, nextBreak, options );
+}
+
+/* eslint-disable no-unused-vars */
+/**
+ *
+ * @param inlines
+ * @param i
+ * @param lastInlineOffset
+ * @param options
+ * @return {boolean}
+ * @private
+ */
+function _lineBreakerLineBreakOnly( inlines, i, lastInlineOffset, options ) { /* eslint-enable no-unused-vars */
+
+	return inlines[ i ].lineBreak === 'mandatory';
+
+}
+
+/**
+ *
+ * @return {boolean}
+ * @private
+ */
+function _lineBreakerNoWrap() {
+	return false;
+}
+
+// Inlines collapser -----------------------------------------------------
+
+/**
+ *
+ * @param line
+ * @return {number}
+ * @private
+ */
+function _inlineCollapseSingle( line ) {
+	if ( !line[ 0 ] ) return 0;
+
+	const firstInline = line[ 0 ];
+	const lastInline = line[ line.length - 1 ];
+
+	// only process whiteChars glyphs inlines
+	// if( firstInline.glyph && whiteChars[firstInline.glyph] && line.length > 1 ){
+	if ( firstInline.char && firstInline.char === '\n' && line.length > 1 ) {
+	// if ( firstInline.char && WHITE_CHARS[ firstInline.char ] && line.length > 1 ) {
+
+		_collapseLeftInlines( [ firstInline ], line[ 1 ] );
+
+	}
+
+	// if( lastInline.glyph && whiteChars[lastInline.glyph] && line.length > 1 ){
+	if ( lastInline.char && lastInline.char === '\n' && line.length > 1 ) {
+	// if ( lastInline.char && WHITE_CHARS[ firstInline.char ] && line.length > 1 ) {
+
+		_collapseRightInlines( [ lastInline ], line[ line.length - 2 ] );
+
+	}
+
+	return firstInline.offsetX;
+
+}
+
+function _inlineCollapseMultiple( line ) {
+
+	if ( !line[ 0 ] ) return 0;
+
+	let inlinesToCollapse = [];
+	let collapsingTarget;
+	// collect starting whitespaces to collapse
+	for ( let i = 0; i < line.length; i++ ) {
+
+		const inline = line[ i ];
+
+		if ( inline.char && WHITE_CHARS[ inline.char ] && line.length > i ) {
+
+			inlinesToCollapse.push( inline );
+			collapsingTarget = line[ i + 1 ];
+			continue;
+
+		}
+
+		break;
+
+	}
+
+	_collapseLeftInlines( inlinesToCollapse, collapsingTarget );
+
+
+	inlinesToCollapse = [];
+	collapsingTarget = null;
+	// collect ending whitespace to collapse
+	for ( let i = line.length - 1; i > 0; i-- ) {
+
+		const inline = line[ i ];
+		if ( inline.char && WHITE_CHARS[ inline.char ] && i > 0 ) {
+
+			inlinesToCollapse.push( inline );
+			collapsingTarget = line[ i - 1 ];
+			continue;
+
+		}
+
+		break;
+
+	}
+
+	_collapseRightInlines( inlinesToCollapse, collapsingTarget );
+
+	return line[ 0 ].offsetX;
+
+}
+
+/**
+ *
+ * @param line
+ * @return {number|*}
+ * @private
+ */
+function _inlineCollapseNothing( line ) {
+
+	if ( !line[ 0 ] ) return 0;
+	return line[ 0 ].offsetX;
+
+}
+
+/***********************************************************************************************************************
+ * Internal logics
+ **********************************************************************************************************************/
+
+
+/**
+ * Visually collapse inlines from right to left ( endtrim )
+ * @param {Array} inlines
+ * @param targetInline
+ * @private
+ */
+function _collapseRightInlines( inlines, targetInline ) {
+
+	if ( !targetInline ) return;
+
+	for ( let i = 0; i < inlines.length; i++ ) {
+
+		const inline = inlines[ i ];
+
+		inline.fontFactor = 0;
+		inline.offsetX = targetInline.offsetX + targetInline.cumulativeWidth;
+		inline.cumulativeWidth = 0;
+
+	}
+
+}
+
+/**
+ * Visually collapse inlines from left to right (starttrim)
+ * @param {Array} inlines
+ * @param targetInline
+ * @private
+ */
+function _collapseLeftInlines( inlines, targetInline ) {
+
+	if ( !targetInline ) return;
+
+	for ( let i = 0; i < inlines.length; i++ ) {
+
+		const inline = inlines[ i ];
+
+		inline.fontFactor = 0;
+		// inline.offsetX += inline.cumulativeWidth;
+		inline.offsetX = targetInline.offsetX;
+		inline.cumulativeWidth = 0;
+
+	}
+
+}
+
+/**
+ * get the distance in world coord to the next glyph defined
+ * as break-line-safe ( like whitespace for instance )
+ * @private
+ */
+function _distanceToNextBreak( inlines, currentIdx, options, accu ) {
+
+	accu = accu || 0;
+
+	// end of the text
+	if ( !inlines[ currentIdx ] ) return accu;
+
+	const inline = inlines[ currentIdx ];
+
+	// const kerning = inline.kerning ? inline.kerning : 0;
+	// const xoffset = inline.xoffset ? inline.xoffset : 0;
+	// const xadvance = inline.xadvance ? inline.xadvance : inline.width;
+
+	// if inline.lineBreak is set, it is 'mandatory' or 'possible'
+	if ( inline.lineBreak ) return accu + inline.xadvance;
+
+	// no line break is possible on this character
+	return _distanceToNextBreak(
+		inlines,
+		currentIdx + 1,
+		options,
+		accu + inline.xadvance + inline.xoffset + inline.kerning + options.LETTERSPACING
+	);
+
+}
+
+/**
+ * Test if we should line break here even if the current glyph is not out of boundary.
+ * It might be necessary if the last glyph was break-line-friendly (whitespace, hyphen..)
+ * and the distance to the next friendly glyph is out of boundary.
+ */
+function _shouldFriendlyBreak( prevChar, lastInlineOffset, nextBreak, options ) {
+
+	// We can't check if last glyph is break-line-friendly it does not exist
+	if ( !prevChar || !prevChar.char ) return false;
+
+	// Next break-line-friendly glyph is inside boundary
+	if ( lastInlineOffset + nextBreak < options.INNER_WIDTH ) return false;
+
+	// Previous glyph was break-line-friendly
+	return options.BREAKON.indexOf( prevChar.char ) > -1;
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/LetterSpacingPropertyInline.js
+
+
+class LetterSpacingPropertyInline extends LetterSpacingProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._input = 'inherit';
+		this._allowsInherit = false;
+
+		this.computeOutputValue = this._computeFromInherited;
+
+	}
+
+	_computeFromInherited( element ) {
+		super._computeFromInherited( element );
+
+
+		element._fontSize._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontSizePropertyInline.js
+
+
+
+class FontSizePropertyInline extends FontSizeProperty {
+
+	constructor( ) {
+
+		super();
+
+		// Configure
+		this._allowsInherit = false;
+
+	}
+
+	computeOutputValue( element ) {
+
+		// this._value = this._inheritedInput;
+
+		if( element._font._fontVariant ) {
+			element._bounds._needsProcess = true;
+			element._layouter._needsProcess = true;
+		}
+
+		// @TODO : FontRelatives properties?? instead of manual registering them?
+		// for em dimensions;
+		element._margin._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		if( !element._font._fontVariant || !element._font._fontVariant.isReady ) return;
+
+		const SCALE_MULT = this._value / element._font._fontVariant.typographic.size;
+
+		// First character won't be kerned with its void lefthanded peer
+		const inlines = element._inlines._value;
+
+		// update inlines properties before inline placements in lines
+		for ( let i = 0; i < inlines.length; i++ ) {
+
+			const inline = inlines[ i ];
+
+			inline.resetOffsets();
+
+			inline.fontSize = this._value;
+			inline.fontFactor = SCALE_MULT;
+
+		}
+
+		// element._layouter._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get value() { return this._value; }
+
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/geometry/SegmentsPropertyText.js
+
+
+class SegmentsPropertyText extends SegmentsProperty {
+
+	constructor() {
+
+		super( 'segments', 1, false );
+
+		this._notInheritedValue = undefined;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		this._notInheritedValue = this._value;
+		if ( this._notInheritedValue === 'inherit' ) {
+
+			this._notInheritedValue = this.getInheritedInput( element );
+
+		}
+
+		element._layouter._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @param {number|"inherit"} v
+	 */
+	set value( v ) {
+
+		if ( this._value === v ) return;
+
+		this._value = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @override
+	 * @return {number}
+	 */
+	get value() {
+
+		if ( this._value === 'inherit' ) return this._notInheritedValue;
+
+		return this._value;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/geometry/SegmentsPropertyInline.js
+
+
+class SegmentsPropertyInline extends SegmentsPropertyText {
+
+	constructor() {
+
+		super();
+
+		this._value = 'inherit';
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontKerningPropertyInline.js
+
+
+
+class FontKerningPropertyInline extends FontKerningProperty {
+
+	constructor() {
+
+		super();
+
+		// Configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+	}
+
+
+	_computeFromInherited( element ) {
+		super._computeFromInherited(element);
+
+		// this._needsProcess = true;
+		element._parent._value._layouter._needsProcess = false;
+	}
+
+	process( element ) {
+
+		// apply kerning on inlines
+		if ( this._value !== 'none' ) {
+
+			// First character won't be kerned with its void lefthanded peer
+			const whiteSpacedContent = element._whiteSpace._whiteSpacedContent;
+			const inlines = element._inlines._value;
+			for ( let i = 1; i < inlines.length; i++ ) {
+
+				const glyphPair = whiteSpacedContent[ i - 1 ] + whiteSpacedContent[ i ];
+
+				// retrieve the kerning from the font
+				// as set it on the characterInline
+				inlines[ i ].kerning = element._font._fontVariant.getKerningAmount( glyphPair );
+
+			}
+
+		}
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/hierarchy/ChildrenInline.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class ChildrenInline extends BaseProperty {
+
+	constructor() {
+
+		super( 'children', null, false );
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._uis = [];
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update requested when :
+	 * 		- New child has been added
+	 * 		- Existing child has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) { /* eslint-enable no-unused-vars */
+
+		// this._compute( element );
+		//
+		// this._needsProcess = true;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Process when :
+	 * 		- Existing child visibility changed
+	 *
+	 * @param element
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */
+
+		// this._compute( element );
+
+	}
+
+	/* eslint-disable no-unused-vars */ _compute( element ) { /* eslint-enable no-unused-vars */
+
+		// this._uis = element.children.filter( child => child.visible && child.isUI );
+		//
+		// this._inlines = this._uis.filter( child => child.isInline );
+
+	}
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		// this._inlines = null;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./node_modules/three/examples/jsm/utils/BufferGeometryUtils.js
+
+
+function computeTangents() {
+
+	throw new Error( 'BufferGeometryUtils: computeTangents renamed to computeMikkTSpaceTangents.' );
+
+}
+
+function computeMikkTSpaceTangents( geometry, MikkTSpace, negateSign = true ) {
+
+	if ( ! MikkTSpace || ! MikkTSpace.isReady ) {
+
+		throw new Error( 'BufferGeometryUtils: Initialized MikkTSpace library required.' );
+
+	}
+
+	if ( ! geometry.hasAttribute( 'position' ) || ! geometry.hasAttribute( 'normal' ) || ! geometry.hasAttribute( 'uv' ) ) {
+
+		throw new Error( 'BufferGeometryUtils: Tangents require "position", "normal", and "uv" attributes.' );
+
+	}
+
+	function getAttributeArray( attribute ) {
+
+		if ( attribute.normalized || attribute.isInterleavedBufferAttribute ) {
+
+			const dstArray = new Float32Array( attribute.getCount() * attribute.itemSize );
+
+			for ( let i = 0, j = 0; i < attribute.getCount(); i ++ ) {
+
+				dstArray[ j ++ ] = attribute.getX( i );
+				dstArray[ j ++ ] = attribute.getY( i );
+
+				if ( attribute.itemSize > 2 ) {
+
+					dstArray[ j ++ ] = attribute.getZ( i );
+
+				}
+
+			}
+
+			return dstArray;
+
+		}
+
+		if ( attribute.array instanceof Float32Array ) {
+
+			return attribute.array;
+
+		}
+
+		return new Float32Array( attribute.array );
+
+	}
+
+	// MikkTSpace algorithm requires non-indexed input.
+
+	const _geometry = geometry.index ? geometry.toNonIndexed() : geometry;
+
+	// Compute vertex tangents.
+
+	const tangents = MikkTSpace.generateTangents(
+
+		getAttributeArray( _geometry.attributes.position ),
+		getAttributeArray( _geometry.attributes.normal ),
+		getAttributeArray( _geometry.attributes.uv )
+
+	);
+
+	// Texture coordinate convention of glTF differs from the apparent
+	// default of the MikkTSpace library; .w component must be flipped.
+
+	if ( negateSign ) {
+
+		for ( let i = 3; i < tangents.length; i += 4 ) {
+
+			tangents[ i ] *= - 1;
+
+		}
+
+	}
+
+	//
+
+	_geometry.setAttribute( 'tangent', new BufferAttribute( tangents, 4 ) );
+
+	if ( geometry !== _geometry ) {
+
+		geometry.copy( _geometry );
+
+	}
+
+	return geometry;
+
+}
+
+/**
+ * @param  {Array<BufferGeometry>} geometries
+ * @param  {Boolean} useGroups
+ * @return {BufferGeometry}
+ */
+function mergeBufferGeometries( geometries, useGroups = false ) {
+
+	const isIndexed = geometries[ 0 ].index !== null;
+
+	const attributesUsed = new Set( Object.keys( geometries[ 0 ].attributes ) );
+	const morphAttributesUsed = new Set( Object.keys( geometries[ 0 ].morphAttributes ) );
+
+	const attributes = {};
+	const morphAttributes = {};
+
+	const morphTargetsRelative = geometries[ 0 ].morphTargetsRelative;
+
+	const mergedGeometry = new external_THREE_namespaceObject.BufferGeometry();
+
+	let offset = 0;
+
+	for ( let i = 0; i < geometries.length; ++ i ) {
+
+		const geometry = geometries[ i ];
+		let attributesCount = 0;
+
+		// ensure that all geometries are indexed, or none
+
+		if ( isIndexed !== ( geometry.index !== null ) ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. All geometries must have compatible attributes; make sure index attribute exists among all geometries, or in none of them.' );
+			return null;
+
+		}
+
+		// gather attributes, exit early if they're different
+
+		for ( const name in geometry.attributes ) {
+
+			if ( ! attributesUsed.has( name ) ) {
+
+				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. All geometries must have compatible attributes; make sure "' + name + '" attribute exists among all geometries, or in none of them.' );
+				return null;
+
+			}
+
+			if ( attributes[ name ] === undefined ) attributes[ name ] = [];
+
+			attributes[ name ].push( geometry.attributes[ name ] );
+
+			attributesCount ++;
+
+		}
+
+		// ensure geometries have the same number of attributes
+
+		if ( attributesCount !== attributesUsed.size ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. Make sure all geometries have the same number of attributes.' );
+			return null;
+
+		}
+
+		// gather morph attributes, exit early if they're different
+
+		if ( morphTargetsRelative !== geometry.morphTargetsRelative ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. .morphTargetsRelative must be consistent throughout all geometries.' );
+			return null;
+
+		}
+
+		for ( const name in geometry.morphAttributes ) {
+
+			if ( ! morphAttributesUsed.has( name ) ) {
+
+				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '.  .morphAttributes must be consistent throughout all geometries.' );
+				return null;
+
+			}
+
+			if ( morphAttributes[ name ] === undefined ) morphAttributes[ name ] = [];
+
+			morphAttributes[ name ].push( geometry.morphAttributes[ name ] );
+
+		}
+
+		// gather .userData
+
+		mergedGeometry.userData.mergedUserData = mergedGeometry.userData.mergedUserData || [];
+		mergedGeometry.userData.mergedUserData.push( geometry.userData );
+
+		if ( useGroups ) {
+
+			let count;
+
+			if ( isIndexed ) {
+
+				count = geometry.index.count;
+
+			} else if ( geometry.attributes.position !== undefined ) {
+
+				count = geometry.attributes.position.count;
+
+			} else {
+
+				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. The geometry must have either an index or a position attribute' );
+				return null;
+
+			}
+
+			mergedGeometry.addGroup( offset, count, i );
+
+			offset += count;
+
+		}
+
+	}
+
+	// merge indices
+
+	if ( isIndexed ) {
+
+		let indexOffset = 0;
+		const mergedIndex = [];
+
+		for ( let i = 0; i < geometries.length; ++ i ) {
+
+			const index = geometries[ i ].index;
+
+			for ( let j = 0; j < index.count; ++ j ) {
+
+				mergedIndex.push( index.getX( j ) + indexOffset );
+
+			}
+
+			indexOffset += geometries[ i ].attributes.position.count;
+
+		}
+
+		mergedGeometry.setIndex( mergedIndex );
+
+	}
+
+	// merge attributes
+
+	for ( const name in attributes ) {
+
+		const mergedAttribute = mergeBufferAttributes( attributes[ name ] );
+
+		if ( ! mergedAttribute ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the ' + name + ' attribute.' );
+			return null;
+
+		}
+
+		mergedGeometry.setAttribute( name, mergedAttribute );
+
+	}
+
+	// merge morph attributes
+
+	for ( const name in morphAttributes ) {
+
+		const numMorphTargets = morphAttributes[ name ][ 0 ].length;
+
+		if ( numMorphTargets === 0 ) break;
+
+		mergedGeometry.morphAttributes = mergedGeometry.morphAttributes || {};
+		mergedGeometry.morphAttributes[ name ] = [];
+
+		for ( let i = 0; i < numMorphTargets; ++ i ) {
+
+			const morphAttributesToMerge = [];
+
+			for ( let j = 0; j < morphAttributes[ name ].length; ++ j ) {
+
+				morphAttributesToMerge.push( morphAttributes[ name ][ j ][ i ] );
+
+			}
+
+			const mergedMorphAttribute = mergeBufferAttributes( morphAttributesToMerge );
+
+			if ( ! mergedMorphAttribute ) {
+
+				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the ' + name + ' morphAttribute.' );
+				return null;
+
+			}
+
+			mergedGeometry.morphAttributes[ name ].push( mergedMorphAttribute );
+
+		}
+
+	}
+
+	return mergedGeometry;
+
+}
+
+/**
+ * @param {Array<BufferAttribute>} attributes
+ * @return {BufferAttribute}
+ */
+function mergeBufferAttributes( attributes ) {
+
+	let TypedArray;
+	let itemSize;
+	let normalized;
+	let arrayLength = 0;
+
+	for ( let i = 0; i < attributes.length; ++ i ) {
+
+		const attribute = attributes[ i ];
+
+		if ( attribute.isInterleavedBufferAttribute ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. InterleavedBufferAttributes are not supported.' );
+			return null;
+
+		}
+
+		if ( TypedArray === undefined ) TypedArray = attribute.array.constructor;
+		if ( TypedArray !== attribute.array.constructor ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.array must be of consistent array types across matching attributes.' );
+			return null;
+
+		}
+
+		if ( itemSize === undefined ) itemSize = attribute.itemSize;
+		if ( itemSize !== attribute.itemSize ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.itemSize must be consistent across matching attributes.' );
+			return null;
+
+		}
+
+		if ( normalized === undefined ) normalized = attribute.normalized;
+		if ( normalized !== attribute.normalized ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.normalized must be consistent across matching attributes.' );
+			return null;
+
+		}
+
+		arrayLength += attribute.array.length;
+
+	}
+
+	const array = new TypedArray( arrayLength );
+	let offset = 0;
+
+	for ( let i = 0; i < attributes.length; ++ i ) {
+
+		array.set( attributes[ i ].array, offset );
+
+		offset += attributes[ i ].array.length;
+
+	}
+
+	return new external_THREE_namespaceObject.BufferAttribute( array, itemSize, normalized );
+
+}
+
+/**
+ * @param {Array<BufferAttribute>} attributes
+ * @return {Array<InterleavedBufferAttribute>}
+ */
+function interleaveAttributes( attributes ) {
+
+	// Interleaves the provided attributes into an InterleavedBuffer and returns
+	// a set of InterleavedBufferAttributes for each attribute
+	let TypedArray;
+	let arrayLength = 0;
+	let stride = 0;
+
+	// calculate the length and type of the interleavedBuffer
+	for ( let i = 0, l = attributes.length; i < l; ++ i ) {
+
+		const attribute = attributes[ i ];
+
+		if ( TypedArray === undefined ) TypedArray = attribute.array.constructor;
+		if ( TypedArray !== attribute.array.constructor ) {
+
+			console.error( 'AttributeBuffers of different types cannot be interleaved' );
+			return null;
+
+		}
+
+		arrayLength += attribute.array.length;
+		stride += attribute.itemSize;
+
+	}
+
+	// Create the set of buffer attributes
+	const interleavedBuffer = new InterleavedBuffer( new TypedArray( arrayLength ), stride );
+	let offset = 0;
+	const res = [];
+	const getters = [ 'getX', 'getY', 'getZ', 'getW' ];
+	const setters = [ 'setX', 'setY', 'setZ', 'setW' ];
+
+	for ( let j = 0, l = attributes.length; j < l; j ++ ) {
+
+		const attribute = attributes[ j ];
+		const itemSize = attribute.itemSize;
+		const count = attribute.count;
+		const iba = new InterleavedBufferAttribute( interleavedBuffer, itemSize, offset, attribute.normalized );
+		res.push( iba );
+
+		offset += itemSize;
+
+		// Move the data for each attribute into the new interleavedBuffer
+		// at the appropriate offset
+		for ( let c = 0; c < count; c ++ ) {
+
+			for ( let k = 0; k < itemSize; k ++ ) {
+
+				iba[ setters[ k ] ]( c, attribute[ getters[ k ] ]( c ) );
+
+			}
+
+		}
+
+	}
+
+	return res;
+
+}
+
+// returns a new, non-interleaved version of the provided attribute
+function deinterleaveAttribute( attribute ) {
+
+	const cons = attribute.data.array.constructor;
+	const count = attribute.count;
+	const itemSize = attribute.itemSize;
+	const normalized = attribute.normalized;
+
+	const array = new cons( count * itemSize );
+	let newAttribute;
+	if ( attribute.isInstancedInterleavedBufferAttribute ) {
+
+		newAttribute = new InstancedBufferAttribute( array, itemSize, normalized, attribute.meshPerAttribute );
+
+	} else {
+
+		newAttribute = new BufferAttribute( array, itemSize, normalized );
+
+	}
+
+	for ( let i = 0; i < count; i ++ ) {
+
+		newAttribute.setX( i, attribute.getX( i ) );
+
+		if ( itemSize >= 2 ) {
+
+			newAttribute.setY( i, attribute.getY( i ) );
+
+		}
+
+		if ( itemSize >= 3 ) {
+
+			newAttribute.setZ( i, attribute.getZ( i ) );
+
+		}
+
+		if ( itemSize >= 4 ) {
+
+			newAttribute.setW( i, attribute.getW( i ) );
+
+		}
+
+	}
+
+	return newAttribute;
+
+}
+
+// deinterleaves all attributes on the geometry
+function deinterleaveGeometry( geometry ) {
+
+	const attributes = geometry.attributes;
+	const morphTargets = geometry.morphTargets;
+	const attrMap = new Map();
+
+	for ( const key in attributes ) {
+
+		const attr = attributes[ key ];
+		if ( attr.isInterleavedBufferAttribute ) {
+
+			if ( ! attrMap.has( attr ) ) {
+
+				attrMap.set( attr, deinterleaveAttribute( attr ) );
+
+			}
+
+			attributes[ key ] = attrMap.get( attr );
+
+		}
+
+	}
+
+	for ( const key in morphTargets ) {
+
+		const attr = morphTargets[ key ];
+		if ( attr.isInterleavedBufferAttribute ) {
+
+			if ( ! attrMap.has( attr ) ) {
+
+				attrMap.set( attr, deinterleaveAttribute( attr ) );
+
+			}
+
+			morphTargets[ key ] = attrMap.get( attr );
+
+		}
+
+	}
+
+}
+
+/**
+ * @param {Array<BufferGeometry>} geometry
+ * @return {number}
+ */
+function estimateBytesUsed( geometry ) {
+
+	// Return the estimated memory used by this geometry in bytes
+	// Calculate using itemSize, count, and BYTES_PER_ELEMENT to account
+	// for InterleavedBufferAttributes.
+	let mem = 0;
+	for ( const name in geometry.attributes ) {
+
+		const attr = geometry.getAttribute( name );
+		mem += attr.count * attr.itemSize * attr.array.BYTES_PER_ELEMENT;
+
+	}
+
+	const indices = geometry.getIndex();
+	mem += indices ? indices.count * indices.itemSize * indices.array.BYTES_PER_ELEMENT : 0;
+	return mem;
+
+}
+
+/**
+ * @param {BufferGeometry} geometry
+ * @param {number} tolerance
+ * @return {BufferGeometry}
+ */
+function mergeVertices( geometry, tolerance = 1e-4 ) {
+
+	tolerance = Math.max( tolerance, Number.EPSILON );
+
+	// Generate an index buffer if the geometry doesn't have one, or optimize it
+	// if it's already available.
+	const hashToIndex = {};
+	const indices = geometry.getIndex();
+	const positions = geometry.getAttribute( 'position' );
+	const vertexCount = indices ? indices.count : positions.count;
+
+	// next value for triangle indices
+	let nextIndex = 0;
+
+	// attributes and new attribute arrays
+	const attributeNames = Object.keys( geometry.attributes );
+	const tmpAttributes = {};
+	const tmpMorphAttributes = {};
+	const newIndices = [];
+	const getters = [ 'getX', 'getY', 'getZ', 'getW' ];
+	const setters = [ 'setX', 'setY', 'setZ', 'setW' ];
+
+	// Initialize the arrays, allocating space conservatively. Extra
+	// space will be trimmed in the last step.
+	for ( let i = 0, l = attributeNames.length; i < l; i ++ ) {
+
+		const name = attributeNames[ i ];
+		const attr = geometry.attributes[ name ];
+
+		tmpAttributes[ name ] = new BufferAttribute(
+			new attr.array.constructor( attr.count * attr.itemSize ),
+			attr.itemSize,
+			attr.normalized
+		);
+
+		const morphAttr = geometry.morphAttributes[ name ];
+		if ( morphAttr ) {
+
+			tmpMorphAttributes[ name ] = new BufferAttribute(
+				new morphAttr.array.constructor( morphAttr.count * morphAttr.itemSize ),
+				morphAttr.itemSize,
+				morphAttr.normalized
+			);
+
+		}
+
+	}
+
+	// convert the error tolerance to an amount of decimal places to truncate to
+	const decimalShift = Math.log10( 1 / tolerance );
+	const shiftMultiplier = Math.pow( 10, decimalShift );
+	for ( let i = 0; i < vertexCount; i ++ ) {
+
+		const index = indices ? indices.getX( i ) : i;
+
+		// Generate a hash for the vertex attributes at the current index 'i'
+		let hash = '';
+		for ( let j = 0, l = attributeNames.length; j < l; j ++ ) {
+
+			const name = attributeNames[ j ];
+			const attribute = geometry.getAttribute( name );
+			const itemSize = attribute.itemSize;
+
+			for ( let k = 0; k < itemSize; k ++ ) {
+
+				// double tilde truncates the decimal value
+				hash += `${ ~ ~ ( attribute[ getters[ k ] ]( index ) * shiftMultiplier ) },`;
+
+			}
+
+		}
+
+		// Add another reference to the vertex if it's already
+		// used by another index
+		if ( hash in hashToIndex ) {
+
+			newIndices.push( hashToIndex[ hash ] );
+
+		} else {
+
+			// copy data to the new index in the temporary attributes
+			for ( let j = 0, l = attributeNames.length; j < l; j ++ ) {
+
+				const name = attributeNames[ j ];
+				const attribute = geometry.getAttribute( name );
+				const morphAttr = geometry.morphAttributes[ name ];
+				const itemSize = attribute.itemSize;
+				const newarray = tmpAttributes[ name ];
+				const newMorphArrays = tmpMorphAttributes[ name ];
+
+				for ( let k = 0; k < itemSize; k ++ ) {
+
+					const getterFunc = getters[ k ];
+					const setterFunc = setters[ k ];
+					newarray[ setterFunc ]( nextIndex, attribute[ getterFunc ]( index ) );
+
+					if ( morphAttr ) {
+
+						for ( let m = 0, ml = morphAttr.length; m < ml; m ++ ) {
+
+							newMorphArrays[ m ][ setterFunc ]( nextIndex, morphAttr[ m ][ getterFunc ]( index ) );
+
+						}
+
+					}
+
+				}
+
+			}
+
+			hashToIndex[ hash ] = nextIndex;
+			newIndices.push( nextIndex );
+			nextIndex ++;
+
+		}
+
+	}
+
+	// generate result BufferGeometry
+	const result = geometry.clone();
+	for ( const name in geometry.attributes ) {
+
+		const tmpAttribute = tmpAttributes[ name ];
+
+		result.setAttribute( name, new BufferAttribute(
+			tmpAttribute.array.slice( 0, nextIndex * tmpAttribute.itemSize ),
+			tmpAttribute.itemSize,
+			tmpAttribute.normalized,
+		) );
+
+		if ( ! ( name in tmpMorphAttributes ) ) continue;
+
+		for ( let j = 0; j < tmpMorphAttributes[ name ].length; j ++ ) {
+
+			const tmpMorphAttribute = tmpMorphAttributes[ name ][ j ];
+
+			result.morphAttributes[ name ][ j ] = new BufferAttribute(
+				tmpMorphAttribute.array.slice( 0, nextIndex * tmpMorphAttribute.itemSize ),
+				tmpMorphAttribute.itemSize,
+				tmpMorphAttribute.normalized,
+			);
+
+		}
+
+	}
+
+	// indices
+
+	result.setIndex( newIndices );
+
+	return result;
+
+}
+
+/**
+ * @param {BufferGeometry} geometry
+ * @param {number} drawMode
+ * @return {BufferGeometry}
+ */
+function toTrianglesDrawMode( geometry, drawMode ) {
+
+	if ( drawMode === TrianglesDrawMode ) {
+
+		console.warn( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Geometry already defined as triangles.' );
+		return geometry;
+
+	}
+
+	if ( drawMode === TriangleFanDrawMode || drawMode === TriangleStripDrawMode ) {
+
+		let index = geometry.getIndex();
+
+		// generate index if not present
+
+		if ( index === null ) {
+
+			const indices = [];
+
+			const position = geometry.getAttribute( 'position' );
+
+			if ( position !== undefined ) {
+
+				for ( let i = 0; i < position.count; i ++ ) {
+
+					indices.push( i );
+
+				}
+
+				geometry.setIndex( indices );
+				index = geometry.getIndex();
+
+			} else {
+
+				console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Undefined position attribute. Processing not possible.' );
+				return geometry;
+
+			}
+
+		}
+
+		//
+
+		const numberOfTriangles = index.count - 2;
+		const newIndices = [];
+
+		if ( drawMode === TriangleFanDrawMode ) {
+
+			// gl.TRIANGLE_FAN
+
+			for ( let i = 1; i <= numberOfTriangles; i ++ ) {
+
+				newIndices.push( index.getX( 0 ) );
+				newIndices.push( index.getX( i ) );
+				newIndices.push( index.getX( i + 1 ) );
+
+			}
+
+		} else {
+
+			// gl.TRIANGLE_STRIP
+
+			for ( let i = 0; i < numberOfTriangles; i ++ ) {
+
+				if ( i % 2 === 0 ) {
+
+					newIndices.push( index.getX( i ) );
+					newIndices.push( index.getX( i + 1 ) );
+					newIndices.push( index.getX( i + 2 ) );
+
+				} else {
+
+					newIndices.push( index.getX( i + 2 ) );
+					newIndices.push( index.getX( i + 1 ) );
+					newIndices.push( index.getX( i ) );
+
+				}
+
+			}
+
+		}
+
+		if ( ( newIndices.length / 3 ) !== numberOfTriangles ) {
+
+			console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Unable to generate correct amount of triangles.' );
+
+		}
+
+		// build final geometry
+
+		const newGeometry = geometry.clone();
+		newGeometry.setIndex( newIndices );
+		newGeometry.clearGroups();
+
+		return newGeometry;
+
+	} else {
+
+		console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Unknown draw mode:', drawMode );
+		return geometry;
+
+	}
+
+}
+
+/**
+ * Calculates the morphed attributes of a morphed/skinned BufferGeometry.
+ * Helpful for Raytracing or Decals.
+ * @param {Mesh | Line | Points} object An instance of Mesh, Line or Points.
+ * @return {Object} An Object with original position/normal attributes and morphed ones.
+ */
+function computeMorphedAttributes( object ) {
+
+	if ( object.geometry.isBufferGeometry !== true ) {
+
+		console.error( 'THREE.BufferGeometryUtils: Geometry is not of type BufferGeometry.' );
+		return null;
+
+	}
+
+	const _vA = new Vector3();
+	const _vB = new Vector3();
+	const _vC = new Vector3();
+
+	const _tempA = new Vector3();
+	const _tempB = new Vector3();
+	const _tempC = new Vector3();
+
+	const _morphA = new Vector3();
+	const _morphB = new Vector3();
+	const _morphC = new Vector3();
+
+	function _calculateMorphedAttributeData(
+		object,
+		attribute,
+		morphAttribute,
+		morphTargetsRelative,
+		a,
+		b,
+		c,
+		modifiedAttributeArray
+	) {
+
+		_vA.fromBufferAttribute( attribute, a );
+		_vB.fromBufferAttribute( attribute, b );
+		_vC.fromBufferAttribute( attribute, c );
+
+		const morphInfluences = object.morphTargetInfluences;
+
+		if ( morphAttribute && morphInfluences ) {
+
+			_morphA.set( 0, 0, 0 );
+			_morphB.set( 0, 0, 0 );
+			_morphC.set( 0, 0, 0 );
+
+			for ( let i = 0, il = morphAttribute.length; i < il; i ++ ) {
+
+				const influence = morphInfluences[ i ];
+				const morph = morphAttribute[ i ];
+
+				if ( influence === 0 ) continue;
+
+				_tempA.fromBufferAttribute( morph, a );
+				_tempB.fromBufferAttribute( morph, b );
+				_tempC.fromBufferAttribute( morph, c );
+
+				if ( morphTargetsRelative ) {
+
+					_morphA.addScaledVector( _tempA, influence );
+					_morphB.addScaledVector( _tempB, influence );
+					_morphC.addScaledVector( _tempC, influence );
+
+				} else {
+
+					_morphA.addScaledVector( _tempA.sub( _vA ), influence );
+					_morphB.addScaledVector( _tempB.sub( _vB ), influence );
+					_morphC.addScaledVector( _tempC.sub( _vC ), influence );
+
+				}
+
+			}
+
+			_vA.add( _morphA );
+			_vB.add( _morphB );
+			_vC.add( _morphC );
+
+		}
+
+		if ( object.isSkinnedMesh ) {
+
+			object.boneTransform( a, _vA );
+			object.boneTransform( b, _vB );
+			object.boneTransform( c, _vC );
+
+		}
+
+		modifiedAttributeArray[ a * 3 + 0 ] = _vA.x;
+		modifiedAttributeArray[ a * 3 + 1 ] = _vA.y;
+		modifiedAttributeArray[ a * 3 + 2 ] = _vA.z;
+		modifiedAttributeArray[ b * 3 + 0 ] = _vB.x;
+		modifiedAttributeArray[ b * 3 + 1 ] = _vB.y;
+		modifiedAttributeArray[ b * 3 + 2 ] = _vB.z;
+		modifiedAttributeArray[ c * 3 + 0 ] = _vC.x;
+		modifiedAttributeArray[ c * 3 + 1 ] = _vC.y;
+		modifiedAttributeArray[ c * 3 + 2 ] = _vC.z;
+
+	}
+
+	const geometry = object.geometry;
+	const material = object.material;
+
+	let a, b, c;
+	const index = geometry.index;
+	const positionAttribute = geometry.attributes.position;
+	const morphPosition = geometry.morphAttributes.position;
+	const morphTargetsRelative = geometry.morphTargetsRelative;
+	const normalAttribute = geometry.attributes.normal;
+	const morphNormal = geometry.morphAttributes.position;
+
+	const groups = geometry.groups;
+	const drawRange = geometry.drawRange;
+	let i, j, il, jl;
+	let group;
+	let start, end;
+
+	const modifiedPosition = new Float32Array( positionAttribute.count * positionAttribute.itemSize );
+	const modifiedNormal = new Float32Array( normalAttribute.count * normalAttribute.itemSize );
+
+	if ( index !== null ) {
+
+		// indexed buffer geometry
+
+		if ( Array.isArray( material ) ) {
+
+			for ( i = 0, il = groups.length; i < il; i ++ ) {
+
+				group = groups[ i ];
+
+				start = Math.max( group.start, drawRange.start );
+				end = Math.min( ( group.start + group.count ), ( drawRange.start + drawRange.count ) );
+
+				for ( j = start, jl = end; j < jl; j += 3 ) {
+
+					a = index.getX( j );
+					b = index.getX( j + 1 );
+					c = index.getX( j + 2 );
+
+					_calculateMorphedAttributeData(
+						object,
+						positionAttribute,
+						morphPosition,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedPosition
+					);
+
+					_calculateMorphedAttributeData(
+						object,
+						normalAttribute,
+						morphNormal,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedNormal
+					);
+
+				}
+
+			}
+
+		} else {
+
+			start = Math.max( 0, drawRange.start );
+			end = Math.min( index.count, ( drawRange.start + drawRange.count ) );
+
+			for ( i = start, il = end; i < il; i += 3 ) {
+
+				a = index.getX( i );
+				b = index.getX( i + 1 );
+				c = index.getX( i + 2 );
+
+				_calculateMorphedAttributeData(
+					object,
+					positionAttribute,
+					morphPosition,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedPosition
+				);
+
+				_calculateMorphedAttributeData(
+					object,
+					normalAttribute,
+					morphNormal,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedNormal
+				);
+
+			}
+
+		}
+
+	} else {
+
+		// non-indexed buffer geometry
+
+		if ( Array.isArray( material ) ) {
+
+			for ( i = 0, il = groups.length; i < il; i ++ ) {
+
+				group = groups[ i ];
+
+				start = Math.max( group.start, drawRange.start );
+				end = Math.min( ( group.start + group.count ), ( drawRange.start + drawRange.count ) );
+
+				for ( j = start, jl = end; j < jl; j += 3 ) {
+
+					a = j;
+					b = j + 1;
+					c = j + 2;
+
+					_calculateMorphedAttributeData(
+						object,
+						positionAttribute,
+						morphPosition,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedPosition
+					);
+
+					_calculateMorphedAttributeData(
+						object,
+						normalAttribute,
+						morphNormal,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedNormal
+					);
+
+				}
+
+			}
+
+		} else {
+
+			start = Math.max( 0, drawRange.start );
+			end = Math.min( positionAttribute.count, ( drawRange.start + drawRange.count ) );
+
+			for ( i = start, il = end; i < il; i += 3 ) {
+
+				a = i;
+				b = i + 1;
+				c = i + 2;
+
+				_calculateMorphedAttributeData(
+					object,
+					positionAttribute,
+					morphPosition,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedPosition
+				);
+
+				_calculateMorphedAttributeData(
+					object,
+					normalAttribute,
+					morphNormal,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedNormal
+				);
 
-		if( this.uniforms )
-			this.uniforms.opacity.value = v;
+			}
+
+		}
 
 	}
 
-	/**
-	 * The color will be the diffuse uniform
-	 * @returns {number}
-	 */
-	get opacity() {
+	const morphedPositionAttribute = new Float32BufferAttribute( modifiedPosition, 3 );
+	const morphedNormalAttribute = new Float32BufferAttribute( modifiedNormal, 3 );
 
-		return this.uniforms.opacity.value;
+	return {
 
-	}
+		positionAttribute: positionAttribute,
+		normalAttribute: normalAttribute,
+		morphedPositionAttribute: morphedPositionAttribute,
+		morphedNormalAttribute: morphedNormalAttribute
 
-	/**
-	 * The color will be the diffuse uniform
-	 * @returns {Color}
-	 */
-	get color() {
+	};
 
-		return this.uniforms.diffuse.value;
+}
 
-	}
+function mergeGroups( geometry ) {
 
-	/**
-	 *
-	 * @param {Color} v
-	 */
-	set color( v ) {
+	if ( geometry.groups.length === 0 ) {
 
-		this.uniforms.diffuse.value = v;
+		console.warn( 'THREE.BufferGeometryUtils.mergeGroups(): No groups are defined. Nothing to merge.' );
+		return geometry;
 
 	}
 
-}
-
-;// CONCATENATED MODULE: ./src/components/Block.js
+	let groups = geometry.groups;
 
+	// sort groups by material index
 
+	groups = groups.sort( ( a, b ) => {
 
+		if ( a.materialIndex !== b.materialIndex ) return a.materialIndex - b.materialIndex;
 
+		return a.start - b.start;
 
+	} );
 
+	// create index for non-indexed geometries
 
+	if ( geometry.getIndex() === null ) {
 
-/**
+		const positionAttribute = geometry.getAttribute( 'position' );
+		const indices = [];
 
-Job:
-- Update a Block component
-- Calls BoxComponent's API to position its children box components
-- Calls InlineManager's API to position its children inline components
-- Call creation and update functions of its background planes
- */
+		for ( let i = 0; i < positionAttribute.count; i += 3 ) {
 
+			indices.push( i, i + 1, i + 2 );
 
+		}
 
-class Block extends BoxComponent {
+		geometry.setIndex( indices );
 
-	constructor( options ) {
+	}
 
-		super( options );
+	// sort index
 
-		this.isBlock = true;
+	const index = geometry.getIndex();
 
-		//
+	const newIndices = [];
 
-		this.size = new external_THREE_namespaceObject.Vector2( 1, 1 );
+	for ( let i = 0; i < groups.length; i ++ ) {
 
-		// this._main = new Frame( this.getBackgroundMaterial() );
-		this._material = new FrameMaterial();
+		const group = groups[ i ];
 
-		/**
-		 *
-		 * @type {Frame}
-		 * @protected
-		 */
-		this._main = new Frame( this._material );
+		const groupStart = group.start;
+		const groupLength = groupStart + group.count;
 
-		this._materialMediation = { ...FrameMaterialUtils.mediation };
+		for ( let j = groupStart; j < groupLength; j ++ ) {
 
-		// This is for hiddenOverflow to work
-		this._main.onBeforeRender = () => {
+			newIndices.push( index.getX( j ) );
 
-			if ( this.updateClippingPlanes ) {
+		}
 
-				this.updateClippingPlanes();
+	}
 
-			}
+	geometry.dispose(); // Required to force buffer recreation
+	geometry.setIndex( newIndices );
 
-		};
+	// update groups indices
 
-		this.add( this._main );
+	let start = 0;
 
-		// Lastly set the options parameters to this object, which will trigger an update
+	for ( let i = 0; i < groups.length; i ++ ) {
 
-		this.set( options );
+		const group = groups[ i ];
 
-		this._transferToMaterial();
+		group.start = start;
+		start += group.count;
 
 	}
 
-	get frame() { return this._main; }
-	////////////
-	//  UPDATE
-	////////////
+	// merge groups
 
-	parseParams() {}
+	let currentGroup = groups[ 0 ];
 
-	updateLayout() {
+	geometry.groups = [ currentGroup ];
 
-		// Get temporary dimension
-		this.computeBoxProperties();
+	for ( let i = 1; i < groups.length; i ++ ) {
 
-		const WIDTH = this.offsetWidth;
-		const HEIGHT = this.offsetHeight;
+		const group = groups[ i ];
 
-		if ( !WIDTH || !HEIGHT ) {
-
-			console.warn( 'Block got no dimension from its parameters or from children parameters' );
-			return;
+		if ( currentGroup.materialIndex === group.materialIndex ) {
 
-		}
+			currentGroup.count += group.count;
 
-		this.size.set( WIDTH, HEIGHT );
-		this._main.scale.set( WIDTH, HEIGHT, 1 );
+		} else {
 
-		// if ( this._main ) this.updateBackgroundMaterial();
+			currentGroup = group;
+			geometry.groups.push( currentGroup );
 
-		this._main.renderOrder = this.getParentsNumber();
+		}
 
-		// Position this element according to earlier parent computation.
-		// Delegate to BoxComponent.
+	}
 
-		if ( this.autoLayout ) {
+	return geometry;
 
-			this.setPosFromParentRecords();
+}
 
-		}
 
-		// Position inner elements according to dimensions and layout parameters.
-		// Delegate to BoxComponent.
 
-		if ( this.childrenInlines.length ) {
+;// CONCATENATED MODULE: ./src/core/properties/rendering/RendererPropertyInline.js
 
-			this.computeInlinesPosition();
 
-		}
 
-		this.computeChildrenPosition();
 
-		// We check if this block is the root component,
-		// because most of the time the user wants to set the
-		// root component's z position themselves
-		if ( this.parentUI ) {
+class RendererPropertyInline extends BaseProperty{
 
-			this.position.z = this.getOffset();
+	constructor() {
 
-		}
+		super( 'renderer' );
 
 	}
 
-	//
-
-	updateInner() {
-
-		// We check if this block is the root component,
-		// because most of the time the user wants to set the
-		// root component's z position themselves
-		if ( this.parentUI ) {
 
-			this.position.z = this.getOffset();
+	render( element ) {
 
-		}
+		if( !element._inlines._value || !element._inlines._value.length ) return;
 
-		// if ( this._main ) this.updateBackgroundMaterial();
+			const charactersAsGeometries = element._inlines._value.map(
+				inline => {
+					return element._font._fontVariant.getGeometricGlyph( inline, element )
+						.translate( inline.offsetX, inline.offsetY, 0 )
+				}
+			);
 
-	}
+			const mergedGeom = mergeBufferGeometries( charactersAsGeometries );
 
-}
+			element.setFontMesh( new external_THREE_namespaceObject.Mesh( mergedGeom, element.fontMaterial) );
 
-;// CONCATENATED MODULE: ./src/utils/deepDelete.js
+			element._fontMesh.renderOrder = Infinity;
 
 
-/** Recursively erase THE CHILDREN of the passed object */
-function deepDelete( object3D ) {
 
-	object3D.children.forEach( ( child ) => {
+	}
 
-		if ( child.children.length > 0 ) deepDelete( child );
+}
 
-		object3D.remove( child );
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/TextAlignPropertyInline.js
 
-		UpdateManager.disposeOf( child );
 
-		if ( child.material ) child.material.dispose();
 
-		if ( child.geometry ) child.geometry.dispose();
+class TextAlignPropertyInline extends TextAlignProperty {
 
-	} );
+	constructor() {
 
-	object3D.children = [];
+		super();
 
-}
+		// configure
+		this._allowsInherit = false;
+		this._needsUpdate = false;
 
-/* harmony default export */ const utils_deepDelete = (deepDelete);
+	}
 
-;// CONCATENATED MODULE: ./node_modules/three/examples/jsm/utils/BufferGeometryUtils.js
 
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
+		this._value = this._inheritedInput;
 
-function computeTangents( geometry ) {
+		element._layouter._needsProcess = true;
 
-	geometry.computeTangents();
-	console.warn( 'THREE.BufferGeometryUtils: .computeTangents() has been removed. Use BufferGeometry.computeTangents() instead.' );
+	}
 
 }
 
-/**
-	 * @param  {Array<BufferGeometry>} geometries
-	 * @param  {Boolean} useGroups
-	 * @return {BufferGeometry}
-	 */
-function mergeBufferGeometries( geometries, useGroups = false ) {
-
-	const isIndexed = geometries[ 0 ].index !== null;
-
-	const attributesUsed = new Set( Object.keys( geometries[ 0 ].attributes ) );
-	const morphAttributesUsed = new Set( Object.keys( geometries[ 0 ].morphAttributes ) );
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/VerticalAlignPropertyInline.js
 
-	const attributes = {};
-	const morphAttributes = {};
 
-	const morphTargetsRelative = geometries[ 0 ].morphTargetsRelative;
 
-	const mergedGeometry = new external_THREE_namespaceObject.BufferGeometry();
+class VerticalAlignPropertyInline extends VerticalAlignProperty {
 
-	let offset = 0;
+	constructor() {
 
-	for ( let i = 0; i < geometries.length; ++ i ) {
+		super();
 
-		const geometry = geometries[ i ];
-		let attributesCount = 0;
+		// configure
+		this._allowsInherit = false;
+		this._needsUpdate = false;
 
-		// ensure that all geometries are indexed, or none
+	}
 
-		if ( isIndexed !== ( geometry.index !== null ) ) {
 
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. All geometries must have compatible attributes; make sure index attribute exists among all geometries, or in none of them.' );
-			return null;
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-		}
+		this._value = this._inheritedInput;
 
-		// gather attributes, exit early if they're different
+		this._needsProcess = true;
+		element._layouter._needsProcess = true;
 
-		for ( const name in geometry.attributes ) {
+	}
 
-			if ( ! attributesUsed.has( name ) ) {
+	process( element ) {
 
-				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. All geometries must have compatible attributes; make sure "' + name + '" attribute exists among all geometries, or in none of them.' );
-				return null;
+		if( !element._inlines.value ) return;
 
-			}
+		element._inlines.value.forEach( inline => {
+			inline.verticalAlign = this._value;
+		});
 
-			if ( attributes[ name ] === undefined ) attributes[ name ] = [];
+	}
 
-			attributes[ name ].push( geometry.attributes[ name ] );
+}
 
-			attributesCount ++;
+;// CONCATENATED MODULE: ./src/elements/basic/InlineElement.js
 
-		}
 
-		// ensure geometries have the same number of attributes
 
-		if ( attributesCount !== attributesUsed.size ) {
 
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. Make sure all geometries have the same number of attributes.' );
-			return null;
 
-		}
 
-		// gather morph attributes, exit early if they're different
 
-		if ( morphTargetsRelative !== geometry.morphTargetsRelative ) {
 
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. .morphTargetsRelative must be consistent throughout all geometries.' );
-			return null;
 
-		}
 
-		for ( const name in geometry.morphAttributes ) {
 
-			if ( ! morphAttributesUsed.has( name ) ) {
 
-				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '.  .morphAttributes must be consistent throughout all geometries.' );
-				return null;
 
-			}
 
-			if ( morphAttributes[ name ] === undefined ) morphAttributes[ name ] = [];
 
-			morphAttributes[ name ].push( geometry.morphAttributes[ name ] );
 
-		}
 
-		// gather .userData
 
-		mergedGeometry.userData.mergedUserData = mergedGeometry.userData.mergedUserData || [];
-		mergedGeometry.userData.mergedUserData.push( geometry.userData );
 
-		if ( useGroups ) {
 
-			let count;
 
-			if ( isIndexed ) {
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-				count = geometry.index.count;
 
-			} else if ( geometry.attributes.position !== undefined ) {
+/* eslint-enable no-unused-vars */
 
-				count = geometry.attributes.position.count;
+class InlineElement extends MeshUIBaseElement {
 
-			} else {
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 */
+	constructor( values = { }) {
 
-				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. The geometry must have either an index or a position attribute' );
-				return null;
+		const properties = {};
+		InlineElement.definePropertiesValues( properties, values );
 
-			}
+		super( properties, values );
 
-			mergedGeometry.addGroup( offset, count, i );
+		InlineElement.init( this );
 
-			offset += count;
+	}
 
-		}
+	/* eslint-disable no-unused-vars */
+	/**
+	 * A Text Element can only contains inline elements
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) { /* eslint-enable no-unused-vars */
 
-	}
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
 
-	// merge indices
+		for ( let i = 0; i < arguments.length; i++ ) {
 
-	if ( isIndexed ) {
+			const argument = arguments[ i ];
 
-		let indexOffset = 0;
-		const mergedIndex = [];
+			if ( !argument.isUI || argument.isInline ) {
 
-		for ( let i = 0; i < geometries.length; ++ i ) {
+				validChildren.push( argument );
 
-			const index = geometries[ i ].index;
+				argument.position.z = 0.005;
 
-			for ( let j = 0; j < index.count; ++ j ) {
+			} else {
 
-				mergedIndex.push( index.getX( j ) + indexOffset );
+				console.warn( 'Block element can only contain Box elements.', argument );
 
 			}
 
-			indexOffset += geometries[ i ].attributes.position.count;
-
 		}
 
-		mergedGeometry.setIndex( mergedIndex );
+		return super.add( ...validChildren );
 
 	}
 
-	// merge attributes
-
-	for ( const name in attributes ) {
+	_rebuildParentUI = () => {
 
-		const mergedAttribute = mergeBufferAttributes( attributes[ name ] );
+		super._rebuildParentUI();
 
-		if ( ! mergedAttribute ) {
+		this._layouter._needsUpdate = true;
 
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the ' + name + ' attribute.' );
-			return null;
+	}
 
-		}
+	set textContent( value ) {
 
-		mergedGeometry.setAttribute( name, mergedAttribute );
+		this._textContent.value = value;
 
 	}
 
-	// merge morph attributes
+	get textContent () { return this._textContent._value; }
 
-	for ( const name in morphAttributes ) {
+	set invertAlpha( value ) {
 
-		const numMorphTargets = morphAttributes[ name ][ 0 ].length;
+		this._invertAlpha.value = value;
 
-		if ( numMorphTargets === 0 ) break;
+	}
 
-		mergedGeometry.morphAttributes = mergedGeometry.morphAttributes || {};
-		mergedGeometry.morphAttributes[ name ] = [];
+	get invertAlpha () { return this._invertAlpha._value; }
 
-		for ( let i = 0; i < numMorphTargets; ++ i ) {
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {  /* eslint-enable no-unused-vars */
 
-			const morphAttributesToMerge = [];
+		if( !properties.children ) properties.children = ChildrenInline;
+		if( !properties.textContent ) properties.textContent = TextContentInline;
+		if( !properties.glyphs ) properties.glyphs = GlyphsProperty;
+		if( !properties.inlines ) properties.inlines = InlinesProperty;
+		if( !properties.layouter ) properties.layouter = InlineLayouter;
+		if( !properties.renderer ) properties.renderer = RendererPropertyInline;
 
-			for ( let j = 0; j < morphAttributes[ name ].length; ++ j ) {
 
-				morphAttributesToMerge.push( morphAttributes[ name ][ j ][ i ] );
+		if( !properties.fontFamily ) properties.fontFamily = FontFamilyPropertyInline;
+		if( !properties.fontWeight ) properties.fontWeight = FontWeightPropertyInline;
+		if( !properties.fontStyle ) properties.fontStyle = FontStylePropertyInline;
+		if( !properties.fontSize ) properties.fontSize = FontSizePropertyInline;
+		if( !properties.color ) properties.color = ColorProperty;
+		if( !properties.backgroundColor ) properties.backgroundColor = BackgroundColorPropertyInline;
+		if( !properties.lineBreak ) properties.lineBreak = LineBreakProperty;
+		if( !properties.letterSpacing ) properties.letterSpacing = LetterSpacingPropertyInline;
+		if( !properties.whiteSpace ) properties.whiteSpace = WhiteSpacePropertyInline;
+		if( !properties.segments ) properties.segments = SegmentsPropertyInline;
+		if( !properties.textAlign ) properties.textAlign = TextAlignPropertyInline;
+		if( !properties.verticalAlign ) properties.verticalAlign = VerticalAlignPropertyInline;
 
-			}
+		if( !properties.fontKerning ) properties.fontKerning = FontKerningPropertyInline;
 
-			const mergedMorphAttribute = mergeBufferAttributes( morphAttributesToMerge );
+		// if( !properties.inlines ) properties.inlines = InlinesProperty;
 
-			if ( ! mergedMorphAttribute ) {
+		if( !values.uiType ) values.uiType = 'inline';
 
-				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the ' + name + ' morphAttribute.' );
-				return null;
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init( element ) {
 
+		Object.defineProperties( element, {
+				isInline: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
 			}
+		);
 
-			mergedGeometry.morphAttributes[ name ].push( mergedMorphAttribute );
+	}
+}
 
-		}
+;// CONCATENATED MODULE: ./src/core/properties/TextContentText.js
 
-	}
 
-	return mergedGeometry;
 
-}
+class TextContentText extends TextContentEmpty{
 
-/**
- * @param {Array<BufferAttribute>} attributes
- * @return {BufferAttribute}
- */
-function mergeBufferAttributes( attributes ) {
+	constructor() {
 
-	let TypedArray;
-	let itemSize;
-	let normalized;
-	let arrayLength = 0;
+		super( "textContent", null, false );
 
-	for ( let i = 0; i < attributes.length; ++ i ) {
+		this._needsUpdate = false;
 
-		const attribute = attributes[ i ];
+	}
 
-		if ( attribute.isInterleavedBufferAttribute ) {
+	set value( value ) {
 
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. InterleavedBufferAttributes are not supported.' );
-			return null;
+		// If content hasn't change, dont update it
+		if( this._value !== value ) {
 
-		}
+			this._value = value;
 
-		if ( TypedArray === undefined ) TypedArray = attribute.array.constructor;
-		if ( TypedArray !== attribute.array.constructor ) {
+			console.log( this._value );
 
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.array must be of consistent array types across matching attributes.' );
-			return null;
+			this._needsUpdate = true;
 
 		}
 
-		if ( itemSize === undefined ) itemSize = attribute.itemSize;
-		if ( itemSize !== attribute.itemSize ) {
+	}
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
+
+		// prevent multiple update
+		this._needsUpdate = false;
+
+		// Remove all its children (Inlines)
+		for ( let i = element.children.length - 1 ; i >= 0; i-- ) {
+			const child = element.children[ i ];
+			if( child.isUI ) {
+
+				element.remove( child );
+				child.clear();
 
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.itemSize must be consistent across matching attributes.' );
-			return null;
+			}
 
 		}
 
-		if ( normalized === undefined ) normalized = attribute.normalized;
-		if ( normalized !== attribute.normalized ) {
-
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.normalized must be consistent across matching attributes.' );
-			return null;
+		// Rebuild its child list
+		element._children._uis = [];
 
+		// If a value, add a child
+		if( this._value ) {
+			element.add( new InlineElement({name:'anonymousInline',textContent:this._value}));
 		}
 
-		arrayLength += attribute.array.length;
 
 	}
 
-	const array = new TypedArray( arrayLength );
-	let offset = 0;
-
-	for ( let i = 0; i < attributes.length; ++ i ) {
+	process( element ) {
 
-		array.set( attributes[ i ].array, offset );
+		// If not already updated, return raw values
+		if( this._needsUpdate ) return this._value;
 
-		offset += attributes[ i ].array.length;
+		// or default traverse all children to concat textContent
+		return super.process(element);
 
 	}
 
-	return new external_THREE_namespaceObject.BufferAttribute( array, itemSize, normalized );
-
 }
 
-/**
- * @param {Array<BufferAttribute>} attributes
- * @return {Array<InterleavedBufferAttribute>}
- */
-function interleaveAttributes( attributes ) {
+;// CONCATENATED MODULE: ./src/core/elements/glyphs/Lines.js
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-	// Interleaves the provided attributes into an InterleavedBuffer and returns
-	// a set of InterleavedBufferAttributes for each attribute
-	let TypedArray;
-	let arrayLength = 0;
-	let stride = 0;
+/* eslint-enable no-unused-vars */
 
-	// calculate the the length and type of the interleavedBuffer
-	for ( let i = 0, l = attributes.length; i < l; ++ i ) {
+/**
+ * Lines represents a vertical succession of Line
+ */
+class Lines extends Array {
 
-		const attribute = attributes[ i ];
+	/**
+	 *
+	 * @param {Line} items
+	 */
+	constructor(...items) {
+		super(...items);
 
-		if ( TypedArray === undefined ) TypedArray = attribute.array.constructor;
-		if ( TypedArray !== attribute.array.constructor ) {
+		/**
+		 * The maximum width of Line items
+		 * @type {number}
+		 */
+		this.width = 0;
 
-			console.error( 'AttributeBuffers of different types cannot be interleaved' );
-			return null;
+		/**
+		 * The addition of height of any Line
+		 * @type {number}
+		 */
+		this.height = 0;
 
-		}
+	}
 
-		arrayLength += attribute.array.length;
-		stride += attribute.itemSize;
+}
 
-	}
+;// CONCATENATED MODULE: ./src/core/properties/TextLayouter.js
 
-	// Create the set of buffer attributes
-	const interleavedBuffer = new InterleavedBuffer( new TypedArray( arrayLength ), stride );
-	let offset = 0;
-	const res = [];
-	const getters = [ 'getX', 'getY', 'getZ', 'getW' ];
-	const setters = [ 'setX', 'setY', 'setZ', 'setW' ];
 
-	for ( let j = 0, l = attributes.length; j < l; j ++ ) {
 
-		const attribute = attributes[ j ];
-		const itemSize = attribute.itemSize;
-		const count = attribute.count;
-		const iba = new InterleavedBufferAttribute( interleavedBuffer, itemSize, offset, attribute.normalized );
-		res.push( iba );
 
-		offset += itemSize;
+class TextLayouter extends BaseProperty {
 
-		// Move the data for each attribute into the new interleavedBuffer
-		// at the appropriate offset
-		for ( let c = 0; c < count; c ++ ) {
+	constructor() {
 
-			for ( let k = 0; k < itemSize; k ++ ) {
+		super( 'layouter', null, false );
 
-				iba[ setters[ k ] ]( c, attribute[ getters[ k ] ]( c ) );
+		/**
+		 *
+		 * @type {Lines}
+		 * @private
+		 */
+		this._value = null;
+	}
 
-			}
 
-		}
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */ }
 
-	}
+	/**
+	 *
+	 * @override
+	 */
+	process( element ) {
 
-	return res;
 
-}
+		let INNER_WIDTH = element._width._value;
 
-/**
- * @param {Array<BufferGeometry>} geometry
- * @return {number}
- */
-function estimateBytesUsed( geometry ) {
+		if ( element._width._auto ) {
 
-	// Return the estimated memory used by this geometry in bytes
-	// Calculate using itemSize, count, and BYTES_PER_ELEMENT to account
-	// for InterleavedBufferAttributes.
-	let mem = 0;
-	for ( const name in geometry.attributes ) {
+			INNER_WIDTH = Infinity;
 
-		const attr = geometry.getAttribute( name );
-		mem += attr.count * attr.itemSize * attr.array.BYTES_PER_ELEMENT;
+		} else {
 
-	}
+			INNER_WIDTH = element._bounds._innerWidth;
 
-	const indices = geometry.getIndex();
-	mem += indices ? indices.count * indices.itemSize * indices.array.BYTES_PER_ELEMENT : 0;
-	return mem;
+		}
 
-}
+		// Compute lines
 
-/**
- * @param {BufferGeometry} geometry
- * @param {number} tolerance
- * @return {BufferGeometry>}
- */
-function mergeVertices( geometry, tolerance = 1e-4 ) {
+		const INTERLINE = element._lineHeight._value;
 
-	tolerance = Math.max( tolerance, Number.EPSILON );
+		// Will stock the characters of each line, so that we can
+		// correct lines position before to merge
+		const lines = new Lines( new Line() );
 
-	// Generate an index buffer if the geometry doesn't have one, or optimize it
-	// if it's already available.
-	const hashToIndex = {};
-	const indices = geometry.getIndex();
-	const positions = geometry.getAttribute( 'position' );
-	const vertexCount = indices ? indices.count : positions.count;
+		let lastInlineOffset = 0;
+		element._children._inlines.forEach( ( inlineElement ) => {
 
-	// next value for triangle indices
-	let nextIndex = 0;
+			// Abort condition
 
-	// attributes and new attribute arrays
-	const attributeNames = Object.keys( geometry.attributes );
-	const attrArrays = {};
-	const morphAttrsArrays = {};
-	const newIndices = [];
-	const getters = [ 'getX', 'getY', 'getZ', 'getW' ];
+			if ( !inlineElement._inlines.value ) return;
 
-	// initialize the arrays
-	for ( let i = 0, l = attributeNames.length; i < l; i ++ ) {
+			this._resetInlines( inlineElement );
 
-		const name = attributeNames[ i ];
+			//////////////////////////////////////////////////////////////
+			// Compute offset of each children according to its dimensions
+			//////////////////////////////////////////////////////////////
 
-		attrArrays[ name ] = [];
+			// @TODO: Fontsize best fit
+			const FONTSIZE = inlineElement._fontSize._value;
 
-		const morphAttr = geometry.morphAttributes[ name ];
-		if ( morphAttr ) {
+			const LETTERSPACING = inlineElement._letterSpacing._value * FONTSIZE;
 
-			morphAttrsArrays[ name ] = new Array( morphAttr.length ).fill().map( () => [] );
+			const WHITESPACE = inlineElement._whiteSpace._value;
 
-		}
+			const BREAKON = inlineElement._lineBreak._value;
 
-	}
+			const POSITION = inlineElement._position._value;
 
-	// convert the error tolerance to an amount of decimal places to truncate to
-	const decimalShift = Math.log10( 1 / tolerance );
-	const shiftMultiplier = Math.pow( 10, decimalShift );
-	for ( let i = 0; i < vertexCount; i ++ ) {
+			const whiteSpaceOptions = {
+				WHITESPACE,
+				LETTERSPACING,
+				BREAKON,
+				INNER_WIDTH
+			}
 
-		const index = indices ? indices.getX( i ) : i;
+			const inlineWrapper = inlineElement._whiteSpace._inlineWrapper;
 
-		// Generate a hash for the vertex attributes at the current index 'i'
-		let hash = '';
-		for ( let j = 0, l = attributeNames.length; j < l; j ++ ) {
+			// @TODO : absolute inlines in Texts
+			var remember = lastInlineOffset;
+			if( POSITION === 'absolute' ){
+					lastInlineOffset = 0;
+			}
 
-			const name = attributeNames[ j ];
-			const attribute = geometry.getAttribute( name );
-			const itemSize = attribute.itemSize;
 
-			for ( let k = 0; k < itemSize; k ++ ) {
+			lastInlineOffset += inlineElement._margin._value.w + inlineElement._padding._value.w;
 
-				// double tilde truncates the decimal value
-				hash += `${ ~ ~ ( attribute[ getters[ k ] ]( index ) * shiftMultiplier ) },`;
+			inlineElement._inlines.value.forEach( ( inline, i, inlines ) => {
 
-			}
+				const line = lines[lines.length - 1];
 
-		}
+				// Line break
+				const shouldBreak = inlineWrapper(inlines,i,lastInlineOffset, whiteSpaceOptions );
 
-		// Add another reference to the vertex if it's already
-		// used by another index
-		if ( hash in hashToIndex ) {
+				if ( shouldBreak ) {
 
-			newIndices.push( hashToIndex[ hash ] );
+					lines.push( new Line( inline ) );
 
-		} else {
+					inline.offsetX = inline.xoffset;
 
-			// copy data to the new index in the attribute arrays
-			for ( let j = 0, l = attributeNames.length; j < l; j ++ ) {
+					// restart the lastInlineOffset as zero.
+					if ( inline.width === 0 ) {
+						lastInlineOffset = 0;
+						return;
+					}
 
-				const name = attributeNames[ j ];
-				const attribute = geometry.getAttribute( name );
-				const morphAttr = geometry.morphAttributes[ name ];
-				const itemSize = attribute.itemSize;
-				const newarray = attrArrays[ name ];
-				const newMorphArrays = morphAttrsArrays[ name ];
+					// compute lastInlineOffset normally
+					// except for kerning which won't apply
+					// as there is visually no lefthanded glyph to kern with
+					inline.cumulativeWidth = inline.xadvance + LETTERSPACING;
+					lastInlineOffset = inline.cumulativeWidth;
+					return;
 
-				for ( let k = 0; k < itemSize; k ++ ) {
+				}
 
-					const getterFunc = getters[ k ];
-					newarray.push( attribute[ getterFunc ]( index ) );
+				lines[ lines.length - 1 ].push( inline );
+				inline.offsetX = lastInlineOffset + inline.xoffset + inline.kerning;
 
-					if ( morphAttr ) {
+				inline.cumulativeWidth = inline.xadvance + inline.kerning + LETTERSPACING;
+				lastInlineOffset += inline.cumulativeWidth;
 
-						for ( let m = 0, ml = morphAttr.length; m < ml; m ++ ) {
+				// in case of lineBreak mandatory
+				if( line.length-1 === 1) {
 
-							newMorphArrays[ m ].push( morphAttr[ m ][ getterFunc ]( index ) );
+					if ( line[ line.length - 2 ].width === 0 ) {
 
-						}
+						// remove the offset of the character following the newline
+						inline.offsetX -= inline.xoffset;
+						lastInlineOffset -= inline.xoffset;
 
 					}
 
 				}
 
+			} );
+
+			lastInlineOffset += inlineElement._margin._value.y + inlineElement._padding._value.y;
+
+			// @TODO : absolute inlines in Texts
+			if( POSITION === 'absolute'){
+				lastInlineOffset = remember;
 			}
 
-			hashToIndex[ hash ] = nextIndex;
-			newIndices.push( nextIndex );
-			nextIndex ++;
+		} );
 
-		}
+		// Compute single line and combined lines dimensions
+		const inlineCollapser = element._whiteSpace._inlineCollapser;
 
-	}
 
-	// Generate typed arrays from new attribute arrays and update
-	// the attributeBuffers
-	const result = geometry.clone();
-	for ( let i = 0, l = attributeNames.length; i < l; i ++ ) {
+		let width = 0, height =0, lineOffsetY = 0;
 
-		const name = attributeNames[ i ];
-		const oldAttribute = geometry.getAttribute( name );
+		// calculates lines
+		lines.forEach( ( line, i ) => {
 
-		const buffer = new oldAttribute.array.constructor( attrArrays[ name ] );
-		const attribute = new BufferAttribute( buffer, oldAttribute.itemSize, oldAttribute.normalized );
+			// starts by processing whitespace, it will return a collapsed left offset
+			const whiteSpaceOffset = inlineCollapser( line );
 
-		result.setAttribute( name, attribute );
+			//
+			let lineHeight = 0;
+			let lineBase = 0;
 
-		// Update the attribute arrays
-		if ( name in morphAttrsArrays ) {
+			line.forEach( ( inline ) => {
 
-			for ( let j = 0; j < morphAttrsArrays[ name ].length; j ++ ) {
+				lineHeight = Math.max( lineHeight, inline.lineHeight );
+				lineBase = Math.max( lineBase, inline.lineBase );
 
-				const oldMorphAttribute = geometry.morphAttributes[ name ][ j ];
+				inline.offsetX -= whiteSpaceOffset;
 
-				const buffer = new oldMorphAttribute.array.constructor( morphAttrsArrays[ name ][ j ] );
-				const morphAttribute = new BufferAttribute( buffer, oldMorphAttribute.itemSize, oldMorphAttribute.normalized );
-				result.morphAttributes[ name ][ j ] = morphAttribute;
+			});
 
-			}
+			line.lineHeight = lineHeight;
+			line.lineBase = lineBase;
 
-		}
+			const baseLineDelta = lineHeight - lineBase;
 
-	}
+			if( i === 0 ){
+				lineOffsetY = -(lineHeight*INTERLINE - lineHeight) * 0.5;
+			} else {
+				lineOffsetY -= lines[i-1].lineHeight*INTERLINE;
+			}
 
-	// indices
+			line.y = lineOffsetY;
+			line.x = 0;
 
-	result.setIndex( newIndices );
+			// process yoffset
+			line.forEach( ( inline ) => {
 
-	return result;
+				inline.offsetY = lineOffsetY - inline.anchor;
 
-}
+				// VERTICAL ALIGN
+				if( inline.lineHeight < line.lineHeight ){
 
-/**
- * @param {BufferGeometry} geometry
- * @param {number} drawMode
- * @return {BufferGeometry>}
- */
-function toTrianglesDrawMode( geometry, drawMode ) {
+					if ( inline.verticalAlign === 'super' ) {
+						inline.offsetY += inline.lineBase / 5;
+					}else if( inline.verticalAlign === 'sub'){
+						inline.offsetY -= line.lineBase * 1.2 - inline.lineBase;
+					}else{
+						// Baseline
+							inline.offsetY -= line.lineBase- inline.lineBase;
+					}
 
-	if ( drawMode === TrianglesDrawMode ) {
 
-		console.warn( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Geometry already defined as triangles.' );
-		return geometry;
+				}
 
-	}
+			});
 
-	if ( drawMode === TriangleFanDrawMode || drawMode === TriangleStripDrawMode ) {
 
-		let index = geometry.getIndex();
 
-		// generate index if not present
+			height += ( line.lineHeight * INTERLINE );
+			// height += ( line.lineHeight);
 
-		if ( index === null ) {
+			//
+			line.width = 0;
+			// if this line have inlines
+			if ( line[ 0 ] ) {
 
-			const indices = [];
+				// compute its width: length from firstInline:LEFT to lastInline:RIGHT
+				// only by the length of its extremities
+				const lastInline = line[ line.length - 1 ];
 
-			const position = geometry.getAttribute( 'position' );
+				// Right + Left ( left is negative )
+				line.width = ( lastInline.offsetX + lastInline.cumulativeWidth + lastInline.paddingRight + lastInline.marginRight ) + line[ 0 ].offsetX;
 
-			if ( position !== undefined ) {
+				width = Math.max( width, line.width);
+			}
 
-				for ( let i = 0; i < position.count; i ++ ) {
+		} );
 
-					indices.push( i );
+		lines.height = height;
+		lines.width = width;
 
-				}
+		this._value = lines;
 
-				geometry.setIndex( indices );
-				index = geometry.getIndex();
+		if( INNER_WIDTH === Infinity ) {
 
-			} else {
+			element._bounds.setChildrenWidth( element, lines.width );
 
-				console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Undefined position attribute. Processing not possible.' );
-				return geometry;
+		}
 
-			}
+		if( element._height._auto ) {
+
+			element._bounds.setChildrenHeight( element, lines.height );
 
 		}
 
-		//
+		const parent = element._parent._value;
+		if( parent ) {
 
-		const numberOfTriangles = index.count - 2;
-		const newIndices = [];
+			parent._autoSize._needsProcess = true;
+			parent._flexDirection._needsProcess = true;
 
-		if ( drawMode === TriangleFanDrawMode ) {
+		}
 
-			// gl.TRIANGLE_FAN
+		element._inlineJustificator._needsProcess = true;
+		element._textAlign._needsProcess = true;
 
-			for ( let i = 1; i <= numberOfTriangles; i ++ ) {
+		element._overflow._needsUpdate = true;
 
-				newIndices.push( index.getX( 0 ) );
-				newIndices.push( index.getX( i ) );
-				newIndices.push( index.getX( i + 1 ) );
+	}
 
-			}
+	/**
+	 *
+	 * @param inlineElement
+	 * @protected
+	 */
+	_resetInlines ( inlineElement ) {
 
-		} else {
+		// ensure no collapsed remains
+		inlineElement._fontSize.process( inlineElement );
 
-			// gl.TRIANGLE_STRIP
+	}
 
-			for ( let i = 0; i < numberOfTriangles; i ++ ) {
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/TextAlignPropertyText.js
 
-				if ( i % 2 === 0 ) {
 
-					newIndices.push( index.getX( i ) );
-					newIndices.push( index.getX( i + 1 ) );
-					newIndices.push( index.getX( i + 2 ) );
 
-				} else {
+class TextAlignPropertyText extends TextAlignProperty {
 
-					newIndices.push( index.getX( i + 2 ) );
-					newIndices.push( index.getX( i + 1 ) );
-					newIndices.push( index.getX( i ) );
+	constructor() {
 
-				}
+		super();
 
-			}
+		// configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
 
-		}
+		//
+		// @TODO : strategies
 
-		if ( ( newIndices.length / 3 ) !== numberOfTriangles ) {
+	}
 
-			console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Unable to generate correct amount of triangles.' );
 
-		}
+	/* eslint-disable no-unused-vars */computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-		// build final geometry
+		this._value = this._inheritedInput;
 
-		const newGeometry = geometry.clone();
-		newGeometry.setIndex( newIndices );
-		newGeometry.clearGroups();
+		this._needsProcess = true;
 
-		return newGeometry;
+	}
 
-	} else {
+	process( element ) {
 
-		console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Unknown draw mode:', drawMode );
-		return geometry;
+		_process( element );
+
+		element._renderer._needsRender = true;
 
 	}
 
 }
 
-/**
- * Calculates the morphed attributes of a morphed/skinned BufferGeometry.
- * Helpful for Raytracing or Decals.
- * @param {Mesh | Line | Points} object An instance of Mesh, Line or Points.
- * @return {Object} An Object with original position/normal attributes and morphed ones.
- */
-function computeMorphedAttributes( object ) {
+function _process( element ) {
 
-	if ( object.geometry.isBufferGeometry !== true ) {
+	const lines = element._layouter._value;
+	const ALIGNMENT = element._textAlign._value;
+	const INNER_WIDTH = element._bounds._innerWidth;
 
-		console.error( 'THREE.BufferGeometryUtils: Geometry is not of type BufferGeometry.' );
-		return null;
+	// Start the alignment by sticking to directions : left, right, center
+	for ( let i = 0; i < lines.length; i++ ) {
 
-	}
+		const line = lines[ i ];
 
-	const _vA = new Vector3();
-	const _vB = new Vector3();
-	const _vC = new Vector3();
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
 
-	const _tempA = new Vector3();
-	const _tempB = new Vector3();
-	const _tempC = new Vector3();
+		// compute the alignment offset of the line
+		const offsetX = _computeLineOffset( element, line, i === lines.length - 1 , padding);
 
-	const _morphA = new Vector3();
-	const _morphB = new Vector3();
-	const _morphC = new Vector3();
 
-	function _calculateMorphedAttributeData(
-		object,
-		material,
-		attribute,
-		morphAttribute,
-		morphTargetsRelative,
-		a,
-		b,
-		c,
-		modifiedAttributeArray
-	) {
 
-		_vA.fromBufferAttribute( attribute, a );
-		_vB.fromBufferAttribute( attribute, b );
-		_vC.fromBufferAttribute( attribute, c );
+		// const paddingAmount = - ( padding.w + padding.y ) / 2 - ( border.w + border.y ) / 2;
+		// const paddingAmount = - ( padding.w + padding.y ) / 2;
+		const paddingAmount = ( - padding.w + padding.y ) / 2 + ( - border.w + border.y ) / 2;
 
-		const morphInfluences = object.morphTargetInfluences;
+		line.x += offsetX;
 
-		if ( material.morphTargets && morphAttribute && morphInfluences ) {
+		// apply the offset to each characters of the line
+		for ( let j = 0; j < line.length; j++ ) {
 
-			_morphA.set( 0, 0, 0 );
-			_morphB.set( 0, 0, 0 );
-			_morphC.set( 0, 0, 0 );
+			line[ j ].offsetX += offsetX - paddingAmount;
+			// line[ j ].offsetX += offsetX;
 
-			for ( let i = 0, il = morphAttribute.length; i < il; i ++ ) {
+		}
 
-				const influence = morphInfluences[ i ];
-				const morph = morphAttribute[ i ];
+		// line.x = line[ 0 ].offsetX;
 
-				if ( influence === 0 ) continue;
 
-				_tempA.fromBufferAttribute( morph, a );
-				_tempB.fromBufferAttribute( morph, b );
-				_tempC.fromBufferAttribute( morph, c );
+	}
 
-				if ( morphTargetsRelative ) {
+	// last operations for justifications alignments
+	if ( ALIGNMENT.indexOf( 'justify' ) === 0 ) {
 
-					_morphA.addScaledVector( _tempA, influence );
-					_morphB.addScaledVector( _tempB, influence );
-					_morphC.addScaledVector( _tempC, influence );
+		for ( let i = 0; i < lines.length; i++ ) {
 
-				} else {
+			const line = lines[ i ];
 
-					_morphA.addScaledVector( _tempA.sub( _vA ), influence );
-					_morphB.addScaledVector( _tempB.sub( _vB ), influence );
-					_morphC.addScaledVector( _tempC.sub( _vC ), influence );
 
-				}
+			// do not process last line for justify-left or justify-right
+			if ( ALIGNMENT.indexOf( '-' ) !== -1 && i === lines.length - 1 ) return;
 
-			}
+			// can only justify is space is remaining
+			const REMAINING_SPACE = INNER_WIDTH - line.width;
+			if ( REMAINING_SPACE <= 0 ) return;
 
-			_vA.add( _morphA );
-			_vB.add( _morphB );
-			_vC.add( _morphC );
+			// count the valid spaces to extend
+			// Do not take the first nor the last space into account
+			let validSpaces = 0;
+			for ( let j = 1; j < line.length - 1; j++ ) {
 
-		}
+				validSpaces += line[ j ].char === ' ' ? 1 : 0;
 
-		if ( object.isSkinnedMesh ) {
+			}
+			const additionalSpace = REMAINING_SPACE / validSpaces;
 
-			object.boneTransform( a, _vA );
-			object.boneTransform( b, _vB );
-			object.boneTransform( c, _vC );
 
-		}
+			// for right justification, process the loop in reverse
+			let inverter = 1;
+			if ( ALIGNMENT === 'justify-right' ) {
 
-		modifiedAttributeArray[ a * 3 + 0 ] = _vA.x;
-		modifiedAttributeArray[ a * 3 + 1 ] = _vA.y;
-		modifiedAttributeArray[ a * 3 + 2 ] = _vA.z;
-		modifiedAttributeArray[ b * 3 + 0 ] = _vB.x;
-		modifiedAttributeArray[ b * 3 + 1 ] = _vB.y;
-		modifiedAttributeArray[ b * 3 + 2 ] = _vB.z;
-		modifiedAttributeArray[ c * 3 + 0 ] = _vC.x;
-		modifiedAttributeArray[ c * 3 + 1 ] = _vC.y;
-		modifiedAttributeArray[ c * 3 + 2 ] = _vC.z;
+				line.reverse();
+				inverter = -1;
 
-	}
+			}
 
-	const geometry = object.geometry;
-	const material = object.material;
+			let incrementalOffsetX = 0;
 
-	let a, b, c;
-	const index = geometry.index;
-	const positionAttribute = geometry.attributes.position;
-	const morphPosition = geometry.morphAttributes.position;
-	const morphTargetsRelative = geometry.morphTargetsRelative;
-	const normalAttribute = geometry.attributes.normal;
-	const morphNormal = geometry.morphAttributes.position;
+			// start at ONE to avoid first space
+			for ( let j = 1; j <= line.length - 1; j++ ) {
 
-	const groups = geometry.groups;
-	const drawRange = geometry.drawRange;
-	let i, j, il, jl;
-	let group, groupMaterial;
-	let start, end;
+				// apply offset on each char
+				const inlineCharacter = line[ j ];
+				inlineCharacter.offsetX += incrementalOffsetX * inverter;
 
-	const modifiedPosition = new Float32Array( positionAttribute.count * positionAttribute.itemSize );
-	const modifiedNormal = new Float32Array( normalAttribute.count * normalAttribute.itemSize );
+				// and increase it when space
+				incrementalOffsetX += inlineCharacter.char === ' ' ? additionalSpace : 0;
 
-	if ( index !== null ) {
+			}
 
-		// indexed buffer geometry
+			// for right justification, the loop was processed in reverse
+			if ( ALIGNMENT === 'justify-right' ) {
+				line.reverse();
+			}
 
-		if ( Array.isArray( material ) ) {
 
-			for ( i = 0, il = groups.length; i < il; i ++ ) {
+		}
 
-				group = groups[ i ];
-				groupMaterial = material[ group.materialIndex ];
+	}
 
-				start = Math.max( group.start, drawRange.start );
-				end = Math.min( ( group.start + group.count ), ( drawRange.start + drawRange.count ) );
+}
 
-				for ( j = start, jl = end; j < jl; j += 3 ) {
+function _computeLineOffset ( element, line, lastLine, padding ) {
 
-					a = index.getX( j );
-					b = index.getX( j + 1 );
-					c = index.getX( j + 2 );
+	switch ( element._textAlign._value ) {
 
-					_calculateMorphedAttributeData(
-						object,
-						groupMaterial,
-						positionAttribute,
-						morphPosition,
-						morphTargetsRelative,
-						a, b, c,
-						modifiedPosition
-					);
+		case 'justify-left':
+		case 'justify':
+		case 'left':
+			return - element._bounds._innerWidth / 2 + padding.w;
 
-					_calculateMorphedAttributeData(
-						object,
-						groupMaterial,
-						normalAttribute,
-						morphNormal,
-						morphTargetsRelative,
-						a, b, c,
-						modifiedNormal
-					);
+		case 'justify-right':
+		case 'right':
+			return -line.width + ( element._bounds._innerWidth / 2 ) - padding.y;
 
-				}
 
-			}
+		case 'center':
+			return -line.width / 2;
 
-		} else {
+		case 'justify-center':
+			if ( lastLine ) {
 
-			start = Math.max( 0, drawRange.start );
-			end = Math.min( index.count, ( drawRange.start + drawRange.count ) );
+				// center alignement
+				return -line.width / 2;
 
-			for ( i = start, il = end; i < il; i += 3 ) {
+			}
 
-				a = index.getX( i );
-				b = index.getX( i + 1 );
-				c = index.getX( i + 2 );
+			// left alignment
+			return - element._bounds._innerWidth / 2 + padding.w;
 
-				_calculateMorphedAttributeData(
-					object,
-					material,
-					positionAttribute,
-					morphPosition,
-					morphTargetsRelative,
-					a, b, c,
-					modifiedPosition
-				);
+		default:
+			console.warn( `textAlign: '${element._textAlign._value}' is not valid` );
 
-				_calculateMorphedAttributeData(
-					object,
-					material,
-					normalAttribute,
-					morphNormal,
-					morphTargetsRelative,
-					a, b, c,
-					modifiedNormal
-				);
+	}
 
-			}
+}
 
-		}
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/FlexDirectionPropertyText.js
 
-	} else if ( positionAttribute !== undefined ) {
 
-		// non-indexed buffer geometry
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-		if ( Array.isArray( material ) ) {
+/* eslint-enable no-unused-vars */
 
-			for ( i = 0, il = groups.length; i < il; i ++ ) {
+class FlexDirectionPropertyText extends FlexDirectionProperty {
 
-				group = groups[ i ];
-				groupMaterial = material[ group.materialIndex ];
+	constructor( ) {
 
-				start = Math.max( group.start, drawRange.start );
-				end = Math.min( ( group.start + group.count ), ( drawRange.start + drawRange.count ) );
+		super();
 
-				for ( j = start, jl = end; j < jl; j += 3 ) {
+		this._value = this._input = 'column';
 
-					a = j;
-					b = j + 1;
-					c = j + 2;
+		// Configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
 
-					_calculateMorphedAttributeData(
-						object,
-						groupMaterial,
-						positionAttribute,
-						morphPosition,
-						morphTargetsRelative,
-						a, b, c,
-						modifiedPosition
-					);
+	}
 
-					_calculateMorphedAttributeData(
-						object,
-						groupMaterial,
-						normalAttribute,
-						morphNormal,
-						morphTargetsRelative,
-						a, b, c,
-						modifiedNormal
-					);
+	/* eslint-disable no-unused-vars */computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-				}
+		// @TODO : Evaluate the needs of this property. Could be empty
+		this._value = this._inheritedInput;
 
-			}
+	}
 
-		} else {
+}
 
-			start = Math.max( 0, drawRange.start );
-			end = Math.min( positionAttribute.count, ( drawRange.start + drawRange.count ) );
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/LineHeightPropertyInline.js
 
-			for ( i = start, il = end; i < il; i += 3 ) {
 
-				a = i;
-				b = i + 1;
-				c = i + 2;
 
-				_calculateMorphedAttributeData(
-					object,
-					material,
-					positionAttribute,
-					morphPosition,
-					morphTargetsRelative,
-					a, b, c,
-					modifiedPosition
-				);
+class LineHeightPropertyInline extends LineHeightProperty {
 
-				_calculateMorphedAttributeData(
-					object,
-					material,
-					normalAttribute,
-					morphNormal,
-					morphTargetsRelative,
-					a, b, c,
-					modifiedNormal
-				);
+	/**
+	 *
+	 */
+	constructor() {
 
-			}
+		super();
 
-		}
+		// configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
 
 	}
 
-	const morphedPositionAttribute = new Float32BufferAttribute( modifiedPosition, 3 );
-	const morphedNormalAttribute = new Float32BufferAttribute( modifiedNormal, 3 );
-
-	return {
+}
 
-		positionAttribute: positionAttribute,
-		normalAttribute: normalAttribute,
-		morphedPositionAttribute: morphedPositionAttribute,
-		morphedNormalAttribute: morphedNormalAttribute
 
-	};
 
-}
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontKerningPropertyText.js
 
 
 
+class FontKerningPropertyText extends FontKerningProperty {
 
+	constructor() {
 
-;// CONCATENATED MODULE: ./src/components/Text.js
+		super();
 
+		this._value = this._input = this.getDefaultValue();
 
+		// Configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
 
+	}
 
 
+	_computeFromInherited( element ) {
+		super._computeFromInherited(element);
 
 
+	}
 
+}
 
+;// CONCATENATED MODULE: ./src/core/properties/BoundsText.js
 
-//JSDoc related imports
-/* eslint-disable no-unused-vars */
 
+class BoundsText extends BoundsBox {
 
+	constructor() {
 
+		super();
 
+		this._innerWidth = Infinity;
+		this._innerHeight = 0;
 
-/* eslint-enable no-unused-vars */
+	}
 
-/**
+}
 
-Job:
-- computing its own size according to user measurements or content measurement
-- creating 'inlines' objects with info, so that the parent component can organise them in lines
+;// CONCATENATED MODULE: ./src/core/properties/hierarchy/ChildrenText.js
 
-Knows:
-- Its text content (string)
-- Font attributes ('font', 'fontSize'.. etc..)
-- Parent block
- */
 
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-class Text extends MeshUIComponent {
+/* eslint-enable no-unused-vars */
 
-	constructor( options ) {
+class ChildrenText extends BaseProperty {
 
-		super( options );
+	constructor() {
 
-		this.isInline = true;
-		this.isText = true;
+		super( 'children', null, false );
 
-		// adds internal properties
 		/**
 		 *
-		 * @type {string[]}
-		 * @private
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
 		 */
-		this._textContent = null;
+		this._uis = [];
 
 		/**
 		 *
-		 * @type {MSDFTypographicGlyph[]}
-		 * @private
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
 		 */
-		this._textContentGlyphs = null;
+		this._inlines = [];
 
 		/**
 		 *
-		 * @type {MSDFInlineGlyph[]}
-		 * @private
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
 		 */
-		this._textContentInlines = null;
+		this._boxes = [];
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update requested when :
+	 * 		- New child has been added
+	 * 		- Existing child has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) { /* eslint-enable no-unused-vars */
 
-		this.set( options );
+		this._compute( element );
 
-		this.addEventListener( 'added', this._acquireFont );
+		this._needsProcess = true;
 
 	}
 
+
 	/**
-	 * Trigger some update when the font is ready
-	 * @private
+	 * Process when :
+	 * 		- Existing child visibility changed
+	 *
+	 * @param element
 	 */
-	_handleFontVariantReady = () => {
+	process( element ) {
 
-		this._transferToMaterial();
+		this._compute( element );
 
-		// request parse update and parent layout
-		this.update( true, true, false );
-		this.getHighestParent().update( false, true, false );
+		element._overflow._needsRender = true;
 
-		// remove the listener
-		this._font.removeEventListener( 'ready', this._handleFontVariantReady );
+	}
 
-	};
+	_compute( element ) {
+
+		this._uis = element.children.filter( child => child.visible && child.isUI );
+
+		this._inlines = this._uis.filter( child => child.isInline ).sort( this._sortOrder );
+
+	}
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		this._inlines = null;
+
+	}
 
 	/**
-	 * When adding a text to a parent ui element,
-	 * acquire parent font, if needed
+	 *
+	 * Sort children according to their .style.order property or fallback on children index
+	 *
+	 * @param {HTMLElementVR} a
+	 * @param {HTMLElementVR} b
+	 * @return {number}
 	 * @private
 	 */
-	_acquireFont = () => {
+	_sortOrder = ( a, b ) => {
 
-		if( !this._font ) {
+		if( a._order._value < b._order._value ) return -1;
+		if( a._order._value > b._order._value ) return 1;
 
-			let fontFamily = this.getFontFamily();
-			if ( fontFamily ) {
+		// if both children have the same order value, use their children index to order them
+		if( this._uis.indexOf(a) < this._uis.indexOf(b) ) {
+			return -1;
+		}
 
-				if ( fontFamily instanceof FontFamily ) {
+		return 1;
 
-					this.font = fontFamily.getVariant( this.getFontWeight(), this.getFontStyle() );
+	}
 
-				} else {
+}
 
-					// Set from old way, check if that family is already registered
-					const fontName = fontFamily.pages ? fontFamily.info.face : fontFamily;
-					fontFamily = font_FontLibrary.getFontFamily( fontName );
-					if ( fontFamily ) {
+;// CONCATENATED MODULE: ./src/core/properties/AutoSizePropertyText.js
 
-						this.font = fontFamily.getVariant( this.getFontWeight(), this.getFontStyle() );
 
-					}
+/**
+ * Autosize are only trigger when natural size changed
+ */
+class AutoSizePropertyText extends BaseProperty {
 
-				}
+	constructor() {
+
+		super( 'autosize' );
+
+	}
+
+	process( element ) {
+
+		if( element._layouter._value && element._layouter._value.length ) {
+
+			const lines = element._layouter._value;
+
+			// as this is from children offsetWidth, it means parent innerWidth
+			const padding = element._padding._value;
+			const border = element._borderWidth._value;
+
+			// has auto size get the height from children
+			if ( element._width._auto ) {
+
+				element._bounds.setOffsetWidth( element, lines.width + padding.w + padding.y + border.w + border.y );
+
+			}
+
+			if ( element._height._auto ) {
+
+				element._bounds.setOffsetHeight( element, lines.height + padding.x + padding.z + border.x + border.z );
 
 			}
 
@@ -7628,1537 +14737,863 @@ class Text extends MeshUIComponent {
 
 	}
 
-	_onBeforeRender = () => {
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/rendering/RendererPropertyText.js
 
-			if ( this.updateClippingPlanes ) {
 
-				this.updateClippingPlanes();
+class RendererPropertyText extends RendererPropertyBox{
 
-			}
+	constructor() {
+
+		super( 'renderer' );
+
+		this._needsUpdate = false;
 
 	}
 
-	/*******************************************************************************************************************
-	 * GETTERS - SETTERS
-	 ******************************************************************************************************************/
 
-	/**
-	 * @override
-	 * @param {FontVariant} value
-	 */
-	set font( value ) {
+	render( element ) {
 
-		// if a previous font isset, be sure no event remains
-		if ( this._font && !this._font.isReady ) {
+		super.render( element );
 
-			this._font.removeEventListener( 'ready', this._handleFontVariantReady );
+		for ( const inlineElement of element._children._inlines ) {
+
+			inlineElement._renderer.render( inlineElement );
 
 		}
 
-		this._font = value;
+		element.performAfterUpdate();
 
-		// new font, means rebuild inlines, now or soon
-		if ( !this._font.isReady ) {
+	}
+
+}
 
-			this.inlines = null;
-			this._font.addEventListener( 'ready', this._handleFontVariantReady );
+;// CONCATENATED MODULE: ./src/elements/basic/TextElement.js
 
-		} else {
 
-			this._handleFontVariantReady();
 
-		}
 
-		// update font material according to font variant
-		if( !this._material ) {
 
-			this.material = new this._font.fontMaterial();
 
-		} else {
 
 
 
-			// @TODO :	Only recreate a material instance if needed,
-			//  				prevent user that its custom material may no longer be compatible with update fontVariant implementation
-			const isDefaultMaterial = this._material.isDefault && this._material.isDefault();
-			if( isDefaultMaterial && !(this._material instanceof this._font.fontMaterial) ) {
 
-				this.material = new this._font.fontMaterial();
 
-			} else {
 
-				this._transferToMaterial();
 
-			}
 
-		}
 
-	}
 
 
-	_buildContentKernings(){
 
-		// apply kerning
-		if ( this.getFontKerning() !== 'none' ) {
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-			// First character won't be kerned with its void lefthanded peer
-			for ( let i = 1; i < this._textContent.length; i++ ) {
 
-				const glyphPair = this._textContent[ i - 1 ] + this._textContent[ i ];
+/* eslint-enable no-unused-vars */
 
-				// retrieve the kerning from the font
-				// as set it on the characterInline
-				this._textContentInlines[ i ].kerning = this._font.getKerningAmount( glyphPair );
+class TextElement extends BoxElement {
 
-			}
-		}
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 * @param [properties={}]
+	 */
+	constructor( values = {}, properties = {}) {
 
-	}
+		TextElement.definePropertiesValues( properties, values );
 
+		super( properties, values );
 
-	///////////
-	// UPDATES
-	///////////
+		TextElement.init( this );
 
 
+	}
+
+	/* eslint-disable no-unused-vars */
 	/**
-	 * Here we compute each glyph dimension, and we store it in this
-	 * component's inlines parameter. This way the parent Block will
-	 * compute each glyph position on updateLayout.
+	 * A Text Element can only contains inline elements
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
 	 */
-	parseParams() {
+	add( object ) { /* eslint-enable no-unused-vars */
 
-		this._acquireFont();
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
+		let updateLayout = false;
 
-		if( !this.content || this.content.length === 0 ) return;
+		for ( let i = 0; i < arguments.length; i++ ) {
 
-		// won't parse without font or unready font
-		if( !this._font || !this._font.isReady ) return;
+			const argument = arguments[ i ];
 
-		// Apply whitespace on string characters themselves.
-		// Will possibly :
-		//  - l/r trim whitespace
-		//  - collapse whitespace sequences
-		//  - remove newlines / tabulations
-		this._textContent = collapseWhitespaceOnString( this.content, this.getWhiteSpace() );
+			if ( !argument.isUI || argument.isInline ) {
 
-		// Now that we know exactly which characters will be printed
-		// Store the character description ( typographic properties )
-		this._textContentGlyphs = this._textContent.split( '' ).map( ( char ) => this._font.getTypographicGlyph( char ) );
+				if( argument.isInline ) {
+					updateLayout = true;
+				}
 
-		// And from the descriptions ( which are static/freezed per character per font )
-		// Build the inline
-		this._textContentInlines = this._textContentGlyphs.map( ( glyphBox ) => glyphBox.asInlineGlyph() );
-		this._buildContentKernings();
+				validChildren.push( argument );
 
-		// Apply margin and padding on first and last inlines
-		if( this._textContentInlines.length ) {
+			} else {
 
-			// First gets left side
-			this._textContentInlines[0].paddingLeft = this._padding.w;
-			this._textContentInlines[0].marginLeft = this._margin.w;
+				console.warn( 'Block element can only contain Box elements.', argument );
 
-			// Last gets right side
-			const lastIndex = this._textContentInlines.length - 1;
-			this._textContentInlines[lastIndex].paddingRight = this._padding.y;
-			this._textContentInlines[lastIndex].marginRight = this._margin.y;
+			}
+
+		}
+
+		if( validChildren.length > 0 ) {
+
+			super.add( ...validChildren )
+
+		}
 
+		if( updateLayout ) {
+			this._children._needsUpdate = true;
+			this._layouter._needsProcess = true;
 		}
 
+		return this;
+
+	}
+
+
+	set textContent ( value ) {
+
+		this._textContent.value = value;
+
+	}
+
+	// Must redefine getter also, or issue.
+	get textContent() {
+
+		return super.textContent;
 
-		this.inlines = this._textContentInlines;
+	}
 
+	set invertAlpha( value ) {
 
-		// this.calculateInlines( this._fitFontSize || this.getFontSize() );
-		this.calculateInlines( this._fitFontSize || this.getFontSize() );
+		this._invertAlpha.value = value;
 
 	}
 
+	get invertAlpha () { return this._invertAlpha._value; }
+
+	get lines() { return this._layouter._value; }
+
 	/**
-	 * Create text content
 	 *
-	 * At this point, text.inlines should have been modified by the parent
-	 * component, to add xOffset and yOffset properties to each inlines.
-	 * This way, TextContent knows were to position each character.
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
 	 */
-	updateLayout() {
-
-		utils_deepDelete( this );
+	static definePropertiesValues( properties, values ) {
 
-		if ( this.inlines ) {
+		properties.flexDirection = FlexDirectionPropertyText;
+		properties.justifyContent = JustifyContentProperty;
+		properties.alignItems = AlignItemsProperty;
+		properties.bounds = BoundsText;
+		properties.autoSize = AutoSizePropertyText;
+		properties.renderer = RendererPropertyText;
 
-			const charactersAsGeometries = this.inlines.map(
-				inline =>
-					this._font.getGeometricGlyph( inline, this.getSegments() )
-						.translate( inline.offsetX, inline.offsetY, 0 )
+		if( !properties.children ) properties.children = ChildrenText;
+		if( !properties.textContent ) properties.textContent = TextContentText;
+		if( !properties.layouter ) properties.layouter = TextLayouter;
+		if( !properties.lineHeight ) properties.lineHeight = LineHeightPropertyInline;
+		if( !properties.textAlign ) properties.textAlign = TextAlignPropertyText;
+		if( !properties.whiteSpace ) properties.whiteSpace = WhiteSpacePropertyInline;
+		if( !properties.fontKerning ) properties.fontKerning = FontKerningPropertyText;
+		if( !properties.segments ) properties.segments = SegmentsPropertyText;
 
-			);
+		// configure
+		if ( !values.width ) values.width = '100%';
 
-			const mergedGeom = mergeBufferGeometries( charactersAsGeometries );
 
-			// console.log(this.uuid);
+		// break inheritance chains
+		if ( !values.fontSide ) values.fontSide = 0; // FrontSide;
 
-			this._main = new external_THREE_namespaceObject.Mesh( mergedGeom, this._material );
-			if( this.customDepthMaterial ){
+	}
 
-				this._main.customDepthMaterial = this.customDepthMaterial;
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init( element ) {
 
+		Object.defineProperties( element, {
+				isText: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
 			}
+		);
+
+	}
+}
 
-			this._transferToMesh();
+;// CONCATENATED MODULE: ./src/core/properties/InlinesPropertyInlineBlock.js
 
-			this._main.renderOrder = Infinity;
 
-			// This is for hiddenOverflow to work
-			this._main.onBeforeRender = this._onBeforeRender
 
-			this.add( this._main );
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
 
-		}
+/**
+ * @property {Array.<InlineGlyph>} value
+ */
+class InlinesPropertyInlineBlock extends BaseProperty{
+
+	constructor() {
+
+		super( "inlines", null, false );
+
+		/**
+		 *
+		 * @type {Array.<Inline>}
+		 * @internal
+		 */
+		this._value = [];
 
 	}
 
-	updateInner() {
+	process( element ) {
+
+		// First gets left side
+		this._value[0].paddingLeft = element._padding._value.w;
+		this._value[0].marginLeft = element._margin._value.w;
+
+		// Last gets right side
+		const lastIndex = this._value.length - 1;
+		this._value[lastIndex].paddingRight = element._padding._value.y;
+		this._value[lastIndex].marginRight = element._margin._value.y;
 
 	}
 
-	calculateInlines( fontSize ) {
+}
 
-		// Abort conditions
-		if ( !this._font || !this._font.isReady ) return;
-		if ( !this._textContent) return;
+;// CONCATENATED MODULE: ./src/core/properties/rendering/RendererPropertyInlineBox.js
 
-		const whiteSpace = this.getWhiteSpace();
-		const newLineBreakability = newlineBreakability( whiteSpace )
 
-		const breakChars = this.getBreakOn();
 
-		const SCALE_MULT = fontSize / this._font.typographic.size;
+class RendererPropertyInlineBox extends BaseProperty{
 
-		// update inlines properties before inline placements in lines
-		for ( let i = 0; i < this._textContent.length; i++ ) {
+	constructor() {
 
-			const char = this._textContent[ i ];
+		super( 'renderer' );
 
-			/**
-			 *
-			 * @type {MSDFInlineGlyph}
-			 */
-			const inline = this._textContentInlines[ i ];
+	}
 
-			inline.resetOffsets();
 
-			// Whitespace Breakability ---------------------------------------------------------------------------------------
-			let lineBreak = null;
-			if ( whiteSpace !== NOWRAP ) {
+	render( element ) {
 
-				if ( breakChars.includes( char ) || char.match( /\s/g ) ) lineBreak = 'possible';
+		if( !element._backgroundMesh ) {
 
-			}
+			element.setBackgroundMesh( new Frame(element) );
 
-			if ( char.match( /\n/g ) ) {
+		}
 
-				lineBreak = newLineBreakability;
+		element._backgroundMesh.position.x = element._inlines._value[0].offsetX + element._inlines._value[0].width/2;
+		// element._backgroundMesh.position.y = element._inlines._value[0].offsetY + element._inlines._value[0].lineBase/4;
+		element._backgroundMesh.position.y = element._inlines._value[0].offsetY + element._inlines._value[0].lineBase/2;
 
-			}
+		element._bounds.render( element );
 
-			inline.lineBreak = lineBreak;
+	}
 
-			// --------------------------------------------------------------------------------------  Whitespace Breakability
+}
 
-			inline.fontSize = fontSize;
+;// CONCATENATED MODULE: ./src/core/properties/BoundsInlineBlock.js
 
-			inline.fontFactor = SCALE_MULT;
 
 
-		}
+class BoundsInlineBlock extends BaseProperty {
+
+	constructor() {
+
+		super( 'bounds', null, false );
+
+		/**
+		 *
+		 * @type {Vector3}
+		 * @internal
+		 */
+		this._size = new external_THREE_namespaceObject.Vector3( 1, 1, 1 );
+
+		this._offsetWidth = 0;
+		this._offsetHeight = 0;
 
+		this._innerWidth = 0;
+		this._innerHeight = 0;
 	}
 
-}
 
-;// CONCATENATED MODULE: ./src/components/InlineBlock.js
 
 
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
 
+		this.output( out );
 
+		this._needsProcess = true;
 
+	}
 
+	process( element ) {
 
+		this._offsetWidth = this._innerWidth = element._inlines._value[0].width;
+		this._offsetHeight = this._innerHeight = element._inlines._value[0].height;
 
-/**
- * Job:
- * - computing its own size according to user measurements or content measurement
- * - creating an 'inlines' object with info, so that the parent component can organise it along with other inlines
- *
- * Knows:
- * - Its measurements parameter
- * - Parent block
- */
-class InlineBlock extends MeshUIComponent {
+		this._needsRender = true;
 
-	constructor( options ) {
+		element._borderWidth._needsRender = true;
+		element._borderRadius._needsRender = true;
 
-		super( options );
+	}
 
-		this.isInline = true;
-		this.isInlineBlock = true;
+	/* eslint-disable no-unused-vars */ render( element ) { /* eslint-enable no-unused-vars */
 
-		//
+		this._size.x = this._offsetWidth;
+		this._size.y = this._offsetHeight;
+
+	}
+
+	/**
+	 *
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) {
 
-		this.size = new external_THREE_namespaceObject.Vector2( 1, 1 );
+		out[ 'size' ] = this._size;
+
+	}
 
-		this._material = new FrameMaterial();
-		this._main = new Frame( this._material );
+}
 
-		this._materialMediation = { ...FrameMaterialUtils.mediation };
 
-		// This is for hiddenOverflow to work
-		this._main.onBeforeRender = () => {
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/background/BackgroundColorPropertyInlineBlock.js
 
-			if ( this.updateClippingPlanes ) {
 
-				this.updateClippingPlanes();
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
 
-			}
+class BackgroundColorPropertyInlineBlock extends StyleColorProperty {
 
-		};
+	constructor() {
 
-		this.add( this._main );
+		super( 'backgroundColor', 'inherit', false );
 
-		// Lastly set the options parameters to this object, which will trigger an update
+		this._allowsInherit = false;
 
-		if( options.backgroundOpacity === undefined ){
+		this._input = 'inherit';
 
-			options.backgroundOpacity = 1.0
+	}
 
-		}
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-		if( options.backgroundColor === undefined && options.backgroundTexture ) {
+		element._backgroundMesh.visible = !(this._input === 'none' || this._input === 'transparent');
 
-			options.backgroundColor = new external_THREE_namespaceObject.Color(0xffffff);
+		if( this._input === 'inherit' ) {
 
-		}
+			this._value.set(this.getInheritedInput( element ));
 
-		// Add an object that can be seen and CharacterInline
-		this.inline = new InlineBlockInline(this);
-		this.inlines = [ this.inline ];
+		} else {
 
-		this.set( options );
+			this._value.set( this._input );
 
-		this._transferToMaterial();
+		}
 
 	}
 
-	///////////
-	// UPDATES
-	///////////
+	// background color of inlineBlock looks for parent color instead of backgroundColor
+	getInheritedInput( element ) {
 
-	parseParams(){
+		if ( this._input !== 'inherit' ) return this._input;
+
+		return element._color._value;
 
 	}
 
 	/**
-	 * Create text content
-	 *
-	 * At this point, text.inlines should have been modified by the parent
-	 * component, to add xOffset and yOffset properties to each inlines.
-	 * This way, TextContent knows were to position each character.
 	 *
+	 * @param {any} value
 	 */
-	updateLayout() {
+	set inline( value ) {
 
-		const PADDING = this._padding.w + this._padding.y;
-		const WIDTH = this.inlineWidth;
-		const HEIGHT = this.inlineHeight;
+		if( ! this.isValidValue( value ) ) return;
 
+		if( value === this._inline ) {
 
-		// basic translation to put the plane's left bottom corner at the center of its space
-		// this.position.set( WIDTH / 2 , HEIGHT / 2, 0 );
-		this.position.set( (WIDTH + PADDING)/2, HEIGHT / 2, 0 );
+			// do nothing no update, the value hasn't changed
+			return;
 
-		// translation required by inlineManager to position this component inline
-		this.position.x += this.inline.offsetX;
-		this.position.y += this.inline.offsetY;
+		}
 
-		this.position.y += this.inline.anchor;
+		this._input = this._inline = value;
 
-		this.size.set( WIDTH, HEIGHT );
-		this._main.scale.set( WIDTH, HEIGHT, 1 );
+		this._needsUpdate = true;
 
-		this._main.renderOrder = this.getParentsNumber();
+	}
 
-		this.position.z = this.getOffset();
+}
 
-	}
 
-	//
 
-	updateInner() {
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/ColorPropertyInlineBlock.js
 
-	}
 
-	/*********************************************************************************************************************
-	 * POVIDES INLINE SIZING
-	 ********************************************************************************************************************/
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
 
-	/**
-	 *
-	 * @return {number}
-	 */
-	get inlineXAdvance(){
+class ColorPropertyInlineBlock extends StyleColorProperty {
 
-		const pad = this._padding.w + this._padding.y;
-		return (this.width || 0.3) + pad;
+	constructor() {
 
-	}
+		super( 'color', 'inherit', false );
 
-	/**
-	 *
-	 * @return {number}
-	 */
-	get inlineWidth() {
+		this._input = 'inherit';
 
-		return this.width || 0.3;
+		this.output = this._outputValue;
 
 	}
 
+	/* eslint-disable no-unused-vars */
 	/**
 	 *
-	 * @return {number}
+	 * @param {MeshUIBaseElement} element
 	 */
-	get inlineHeight() {
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._input === 'inherit' ) {
+
+			this._value.set( this.getInheritedInput( element ) );
+
+		} else {
+
+			this._value.set( this._input);
+
+		}
 
-		return this.height || 0.3;
+		element._backgroundColor._needsUpdate = true;
+		element._borderColor._needsUpdate = true;
 
 	}
 
 }
 
-/**
- * InlineBlock has its own Inline implementation
- */
-class InlineBlockInline extends Inline {
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/border/BorderColorPropertyInlineBlock.js
 
-	/**
-	 *
-	 * @param {InlineBlock} parent
-	 */
-	constructor( parent ) {
 
-		super();
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
 
-		/**
-		 * @TODO: This currently make a circular reference that should ideally be removed
-		 * @type {InlineBlock}
-		 * @private
-		 */
-		this._parent = parent;
+class BorderColorPropertyInlineBlock extends StyleColorProperty {
 
-	}
+	constructor() {
 
-	/**
-	 * Rely on the parent for size computation
-	 * @override
-	 * @returns {number}
-	 */
-	get xadvance() { return this._parent.inlineXAdvance; }
+		super( 'borderColor', 'inherit', false );
 
-	/**
-	 * Rely on the parent for size computation
-	 * @override
-	 * @returns {number}
-	 */
-	get width() { return this._parent.inlineWidth; }
+		this._allowsInherit = false;
 
-	/**
-	 * Rely on the parent for size computation
-	 * @override
-	 * @returns {number}
-	 */
-	get height() { return this._parent.inlineHeight; }
+		this._input = 'inherit';
 
+	}
 
-	/**
-	 * Rely on the parent for size computation
-	 * @override
-	 * @returns {number}
-	 */
-	get lineHeight() { return this._parent.inlineHeight; }
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-	/**
-	 * Rely on the parent for size computation
-	 * @override
-	 * @returns {number}
-	 */
-	get lineBase() { return this._parent.inlineHeight; }
-
-}
-
-;// CONCATENATED MODULE: ./src/utils/Keymaps.js
-/**
-
-Contains key maps for the Keyboard component.
-Most languages need a specific keyboard. Therefore, Keyboard takes a language attribute
-and if not passed tries to detect the language. If not found, it uses the basic QZERTY layout.
-
- */
-/* harmony default export */ const Keymaps = ({
-
-	fr:
-		[
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'p', upperCase: 'P' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'm', upperCase: 'M' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	///////////////////////////////////////////////////////////
-
-	eng:
-		[
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'p', upperCase: 'P' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'l', upperCase: 'L' } ] }
-				],
-
-				[
-					{ width: 0.15, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 0.15, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	////////////////////////////////////////////////////////////
-
-	ru:
-		[
-			[
-				[
-					{ width: 1 / 12, chars: [ { lowerCase: 'й', upperCase: 'Й' }, { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ц', upperCase: 'Ц' }, { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'у', upperCase: 'У' }, { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'к', upperCase: 'К' }, { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'е', upperCase: 'Е' }, { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'н', upperCase: 'Н' }, { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'г', upperCase: 'Г' }, { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ш', upperCase: 'Ш' }, { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'щ', upperCase: 'Щ' }, { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'з', upperCase: 'З' }, { lowerCase: 'p', upperCase: 'P' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'х', upperCase: 'Х' }, { lowerCase: '{', upperCase: '[' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ъ', upperCase: 'Ъ' }, { lowerCase: '}', upperCase: ']' } ] }
-				],
-
-				[
-					{ width: 1 / 12, chars: [ { lowerCase: 'ф', upperCase: 'Ф' }, { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ы', upperCase: 'Ы' }, { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'в', upperCase: 'В' }, { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'а', upperCase: 'А' }, { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'п', upperCase: 'П' }, { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'р', upperCase: 'Р' }, { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'о', upperCase: 'О' }, { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'л', upperCase: 'Л' }, { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'д', upperCase: 'Д' }, { lowerCase: 'l', upperCase: 'L' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ж', upperCase: 'Ж' }, { lowerCase: ':', upperCase: ';' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'э', upperCase: 'Э' }, { lowerCase: '"', upperCase: '\'' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ё', upperCase: 'Ё' }, { lowerCase: '|', upperCase: '\\' } ] }
-				],
-
-				[
-					{ width: 1.5 / 12, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'я', upperCase: 'Я' }, { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ч', upperCase: 'Ч' }, { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'с', upperCase: 'С' }, { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'м', upperCase: 'М' }, { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'и', upperCase: 'И' }, { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'т', upperCase: 'Т' }, { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ь', upperCase: 'Ь' }, { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'б', upperCase: 'Б' }, { lowerCase: ',', upperCase: '' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ю', upperCase: 'Ю' }, { lowerCase: '.', upperCase: '' } ] },
-					{ width: 1.5 / 12, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.15, command: 'switch-set', chars: [ { lowerCase: 'eng' } ] },
-					{ width: 0.15, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.3, command: 'switch', chars: [ { lowerCase: 'АБВ' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	/////////////////////////////////////////////////////////
-
-	de:
-		[
-			[
-				[
-					{ width: 1 / 11, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'p', upperCase: 'P' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'ü', upperCase: 'Ü' } ] }
-				],
-
-				[
-					{ width: 1 / 11, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'ö', upperCase: 'Ö' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'ä', upperCase: 'Ä' } ] }
-				],
-
-				[
-					{ width: 2 / 11, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 2 / 11, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	///////////////////////////////////////////////////////////
-
-	es:
-		[
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'p', upperCase: 'P' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ñ', upperCase: 'Ñ' } ] }
-				],
-
-				[
-					{ width: 0.15, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 0.15, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	//////////////////////////////////////////////////////////////////////
-
-	el:
-		[
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: ';', upperCase: ':' }, { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ς', upperCase: 'ς' }, { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ε', upperCase: 'Ε' }, { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ρ', upperCase: 'Ρ' }, { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'τ', upperCase: 'Τ' }, { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'υ', upperCase: 'Υ' }, { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'θ', upperCase: 'Θ' }, { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ι', upperCase: 'Ι' }, { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ο', upperCase: 'Ο' }, { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'π', upperCase: 'Π' }, { lowerCase: 'p', upperCase: 'P' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'α', upperCase: 'Α' }, { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'σ', upperCase: 'Σ' }, { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'δ', upperCase: 'Δ' }, { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'φ', upperCase: 'Φ' }, { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'γ', upperCase: 'Γ' }, { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'η', upperCase: 'Η' }, { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ξ', upperCase: 'Ξ' }, { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'κ', upperCase: 'Κ' }, { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'λ', upperCase: 'Λ' }, { lowerCase: 'l', upperCase: 'L' } ] }
-				],
-
-				[
-					{ width: 0.15, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ζ', upperCase: 'Ζ' }, { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'χ', upperCase: 'Χ' }, { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ψ', upperCase: 'Ψ' }, { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ω', upperCase: 'Ω' }, { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'β', upperCase: 'Β' }, { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ν', upperCase: 'Ν' }, { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'μ', upperCase: 'Μ' }, { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 0.15, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.15, command: 'switch-set', chars: [ { lowerCase: 'eng' } ] },
-					{ width: 0.15, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	////////////////////////////////////////////////////////////////////////////////
-
-	nord:
-		[
-			[
-				[
-					{ width: 1 / 11, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'p', upperCase: 'P' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'å', upperCase: 'Å' } ] }
-				],
-
-				[
-					{ width: 1 / 11, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'æ', upperCase: 'Æ' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'ø', upperCase: 'Ø' } ] }
-				],
-
-				[
-					{ width: 2 / 11, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 2 / 11, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		]
+		if( this._input === 'inherit' ) {
 
-});
+			this._value.set(this.getInheritedInput( element ));
 
-;// CONCATENATED MODULE: ./src/components/Keyboard.js
+		} else {
 
+			this._value.set( this._input );
 
+		}
 
+	}
 
+	// background color of inlineBlock looks for parent color instead of backgroundColor
+	getInheritedInput( element ) {
 
+		if ( this._input !== 'inherit' ) return this._input;
 
+		return element._color._value;
 
+	}
 
+}
 
 
-//
 
-const textureLoader = new external_THREE_namespaceObject.TextureLoader();
+;// CONCATENATED MODULE: ./src/elements/basic/InlineBlockElement.js
 
-//
 
-/**
- * Job: high-level component that returns a keyboard
- */
-class Keyboard extends BoxComponent {
 
-	constructor( options ) {
 
-		// DEFAULTS
 
-		if ( !options ) options = {};
-		if ( !options.width ) options.width = 1;
-		if ( !options.height ) options.height = 0.4;
-		if ( !options.margin ) options.margin = 0.003;
-		if ( !options.padding ) options.padding = 0.01;
 
-		//
 
-		super( options );
 
-		this.currentPanel = 0;
 
-		this.isLowerCase = true;
 
-		this.charsetCount = 1;
 
-		//////////
-		// KEYMAP
-		//////////
 
-		// ../utils/Keymaps contains information about various keyboard layouts
-		// We select one depending on the user's browser language if
-		// there is no options.language
 
-		let keymap;
 
-		if ( options.language || navigator.language ) {
 
-			switch ( options.language || navigator.language ) {
 
-				case 'fr' :
-				case 'fr-CH' :
-				case 'fr-CA' :
-					keymap = Keymaps.fr;
-					break;
 
-				case 'ru' :
-					this.charsetCount = 2;
-					keymap = Keymaps.ru;
-					break;
 
-				case 'de' :
-				case 'de-DE' :
-				case 'de-AT' :
-				case 'de-LI' :
-				case 'de-CH' :
-					keymap = Keymaps.de;
-					break;
 
-				case 'es' :
-				case 'es-419' :
-				case 'es-AR' :
-				case 'es-CL' :
-				case 'es-CO' :
-				case 'es-ES' :
-				case 'es-CR' :
-				case 'es-US' :
-				case 'es-HN' :
-				case 'es-MX' :
-				case 'es-PE' :
-				case 'es-UY' :
-				case 'es-VE' :
-					keymap = Keymaps.es;
-					break;
 
-				case 'el' :
-					this.charsetCount = 2;
-					keymap = Keymaps.el;
-					break;
 
-				case 'nord' :
-					keymap = Keymaps.nord;
-					break;
+class InlineBlockElement extends MeshUIBaseElement {
 
-				default :
-					keymap = Keymaps.eng;
-					break;
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 */
+	constructor( values = {}) {
 
-			}
+		const properties = {};
+		InlineBlockElement.definePropertiesValues( properties, values );
 
-		} else {
+		super( properties, values );
+
+		InlineBlockElement.init( this );
+
+	}
 
-			keymap = Keymaps.eng;
+	clear() {
 
+		// remove cross reference
+		for ( const inline of this._inlines._value ) {
+			inline.clear();
 		}
 
-		////////////////////
-		// BLOCKS CREATION
-		////////////////////
+		return super.clear();
+	}
 
-		// PANELS
+	/**
+	 * When the backgroundMesh has been set, bind properties
+	 * @override
+	 */
+	bindBackgroundMeshProperties () {
 
-		this.keys = [];
+		this._backgroundMesh.raycast = ()=>{};
 
-		this.panels = keymap.map( ( panel ) => {
+		// bind the background scale with bounds
+		this._bounds._size = this._backgroundMesh.scale;
+		this._bounds._needsUpdate = true;
 
-			const lineHeight = ( options.height / panel.length ) - ( options.margin * 2 );
+	}
 
-			const panelBlock = new Block( {
-				width: options.width + ( options.padding * 2 ),
-				height: options.height + ( options.padding * 2 ),
-				offset: 0,
-				padding: options.padding,
-				fontFamily: options.fontFamily,
-				fontTexture: options.fontTexture,
-				backgroundColor: options.backgroundColor,
-				backgroundOpacity: options.backgroundOpacity
-			} );
+	/**
+	 * When the backgroundMesh has been unset, unbind properties
+	 * @override
+	 */
+	unbindBackgroundMeshProperties () {
 
-			panelBlock.charset = 0;
+		// detach bounds size
+		this._bounds._size = new external_THREE_namespaceObject.Vector3(1,1,1);
+		this._bounds._needsUpdate = true;
 
-			panelBlock.add( ...panel.map( ( line ) => {
+	}
 
-				const lineBlock = new Block( {
-					width: options.width,
-					height: lineHeight,
-					margin: options.margin,
-					contentDirection: 'row',
-					justifyContent: 'center'
-				} );
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) { /* eslint-enable no-unused-vars */
 
-				lineBlock.frame.visible = false;
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
 
-				const keys = [];
+		for ( let i = 0; i < arguments.length; i++ ) {
 
-				line.forEach( ( keyItem ) => {
+			const argument = arguments[ i ];
 
-					const key = new Block( {
-						width: ( options.width * keyItem.width ) - ( options.margin * 2 ),
-						height: lineHeight,
-						margin: options.margin,
-						justifyContent: 'center',
-						offset: 0
-					} );
+			if ( !argument.isUI ) {
 
-					const char = keyItem.chars[ panelBlock.charset ].lowerCase || keyItem.chars[ panelBlock.charset ].icon || 'undif';
+				validChildren.push( argument );
 
-					if (
-						( char === 'enter' && options.enterTexture ) ||
-						( char === 'shift' && options.shiftTexture ) ||
-						( char === 'backspace' && options.backspaceTexture )
-					) {
+				argument.position.z = 0.005;
 
-						const url = ( () => {
+			} else {
 
-							switch ( char ) {
+				console.warn( 'ThreeMeshUI::InlineBlockElement cannot contains UI Elements.', argument );
 
-								case 'backspace':
-									return options.backspaceTexture;
-								case 'enter':
-									return options.enterTexture;
-								case 'shift':
-									return options.shiftTexture;
-								default:
-									console.warn( 'There is no icon image for this key' );
+			}
 
-							}
+		}
 
-						} )();
+		return super.add( ...validChildren );
 
-						textureLoader.load( url, ( texture ) => {
+	}
 
-							key.add(
-								new InlineBlock( {
-									width: key.width * 0.65,
-									height: key.height * 0.65,
-									backgroundSize: 'contain',
-									backgroundTexture: texture
-								} )
-							);
 
-						} );
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {
 
-					} else {
+		if( !properties.children ) properties.children = ChildrenInline;
+		if( !properties.bounds ) properties.bounds = BoundsInlineBlock;
+		if( !properties.inlines ) properties.inlines = InlinesPropertyInlineBlock;
+		if( !properties.layouter ) properties.layouter = InlineLayouter;
+		if( !properties.renderer ) properties.renderer = RendererPropertyInlineBox;
 
-						key.add(
-							new Text( {
-								content: char,
-								offset: 0
-							} )
-						);
+		// reset inlineElement specificity
+		if( !properties.fontFamily ) properties.fontFamily = FontFamilyPropertyInline;
+		if( !properties.fontWeight ) properties.fontWeight = FontWeightPropertyInline;
+		if( !properties.fontStyle ) properties.fontStyle = FontStylePropertyInline;
+		if( !properties.fontSize ) properties.fontSize = FontSizePropertyInline;
 
-					}
+		if( !properties.backgroundColor ) properties.backgroundColor = BackgroundColorPropertyInlineBlock;
+		if( !properties.borderColor ) properties.borderColor = BorderColorPropertyInlineBlock;
+		if( !properties.color ) properties.color = ColorPropertyInlineBlock;
 
-					key.type = 'Key';
+		if( !properties.lineBreak ) properties.lineBreak = LineBreakProperty;
+		if( !properties.letterSpacing ) properties.letterSpacing = LetterSpacingPropertyInline;
+		if( !properties.whiteSpace ) properties.whiteSpace = WhiteSpacePropertyInline;
+		if( !properties.fontKerning ) properties.fontKerning = FontKerningProperty;
 
-					key.info = keyItem;
-					key.info.input = char;
-					key.panel = panelBlock;
+		if( values.backgroundOpacity === undefined) values.backgroundOpacity = 1;
 
-					// line's keys
-					keys.push( key );
+		if( !values.backgroundSize ) values.backgroundSize = 'cover';
+		if( !values.width ) values.width = '100%';
+		if( !values.height ) values.height = '100%';
+		if( !values.boxSizing ) values.boxSizing = 'border-box';
 
-					// keyboard's keys
-					this.keys.push( key );
+	}
 
-				} );
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init( element ) {
 
-				lineBlock.add( ...keys );
+		Object.defineProperties( element, {
+				isInline: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				},
+				isInlineBlock: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
 
-				return lineBlock;
+		element._inlines._value = [new InlineBlockInline(element)];
 
-			} ) );
+		element.backgroundMaterial = new FrameMaterial();
+		element._renderer.render( element );
 
-			return panelBlock;
+	}
 
-		} );
+}
+
+
+
+
+/**
+ * InlineBlock has its own Inline implementation
+ */
+class InlineBlockInline extends Inline {
 
-		this.add( this.panels[ 0 ] );
+	/**
+	 *
+	 * @param {InlineBlockElement} parent
+	 */
+	constructor( parent ) {
 
-		// Lastly set the options parameters to this object, which will trigger an update
-		this.set( options );
+		super();
+
+		/**
+		 * @TODO: This currently make a circular reference that should ideally be removed
+		 * @type {InlineBlockElement}
+		 * @private
+		 */
+		this._uiElement = parent;
 
 	}
 
 	/**
-	 * Used to switch to an entirely different panel of this keyboard,
-	 * with potentially a completely different layout
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
 	 */
-	setNextPanel() {
+	get xadvance() {
 
-		this.panels.forEach( ( panel ) => {
+		const padding = this._uiElement._padding._value;
+		const width = this._uiElement._width;
+		if( width._relative ) {
+			return width._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
 
-			this.remove( panel );
+		return padding.w + padding.y + width.value ;
+	}
 
-		} );
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get width() {
 
-		this.currentPanel = ( this.currentPanel + 1 ) % ( this.panels.length );
+		const width = this._uiElement._width;
 
-		this.add( this.panels[ this.currentPanel ] );
+		if( width._relative ) {
+			return width._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
 
-		this.update( true, true, true );
+		return width.value;
 
 	}
 
-	/*
-	 * Used to change the keys charset. Some layout support this,
-	 * like the Russian or Greek keyboard, to be able to switch to
-	 * English layout when necessary
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
 	 */
-	setNextCharset() {
+	get height() {
+
+		const height = this._uiElement._height;
+		if( height._relative ) {
+			return height._value * this._uiElement._fontSize.getInheritedInput( this._uiElement ) ;
+		}
 
-		this.panels[ this.currentPanel ].charset = ( this.panels[ this.currentPanel ].charset + 1 ) % this.charsetCount;
+		return height.value;
 
-		this.keys.forEach( ( key ) => {
+	}
 
-			// Here we sort the keys, we only keep the ones that are part of the current panel.
+	get anchor(){
+		return this.height;
+	}
 
-			const isInCurrentPanel = this.panels[ this.currentPanel ].getObjectById( key.id );
 
-			if ( !isInCurrentPanel ) return;
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get lineHeight() {
 
-			//
+		const height = this._uiElement._height;
+		if( height._relative ) {
+			return height._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
 
-			const char = key.info.chars[ key.panel.charset ] || key.info.chars[ 0 ];
+		return height.value;
 
-			const newContent = this.isLowerCase || !char.upperCase ? char.lowerCase : char.upperCase;
+	}
 
-			if ( !key.childrenTexts.length ) return;
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get lineBase() {
 
-			const textComponent = key.childrenTexts[0];
+		const height = this._uiElement._height;
+		if( height._relative ) {
+			return height._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
 
-			key.info.input = newContent;
+		return height.value;
 
-			textComponent.set( {
-				content: newContent
-			} );
+	}
 
-			textComponent.update( true, true, true );
+	/**
+	 *
+	 */
+	clear() {
 
-		} );
+		this._uiElement = null;
 
 	}
 
-	/** Toggle case for characters that support it. */
-	toggleCase() {
+}
 
-		this.isLowerCase = !this.isLowerCase;
 
-		this.keys.forEach( ( key ) => {
+;// CONCATENATED MODULE: ./src/utils/Behavior.js
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-			const char = key.info.chars[ key.panel.charset ] || key.info.chars[ 0 ];
+/* eslint-enable no-unused-vars */
 
-			const newContent = this.isLowerCase || !char.upperCase ? char.lowerCase : char.upperCase;
 
-			if ( !key.childrenTexts.length ) return;
+class Behavior {
 
-			const textComponent = key.childrenTexts[0];
+	/**
+	 *
+	 * @param {MeshUIBaseElement} subject
+	 */
+	constructor( subject ) {
 
-			key.info.input = newContent;
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 * @protected
+		 */
+		this._subject = subject;
 
-			textComponent.set( {
-				content: newContent
-			} );
+	}
 
-			textComponent.update( true, true, true );
+	/**
+	 * @abstract
+	 */
+	attach() {
 
-		} );
+		console.error(`Behavior::attach() - Is abstract and therefore should be overridden in ${this.constructor.name}`);
 
 	}
 
-	////////////
-	//  UPDATE
-	////////////
+	/**
+	 * @abstract
+	 * @returns {void}
+	 */
+	act() {
+
+		throw new Error(`Behavior::act() - Is abstract and therefore should be overridden in ${this.constructor.name}`);
 
-	parseParams() {
 	}
 
-	updateLayout() {
+	/**
+	 * @abstract
+	 */
+	detach() {
+
+		console.error(`Behavior::detach() - Is abstract and therefore should be overridden in ${this.constructor.name}`);
+
 	}
 
-	updateInner() {
+	/**
+	 *
+	 */
+	clear() {
+
 	}
 
 }
@@ -9182,25 +15617,28 @@ class Keyboard extends BoxComponent {
 
 
 
-const update = () => UpdateManager.update();
 
 
+
+
+
+
+const update = () => UpdateManager.update();
+
 const ThreeMeshUI = {
-	Block: Block,
-	Text: Text,
-	InlineBlock: InlineBlock,
-	Keyboard: Keyboard,
+	Block: BlockElement,
+	Text : TextElement,
+	Inline: InlineElement,
+	InlineBlock : InlineBlockElement,
+	// Keyboard : KeyboardElement,
+	MeshUIBaseElement: MeshUIBaseElement,
 	FontLibrary: font_FontLibrary,
-	FontStyle: FontStyle_namespaceObject,
-	FontWeight: FontWeight_namespaceObject,
 	update,
-	TextAlign: TextAlign_namespaceObject,
-	Whitespace: Whitespace_namespaceObject,
-	JustifyContent: JustifyContent_namespaceObject,
-	AlignItems: AlignItems_namespaceObject,
-	ContentDirection: ContentDirection_namespaceObject,
 	MSDFFontMaterialUtils: MSDFFontMaterialUtils,
 	ShaderChunkUI: ShaderChunkUI,
+	Behavior: Behavior,
+	FontVariant: font_FontVariant,
+	DefaultValues: DefaultValues_namespaceObject
 };
 
 
@@ -9222,8 +15660,14 @@ if ( typeof __webpack_require__.g !== 'undefined' ) __webpack_require__.g.ThreeM
 
 
 
+
+
+
 /* harmony default export */ const three_mesh_ui = ((/* unused pure expression or super */ null && (ThreeMeshUI)));
 
+console.warn("ThreeMeshUI v7.1.x - Three "+window.__THREE__)
+
+
 
 
 
diff --git a/build/three-mesh-ui.min.js b/build/three-mesh-ui.min.js
index 6df55f52..e3752756 100644
--- a/build/three-mesh-ui.min.js
+++ b/build/three-mesh-ui.min.js
@@ -1 +1 @@
-(()=>{"use strict";var e={d:(t,s)=>{for(var r in s)e.o(s,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:s[r]})}};e.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),e.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var t={};e.r(t),e.d(t,{COLUMN:()=>c,COLUMN_REVERSE:()=>l,ROW:()=>h,ROW_REVERSE:()=>o,contentDirection:()=>d});var s={};e.r(s),e.d(s,{CENTER:()=>p,END:()=>w,START:()=>u,STRETCH:()=>C,alignItems:()=>f,warnAboutDeprecatedAlignItems:()=>g});var r={};e.r(r),e.d(r,{CENTER:()=>b,END:()=>v,SPACE_AROUND:()=>x,SPACE_BETWEEN:()=>k,SPACE_EVENLY:()=>R,START:()=>y,justifyContent:()=>U});var a={};e.r(a),e.d(a,{NORMAL:()=>F,NOWRAP:()=>T,PRE:()=>P,PRE_LINE:()=>O,PRE_WRAP:()=>E,WHITE_CHARS:()=>B,collapseWhitespaceOnInlines:()=>W,collapseWhitespaceOnString:()=>L,isValid:()=>H,newlineBreakability:()=>A,shouldBreak:()=>D});var i={};e.r(i),e.d(i,{CENTER:()=>j,JUSTIFY:()=>Y,JUSTIFY_CENTER:()=>J,JUSTIFY_LEFT:()=>$,JUSTIFY_RIGHT:()=>q,LEFT:()=>N,RIGHT:()=>X,textAlign:()=>K});const n=THREE,h="row",o="row-reverse",c="column",l="column-reverse";function d(e,t,s,r){let a=s,i="getWidth",n="x",h="y";0===t.indexOf(c)&&(i="getHeight",n="y",h="x");for(let t=0;t<e.childrenBoxes.length;t++){const s=e.childrenBoxes[t],o=s.id,c=s[i](),l=s.margin||0;a+=l*r,e.childrenPos[o]={[n]:a+c/2*r,[h]:0},a+=r*(c+l)}}const u="start",p="center",w="end",C="stretch";function f(e,t){const s=e.getAlignItems();-1===m.indexOf(s)&&console.warn(`alignItems === '${s}' is not supported`);let r="getWidth",a="x";0===t.indexOf(h)&&(r="getHeight",a="y");const i=e[r]()/2-(e.padding||0);e.childrenBoxes.forEach((n=>{let o;switch(s){case w:case"right":case"bottom":o=0===t.indexOf(h)?-i+n[r]()/2+(n.margin||0):i-n[r]()/2-(n.margin||0);break;case u:case"left":case"top":o=0===t.indexOf(h)?i-n[r]()/2-(n.margin||0):-i+n[r]()/2+(n.margin||0)}e.childrenPos[n.id][a]=o||0}))}function g(e){-1!==_.indexOf(e)&&console.warn(`alignItems === '${e}' is deprecated and will be remove in 7.x.x. Fallback are 'start'|'end'`)}const m=[u,p,w,C,"top","right","bottom","left"],_=["top","right","bottom","left"],y="start",b="center",v="end",x="space-around",k="space-between",R="space-evenly";function U(e,t,s,r){const a=e.getJustifyContent();-1===S.indexOf(a)&&console.warn(`justifyContent === '${a}' is not supported`);const i=0===t.indexOf("row")?"width":"height",n=e.getChildrenSideSum(i),h=("width"===i?e.getInnerWidth():e.getInnerHeight())-n,o=function(e,t){switch(e){case v:return t;case b:return t/2}return 0}(a,2*s-n*Math.sign(s)),c=function(e,t,s,r){const a=Array(e.length).fill(0);if(t>0)switch(s){case k:if(e.length>1){const s=t/(e.length-1)*r;a[0]=0;for(let t=1;t<e.length;t++)a[t]=s*t}break;case R:if(e.length>1){const s=t/(e.length+1)*r;for(let t=0;t<e.length;t++)a[t]=s*(t+1)}break;case x:if(e.length>1){const s=t/e.length*r,i=s/2;a[0]=i;for(let t=1;t<e.length;t++)a[t]=i+s*t}}return a}(e.childrenBoxes,h,a,r),l=0===t.indexOf("row")?"x":"y";e.childrenBoxes.forEach(((t,s)=>{e.childrenPos[t.id][l]-=o-c[s]}))}const S=[y,b,v,x,k,R];function I(e){return class extends e{constructor(e){super(e),this.isBoxComponent=!0,this.childrenPos={}}getInnerWidth(){const e=this.getContentDirection();switch(e){case"row":case"row-reverse":return this.width-(2*this.padding||0)||this.getChildrenSideSum("width");case"column":case"column-reverse":return this.getHighestChildSizeOn("width");default:console.error(`Invalid contentDirection : ${e}`)}}getInnerHeight(){const e=this.getContentDirection();switch(e){case"row":case"row-reverse":return this.getHighestChildSizeOn("height");case"column":case"column-reverse":return this.height-(2*this.padding||0)||this.getChildrenSideSum("height");default:console.error(`Invalid contentDirection : ${e}`)}}getChildrenSideSum(e){return this.childrenBoxes.reduce(((t,s)=>{const r=2*s.margin||0;return t+("width"===e?s.getWidth()+r:s.getHeight()+r)}),0)}setPosFromParentRecords(){this.parentUI&&this.parentUI.childrenPos[this.id]&&(this.position.x=this.parentUI.childrenPos[this.id].x,this.position.y=this.parentUI.childrenPos[this.id].y)}computeChildrenPosition(){if(this.children.length>0){const e=this.getContentDirection();let t;switch(e){case h:t=-this.getInnerWidth()/2;break;case o:t=this.getInnerWidth()/2;break;case c:t=this.getInnerHeight()/2;break;case l:t=-this.getInnerHeight()/2}const s=-Math.sign(t);d(this,e,t,s),U(this,e,t,s),f(this,e)}}getHighestChildSizeOn(e){return this.childrenBoxes.reduce(((t,s)=>{const r=s.margin||0,a="width"===e?s.getWidth()+2*r:s.getHeight()+2*r;return Math.max(t,a)}),0)}getWidth(){return this.parentUI&&"stretch"===this.parentUI.getAlignItems()&&-1!==this.parentUI.getContentDirection().indexOf("column")?this.parentUI.getWidth()-(2*this.parentUI.padding||0):this.width||this.getInnerWidth()+(2*this.padding||0)}getHeight(){return this.parentUI&&"stretch"===this.parentUI.getAlignItems()&&-1!==this.parentUI.getContentDirection().indexOf("row")?this.parentUI.getHeight()-(2*this.parentUI.padding||0):this.height||this.getInnerHeight()+(2*this.padding||0)}}}const B={"\t":"\t","\n":"\n","\r":"\r"," ":" "},F="normal",T="nowrap",P="pre",O="pre-line",E="pre-wrap",z=[F,T,P,O,E];function H(e){return-1===z.indexOf(e)&&(console.warn(`Whitespace::isValid() The provided white-space value ('${e}') is not valid !`),console.warn(`    - Automatic fallback to ('${O}')`),e=O),e}const L=function(e,t){switch(t){case T:case F:e=e.replace(/\n/g," ");case O:e=e.replace(/[ ]{2,}/g," ")}return e},A=function(e){switch(e){case P:case E:case O:return"mandatory"}return null},D=function(e,t,s,r){const a=e[t];switch(r.WHITESPACE){case F:case O:case E:if("mandatory"===a.lineBreak)return!0;if(s+a.xadvance+a.xoffset+a.kerning>r.INNER_WIDTH)return!0;const i=G(e,t,r);return function(e,t,s,r){return!(!e||!e.char)&&(!(t+s<r.INNER_WIDTH)&&r.BREAKON.indexOf(e.char)>-1)}(e[t-1],s,i,r);case P:return"mandatory"===a.lineBreak;default:return!1}},W=function(e,t){const s=e[0],r=e[e.length-1];switch(t){case E:s.char&&"\n"===s.char&&e.length>1&&V([s],e[1]),r.char&&"\n"===r.char&&e.length>1&&M([r],e[e.length-2]);break;case O:case T:case F:let a,i=[];for(let t=0;t<e.length;t++){const s=e[t];if(!(s.char&&B[s.char]&&e.length>t))break;i.push(s),a=e[t+1]}V(i,a),i=[],a=null;for(let t=e.length-1;t>0;t--){const s=e[t];if(!(s.char&&B[s.char]&&t>0))break;i.push(s),a=e[t-1]}M(i,a);break;case P:break;default:return console.warn(`whiteSpace: '${t}' is not valid`),0}return s.offsetX};function M(e,t){if(t)for(let s=0;s<e.length;s++){const r=e[s];r.fontFactor=0,r.offsetX=t.offsetX+t.width}}function V(e,t){if(t)for(let s=0;s<e.length;s++){const r=e[s];r.fontFactor=0,r.offsetX=t.offsetX}}function G(e,t,s,r){if(r=r||0,!e[t])return r;const a=e[t];return a.lineBreak?r+a.xadvance:G(e,t+1,s,r+a.xadvance+a.xoffset+a.kerning+s.LETTERSPACING)}const N="left",X="right",j="center",Y="justify",$="justify-left",q="justify-right",J="justify-center";function K(e,t,s){for(let r=0;r<e.length;r++){const a=e[r],i=Q(a,t,s,r===e.length-1);for(let e=0;e<a.length;e++)a[e].offsetX+=i}if(0===t.indexOf(Y))for(let r=0;r<e.length;r++){const a=e[r];if(-1!==t.indexOf("-")&&r===e.length-1)return;const i=s-a.width;if(i<=0)return;let n=0;for(let e=1;e<a.length-1;e++)n+=" "===a[e].char?1:0;const h=i/n;let o=1;t===q&&(a.reverse(),o=-1);let c=0;for(let e=1;e<=a.length-1;e++){const t=a[e];t.offsetX+=c*o,c+=" "===t.char?h:0}t===q&&a.reverse()}}const Q=(e,t,s,r)=>{switch(t){case $:case Y:case N:return-s/2;case q:case X:return-e.width+s/2;case j:return-e.width/2;case J:return r?-e.width/2:-s/2;default:console.warn(`textAlign: '${t}' is not valid`)}};function Z(e){return class extends e{computeInlinesPosition(){const e=this.getWidth()-(2*this.padding||0),t=this.getHeight()-(2*this.padding||0),s=this.getJustifyContent(),r=this.getTextAlign(),a=this.getInterLine(),i=this.computeLines();let n=i.reduce(((e,t,s,r)=>{const i=t.lineHeight-t.lineBase;return t.forEach((s=>{s.offsetY=e-t.lineHeight+i+r[0].lineHeight})),e-t.lineHeight-a}),0)+a;n=Math.abs(n);const h=(()=>{switch(s){case"start":return t/2-i[0].lineHeight;case"end":return n-i[0].lineHeight-t/2+(i[i.length-1].lineHeight-i[i.length-1].lineHeight);case"center":return n/2-i[0].lineHeight;default:console.warn(`justifyContent: '${s}' is not valid`)}})();i.forEach((e=>{e.forEach((e=>{e.offsetY+=h}))})),K(i,r,e),this.lines=i}calculateBestFit(e){if(0!==this.childrenInlines.length)switch(e){case"grow":this.calculateGrowFit();break;case"shrink":this.calculateShrinkFit();break;case"auto":this.calculateAutoFit()}}calculateGrowFit(){const e=this.getHeight()-(2*this.padding||0);let t=1;const s=this.childrenInlines.find((e=>e.isText));let r,a=1,i=2,n=s._fitFontSize?s._fitFontSize/s.getFontSize():1;do{if(r=this.calculateHeight(n),r>e){if(n<=a){this.childrenInlines.forEach((e=>{e.isInlineBlock||(e._fitFontSize=e.getFontSize())}));break}i=n,n-=(i-a)/2}else{if(Math.abs(e-r)<.075)break;Math.abs(n-i)<5e-10&&(i*=2),a=n,n+=(i-a)/2}}while(++t<=10)}calculateShrinkFit(){const e=this.getHeight()-(2*this.padding||0);let t=1;const s=this.childrenInlines.find((e=>e.isText));let r,a=0,i=1,n=s._fitFontSize?s._fitFontSize/s.getFontSize():1;do{if(r=this.calculateHeight(n),r>e)i=n,n-=(i-a)/2;else{if(n>=i){this.childrenInlines.forEach((e=>{e.isInlineBlock||(e._fitFontSize=e.getFontSize())}));break}if(Math.abs(e-r)<.075)break;a=n,n+=(i-a)/2}}while(++t<=10)}calculateAutoFit(){const e=this.getHeight()-(2*this.padding||0);let t=1;const s=this.childrenInlines.find((e=>e.isText));let r,a=0,i=2,n=s._fitFontSize?s._fitFontSize/s.getFontSize():1;do{if(r=this.calculateHeight(n),r>e)i=n,n-=(i-a)/2;else{if(Math.abs(e-r)<.075)break;Math.abs(n-i)<5e-10&&(i*=2),a=n,n+=(i-a)/2}}while(++t<=10)}computeLines(){const e=this.getWidth()-(2*this.padding||0),t=[[]];return this.childrenInlines.reduce(((s,r)=>{if(!r.inlines)return;const a=r._fitFontSize||r.getFontSize(),i=r.isText?r.getLetterSpacing()*a:0,n=r.getWhiteSpace(),h=r.getBreakOn(),o={WHITESPACE:n,LETTERSPACING:i,BREAKON:h,INNER_WIDTH:e};return r.inlines.reduce(((e,s,r,a)=>D(a,r,e,o)?(t.push([s]),s.offsetX=s.xoffset,0===s.width?0:s.xadvance+i):(t[t.length-1].push(s),s.offsetX=e+s.xoffset+s.kerning,e+s.xadvance+s.kerning+i)),s)}),0),t.forEach((e=>{e.lineHeight=e.reduce(((e,t)=>{const s=void 0!==t.lineHeight?t.lineHeight:t.height;return Math.max(e,s)}),0),e.lineBase=e.reduce(((e,t)=>{const s=void 0!==t.lineBase?t.lineBase:t.height;return Math.max(e,s)}),0),e.width=0;if(e[0]){const t=this.getWhiteSpace(),s=W(e,t);e.forEach((e=>{e.offsetX-=s})),e.width=this.computeLineWidth(e)}})),t}calculateHeight(e){this.childrenInlines.forEach((t=>{t.isInlineBlock||(t._fitFontSize=t.getFontSize()*e,t.calculateInlines(t._fitFontSize))}));const t=this.computeLines(),s=this.getInterLine(),r=t.reduce(((e,t)=>e-t.lineHeight-s),0)+s;return Math.abs(r)}computeLineWidth(e){const t=e[0],s=e[e.length-1];return s.offsetX+s.width+t.offsetX}}}class ee extends n.EventDispatcher{constructor(e,t){super(),this._isReady=!1,this._weight=e,this._style=t,this._size=42,this._lineHeight=42,this._lineBase=42,this._font=null}get typographic(){return this._font}get isReady(){return this._isReady}get weight(){return this._weight}get style(){return this._style}get texture(){return this._texture}get id(){return`${this._name}(w:${this.weight},s:${this.style})`}getTypographyCharacter(e){let t=this._chars[e];if(t)return t;if(e.match(/\s/))return this._chars[" "];const s=le.missingCharacter(this,e);if(s&&(t=this._chars[s],t))return t;throw Error(`FontVariant('${this.id}')::getTypographyCharacter() - character('${e}') and/or fallback character were not found in provided msdf charset.`)}getGeometryCharacter(e){throw new Error(`FontVariant(${typeof this})::getGeometryCharacter() is abstract and should therefore be overridden.`)}getKerningAmount(e){return this._kernings[e]?this._kernings[e]:0}adjustTypographyCharacters(e){for(const t in e){const s=this.getTypographyCharacter(t),r=e[t];for(const a in r)s["_"+a]=e[t][a]}}_checkReadiness(){var e;this._readyCondition()&&((e=this)._isReady=!0,e.dispatchEvent(te))}_readyCondition(){throw new Error(`FontVariant(${typeof this})::_readyCondition() is abstract and should therefore be overridden.`)}}const te={type:"ready"};class se extends class{constructor(){this._size=42,this._lineHeight=42,this._lineBase=38,this._name="-",this._charset=""}get size(){return this._size}get lineHeight(){return this._lineHeight}get lineBase(){return this._lineBase}get name(){return this._name}get charset(){return this._charset}}{constructor(e){super(),this._size=e.info.size,this._lineHeight=e.common.lineHeight,this._lineBase=e.common.base,this._name=e.info.face,this._textureWidth=e.common.scaleW,this._textureHeight=e.common.scaleH,this._charset=e.chars.map((e=>e.char)).join("")}get textureWidth(){return this._textureWidth}get textureHeight(){return this._textureHeight}}class re extends class{constructor(e){this._typographic=e,this._fontFactor=1,this._lineBreak=null,this._fontSize=0,this._kerning=0,this._offsetX=0,this._offsetY=0}get typographic(){return this._typographic}resetOffsets(){this._offsetX=this._offsetY=0}get xadvance(){return this._typographic.xadvance*this._fontFactor}get xoffset(){return this._typographic.xoffset*this._fontFactor}get yoffset(){return this._typographic.yoffset*this._fontFactor}get width(){return this._typographic.width*this._fontFactor}get height(){return this._typographic.height*this._fontFactor}get char(){return this._typographic.char}set lineBreak(e){this._lineBreak=e}get lineBreak(){return this._lineBreak}get anchor(){const e=this._typographic.font.lineHeight,t=this._typographic.font.lineBase;return(this._typographic.yoffset+this._typographic.height-t)*this._fontSize/e}get kerning(){return this._kerning*this._fontFactor}set kerning(e){this._kerning=e}get fontSize(){return this._fontSize}set fontSize(e){this._fontSize=e}get lineHeight(){return this._typographic.font.lineHeight*this._fontFactor}get offsetX(){return this._offsetX}set offsetX(e){this._offsetX=e}get offsetY(){return this._offsetY}set offsetY(e){this._offsetY=e}get lineBase(){return this._typographic.font.lineBase*this._fontFactor}set fontFactor(e){this._fontFactor=e}}{constructor(e){super(e)}get uv(){return this.typographic.uv}}class ae extends class{constructor(e){this._char="",this._width=this._heigth=this._xadvance=1,this._xoffset=this._yoffset=0,this._font=e}get font(){return this._font}get char(){return this._char}get width(){return this._width}get height(){return this._heigth}get xadvance(){return this._xadvance}get xoffset(){return this._xoffset}get yoffset(){return this._yoffset}set yoffset(e){this._yoffset=e}asInlineCharacter(){throw new Error("Abstract... Need to be implemented")}}{constructor(e,t){super(e),this._char=t.char,this._width=t.width,this._heigth=t.height,this._xadvance=t.xadvance?t.xadvance:this._width,this._xoffset=t.xoffset?t.xoffset:0,this._yoffset=t.yoffset?t.yoffset:0,this._uv=null,isNaN(t.x)||(this._uv={left:t.x/e.textureWidth,right:(t.x+t.width)/e.textureWidth,top:1-(t.y+t.height)/e.textureHeight,bottom:1-t.y/e.textureHeight})}get uv(){return this._uv}asInlineCharacter(){return new re(this)}}class ie extends n.PlaneBufferGeometry{constructor(e){super(e.width,e.height),e.uv?(this.mapUVs(e),this.transformGeometry(e)):(this.nullifyUVs(),this.scale(0,0,1),this.translate(0,e.fontSize/2,0))}mapUVs(e){const t=this.attributes.uv;for(let s=0;s<t.count;s++){let r=t.getX(s),a=t.getY(s);[r,a]=(()=>{switch(s){case 0:return[e.uv.left,e.uv.bottom];case 1:return[e.uv.right,e.uv.bottom];case 2:return[e.uv.left,e.uv.top];case 3:return[e.uv.right,e.uv.top]}})(),t.setXY(s,r,a)}}nullifyUVs(){const e=this.attributes.uv;for(let t=0;t<e.count;t++)e.setXY(t,0,0)}transformGeometry(e){this.translate(e.width/2,e.height/2-e.anchor,0)}}class ne extends ee{constructor(e,t,s,r){var a,i;super(e,t),s.pages?this._buildData(s):(a=this,i=s,(new n.FileLoader).setResponseType("json").load(i,(e=>{a._buildData(e),a._checkReadiness()}))),r instanceof n.Texture?this._buildTexture(r):function(e,t){(new n.TextureLoader).load(t,(t=>{e._buildTexture(t),e._checkReadiness()}))}(this,r),this._checkReadiness()}get texture(){return this._texture}_buildData(e){this._font=new se(e),this._kernings=this._buildKerningPairs(e),this._chars=this._buildCharacters(e),this._chars[" "]=this._buildCharacterWhite(e),this._size=e.info.size,this._lineHeight=e.common.lineHeight,this._lineBase=e.common.base}_buildTexture(e){this._texture=e,e.generateMipmaps=!1,e.minFilter=n.LinearFilter,e.magFilter=n.LinearFilter,e.needsUpdate=!0}getGeometryCharacter(e){return new ie(e)}_readyCondition(){return this._chars&&this._texture}_buildKerningPairs(e){const t={};for(let s=0;s<e.kernings.length;s++){const r=e.kernings[s];if(0===r.amount)continue;t[String.fromCharCode(r.first,r.second)]=r.amount}return t}_buildCharacters(e){const t={};for(let s=0;s<e.chars.length;s++){const r=e.chars[s];t[r.char]=new ae(this._font,r)}return t}_buildCharacterWhite(e){return new ae(this._font,{char:" ",width:e.info.size/3,height:.7*e.info.size})}}class he extends n.EventDispatcher{constructor(e){super(),this._name=e,this._variants=[],this._isReady=!1}get isReady(){return this._isReady}addVariant(e,t,s,r,a=!1){if(a||!this.getVariant(e,t)){this._isReady=!1;const a=new ne(e,t,s,r);this._variants.push(a),a.isReady?this._checkReadiness():a.addEventListener("ready",this._checkReadiness)}else console.warn(`FontFamily('${this._name}')::addVariant() - Variant(${e}, ${t}) already exists.`);return this}addCustomImplementationVariant(e,t=!1){return t||!this.getVariant(e.weight,e.style)?(this._isReady=!1,this._variants.push(e),e.isReady?this._checkReadiness():e.addEventListener("ready",this._checkReadiness)):console.warn(`FontFamily('${this._name}')::addCustomImplementationVariant() - Variant(${e.weight}, ${e.style}) already exists.`),this}getVariant(e,t){return this._variants.find((s=>s.weight===e&&s.style===t))}get name(){return this._name}_checkReadiness=()=>{var e;this._variants.every((e=>e.isReady))&&((e=this)._isReady=!0,e.dispatchEvent(oe))}}const oe={type:"ready"};const ce={};const le={addFontFamily:function(e){return ce[e]&&console.error(`FontLibrary::addFontFamily - Font('${e}') is already registered`),ce[e]=new he(e),ce[e]},getFontFamily:function(e){return ce[e]},prepare:function(e){const t=[...arguments];t.forEach((e=>{if(!(e instanceof he))throw new Error(`FontLibrary::prepare() - One of the provided parameter is not a FontFamily. Instead ${typeof e} given.`)}));const s=function(){return t.every((e=>e.isReady))};return new Promise(((e,r)=>{if(s())e();else for(let r=0;r<t.length;r++){const a=t[r];a.isReady||a.addEventListener("ready",(()=>{s()&&e()}))}}))},setMissingCharacterHandler:function(e){de=e},missingCharacter:function(e,t){return de(e,t)}};let de=function(e,t){return console.error(`The character '${t}' is not included in the font characters set.`)," "};class ue{static requestUpdate(e,t,s,r){e.traverse((e=>{e.isUI&&(this.requestedUpdates[e.id]?(t&&(this.requestedUpdates[e.id].updateParsing=!0),s&&(this.requestedUpdates[e.id].updateLayout=!0),r&&(this.requestedUpdates[e.id].updateInner=!0)):this.requestedUpdates[e.id]={updateParsing:t,updateLayout:s,updateInner:r,needCallback:t||s||r})}))}static register(e){this.components.includes(e)||this.components.push(e)}static disposeOf(e){const t=this.components.indexOf(e);t>-1&&this.components.splice(t,1)}static update(){if(Object.keys(this.requestedUpdates).length>0){const e=this.components.filter((e=>!e.parentUI));e.forEach((e=>this.traverseParsing(e))),e.forEach((e=>this.traverseUpdates(e)))}}static traverseParsing(e){const t=this.requestedUpdates[e.id];t&&t.updateParsing&&(e.parseParams(),t.updateParsing=!1),e.childrenUIs.forEach((e=>this.traverseParsing(e)))}static traverseUpdates(e){const t=this.requestedUpdates[e.id];delete this.requestedUpdates[e.id],t&&t.updateLayout&&(t.updateLayout=!1,e.updateLayout()),t&&t.updateInner&&(t.updateInner=!1,e.updateInner()),e.childrenUIs.forEach((e=>{this.traverseUpdates(e)})),t&&t.needCallback&&e.onAfterUpdate()}}ue.components=[],ue.requestedUpdates={};const pe="400",we="normal";const Ce={container:null,fontFamily:null,fontSize:.05,fontKerning:"normal",fontStyle:we,fontWeight:pe,bestFit:"none",offset:.01,interLine:.01,breakOn:"- ,.:?!\n",whiteSpace:O,contentDirection:c,alignItems:p,justifyContent:y,fontTexture:null,textAlign:j,fontColor:new n.Color(16777215),fontOpacity:1,fontPXRange:4,fontSupersampling:!0,borderRadius:.01,borderWidth:0,borderColor:new n.Color("black"),borderOpacity:1,backgroundSize:"cover",backgroundColor:new n.Color(2236962),backgroundWhiteColor:new n.Color(16777215),backgroundOpacity:.8,backgroundOpaqueOpacity:1,backgroundTexture:function(){if(!fe){const e=document.createElement("canvas").getContext("2d");e.canvas.width=1,e.canvas.height=1,e.fillStyle="#ffffff",e.fillRect(0,0,1,1),fe=new n.CanvasTexture(e.canvas),fe.isDefault=!0}return fe},hiddenOverflow:!1,letterSpacing:0};let fe;function ge(e){return class extends e{constructor(e){super(e),this.states={},this.currentState=void 0,this.isUI=!0,this.autoLayout=!0,this.childrenUIs=[],this.childrenBoxes=[],this.childrenTexts=[],this.childrenInlines=[],this.parentUI=null,this.addEventListener("added",this._rebuildParentUI),this.addEventListener("removed",this._rebuildParentUI)}getClippingPlanes(){const e=[];if(this.parentUI){if(this.isBlock&&this.parentUI.getHiddenOverflow()){const t=this.parentUI.getHeight()/2-(this.parentUI.padding||0),s=this.parentUI.getWidth()/2-(this.parentUI.padding||0),r=[new n.Plane(new n.Vector3(0,1,0),t),new n.Plane(new n.Vector3(0,-1,0),t),new n.Plane(new n.Vector3(1,0,0),s),new n.Plane(new n.Vector3(-1,0,0),s)];r.forEach((e=>{e.applyMatrix4(this.parent.matrixWorld)})),e.push(...r)}this.parentUI.parentUI&&e.push(...this.parentUI.getClippingPlanes())}return e}getHighestParent(){return this.parentUI?this.parent.getHighestParent():this}_getProperty(e){return void 0===this[e]&&this.parentUI?this.parent._getProperty(e):void 0!==this[e]?this[e]:Ce[e]}getFontSize(){return this._getProperty("fontSize")}getFontKerning(){return this._getProperty("fontKerning")}getFontStyle(){return this._getProperty("fontStyle")}getFontWeight(){return this._getProperty("fontWeight")}getLetterSpacing(){return this._getProperty("letterSpacing")}getFontTexture(){return this._font&&this._font.isReady?this._font.texture:this._getProperty("fontTexture")}getFontFamily(){return this._getProperty("fontFamily")}getBreakOn(){return this._getProperty("breakOn")}getWhiteSpace(){return this._getProperty("whiteSpace")}getTextAlign(){return this._getProperty("textAlign")}getFontColor(){return this._getProperty("fontColor")}getFontSupersampling(){return this._getProperty("fontSupersampling")}getFontOpacity(){return this._getProperty("fontOpacity")}getFontPXRange(){return this._getProperty("fontPXRange")}getBorderRadius(){return this._getProperty("borderRadius")}getBorderWidth(){return this._getProperty("borderWidth")}getBorderColor(){return this._getProperty("borderColor")}getBorderOpacity(){return this._getProperty("borderOpacity")}getContainer(){return!this.threeOBJ&&this.parent?this.parent.getContainer():this.threeOBJ?this:Ce.container}getParentsNumber(e){return e=e||0,this.parentUI?this.parentUI.getParentsNumber(e+1):e}getBackgroundOpacity(){return this.backgroundOpacity||0===this.backgroundOpacity?this.backgroundOpacity:Ce.backgroundOpacity}getBackgroundColor(){return this.backgroundColor||Ce.backgroundColor}getBackgroundTexture(){return this.backgroundTexture||Ce.backgroundTexture()}getAlignContent(){return this.alignContent||Ce.alignContent}getAlignItems(){return this.alignItems||Ce.alignItems}getContentDirection(){return this.contentDirection||Ce.contentDirection}getJustifyContent(){return this.justifyContent||Ce.justifyContent}getInterLine(){return void 0===this.interLine?Ce.interLine:this.interLine}getOffset(){return void 0===this.offset?Ce.offset:this.offset}getBackgroundSize(){return void 0===this.backgroundSize?Ce.backgroundSize:this.backgroundSize}getHiddenOverflow(){return void 0===this.hiddenOverflow?Ce.hiddenOverflow:this.hiddenOverflow}getBestFit(){return void 0===this.bestFit?Ce.bestFit:this.bestFit}_rebuildChildrenLists(){this.childrenUIs=this.children.filter((e=>e.isUI)),this.childrenBoxes=this.children.filter((e=>e.isBoxComponent)),this.childrenInlines=this.children.filter((e=>e.isInline)),this.childrenTexts=this.children.filter((e=>e.isText))}_rebuildParentUI=()=>{this.parent&&this.parent.isUI?this.parentUI=this.parent:this.parentUI=null};add(){for(const e of Object.keys(arguments))arguments[e].isInline&&this.update(null,!0);const e=super.add(...arguments);return this._rebuildChildrenLists(),e}remove(){for(const e of Object.keys(arguments))arguments[e].isInline&&this.update(null,!0);const e=super.remove(...arguments);return this._rebuildChildrenLists(),e}update(e,t,s){ue.requestUpdate(this,e,t,s)}onAfterUpdate(){}set(e){let t,s,r;if(ue.register(this),e&&JSON.stringify(e)!==JSON.stringify({})){e.alignContent&&(e.alignItems=e.alignContent,e.textAlign||(e.textAlign=e.alignContent),console.warn("`alignContent` property has been deprecated, please rely on `alignItems` and `textAlign` instead."),delete e.alignContent),e.alignItems&&g(e.alignItems);for(const a of Object.keys(e))if(this[a]!=e[a])switch(a){case"content":case"fontWeight":case"fontStyle":case"whiteSpace":this.isText&&(t=!0),s=!0,this[a]=e[a];break;case"fontSize":case"fontKerning":case"breakOn":case"margin":case"contentDirection":case"justifyContent":case"alignContent":case"alignItems":case"textAlign":case"textType":s=!0,this[a]=e[a];break;case"bestFit":this.isBlock&&(t=!0,s=!0),this[a]=e[a];break;case"width":case"height":case"padding":(this.isInlineBlock||this.isBlock&&"none"!=this.getBestFit())&&(t=!0),s=!0,this[a]=e[a];break;case"letterSpacing":case"interLine":this.isBlock&&"none"!=this.getBestFit()&&(t=!0),s=!0,this[a]=e[a];break;case"fontColor":case"fontOpacity":case"fontSupersampling":case"offset":case"backgroundColor":case"backgroundOpacity":case"backgroundTexture":case"backgroundSize":case"borderRadius":case"borderWidth":case"borderColor":case"borderOpacity":r=!0,this[a]=e[a];break;case"hiddenOverflow":this[a]=e[a]}if(e.fontFamily instanceof he)this.fontFamily=e.fontFamily,this.font=e.fontFamily.getVariant(pe,we);else if("string"!=typeof e.fontFamily||e.fontTexture){if(e.fontFamily&&e.fontTexture){const t=e.fontFamily.pages?e.fontFamily.info.face:e.fontFamily;let s=le.getFontFamily(t);s||(s=le.addFontFamily(t).addVariant(pe,we,e.fontFamily,e.fontTexture)),this.fontFamily=s,this.font=s.getVariant(pe,we)}}else{const t=le.getFontFamily(e.fontFamily);t&&(this.fontFamily=t,this.font=t.getVariant(pe,we))}this.parentUI&&"none"!=this.parentUI.getBestFit()&&this.parentUI.update(!0,!0,!1),this.update(t,s,r),s&&this.getHighestParent().update(!1,!0,!1)}}setupState(e){this.states[e.state]={attributes:e.attributes,onSet:e.onSet}}setState(e){const t=this.states[e];t?e!==this.currentState&&(this.currentState=e,t.onSet&&t.onSet(),t.attributes&&this.set(t.attributes)):console.warn(`state "${e}" does not exist within this component`)}clear(){this.traverse((e=>{ue.disposeOf(e),e.material&&e.material.dispose(),e.geometry&&e.geometry.dispose()}))}}}function me(e){return class extends e{constructor(e){super(e),this.textUniforms={u_texture:{value:null},u_color:{value:null},u_opacity:{value:null},u_pxRange:{value:null},u_useRGSS:{value:null}},this.backgroundUniforms={u_texture:{value:null},u_color:{value:null},u_opacity:{value:null},u_backgroundMapping:{value:null},u_borderWidth:{value:null},u_borderColor:{value:null},u_borderRadiusTopLeft:{value:null},u_borderRadiusTopRight:{value:null},u_borderRadiusBottomRight:{value:null},u_borderRadiusBottomLeft:{value:null},u_borderOpacity:{value:null},u_size:{value:new n.Vector2(1,1)},u_tSize:{value:new n.Vector2(1,1)}}}updateBackgroundMaterial(){this.backgroundUniforms.u_texture.value=this.getBackgroundTexture(),this.backgroundUniforms.u_tSize.value.set(this.backgroundUniforms.u_texture.value.image.width,this.backgroundUniforms.u_texture.value.image.height),this.size&&this.backgroundUniforms.u_size.value.copy(this.size),this.backgroundUniforms.u_texture.value.isDefault?(this.backgroundUniforms.u_color.value=this.getBackgroundColor(),this.backgroundUniforms.u_opacity.value=this.getBackgroundOpacity()):(this.backgroundUniforms.u_color.value=this.backgroundColor||Ce.backgroundWhiteColor,this.backgroundUniforms.u_opacity.value=this.backgroundOpacity||0===this.backgroundOpacity?this.backgroundOpacity:Ce.backgroundOpaqueOpacity),this.backgroundUniforms.u_backgroundMapping.value=(()=>{switch(this.getBackgroundSize()){case"stretch":return 0;case"contain":return 1;case"cover":return 2}})();const e=this.getBorderRadius();this.backgroundUniforms.u_borderWidth.value=this.getBorderWidth(),this.backgroundUniforms.u_borderColor.value=this.getBorderColor(),this.backgroundUniforms.u_borderOpacity.value=this.getBorderOpacity(),Array.isArray(e)?(this.backgroundUniforms.u_borderRadiusTopLeft.value=e[0],this.backgroundUniforms.u_borderRadiusTopRight.value=e[1],this.backgroundUniforms.u_borderRadiusBottomRight.value=e[2],this.backgroundUniforms.u_borderRadiusBottomLeft.value=e[3]):(this.backgroundUniforms.u_borderRadiusTopLeft.value=e,this.backgroundUniforms.u_borderRadiusTopRight.value=e,this.backgroundUniforms.u_borderRadiusBottomRight.value=e,this.backgroundUniforms.u_borderRadiusBottomLeft.value=e)}updateTextMaterial(){this.textUniforms.u_texture.value=this.getFontTexture(),this.textUniforms.u_color.value=this.getFontColor(),this.textUniforms.u_opacity.value=this.getFontOpacity(),this.textUniforms.u_pxRange.value=this.getFontPXRange(),this.textUniforms.u_useRGSS.value=this.getFontSupersampling()}getBackgroundMaterial(){return this.backgroundMaterial&&this.backgroundUniforms||(this.backgroundMaterial=this._makeBackgroundMaterial()),this.backgroundMaterial}getFontMaterial(){return this.fontMaterial&&this.textUniforms||(this.fontMaterial=this._makeTextMaterial()),this.fontMaterial}_makeTextMaterial(){return new n.ShaderMaterial({uniforms:this.textUniforms,transparent:!0,clipping:!0,vertexShader:_e,fragmentShader:ye,extensions:{derivatives:!0}})}_makeBackgroundMaterial(){return new n.ShaderMaterial({uniforms:this.backgroundUniforms,transparent:!0,clipping:!0,vertexShader:be,fragmentShader:ve,extensions:{derivatives:!0}})}updateClippingPlanes(e){const t=void 0!==e?e:this.getClippingPlanes();JSON.stringify(t)!==JSON.stringify(this.clippingPlanes)&&(this.clippingPlanes=t,this.fontMaterial&&(this.fontMaterial.clippingPlanes=this.clippingPlanes),this.backgroundMaterial&&(this.backgroundMaterial.clippingPlanes=this.clippingPlanes))}}}const _e="\nvarying vec2 vUv;\n\n#include <clipping_planes_pars_vertex>\n\nvoid main() {\n\n\tvUv = uv;\n\tvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\n\tgl_Position = projectionMatrix * mvPosition;\n\tgl_Position.z -= 0.00001;\n\n\t#include <clipping_planes_vertex>\n\n}\n",ye="\n\nuniform sampler2D u_texture;\nuniform vec3 u_color;\nuniform float u_opacity;\nuniform float u_pxRange;\nuniform bool u_useRGSS;\n\nvarying vec2 vUv;\n\n#include <clipping_planes_pars_fragment>\n\n// functions from the original msdf repo:\n// https://github.com/Chlumsky/msdfgen#using-a-multi-channel-distance-field\n\nfloat median(float r, float g, float b) {\n\treturn max(min(r, g), min(max(r, g), b));\n}\n\nfloat screenPxRange() {\n\tvec2 unitRange = vec2(u_pxRange)/vec2(textureSize(u_texture, 0));\n\tvec2 screenTexSize = vec2(1.0)/fwidth(vUv);\n\treturn max(0.5*dot(unitRange, screenTexSize), 1.0);\n}\n\nfloat tap(vec2 offsetUV) {\n\tvec3 msd = texture( u_texture, offsetUV ).rgb;\n\tfloat sd = median(msd.r, msd.g, msd.b);\n\tfloat screenPxDistance = screenPxRange() * (sd - 0.5);\n\tfloat alpha = clamp(screenPxDistance + 0.5, 0.0, 1.0);\n\treturn alpha;\n}\n\nvoid main() {\n\n\tfloat alpha;\n\n\tif ( u_useRGSS ) {\n\n\t\t// shader-based supersampling based on https://bgolus.medium.com/sharper-mipmapping-using-shader-based-supersampling-ed7aadb47bec\n\t\t// per pixel partial derivatives\n\t\tvec2 dx = dFdx(vUv);\n\t\tvec2 dy = dFdy(vUv);\n\n\t\t// rotated grid uv offsets\n\t\tvec2 uvOffsets = vec2(0.125, 0.375);\n\t\tvec2 offsetUV = vec2(0.0, 0.0);\n\n\t\t// supersampled using 2x2 rotated grid\n\t\talpha = 0.0;\n\t\toffsetUV.xy = vUv + uvOffsets.x * dx + uvOffsets.y * dy;\n\t\talpha += tap(offsetUV);\n\t\toffsetUV.xy = vUv - uvOffsets.x * dx - uvOffsets.y * dy;\n\t\talpha += tap(offsetUV);\n\t\toffsetUV.xy = vUv + uvOffsets.y * dx - uvOffsets.x * dy;\n\t\talpha += tap(offsetUV);\n\t\toffsetUV.xy = vUv - uvOffsets.y * dx + uvOffsets.x * dy;\n\t\talpha += tap(offsetUV);\n\t\talpha *= 0.25;\n\n\t} else {\n\n\t\talpha = tap( vUv );\n\n\t}\n\n\n\t// apply the opacity\n\talpha *= u_opacity;\n\n\t// this is useful to avoid z-fighting when quads overlap because of kerning\n\tif ( alpha < 0.02) discard;\n\n\n\tgl_FragColor = vec4( u_color, alpha );\n\n\t#include <clipping_planes_fragment>\n\n}\n",be="\nvarying vec2 vUv;\n\n#include <clipping_planes_pars_vertex>\n\nvoid main() {\n\n\tvUv = uv;\n\tvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\n\tgl_Position = projectionMatrix * mvPosition;\n\n\t#include <clipping_planes_vertex>\n\n}\n",ve="\n\nuniform sampler2D u_texture;\nuniform vec3 u_color;\nuniform float u_opacity;\n\nuniform float u_borderRadiusTopLeft;\nuniform float u_borderRadiusTopRight;\nuniform float u_borderRadiusBottomLeft;\nuniform float u_borderRadiusBottomRight;\nuniform float u_borderWidth;\nuniform vec3 u_borderColor;\nuniform float u_borderOpacity;\nuniform vec2 u_size;\nuniform vec2 u_tSize;\nuniform int u_backgroundMapping;\n\nvarying vec2 vUv;\n\n#include <clipping_planes_pars_fragment>\n\nfloat getEdgeDist() {\n\tvec2 ndc = vec2( vUv.x * 2.0 - 1.0, vUv.y * 2.0 - 1.0 );\n\tvec2 planeSpaceCoord = vec2( u_size.x * 0.5 * ndc.x, u_size.y * 0.5 * ndc.y );\n\tvec2 corner = u_size * 0.5;\n\tvec2 offsetCorner = corner - abs( planeSpaceCoord );\n\tfloat innerRadDist = min( offsetCorner.x, offsetCorner.y ) * -1.0;\n\tif (vUv.x < 0.5 && vUv.y >= 0.5) {\n\t\tfloat roundedDist = length( max( abs( planeSpaceCoord ) - u_size * 0.5 + u_borderRadiusTopLeft, 0.0 ) ) - u_borderRadiusTopLeft;\n\t\tfloat s = step( innerRadDist * -1.0, u_borderRadiusTopLeft );\n\t\treturn mix( innerRadDist, roundedDist, s );\n\t}\n\tif (vUv.x >= 0.5 && vUv.y >= 0.5) {\n\t\tfloat roundedDist = length( max( abs( planeSpaceCoord ) - u_size * 0.5 + u_borderRadiusTopRight, 0.0 ) ) - u_borderRadiusTopRight;\n\t\tfloat s = step( innerRadDist * -1.0, u_borderRadiusTopRight );\n\t\treturn mix( innerRadDist, roundedDist, s );\n\t}\n\tif (vUv.x >= 0.5 && vUv.y < 0.5) {\n\t\tfloat roundedDist = length( max( abs( planeSpaceCoord ) - u_size * 0.5 + u_borderRadiusBottomRight, 0.0 ) ) - u_borderRadiusBottomRight;\n\t\tfloat s = step( innerRadDist * -1.0, u_borderRadiusBottomRight );\n\t\treturn mix( innerRadDist, roundedDist, s );\n\t}\n\tif (vUv.x < 0.5 && vUv.y < 0.5) {\n\t\tfloat roundedDist = length( max( abs( planeSpaceCoord ) - u_size * 0.5 + u_borderRadiusBottomLeft, 0.0 ) ) - u_borderRadiusBottomLeft;\n\t\tfloat s = step( innerRadDist * -1.0, u_borderRadiusBottomLeft );\n\t\treturn mix( innerRadDist, roundedDist, s );\n\t}\n}\n\nvec4 sampleTexture() {\n\tfloat textureRatio = u_tSize.x / u_tSize.y;\n\tfloat panelRatio = u_size.x / u_size.y;\n\tvec2 uv = vUv;\n\tif ( u_backgroundMapping == 1 ) { // contain\n\t\tif ( textureRatio < panelRatio ) { // repeat on X\n\t\t\tfloat newX = uv.x * ( panelRatio / textureRatio );\n\t\t\tnewX += 0.5 - 0.5 * ( panelRatio / textureRatio );\n\t\t\tuv.x = newX;\n\t\t} else { // repeat on Y\n\t\t\tfloat newY = uv.y * ( textureRatio / panelRatio );\n\t\t\tnewY += 0.5 - 0.5 * ( textureRatio / panelRatio );\n\t\t\tuv.y = newY;\n\t\t}\n\t} else if ( u_backgroundMapping == 2 ) { // cover\n\t\tif ( textureRatio < panelRatio ) { // stretch on Y\n\t\t\tfloat newY = uv.y * ( textureRatio / panelRatio );\n\t\t\tnewY += 0.5 - 0.5 * ( textureRatio / panelRatio );\n\t\t\tuv.y = newY;\n\t\t} else { // stretch on X\n\t\t\tfloat newX = uv.x * ( panelRatio / textureRatio );\n\t\t\tnewX += 0.5 - 0.5 * ( panelRatio / textureRatio );\n\t\t\tuv.x = newX;\n\t\t}\n\t}\n\treturn texture2D( u_texture, uv ).rgba;\n}\n\nvoid main() {\n\n\tfloat edgeDist = getEdgeDist();\n\tfloat change = fwidth( edgeDist );\n\n\tvec4 textureSample = sampleTexture();\n\tvec3 blendedColor = textureSample.rgb * u_color;\n\n\tfloat alpha = smoothstep( change, 0.0, edgeDist );\n\tfloat blendedOpacity = u_opacity * textureSample.a * alpha;\n\n\tvec4 frameColor = vec4( blendedColor, blendedOpacity );\n\n\tif ( u_borderWidth <= 0.0 ) {\n\t\tgl_FragColor = frameColor;\n\t} else {\n\t\tvec4 borderColor = vec4( u_borderColor, u_borderOpacity * alpha );\n\t\tfloat stp = smoothstep( edgeDist + change, edgeDist, u_borderWidth * -1.0 );\n\t\tgl_FragColor = mix( frameColor, borderColor, stp );\n\t}\n\n\t#include <clipping_planes_fragment>\n}\n";class xe extends n.Mesh{constructor(e){super(new n.PlaneGeometry,e),this.castShadow=!0,this.receiveShadow=!0,this.name="MeshUI-Frame"}}let ke=null;function Re(...e){if(!ke)throw new Error("Cannot use mixins with Base null");let t=ke;ke=null;let s,r=e.length;for(;--r>=0;)s=e[r],t=s(t);return t}Re.withBase=e=>(ke=e,Re);class Ue extends(Re.withBase(n.Object3D)(I,Z,me,ge)){constructor(e){super(e),this.isBlock=!0,this.size=new n.Vector2(1,1),this.frame=new xe(this.getBackgroundMaterial()),this.frame.onBeforeRender=()=>{this.updateClippingPlanes&&this.updateClippingPlanes()},this.add(this.frame),this.set(e)}parseParams(){const e=this.getBestFit();"none"!=e&&this.childrenTexts.length?this.calculateBestFit(e):this.childrenTexts.forEach((e=>{e._fitFontSize=void 0}))}updateLayout(){const e=this.getWidth(),t=this.getHeight();e&&t?(this.size.set(e,t),this.frame.scale.set(e,t,1),this.frame&&this.updateBackgroundMaterial(),this.frame.renderOrder=this.getParentsNumber(),this.autoLayout&&this.setPosFromParentRecords(),this.childrenInlines.length&&this.computeInlinesPosition(),this.computeChildrenPosition(),this.parentUI&&(this.position.z=this.getOffset())):console.warn("Block got no dimension from its parameters or from children parameters")}updateInner(){this.parentUI&&(this.position.z=this.getOffset()),this.frame&&this.updateBackgroundMaterial()}}function Se(e){return class extends e{constructor(e){super(e),this.isInline=!0}}}const Ie=function e(t){t.children.forEach((s=>{s.children.length>0&&e(s),t.remove(s),ue.disposeOf(s),s.material&&s.material.dispose(),s.geometry&&s.geometry.dispose()})),t.children=[]};function Be(e){let t,s,r,a=0;for(let i=0;i<e.length;++i){const n=e[i];if(n.isInterleavedBufferAttribute)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. InterleavedBufferAttributes are not supported."),null;if(void 0===t&&(t=n.array.constructor),t!==n.array.constructor)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.array must be of consistent array types across matching attributes."),null;if(void 0===s&&(s=n.itemSize),s!==n.itemSize)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.itemSize must be consistent across matching attributes."),null;if(void 0===r&&(r=n.normalized),r!==n.normalized)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.normalized must be consistent across matching attributes."),null;a+=n.array.length}const i=new t(a);let h=0;for(let t=0;t<e.length;++t)i.set(e[t].array,h),h+=e[t].array.length;return new n.BufferAttribute(i,s,r)}class Fe extends(Re.withBase(n.Object3D)(Se,me,ge)){constructor(e){super(),this.isText=!0,this._textContent=null,this._textContentGlyphs=null,this._textContentInlines=null,this.set(e),this.addEventListener("added",this._acquireFont)}set font(e){this._font&&!this._font.isReady&&this._font.removeEventListener("ready",this._handleFontVariantReady),this._font=e,this._font.isReady?this._handleFontVariantReady():(this.inlines=null,this._font.addEventListener("ready",this._handleFontVariantReady))}_handleFontVariantReady=()=>{this.update(!0,!0,!1),this.getHighestParent().update(!1,!0,!1),this._font.removeEventListener("ready",this._handleFontVariantReady)};_acquireFont=()=>{if(!this._font){let e=this.getFontFamily();if(e)if(e instanceof he)this.font=e.getVariant(this.getFontWeight(),this.getFontStyle());else{const t=e.pages?e.info.face:e;e=le.getFontFamily(t),e&&(this.font=e.getVariant(this.getFontWeight(),this.getFontStyle()))}}};_onBeforeRender=()=>{this.updateClippingPlanes&&this.updateClippingPlanes()};get font(){return this._font}_buildContentKernings(){if("none"!==this.getFontKerning())for(let e=1;e<this._textContent.length;e++){const t=this._textContent[e-1]+this._textContent[e];this._textContentInlines[e].kerning=this._font.getKerningAmount(t)}}parseParams(){this._acquireFont(),this.content&&0!==this.content.length&&this._font&&this._font.isReady&&(this._textContent=L(this.content,this.getWhiteSpace()),this._textContentGlyphs=this._textContent.split("").map((e=>this._font.getTypographyCharacter(e))),this._textContentInlines=this._textContentGlyphs.map((e=>e.asInlineCharacter())),this.inlines=this._textContentInlines,this.calculateInlines(this._fitFontSize||this.getFontSize()))}updateLayout(){if(Ie(this),this.inlines){const e=function(e,t=!1){const s=null!==e[0].index,r=new Set(Object.keys(e[0].attributes)),a=new Set(Object.keys(e[0].morphAttributes)),i={},h={},o=e[0].morphTargetsRelative,c=new n.BufferGeometry;let l=0;for(let n=0;n<e.length;++n){const d=e[n];let u=0;if(s!==(null!==d.index))return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+n+". All geometries must have compatible attributes; make sure index attribute exists among all geometries, or in none of them."),null;for(const e in d.attributes){if(!r.has(e))return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+n+'. All geometries must have compatible attributes; make sure "'+e+'" attribute exists among all geometries, or in none of them.'),null;void 0===i[e]&&(i[e]=[]),i[e].push(d.attributes[e]),u++}if(u!==r.size)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+n+". Make sure all geometries have the same number of attributes."),null;if(o!==d.morphTargetsRelative)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+n+". .morphTargetsRelative must be consistent throughout all geometries."),null;for(const e in d.morphAttributes){if(!a.has(e))return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+n+".  .morphAttributes must be consistent throughout all geometries."),null;void 0===h[e]&&(h[e]=[]),h[e].push(d.morphAttributes[e])}if(c.userData.mergedUserData=c.userData.mergedUserData||[],c.userData.mergedUserData.push(d.userData),t){let e;if(s)e=d.index.count;else{if(void 0===d.attributes.position)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+n+". The geometry must have either an index or a position attribute"),null;e=d.attributes.position.count}c.addGroup(l,e,n),l+=e}}if(s){let t=0;const s=[];for(let r=0;r<e.length;++r){const a=e[r].index;for(let e=0;e<a.count;++e)s.push(a.getX(e)+t);t+=e[r].attributes.position.count}c.setIndex(s)}for(const e in i){const t=Be(i[e]);if(!t)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the "+e+" attribute."),null;c.setAttribute(e,t)}for(const e in h){const t=h[e][0].length;if(0===t)break;c.morphAttributes=c.morphAttributes||{},c.morphAttributes[e]=[];for(let s=0;s<t;++s){const t=[];for(let r=0;r<h[e].length;++r)t.push(h[e][r][s]);const r=Be(t);if(!r)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the "+e+" morphAttribute."),null;c.morphAttributes[e].push(r)}}return c}(this.inlines.map((e=>this._font.getGeometryCharacter(e).translate(e.offsetX,e.offsetY,0))));this.textContent=new n.Mesh(e,this.getFontMaterial()),this.textContent.renderOrder=1/0,this.textContent.onBeforeRender=this._onBeforeRender,this.updateTextMaterial(),this.add(this.textContent)}this.position.z=this.getOffset()}updateInner(){this.position.z=this.getOffset(),this.textContent&&this.updateTextMaterial()}calculateInlines(e){if(!this._font||!this._font.isReady)return;if(!this._textContent)return;const t=this.getWhiteSpace(),s=A(t),r=this.getBreakOn(),a=e/this._font.typographic.size;for(let i=0;i<this._textContent.length;i++){const n=this._textContent[i],h=this._textContentInlines[i];h.resetOffsets();let o=null;t!==T&&(r.includes(n)||n.match(/\s/g))&&(o="possible"),n.match(/\n/g)&&(o=s),h.lineBreak=o,h.fontSize=e,h.fontFactor=a}}}class Te extends(Re.withBase(n.Object3D)(Se,I,Z,me,ge)){constructor(e){super(e),this.isInlineBlock=!0,this.size=new n.Vector2(1,1),this.frame=new xe(this.getBackgroundMaterial()),this.frame.onBeforeRender=()=>{this.updateClippingPlanes&&this.updateClippingPlanes()},this.add(this.frame),this.set(e)}parseParams(){this.width||console.warn("inlineBlock has no width. Set to 0.3 by default"),this.height||console.warn("inlineBlock has no height. Set to 0.3 by default"),this.inlines=[{lineBreak:"possible",kerning:0,offsetX:0,offsetY:0,width:this.width||.3,height:this.height||.3,anchor:0,xadvance:this.width||.3,xoffset:0,yoffset:0,lineHeight:this.height||.3,lineBase:this.height||.3}]}updateLayout(){const e=this.getWidth(),t=this.getHeight();if(this.inlines){const e=this.inlines[0];this.position.set(e.width/2,e.height/2,0),this.position.x+=e.offsetX,this.position.y+=e.offsetY,this.position.y+=e.anchor}this.size.set(e,t),this.frame.scale.set(e,t,1),this.frame&&this.updateBackgroundMaterial(),this.frame.renderOrder=this.getParentsNumber(),this.childrenInlines.length&&this.computeInlinesPosition(),this.computeChildrenPosition(),this.position.z=this.getOffset()}updateInner(){this.position.z=this.getOffset(),this.frame&&this.updateBackgroundMaterial()}}const Pe=[[[{width:.1,chars:[{lowerCase:"a",upperCase:"A"}]},{width:.1,chars:[{lowerCase:"z",upperCase:"Z"}]},{width:.1,chars:[{lowerCase:"e",upperCase:"E"}]},{width:.1,chars:[{lowerCase:"r",upperCase:"R"}]},{width:.1,chars:[{lowerCase:"t",upperCase:"T"}]},{width:.1,chars:[{lowerCase:"y",upperCase:"Y"}]},{width:.1,chars:[{lowerCase:"u",upperCase:"U"}]},{width:.1,chars:[{lowerCase:"i",upperCase:"I"}]},{width:.1,chars:[{lowerCase:"o",upperCase:"O"}]},{width:.1,chars:[{lowerCase:"p",upperCase:"P"}]}],[{width:.1,chars:[{lowerCase:"q",upperCase:"Q"}]},{width:.1,chars:[{lowerCase:"s",upperCase:"S"}]},{width:.1,chars:[{lowerCase:"d",upperCase:"D"}]},{width:.1,chars:[{lowerCase:"f",upperCase:"F"}]},{width:.1,chars:[{lowerCase:"g",upperCase:"G"}]},{width:.1,chars:[{lowerCase:"h",upperCase:"H"}]},{width:.1,chars:[{lowerCase:"j",upperCase:"J"}]},{width:.1,chars:[{lowerCase:"k",upperCase:"K"}]},{width:.1,chars:[{lowerCase:"l",upperCase:"L"}]},{width:.1,chars:[{lowerCase:"m",upperCase:"M"}]}],[{width:.2,command:"shift",chars:[{icon:"shift"}]},{width:.1,chars:[{lowerCase:"w",upperCase:"W"}]},{width:.1,chars:[{lowerCase:"x",upperCase:"X"}]},{width:.1,chars:[{lowerCase:"c",upperCase:"C"}]},{width:.1,chars:[{lowerCase:"v",upperCase:"V"}]},{width:.1,chars:[{lowerCase:"b",upperCase:"B"}]},{width:.1,chars:[{lowerCase:"n",upperCase:"N"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]],[[{width:.1,chars:[{lowerCase:"1"}]},{width:.1,chars:[{lowerCase:"2"}]},{width:.1,chars:[{lowerCase:"3"}]},{width:.1,chars:[{lowerCase:"4"}]},{width:.1,chars:[{lowerCase:"5"}]},{width:.1,chars:[{lowerCase:"6"}]},{width:.1,chars:[{lowerCase:"7"}]},{width:.1,chars:[{lowerCase:"8"}]},{width:.1,chars:[{lowerCase:"9"}]},{width:.1,chars:[{lowerCase:"0"}]}],[{width:.1,chars:[{lowerCase:"@"}]},{width:.1,chars:[{lowerCase:"#"}]},{width:.1,chars:[{lowerCase:"|"}]},{width:.1,chars:[{lowerCase:"_"}]},{width:.1,chars:[{lowerCase:"&"}]},{width:.1,chars:[{lowerCase:"-"}]},{width:.1,chars:[{lowerCase:"+"}]},{width:.1,chars:[{lowerCase:"("}]},{width:.1,chars:[{lowerCase:")"}]},{width:.1,chars:[{lowerCase:"/"}]}],[{width:.1,chars:[{lowerCase:"="}]},{width:.1,chars:[{lowerCase:"*"}]},{width:.1,chars:[{lowerCase:'"'}]},{width:.1,chars:[{lowerCase:"'"}]},{width:.1,chars:[{lowerCase:":"}]},{width:.1,chars:[{lowerCase:";"}]},{width:.1,chars:[{lowerCase:"!"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]]],Oe=[[[{width:.1,chars:[{lowerCase:"q",upperCase:"Q"}]},{width:.1,chars:[{lowerCase:"w",upperCase:"W"}]},{width:.1,chars:[{lowerCase:"e",upperCase:"E"}]},{width:.1,chars:[{lowerCase:"r",upperCase:"R"}]},{width:.1,chars:[{lowerCase:"t",upperCase:"T"}]},{width:.1,chars:[{lowerCase:"y",upperCase:"Y"}]},{width:.1,chars:[{lowerCase:"u",upperCase:"U"}]},{width:.1,chars:[{lowerCase:"i",upperCase:"I"}]},{width:.1,chars:[{lowerCase:"o",upperCase:"O"}]},{width:.1,chars:[{lowerCase:"p",upperCase:"P"}]}],[{width:.1,chars:[{lowerCase:"a",upperCase:"A"}]},{width:.1,chars:[{lowerCase:"s",upperCase:"S"}]},{width:.1,chars:[{lowerCase:"d",upperCase:"D"}]},{width:.1,chars:[{lowerCase:"f",upperCase:"F"}]},{width:.1,chars:[{lowerCase:"g",upperCase:"G"}]},{width:.1,chars:[{lowerCase:"h",upperCase:"H"}]},{width:.1,chars:[{lowerCase:"j",upperCase:"J"}]},{width:.1,chars:[{lowerCase:"k",upperCase:"K"}]},{width:.1,chars:[{lowerCase:"l",upperCase:"L"}]}],[{width:.15,command:"shift",chars:[{icon:"shift"}]},{width:.1,chars:[{lowerCase:"z",upperCase:"Z"}]},{width:.1,chars:[{lowerCase:"x",upperCase:"X"}]},{width:.1,chars:[{lowerCase:"c",upperCase:"C"}]},{width:.1,chars:[{lowerCase:"v",upperCase:"V"}]},{width:.1,chars:[{lowerCase:"b",upperCase:"B"}]},{width:.1,chars:[{lowerCase:"n",upperCase:"N"}]},{width:.1,chars:[{lowerCase:"m",upperCase:"M"}]},{width:.15,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]],[[{width:.1,chars:[{lowerCase:"1"}]},{width:.1,chars:[{lowerCase:"2"}]},{width:.1,chars:[{lowerCase:"3"}]},{width:.1,chars:[{lowerCase:"4"}]},{width:.1,chars:[{lowerCase:"5"}]},{width:.1,chars:[{lowerCase:"6"}]},{width:.1,chars:[{lowerCase:"7"}]},{width:.1,chars:[{lowerCase:"8"}]},{width:.1,chars:[{lowerCase:"9"}]},{width:.1,chars:[{lowerCase:"0"}]}],[{width:.1,chars:[{lowerCase:"@"}]},{width:.1,chars:[{lowerCase:"#"}]},{width:.1,chars:[{lowerCase:"|"}]},{width:.1,chars:[{lowerCase:"_"}]},{width:.1,chars:[{lowerCase:"&"}]},{width:.1,chars:[{lowerCase:"-"}]},{width:.1,chars:[{lowerCase:"+"}]},{width:.1,chars:[{lowerCase:"("}]},{width:.1,chars:[{lowerCase:")"}]},{width:.1,chars:[{lowerCase:"/"}]}],[{width:.1,chars:[{lowerCase:"="}]},{width:.1,chars:[{lowerCase:"*"}]},{width:.1,chars:[{lowerCase:'"'}]},{width:.1,chars:[{lowerCase:"'"}]},{width:.1,chars:[{lowerCase:":"}]},{width:.1,chars:[{lowerCase:";"}]},{width:.1,chars:[{lowerCase:"!"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]]],Ee=[[[{width:1/12,chars:[{lowerCase:"й",upperCase:"Й"},{lowerCase:"q",upperCase:"Q"}]},{width:1/12,chars:[{lowerCase:"ц",upperCase:"Ц"},{lowerCase:"w",upperCase:"W"}]},{width:1/12,chars:[{lowerCase:"у",upperCase:"У"},{lowerCase:"e",upperCase:"E"}]},{width:1/12,chars:[{lowerCase:"к",upperCase:"К"},{lowerCase:"r",upperCase:"R"}]},{width:1/12,chars:[{lowerCase:"е",upperCase:"Е"},{lowerCase:"t",upperCase:"T"}]},{width:1/12,chars:[{lowerCase:"н",upperCase:"Н"},{lowerCase:"y",upperCase:"Y"}]},{width:1/12,chars:[{lowerCase:"г",upperCase:"Г"},{lowerCase:"u",upperCase:"U"}]},{width:1/12,chars:[{lowerCase:"ш",upperCase:"Ш"},{lowerCase:"i",upperCase:"I"}]},{width:1/12,chars:[{lowerCase:"щ",upperCase:"Щ"},{lowerCase:"o",upperCase:"O"}]},{width:1/12,chars:[{lowerCase:"з",upperCase:"З"},{lowerCase:"p",upperCase:"P"}]},{width:1/12,chars:[{lowerCase:"х",upperCase:"Х"},{lowerCase:"{",upperCase:"["}]},{width:1/12,chars:[{lowerCase:"ъ",upperCase:"Ъ"},{lowerCase:"}",upperCase:"]"}]}],[{width:1/12,chars:[{lowerCase:"ф",upperCase:"Ф"},{lowerCase:"a",upperCase:"A"}]},{width:1/12,chars:[{lowerCase:"ы",upperCase:"Ы"},{lowerCase:"s",upperCase:"S"}]},{width:1/12,chars:[{lowerCase:"в",upperCase:"В"},{lowerCase:"d",upperCase:"D"}]},{width:1/12,chars:[{lowerCase:"а",upperCase:"А"},{lowerCase:"f",upperCase:"F"}]},{width:1/12,chars:[{lowerCase:"п",upperCase:"П"},{lowerCase:"g",upperCase:"G"}]},{width:1/12,chars:[{lowerCase:"р",upperCase:"Р"},{lowerCase:"h",upperCase:"H"}]},{width:1/12,chars:[{lowerCase:"о",upperCase:"О"},{lowerCase:"j",upperCase:"J"}]},{width:1/12,chars:[{lowerCase:"л",upperCase:"Л"},{lowerCase:"k",upperCase:"K"}]},{width:1/12,chars:[{lowerCase:"д",upperCase:"Д"},{lowerCase:"l",upperCase:"L"}]},{width:1/12,chars:[{lowerCase:"ж",upperCase:"Ж"},{lowerCase:":",upperCase:";"}]},{width:1/12,chars:[{lowerCase:"э",upperCase:"Э"},{lowerCase:'"',upperCase:"'"}]},{width:1/12,chars:[{lowerCase:"ё",upperCase:"Ё"},{lowerCase:"|",upperCase:"\\"}]}],[{width:.125,command:"shift",chars:[{icon:"shift"}]},{width:1/12,chars:[{lowerCase:"я",upperCase:"Я"},{lowerCase:"z",upperCase:"Z"}]},{width:1/12,chars:[{lowerCase:"ч",upperCase:"Ч"},{lowerCase:"x",upperCase:"X"}]},{width:1/12,chars:[{lowerCase:"с",upperCase:"С"},{lowerCase:"c",upperCase:"C"}]},{width:1/12,chars:[{lowerCase:"м",upperCase:"М"},{lowerCase:"v",upperCase:"V"}]},{width:1/12,chars:[{lowerCase:"и",upperCase:"И"},{lowerCase:"b",upperCase:"B"}]},{width:1/12,chars:[{lowerCase:"т",upperCase:"Т"},{lowerCase:"n",upperCase:"N"}]},{width:1/12,chars:[{lowerCase:"ь",upperCase:"Ь"},{lowerCase:"m",upperCase:"M"}]},{width:1/12,chars:[{lowerCase:"б",upperCase:"Б"},{lowerCase:",",upperCase:""}]},{width:1/12,chars:[{lowerCase:"ю",upperCase:"Ю"},{lowerCase:".",upperCase:""}]},{width:.125,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.15,command:"switch-set",chars:[{lowerCase:"eng"}]},{width:.15,command:"switch",chars:[{lowerCase:".?12"}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]],[[{width:.1,chars:[{lowerCase:"1"}]},{width:.1,chars:[{lowerCase:"2"}]},{width:.1,chars:[{lowerCase:"3"}]},{width:.1,chars:[{lowerCase:"4"}]},{width:.1,chars:[{lowerCase:"5"}]},{width:.1,chars:[{lowerCase:"6"}]},{width:.1,chars:[{lowerCase:"7"}]},{width:.1,chars:[{lowerCase:"8"}]},{width:.1,chars:[{lowerCase:"9"}]},{width:.1,chars:[{lowerCase:"0"}]}],[{width:.1,chars:[{lowerCase:"@"}]},{width:.1,chars:[{lowerCase:"#"}]},{width:.1,chars:[{lowerCase:"|"}]},{width:.1,chars:[{lowerCase:"_"}]},{width:.1,chars:[{lowerCase:"&"}]},{width:.1,chars:[{lowerCase:"-"}]},{width:.1,chars:[{lowerCase:"+"}]},{width:.1,chars:[{lowerCase:"("}]},{width:.1,chars:[{lowerCase:")"}]},{width:.1,chars:[{lowerCase:"/"}]}],[{width:.1,chars:[{lowerCase:"="}]},{width:.1,chars:[{lowerCase:"*"}]},{width:.1,chars:[{lowerCase:'"'}]},{width:.1,chars:[{lowerCase:"'"}]},{width:.1,chars:[{lowerCase:":"}]},{width:.1,chars:[{lowerCase:";"}]},{width:.1,chars:[{lowerCase:"!"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.3,command:"switch",chars:[{lowerCase:"АБВ"}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]]],ze=[[[{width:1/11,chars:[{lowerCase:"q",upperCase:"Q"}]},{width:1/11,chars:[{lowerCase:"w",upperCase:"W"}]},{width:1/11,chars:[{lowerCase:"e",upperCase:"E"}]},{width:1/11,chars:[{lowerCase:"r",upperCase:"R"}]},{width:1/11,chars:[{lowerCase:"t",upperCase:"T"}]},{width:1/11,chars:[{lowerCase:"z",upperCase:"Z"}]},{width:1/11,chars:[{lowerCase:"u",upperCase:"U"}]},{width:1/11,chars:[{lowerCase:"i",upperCase:"I"}]},{width:1/11,chars:[{lowerCase:"o",upperCase:"O"}]},{width:1/11,chars:[{lowerCase:"p",upperCase:"P"}]},{width:1/11,chars:[{lowerCase:"ü",upperCase:"Ü"}]}],[{width:1/11,chars:[{lowerCase:"a",upperCase:"A"}]},{width:1/11,chars:[{lowerCase:"s",upperCase:"S"}]},{width:1/11,chars:[{lowerCase:"d",upperCase:"D"}]},{width:1/11,chars:[{lowerCase:"f",upperCase:"F"}]},{width:1/11,chars:[{lowerCase:"g",upperCase:"G"}]},{width:1/11,chars:[{lowerCase:"h",upperCase:"H"}]},{width:1/11,chars:[{lowerCase:"j",upperCase:"J"}]},{width:1/11,chars:[{lowerCase:"k",upperCase:"K"}]},{width:1/11,chars:[{lowerCase:"l",upperCase:"L"}]},{width:1/11,chars:[{lowerCase:"ö",upperCase:"Ö"}]},{width:1/11,chars:[{lowerCase:"ä",upperCase:"Ä"}]}],[{width:2/11,command:"shift",chars:[{icon:"shift"}]},{width:1/11,chars:[{lowerCase:"y",upperCase:"Y"}]},{width:1/11,chars:[{lowerCase:"x",upperCase:"X"}]},{width:1/11,chars:[{lowerCase:"c",upperCase:"C"}]},{width:1/11,chars:[{lowerCase:"v",upperCase:"V"}]},{width:1/11,chars:[{lowerCase:"b",upperCase:"B"}]},{width:1/11,chars:[{lowerCase:"n",upperCase:"N"}]},{width:1/11,chars:[{lowerCase:"m",upperCase:"M"}]},{width:2/11,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]],[[{width:.1,chars:[{lowerCase:"1"}]},{width:.1,chars:[{lowerCase:"2"}]},{width:.1,chars:[{lowerCase:"3"}]},{width:.1,chars:[{lowerCase:"4"}]},{width:.1,chars:[{lowerCase:"5"}]},{width:.1,chars:[{lowerCase:"6"}]},{width:.1,chars:[{lowerCase:"7"}]},{width:.1,chars:[{lowerCase:"8"}]},{width:.1,chars:[{lowerCase:"9"}]},{width:.1,chars:[{lowerCase:"0"}]}],[{width:.1,chars:[{lowerCase:"@"}]},{width:.1,chars:[{lowerCase:"#"}]},{width:.1,chars:[{lowerCase:"|"}]},{width:.1,chars:[{lowerCase:"_"}]},{width:.1,chars:[{lowerCase:"&"}]},{width:.1,chars:[{lowerCase:"-"}]},{width:.1,chars:[{lowerCase:"+"}]},{width:.1,chars:[{lowerCase:"("}]},{width:.1,chars:[{lowerCase:")"}]},{width:.1,chars:[{lowerCase:"/"}]}],[{width:.1,chars:[{lowerCase:"="}]},{width:.1,chars:[{lowerCase:"*"}]},{width:.1,chars:[{lowerCase:'"'}]},{width:.1,chars:[{lowerCase:"'"}]},{width:.1,chars:[{lowerCase:":"}]},{width:.1,chars:[{lowerCase:";"}]},{width:.1,chars:[{lowerCase:"!"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]]],He=[[[{width:.1,chars:[{lowerCase:"q",upperCase:"Q"}]},{width:.1,chars:[{lowerCase:"w",upperCase:"W"}]},{width:.1,chars:[{lowerCase:"e",upperCase:"E"}]},{width:.1,chars:[{lowerCase:"r",upperCase:"R"}]},{width:.1,chars:[{lowerCase:"t",upperCase:"T"}]},{width:.1,chars:[{lowerCase:"y",upperCase:"Y"}]},{width:.1,chars:[{lowerCase:"u",upperCase:"U"}]},{width:.1,chars:[{lowerCase:"i",upperCase:"I"}]},{width:.1,chars:[{lowerCase:"o",upperCase:"O"}]},{width:.1,chars:[{lowerCase:"p",upperCase:"P"}]}],[{width:.1,chars:[{lowerCase:"a",upperCase:"A"}]},{width:.1,chars:[{lowerCase:"s",upperCase:"S"}]},{width:.1,chars:[{lowerCase:"d",upperCase:"D"}]},{width:.1,chars:[{lowerCase:"f",upperCase:"F"}]},{width:.1,chars:[{lowerCase:"g",upperCase:"G"}]},{width:.1,chars:[{lowerCase:"h",upperCase:"H"}]},{width:.1,chars:[{lowerCase:"j",upperCase:"J"}]},{width:.1,chars:[{lowerCase:"k",upperCase:"K"}]},{width:.1,chars:[{lowerCase:"l",upperCase:"L"}]},{width:.1,chars:[{lowerCase:"ñ",upperCase:"Ñ"}]}],[{width:.15,command:"shift",chars:[{icon:"shift"}]},{width:.1,chars:[{lowerCase:"z",upperCase:"Z"}]},{width:.1,chars:[{lowerCase:"x",upperCase:"X"}]},{width:.1,chars:[{lowerCase:"c",upperCase:"C"}]},{width:.1,chars:[{lowerCase:"v",upperCase:"V"}]},{width:.1,chars:[{lowerCase:"b",upperCase:"B"}]},{width:.1,chars:[{lowerCase:"n",upperCase:"N"}]},{width:.1,chars:[{lowerCase:"m",upperCase:"M"}]},{width:.15,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]],[[{width:.1,chars:[{lowerCase:"1"}]},{width:.1,chars:[{lowerCase:"2"}]},{width:.1,chars:[{lowerCase:"3"}]},{width:.1,chars:[{lowerCase:"4"}]},{width:.1,chars:[{lowerCase:"5"}]},{width:.1,chars:[{lowerCase:"6"}]},{width:.1,chars:[{lowerCase:"7"}]},{width:.1,chars:[{lowerCase:"8"}]},{width:.1,chars:[{lowerCase:"9"}]},{width:.1,chars:[{lowerCase:"0"}]}],[{width:.1,chars:[{lowerCase:"@"}]},{width:.1,chars:[{lowerCase:"#"}]},{width:.1,chars:[{lowerCase:"|"}]},{width:.1,chars:[{lowerCase:"_"}]},{width:.1,chars:[{lowerCase:"&"}]},{width:.1,chars:[{lowerCase:"-"}]},{width:.1,chars:[{lowerCase:"+"}]},{width:.1,chars:[{lowerCase:"("}]},{width:.1,chars:[{lowerCase:")"}]},{width:.1,chars:[{lowerCase:"/"}]}],[{width:.1,chars:[{lowerCase:"="}]},{width:.1,chars:[{lowerCase:"*"}]},{width:.1,chars:[{lowerCase:'"'}]},{width:.1,chars:[{lowerCase:"'"}]},{width:.1,chars:[{lowerCase:":"}]},{width:.1,chars:[{lowerCase:";"}]},{width:.1,chars:[{lowerCase:"!"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]]],Le=[[[{width:.1,chars:[{lowerCase:";",upperCase:":"},{lowerCase:"q",upperCase:"Q"}]},{width:.1,chars:[{lowerCase:"ς",upperCase:"ς"},{lowerCase:"w",upperCase:"W"}]},{width:.1,chars:[{lowerCase:"ε",upperCase:"Ε"},{lowerCase:"e",upperCase:"E"}]},{width:.1,chars:[{lowerCase:"ρ",upperCase:"Ρ"},{lowerCase:"r",upperCase:"R"}]},{width:.1,chars:[{lowerCase:"τ",upperCase:"Τ"},{lowerCase:"t",upperCase:"T"}]},{width:.1,chars:[{lowerCase:"υ",upperCase:"Υ"},{lowerCase:"y",upperCase:"Y"}]},{width:.1,chars:[{lowerCase:"θ",upperCase:"Θ"},{lowerCase:"u",upperCase:"U"}]},{width:.1,chars:[{lowerCase:"ι",upperCase:"Ι"},{lowerCase:"i",upperCase:"I"}]},{width:.1,chars:[{lowerCase:"ο",upperCase:"Ο"},{lowerCase:"o",upperCase:"O"}]},{width:.1,chars:[{lowerCase:"π",upperCase:"Π"},{lowerCase:"p",upperCase:"P"}]}],[{width:.1,chars:[{lowerCase:"α",upperCase:"Α"},{lowerCase:"a",upperCase:"A"}]},{width:.1,chars:[{lowerCase:"σ",upperCase:"Σ"},{lowerCase:"s",upperCase:"S"}]},{width:.1,chars:[{lowerCase:"δ",upperCase:"Δ"},{lowerCase:"d",upperCase:"D"}]},{width:.1,chars:[{lowerCase:"φ",upperCase:"Φ"},{lowerCase:"f",upperCase:"F"}]},{width:.1,chars:[{lowerCase:"γ",upperCase:"Γ"},{lowerCase:"g",upperCase:"G"}]},{width:.1,chars:[{lowerCase:"η",upperCase:"Η"},{lowerCase:"h",upperCase:"H"}]},{width:.1,chars:[{lowerCase:"ξ",upperCase:"Ξ"},{lowerCase:"j",upperCase:"J"}]},{width:.1,chars:[{lowerCase:"κ",upperCase:"Κ"},{lowerCase:"k",upperCase:"K"}]},{width:.1,chars:[{lowerCase:"λ",upperCase:"Λ"},{lowerCase:"l",upperCase:"L"}]}],[{width:.15,command:"shift",chars:[{icon:"shift"}]},{width:.1,chars:[{lowerCase:"ζ",upperCase:"Ζ"},{lowerCase:"z",upperCase:"Z"}]},{width:.1,chars:[{lowerCase:"χ",upperCase:"Χ"},{lowerCase:"x",upperCase:"X"}]},{width:.1,chars:[{lowerCase:"ψ",upperCase:"Ψ"},{lowerCase:"c",upperCase:"C"}]},{width:.1,chars:[{lowerCase:"ω",upperCase:"Ω"},{lowerCase:"v",upperCase:"V"}]},{width:.1,chars:[{lowerCase:"β",upperCase:"Β"},{lowerCase:"b",upperCase:"B"}]},{width:.1,chars:[{lowerCase:"ν",upperCase:"Ν"},{lowerCase:"n",upperCase:"N"}]},{width:.1,chars:[{lowerCase:"μ",upperCase:"Μ"},{lowerCase:"m",upperCase:"M"}]},{width:.15,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.15,command:"switch-set",chars:[{lowerCase:"eng"}]},{width:.15,command:"switch",chars:[{lowerCase:".?12"}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]],[[{width:.1,chars:[{lowerCase:"1"}]},{width:.1,chars:[{lowerCase:"2"}]},{width:.1,chars:[{lowerCase:"3"}]},{width:.1,chars:[{lowerCase:"4"}]},{width:.1,chars:[{lowerCase:"5"}]},{width:.1,chars:[{lowerCase:"6"}]},{width:.1,chars:[{lowerCase:"7"}]},{width:.1,chars:[{lowerCase:"8"}]},{width:.1,chars:[{lowerCase:"9"}]},{width:.1,chars:[{lowerCase:"0"}]}],[{width:.1,chars:[{lowerCase:"@"}]},{width:.1,chars:[{lowerCase:"#"}]},{width:.1,chars:[{lowerCase:"|"}]},{width:.1,chars:[{lowerCase:"_"}]},{width:.1,chars:[{lowerCase:"&"}]},{width:.1,chars:[{lowerCase:"-"}]},{width:.1,chars:[{lowerCase:"+"}]},{width:.1,chars:[{lowerCase:"("}]},{width:.1,chars:[{lowerCase:")"}]},{width:.1,chars:[{lowerCase:"/"}]}],[{width:.1,chars:[{lowerCase:"="}]},{width:.1,chars:[{lowerCase:"*"}]},{width:.1,chars:[{lowerCase:'"'}]},{width:.1,chars:[{lowerCase:"'"}]},{width:.1,chars:[{lowerCase:":"}]},{width:.1,chars:[{lowerCase:";"}]},{width:.1,chars:[{lowerCase:"!"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]]],Ae=[[[{width:1/11,chars:[{lowerCase:"q",upperCase:"Q"}]},{width:1/11,chars:[{lowerCase:"w",upperCase:"W"}]},{width:1/11,chars:[{lowerCase:"e",upperCase:"E"}]},{width:1/11,chars:[{lowerCase:"r",upperCase:"R"}]},{width:1/11,chars:[{lowerCase:"t",upperCase:"T"}]},{width:1/11,chars:[{lowerCase:"y",upperCase:"Y"}]},{width:1/11,chars:[{lowerCase:"u",upperCase:"U"}]},{width:1/11,chars:[{lowerCase:"i",upperCase:"I"}]},{width:1/11,chars:[{lowerCase:"o",upperCase:"O"}]},{width:1/11,chars:[{lowerCase:"p",upperCase:"P"}]},{width:1/11,chars:[{lowerCase:"å",upperCase:"Å"}]}],[{width:1/11,chars:[{lowerCase:"a",upperCase:"A"}]},{width:1/11,chars:[{lowerCase:"s",upperCase:"S"}]},{width:1/11,chars:[{lowerCase:"d",upperCase:"D"}]},{width:1/11,chars:[{lowerCase:"f",upperCase:"F"}]},{width:1/11,chars:[{lowerCase:"g",upperCase:"G"}]},{width:1/11,chars:[{lowerCase:"h",upperCase:"H"}]},{width:1/11,chars:[{lowerCase:"j",upperCase:"J"}]},{width:1/11,chars:[{lowerCase:"k",upperCase:"K"}]},{width:1/11,chars:[{lowerCase:"l",upperCase:"L"}]},{width:1/11,chars:[{lowerCase:"æ",upperCase:"Æ"}]},{width:1/11,chars:[{lowerCase:"ø",upperCase:"Ø"}]}],[{width:2/11,command:"shift",chars:[{icon:"shift"}]},{width:1/11,chars:[{lowerCase:"z",upperCase:"Z"}]},{width:1/11,chars:[{lowerCase:"x",upperCase:"X"}]},{width:1/11,chars:[{lowerCase:"c",upperCase:"C"}]},{width:1/11,chars:[{lowerCase:"v",upperCase:"V"}]},{width:1/11,chars:[{lowerCase:"b",upperCase:"B"}]},{width:1/11,chars:[{lowerCase:"n",upperCase:"N"}]},{width:1/11,chars:[{lowerCase:"m",upperCase:"M"}]},{width:2/11,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]],[[{width:.1,chars:[{lowerCase:"1"}]},{width:.1,chars:[{lowerCase:"2"}]},{width:.1,chars:[{lowerCase:"3"}]},{width:.1,chars:[{lowerCase:"4"}]},{width:.1,chars:[{lowerCase:"5"}]},{width:.1,chars:[{lowerCase:"6"}]},{width:.1,chars:[{lowerCase:"7"}]},{width:.1,chars:[{lowerCase:"8"}]},{width:.1,chars:[{lowerCase:"9"}]},{width:.1,chars:[{lowerCase:"0"}]}],[{width:.1,chars:[{lowerCase:"@"}]},{width:.1,chars:[{lowerCase:"#"}]},{width:.1,chars:[{lowerCase:"|"}]},{width:.1,chars:[{lowerCase:"_"}]},{width:.1,chars:[{lowerCase:"&"}]},{width:.1,chars:[{lowerCase:"-"}]},{width:.1,chars:[{lowerCase:"+"}]},{width:.1,chars:[{lowerCase:"("}]},{width:.1,chars:[{lowerCase:")"}]},{width:.1,chars:[{lowerCase:"/"}]}],[{width:.1,chars:[{lowerCase:"="}]},{width:.1,chars:[{lowerCase:"*"}]},{width:.1,chars:[{lowerCase:'"'}]},{width:.1,chars:[{lowerCase:"'"}]},{width:.1,chars:[{lowerCase:":"}]},{width:.1,chars:[{lowerCase:";"}]},{width:.1,chars:[{lowerCase:"!"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]]],De=new n.TextureLoader;class We extends(Re.withBase(n.Object3D)(I,ge)){constructor(e){let t;if(e||(e={}),e.width||(e.width=1),e.height||(e.height=.4),e.margin||(e.margin=.003),e.padding||(e.padding=.01),super(e),this.currentPanel=0,this.isLowerCase=!0,this.charsetCount=1,e.language||navigator.language)switch(e.language||navigator.language){case"fr":case"fr-CH":case"fr-CA":t=Pe;break;case"ru":this.charsetCount=2,t=Ee;break;case"de":case"de-DE":case"de-AT":case"de-LI":case"de-CH":t=ze;break;case"es":case"es-419":case"es-AR":case"es-CL":case"es-CO":case"es-ES":case"es-CR":case"es-US":case"es-HN":case"es-MX":case"es-PE":case"es-UY":case"es-VE":t=He;break;case"el":this.charsetCount=2,t=Le;break;case"nord":t=Ae;break;default:t=Oe}else t=Oe;this.keys=[],this.panels=t.map((t=>{const s=e.height/t.length-2*e.margin,r=new Ue({width:e.width+2*e.padding,height:e.height+2*e.padding,offset:0,padding:e.padding,fontFamily:e.fontFamily,fontTexture:e.fontTexture,backgroundColor:e.backgroundColor,backgroundOpacity:e.backgroundOpacity});return r.charset=0,r.add(...t.map((t=>{const a=new Ue({width:e.width,height:s,margin:e.margin,contentDirection:"row",justifyContent:"center"});a.frame.visible=!1;const i=[];return t.forEach((t=>{const a=new Ue({width:e.width*t.width-2*e.margin,height:s,margin:e.margin,justifyContent:"center",offset:0}),n=t.chars[r.charset].lowerCase||t.chars[r.charset].icon||"undif";if("enter"===n&&e.enterTexture||"shift"===n&&e.shiftTexture||"backspace"===n&&e.backspaceTexture){const t=(()=>{switch(n){case"backspace":return e.backspaceTexture;case"enter":return e.enterTexture;case"shift":return e.shiftTexture;default:console.warn("There is no icon image for this key")}})();De.load(t,(e=>{a.add(new Te({width:.65*a.width,height:.65*a.height,backgroundSize:"contain",backgroundTexture:e}))}))}else a.add(new Fe({content:n,offset:0}));a.type="Key",a.info=t,a.info.input=n,a.panel=r,i.push(a),this.keys.push(a)})),a.add(...i),a}))),r})),this.add(this.panels[0]),this.set(e)}setNextPanel(){this.panels.forEach((e=>{this.remove(e)})),this.currentPanel=(this.currentPanel+1)%this.panels.length,this.add(this.panels[this.currentPanel]),this.update(!0,!0,!0)}setNextCharset(){this.panels[this.currentPanel].charset=(this.panels[this.currentPanel].charset+1)%this.charsetCount,this.keys.forEach((e=>{if(!this.panels[this.currentPanel].getObjectById(e.id))return;const t=e.info.chars[e.panel.charset]||e.info.chars[0],s=this.isLowerCase||!t.upperCase?t.lowerCase:t.upperCase;if(!e.childrenTexts.length)return;const r=e.childrenTexts[0];e.info.input=s,r.set({content:s}),r.update(!0,!0,!0)}))}toggleCase(){this.isLowerCase=!this.isLowerCase,this.keys.forEach((e=>{const t=e.info.chars[e.panel.charset]||e.info.chars[0],s=this.isLowerCase||!t.upperCase?t.lowerCase:t.upperCase;if(!e.childrenTexts.length)return;const r=e.childrenTexts[0];e.info.input=s,r.set({content:s}),r.update(!0,!0,!0)}))}parseParams(){}updateLayout(){}updateInner(){}}const Me={Block:Ue,Text:Fe,InlineBlock:Te,Keyboard:We,FontLibrary:le,update:()=>ue.update(),TextAlign:i,Whitespace:a,JustifyContent:r,AlignItems:s,ContentDirection:t};void 0!==e.g&&(e.g.ThreeMeshUI=Me)})();
\ No newline at end of file
+(()=>{"use strict";var e={d:(t,i)=>{for(var n in i)e.o(i,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:i[n]})}};e.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),e.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};e.d({},{wb:()=>t});var t={};e.r(t),e.d(t,{get:()=>r,set:()=>s});const i={fontFamily:null,fontSize:.05,fontKerning:"normal",fontStyle:"normal",fontWeight:"normal",offset:.005,lineHeight:1.2,lineBreak:"- ,.:?!\n",whiteSpace:"pre-line",flexDirection:"column",justifyContent:"start",alignItems:"start",backgroundImage:null,textAlign:"left",boxSizing:"content-box",position:"static",color:16777215,fontOpacity:1,opacity:1,fontPXRange:4,fontSupersampling:!0,fontSmooth:"antialiased",borderRadius:0,borderWidth:0,borderColor:"black",borderOpacity:1,backgroundSize:"cover",backgroundColor:0,backgroundOpacity:0,overflow:"visible",letterSpacing:0,invertAlpha:!1,segments:1,backgroundSide:0,backgroundAlphaTest:.02,fontSide:0,fontAlphaTest:.02,padding:0,margin:0,verticalAlign:"baseline"},n={default:i,block:{},inline:{fontStyle:"inherit",fontWeight:"inherit",color:"inherit"}},s=function(e,t="default"){const i=n[t]||n.default;for(const t in e)i[t]=e[t]},r=function(e,t="default"){const s=n[t]?{...i,...n[t]}:{...n.default};return e?(Object.prototype.hasOwnProperty.call(s,e)||console.warn(`ThreeMeshUI::DefaultValues is trying to retrieve non-existing property '${e}'`),s[e]):s};class o{constructor(e,t=null,i=!0){this._id=e,this._value=t,this._needsUpdate=!0,this._needsProcess=!1,this._needsRender=!1,this._isPrimitive=i}get id(){return this._id}get value(){return this._value}set value(e){this.isValid(e)&&this._value!==e&&(this._value=e,this._needsUpdate=!0)}update(e,t){this.output(t)}output(e){}_outputValue(e){e[this._id]=this._value}process(e){}render(e){}getInheritedInput(e){if("inherit"!==this._value)return this._value;const t=e._parent._value;return t&&t[`_${this._id}`]?t[`_${this._id}`].getInheritedInput(t):this.getDefaultValue()}getDefaultValue(){return r(this._id)}isValid(e){return!0}emptyStrategyLogic(){throw new Error(`ThreeMeshUI::${this.constructor.name} has empty strategy. Update has not been processed.`)}}class a extends o{constructor(){super("renderOrder","auto",!0),this.output=this._outputValue,this._actualValue=0}set value(e){this.isValid(e)&&(this._value=e,this._needsUpdate=!0)}update(e,t){if("auto"!==this._value)this._actualValue=this._value;else{const t=e._parent._value;if(null!==t){const i=t._renderOrder._actualValue,n=1+t._children._uis.indexOf(e);this._actualValue=i+n}}for(const t of e._children._uis){"auto"===t._renderOrder._value&&(t._renderOrder._needsUpdate=!0)}this._outputValue(t)}_outputValue(e){e[this._id]=this._actualValue}get value(){return this._value}}class u extends o{constructor(e,t=null,i=!0){super(e,t,i),this.output=this._outputValue,this._notInheritedValue=null}update(e,t){this._notInheritedValue=this._value,"inherit"===this._notInheritedValue&&(this._notInheritedValue=this.getInheritedInput(e)),this.propagate(e),this._outputValue(t)}propagate(e){for(const t of e._children._uis){const e=t[`_${this._id}`];void 0!==e&&"inherit"===e._value&&(t[`_${this._id}`]._needsUpdate=!0)}}_outputValue(e){e[this._id]=this._notInheritedValue}set value(e){this.isValid(e)&&this._value!==e&&(this._value=e,this._needsUpdate=!0)}get value(){return"inherit"===this._value?this._notInheritedValue:this._value}}class h extends u{constructor(){super("offset","inherit",!1)}update(e,t){super.update(e,t),null!==e._parent._value&&(e.position.z=this._notInheritedValue)}}class l extends u{constructor(){super("fontSmooth","inherit",!0),this._needsUpdate=!1,this.isValid=c,this.output=this._outputValue}}const d=["inherit","none","antialiased"];function c(e){return-1!==d.indexOf(e)||(console.warn(`.fontSmoothing value '${e}' is not valid. Aborted`),!1)}const _=THREE;class p extends o{constructor(e,t,i=!0){super(e,"unset",i),this._input="inherit",this._allowsInherit=!0,this._inheritedInput=void 0,this._inline=void 0}update(e,t){this._allowsInherit||(this._inheritedInput=this.getInheritedInput(e)),this.computeOutputValue(e);for(const t of e._children._uis){const e=t[`_${this._id}`];if(!e)continue;"inherit"===(e._input?e._input:e._value)&&(t[`_${this._id}`]._needsUpdate=!0)}this.output(t)}computeOutputValue(e){this._value=this._input}_computeFromInherited(e){this._value=this._inheritedInput}set value(e){console.warn(".(style) sub-property cannot be directly set. It must comes from inline or computed setter.")}set inline(e){this.isValidValue(e)&&e!==this._inline&&(this._input=this._inline=e,this._needsUpdate=!0)}get inline(){return this._inline}isValidValue(e){return!0}getInheritedInput(e){if("inherit"!==this._input)return this._input;const t=e._parent._value;if(t){return t[`_${this._id}`]?t[`_${this._id}`].getInheritedInput(t):this.getDefaultValue()}return this.getDefaultValue()}}class f extends p{constructor(e,t){super(e,t,!1),this._input=this._vector4ValueSetter(new _.Vector4(0,0,0,0),t),this._inline=null,this._value=new _.Vector4(0,0,0,0)}get value(){return this._value}computeOutputValue(e){this._vector4ValueSetter(this._value,this._input,e)}set inline(e){this._vector4ValueSetter(this._input,e),this._input.equals(this._value)||(this._needsUpdate=!0)}set top(e){this._input.x!==e&&(this._input.x=e,this._needsUpdate=!0)}get top(){return this._input.x}set right(e){this._input.y!==e&&(this._input.y=e,this._needsUpdate=!0)}get right(){return this._input.y}set bottom(e){this._input.z!==e&&(this._input.z=e,this._needsUpdate=!0)}get bottom(){return this._input.z}set left(e){this._input.w!==e&&(this._input.w=e,this._needsUpdate=!0)}get left(){return this._input.w}dispose(){this._computed=null,this._inline=null,this._input=null,this._output=null}_vector4ValueSetter(e,t){if(t instanceof _.Vector4)return e.copy(t);if(("string"==typeof t||t instanceof String)&&(t=t.split(" ")),Array.isArray(t))switch((t=t.map((e=>parseFloat(e)))).length){case 1:return e.setScalar(t[0]);case 2:return e.x=e.z=t[0],e.y=e.w=t[1],e;case 3:return e.x=t[0],e.y=t[1],e.z=t[2],e;case 4:return e.x=t[0],e.y=t[1],e.z=t[2],e.w=t[3],e;default:return void console.error("StyleVector4Property::set() Four Dimension property had more than four values")}return isNaN(t)||e.setScalar(t),e}}class g extends f{constructor(e){super("padding",e)}computeOutputValue(e){super.computeOutputValue(e),e._bounds._needsUpdate=!0,e._bounds._needsRender=!0,e._layouter._needsProcess=!0,e._renderer._needsRender=!0,e._parent._value&&(e._parent._value._layouter._needsProcess=!0)}}class v extends f{constructor(e,t){super(e,t,!1)}computeOutputValue(e){this._value,this._input,this._vector4ValueSetterFinal(this._value,this._input,e)}set inline(e){this._input=e,this._needsUpdate=!0}_vector4ValueSetterFinal(e,t,i){if(t instanceof _.Vector4)return e.copy(t);if(("string"==typeof t||t instanceof String)&&(t=t.split(" ")),Array.isArray(t))switch(t.length){case 1:return e.setScalar(this._parseValue(t[0],i));case 2:return e.x=e.z=this._parseValue(t[0]),e.y=e.w=this._parseValue(t[1]),e;case 3:return e.x=this._parseValue(t[0]),e.y=this._parseValue(t[1]),e.z=this._parseValue(t[2]),e;case 4:return e.x=this._parseValue(t[0]),e.y=this._parseValue(t[1]),e.z=this._parseValue(t[2]),e.w=this._parseValue(t[3]),e;default:return void console.error("StyleVector4Property::set() Four Dimension property had more than four values")}return isNaN(t)||e.setScalar(t),e}_parseValue(e,t){return isNaN(e)?e.endsWith("em")?parseFloat(e.replace(/[^0-9.]+/,""))*t._fontSize._value:void 0:parseFloat(e)}}class m extends v{constructor(){super("margin",new _.Vector4(0,0,0,0))}computeOutputValue(e){super.computeOutputValue(e),e._renderer._needsRender=!0,e._parent._value&&(e._parent._value._flexDirection._needsProcess=!0)}}const b=function(e,t,i){e[t]=i},y=function(e,t,i){null!==i&&(e[t]=i)};class x{constructor(e){this._definition=e}set definition(e){this._definition=e}mediate(e,t,i,n=null){for(const e in this._definition){const s=this._definition[e];if(void 0!==i[e]){const r=s.t?s.t:b;r(t,s.m,i[e]),n&&r(n,s.m,i[e])}}}static mediate(e,t,i,n,s=null){if(t)for(const e in n){const r=n[e];if(void 0!==i[e]){const n=r.t?r.t:b;n(t,r.m,i[e]),s&&n(s,r.m,i[e])}}}}class w extends o{constructor(){super("parent",null,!1)}update(e,t){e.parent&&e.parent.isUI?this._value=e.parent:this._value=null}set value(e){console.warn("ParentProperty is readonly")}get value(){return this._value}find(e){return this._value?e(this._value)?this._value:this._value._parent.find(e):null}dispose(){this._value=null}}const S=function(e,t,i=6){return e.toFixed(i)===t.toFixed(i)};class V extends o{constructor(e,t){super(e,t,!0),this.output=this._outputValue}set value(e){this.isValid(e)&&(S(this._value,e)||(this._value=e,this._needsUpdate=!0))}get value(){return this._value}}class k extends u{constructor(e){super(e,"inherit",!0),this.isValid=R}}const U=[_.FrontSide,_.BackSide,_.DoubleSide];function R(e){return-1!==U.indexOf(e)||(console.warn(`SideProperty value '${e}' is not valid. Abort`),!1)}class C extends _.EventDispatcher{constructor(e,t){super(),this._isReady=!1,this._weight=e,this._style=t,this._size=42,this._lineHeight=42,this._lineBase=42,this._font=null}get typographic(){return this._font}get isReady(){return this._isReady}get weight(){return this._weight}get style(){return this._style}get texture(){return this._texture}set fontMaterial(e){throw Error(`FontVariant('${this.id}')::fontMaterial - is abstract.`)}get fontMaterial(){throw Error(`FontVariant('${this.id}')::fontMaterial - is abstract.`)}get id(){return`${this._name}(w:${this.weight},s:${this.style})`}getTypographicGlyph(e){let t=this._chars[e];if(t)return t;if(e.match(/\s/))return this._chars[" "];const i=this._getFallbackCharacter(e);if(i&&(t=this._chars[i],t))return t;throw Error(`FontVariant('${this.id}')::getTypographicGlyph() - character('${e}') and/or fallback character were not found in provided msdf charset.`)}_getFallbackCharacter(e){throw new Error(`FontVariant(${typeof this})::_getFallbackCharacter() is abstract and should therefore be overridden.`)}getGeometricGlyph(e,t){throw new Error(`FontVariant(${typeof this})::getGeometryCharacter() is abstract and should therefore be overridden.`)}getKerningAmount(e){return this._kernings[e]?this._kernings[e]:0}adjustTypographicGlyphs(e){for(const t in e){const i=this.getTypographicGlyph(t),n=e[t];for(const s in n)i["_"+s]=e[t][s]}}_checkReadiness(){var e;this._readyCondition()&&((e=this)._isReady=!0,e.dispatchEvent(I))}_alterElementProperties(e){throw new Error(`FontVariant(${typeof this})::_alterElementProperties() is abstract and should therefore be overridden.`)}_readyCondition(){throw new Error(`FontVariant(${typeof this})::_readyCondition() is abstract and should therefore be overridden.`)}}const I={type:"ready"};const M=C;class B extends o{constructor(e=null){super("font",e,!1),this._needsUpdate=!1,this._fontVariant=null,this._handleFontReadyClosure=null,this.isValid=P}output(e){e[this._id]=this._fontVariant}update(e,t){if(this._fontVariant&&!this._fontVariant.isReady&&this._fontVariant.removeEventListener("ready",this._handleFontReadyClosure),this._value&&this._value instanceof M)this._fontVariant=this._value;else{const t=e._fontFamily._value;"string"!=typeof t&&(this._fontVariant=t.getVariant(e._fontWeight._value,e._fontStyle._value))}this._fontVariant&&(this._fontVariant._alterElementProperties(e),this._handleFontReadyClosure=function(e,t){return function(){t._needsUpdate=!0,e._glyphs._needsProcess=!0,t._fontVariant.removeEventListener("ready",t._handleFontReadyClosure),t._handleFontReadyClosure=null}}(e,this),this._fontVariant.isReady?this._handleFontReadyClosure():this._fontVariant.addEventListener("ready",this._handleFontReadyClosure),e._fontMaterial._defaultMaterial&&e._fontMaterial._defaultMaterial instanceof this._fontVariant.fontMaterial||(e._fontMaterial._defaultMaterial=new this._fontVariant.fontMaterial,e._fontMaterial._needsUpdate=!0))}set value(e){this.isValid(e)&&this._value!==e&&(this._value=e,this._needsUpdate=!0)}get value(){return this._value}get fontVariant(){return this._fontVariant}dispose(){this._handleFontReadyClosure&&(this._fontVariant.removeEventListener("ready",this._handleFontReadyClosure),this._handleFontReadyClosure=null),this._value=null,this._fontVariant=null}}function P(e){return e instanceof M||(console.warn(`.font value '${e}' is not valid. It requires a FontVariant instance. Aborted`),!1)}class T extends p{constructor(e){super("display",e),this._value="flex",this._allowsInherit=!1,this._needsUpdate=!1,this.isValidValue=F}computeOutputValue(e){e._visible._value="none"!==this._output}}const O=["none","flex"];function F(e){return-1!==O.indexOf(e)||(console.warn(`(.style) display value '${e}' is not valid. Aborted`),!1)}class z extends p{constructor(e){super("boxSizing",e),this._allowsInherit=!1,this.isValidValue=W}computeOutputValue(e){this._value=this._inheritedInput,e._bounds._needsUpdate=!0}}const A=["border-box","content-box"];function W(e){return-1!==A.indexOf(e)||(console.warn(`(.style) boxSizing value '${e}' is not valid. Aborted`),!1)}class D extends p{constructor(e,t){super(e,t,!1),this._input=t,this._value=new _.Color,this.output=this._outputValue}computeOutputValue(e){"inherit"!==this._input&&this._value.set(this._input)}set inline(e){this._input=this._inline=e,this._needsUpdate=!0}}class E extends p{constructor(e,t){super(e,t,!0),this.isValidValue=H,this._allowsInherit=!1,this._input=t,this._value=t,this.output=this._outputValue,this.computeOutputValue=this._computeFromInherited}_outputValue(e){e[this._id]=this._inheritedInput}}function H(e){return!(e<0&&e>1)||(console.warn(`(.style) styleFactorProperty('${this.id}') value '${e}' is not valid)`),!1)}class L extends p{constructor(e){super("backgroundImage",e,!0),this._input=null,this._allowsInherit=!1,this._textureSize=new _.Vector2(1,1),this.isValidValue=G}get value(){return this._value}output(e){e[this._id]=this._value,e.tSize=this._textureSize}computeOutputValue(e){this._value=this._inheritedInput,this._value instanceof _.Texture&&!this._value.image?console.warn("ThreeMeshUI - .backgroundImage :: Please provide preloaded texture in order to have accurate sizing."):this._needsProcess=!0}process(e){this._value?this._textureSize.set(this._value.image.width,this._value.image.height):this._textureSize.set(1,1)}}function G(e){return!0}class $ extends p{constructor(e){super("backgroundSize",e,!0),this.isValidValue=X,this.output=this._outputValue}}const j=["cover","contain","stretch"];function X(e){return-1!==j.indexOf(e)||(console.warn(`(.style) backgroundSize value '${e}' is not valid. Aborted`),!1)}class N extends p{constructor(e){super("overflow",e,!0),this.isValidValue=K,this._clippingPlanes=null,this._renderStrategy=this._emptyRender}update(e,t){void 0!==this._inline&&"unset"!==this._inline?this._input=this._inline:void 0!==this._computed&&(this._input=this._computed),this._allowsInherit||(this._inheritedInput=this.getInheritedInput(e)),this.computeOutputValue(e);for(const t of e._children._uis)t._overflow._needsUpdate=!0;this.output(t)}output(e){e.clippingPlanes=this._clippingPlanes}computeOutputValue(e){super.computeOutputValue(e),"hidden"===this._value?this._renderStrategy=this._propagateRender:(this._renderStrategy=this._emptyRender,this._clippingPlanes=null);const t=e._parent._value;if(null!==t){const e=t._overflow;if("hidden"!==e._value&&null===e._clippingPlanes||this._clippingPlanes)"visible"!==e._value&&null!==e._clippingPlanes||null===this._clippingPlanes||(this._clippingPlanes=null,this._renderStrategy=this._emptyRender,this._needsRender=!0);else{this._clippingPlanes=[new _.Plane(new _.Vector3(0,-1,0),1),new _.Plane(new _.Vector3(-1,0,0),1),new _.Plane(new _.Vector3(0,1,0),1),new _.Plane(new _.Vector3(1,0,0),1)];for(let e=0;e<this._clippingPlanes.length;e++)this._clippingPlanes[e].parent=t;null!==e._clippingPlanes&&this._clippingPlanes.push(...e._clippingPlanes),this._renderStrategy=this._hiddenRender,this._needsRender=!0}}}render(e){this._renderStrategy(e)}_emptyRender(e){}_hiddenRender(e){const t=e._parent._value,i=t._bounds._offsetHeight,n=t._bounds._offsetWidth,s=t._padding._value,r=t._borderWidth._value;for(let e=0;e<4&&e<this._clippingPlanes.length;e++){const o=this._clippingPlanes[e];switch(e%4){case 0:o.constant=i/2-(s.x+r.x);break;case 1:o.constant=n/2-(s.y+r.y);break;case 2:o.constant=i/2-(s.z+r.z);break;case 3:o.constant=n/2-(s.w+r.w)}o.applyMatrix4(t.matrixWorld)}for(let t=0;t<e._children._uis.length;t++){e._children._uis[t]._overflow._needsRender=!0}}_propagateRender(e){for(let t=0;t<e._children._uis.length;t++){e._children._uis[t]._overflow._needsRender=!0}}}const Y=["visible","hidden"];function K(e){return-1!==Y.indexOf(e)||(console.warn(`(.style) overflow value '${e}' is not valid. Aborted`),!1)}const q="rem",J="%",Q=[q,"em",J],Z=function(e){return-1===Q.indexOf(e)?q:e};class ee extends f{constructor(e){super("borderRadius",e),this._valueUV=this._value.clone(),this._input=this._vector4ValueSetter(new _.Vector4(0,0,0,0),e),this._mediation=!0,this._cornerTL=new _.Vector2(0,1),this._cornerTR=new _.Vector2(1,1),this._cornerBR=new _.Vector2(1,0),this._cornerBL=new _.Vector2(0,0);const t=new te(this._valueUV,["x","y"]),i=new te(this._valueUV,["z","w"]),n=new te(this._valueUV,["x","w"]),s=new te(this._valueUV,["y","z"]);t.complementaryMediation=i,i.complementaryMediation=t,n.complementaryMediation=s,s.complementaryMediation=n,this._sideMediators=[t,i,n,s],this._units=q}set units(e){this._units=Z(e),this._needsProcess=!0}get units(){return this._units}set mediation(e){e!==this._mediation&&(this._mediation=e,this._needsUpdate=!0)}get mediation(){return this._mediation}output(e){e.cornerTL=this._cornerTL,e.cornerTR=this._cornerTR,e.cornerBR=this._cornerBR,e.cornerBL=this._cornerBL}computeOutputValue(e){this._vector4ValueSetter(this._value,this._input),this._needsProcess=!0}process(e){this._needsRender=!0}render(e){this._valueUV.copy(this._value);const t=e._bounds._offsetWidth,i=e._bounds._offsetHeight;if(this._units===J&&this._valueUV.divideScalar(100),this._units===q&&this._valueUV.divideScalar(Math.min(t,i)),this._mediation)do{this._sideMediators.forEach((e=>e.computeValue())),this._sideMediators.sort(((e,t)=>e.value<t.value?1:-1)),this._sideMediators[0].value>1&&this._sideMediators[0].mediate()}while(this._sideMediators[0].value>1);let n=t>i?i/t:1,s=t<i?t/i:1;this._units===J&&(n=s=1),this._cornerTL.x=this._valueUV.x*n,this._cornerTL.y=1-this._valueUV.x*s,this._cornerTR.x=1-this._valueUV.y*n,this._cornerTR.y=1-this._valueUV.y*s,this._cornerBR.x=1-this._valueUV.z*n,this._cornerBR.y=this._valueUV.z*s,this._cornerBL.x=this._valueUV.w*n,this._cornerBL.y=this._valueUV.w*s}dispose(){for(const e of this._sideMediators)e.dispose();this._sideMediators=null,this._cornerTL=null,this._cornerTR=null,this._cornerBR=null,this._cornerBL=null,super.dispose()}set topLeft(e){this._input.x!==e&&(this._input.x=e,this._needsUpdate=!0)}get topLeft(){return this._input.x}set topRight(e){this._input.y!==e&&(this._input.y=e,this._needsUpdate=!0)}get topRight(){return this._input.y}set bottomRight(e){this._input.z!==e&&(this._input.z=e,this._needsUpdate=!0)}get bottomRight(){return this._input.z}set bottomLeft(e){this._input.w!==e&&(this._input.w=e,this._needsUpdate=!0)}get bottomLeft(){return this._input.w}set top(e){this._input.x===e&&this._input.y===e||(this._input.x=this._input.y=e,this._needsUpdate=!0)}get top(){return(this._input.x+this._input.y)/2}set right(e){this._input.y===e&&this._input.z===e||(this._input.y=this._input.z=e,this._needsUpdate=!0)}get right(){return(this._input.y+this._input.z)/2}set bottom(e){this._input.z===e&&this._input.w===e||(this._input.z=this._input.w=e,this._needsUpdate=!0)}get bottom(){return(this._input.z+this._input.w)/2}set left(e){this._input.w===e&&this._input.x===e||(this._input.w=this._input.x=e,this._needsUpdate=!0)}get left(){return(this._input.w+this._input.x)/2}}class te{constructor(e,t){this._borderRadiuses=e,this._sideProperties=t,this._complementaryMediation=null,this._value=0}get value(){return this._value}set complementaryMediation(e){this._complementaryMediation=e}computeValue(){let e=0;for(const t of this._sideProperties)e+=this._borderRadiuses[t];this._value=e}mediate(e=!0){if(!(this._value<1)){for(const e of this._sideProperties)this._borderRadiuses[e]/=this._value;e&&this._complementaryMediation.mediate(!1)}}dispose(){this._complementaryMediation=null,this._borderRadiuses=null}}class ie extends f{constructor(e){super("borderWidth",e,!1),this._valueUV=this._value.clone(),this.output=this._outputValue,this._units=q}set units(e){this._units=Z(e),this._needsUpdate=!0}get units(){return this._units}computeOutputValue(e){this._vector4ValueSetter(this._value,this._input),this._needsProcess=!0,e._bounds._needsUpdate=!0,e._layouter._needsUpdate=!0}_outputValue(e){e[this._id]=this._valueUV}process(e){this._needsRender=!0,e._borderRadius._needsRender=!0}render(e){this._valueUV.copy(this._value);const t=e._bounds._offsetWidth,i=e._bounds._offsetHeight;if(this._units===J&&this._valueUV,this._units===q)0!==t&&(this._valueUV.w/=t,this._valueUV.y/=t),0!==i&&(this._valueUV.x/=i,this._valueUV.z/=i);else if("em"===this._units){if(0!==t){const e=t>i?i/t:1;this._valueUV.y*=e,this._valueUV.w*=e}if(0!==i){const e=t<i?t/i:1;this._valueUV.x*=e,this._valueUV.z*=e}}}}class ne extends o{constructor(e,t=!0){super("visible",t,!0),this._needsUpdate=!1}update(e,t){e.visible=this._value,e._parent._value&&(e._parent._value._children._needsUpdate=!0)}set value(e){this.isValid(e)&&this._value!==e&&(this._value=e,this._needsUpdate=!0)}get value(){return this._value}}class se extends D{constructor(e){super("backgroundColor",e,!1),this._input=new _.Color(e)}computeOutputValue(e){e._backgroundMesh.visible=!("none"===this._input||"transparent"===this._input),"inherit"===this._input?this._value.set(this.getInheritedInput(e)):this._value.set(this._input)}set inline(e){this.isValidValue(e)&&e!==this._inline&&(this._input=this._inline=e,this._needsUpdate=!0)}}class re extends o{constructor(e="untitled"){super(e,void 0,!1)}update(e,t){}output(e){}}class oe extends o{constructor(){super("inlineJustificator",null,!1),this._value=null}update(e,t){}process(e){const t=e._bounds._innerHeight,i=e._layouter._value,n=Math.abs(i.height);let s=(()=>{switch(e._alignItems._value){case"inherit":case"start":return t/2;case"end":return n-t/2;case"stretch":case"center":return n/2}})();const r=e._padding._value,o=e._borderWidth._value;s+=(-r.x+r.z)/2+(-o.x+o.z)/2,i.forEach((e=>{e.y+=s,e.forEach((e=>{e.offsetY+=s}))}))}}const ae=["start","center","end","stretch"],ue=function(e){return-1!==ae.indexOf(e)||(console.warn(`(.style) alignItems value '${e}' is not valid. Aborted`),!1)};class he extends p{constructor(){super("alignItems","inherit",!0),this.isValidValue=ue}}class le extends p{constructor(){super("textAlign","inherit",!0),this.isValidValue=ce}}const de=["left","right","center","justify","justify-left","justify-right","justify-center"],ce=function(e){return-1!==de.indexOf(e)||(console.warn(`(.style) textAlign value '${e}' is not valid. Aborted`),!1)};class _e extends p{constructor(){super("flexDirection","inherit",!0),this.isValid=fe}}const pe=["row","row-reverse","column","column-reverse"];function fe(e){return-1!==pe.indexOf(e)||(console.warn(`(.style) flexDirection value '${e}' is not valid. Aborted`),!1)}class ge extends p{constructor(){super("justifyContent","inherit",!0),this.isValidValue=me}}const ve=["start","center","end","space-between","space-around","space-evenly"];function me(e){return-1!==ve.indexOf(e)||(console.warn(`(.style) justifyContent value '${e}' is not valid. Aborted`),!1)}class be extends p{constructor(){super("order",0,!0),this._value=0,this._input=0,this._allowsInherit=!1}computeOutputValue(e){this._value=this._inheritedInput,e._parent._value&&(e._parent._value._children._needsProcess=!0)}}class ye extends p{constructor(){super("position","static",!0),this._allowsInherit=!1,this._value="static",this._needsUpdate=!1,this.computeOutputValue=this._computeFromInherited,this.isValidValue=we}_computeFromInherited(e){super._computeFromInherited(e),e._parent._value&&(e._parent._value._children._needsProcess=!0)}}const xe=["static","absolute"];function we(e){return-1!==xe.indexOf(e)||(console.warn(`(.style) position value '${e}' is not valid. Aborted`),!1)}class Se extends p{constructor(e,t=null){super(e,t,!0),this._input="auto",this._auto=!0,this._relative=!1,this._updateRequired=!0}set inline(e){this.isValidValue(e)&&e!==this._inline&&(this._inline=e,this._input!==this._inline&&this._parseInput())}get inline(){return this._inline}_parseInput(){let e=!0;if(void 0!==this._inline&&"unset"!==this._inline?this._input=this._inline:void 0!==this._computed?(this._computed===this._input&&(e=!1),this._input=this._computed):e="inherit"===this._input,e){if(this._auto=!this._input||"auto"===this._input,this._auto)this._relative=!1;else if(("string"==typeof this._input||this._input instanceof String)&&this._input.endsWith("%")){this._relative=!0,this._value=0;const e=parseFloat(this._input.replace("%","").trim());isNaN(e)||(this._value=e/100)}else this._relative=!1,this._value=this._input;this._needsUpdate=this._updateRequired=e}}update(e,t){if(this._updateRequired){this._updateRequired=!1,this._allowsInherit||(this._inheritedInput=this.getInheritedInput(e)),this.computeOutputValue(e);for(const t of e._children._uis)t[`_${this._id}`]._needsUpdate=!0;this.output(t),e._parent._value&&(e._parent._value._layouter._needsProcess=!0)}}computeOutputValue(e){e._bounds._needsUpdate=!0,e._renderer._needsRender=!0}getInheritedInput(e){if("inherit"!==this._input&&!this._auto)return this._input;const t=e._parent._value;return t?t[`_${this._id}`].getInheritedInput(t):this.getDefaultValue()}getDefaultValue(){return 0}get value(){return this._value}}class Ve extends Se{constructor(){super("width")}}class ke extends Se{constructor(){super("height")}computeOutputValue(e){super.computeOutputValue(e)}}class Ue extends re{constructor(){super("textContent"),this._needsUpdate=!1}set value(e){}process(e){let t="";for(let i=0;i<e.children.length;i++){const n=e.children[i];n.isUI&&(t+=n.textContent)}this._value=t}}class Re extends p{constructor(e){super("fontStyle",e,!0),this.isValidValue=Ie}}const Ce=["normal","italic"];function Ie(e){return-1!==Ce.indexOf(e)||(console.warn(`(.style) fontStyle value '${e}' is not valid. Aborted`),!1)}class Me extends p{constructor(e){super("fontWeight",e,!0),this.isValid=Pe}}const Be=["100","200","300","400","500","600","700","800","900","light","normal","bold","bolder"];function Pe(e){return-1!==Be.indexOf(e.toString())||(console.warn(`(.style) fontWeight value '${e}' is not valid. Aborted`),!1)}class Te extends class{constructor(){this._size=42,this._lineHeight=42,this._lineBase=38,this._name="-",this._charset=""}get size(){return this._size}get lineHeight(){return this._lineHeight}get lineBase(){return this._lineBase}get name(){return this._name}get charset(){return this._charset}}{constructor(e){super(),this._size=e.info.size,this._lineHeight=e.common.lineHeight,this._lineBase=e.common.base,this._name=e.info.face,this._textureWidth=e.common.scaleW,this._textureHeight=e.common.scaleH,this._charset=e.chars.map((e=>e.char)).join("")}get textureWidth(){return this._textureWidth}get textureHeight(){return this._textureHeight}}class Oe{constructor(){this._offsetX=0,this._offsetY=0,this._lineBreak=null,this._kerning=0,this._fontFactor=1,this._fontSize=0,this._cumulativeWidth=0,this._paddingLeft=0,this._paddingRight=0,this._marginLeft=0,this._marginRight=0}resetOffsets(){this._offsetX=this._offsetY=0,this._cumulativeWidth=0}get xadvance(){return 0}get xoffset(){return 0}get yoffset(){return 0}get width(){return 0}get height(){return 0}set lineBreak(e){this._lineBreak=e}get lineBreak(){return this._lineBreak}get anchor(){return 0}get kerning(){return this._kerning*this._fontFactor}set kerning(e){this._kerning=e}get fontSize(){return this._fontSize}set fontSize(e){this._fontSize=e}get lineHeight(){return 0}get offsetX(){return this._offsetX}set offsetX(e){this._offsetX=e}get offsetY(){return this._offsetY}set offsetY(e){this._offsetY=e}get cumulativeWidth(){return this._cumulativeWidth}set cumulativeWidth(e){this._cumulativeWidth=e}get marginLeft(){return this._marginLeft}set marginLeft(e){this._marginLeft=e}get marginRight(){return this._marginRight}set marginRight(e){this._marginRight=e}get paddingLeft(){return this._paddingLeft}set paddingLeft(e){this._paddingLeft=e}get paddingRight(){return this._paddingRight}set paddingRight(e){this._paddingRight=e}get lineBase(){return 0}set fontFactor(e){this._fontFactor=e}get fontFactor(){return this._fontFactor}}class Fe extends Oe{constructor(e){super(),this._typographic=e}get typographic(){return this._typographic}get xadvance(){return this._typographic.xadvance*this._fontFactor}get xoffset(){return this._typographic.xoffset*this._fontFactor}get yoffset(){return this._typographic.yoffset*this._fontFactor}get width(){return this._typographic.width*this._fontFactor}get height(){return this._typographic.height*this._fontFactor}get char(){return this._typographic.char}get anchor(){return this.yoffset}get lineHeight(){return this._typographic.font.lineHeight*this._fontFactor}get lineBase(){return this._typographic.font.lineBase*this._fontFactor}}class ze extends Fe{constructor(e){super(e)}get uv(){return this.typographic.uv}}class Ae extends class{constructor(e){this._char="",this._width=1,this._heigth=1,this._xadvance=1,this._xoffset=0,this._yoffset=0,this._font=e}get font(){return this._font}get char(){return this._char}get width(){return this._width}get height(){return this._heigth}get xadvance(){return this._xadvance}get xoffset(){return this._xoffset}get yoffset(){return this._yoffset}set yoffset(e){this._yoffset=e}clone(e){throw new Error("Abstract... Need to be implemented")}asInlineGlyph(){throw new Error("Abstract... Need to be implemented")}}{constructor(e,t){super(e),this._char=t.char,this._width=t.width,this._heigth=t.height,this._xadvance=t.xadvance?t.xadvance:this._width,this._xoffset=t.xoffset?t.xoffset:0,this._yoffset=t.yoffset?t.yoffset:0,this._uv=t.uv?t.uv:null,isNaN(t.x)||(this._uv={left:t.x/e.textureWidth,right:(t.x+t.width)/e.textureWidth,top:1-(t.y+t.height)/e.textureHeight,bottom:1-t.y/e.textureHeight})}get uv(){return this._uv}clone(e){return new Ae(this._font,{char:e,width:this._width,height:this._heigth,xadvance:this._xadvance,xoffset:this._xoffset,yoffset:this._yoffset,uv:null})}asInlineGlyph(){return new ze(this)}}class We extends _.PlaneGeometry{constructor(e,t){let i=1,n=1;const s=e.typographic.font.size,r=t._segments.value;i=Math.ceil(e.typographic.width/s*r),n=Math.ceil(e.typographic.height/s*r),super(e.width,e.height,i,n),e.uv?(this._mapUVs(e),this._transformGeometry(e)):(this._nullifyUVs(),this.scale(0,0,1),this.translate(0,e.fontSize/2,0)),this.name="GlyphGeometry"}_mapUVs(e){const t=e.uv.right-e.uv.left,i=e.uv.bottom-e.uv.top,n=this.getAttribute("uv").array.slice(),s=[];for(let r=0;r<n.length;r+=2){const o=n[r],a=n[r+1];s.push(e.uv.left+t*o),s.push(e.uv.top+i*a)}this.setAttribute("uvG",new _.BufferAttribute(new Float32Array(s),2))}_nullifyUVs(){const e=[],t=this.getAttribute("uv").array.length;for(let i=0;i<t;i++)e.push(0);this.setAttribute("uvG",new _.BufferAttribute(new Float32Array(e),2))}_transformGeometry(e){this.translate(e.width/2,-e.height/2,0)}}const De="\nattribute vec2 uvG;\nvarying vec2 vUvG;\n",Ee="\nvUvG = uvG;\n",He="\ngl_Position.z -= 0.00001;\n",Le="\nvarying vec2 vUvG;\nuniform sampler2D glyphMap;\nuniform vec2 unitRange;\n// functions from the original msdf repo:\n// https://github.com/Chlumsky/msdfgen#using-a-multi-channel-distance-field\nfloat median(float r, float g, float b) {\n\treturn max(min(r, g), min(max(r, g), b));\n}\nfloat screenPxRange() {\n\n\t// precomputed unitRange as recommended by Chlumsky\n\t// vec2 unitRange = vec2(pxRange)/vec2(textureSize(glyphMap, 0));\n\tvec2 screenTexSize = vec2(1.0)/fwidth(vUvG);\n\treturn max(0.5*dot(unitRange, screenTexSize), 1.0);\n}\nfloat tap(vec2 offsetUV) {\n\tvec3 msd = texture( glyphMap, offsetUV ).rgb;\n\tfloat sd = median(msd.r, msd.g, msd.b);\n\tfloat screenPxDistance = screenPxRange() * (sd - 0.5);\n\tfloat alpha = clamp(screenPxDistance + 0.5, 0.0, 1.0);\n\treturn alpha;\n}\n",Ge="\n\tfloat alpha;\n#ifdef NO_RGSS\n\n\talpha = tap( vUvG );\n\n#else\n\n\t// shader-based supersampling based on https://bgolus.medium.com/sharper-mipmapping-using-shader-based-supersampling-ed7aadb47bec\n\t// per pixel partial derivatives\n\tvec2 dx = dFdx(vUvG);\n\tvec2 dy = dFdy(vUvG);\n\t// rotated grid uv offsets\n\tvec2 uvOffsets = vec2(0.125, 0.375);\n\tvec2 offsetUV = vec2(0.0, 0.0);\n\t// supersampled using 2x2 rotated grid\n\talpha = 0.0;\n\toffsetUV.xy = vUvG + uvOffsets.x * dx + uvOffsets.y * dy;\n\talpha += tap(offsetUV);\n\toffsetUV.xy = vUvG - uvOffsets.x * dx - uvOffsets.y * dy;\n\talpha += tap(offsetUV);\n\toffsetUV.xy = vUvG + uvOffsets.y * dx - uvOffsets.x * dy;\n\talpha += tap(offsetUV);\n\toffsetUV.xy = vUvG - uvOffsets.y * dx + uvOffsets.x * dy;\n\talpha += tap(offsetUV);\n\talpha *= 0.25;\n\n#endif\n\n\talpha = clamp( alpha, 0.0, 1.0 );\n\n#ifdef INVERT_ALPHA\n\n\talpha = 1.0 - alpha;\n\n#endif\n\n\tdiffuseColor.a *= alpha;\n",$e=function(e,t,i){e.alphaTest=i,je(e,"USE_ALPHATEST",i>0)},je=function(e,t,i){e.defines&&(i?void 0===e.defines[t]&&(e.defines[t]="",e.needsUpdate=!0):void 0!==e.defines[t]&&(delete e.defines[t],e.needsUpdate=!0))},Xe=function(e,t,i){e.userData[t]?e.userData[t].value=i:e.uniforms[t].value=i};class Ne{static ensureMaterialOptions(e){e.transparent=!0,e.alphaTest=e.alphaTest||.02}static ensureDefines(e){e.defines||(e.defines={})}static ensureUserData(e,t){e.userData.glyphMap={value:t.glyphMap},e.userData.unitRange={value:new _.Vector2}}static bindUniformsWithUserData(e,t){e.uniforms.glyphMap=t.userData.glyphMap,e.uniforms.unitRange=t.userData.unitRange}static injectShaderChunks(e){Ne.injectVertexShaderChunks(e),Ne.injectFragmentShaderChunks(e)}static injectVertexShaderChunks(e){e.vertexShader=e.vertexShader.replace("#include <uv_pars_vertex>","#include <uv_pars_vertex>\n"+De),e.vertexShader=e.vertexShader.replace("#include <uv_vertex>","#include <uv_vertex>\n\nvUvG = uvG;\n"),e.vertexShader=e.vertexShader.replace("#include <project_vertex>","#include <project_vertex>\n\ngl_Position.z -= 0.00001;\n")}static injectFragmentShaderChunks(e){e.fragmentShader=e.fragmentShader.replace("#include <uv_pars_fragment>","#include <uv_pars_fragment>\n"+Le),e.fragmentShader=e.fragmentShader.replace("#include <alphamap_fragment>","#include <alphamap_fragment>\n"+Ge)}static from(e){return class extends e{static get fontMaterialProperties(){return Ne.mediation}constructor(e={}){Ne.ensureMaterialOptions(e),super(e),Ne.ensureDefines(this),Ne.ensureUserData(this,e),this._userDefinedOnBeforeCompile=e=>{},this._onBeforeCompile=this._cumulativeOnBeforeCompile}set onBeforeCompile(e){this._userDefinedOnBeforeCompile=e}get onBeforeCompile(){return this._onBeforeCompile}_cumulativeOnBeforeCompile=e=>{Ne.bindUniformsWithUserData(e,this),Ne.injectShaderChunks(e),this._userDefinedOnBeforeCompile(e)}}}static get mediation(){return Ye}}const Ye={clippingPlanes:{m:"clippingPlanes"},fontAlphaTest:{m:"alphaTest",t:$e},fontSide:{m:"side"},font:{m:"glyphMap",t:function(e,t,i){const n=i?i.texture:null,s=i?i.unitRange:new _.Vector2;if(void 0!==e[t])return e.glyphMap=n,void(e.unitRange=s);e.userData&&e.userData.glyphMap&&(e.userData.glyphMap.value=n,e.userData.unitRange.value=s)}},color:{m:"color"},fontOpacity:{m:"opacity"},fontSmooth:{m:"NO_RGSS",t:function(e,t,i){i&&"antialiased"!==i?e.defines.NO_RGSS="":delete e.defines.NO_RGSS,e.needsUpdate=!0}},invertAlpha:{m:"INVERT_ALPHA",t:je}},Ke=`\n${De}\n#include <clipping_planes_pars_vertex>\nvoid main() {\n\t\nvUvG = uvG;\n\n\t#include <begin_vertex>\n\t#include <project_vertex>\n\t\ngl_Position.z -= 0.00001;\n\n\t#include <clipping_planes_vertex>\n}\n`,qe=`\nuniform vec3 diffuse;\nuniform float opacity;\n${Le}\n#include <alphatest_pars_fragment>\n#include <clipping_planes_pars_fragment>\nvoid main() {\n\t// instead of <color_fragment> : vec4 diffuseColor\n\tvec4 diffuseColor = vec4( diffuse, opacity );\n\t${Ge}\n\t#include <alphatest_fragment>\n\t// instead of <output_fragment>\n\tgl_FragColor = diffuseColor;\n\t#include <clipping_planes_fragment>\n}\n`;class Je extends _.ShaderMaterial{static get mediation(){return Ne.mediation}constructor(e={}){super({uniforms:{glyphMap:{value:null},diffuse:{value:null},opacity:{value:1},unitRange:{value:new _.Vector2(0,0)},alphaTest:{value:.02}},transparent:!0,clipping:!0,vertexShader:Ke,fragmentShader:qe,extensions:{derivatives:!0}}),this.defines.USE_ALPHATEST="",this.needsUpdate=!0,this.noRGSS=e.noRGSS||!1}get color(){return this.uniforms.diffuse.value}set color(e){this.uniforms.diffuse.value=e}set opacity(e){this.uniforms&&(this.uniforms.opacity.value=e)}get opacity(){return this.uniforms.opacity.value}get unitRange(){return this.uniforms.unitRange.value}set unitRange(e){this.uniforms.unitRange.value.copy(e)}get glyphMap(){return this.uniforms.glyphMap.value}set glyphMap(e){this.uniforms.glyphMap.value=e}get isDefault(){return this.constructor===Je}get alphaTest(){return this.uniforms.alphaTest.value}set alphaTest(e){this.uniforms.alphaTest.value=e}}class Qe extends M{constructor(e,t,i,n){var s,r;if(super(e,t),this._unitRange=new _.Vector2(1,1),i.pages?this._buildData(i):(s=this,r=i,(new _.FileLoader).setResponseType("json").load(r,(e=>{s._buildData(e),s._checkReadiness()}))),n instanceof _.Texture)this._texture=n,this._buildTexture(n);else{if(!("string"==typeof n||n instanceof String))throw new Error(`ThreeMeshUI::MSDFVariant provided 'texture' parameter is '${typeof n}'. Only Texture and String allowed.`);!function(e,t){e._texture=(new _.TextureLoader).load(t,(t=>{e._buildTexture(t),e._checkReadiness()}))}(this,n)}this._defaultMaterialClass=Je,this._checkReadiness()}get texture(){return this._texture}get unitRange(){return this._unitRange}set fontMaterial(e){this._defaultMaterialClass=e}get fontMaterial(){return this._defaultMaterialClass}_buildData(e){this._font=new Te(e),this._kernings=this._buildKerningPairs(e),this._chars=this._buildCharacters(e),this._chars[" "]=this._buildCharacterWhite(e),this._chars["\n"]=this._buildCharacterWhite(e,"\n",.001,1),this._chars["\t"]=this._buildCharacterWhite(e,"\t",4,1),this._size=e.info.size,this._lineHeight=e.common.lineHeight,this._lineBase=e.common.base,this._distanceRange=e.distanceField.distanceRange,this._unitRange=new _.Vector2(this._distanceRange,this._distanceRange).divide(new _.Vector2(e.common.scaleW,e.common.scaleH))}_buildTexture(e){e.generateMipmaps=!1,e.minFilter=_.LinearFilter,e.magFilter=_.LinearFilter,e.needsUpdate=!0}_getFallbackCharacter(e){return nt.missingCharacter(this,e)}getGeometricGlyph(e,t){return new We(e,t)}_readyCondition(){return this._chars&&this._texture&&this._texture.image}_buildKerningPairs(e){const t={};for(let i=0;i<e.kernings.length;i++){const n=e.kernings[i];if(0===n.amount)continue;t[String.fromCharCode(n.first,n.second)]=n.amount}return t}_buildCharacters(e){const t={};for(let i=0;i<e.chars.length;i++){const n=e.chars[i];t[n.char]=new Ae(this._font,n)}return t}_buildCharacterWhite(e,t=" ",i=1,n=1){return new Ae(this._font,{char:t,width:e.info.size/3*i,height:.7*e.info.size*n})}_alterElementProperties(e){}}class Ze extends _.EventDispatcher{constructor(e){super(),this._name=e,this._variants=[],this._isReady=!1}get isReady(){return this._isReady}addVariant(e,t,i,n,s=!1){if(s||!this.getVariant(e,t)){this._isReady=!1;const s=new Qe(e,t,i,n);this._variants.push(s),s.isReady?this._checkReadiness():s.addEventListener("ready",this._checkReadiness)}else console.warn(`FontFamily('${this._name}')::addVariant() - Variant(${e}, ${t}) already exists.`);return this}addCustomImplementationVariant(e,t=!1){return t||!this.getVariant(e.weight,e.style)?(this._isReady=!1,this._variants.push(e),e.isReady?this._checkReadiness():e.addEventListener("ready",this._checkReadiness)):console.warn(`FontFamily('${this._name}')::addCustomImplementationVariant() - Variant(${e.weight}, ${e.style}) already exists.`),this}getVariant(e,t){return this._variants.find((i=>i.weight===e&&i.style===t))}get name(){return this._name}_checkReadiness=()=>{var e;this._variants.every((e=>e.isReady))&&((e=this)._isReady=!0,e.dispatchEvent(et))}}const et={type:"ready"};const tt={};let it=function(e,t){return console.error(`The character '${t}' is not included in the font characters set.`)," "};const nt={addFontFamily:function(e){return tt[e]&&console.error(`FontLibrary::addFontFamily - Font('${e}') is already registered`),tt[e]=new Ze(e),tt[e]},getFontFamily:function(e){return tt[e]},prepare:function(e){const t=[...arguments];t.forEach((e=>{if(!(e instanceof Ze))throw new Error(`FontLibrary::prepare() - One of the provided parameter is not a FontFamily. Instead ${typeof e} given.`)}));const i=function(){return t.every((e=>e.isReady))};return new Promise(((e,n)=>{if(i())e();else for(let n=0;n<t.length;n++){const s=t[n];s.isReady||s.addEventListener("ready",(()=>{i()&&e()}))}}))},setMissingCharacterHandler:function(e){it=e},missingCharacter:function(e,t){return it(e,t)}};class st extends p{constructor(){super("fontFamily","inherit",!0)}computeOutputValue(e){if(this._input instanceof Ze)this._value=this._input;else if("inherit"===this._input);else if("string"==typeof this._input){const e=nt.getFontFamily(this._input);e?this._value=e:console.warn(`(.style) fontFamily, the font '${this._input}' is not registered. Aborted.`)}else console.warn("(.style) fontFamily requires a registered fontFamily instance, or the id of a registered fontFamily."),console.warn("If you want to set a specific font, please use .font property instead.")}get value(){return this._value}getInheritedInput(e){if("inherit"!==this._input)return this._input;const t=e._parent._value;return t?t[`_${this._id}`].getInheritedInput(t):this.getDefaultValue()}}class rt extends p{constructor(){super("lineHeight","inherit",!0)}update(e,t){super.update(e,t),e._layouter._needsProcess=!0}}class ot extends p{constructor(){super("whiteSpace","inherit"),this.isValidValue=ut}}const at=["normal","nowrap","pre","pre-line","pre-wrap"];function ut(e){return-1!==at.indexOf(e)||(console.warn(`(.style) whiteSpace value '${e}' is not valid. Aborted`),!1)}class ht extends p{constructor(){super("letterSpacing","inherit",!0)}}class lt extends p{constructor(){super("fontSize","inherit",!0),this._fontRelative=!1}update(e,t){this._inheritedInput=this.getInheritedInput(e),this._inheritedInput,this._value=function(e,t){if(t._fontSize._fontRelative=!1,!isNaN(e))return e;if(e.endsWith("em"))return t._fontSize._fontRelative=!0,parseFloat(e.replace(/[^0-9.]+/,""))*t._parent._value._fontSize.getInheritedInput(t._parent._value)}(this._inheritedInput,e),this._value,this.computeOutputValue(e);for(const t of e._children._uis){const e=t[`_${this._id}`];if(!e)continue;("inherit"===(e._input?e._input:e._value)||e._fontRelative)&&(t[`_${this._id}`]._needsUpdate=!0)}this.output(t)}computeOutputValue(e){}}class dt extends o{constructor(){super("segments",1,!1)}}class ct extends u{constructor(){super("invertAlpha","inherit")}}class _t extends p{constructor(){super("fontKerning","inherit"),this.isValidValue=ft}}const pt=["normal","none","inherit"];function ft(e){return-1!==pt.indexOf(e)||(console.warn(`(.style) fontKerning value '${e}' is not valid. Aborted`),!1)}class gt extends u{constructor(e){super(e,"inherit",!0)}}class vt extends u{constructor(e){super(e,"inherit",!1),this._mediation={},this._defaultMaterial=null}update(e,t){this._notInheritedValue=this._value,"inherit"===this._notInheritedValue?this._notInheritedValue=this.getInheritedInput(e):this.propagate(e),this._notInheritedValue?this._notInheritedValue.constructor.mediation?this._mediation={...this._notInheritedValue.constructor.mediation}:this._mediation={clippingPlanes:{m:"clippingPlanes"},fontAlphaTest:{m:"alphaTest",t:$e},fontSide:{m:"side"},color:{m:"color"},fontOpacity:{m:"opacity"}}:this._mediation={},e._transferToFontMaterial(),this._outputValue(t)}getInheritedInput(e){if("inherit"!==this._value)return this._value;let t=e,i=null;for(;t._parent._value;)if(t=t._parent._value,"inherit"!==t[`_${this._id}`]._value){i=t[`_${this._id}`]._value;break}return null!==i?i:this.getDefaultValue()}getDefaultValue(){return this._defaultMaterial}}class mt extends p{constructor(){super("verticalAlign","inherit",!0),this.isValidValue=yt}}const bt=["inherit","baseline","sub","super"],yt=function(e){return-1!==bt.indexOf(e)||(console.warn(`(.style) verticalAlign value '${e}' is not valid. Aborted`),!1)};class xt extends _.Object3D{constructor(e,t){super(),Object.defineProperties(this,{isUI:{configurable:!1,enumerable:!0,value:!0}});let i=t.uiType||"default";t.uiType&&delete t.uiType,Object.defineProperties(this,{uiType:{configurable:!1,enumerable:!0,value:i}}),this._backgroundMesh=null,this._backgroundMaterial=null,this._backgroundCustomDepthMaterial=null,this._backgroundMaterialMediation={},this._backgroundMeshMediation={backgroundCastShadow:{m:"castShadow"},backgroundReceiveShadow:{m:"receiveShadow"},renderOrder:{m:"renderOrder"}},this._fontMesh=null,this._fontMaterial=new vt("fontMaterial"),this._fontCustomDepthMaterial=new vt("fontCustomDepthMaterial"),this._fontMeshMediation={fontMaterial:{m:"material"},fontCustomDepthMaterial:{m:"customDepthMaterial",t:y},fontCastShadow:{m:"castShadow"},fontReceiveShadow:{m:"receiveShadow"},renderOrder:{m:"renderOrder"}};const n=r(null,this.uiType);this._children=e.children?new e.children:new re("children"),this._parent=new w,this.addEventListener("added",this._rebuildParentUI),this.addEventListener("removed",this._rebuildParentUI),this._backgroundSide=new k("backgroundSide",n.backgroundSide),this._fontSide=new k("fontSide",n.fontSide),this._backgroundAlphaTest=new V("backgroundAlphaTest",n.backgroundAlphaTest),this._fontAlphaTest=new V("fontAlphaTest",n.fontAlphaTest),this._visible=new ne("visible",!0),this._backgroundCastShadow=new gt("backgroundCastShadow"),this._fontCastShadow=new gt("fontCastShadow"),this._backgroundReceiveShadow=new gt("backgroundReceiveShadow"),this._fontReceiveShadow=new gt("fontReceiveShadow"),this._renderOrder=new a,this._segments=e.segments?new e.segments:new dt,this._bounds=e.bounds?new e.bounds:new re("bounds"),this._order=new be,this._padding=new g(n.padding),this._margin=new m(n.margin),this._position=new ye(n.position),this._flexDirection=e.flexDirection?new e.flexDirection:new _e,this._justifyContent=e.justifyContent?new e.justifyContent:new ge,this._alignItems=e.alignItems?new e.alignItems:new he,this._display=new T("flex"),this._boxSizing=new z("border-box"),this._width=new Ve,this._height=new ke,this._backgroundColor=e.backgroundColor?new e.backgroundColor(n.backgroundColor):new se(n.backgroundColor),this._backgroundOpacity=new E("backgroundOpacity",n.backgroundOpacity),this._backgroundImage=new L,this._backgroundSize=new $("cover"),this._color=e.color?new e.color(n.color):new D("color",n.color),this._fontOpacity=new E("fontOpacity","inherit"),this._whiteSpace=e.whiteSpace?new e.whiteSpace:new ot,this._fontFamily=e.fontFamily?new e.fontFamily:new st,this._fontStyle=e.fontStyle?new e.fontStyle(n.fontStyle):new Re(n.fontStyle),this._fontWeight=e.fontWeight?new e.fontWeight(n.fontWeight):new Me(n.fontWeight),this._fontSize=e.fontSize?new e.fontSize:new lt,this._lineHeight=e.lineHeight?new e.lineHeight:new rt,this._fontKerning=e.fontKerning?new e.fontKerning:new _t,this._letterSpacing=e.letterSpacing?new e.letterSpacing:new ht,this._overflow=new N("visible"),this._borderRadius=new ee(n.borderRadius),this._borderWidth=new ie(n.borderWidth),this._borderColor=e.borderColor?new e.borderColor:new D("borderColor",n.borderColor),this._borderOpacity=new E("borderOpacity",n.borderOpacity),this._font=new B,this._lineBreak=e.lineBreak?new e.lineBreak:new re("lineBreak"),this._textContent=e.textContent?new e.textContent:new Ue,this._glyphs=e.glyphs?new e.glyphs:new re("glyphs"),this._inlines=e.inlines?new e.inlines:new re("inlines"),this._layouter=e.layouter?new e.layouter:new re("layouter"),this._inlineJustificator=new oe,this._textAlign=e.textAlign?new e.textAlign:new le,this._verticalAlign=e.verticalAlign?new e.verticalAlign:new mt,this._autoSize=e.autoSize?new e.autoSize:new re("autoSize"),this._renderer=e.renderer?new e.renderer:new re("renderer"),this._offset=new h,this._invertAlpha=new ct,this._fontSmooth=e.fontSmooth?new e.fontSmooth:new l,this._components=[this._textContent,this._children,this._parent,this._autoSize,this._fontFamily,this._fontStyle,this._fontWeight,this._font,this._whiteSpace,this._glyphs,this._inlines,this._visible,this._backgroundSide,this._fontSide,this._backgroundAlphaTest,this._fontAlphaTest,this._backgroundCastShadow,this._fontCastShadow,this._backgroundReceiveShadow,this._fontReceiveShadow,this._renderOrder,this._segments,this._fontSize,this._padding,this._margin,this._width,this._height,this._borderWidth,this._boxSizing,this._bounds,this._position,this._flexDirection,this._justifyContent,this._alignItems,this._order,this._display,this._fontOpacity,this._color,this._backgroundColor,this._backgroundOpacity,this._backgroundImage,this._backgroundSize,this._lineHeight,this._fontKerning,this._letterSpacing,this._borderRadius,this._borderColor,this._borderOpacity,this._lineBreak,this._offset,this._verticalAlign,this._layouter,this._inlineJustificator,this._textAlign,this._invertAlpha,this._fontSmooth,this._fontMaterial,this._fontCustomDepthMaterial,this._overflow,this._renderer],this._onAfterUpdates=[],t.backgroundSide||(t.backgroundSide=0),t&&this.set(t)}update(){const e={};for(const t of this._components)t._needsUpdate&&(t.update(this,e),t._needsUpdate=!1);this._transferToBackgroundMesh(e),this._transferToFontMesh(e),this._transferToBackgroundMaterial(e),this._transferToFontMaterial(e);for(const e of this._children._uis)e.update()}process(){for(const e of this._children._uis)e.process();for(const e of this._components)e._needsProcess&&(e.process(this),e._needsProcess=!1)}render(){for(let e=0;e<this._components.length;e++){const t=this._components[e];t._needsRender&&(t.render(this),t._needsRender=!1)}for(const e of this._children._uis)e.render()}set(e){if(e.fontTexture&&(console.warn("ThreeMeshUI::set( {fontTexture} ) is deprecated. Please use fontLibrary to register font families and variants."),e.fontFamily)){const t=e.fontFamily.pages?e.fontFamily.info.face:e.fontFamily;let i=nt.getFontFamily(t);if(!i){const n=e.fontStyle?e.fontStyle:"normal",s=e.fontWeight?e.fontWeight:"normal";i=nt.addFontFamily(t).addVariant(s,n,e.fontFamily,e.fontTexture)}e.fontFamily=i,delete e.fontTexture}for(let t of Object.keys(e)){const i=e[t];switch(t){case"contentDirection":console.warn("ThreeMeshUI v7xx: property `contentDirection` is deprecated and has been renamed as `flexDirection`"),t="flexDirection";break;case"interLine":console.warn("ThreeMeshUI v7xx: property `interLine` is deprecated and has been renamed as `lineHeight`"),t="lineHeight";break;case"content":console.warn("ThreeMeshUI v7xx: property `content` is deprecated and has been renamed as `textContent`"),t="textContent";break;case"fontColor":console.warn("ThreeMeshUI v7xx: property `fontColor` is deprecated and has been renamed as `color`"),t="color";break;case"hiddenOverflow":console.warn("ThreeMeshUI v7xx: property `hiddenOverflow` is deprecated and has been renamed as `overflow`"),t="overflow";break;case"backgroundTexture":console.warn("ThreeMeshUI v7xx: property `backgroundTexture` is deprecated and has been renamed as `backgroundImage`"),t="backgroundImage";break;case"alignContent":console.warn("ThreeMeshUI v7xx: property `alignContent` is deprecated and has been renamed as `alignItems`"),t="alignItems";break;case"borderTopColor":case"borderBottomColor":case"borderLeftColor":case"borderRightColor":t="borderColor"}switch(t){case"fontSmooth":case"renderOrder":case"segments":case"visible":case"offset":case"fontSide":case"backgroundSide":case"fontCastShadow":case"backgroundCastShadow":case"fontReceiveShadow":case"backgroundReceiveShadow":case"fontMaterial":case"fontCustomDepthMaterial":this[`_${t}`].value=i;break;case"flexDirection":case"justifyContent":case"alignItems":case"color":case"fontFamily":case"fontOpacity":case"fontKerning":case"fontSize":case"fontStyle":case"fontWeight":case"textAlign":case"letterSpacing":case"lineHeight":case"whiteSpace":case"breakOn":case"width":case"height":case"padding":case"margin":case"backgroundColor":case"backgroundOpacity":case"backgroundImage":case"backgroundSize":case"borderColor":case"borderOpacity":case"borderRadius":case"borderWidth":case"overflow":case"order":case"boxSizing":case"position":case"verticalAlign":this[`_${t}`]&&(this[`_${t}`].inline=i);break;case"paddingTop":this._padding.top=i;break;case"paddingRight":this._padding.right=i;break;case"paddingBottom":this._padding.bottom=i;break;case"paddingLeft":this._padding.left=i;break;case"marginTop":this._margin.top=i;break;case"marginRight":this._margin.right=i;break;case"marginBottom":this._margin.bottom=i;break;case"marginLeft":this._margin.left=i;break;case"borderTopWidth":this._borderWidth.top=i;break;case"borderRightWidth":this._borderWidth.right=i;break;case"borderBottomWidth":this._borderWidth.bottom=i;break;case"borderLeftWidth":this._borderWidth.left=i;break;case"borderTopLeftRadius":this._borderRadius.topLeft=i;break;case"borderTopRightRadius":this._borderRadius.topRight=i;break;case"borderBottomRightRadius":this._borderRadius.bottomRight=i;break;case"borderBottomLeftRadius":this._borderRadius.bottomLeft=i;break;case"side":case"castShadow":case"receiveShadow":const e=t.charAt(0).toUpperCase()+t.substr(1);this[`_background${e}`].value=i,this[`_font${e}`].value=i;break;default:void 0!==this[t]?this[t]=i:void 0!==this[`_${t}`]&&(this[`_${t}`].value=i)}}}get(e){switch(e){case"overflow":case"width":case"height":return this[`_${e}`].inline}}_rebuildChildrenLists(){this._children._needsUpdate=!0}_rebuildParentUI=()=>{this._parent._needsUpdate=!0,this.parent&&!this.parent.isUI?(wt.register(this),this.activatePseudoState("root")):(wt.remove(this),this.deactivatePseudoState("root"))};add(e){let t=!1;for(let e=0;e<arguments.length;e++)super.add(arguments[e]),arguments[e].isUI&&(t=!0);return t&&this._rebuildChildrenLists(),this}remove(e){for(const e of Object.keys(arguments))arguments[e].isInline&&this.update(null,!0);return super.remove(...arguments),this._rebuildChildrenLists(),this}clear(){return this.removeFromParent(),this.traverse((e=>{e.material&&e.material.dispose(),e.geometry&&e.geometry.dispose()})),super.clear(),this._backgroundMesh=null,this._backgroundMaterial=null,this._backgroundMaterialMediation=null,this._backgroundMeshMediation=null,this._children.dispose(),this._children=null,this._parent.dispose(),this._parent=null,this._backgroundSide=null,this._backgroundAlphaTest=null,this._visible=null,this._backgroundCastShadow=null,this._backgroundReceiveShadow=null,this._renderOrder=null,this._segments=null,this._bounds=null,this._boxSizing=null,this._padding=null,this._margin=null,this._position=null,this._flexDirection=null,this._justifyContent=null,this._alignItems=null,this._display=null,this._backgroundColor=null,this._backgroundOpacity=null,this._backgroundSize=null,this._fontOpacity=null,this._color=null,this._whiteSpace=null,this._fontFamily=null,this._fontStyle=null,this._fontWeight=null,this._lineHeight=null,this._fontKerning=null,this._letterSpacing=null,this._overflow=null,this._textAlign=null,this._font=null,this._lineBreak=null,this._layouter=null,this}get textContent(){return this._textContent.process(this),this._textContent._value}get backgroundMaterial(){return this._backgroundMaterial}set backgroundMaterial(e){this._backgroundMaterial=e,this._backgroundMaterialMediation={...e.constructor.mediation},this._transferToBackgroundMaterial(),this._backgroundMesh&&(this._backgroundMesh.material=this._backgroundMaterial,Xe(e,"frameSize",this._backgroundMesh.scale))}set backgroundCustomDepthMaterial(e){this._backgroundCustomDepthMaterial=e,this._transferToBackgroundMaterial(),this._backgroundMesh&&(this._backgroundMesh.customDepthMaterial=this._backgroundCustomDepthMaterial)}get backgroundCustomDepthMaterial(){return this._backgroundCustomDepthMaterial}_transferToBackgroundMaterial(e=null){if(!e){e={};for(const t of this._components)t.output(e)}x.mediate(this,this._backgroundMaterial,e,this._backgroundMaterialMediation,this._backgroundCustomDepthMaterial)}set backgroundSide(e){this._backgroundSide.value=e,this._backgroundMaterial&&(this._backgroundMaterial.side=e)}get backgroundSide(){return this._backgroundSide.value}set backgroundAlphaTest(e){this._backgroundAlphaTest.value=e,this._backgroundMaterial&&(this._backgroundMaterial.alphaTest=e)}get backgroundAlphaTest(){return this._backgroundAlphaTest.value}get fontMaterial(){return this._fontMaterial.value}set fontMaterial(e){this._fontMaterial.value=e}set fontCustomDepthMaterial(e){this._fontCustomDepthMaterial.value=e}get fontCustomDepthMaterial(){return this._fontCustomDepthMaterial.value}_transferToFontMaterial(e=null){const t=this._fontMaterial.value;if(t){if(!e){e={};for(const t of this._components)t.output(e)}x.mediate(this,t,e,this._fontMaterial._mediation,this._fontCustomDepthMaterial.value)}}set fontSide(e){this._fontSide.value=e}get fontSide(){return this._fontSide.value}set fontAlphaTest(e){this._fontAlphaTest.value=e}get fontAlphaTest(){return this._fontAlphaTest.value}_transferToBackgroundMesh(e=null){if(!e){e={};for(const t of this._components)t.output(e)}x.mediate(this,this._backgroundMesh,e,this._backgroundMeshMediation)}setBackgroundMesh(e){this._backgroundMesh&&(this.remove(this._backgroundMesh),this.unbindBackgroundMeshProperties()),this._backgroundMesh=e,this._backgroundMesh&&(this.bindBackgroundMeshProperties(),this._backgroundCustomDepthMaterial&&(this._backgroundMesh.customDepthMaterial=this._backgroundCustomDepthMaterial),this._backgroundMaterial&&Xe(this._backgroundMaterial,"frameSize",this._backgroundMesh.scale),this._transferToBackgroundMesh(),this.add(this._backgroundMesh))}bindBackgroundMeshProperties(){}unbindBackgroundMeshProperties(){}activatePseudoState(e){}deactivatePseudoState(e){}togglePseudoState(e){}hasPseudoState(e){return!1}set borderRadiusMediation(e){this._borderRadius.mediation=e}set backgroundCastShadow(e){this._backgroundCastShadow&&(this._backgroundCastShadow.value=e)}get backgroundCastShadow(){return this._backgroundCastShadow}set backgroundReceiveShadow(e){this._backgroundReceiveShadow&&(this._backgroundReceiveShadow.value=e)}get backgroundReceiveShadow(){return this._backgroundReceiveShadow}set renderOrder(e){this._renderOrder&&(this._renderOrder.value=e)}get renderOrder(){return this._renderOrder.value}_transferToFontMesh(e=null){if(this._fontMesh){if(!e){e={};for(const t of this._components)t.output(e)}x.mediate(this,this._fontMesh,e,this._fontMeshMediation)}}setFontMesh(e){this._fontMesh&&(this.remove(this._fontMesh),this._fontMesh.material&&this._fontMesh.material.dispose?.(),this._fontMesh.geometry&&this._fontMesh.geometry.dispose?.(),this._fontMesh=null,this.unbindFontMeshProperties()),this._fontMesh=e,this._fontMesh&&(this._fontMesh.raycast=()=>{},this.bindFontMeshProperties(),this._transferToFontMaterial(),this._transferToFontMesh(),this.add(this._fontMesh))}bindFontMeshProperties(){}unbindFontMeshProperties(){}set fontCastShadow(e){this._fontCastShadow&&(this._fontCastShadow.value=e)}get fontCastShadow(){return this._fontCastShadow}set fontReceiveShadow(e){this._fontReceiveShadow&&(this._fontReceiveShadow.value=e)}get fontReceiveShadow(){return this._fontReceiveShadow}set segments(e){this._segments.value=e}get segments(){return this._segments.value}set onAfterUpdate(e){console.warn("ThreeMeshUI v7xx : `onAfterUpdate()` property has been deprecated, please rely on `addAfterUpdate` instead."),this.addAfterUpdate(e)}addAfterUpdate(e){this._onAfterUpdates.push(e)}removeAfterUpdate(e){const t=this._onAfterUpdates.indexOf(e);-1!==t&&this._onAfterUpdates.splice(t,1)}performAfterUpdate(){for(let e=0;e<this._onAfterUpdates.length;e++)this._onAfterUpdates[e]()}appendProperty(e,t){this[`_${e}`]=t,this._components.push(t)}replaceProperty(e,t){const i=this[`_${e}`],n=this._components.indexOf(i);return this._components[n]=this[`_${e}`]=t,t.needsUpdate=!0,i}}class wt{static register(e){this.elements.includes(e)||this.elements.push(e)}static remove(e){const t=this.elements.indexOf(e);-1!==t&&this.elements.splice(t,1)}static update(){for(const e of this.elements)e.update(),e.process(),e.process(),e.render()}}wt.elements=[];const St="\n\n// FrameBorder vertex pars\nattribute vec2 uvB;\nvarying vec2 vUvB;\n\n",Vt="\n\n\t// FrameBorder vertex shader\n\tvUvB = uvB;\n\n",kt="\n\n// borders sequences are : x:TOP, y:RIGHT, z:BOTTOM, w:LEFT\nuniform vec4 borderWidth;\nuniform vec3 borderColor;\nuniform float borderOpacity;\nuniform vec4 borderRadius;\n\nuniform vec2 cornerTL;\nuniform vec2 cornerTR;\nuniform vec2 cornerBR;\nuniform vec2 cornerBL;\n\nvarying vec2 vUvB;\n\nfloat getEllipticFactor( vec2 uv, vec2 center, float radiusX, float radiusY )\n{\n\n\t\tfloat edx = uv.x - center.x;\n\t\tfloat edy = uv.y - center.y;\n\n\t\tfloat ddx = (edx * edx) / (radiusX * radiusX);\n\t\tfloat ddy = (edy * edy) / (radiusY * radiusY);\n\n\t\treturn ddx + ddy;\n\n}\n\n",Ut="\n\nvec4 borderColor = vec4( borderColor, borderOpacity );\n\n// This could be tweak to produce more smoothing\nfloat mult = 1.0;\n\n// Step 1 ----------------------------------------------\n// Draw the four borders ( top - right - bottom - left )\n// Without worrying about radiuses ( Straight boorders )\n\n// Top\nfloat topBorderUVy = 1.0 - borderWidth.x;\nif( borderWidth.x > 0.0 && vUvB.y > topBorderUVy )\n{\n\n\tfloat w = fwidth( 1.0 - vUvB.y ) * mult;\n\tfloat step = smoothstep( topBorderUVy , topBorderUVy + w , vUvB.y );\n\tdiffuseColor = mix( diffuseColor, borderColor, step );\n\n}\n\n// Left\nfloat leftBorderUVx = borderWidth.w;\nif( borderWidth.w > 0.0 && vUvB.x < leftBorderUVx )\n{\n\n\tfloat w = fwidth( vUvB.x ) * mult ;\n\tfloat step = smoothstep( leftBorderUVx , leftBorderUVx - w , vUvB.x );\n\tdiffuseColor = mix( diffuseColor, borderColor, step );\n\n}\n\n// Bottom\nfloat bottomBorderUVy = borderWidth.z;\nif( borderWidth.z > 0.0 && vUvB.y < bottomBorderUVy )\n{\n\tfloat w = fwidth( vUvB.y ) * mult;\n\tfloat step = smoothstep( bottomBorderUVy , bottomBorderUVy - w , vUvB.y );\n\tdiffuseColor = mix( diffuseColor, borderColor, step );\n}\n\n// Right\nfloat rightBorderUVx = 1.0 - borderWidth.y;\nif( borderWidth.y > 0.0 && vUvB.x > rightBorderUVx )\n{\n\tfloat w = fwidth( 1.0 - vUvB.x ) * mult;\n\tfloat step = smoothstep( rightBorderUVx , rightBorderUVx + w , vUvB.x );\n\tdiffuseColor = mix( diffuseColor, borderColor, step );\n}\n\n\n// Step 2 ----------------------------------------------\n// Process each corners ( topLeft, topRight, bottomRight, bottomLeft )\n// To transparentize outside radiuses\n// To draw ellipse border on the corner\n\n\n// Top Left corner\nif( vUvB.x < cornerTL.x && vUvB.y > cornerTL.y ) {\n\n\t\t// Only draw border if width is set\n\t\tif( borderWidth.w + borderWidth.x > 0.0 ){\n\n\t\t\tfloat borderFactor = getEllipticFactor( vUvB, cornerTL, cornerTL.x - borderWidth.w,  ( 1.0 - cornerTL.y ) - borderWidth.x );\n\t\t\tfloat step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );\n\t\t\tdiffuseColor = mix( diffuseColor, borderColor, step );\n\n\t\t}\n\n\t\t// Then then radius\n\t\tfloat radiusFactor = getEllipticFactor( vUvB, cornerTL, cornerTL.x, 1.0 - cornerTL.y );\n\t\tfloat alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );\n\t\tdiffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );\n\n}\n// Bottom Left\nif( vUvB.x < cornerBL.x && vUvB.y < cornerBL.y ) {\n\n\t\tif( borderWidth.w + borderWidth.z > 0.0 ){\n\n\t\t\tfloat borderFactor = getEllipticFactor( vUvB, cornerBL, cornerBL.x - borderWidth.w,  cornerBL.y - borderWidth.z );\n\t\t\tfloat step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );\n\t\t\tdiffuseColor = mix( diffuseColor, borderColor, step );\n\n\t\t}\n\n\n\t\tfloat radiusFactor = getEllipticFactor( vUvB, cornerBL, cornerBL.x, cornerBL.y );\n\t\tfloat alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );\n\t\tdiffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );\n\n}\n// Top Right\nif( vUvB.x > cornerTR.x && vUvB.y > cornerTR.y ) {\n\n\t\tif( borderWidth.y + borderWidth.x > 0.0 ){\n\n\t\t\tfloat borderFactor = getEllipticFactor( vUvB, cornerTR, ( 1.0 - cornerTR.x ) - borderWidth.y,  ( 1.0 - cornerTR.y ) - borderWidth.x );\n\t\t\tfloat step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );\n\t\t\tdiffuseColor = mix( diffuseColor, borderColor, step );\n\n\t\t}\n\n\t\tfloat radiusFactor = getEllipticFactor( vUvB, cornerTR, 1.0 - cornerTR.x, 1.0 - cornerTR.y );\n\t\tfloat alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );\n\t\tdiffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );\n\n}\n// Bottom Right\nif( vUvB.x > cornerBR.x && vUvB.y < cornerBR.y ) {\n\n\t\tif( borderWidth.y + borderWidth.z > 0.0 ){\n\n\t\t\tfloat borderFactor = getEllipticFactor( vUvB, cornerBR, ( 1.0 - cornerBR.x ) - borderWidth.y,  cornerBR.y - borderWidth.z );\n\t\t\tfloat step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );\n\t\t\tdiffuseColor = mix( diffuseColor, borderColor, step );\n\n\t\t}\n\n\t\tfloat radiusFactor = getEllipticFactor( vUvB, cornerBR, 1.0 - cornerBR.x, cornerBR.y );\n\t\tfloat alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );\n\t\tdiffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );\n\n}\n\n",Rt="\n\n// To be removed - required for both border and background\nuniform vec3 frameSize;\nuniform vec2 textureSize;\n\n",Ct="\n\n#ifdef USE_MAP\n\nvec4 sampleTexture() {\n\n\tvec2 uv = vUv;\n\n\t// default stretch\n\t#if BACKGROUND_MAPPING != 0\n\n\tfloat textureRatio = textureSize.x / textureSize.y;\n\tfloat panelRatio = frameSize.x / frameSize.y;\n\tfloat ratio = panelRatio / textureRatio;\n\tfloat ratio2 = textureRatio / panelRatio;\n\n\t\t// contain\n\t\t#if BACKGROUND_MAPPING == 1\n\t\tif ( textureRatio < panelRatio ) { // repeat on X\n\t\t\tfloat newX = uv.x * ratio;\n\t\t\tnewX += 0.5 - 0.5 * ratio;\n\t\t\tuv.x = newX;\n\t\t} else { // repeat on Y\n\t\t\tfloat newY = uv.y * ratio2;\n\t\t\tnewY += 0.5 - 0.5 * ratio2;\n\t\t\tuv.y = newY;\n\t\t}\n\t\t#else\n\t\t// cover\n\t\tif ( textureRatio < panelRatio ) { // stretch on Y\n\t\t\tfloat newY = uv.y * ratio2;\n\t\t\tnewY += 0.5 - 0.5 * ratio2;\n\t\t\tuv.y = newY;\n\t\t} else { // stretch on X\n\t\t\tfloat newX = uv.x * ratio;\n\t\t\tnewX += 0.5 - 0.5 * ratio;\n\t\t\tuv.x = newX;\n\t\t}\n\n\t\t#endif\n\n\t#endif\n\n\treturn texture2D( map, uv );\n\n}\n#endif\n",It="\n#ifdef USE_MAP\n\n\tvec4 textureSample = sampleTexture();\n\tdiffuseColor *= textureSample;\n\n#endif\n",Mt={msdfAlphaglyphParsVertexGlsl:De,msdfAlphaglyphVertexGlsl:Ee,msdfOffsetglyphVertexGlsl:He,msdfAlphaglyphParsFragmentGlsl:Le,msdfAlphaglyphFragmentGlsl:Ge,frameBorderParsVertexGlsl:St,frameBorderVertexGlsl:Vt,frameCommonParsFragmentGlsl:Rt,frameBorderParsFragmentGlsl:kt,frameBorderFragmentGlsl:Ut,frameBackgroundParsFragmentGlsl:Ct,frameBackgroundFragmentGlsl:It},Bt=`\n// Would be automatic on three materials and from USE_UV\n#ifdef USE_MAP\nvarying vec2 vUv;\n#endif\n\n${St}\n\n#include <clipping_planes_pars_vertex>\n\nvoid main() {\n\n\t#ifdef USE_MAP\n\tvUv = uv;\n\t#endif\n\n\t${Vt}\n\n\tvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\n\tgl_Position = projectionMatrix * mvPosition;\n\n\t#include <clipping_planes_vertex>\n\n}\n`,Pt=`\n\n// Basic\nuniform vec3 diffuse;\nuniform float opacity;\n\n#ifdef USE_ALPHATEST\n\tuniform float alphaTest;\n#endif\n\n${Rt}\n\n${kt}\n\n\n#ifdef USE_MAP\nvarying vec2 vUv;\nuniform sampler2D map;\n#endif\n\n${Ct}\n\n#include <clipping_planes_pars_fragment>\n\nvoid main() {\n\n\tvec4 diffuseColor = vec4( diffuse, opacity );\n\n\t// map\n\t${It}\n\n\t${Ut}\n\n\t#ifdef USE_ALPHATEST\n\n\tif ( diffuseColor.a < alphaTest ) discard;\n\n\t#endif\n\n\t// output\n\tgl_FragColor = diffuseColor;\n\n\n\t#include <clipping_planes_fragment>\n}\n`;class Tt{static get mediation(){return Ot}static ensureMaterialOptions(e){e.transparent=!0,e.alphaTest=e.alphaTest||.02}static ensureDefines(e){e.defines||(e.defines={})}static ensureUserData(e,t){e.userData.borderColor={value:null},e.userData.borderRadius={value:new _.Vector4(0,0,0,0)},e.userData.cornerTL={value:new _.Vector2(0,1)},e.userData.cornerTR={value:new _.Vector2(1,1)},e.userData.cornerBR={value:new _.Vector2(1,0)},e.userData.cornerBL={value:new _.Vector2(0,0)},e.userData.borderWidth={value:new _.Vector4(0,0,0,0)},e.userData.borderOpacity={value:null},e.userData.frameSize={value:new _.Vector3(1,1,1)},e.userData.textureSize={value:new _.Vector2(1,1)}}static bindUniformsWithUserData(e,t){e.uniforms.borderColor=t.userData.borderColor,e.uniforms.borderRadius=t.userData.borderRadius,e.uniforms.cornerTL=t.userData.cornerTL,e.uniforms.cornerTR=t.userData.cornerTR,e.uniforms.cornerBR=t.userData.cornerBR,e.uniforms.cornerBL=t.userData.cornerBL,e.uniforms.borderWidth=t.userData.borderWidth,e.uniforms.borderOpacity=t.userData.borderOpacity,e.uniforms.frameSize=t.userData.frameSize,e.uniforms.textureSize=t.userData.textureSize}static injectShaderChunks(e){Tt.injectVertexShaderChunks(e),Tt.injectFragmentShaderChunks(e)}static injectVertexShaderChunks(e){e.vertexShader=e.vertexShader.replace("#include <uv_pars_vertex>","#include <uv_pars_vertex>\n"+St),e.vertexShader=e.vertexShader.replace("#include <uv_vertex>","#include <uv_vertex>\n"+Vt)}static injectFragmentShaderChunks(e){e.fragmentShader=e.fragmentShader.replace("#include <map_pars_fragment>","#include <map_pars_fragment>\n"+Ct),e.fragmentShader=e.fragmentShader.replace("#include <map_pars_fragment>","#include <map_pars_fragment>\n"+kt),e.fragmentShader=e.fragmentShader.replace("#include <map_pars_fragment>","#include <map_pars_fragment>\n"+Rt),e.fragmentShader=e.fragmentShader.replace("#include <map_fragment>",It),e.fragmentShader=e.fragmentShader.replace("#include <alphamap_fragment>",Ut+"\n#include <alphamap_fragment>")}}const Ot={clippingPlanes:{m:"clippingPlanes"},backgroundAlphaTest:{m:"alphaTest",t:$e},backgroundSide:{m:"side"},backgroundImage:{m:"map"},backgroundColor:{m:"color"},backgroundOpacity:{m:"opacity"},backgroundSize:{m:"computedBackgroundSize",t:function(e,t,i){!function(e,t,i){e.defines[t]&&e.defines[t]===i||(e.defines[t]=i,e.needsUpdate=!0)}(e,"BACKGROUND_MAPPING",i=["stretch","contain","cover"].indexOf(i))}},borderWidth:{m:"borderWidth",t:Xe},borderColor:{m:"borderColor",t:Xe},cornerTL:{m:"cornerTL",t:Xe},cornerTR:{m:"cornerTR",t:Xe},cornerBR:{m:"cornerBR",t:Xe},cornerBL:{m:"cornerBL",t:Xe},borderOpacity:{m:"borderOpacity",t:Xe},size:{m:"frameSize",t:Xe},tSize:{m:"textureSize",t:Xe}};class Ft extends _.ShaderMaterial{static get mediation(){return Tt.mediation}constructor(){super({uniforms:{alphaTest:{value:.02},map:{value:null},diffuse:{value:new _.Color(16777215)},opacity:{value:1},borderColor:{value:new _.Color(0)},borderOpacity:{value:0},borderRadius:{value:new _.Vector4(0,0,0,0)},cornerTL:{value:new _.Vector2(0,1)},cornerTR:{value:new _.Vector2(1,1)},cornerBR:{value:new _.Vector2(1,0)},cornerBL:{value:new _.Vector2(0,0)},borderWidth:{value:new _.Vector4(0,0,0,0)},frameSize:{value:new _.Vector3(1,1,1)},textureSize:{value:new _.Vector2(1,1)}},side:_.FrontSide,transparent:!0,clipping:!0,vertexShader:Bt,fragmentShader:Pt,extensions:{derivatives:!0}}),this.defines.USE_ALPHATEST="",this.needsUpdate=!0}set map(e){this.uniforms.map.value=e,e?void 0===this.defines.USE_UV&&(this.defines.USE_UV="",this.needsUpdate=!0):void 0!==this.defines.USE_UV&&(delete this.defines.USE_UV,this.needsUpdate=!0),this.needsUpdate=!0}get map(){return this.uniforms.map.value}get alphaTest(){return this.uniforms.alphaTest.value}set alphaTest(e){this.uniforms.alphaTest.value=e}set opacity(e){this.uniforms&&(this.uniforms.opacity.value=e)}get opacity(){return this.uniforms.opacity.value}get color(){return this.uniforms.diffuse.value}set color(e){this.uniforms.diffuse.value=e}}class zt extends o{constructor(){super("children",null,!1),this._uis=[],this._boxes=[]}update(e,t){this._compute(e),e._layouter._needsUpdate=!0,e._renderOrder._needsUpdate=!0}process(e){this._compute(e),e._flexDirection._needsProcess=!0,e._layouter._needsProcess=!0,e._overflow._needsRender=!0}_compute(e){this._uis=e.children.filter((e=>e.visible&&e.isUI)),this._boxes=this._uis.filter((e=>e.isBox)).sort(this._sortOrder)}dispose(){this._uis=null,this._boxes=null}_sortOrder=(e,t)=>e._order._value<t._order._value?-1:e._order._value>t._order._value?1:this._uis.indexOf(e)<this._uis.indexOf(t)?-1:1}class At extends o{constructor(){super("bounds",null,!1),this._size=new _.Vector3(1,1,1),this._offsetWidth=0,this._offsetHeight=0,this._innerWidth=0,this._innerHeight=0,this._centerX=.5,this._centerY=.5,this._needsProcess=!0}setReferenceWidth(e,t){const i=e._width,n=e._padding._value,s=e._borderWidth._value,r=e._margin._value,o=t*(i._auto?1:i._value)-(r.y+r.w);S(o,this._offsetWidth)||(this._offsetWidth=o,this._innerWidth=this._offsetWidth-(n.y+n.w+s.y+s.w),this._centerX=Wt(e),this._propagateWidth(e),this._triggerCascadingDependencies(e))}setReferenceHeight(e,t){const i=e._height,n=e._padding._value,s=e._borderWidth._value,r=e._margin._value,o=t*(i._auto?1:i._value)-(r.x+r.z);S(o,this._offsetHeight)||(this._offsetHeight=o,this._innerHeight=this._offsetHeight-(n.x+n.z+s.x+s.z),this._centerY=Dt(e),this._propagateHeight(e),this._triggerCascadingDependencies(e))}setChildrenWidth(e,t){const i=e._padding._value,n=e._borderWidth._value;this._innerWidth=t,this._offsetWidth=this._innerWidth+(i.y+i.w+n.y+n.w),this._centerX=Wt(e),this._propagateWidth(e),this._triggerCascadingDependencies(e)}setChildrenHeight(e,t){const i=e._padding._value,n=e._borderWidth._value;this._innerHeight=t,this._offsetHeight=this._innerHeight+(i.x+i.z+n.x+n.z),this._centerY=Dt(e),this._propagateHeight(e),this._triggerCascadingDependencies(e)}update(e,t){const i=e._padding._value,n=e._borderWidth._value,s=e._width;s._auto||s._relative||("content-box"===e._boxSizing._value?(this._innerWidth=s._value,this._offsetWidth=this._innerWidth+i.y+i.w+n.y+n.w):(this._offsetWidth=s._value,this._innerWidth=this._offsetWidth-(i.y+i.w+n.y+n.w)),this._centerX=Wt(e),this._needsProcess=!0,this._propagateWidth(e),this._triggerCascadingDependencies(e));const r=e._height;r._auto||r._relative||("content-box"===e._boxSizing._value?(this._innerHeight=r._value,this._offsetHeight=this._innerHeight+i.x+i.z+n.x+n.z):(this._offsetHeight=r._value,this._innerHeight=this._offsetHeight-(i.x+i.z+n.x+n.z)),this._centerY=Dt(e),this._needsProcess=!0,this._propagateHeight(e),this._triggerCascadingDependencies(e))}render(e){this._size.x=this._offsetWidth,this._size.y=this._offsetHeight,e._renderer._needsRender=!0}output(e){e.size=this._size}process(e){e._overflow._needsRender=!0}_computeChildrenSideWidth(e){return function(e){return e._children._boxes.reduce(((e,t)=>{const i=t._margin._value;return e+(t._bounds._offsetWidth+i.y+i.w)}),0)}(e)}_computeChildrenSideHeight(e){return function(e){return e._children._boxes.reduce(((e,t)=>{const i=t._margin._value;return e+(t._bounds._offsetHeight+i.x+i.z)}),0)}(e)}_propagateWidth(e){for(let t=0;t<e._children._boxes.length;t++){const i=e._children._boxes[t];i._width._relative&&i._bounds.setReferenceWidth(i,this._innerWidth)}}_propagateHeight(e){for(let t=0;t<e._children._boxes.length;t++){const i=e._children._boxes[t];i._height._relative&&i._bounds.setReferenceHeight(i,this._innerHeight)}}_triggerCascadingDependencies(e){e._parent._value&&(e._parent._value._autoSize._needsProcess=!0),e._flexDirection._needsProcess=!0,e._fontSize._needsProcess=!0,e._layouter._needsProcess=!0,this._needsRender=!0,e._borderWidth._needsRender=!0,e._borderRadius._needsRender=!0,e._overflow._needsRender=!0}}function Wt(e){const t=e._padding._value,i=e._borderWidth._value;return(t.w+i.w-(t.y+i.y))/2}function Dt(e){const t=e._padding._value,i=e._borderWidth._value,n=t.x+i.x;return(t.z+i.z-n)/2}class Et extends he{constructor(){super(),this._allowsInherit=!1,this._needsUpdate=!0,this._process=this.emptyStrategyLogic,this._childAlign=this.emptyStrategyLogic}computeOutputValue(e){switch(this._value=this._inheritedInput,e._flexDirection._value){case"row":case"row-reverse":switch(this._process=Nt,this._value){case"start":this._childAlign=Gt;break;case"end":this._childAlign=Lt;break;default:this._childAlign=Ht}break;case"column":case"column-reverse":switch(this._process=Xt,this._value){case"start":this._childAlign=jt;break;case"end":this._childAlign=$t;break;default:this._childAlign=Ht}}this._needsProcess=!0,e._autoSize._needsProcess=!0,e._flexDirection._needsProcess=!0,e._justifyContent._needsProcess=!0,this._needsProcess=!0,e._fontSize._needsProcess=!0,e._layouter._needsProcess=!0}process(e){this._process(e,this._childAlign);let t="center",i="center",n="center";const s=e._padding._value,r=e._borderWidth._value;t=-1!==e._flexDirection._value.indexOf("column")?"start"===this._value?i="left":"end"===this._value?i="right":"centerX":"start"===this._value?n="top":"end"===this._value?n="bottom":"centerY";let o=-(s.x-s.z)/2-(r.x-r.z)/2,a=-(s.y-s.w)/2-(r.y-r.w)/2;"left"===i?a=(s.w-s.y)/2+(r.w-r.y)/2:"right"===i&&(a=-(s.y-s.w)/2-(r.y-r.w)/2),"top"===n?o=-(s.x-s.z)/2-(r.x-r.z)/2:"bottom"===n&&(o=(s.z-s.x)/2+(r.z-r.x)/2),e._children._boxes.forEach((i=>{let n=0,s=0;"top"===t?s=-i._margin._value.x:"bottom"===t?s=i._margin._value.z:"left"===t?n=i._margin._value.w:"right"===t?n=-i._margin._value.y:"centerX"===t?n=(i._margin._value.w-i._margin._value.y)/2:"centerY"===t&&(s=(-i._margin._value.x+i._margin._value.z)/2),e._layouter._childrenPos[i.id].x+=a+n,e._layouter._childrenPos[i.id].y+=o+s}))}}function Ht(){return 0}function Lt(e,t){return-t+e._bounds._offsetHeight/2}function Gt(e,t){return t-e._bounds._offsetHeight/2}function $t(e,t){return t-e._bounds._offsetWidth/2}function jt(e,t){return-t+e._bounds._offsetWidth/2}function Xt(e,t){const i=e._bounds._innerWidth/2;e._children._boxes.forEach((n=>{e._layouter._childrenPos[n.id].x=t(n,i)}))}function Nt(e,t){const i=e._bounds._innerHeight/2;e._children._boxes.forEach((n=>{e._layouter._childrenPos[n.id].y=t(n,i)}))}class Yt extends _e{constructor(){super(),this._allowsInherit=!1,this._needsUpdate=!0,this._offset=0,this._reverse=1,this._process=this.emptyStrategyLogic}computeOutputValue(e){switch(this._value=this._inheritedInput,this._value){case"row":this._process=Kt;break;case"row-reverse":this._process=qt;break;case"column":this._process=Jt;break;case"column-reverse":this._process=Qt}e._justifyContent._needsUpdate||e._justifyContent.computeOutputValue(e),e._alignItems._needsUpdate||e._alignItems.computeOutputValue(e),this._needsProcess=!0}process(e){switch(this._value){case"row":this._offset=-e._bounds._innerWidth/2;break;case"row-reverse":this._offset=e._bounds._innerWidth/2;break;case"column":this._offset=e._bounds._innerHeight/2;break;case"column-reverse":this._offset=-e._bounds._innerHeight/2}this._reverse=-Math.sign(this._offset),0===this._reverse&&(this._reverse=1),this._process(e),e._justifyContent._needsProcess=!0,e._layouter._needsProcess=!0}}function Kt(e){let t=e._flexDirection._offset;const i=e._flexDirection._reverse,n=e._children._boxes;for(let s=0;s<n.length;s++){const r=n[s],o=r.id,a=r._bounds._offsetWidth;t+=r._margin._value.w*i;const u=e._layouter._childrenPos[o];u.x=t+a/2*i,u.y=0,t+=i*(a+r._margin._value.y)}}function qt(e){let t=e._flexDirection._offset;const i=e._flexDirection._reverse,n=e._children._boxes;for(let s=0;s<n.length;s++){const r=n[s],o=r.id,a=r._bounds._offsetWidth;t+=r._margin._value.y*i;const u=e._layouter._childrenPos[o];u.x=t+a/2*i,u.y=0,t+=(a+r._margin._value.w)*i}}function Jt(e){let t=e._flexDirection._offset;const i=e._flexDirection._reverse,n=e._children._boxes;for(let s=0;s<n.length;s++){const r=n[s],o=r.id,a=r._bounds._offsetHeight;t+=r._margin._value.x*i;const u=e._layouter._childrenPos[o];u.x=0,u.y=t+a/2*i,t+=(a+r._margin._value.z)*i}}function Qt(e){let t=e._flexDirection._offset;const i=e._flexDirection._reverse,n=e._children._boxes;for(let s=0;s<n.length;s++){const r=n[s],o=r.id,a=r._bounds._offsetHeight;t+=r._margin._value.z*i;const u=e._layouter._childrenPos[o];u.x=0,u.y=t+a/2*i,t+=(a+r._margin._value.x)*i}}class Zt extends ge{constructor(e){super("justifyContent",e,!0),this._allowsInherit=!1,this._needsUpdate=!0,this._computeOffset=this.emptyStrategyLogic,this._computeMargin=this.emptyStrategyLogic,this._process=this.emptyStrategyLogic}computeOutputValue(e){switch(this._value=this._inheritedInput,e._flexDirection._value){case"column-reverse":case"column":this._process=ti.bind(this);break;case"row-reverse":case"row":this._process=ei.bind(this)}switch(this._value){case"end":this._computeOffset=ni,this._computeMargin=ri;break;case"center":this._computeOffset=si,this._computeMargin=ri;break;case"start":this._computeOffset=ii,this._computeMargin=ri;break;case"space-between":this._computeOffset=ii,this._computeMargin=oi;break;case"space-around":this._computeOffset=ii,this._computeMargin=ui;break;case"space-evenly":this._computeOffset=ii,this._computeMargin=ai}e._flexDirection._needsProcess=!0}process(e){this._process(e),e._alignItems._needsProcess=!0}}function ei(e){const t=e._flexDirection._offset,{usedDirectionSpace:i,remainingSpace:n}=function(e){const t=e._bounds._computeChildrenSideWidth(e);return{usedDirectionSpace:t,remainingSpace:e._bounds._innerWidth-t}}(e),s=2*t-i*Math.sign(t),r=this._computeOffset(s),o=this._computeMargin(e,n,e._flexDirection._reverse);e._children._boxes.forEach(((t,i)=>{e._layouter._childrenPos[t.id].x-=r-o[i]}))}function ti(e){const t=e._flexDirection._offset,{usedDirectionSpace:i,remainingSpace:n}=function(e){const t=e._bounds._computeChildrenSideHeight(e);return{usedDirectionSpace:t,remainingSpace:e._bounds._innerHeight-t}}(e),s=2*t-i*Math.sign(t),r=this._computeOffset(s),o=this._computeMargin(e,n,e._flexDirection._reverse);e._children._boxes.forEach(((t,i)=>{e._layouter._childrenPos[t.id].y-=r-o[i]}))}function ii(e){return 0}function ni(e){return e}function si(e){return e/2}function ri(e,t=0,i=1){return Array(e._children._boxes.length).fill(0)}function oi(e,t=0,i=1){const n=e._children._boxes.length,s=Array(n).fill(0);if(t>0&&n>1){const e=t/(n-1)*i;s[0]=0;for(let t=1;t<n;t++)s[t]=e*t}return s}function ai(e,t=0,i=1){const n=e._children._boxes.length,s=Array(n).fill(0);if(t>0){const e=t/(n+1)*i;for(let t=0;t<n;t++)s[t]=e*(t+1)}return s}function ui(e,t=0,i=1){const n=e._children._boxes.length,s=Array(n).fill(0);if(t>0){const e=t/n*i,r=e/2;s[0]=r;for(let t=1;t<n;t++)s[t]=r+e*t}return s}class hi extends _.Mesh{constructor(e){const t=new _.PlaneGeometry(1,1,e._segments.value,e._segments.value),i=new _.BufferAttribute(new Float32Array(t.getAttribute("uv").array),2);t.setAttribute("uvB",i).name="uvB",super(t,e.backgroundMaterial),this.name="UIBackgroundBox"}}class li extends o{constructor(){super("renderer")}render(e){e._backgroundMesh||e.setBackgroundMesh(new hi(e)),e.performAfterUpdate()}}class di extends ye{constructor(){super("position")}update(e,t){super.update(e,t),this._needsProcess=!0}}class ci extends o{constructor(){super("autosize"),this._needsProcess=!0}process(e){e._width._auto&&function(e){e._bounds.setChildrenWidth(e,function(e){switch(e._flexDirection._value){case"row":case"row-reverse":return function(e){let t=0;for(const i of e._children._boxes){if("static"!==i._position._value)continue;const e=i._margin._value;t+=i._bounds._offsetWidth+e.y+e.w}return t}(e);case"column":case"column-reverse":return function(e){let t=0;for(const i of e._children._boxes){if("static"!==i._position._value)continue;const e=i._margin._value,n=i._bounds._offsetWidth+e.y+e.w;n>t&&(t=n)}return t}(e)}}(e))}(e),e._height._auto&&function(e){e._bounds.setChildrenHeight(e,function(e){switch(e._flexDirection._value){case"row":case"row-reverse":return function(e){let t=0;for(const i of e._children._boxes){if("static"!==i._position._value)continue;const e=i._margin._value,n=i._bounds._offsetHeight+e.x+e.z;n>t&&(t=n)}return t}(e);case"column":case"column-reverse":return function(e){let t=0;for(const i of e._children._boxes){if("static"!==i._position._value)continue;const e=i._margin._value;t+=i._bounds._offsetHeight+e.x+e.z}return t}(e)}}(e))}(e);const t="stretch"===e._alignItems._value,i=t&&-1!==e._flexDirection._value.indexOf("column"),n=t&&!i;for(const t of e._children._boxes)(t._width._auto&&i||t._width._relative)&&t._bounds.setReferenceWidth(t,e._bounds._innerWidth),(t._height._auto&&n||t._height._relative)&&t._bounds.setReferenceHeight(t,e._bounds._innerHeight)}}class _i extends xt{constructor(e,t){_i.definePropertiesValues(e,t),super(e,t),_i.init(this)}bindBackgroundMeshProperties(){this._bounds._size=this._backgroundMesh.scale,this._bounds._needsProcess=!0}unbindBackgroundMeshProperties(){this._bounds._size=new _.Vector3(1,1,1),this._bounds._needsProcess=!0}static definePropertiesValues(e,t){e.children||(e.children=zt),e.bounds||(e.bounds=At),e.flexDirection||(e.flexDirection=Yt),e.justifyContent||(e.justifyContent=Zt),e.alignItems||(e.alignItems=Et),e.position||(e.position=di),e.autoSize||(e.autoSize=ci),e.renderer||(e.renderer=li),t.fontSide||(t.fontSide=0),t.invertAlpha||(t.invertAlpha=!1),t.fontCastShadow||(t.fontCastShadow=!1),t.fontReceiveShadow||(t.fontReceiveShadow=!1),t.backgroundCastShadow||(t.backgroundCastShadow=!1),t.backgroundReceiveShadow||(t.backgroundReceiveShadow=!1),t.uiType||(t.uiType="block")}static init(e){Object.defineProperties(e,{isBox:{configurable:!1,enumerable:!0,value:!0}}),e.backgroundMaterial=new Ft,e._renderer.render(e),e._backgroundMesh.visible=!1}}class pi extends Array{constructor(...e){super(...e),this.width=0,this.lineBase=0,this.lineHeight=0,this.y=0}}class fi extends o{constructor(){super("layouter",null,!1),this._needsUpdate=!0,this._childrenPos={}}update(e,t){this._childrenPos={};for(const t of e._children._boxes)"static"===t._position._value&&(this._childrenPos[t.id]=t.position)}process(e){}}class gi extends _i{constructor(e={}){const t={};gi.definePropertiesValues(t,e),super(t,e),gi.init(this)}add(e){const t=[];for(let e=0;e<arguments.length;e++){const i=arguments[e];!i.isUI||i.isBox?t.push(i):console.warn("Block element can only contain Box elements.",i)}return super.add(...t)}static definePropertiesValues(e,t){e.layouter=fi}static init(e){Object.defineProperties(e,{isBlock:{configurable:!1,enumerable:!0,value:!0}})}}class vi extends o{constructor(){super("textContent",null,!1)}update(e,t){e._glyphs._needsUpdate=!0,e._whiteSpace._needsProcess=!0}}class mi extends o{constructor(){super("inlines",null,!1),this._value=null}process(e){if(this._value=e._glyphs._value.map((e=>e.asInlineGlyph())),this._value.length){this._value[0].paddingLeft=e._padding._value.w,this._value[0].marginLeft=e._margin._value.w;const t=this._value.length-1;this._value[t].paddingRight=e._padding._value.y,this._value[t].marginRight=e._margin._value.y}e._verticalAlign._needsProcess=!0,e._fontSize._needsProcess=!0,e._lineBreak._needsProcess=!0,e._fontKerning._needsProcess=!0,e._layouter._needsProcess=!0}get value(){return this._value}}class bi extends o{constructor(){super("glyphs",null,!1),this._needsUpdate=!1,this._value=null}process(e){e._font._fontVariant&&e._font._fontVariant.isReady&&(this._value=e._whiteSpace._whiteSpacedContent.split("").map((t=>e._font._fontVariant.getTypographicGlyph(t))),this._value&&(e._inlines._needsProcess=!0))}get value(){return this._value}}class yi extends D{constructor(e){super("color",e,!1),this._input=e,this.output=this._outputValue}computeOutputValue(e){"inherit"===this._input?this._value.set(this.getInheritedInput(e)):this._value.set(this._input)}}class xi extends o{constructor(e="- ,.:?!\n"){super("lineBreak",e,!0),this._newLineBreakability=null}update(e,t){this._needsProcess=!0}process(e){const t=e._whiteSpace._newLineBreakability;if(e._inlines._value)for(let i=0;i<e._inlines._value.length;i++){const n=e._inlines._value[i],s=n.char;let r=null;void 0!==s&&("nowrap"!==t&&(this._value.includes(s)||s.match(/\s/g))&&(r="possible"),s.match(/\n/g)&&(r=t)),n.lineBreak=r}}get value(){return this._value}}class wi extends o{constructor(){super("layouter",null,!1),this._value=null}update(e,t){this._value=e._parent.find((e=>e.isUI&&e.isText)),this._needsProcess=!0}process(e){this._value&&(this._value._layouter._needsProcess=!0)}}class Si extends D{constructor(e){super("backgroundColor",e,!1),this._allowsInherit=!1,this._input="transparent"}computeOutputValue(e){"inherit"===this._input?this._value.set(this.getInheritedInput(e)):this._value.set(this._input)}}class Vi extends Re{constructor(){super(),this._allowsInherit=!1,this.computeOutputValue=this._computeFromInherited}_computeFromInherited(e){super._computeFromInherited(e),e._font._needsUpdate=!0}}class ki extends Me{constructor(e){super(e)}computeOutputValue(e){const t=this.getInheritedInput(e),i=Ui[t];this._value=i||t,e._font._needsUpdate=!0}}const Ui={};class Ri extends st{constructor(){super("fontFamily","inherit",!0),this._input="inherit",this._needsUpdate=!0,this._allowsInherit=!1}computeOutputValue(e){let t=this._inheritedInput;if("inherit"===t&&(t=this.getInheritedInput(e)),t instanceof Ze)this._value=t,e._font._needsUpdate=!0;else if("string"==typeof t){const i=nt.getFontFamily(t);i?(this._value=i,e._font._needsUpdate=!0):console.warn(`(.style) fontFamily, the font '${t}' is not registered. Aborted.`)}else console.warn("(.style) fontFamily requires a registered fontFamily instance, or the id of a registered fontFamily."),console.warn("If you want to set a specific font, please use .font property instead.")}get value(){return this._value}}class Ci extends ot{constructor(){super(),this._allowsInherit=!1,this.computeOutputValue=this._computeFromInherited,this._whiteSpacedContent="",this._stringCollapser=this.emptyStrategyLogic,this._inlineCollapser=this.emptyStrategyLogic,this._inlineWrapper=this.emptyStrategyLogic}_computeFromInherited(e){switch(super._computeFromInherited(e),this._newLineBreakability=Mi(this._value),this._value){case"nowrap":case"normal":this._stringCollapser=Bi;break;case"pre-line":this._stringCollapser=Pi;break;default:this._stringCollapser=Ti}switch(this._value){case"pre-line":case"nowrap":case"normal":this._inlineCollapser=Wi;break;case"pre-wrap":this._inlineCollapser=Ai;break;default:this._inlineCollapser=Di}switch(this._value){case"pre-line":case"pre-wrap":case"normal":this._inlineWrapper=Oi;break;case"pre":this._inlineWrapper=Fi;break;default:this._inlineWrapper=zi}this._needsProcess=!0}process(e){e.isInline&&!e.isInlineBlock&&(this._whiteSpacedContent=this._stringCollapser(e._textContent._value),e._glyphs._needsProcess=!0)}}const Ii={"\t":"\t","\n":"\n","\r":"\r"," ":" "},Mi=function(e){switch(e){case"pre":case"pre-wrap":case"pre-line":return"mandatory"}return null};function Bi(e){return Pi(e.replace(/\n/g," "))}function Pi(e){return e.replace(/[ ]{2,}/g," ")}function Ti(e){return e}function Oi(e,t,i,n){const s=e[t];if("mandatory"===s.lineBreak)return!0;if(i+s.xadvance+s.xoffset+s.kerning>n.INNER_WIDTH)return!0;const r=Li(e,t,n);return function(e,t,i,n){return!(!e||!e.char)&&(!(t+i<n.INNER_WIDTH)&&n.BREAKON.indexOf(e.char)>-1)}(e[t-1],i,r,n)}function Fi(e,t,i,n){return"mandatory"===e[t].lineBreak}function zi(){return!1}function Ai(e){if(!e[0])return 0;const t=e[0],i=e[e.length-1];return t.char&&"\n"===t.char&&e.length>1&&Hi([t],e[1]),i.char&&"\n"===i.char&&e.length>1&&Ei([i],e[e.length-2]),t.offsetX}function Wi(e){if(!e[0])return 0;let t,i=[];for(let n=0;n<e.length;n++){const s=e[n];if(!(s.char&&Ii[s.char]&&e.length>n))break;i.push(s),t=e[n+1]}Hi(i,t),i=[],t=null;for(let n=e.length-1;n>0;n--){const s=e[n];if(!(s.char&&Ii[s.char]&&n>0))break;i.push(s),t=e[n-1]}return Ei(i,t),e[0].offsetX}function Di(e){return e[0]?e[0].offsetX:0}function Ei(e,t){if(t)for(let i=0;i<e.length;i++){const n=e[i];n.fontFactor=0,n.offsetX=t.offsetX+t.cumulativeWidth,n.cumulativeWidth=0}}function Hi(e,t){if(t)for(let i=0;i<e.length;i++){const n=e[i];n.fontFactor=0,n.offsetX=t.offsetX,n.cumulativeWidth=0}}function Li(e,t,i,n){if(n=n||0,!e[t])return n;const s=e[t];return s.lineBreak?n+s.xadvance:Li(e,t+1,i,n+s.xadvance+s.xoffset+s.kerning+i.LETTERSPACING)}class Gi extends ht{constructor(){super(),this._input="inherit",this._allowsInherit=!1,this.computeOutputValue=this._computeFromInherited}_computeFromInherited(e){super._computeFromInherited(e),e._fontSize._needsProcess=!0,e._layouter._needsProcess=!0}}class $i extends lt{constructor(){super(),this._allowsInherit=!1}computeOutputValue(e){e._font._fontVariant&&(e._bounds._needsProcess=!0,e._layouter._needsProcess=!0),e._margin._needsProcess=!0}process(e){if(!e._font._fontVariant||!e._font._fontVariant.isReady)return;const t=this._value/e._font._fontVariant.typographic.size,i=e._inlines._value;for(let e=0;e<i.length;e++){const n=i[e];n.resetOffsets(),n.fontSize=this._value,n.fontFactor=t}}get value(){return this._value}}class ji extends dt{constructor(){super("segments",1,!1),this._notInheritedValue=void 0}update(e,t){this._notInheritedValue=this._value,"inherit"===this._notInheritedValue&&(this._notInheritedValue=this.getInheritedInput(e)),e._layouter._needsUpdate=!0}set value(e){this._value!==e&&(this._value=e,this._needsUpdate=!0)}get value(){return"inherit"===this._value?this._notInheritedValue:this._value}}class Xi extends ji{constructor(){super(),this._value="inherit"}}class Ni extends _t{constructor(){super(),this._allowsInherit=!1,this.computeOutputValue=this._computeFromInherited}_computeFromInherited(e){super._computeFromInherited(e),e._parent._value._layouter._needsProcess=!1}process(e){if("none"!==this._value){const t=e._whiteSpace._whiteSpacedContent,i=e._inlines._value;for(let n=1;n<i.length;n++){const s=t[n-1]+t[n];i[n].kerning=e._font._fontVariant.getKerningAmount(s)}}}}class Yi extends o{constructor(){super("children",null,!1),this._uis=[]}update(e,t){}process(e){}_compute(e){}dispose(){}}function Ki(e){let t,i,n,s=0;for(let r=0;r<e.length;++r){const o=e[r];if(o.isInterleavedBufferAttribute)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. InterleavedBufferAttributes are not supported."),null;if(void 0===t&&(t=o.array.constructor),t!==o.array.constructor)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.array must be of consistent array types across matching attributes."),null;if(void 0===i&&(i=o.itemSize),i!==o.itemSize)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.itemSize must be consistent across matching attributes."),null;if(void 0===n&&(n=o.normalized),n!==o.normalized)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.normalized must be consistent across matching attributes."),null;s+=o.array.length}const r=new t(s);let o=0;for(let t=0;t<e.length;++t)r.set(e[t].array,o),o+=e[t].array.length;return new _.BufferAttribute(r,i,n)}class qi extends o{constructor(){super("renderer")}render(e){if(!e._inlines._value||!e._inlines._value.length)return;const t=function(e,t=!1){const i=null!==e[0].index,n=new Set(Object.keys(e[0].attributes)),s=new Set(Object.keys(e[0].morphAttributes)),r={},o={},a=e[0].morphTargetsRelative,u=new _.BufferGeometry;let h=0;for(let l=0;l<e.length;++l){const d=e[l];let c=0;if(i!==(null!==d.index))return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+l+". All geometries must have compatible attributes; make sure index attribute exists among all geometries, or in none of them."),null;for(const e in d.attributes){if(!n.has(e))return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+l+'. All geometries must have compatible attributes; make sure "'+e+'" attribute exists among all geometries, or in none of them.'),null;void 0===r[e]&&(r[e]=[]),r[e].push(d.attributes[e]),c++}if(c!==n.size)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+l+". Make sure all geometries have the same number of attributes."),null;if(a!==d.morphTargetsRelative)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+l+". .morphTargetsRelative must be consistent throughout all geometries."),null;for(const e in d.morphAttributes){if(!s.has(e))return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+l+".  .morphAttributes must be consistent throughout all geometries."),null;void 0===o[e]&&(o[e]=[]),o[e].push(d.morphAttributes[e])}if(u.userData.mergedUserData=u.userData.mergedUserData||[],u.userData.mergedUserData.push(d.userData),t){let e;if(i)e=d.index.count;else{if(void 0===d.attributes.position)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+l+". The geometry must have either an index or a position attribute"),null;e=d.attributes.position.count}u.addGroup(h,e,l),h+=e}}if(i){let t=0;const i=[];for(let n=0;n<e.length;++n){const s=e[n].index;for(let e=0;e<s.count;++e)i.push(s.getX(e)+t);t+=e[n].attributes.position.count}u.setIndex(i)}for(const e in r){const t=Ki(r[e]);if(!t)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the "+e+" attribute."),null;u.setAttribute(e,t)}for(const e in o){const t=o[e][0].length;if(0===t)break;u.morphAttributes=u.morphAttributes||{},u.morphAttributes[e]=[];for(let i=0;i<t;++i){const t=[];for(let n=0;n<o[e].length;++n)t.push(o[e][n][i]);const n=Ki(t);if(!n)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the "+e+" morphAttribute."),null;u.morphAttributes[e].push(n)}}return u}(e._inlines._value.map((t=>e._font._fontVariant.getGeometricGlyph(t,e).translate(t.offsetX,t.offsetY,0))));e.setFontMesh(new _.Mesh(t,e.fontMaterial)),e._fontMesh.renderOrder=1/0}}class Ji extends le{constructor(){super(),this._allowsInherit=!1,this._needsUpdate=!1}computeOutputValue(e){this._value=this._inheritedInput,e._layouter._needsProcess=!0}}class Qi extends mt{constructor(){super(),this._allowsInherit=!1,this._needsUpdate=!1}computeOutputValue(e){this._value=this._inheritedInput,this._needsProcess=!0,e._layouter._needsProcess=!0}process(e){e._inlines.value&&e._inlines.value.forEach((e=>{e.verticalAlign=this._value}))}}class Zi extends xt{constructor(e={}){const t={};Zi.definePropertiesValues(t,e),super(t,e),Zi.init(this)}add(e){const t=[];for(let e=0;e<arguments.length;e++){const i=arguments[e];!i.isUI||i.isInline?(t.push(i),i.position.z=.005):console.warn("Block element can only contain Box elements.",i)}return super.add(...t)}_rebuildParentUI=()=>{super._rebuildParentUI(),this._layouter._needsUpdate=!0};set textContent(e){this._textContent.value=e}get textContent(){return this._textContent._value}set invertAlpha(e){this._invertAlpha.value=e}get invertAlpha(){return this._invertAlpha._value}static definePropertiesValues(e,t){e.children||(e.children=Yi),e.textContent||(e.textContent=vi),e.glyphs||(e.glyphs=bi),e.inlines||(e.inlines=mi),e.layouter||(e.layouter=wi),e.renderer||(e.renderer=qi),e.fontFamily||(e.fontFamily=Ri),e.fontWeight||(e.fontWeight=ki),e.fontStyle||(e.fontStyle=Vi),e.fontSize||(e.fontSize=$i),e.color||(e.color=yi),e.backgroundColor||(e.backgroundColor=Si),e.lineBreak||(e.lineBreak=xi),e.letterSpacing||(e.letterSpacing=Gi),e.whiteSpace||(e.whiteSpace=Ci),e.segments||(e.segments=Xi),e.textAlign||(e.textAlign=Ji),e.verticalAlign||(e.verticalAlign=Qi),e.fontKerning||(e.fontKerning=Ni),t.uiType||(t.uiType="inline")}static init(e){Object.defineProperties(e,{isInline:{configurable:!1,enumerable:!0,value:!0}})}}class en extends Ue{constructor(){super("textContent",null,!1),this._needsUpdate=!1}set value(e){this._value!==e&&(this._value=e,this._value,this._needsUpdate=!0)}update(e,t){this._needsUpdate=!1;for(let t=e.children.length-1;t>=0;t--){const i=e.children[t];i.isUI&&(e.remove(i),i.clear())}e._children._uis=[],this._value&&e.add(new Zi({name:"anonymousInline",textContent:this._value}))}process(e){return this._needsUpdate?this._value:super.process(e)}}class tn extends Array{constructor(...e){super(...e),this.width=0,this.height=0}}class nn extends o{constructor(){super("layouter",null,!1),this._value=null}update(e,t){}process(e){let t=e._width._value;t=e._width._auto?1/0:e._bounds._innerWidth;const i=e._lineHeight._value,n=new tn(new pi);let s=0;e._children._inlines.forEach((e=>{if(!e._inlines.value)return;this._resetInlines(e);const i=e._fontSize._value,r=e._letterSpacing._value*i,o=e._whiteSpace._value,a=e._lineBreak._value,u=e._position._value,h={WHITESPACE:o,LETTERSPACING:r,BREAKON:a,INNER_WIDTH:t},l=e._whiteSpace._inlineWrapper;var d=s;"absolute"===u&&(s=0),s+=e._margin._value.w+e._padding._value.w,e._inlines.value.forEach(((e,t,i)=>{const o=n[n.length-1];if(l(i,t,s,h))return n.push(new pi(e)),e.offsetX=e.xoffset,0===e.width?void(s=0):(e.cumulativeWidth=e.xadvance+r,void(s=e.cumulativeWidth));n[n.length-1].push(e),e.offsetX=s+e.xoffset+e.kerning,e.cumulativeWidth=e.xadvance+e.kerning+r,s+=e.cumulativeWidth,o.length-1==1&&0===o[o.length-2].width&&(e.offsetX-=e.xoffset,s-=e.xoffset)})),s+=e._margin._value.y+e._padding._value.y,"absolute"===u&&(s=d)}));const r=e._whiteSpace._inlineCollapser;let o=0,a=0,u=0;n.forEach(((e,t)=>{const s=r(e);let h=0,l=0;e.forEach((e=>{h=Math.max(h,e.lineHeight),l=Math.max(l,e.lineBase),e.offsetX-=s})),e.lineHeight=h,e.lineBase=l;if(0===t?u=.5*-(h*i-h):u-=n[t-1].lineHeight*i,e.y=u,e.x=0,e.forEach((t=>{t.offsetY=u-t.anchor,t.lineHeight<e.lineHeight&&("super"===t.verticalAlign?t.offsetY+=t.lineBase/5:"sub"===t.verticalAlign?t.offsetY-=1.2*e.lineBase-t.lineBase:t.offsetY-=e.lineBase-t.lineBase)})),a+=e.lineHeight*i,e.width=0,e[0]){const t=e[e.length-1];e.width=t.offsetX+t.cumulativeWidth+t.paddingRight+t.marginRight+e[0].offsetX,o=Math.max(o,e.width)}})),n.height=a,n.width=o,this._value=n,t===1/0&&e._bounds.setChildrenWidth(e,n.width),e._height._auto&&e._bounds.setChildrenHeight(e,n.height);const h=e._parent._value;h&&(h._autoSize._needsProcess=!0,h._flexDirection._needsProcess=!0),e._inlineJustificator._needsProcess=!0,e._textAlign._needsProcess=!0,e._overflow._needsUpdate=!0}_resetInlines(e){e._fontSize.process(e)}}class sn extends le{constructor(){super(),this._allowsInherit=!1,this._needsUpdate=!0}computeOutputValue(e){this._value=this._inheritedInput,this._needsProcess=!0}process(e){!function(e){const t=e._layouter._value,i=e._textAlign._value,n=e._bounds._innerWidth;for(let i=0;i<t.length;i++){const n=t[i],s=e._padding._value,r=e._borderWidth._value,o=rn(e,n,i===t.length-1,s),a=(-s.w+s.y)/2+(-r.w+r.y)/2;n.x+=o;for(let e=0;e<n.length;e++)n[e].offsetX+=o-a}if(0===i.indexOf("justify"))for(let e=0;e<t.length;e++){const s=t[e];if(-1!==i.indexOf("-")&&e===t.length-1)return;const r=n-s.width;if(r<=0)return;let o=0;for(let e=1;e<s.length-1;e++)o+=" "===s[e].char?1:0;const a=r/o;let u=1;"justify-right"===i&&(s.reverse(),u=-1);let h=0;for(let e=1;e<=s.length-1;e++){const t=s[e];t.offsetX+=h*u,h+=" "===t.char?a:0}"justify-right"===i&&s.reverse()}}(e),e._renderer._needsRender=!0}}function rn(e,t,i,n){switch(e._textAlign._value){case"justify-left":case"justify":case"left":return-e._bounds._innerWidth/2+n.w;case"justify-right":case"right":return-t.width+e._bounds._innerWidth/2-n.y;case"center":return-t.width/2;case"justify-center":return i?-t.width/2:-e._bounds._innerWidth/2+n.w;default:console.warn(`textAlign: '${e._textAlign._value}' is not valid`)}}class on extends _e{constructor(){super(),this._value=this._input="column",this._allowsInherit=!1,this._needsUpdate=!0}computeOutputValue(e){this._value=this._inheritedInput}}class an extends rt{constructor(){super(),this._allowsInherit=!1,this.computeOutputValue=this._computeFromInherited}}class un extends _t{constructor(){super(),this._value=this._input=this.getDefaultValue(),this._allowsInherit=!1,this.computeOutputValue=this._computeFromInherited}_computeFromInherited(e){super._computeFromInherited(e)}}class hn extends At{constructor(){super(),this._innerWidth=1/0,this._innerHeight=0}}class ln extends o{constructor(){super("children",null,!1),this._uis=[],this._inlines=[],this._boxes=[]}update(e,t){this._compute(e),this._needsProcess=!0}process(e){this._compute(e),e._overflow._needsRender=!0}_compute(e){this._uis=e.children.filter((e=>e.visible&&e.isUI)),this._inlines=this._uis.filter((e=>e.isInline)).sort(this._sortOrder)}dispose(){this._inlines=null}_sortOrder=(e,t)=>e._order._value<t._order._value?-1:e._order._value>t._order._value?1:this._uis.indexOf(e)<this._uis.indexOf(t)?-1:1}class dn extends o{constructor(){super("autosize")}process(e){if(e._layouter._value&&e._layouter._value.length){const t=e._layouter._value,i=e._padding._value,n=e._borderWidth._value;e._width._auto&&e._bounds.setOffsetWidth(e,t.width+i.w+i.y+n.w+n.y),e._height._auto&&e._bounds.setOffsetHeight(e,t.height+i.x+i.z+n.x+n.z)}}}class cn extends li{constructor(){super("renderer"),this._needsUpdate=!1}render(e){super.render(e);for(const t of e._children._inlines)t._renderer.render(t);e.performAfterUpdate()}}class _n extends _i{constructor(e={},t={}){_n.definePropertiesValues(t,e),super(t,e),_n.init(this)}add(e){const t=[];let i=!1;for(let e=0;e<arguments.length;e++){const n=arguments[e];!n.isUI||n.isInline?(n.isInline&&(i=!0),t.push(n)):console.warn("Block element can only contain Box elements.",n)}return t.length>0&&super.add(...t),i&&(this._children._needsUpdate=!0,this._layouter._needsProcess=!0),this}set textContent(e){this._textContent.value=e}get textContent(){return super.textContent}set invertAlpha(e){this._invertAlpha.value=e}get invertAlpha(){return this._invertAlpha._value}get lines(){return this._layouter._value}static definePropertiesValues(e,t){e.flexDirection=on,e.justifyContent=ge,e.alignItems=he,e.bounds=hn,e.autoSize=dn,e.renderer=cn,e.children||(e.children=ln),e.textContent||(e.textContent=en),e.layouter||(e.layouter=nn),e.lineHeight||(e.lineHeight=an),e.textAlign||(e.textAlign=sn),e.whiteSpace||(e.whiteSpace=Ci),e.fontKerning||(e.fontKerning=un),e.segments||(e.segments=ji),t.width||(t.width="100%"),t.fontSide||(t.fontSide=0)}static init(e){Object.defineProperties(e,{isText:{configurable:!1,enumerable:!0,value:!0}})}}class pn extends o{constructor(){super("inlines",null,!1),this._value=[]}process(e){this._value[0].paddingLeft=e._padding._value.w,this._value[0].marginLeft=e._margin._value.w;const t=this._value.length-1;this._value[t].paddingRight=e._padding._value.y,this._value[t].marginRight=e._margin._value.y}}class fn extends o{constructor(){super("renderer")}render(e){e._backgroundMesh||e.setBackgroundMesh(new hi(e)),e._backgroundMesh.position.x=e._inlines._value[0].offsetX+e._inlines._value[0].width/2,e._backgroundMesh.position.y=e._inlines._value[0].offsetY+e._inlines._value[0].lineBase/2,e._bounds.render(e)}}class gn extends o{constructor(){super("bounds",null,!1),this._size=new _.Vector3(1,1,1),this._offsetWidth=0,this._offsetHeight=0,this._innerWidth=0,this._innerHeight=0}update(e,t){this.output(t),this._needsProcess=!0}process(e){this._offsetWidth=this._innerWidth=e._inlines._value[0].width,this._offsetHeight=this._innerHeight=e._inlines._value[0].height,this._needsRender=!0,e._borderWidth._needsRender=!0,e._borderRadius._needsRender=!0}render(e){this._size.x=this._offsetWidth,this._size.y=this._offsetHeight}output(e){e.size=this._size}}class vn extends D{constructor(){super("backgroundColor","inherit",!1),this._allowsInherit=!1,this._input="inherit"}computeOutputValue(e){e._backgroundMesh.visible=!("none"===this._input||"transparent"===this._input),"inherit"===this._input?this._value.set(this.getInheritedInput(e)):this._value.set(this._input)}getInheritedInput(e){return"inherit"!==this._input?this._input:e._color._value}set inline(e){this.isValidValue(e)&&e!==this._inline&&(this._input=this._inline=e,this._needsUpdate=!0)}}class mn extends D{constructor(){super("color","inherit",!1),this._input="inherit",this.output=this._outputValue}computeOutputValue(e){"inherit"===this._input?this._value.set(this.getInheritedInput(e)):this._value.set(this._input),e._backgroundColor._needsUpdate=!0,e._borderColor._needsUpdate=!0}}class bn extends D{constructor(){super("borderColor","inherit",!1),this._allowsInherit=!1,this._input="inherit"}computeOutputValue(e){"inherit"===this._input?this._value.set(this.getInheritedInput(e)):this._value.set(this._input)}getInheritedInput(e){return"inherit"!==this._input?this._input:e._color._value}}class yn extends xt{constructor(e={}){const t={};yn.definePropertiesValues(t,e),super(t,e),yn.init(this)}clear(){for(const e of this._inlines._value)e.clear();return super.clear()}bindBackgroundMeshProperties(){this._backgroundMesh.raycast=()=>{},this._bounds._size=this._backgroundMesh.scale,this._bounds._needsUpdate=!0}unbindBackgroundMeshProperties(){this._bounds._size=new _.Vector3(1,1,1),this._bounds._needsUpdate=!0}add(e){const t=[];for(let e=0;e<arguments.length;e++){const i=arguments[e];i.isUI?console.warn("ThreeMeshUI::InlineBlockElement cannot contains UI Elements.",i):(t.push(i),i.position.z=.005)}return super.add(...t)}static definePropertiesValues(e,t){e.children||(e.children=Yi),e.bounds||(e.bounds=gn),e.inlines||(e.inlines=pn),e.layouter||(e.layouter=wi),e.renderer||(e.renderer=fn),e.fontFamily||(e.fontFamily=Ri),e.fontWeight||(e.fontWeight=ki),e.fontStyle||(e.fontStyle=Vi),e.fontSize||(e.fontSize=$i),e.backgroundColor||(e.backgroundColor=vn),e.borderColor||(e.borderColor=bn),e.color||(e.color=mn),e.lineBreak||(e.lineBreak=xi),e.letterSpacing||(e.letterSpacing=Gi),e.whiteSpace||(e.whiteSpace=Ci),e.fontKerning||(e.fontKerning=_t),void 0===t.backgroundOpacity&&(t.backgroundOpacity=1),t.backgroundSize||(t.backgroundSize="cover"),t.width||(t.width="100%"),t.height||(t.height="100%"),t.boxSizing||(t.boxSizing="border-box")}static init(e){Object.defineProperties(e,{isInline:{configurable:!1,enumerable:!0,value:!0},isInlineBlock:{configurable:!1,enumerable:!0,value:!0}}),e._inlines._value=[new xn(e)],e.backgroundMaterial=new Ft,e._renderer.render(e)}}class xn extends Oe{constructor(e){super(),this._uiElement=e}get xadvance(){const e=this._uiElement._padding._value,t=this._uiElement._width;return t._relative?t._value*this._uiElement._fontSize.getInheritedInput(this._uiElement):e.w+e.y+t.value}get width(){const e=this._uiElement._width;return e._relative?e._value*this._uiElement._fontSize.getInheritedInput(this._uiElement):e.value}get height(){const e=this._uiElement._height;return e._relative?e._value*this._uiElement._fontSize.getInheritedInput(this._uiElement):e.value}get anchor(){return this.height}get lineHeight(){const e=this._uiElement._height;return e._relative?e._value*this._uiElement._fontSize.getInheritedInput(this._uiElement):e.value}get lineBase(){const e=this._uiElement._height;return e._relative?e._value*this._uiElement._fontSize.getInheritedInput(this._uiElement):e.value}clear(){this._uiElement=null}}const wn={Block:gi,Text:_n,Inline:Zi,InlineBlock:yn,MeshUIBaseElement:xt,FontLibrary:nt,update:()=>wt.update(),MSDFFontMaterialUtils:Ne,ShaderChunkUI:Mt,Behavior:class{constructor(e){this._subject=e}attach(){console.error(`Behavior::attach() - Is abstract and therefore should be overridden in ${this.constructor.name}`)}act(){throw new Error(`Behavior::act() - Is abstract and therefore should be overridden in ${this.constructor.name}`)}detach(){console.error(`Behavior::detach() - Is abstract and therefore should be overridden in ${this.constructor.name}`)}clear(){}},FontVariant:M,DefaultValues:t};void 0!==e.g&&(e.g.ThreeMeshUI=wn);console.warn("ThreeMeshUI v7.1.x - Three "+window.__THREE__)})();
\ No newline at end of file
diff --git a/build/three-mesh-ui.module.js b/build/three-mesh-ui.module.js
index 71c2875f..6cccaf60 100644
--- a/build/three-mesh-ui.module.js
+++ b/build/three-mesh-ui.module.js
@@ -36,1507 +36,1499 @@ var __webpack_exports__ = {};
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "g1": () => (/* reexport */ AlignItems_namespaceObject),
-  "gO": () => (/* reexport */ Block),
-  "km": () => (/* reexport */ ContentDirection_namespaceObject),
+  "w8": () => (/* reexport */ BaseProperty),
+  "cg": () => (/* reexport */ Behavior),
+  "gO": () => (/* reexport */ BlockElement),
+  "wb": () => (/* reexport */ DefaultValues_namespaceObject),
   "zV": () => (/* reexport */ font_FontLibrary),
-  "ol": () => (/* reexport */ InlineBlock),
-  "uM": () => (/* reexport */ JustifyContent_namespaceObject),
-  "N1": () => (/* reexport */ Keyboard),
-  "xv": () => (/* reexport */ Text),
-  "PH": () => (/* reexport */ TextAlign_namespaceObject),
-  "UH": () => (/* reexport */ Whitespace_namespaceObject),
+  "HS": () => (/* reexport */ font_FontVariant),
+  "Ec": () => (/* reexport */ InheritableProperty),
+  "gF": () => (/* reexport */ InlineElement),
+  "ol": () => (/* reexport */ InlineBlockElement),
+  "pz": () => (/* reexport */ InlineGlyph),
+  "tx": () => (/* reexport */ MSDFFontMaterialUtils),
+  "hj": () => (/* reexport */ MaterialTransformers_namespaceObject),
+  "FV": () => (/* reexport */ MeshUIBaseElement),
+  "sV": () => (/* reexport */ ShaderChunkUI),
+  "xv": () => (/* reexport */ TextElement),
+  "mx": () => (/* reexport */ TypographicFont),
+  "gE": () => (/* reexport */ TypographicGlyph),
   "ZP": () => (/* binding */ three_mesh_ui),
   "Vx": () => (/* binding */ update)
 });
 
-// NAMESPACE OBJECT: ./src/utils/block-layout/ContentDirection.js
-var ContentDirection_namespaceObject = {};
-__webpack_require__.r(ContentDirection_namespaceObject);
-__webpack_require__.d(ContentDirection_namespaceObject, {
-  "COLUMN": () => (COLUMN),
-  "COLUMN_REVERSE": () => (COLUMN_REVERSE),
-  "ROW": () => (ROW),
-  "ROW_REVERSE": () => (ROW_REVERSE),
-  "contentDirection": () => (contentDirection)
+// NAMESPACE OBJECT: ./src/core/DefaultValues.js
+var DefaultValues_namespaceObject = {};
+__webpack_require__.r(DefaultValues_namespaceObject);
+__webpack_require__.d(DefaultValues_namespaceObject, {
+  "get": () => (get),
+  "set": () => (set)
 });
 
-// NAMESPACE OBJECT: ./src/utils/block-layout/AlignItems.js
-var AlignItems_namespaceObject = {};
-__webpack_require__.r(AlignItems_namespaceObject);
-__webpack_require__.d(AlignItems_namespaceObject, {
-  "CENTER": () => (CENTER),
-  "END": () => (END),
-  "START": () => (START),
-  "STRETCH": () => (STRETCH),
-  "alignItems": () => (alignItems),
-  "warnAboutDeprecatedAlignItems": () => (warnAboutDeprecatedAlignItems)
+// NAMESPACE OBJECT: ./src/utils/mediator/transformers/MaterialTransformers.js
+var MaterialTransformers_namespaceObject = {};
+__webpack_require__.r(MaterialTransformers_namespaceObject);
+__webpack_require__.d(MaterialTransformers_namespaceObject, {
+  "alphaTestTransformer": () => (alphaTestTransformer),
+  "asPreprocessorValueTransformer": () => (asPreprocessorValueTransformer),
+  "toPreprocessorTriggerTransformer": () => (toPreprocessorTriggerTransformer),
+  "toUserDataTransformer": () => (toUserDataTransformer),
+  "uniformOrUserDataTransformer": () => (uniformOrUserDataTransformer)
 });
 
-// NAMESPACE OBJECT: ./src/utils/block-layout/JustifyContent.js
-var JustifyContent_namespaceObject = {};
-__webpack_require__.r(JustifyContent_namespaceObject);
-__webpack_require__.d(JustifyContent_namespaceObject, {
-  "CENTER": () => (JustifyContent_CENTER),
-  "END": () => (JustifyContent_END),
-  "SPACE_AROUND": () => (SPACE_AROUND),
-  "SPACE_BETWEEN": () => (SPACE_BETWEEN),
-  "SPACE_EVENLY": () => (SPACE_EVENLY),
-  "START": () => (JustifyContent_START),
-  "justifyContent": () => (justifyContent)
-});
+;// CONCATENATED MODULE: ./src/core/DefaultValues.js
+/** List the default values of the lib components */
+const _values = {
+	fontFamily: null,
+	fontSize: 0.05,
+	fontKerning: 'normal',
+	fontStyle: 'normal',
+	fontWeight : 'normal',
+	offset: 0.005,
+	lineHeight: 1.2,
+	lineBreak: '- ,.:?!\n',// added '\n' to also acts as friendly breaks when white-space:normal
+	whiteSpace: 'pre-line',
+	flexDirection : 'column',
+	justifyContent : 'start',
+	alignItems : 'start',
+	backgroundImage: null,
+	textAlign : 'left',
+	boxSizing: 'content-box',
+	position: 'static',
+	color: 0xffffff,
+	fontOpacity: 1,
+	opacity: 1,
+	fontPXRange: 4,
+	fontSupersampling: true,
+	fontSmooth: 'antialiased',
+	borderRadius: 0,
+	borderWidth: 0,
+	borderColor: 'black',
+	borderOpacity: 1,
+	backgroundSize: "cover",
+	backgroundColor: 0x000000,
+	backgroundOpacity: 0,
+	overflow: 'visible',
+	letterSpacing: 0,
+	invertAlpha : false,
+	segments: 1,
+	backgroundSide : 0, //FrontSide
+	backgroundAlphaTest: 0.02,
+	fontSide: 0, // FrontSide
+	fontAlphaTest: 0.02,
+	padding: 0,
+	margin: 0,
+	verticalAlign: "baseline"
+};
 
-// NAMESPACE OBJECT: ./src/utils/inline-layout/Whitespace.js
-var Whitespace_namespaceObject = {};
-__webpack_require__.r(Whitespace_namespaceObject);
-__webpack_require__.d(Whitespace_namespaceObject, {
-  "NORMAL": () => (NORMAL),
-  "NOWRAP": () => (NOWRAP),
-  "PRE": () => (PRE),
-  "PRE_LINE": () => (PRE_LINE),
-  "PRE_WRAP": () => (PRE_WRAP),
-  "WHITE_CHARS": () => (WHITE_CHARS),
-  "collapseWhitespaceOnInlines": () => (collapseWhitespaceOnInlines),
-  "collapseWhitespaceOnString": () => (collapseWhitespaceOnString),
-  "isValid": () => (isValid),
-  "newlineBreakability": () => (newlineBreakability),
-  "shouldBreak": () => (Whitespace_shouldBreak)
-});
+const _blocks = {
 
-// NAMESPACE OBJECT: ./src/utils/inline-layout/TextAlign.js
-var TextAlign_namespaceObject = {};
-__webpack_require__.r(TextAlign_namespaceObject);
-__webpack_require__.d(TextAlign_namespaceObject, {
-  "CENTER": () => (TextAlign_CENTER),
-  "JUSTIFY": () => (JUSTIFY),
-  "JUSTIFY_CENTER": () => (JUSTIFY_CENTER),
-  "JUSTIFY_LEFT": () => (JUSTIFY_LEFT),
-  "JUSTIFY_RIGHT": () => (JUSTIFY_RIGHT),
-  "LEFT": () => (LEFT),
-  "RIGHT": () => (RIGHT),
-  "textAlign": () => (textAlign)
-});
+};
 
-;// CONCATENATED MODULE: external "three"
-var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var y = x => () => x
-const external_three_namespaceObject = x({ ["BufferAttribute"]: () => __WEBPACK_EXTERNAL_MODULE_three__.BufferAttribute, ["BufferGeometry"]: () => __WEBPACK_EXTERNAL_MODULE_three__.BufferGeometry, ["CanvasTexture"]: () => __WEBPACK_EXTERNAL_MODULE_three__.CanvasTexture, ["Color"]: () => __WEBPACK_EXTERNAL_MODULE_three__.Color, ["EventDispatcher"]: () => __WEBPACK_EXTERNAL_MODULE_three__.EventDispatcher, ["FileLoader"]: () => __WEBPACK_EXTERNAL_MODULE_three__.FileLoader, ["LinearFilter"]: () => __WEBPACK_EXTERNAL_MODULE_three__.LinearFilter, ["Mesh"]: () => __WEBPACK_EXTERNAL_MODULE_three__.Mesh, ["Object3D"]: () => __WEBPACK_EXTERNAL_MODULE_three__.Object3D, ["Plane"]: () => __WEBPACK_EXTERNAL_MODULE_three__.Plane, ["PlaneBufferGeometry"]: () => __WEBPACK_EXTERNAL_MODULE_three__.PlaneBufferGeometry, ["PlaneGeometry"]: () => __WEBPACK_EXTERNAL_MODULE_three__.PlaneGeometry, ["ShaderMaterial"]: () => __WEBPACK_EXTERNAL_MODULE_three__.ShaderMaterial, ["Texture"]: () => __WEBPACK_EXTERNAL_MODULE_three__.Texture, ["TextureLoader"]: () => __WEBPACK_EXTERNAL_MODULE_three__.TextureLoader, ["Vector2"]: () => __WEBPACK_EXTERNAL_MODULE_three__.Vector2, ["Vector3"]: () => __WEBPACK_EXTERNAL_MODULE_three__.Vector3 });
-;// CONCATENATED MODULE: ./src/utils/block-layout/ContentDirection.js
-const ROW = "row";
-const ROW_REVERSE = "row-reverse";
-const COLUMN = "column";
-const COLUMN_REVERSE = "column-reverse";
+const _inlines = {
+	fontStyle: 'inherit',
+	fontWeight: 'inherit',
+	color: 'inherit'
+}
 
-function contentDirection( container, DIRECTION, startPos, REVERSE ){
+const _registry = {
+	default: _values,
+	block: _blocks,
+	inline : _inlines
+}
 
-	// end to end children
-	let accu = startPos;
+/**
+ * @param {import('./../core/elements/MeshUIBaseElement').Options} overrideProperties
+ * @param [type='default']
+ */
+const set = function ( overrideProperties , type = 'default' ) {
 
-	let childGetSize = "getWidth";
-	let axisPrimary = "x";
-	let axisSecondary = "y";
+	const values = _registry[type] || _registry.default;
 
-	if( DIRECTION.indexOf( COLUMN ) === 0 ){
+	for ( const property in overrideProperties ) {
 
-		childGetSize = "getHeight";
-		axisPrimary = "y";
-		axisSecondary = "x";
+		values[property] = overrideProperties[property];
 
 	}
 
-	// Refactor reduce into fori in order to get rid of this keyword
-	for ( let i = 0; i < container.childrenBoxes.length; i++ ) {
+}
 
-		const child = container.childrenBoxes[ i ];
+/**
+ *
+ * @param {string} property
+ * @return {any}
+ */
+const get = function ( property, type = 'default' ) {
 
-		const CHILD_ID = child.id;
-		const CHILD_SIZE = child[childGetSize]();
-		const CHILD_MARGIN = child.margin || 0;
+	const values = _registry[type] ? {..._values,..._registry[type]} : {..._registry.default};
 
-		accu += CHILD_MARGIN * REVERSE;
+	if( !property ) return values;
 
-		container.childrenPos[ CHILD_ID ] = {
-			[axisPrimary]: accu + ( ( CHILD_SIZE / 2 ) * REVERSE ),
-			[axisSecondary]: 0
-		};
+	if( !Object.prototype.hasOwnProperty.call( values, property) ) {
 
-		// update accu for next children
-		accu += ( REVERSE * ( CHILD_SIZE + CHILD_MARGIN ) );
+		console.warn( `ThreeMeshUI::DefaultValues is trying to retrieve non-existing property '${property}'`);
 
 	}
 
+	return values[property];
+
 }
 
-;// CONCATENATED MODULE: ./src/utils/block-layout/AlignItems.js
+;// CONCATENATED MODULE: ./src/core/properties/BaseProperty.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
+/* eslint-enable no-unused-vars */
 
+class BaseProperty {
 
-const START = "start";
-const CENTER = "center";
-const END = "end";
-const STRETCH = "stretch"; // Still bit experimental
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 * @param primitive
+	 */
+	constructor( propertyId, value = null, primitive = true ) {
 
-function alignItems( boxComponent, DIRECTION){
+		/**
+		 *
+		 * @type {string}
+		 * @internal
+		 */
+		this._id = propertyId;
 
-	const ALIGNMENT = boxComponent.getAlignItems();
-	if( AVAILABLE_ALIGN_ITEMS.indexOf(ALIGNMENT) === -1 ){
+		/**
+		 *
+		 * @type {any}
+		 * @internal
+		 */
+		this._value = value;
 
-		console.warn( `alignItems === '${ALIGNMENT}' is not supported` );
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._needsUpdate = true;
 
-	}
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._needsProcess = false;
 
-	let getSizeMethod = "getWidth";
-	let axis = "x";
-	if( DIRECTION.indexOf( ROW ) === 0 ){
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._needsRender = false;
 
-		getSizeMethod = "getHeight";
-		axis = "y";
+		/**
+		 *
+		 * @type {boolean}
+		 * @protected
+		 */
+		this._isPrimitive = primitive;
 
 	}
-	const AXIS_TARGET = ( boxComponent[getSizeMethod]() / 2 ) - ( boxComponent.padding || 0 );
 
-	boxComponent.childrenBoxes.forEach( ( child ) => {
+	/**
+	 *
+	 * @return {string}
+	 */
+	get id() { return this._id; }
 
-		let offset;
+	/**
+	 *
+	 * @return {any}
+	 */
+	get value() { return this._value; }
 
-		switch ( ALIGNMENT ){
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set value( value ) {
 
-			case END:
-			case 'right': // @TODO : Deprecated and will be remove upon 7.x.x
-			case 'bottom': // @TODO : Deprecated and will be remove upon 7.x.x
-				if( DIRECTION.indexOf( ROW ) === 0 ){
+		if( ! this.isValid( value) ) return;
 
-					offset = - AXIS_TARGET + ( child[getSizeMethod]() / 2 ) + ( child.margin || 0 );
+		if( this._value !== value ) {
 
-				}else{
+			this._value = value;
 
-					offset = AXIS_TARGET - ( child[getSizeMethod]() / 2 ) - ( child.margin || 0 );
+			this._needsUpdate = true;
 
-				}
+		}
 
-				break;
+	}
 
-			case START:
-			case 'left': // @TODO : Deprecated and will be remove upon 7.x.x
-			case 'top': // @TODO : Deprecated and will be remove upon 7.x.x
-				if( DIRECTION.indexOf( ROW ) === 0 ){
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @param {Object.<string,any>} out
+	 */
+	update( element , out ) { 	/* eslint-enable no-unused-vars */
 
-					offset = AXIS_TARGET - ( child[getSizeMethod]() / 2 ) - ( child.margin || 0 );
+		// the value has been updated from setter
+		// if there is no additional logic
+		// then just output it
+		// => out[this._id] = this._value;
+		this.output( out );
 
-				}else{
 
-					offset = - AXIS_TARGET + ( child[getSizeMethod]() / 2 ) + ( child.margin || 0 );
+		// ??
+		//this.computeOutputValue( element );
+		// if( this._isPrimitive ) this.output( out );
 
-				}
+	}
 
-				break;
-		}
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Output this property in a dictionnary
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) { 	/* eslint-enable no-unused-vars */
 
-		boxComponent.childrenPos[ child.id ][axis] = offset || 0;
+		// ie:
+		// out['borderRadius'] = this;
+		// out[this._id] = this._value;
 
-	} );
+	}
 
-}
 
-/**
- * @deprecated
- * // @TODO: Be remove upon 7.x.x
- * @param alignment
- */
-function warnAboutDeprecatedAlignItems( alignment ){
 
-	if( DEPRECATED_ALIGN_ITEMS.indexOf(alignment) !== - 1){
+	/**
+	 *
+	 * @param {Out} out
+	 */
+	_outputValue( out ) {
 
-		console.warn(`alignItems === '${alignment}' is deprecated and will be remove in 7.x.x. Fallback are 'start'|'end'`)
+		out[this._id] = this._value;
 
 	}
 
-}
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Execute additional process after all properties have been updated
+	 * @param {MeshUIBaseElement} element
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */ }
 
-const AVAILABLE_ALIGN_ITEMS = [
-	START,
-	CENTER,
-	END,
-	STRETCH,
-	'top', // @TODO: Be remove upon 7.x.x
-	'right', // @TODO: Be remove upon 7.x.x
-	'bottom', // @TODO: Be remove upon 7.x.x
-	'left' // @TODO: Be remove upon 7.x.x
-];
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Execute additional process after all properties have been updated
+	 * @param {MeshUIBaseElement} element
+	 */
+	render( element ) { /* eslint-enable no-unused-vars */ }
 
-// @TODO: Be remove upon 7.x.x
-const DEPRECATED_ALIGN_ITEMS = [
-	'top',
-	'right',
-	'bottom',
-	'left'
-];
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	getInheritedInput ( element ) {
 
+		if( this._value !== 'inherit' ) return this._value;
 
-;// CONCATENATED MODULE: ./src/utils/block-layout/JustifyContent.js
-const JustifyContent_START = "start";
-const JustifyContent_CENTER = "center";
-const JustifyContent_END = "end";
-const SPACE_AROUND = 'space-around';
-const SPACE_BETWEEN = 'space-between';
-const SPACE_EVENLY = 'space-evenly';
+		const parent = element._parent._value;
+		if( parent && parent[`_${this._id}`] ) {
 
-function justifyContent( boxComponent, direction, startPos, REVERSE){
+			return parent[`_${this._id}`].getInheritedInput( parent )
 
-	const JUSTIFICATION = boxComponent.getJustifyContent();
-	if ( AVAILABLE_JUSTIFICATIONS.indexOf( JUSTIFICATION ) === -1 ) {
+		}
 
-		console.warn( `justifyContent === '${ JUSTIFICATION }' is not supported` );
+		return this.getDefaultValue();
 
 	}
 
-	const side = direction.indexOf('row') === 0 ? 'width' : 'height'
-	const usedDirectionSpace = boxComponent.getChildrenSideSum( side );
-
-	const INNER_SIZE = side === 'width' ? boxComponent.getInnerWidth() : boxComponent.getInnerHeight();
-	const remainingSpace = INNER_SIZE - usedDirectionSpace;
-
-	// Items Offset
-	const axisOffset = ( startPos * 2 ) - ( usedDirectionSpace * Math.sign( startPos ) );
-	// const axisOffset = ( startPos * 2 ) - ( usedDirectionSpace * REVERSE );
-	const justificationOffset = _getJustificationOffset( JUSTIFICATION, axisOffset );
-
-	// Items margin
-	const justificationMargins = _getJustificationMargin( boxComponent.childrenBoxes, remainingSpace, JUSTIFICATION, REVERSE );
+	/**
+	 *
+	 * @return {any}
+	 */
+	getDefaultValue() {
 
-	// Apply
-	const axis = direction.indexOf( 'row' ) === 0 ? "x" : "y"
-	boxComponent.childrenBoxes.forEach( ( child , childIndex ) => {
+		return get( this._id );
 
-		boxComponent.childrenPos[ child.id ][axis] -= justificationOffset - justificationMargins[childIndex];
+	}
 
-	} );
-}
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {any} value
+	 * @return {boolean}
+	 */
+	isValid( value ) { 	/* eslint-enable no-unused-vars */
 
-const AVAILABLE_JUSTIFICATIONS = [
-	JustifyContent_START,
-	JustifyContent_CENTER,
-	JustifyContent_END,
-	SPACE_AROUND,
-	SPACE_BETWEEN,
-	SPACE_EVENLY
-];
+		return true;
 
-/**
- *
- * @param {string} justification
- * @param {number} axisOffset
- * @returns {number}
- */
-function _getJustificationOffset( justification, axisOffset ){
+	}
 
-	// Only end and center have justification offset
-	switch ( justification ){
+	/**
+	 *
+	 */
+	emptyStrategyLogic () {
 
-		case JustifyContent_END:
-			return axisOffset;
+		throw new Error( `ThreeMeshUI::${this.constructor.name} has empty strategy. Update has not been processed.` );
 
-		case JustifyContent_CENTER:
-			return axisOffset / 2;
 	}
 
-	return 0;
 }
 
+
 /**
- *
- * @param items
- * @param spaceToDistribute
- * @param justification
- * @param reverse
- * @returns {any[]}
+ * @typedef Out
+ * @type {Object & Object.<string,any>}
  */
-function _getJustificationMargin( items, spaceToDistribute, justification, reverse ){
-
-	const justificationMargins = Array( items.length ).fill( 0 );
 
-	if ( spaceToDistribute > 0 ) {
+;// CONCATENATED MODULE: ./src/core/properties/RenderOrderProperty.js
 
-		// Only space-*  have justification margin betweem items
-		switch ( justification ) {
 
-			case SPACE_BETWEEN:
-				// only one children would act as start
-				if ( items.length > 1 ) {
+class RenderOrderProperty extends BaseProperty{
 
-					const margin = spaceToDistribute / ( items.length - 1 ) * reverse;
-					// set this margin for any children
-
-					// except for first child
-					justificationMargins[ 0 ] = 0;
-
-					for ( let i = 1; i < items.length; i++ ) {
+	constructor() {
 
-						justificationMargins[ i ] = margin * i;
+		super( 'renderOrder', 'auto', true);
 
-					}
+		this.output = this._outputValue;
 
-				}
+		this._actualValue = 0;
+	}
 
-				break;
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set value( value ) {
 
-			case SPACE_EVENLY:
-				// only one children would act as start
-				if ( items.length > 1 ) {
+		if( ! this.isValid( value) ) return;
 
-					const margin = spaceToDistribute / ( items.length + 1 ) * reverse;
+		this._value = value;
 
-					// set this margin for any children
-					for ( let i = 0; i < items.length; i++ ) {
+		this._needsUpdate = true;
 
-						justificationMargins[ i ] = margin * ( i + 1 );
+	}
 
-					}
+	update( element, out ) {
 
-				}
+		if( this._value !== 'auto' ) {
 
-				break;
+			this._actualValue = this._value;
 
-			case SPACE_AROUND:
-				// only one children would act as start
-				if ( items.length > 1 ) {
+		} else {
 
-					const margin = spaceToDistribute / ( items.length ) * reverse;
+			const parent = element._parent._value;
+			if( parent !== null ) {
 
-					const start = margin / 2;
-					justificationMargins[ 0 ] = start;
+				const parentIndex = parent._renderOrder._actualValue;
+				const positionInParent = 1 + parent._children._uis.indexOf( element );
 
-					// set this margin for any children
-					for ( let i = 1; i < items.length; i++ ) {
+				this._actualValue = parentIndex + positionInParent;
 
-						justificationMargins[ i ] = start + margin * i;
+			}
 
-					}
+		}
 
-				}
+		// update any children
+		for ( const childUIElement of element._children._uis ) {
 
-				break;
+			const property = childUIElement[`_renderOrder`];
+			if( property._value === 'auto' ) childUIElement[`_renderOrder`]._needsUpdate = true;
 
 		}
 
-	}
+		this._outputValue( out );
 
-	return justificationMargins;
+	}
 
-}
+	_outputValue( out ) {
 
-;// CONCATENATED MODULE: ./src/components/core/BoxComponent.js
-/**
+		out[this._id] = this._actualValue;
 
-Job: Handle everything related to a BoxComponent element dimensioning and positioning
+	}
 
-Knows: Parents and children dimensions and positions
 
-It's worth noting that in three-mesh-ui, it's the parent Block that computes
-its children position. A Block can only have either only box components (Block)
-as children, or only inline components (Text, InlineBlock).
+	/**
+	 *
+	 * @return {number}
+	 */
+	get value() { return this._value; }
 
- */
+}
 
+;// CONCATENATED MODULE: ./src/core/properties/InheritableProperty.js
 
 
+class InheritableProperty extends BaseProperty {
 
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 * @param primitive
+	 */
+	constructor( propertyId, value = null, primitive = true ) {
 
-function BoxComponent( Base ) {
+		super( propertyId, value, primitive );
 
-	return class BoxComponent extends Base {
+		// @TODO : I would like to remove this rules ( here )
+		this.output = this._outputValue;
 
-		constructor( options ) {
+		this._notInheritedValue = null;
+	}
 
-			super( options );
+	update( element , out ) { 	/* eslint-enable no-unused-vars */
 
-			this.isBoxComponent = true;
-			this.childrenPos = {};
+		this._notInheritedValue = this._value;
 
+		if( this._notInheritedValue === 'inherit' )
+		{
+			this._notInheritedValue = this.getInheritedInput( element );
 		}
+		// else
+		// {
+		// 	this.propagate( element );
+		// }
 
+		// @TODO: Evaluate. This might be too much
+		this.propagate( element );
 
-		/** Get width of this component minus its padding */
-		getInnerWidth() {
-
-			const DIRECTION = this.getContentDirection();
+		this._outputValue( out );
 
-			switch ( DIRECTION ) {
-
-				case 'row' :
-				case 'row-reverse' :
-					return this.width - ( this.padding * 2 || 0 ) || this.getChildrenSideSum( 'width' );
+	}
 
-				case 'column' :
-				case 'column-reverse' :
-					return this.getHighestChildSizeOn( 'width' );
+	propagate( element ) {
 
-				default :
-					console.error( `Invalid contentDirection : ${DIRECTION}` );
-					break;
+		// rebuild same properties on children 'inheritance'
+		for ( const childUIElement of element._children._uis ) {
 
+			const property = childUIElement[`_${this._id}`];
+			if( property !== undefined && property._value === 'inherit' ) {
+				childUIElement[`_${this._id}`]._needsUpdate = true;
 			}
 
 		}
+	}
 
-		/** Get height of this component minus its padding */
-		getInnerHeight() {
+	/**
+	 * Output this property in a dictionnary
+	 * @override
+	 */
+	_outputValue( out ) { 	/* eslint-enable no-unused-vars */
 
-			const DIRECTION = this.getContentDirection();
+		out[this._id] = this._notInheritedValue;
 
-			switch ( DIRECTION ) {
+	}
 
-				case 'row' :
-				case 'row-reverse' :
-					return this.getHighestChildSizeOn( 'height' );
+	set value ( value ) {
 
-				case 'column' :
-				case 'column-reverse' :
-					return this.height - ( this.padding * 2 || 0 ) || this.getChildrenSideSum( 'height' );
+		if( ! this.isValid( value) ) return;
 
-				default :
-					console.error( `Invalid contentDirection : ${DIRECTION}` );
-					break;
+		if( this._value !== value ) {
 
-			}
+			this._value = value;
+
+			this._needsUpdate = true;
 
 		}
 
-		/** Return the sum of all this component's children sides + their margin */
-		getChildrenSideSum( dimension ) {
+	}
+	/**
+	 *
+	 * @override
+	 * @return {any|"inherit"}
+	 */
+	get value() {
 
-			return this.childrenBoxes.reduce( ( accu, child ) => {
+		if( this._value === 'inherit' ) return this._notInheritedValue;
 
-				const margin = ( child.margin * 2 ) || 0;
+		return this._value;
 
-				const CHILD_SIZE = ( dimension === 'width' ) ?
-					( child.getWidth() + margin ) :
-					( child.getHeight() + margin );
+	}
 
-				return accu + CHILD_SIZE;
+}
 
-			}, 0 );
+;// CONCATENATED MODULE: ./src/core/properties/OffsetProperty.js
 
-		}
 
-		/** Look in parent record what is the instructed position for this component, then set its position */
-		setPosFromParentRecords() {
+class OffsetProperty extends InheritableProperty {
 
-			if ( this.parentUI && this.parentUI.childrenPos[ this.id ] ) {
+	constructor( ) {
 
-				this.position.x = ( this.parentUI.childrenPos[ this.id ].x );
-				this.position.y = ( this.parentUI.childrenPos[ this.id ].y );
+		super( 'offset', 'inherit', false );
 
-			}
+	}
 
-		}
 
-		/** Position inner elements according to dimensions and layout parameters. */
-		computeChildrenPosition() {
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
 
-			if ( this.children.length > 0 ) {
+		super.update( element, out);
 
-				const DIRECTION = this.getContentDirection();
-				let directionalOffset;
+		// only process if element has ui parent
+		if( element._parent._value !== null ) element.position.z = this._notInheritedValue;
 
-				switch ( DIRECTION ) {
+	}
 
-					case ROW :
-						directionalOffset = - this.getInnerWidth() / 2;
-						break;
 
-					case ROW_REVERSE :
-						directionalOffset = this.getInnerWidth() / 2;
-						break;
+}
 
-					case COLUMN :
-						directionalOffset = this.getInnerHeight() / 2;
-						break;
+;// CONCATENATED MODULE: ./src/core/properties/FontSmoothProperty.js
 
-					case COLUMN_REVERSE :
-						directionalOffset = - this.getInnerHeight() / 2;
-						break;
 
-				}
+class FontSmoothProperty extends InheritableProperty{
 
-				const REVERSE = - Math.sign( directionalOffset );
+	constructor() {
 
-				contentDirection(this, DIRECTION, directionalOffset, REVERSE );
-				justifyContent(this, DIRECTION, directionalOffset, REVERSE );
-				alignItems( this, DIRECTION );
-			}
+		super( 'fontSmooth', 'inherit', true);
 
-		}
+		// configure
+		this._needsUpdate = false;
+		this.isValid = _isValid;
+		this.output = this._outputValue;
+	}
 
-		/**
-		 * Returns the highest linear dimension among all the children of the passed component
-		 * MARGIN INCLUDED
-		 */
-		getHighestChildSizeOn( direction ) {
+}
 
-			return this.childrenBoxes.reduce( ( accu, child ) => {
+const AVAILABLE_VALUES = ['inherit','none','antialiased'];
 
-				const margin = child.margin || 0;
-				const maxSize = direction === 'width' ?
-					child.getWidth() + ( margin * 2 ) :
-					child.getHeight() + ( margin * 2 );
+/**
+ *
+ * @param {string} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
 
-				return Math.max( accu, maxSize );
+	if(  AVAILABLE_VALUES.indexOf( value ) === -1 ) {
 
-			}, 0 );
+		console.warn(`.fontSmoothing value '${value}' is not valid. Aborted`);
+		return false;
 
-		}
+	}
 
-		/**
-		 * Get width of this element
-		 * With padding, without margin
-		 */
-		getWidth() {
+	return true;
 
+}
 
-			// This is for stretch alignment
-			// @TODO : Conceive a better performant way
-			if( this.parentUI && this.parentUI.getAlignItems() === 'stretch' ){
+;// CONCATENATED MODULE: external "three"
+var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var y = x => () => x
+const external_three_namespaceObject = x({ ["BackSide"]: () => __WEBPACK_EXTERNAL_MODULE_three__.BackSide, ["BufferAttribute"]: () => __WEBPACK_EXTERNAL_MODULE_three__.BufferAttribute, ["BufferGeometry"]: () => __WEBPACK_EXTERNAL_MODULE_three__.BufferGeometry, ["Color"]: () => __WEBPACK_EXTERNAL_MODULE_three__.Color, ["DoubleSide"]: () => __WEBPACK_EXTERNAL_MODULE_three__.DoubleSide, ["EventDispatcher"]: () => __WEBPACK_EXTERNAL_MODULE_three__.EventDispatcher, ["FileLoader"]: () => __WEBPACK_EXTERNAL_MODULE_three__.FileLoader, ["FrontSide"]: () => __WEBPACK_EXTERNAL_MODULE_three__.FrontSide, ["LinearFilter"]: () => __WEBPACK_EXTERNAL_MODULE_three__.LinearFilter, ["Mesh"]: () => __WEBPACK_EXTERNAL_MODULE_three__.Mesh, ["Object3D"]: () => __WEBPACK_EXTERNAL_MODULE_three__.Object3D, ["Plane"]: () => __WEBPACK_EXTERNAL_MODULE_three__.Plane, ["PlaneGeometry"]: () => __WEBPACK_EXTERNAL_MODULE_three__.PlaneGeometry, ["ShaderMaterial"]: () => __WEBPACK_EXTERNAL_MODULE_three__.ShaderMaterial, ["Texture"]: () => __WEBPACK_EXTERNAL_MODULE_three__.Texture, ["TextureLoader"]: () => __WEBPACK_EXTERNAL_MODULE_three__.TextureLoader, ["Vector2"]: () => __WEBPACK_EXTERNAL_MODULE_three__.Vector2, ["Vector3"]: () => __WEBPACK_EXTERNAL_MODULE_three__.Vector3, ["Vector4"]: () => __WEBPACK_EXTERNAL_MODULE_three__.Vector4 });
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/SubStyleProperty.js
 
-				if( this.parentUI.getContentDirection().indexOf('column') !== -1 ){
 
-					return this.parentUI.getWidth() -  ( this.parentUI.padding * 2 || 0 );
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-				}
+/* eslint-enable no-unused-vars */
 
-			}
+/* eslint-disable no-unused-vars */
+class SubStyleProperty extends BaseProperty{
 
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {boolean} [primitive=true]
+	 * @param {any} defaultValue
+	 */
+	constructor( propertyId, defaultValue, primitive = true) {
 
-			return this.width || this.getInnerWidth() + ( this.padding * 2 || 0 );
+		super( propertyId, 'unset', primitive );
 
-		}
+		/**
+		 * @type {any}
+		 * @internal
+		 */
+		this._input = 'inherit';
 
 		/**
-		 * Get height of this element
-		 * With padding, without margin
+		 *
+		 * @type {boolean}
+		 * @protected
 		 */
-		getHeight() {
+		this._allowsInherit = true;
 
-			// This is for stretch alignment
-			// @TODO : Conceive a better performant way
-			if( this.parentUI && this.parentUI.getAlignItems() === 'stretch' ){
+		/**
+		 * The input value that won't be 'inherit'
+		 * @type {any}
+		 * @protected
+		 */
+		this._inheritedInput = undefined;
 
-				if( this.parentUI.getContentDirection().indexOf('row') !== -1 ){
+		/**
+		 *
+		 * @type {any}
+		 * @internal
+		 */
+		this._inline = undefined;
 
-					return this.parentUI.getHeight() - ( this.parentUI.padding * 2 || 0 );
+	}
 
-				}
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 * @param {Object.<string,any> } out
+	 */
+	update( element, out ) {
 
-			}
+		if( !this._allowsInherit ) {
 
-			return this.height || this.getInnerHeight() + ( this.padding * 2 || 0 );
+			this._inheritedInput = this.getInheritedInput( element );
 
 		}
 
-	};
-
-}
-
+		this.computeOutputValue( element );
 
-;// CONCATENATED MODULE: ./src/utils/inline-layout/Whitespace.js
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace#whitespace_helper_functions
- *
- * Throughout, whitespace is defined as one of the characters
- *  "\t" TAB \u0009
- *  "\n" LF  \u000A
- *  "\r" CR  \u000D
- *  " "  SPC \u0020
- *
- * This does not use Javascript's "\s" because that includes non-breaking
- * spaces (and also some other characters).
- **/
-const WHITE_CHARS = { '\t': '\u0009', '\n': '\u000A', '\r': '\u000D', ' ': '\u0020' };
+		// rebuild same properties on children 'inheritance'
+		for ( const childUIElement of element._children._uis ) {
 
-const NORMAL = 'normal';
-const NOWRAP = 'nowrap';
-const PRE = 'pre';
-const PRE_LINE = 'pre-line';
-const PRE_WRAP = 'pre-wrap';
+			const property = childUIElement[`_${this._id}`];
 
-const AVAILABLE_VALUES = [ NORMAL, NOWRAP, PRE, PRE_LINE, PRE_WRAP ];
+			if( !property ) continue;
 
-/**
- * Check the validity of a whitespace
- * @param value
- * @returns {string}
- */
-function isValid ( value ){
+			const target = property._input ? property._input : property._value;
 
-	if( AVAILABLE_VALUES.indexOf(value) === -1 ){
+			if( target === 'inherit' ) childUIElement[`_${this._id}`]._needsUpdate = true;
 
-		console.warn(`Whitespace::isValid() The provided white-space value ('${value}') is not valid !`);
-		console.warn(`    - Automatic fallback to ('${PRE_LINE}')`);
+		}
 
-		value = PRE_LINE;
+		this.output( out );
 
 	}
 
-	return value;
-
-}
-
-/**
- * Collapse whitespaces and sequence of whitespaces on string
- *
- * @param textContent
- * @param whiteSpace
- * @returns {*}
- */
-const collapseWhitespaceOnString = function ( textContent, whiteSpace ) {
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) {
 
-	switch ( whiteSpace ) {
+		this._value = this._input;
 
-		case NOWRAP:
-		case NORMAL:
-			// newlines are treated as other whitespace characters
-			textContent = textContent.replace( /\n/g, ' ' );
-		//falls through
+	}
 
-		case PRE_LINE:
-			// collapsed white spaces sequences
-			textContent = textContent.replace( /[ ]{2,}/g, ' ' );
-			break;
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	_computeFromInherited( element ) {
 
-		default:
+		this._value = this._inheritedInput;
 
 	}
 
-	return textContent;
-
-};
 
-/**
- * Get the breakability of a newline character according to white-space property
- *
- * @param whiteSpace
- * @returns {string|null}
- */
-const newlineBreakability = function ( whiteSpace ) {
+	/**
+	 * @override
+	 * @deprecated
+	 * @param {any} v
+	 */
+	set value( v ) {
 
-	switch ( whiteSpace ) {
+		console.warn(".(style) sub-property cannot be directly set. It must comes from inline or computed setter.")
 
-		case PRE:
-		case PRE_WRAP:
-		case PRE_LINE:
-			return 'mandatory';
 	}
 
-	// case NOWRAP:
-	// case NORMAL:
-	// default:
-
-	return null;
-
-};
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set inline( value ) {
 
-/**
- * Check for breaks in inlines according to whiteSpace value
- *
- * @param inlines
- * @param i
- * @param lastInlineOffset
- * @param options
- * @returns {boolean}
- */
-const Whitespace_shouldBreak = function( inlines, i, lastInlineOffset, options){
-	const inline = inlines[i];
+		if( ! this.isValidValue( value ) ) return;
 
-	switch ( options.WHITESPACE ){
+		if( value === this._inline ) {
 
-		case NORMAL:
-		case PRE_LINE:
-		case PRE_WRAP:
+			// do nothing no update, the value hasn't changed
+			return;
 
-			// prevent additional computation if line break is mandatory
-			if( inline.lineBreak === 'mandatory' ) return true;
+		}
 
-			// Part of inline now
-			// const kerning = inline.kerning ? inline.kerning : 0;
-			// const xoffset = inline.xoffset ? inline.xoffset : 0;
-			// const xadvance = inline.xadvance ? inline.xadvance : inline.width;
+		this._input = this._inline = value;
 
+		this._needsUpdate = true;
 
-			// ?? Missing letterSpacing ?
-			// prevent additional computation if this character already exceed the available size
-			if( lastInlineOffset + inline.xadvance + inline.xoffset + inline.kerning > options.INNER_WIDTH ) return true;
+	}
 
+	/**
+	 *
+	 * @return {any}
+	 */
+	get inline() { return this._inline; }
 
-			const nextBreak = _distanceToNextBreak( inlines, i, options );
-			return _shouldFriendlyBreak( inlines[ i - 1 ], lastInlineOffset, nextBreak, options );
+	/**
+	 *
+	 * @param {any} value
+	 * @return {boolean}
+	 */
+	isValidValue( value ) {
 
-		case PRE:
-			return inline.lineBreak === 'mandatory';
+		return true;
 
-		case NOWRAP:
-		default:
-			return false;
 	}
-}
-
 
-/**
- * Alter a line of inlines according to white-space property
- * @param line
- * @param {('normal'|'pre-wrap'|'pre-line')} whiteSpace
- */
-const collapseWhitespaceOnInlines = function ( line, whiteSpace ) {
+	/**
+	 * @param {MeshUIBaseElement} element
+	 */
+	getInheritedInput ( element ) {
 
-	const firstInline = line[ 0 ];
-	const lastInline = line[ line.length - 1 ];
+		if( this._input !== 'inherit' ) return this._input;
 
-	// @see https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace
-	//
-	// current implementation is 'pre-line'
-	// if the breaking character is a space, get the previous one
-	switch ( whiteSpace ) {
+		const parent = element._parent._value;
+		if( parent ) {
 
-		// trim/collapse first and last whitespace characters of a line
-		case PRE_WRAP:
-			// only process whiteChars glyphs inlines
-			// if( firstInline.glyph && whiteChars[firstInline.glyph] && line.length > 1 ){
-			if ( firstInline.char && firstInline.char === '\n' && line.length > 1 ) {
+			const parentProperty = parent[`_${this._id}`];
 
-				_collapseLeftInlines( [ firstInline ], line[ 1 ] );
+			if( !parentProperty ) return this.getDefaultValue();
 
-			}
+			return parent[`_${this._id}`].getInheritedInput( parent )
 
-			// if( lastInline.glyph && whiteChars[lastInline.glyph] && line.length > 1 ){
-			if ( lastInline.char && lastInline.char === '\n' && line.length > 1 ) {
+		}
 
-				_collapseRightInlines( [ lastInline ], line[ line.length - 2 ] );
+		return this.getDefaultValue();
 
-			}
+	}
 
-			break;
+}
+/* eslint-enable no-unused-vars */
 
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/StyleVector4Property.js
 
-		case PRE_LINE:
-		case NOWRAP:
-		case NORMAL:
-			let inlinesToCollapse = [];
-			let collapsingTarget;
-			// collect starting whitespaces to collapse
-			for ( let i = 0; i < line.length; i++ ) {
 
-				const inline = line[ i ];
 
-				if ( inline.char && WHITE_CHARS[ inline.char ] && line.length > i ) {
+class StyleVector4Property extends SubStyleProperty {
 
-					inlinesToCollapse.push( inline );
-					collapsingTarget = line[ i + 1 ];
-					continue;
+	constructor( propertyId, defaultValue ) {
 
-				}
+		super( propertyId, defaultValue, false );
 
-				break;
+		/**
+		 *
+		 * @type {Vector4}
+		 * @private
+		 */
+		this._input = this._vector4ValueSetter( new external_three_namespaceObject.Vector4(0,0,0,0), defaultValue);
 
-			}
+		/**
+		 *
+		 * @type {any}
+		 * @internal
+		 */
+		this._inline = null;
 
-			_collapseLeftInlines( inlinesToCollapse, collapsingTarget );
+		/**
+		 * @override
+		 * @type {Vector4}
+		 * @protected
+		 */
+		this._value = new external_three_namespaceObject.Vector4(0,0,0,0);
 
+	}
 
-			inlinesToCollapse = [];
-			collapsingTarget = null;
-			// collect ending whitespace to collapse
-			for ( let i = line.length - 1; i > 0; i-- ) {
+	/**
+	 * @override
+	 * @return {Vector4}
+	 */
+	get value(){
 
-				const inline = line[ i ];
-				if ( inline.char && WHITE_CHARS[ inline.char ] && i > 0 ) {
+		return this._value;
 
-					inlinesToCollapse.push( inline );
-					collapsingTarget = line[ i - 1 ];
-					continue;
+	}
 
-				}
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @override
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-				break;
+		this._vector4ValueSetter( this._value, this._input, element );
 
-			}
+	}
 
-			_collapseRightInlines( inlinesToCollapse, collapsingTarget );
-			break;
+	set inline( value ) {
 
-		case PRE:
-			break;
+		this._vector4ValueSetter( this._input, value );
 
+		if( this._input.equals( this._value) ) return;
 
-		default:
-			console.warn( `whiteSpace: '${whiteSpace}' is not valid` );
-			return 0;
+		this._needsUpdate = true;
 
 	}
 
-	return firstInline.offsetX;
-
-};
-
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set top( v ) {
 
-/***********************************************************************************************************************
- * Internal logics
- **********************************************************************************************************************/
+		if( this._input.x === v ) return;
 
+		this._input.x = v;
+		this._needsUpdate = true;
 
-/**
- * Visually collapse inlines from right to left ( endtrim )
- * @param {Array} inlines
- * @param targetInline
- * @private
- */
-function _collapseRightInlines( inlines, targetInline ) {
+	}
 
-	if ( !targetInline ) return;
 
-	for ( let i = 0; i < inlines.length; i++ ) {
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get top() { return this._input.x; }
 
-		const inline = inlines[ i ];
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set right( v ) {
 
-		// inline.width = 0;
-		// inline.height = 0;
-		inline.fontFactor = 0;
-		inline.offsetX = targetInline.offsetX + targetInline.width;
+		if( this._input.y === v ) return;
 
+		this._input.y = v;
+		this._needsUpdate = true;
 	}
 
-}
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get right() { return this._input.y; }
 
-/**
- * Visually collapse inlines from left to right (starttrim)
- * @param {Array} inlines
- * @param targetInline
- * @private
- */
-function _collapseLeftInlines( inlines, targetInline ) {
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set bottom( v ) {
+		if( this._input.z === v ) return;
 
-	if ( !targetInline ) return;
+		this._input.z = v;
+		this._needsUpdate = true;
+	}
 
-	for ( let i = 0; i < inlines.length; i++ ) {
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get bottom() { return this._input.z; }
 
-		const inline = inlines[ i ];
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set left( v ) {
 
-		// inline.width = 0;
-		// inline.height = 0;
-		inline.fontFactor = 0;
-		inline.offsetX = targetInline.offsetX;
+		if( this._input.w === v ) return;
 
+		this._input.w = v;
+		this._needsUpdate = true;
 	}
 
-}
 
-/**
- * get the distance in world coord to the next glyph defined
- * as break-line-safe ( like whitespace for instance )
- * @private
- */
-function _distanceToNextBreak( inlines, currentIdx, options, accu ) {
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get left() { return this._input.w; }
 
-	accu = accu || 0;
+	dispose(){
 
-	// end of the text
-	if ( !inlines[ currentIdx ] ) return accu;
+		this._computed = null;
+		this._inline = null;
+		this._input = null;
+		this._output = null;
 
-	const inline = inlines[ currentIdx ];
+	}
 
-	// const kerning = inline.kerning ? inline.kerning : 0;
-	// const xoffset = inline.xoffset ? inline.xoffset : 0;
-	// const xadvance = inline.xadvance ? inline.xadvance : inline.width;
+	/**
+	 *
+	 * @param {Vector4} vector4
+	 * @param {Vector4|Array.<Number>|Number|String} value
+	 * @protected
+	 */
+	_vector4ValueSetter( vector4, value ) {
 
-	// if inline.lineBreak is set, it is 'mandatory' or 'possible'
-	if ( inline.lineBreak ) return accu + inline.xadvance;
+		if ( value instanceof external_three_namespaceObject.Vector4 ) {
 
-	// no line break is possible on this character
-	return _distanceToNextBreak(
-		inlines,
-		currentIdx + 1,
-		options,
-		accu + inline.xadvance + inline.xoffset + inline.kerning + options.LETTERSPACING
-	);
+			return vector4.copy( value );
 
-}
+		}
 
-/**
- * Test if we should line break here even if the current glyph is not out of boundary.
- * It might be necessary if the last glyph was break-line-friendly (whitespace, hyphen..)
- * and the distance to the next friendly glyph is out of boundary.
- */
-function _shouldFriendlyBreak( prevChar, lastInlineOffset, nextBreak, options ) {
+		if ( typeof value === 'string' || value instanceof String ) {
 
-	// We can't check if last glyph is break-line-friendly it does not exist
-	if ( !prevChar || !prevChar.char ) return false;
+			value = value.split( ' ' );
 
-	// Next break-line-friendly glyph is inside boundary
-	if ( lastInlineOffset + nextBreak < options.INNER_WIDTH ) return false;
+		}
 
-	// Previous glyph was break-line-friendly
-	return options.BREAKON.indexOf( prevChar.char ) > -1;
+		if ( Array.isArray( value ) ) {
 
-}
+			value = value.map( v => parseFloat( v ) );
 
-;// CONCATENATED MODULE: ./src/utils/inline-layout/TextAlign.js
-const LEFT = 'left';
-const RIGHT = 'right';
-const TextAlign_CENTER = 'center';
-const JUSTIFY = 'justify';
-const JUSTIFY_LEFT = 'justify-left';
-const JUSTIFY_RIGHT = 'justify-right';
-const JUSTIFY_CENTER = 'justify-center';
+			switch ( value.length ) {
 
-/**
- *
- * @param {Array.<Array.<InlineCharacter>>} lines
- * @param ALIGNMENT
- * @param INNER_WIDTH
- */
-function textAlign( lines, ALIGNMENT, INNER_WIDTH ) {
+				case 1:
+					return vector4.setScalar( value[ 0 ] );
 
-	// Start the alignment by sticking to directions : left, right, center
-	for ( let i = 0; i < lines.length; i++ ) {
+				case 2:
+					vector4.x = vector4.z = value[ 0 ];
+					vector4.y = vector4.w = value[ 1 ];
+					return vector4;
 
-		const line = lines[ i ];
+				case 3:
+					vector4.x = value[ 0 ];
+					vector4.y = value[ 1 ];
+					vector4.z = value[ 2 ];
+					return vector4;
 
-		// compute the alignment offset of the line
-		const offsetX = _computeLineOffset( line, ALIGNMENT, INNER_WIDTH, i === lines.length - 1 );
+				case 4:
+					vector4.x = value[ 0 ];
+					vector4.y = value[ 1 ];
+					vector4.z = value[ 2 ];
+					vector4.w = value[ 3 ];
+					return vector4;
 
-		// apply the offset to each characters of the line
-		for ( let j = 0; j < line.length; j++ ) {
+				default:
+					console.error( 'StyleVector4Property::set() Four Dimension property had more than four values' );
+					return;
 
-			line[ j ].offsetX += offsetX;
+			}
 
 		}
 
-	}
-
-	// last operations for justifications alignments
-	if ( ALIGNMENT.indexOf( JUSTIFY ) === 0 ) {
-
-		for ( let i = 0; i < lines.length; i++ ) {
+		if ( !isNaN( value ) ) {
 
-			const line = lines[ i ];
+			vector4.setScalar( value );
 
+		}
 
-			// do not process last line for justify-left or justify-right
-			if ( ALIGNMENT.indexOf( '-' ) !== -1 && i === lines.length - 1 ) return;
+		return vector4;
 
-			// can only justify is space is remaining
-			const REMAINING_SPACE = INNER_WIDTH - line.width;
-			if ( REMAINING_SPACE <= 0 ) return;
+	}
 
-			// count the valid spaces to extend
-			// Do not take the first nor the last space into account
-			let validSpaces = 0;
-			for ( let j = 1; j < line.length - 1; j++ ) {
+}
 
-				validSpaces += line[ j ].char === ' ' ? 1 : 0;
 
-			}
-			const additionalSpace = REMAINING_SPACE / validSpaces;
 
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/bounds/PaddingProperty.js
 
-			// for right justification, process the loop in reverse
-			let inverter = 1;
-			if ( ALIGNMENT === JUSTIFY_RIGHT ) {
 
-				line.reverse();
-				inverter = -1;
 
-			}
 
-			let incrementalOffsetX = 0;
+class PaddingProperty extends StyleVector4Property {
 
-			// start at ONE to avoid first space
-			for ( let j = 1; j <= line.length - 1; j++ ) {
+	constructor( defaultValue ) {
 
-				// apply offset on each char
-				const inlineCharacter = line[ j ];
-				inlineCharacter.offsetX += incrementalOffsetX * inverter;
+		super('padding', defaultValue )
 
-				// and increase it when space
-				incrementalOffsetX += inlineCharacter.char === ' ' ? additionalSpace : 0;
+	}
 
-			}
+	computeOutputValue( element ) {
 
-			// for right justification, the loop was processed in reverse
-			if ( ALIGNMENT === JUSTIFY_RIGHT ) {
-				line.reverse();
-			}
+		super.computeOutputValue( element );
 
+		element._bounds._needsUpdate = true;
+		element._bounds._needsRender = true;
+		element._layouter._needsProcess = true;
+		element._renderer._needsRender = true;
 
+		if( element._parent._value ){
+			element._parent._value._layouter._needsProcess = true;
 		}
-
 	}
 
 }
 
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/Style4DimensionsProperty.js
 
-const _computeLineOffset = ( line, ALIGNMENT, INNER_WIDTH, lastLine ) => {
 
-	switch ( ALIGNMENT ) {
 
-		case JUSTIFY_LEFT:
-		case JUSTIFY:
-		case LEFT:
-			return -INNER_WIDTH / 2;
 
-		case JUSTIFY_RIGHT:
-		case RIGHT:
-			return -line.width + ( INNER_WIDTH / 2 );
+class Style4DimensionsProperty extends StyleVector4Property {
 
+	constructor( propertyId, defaultValue ) {
 
-		case TextAlign_CENTER:
-			return -line.width / 2;
+		super( propertyId, defaultValue, false );
 
-		case JUSTIFY_CENTER:
-			if ( lastLine ) {
+	}
 
-				// center alignement
-				return -line.width / 2;
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-			}
-
-				// left alignment
-				return -INNER_WIDTH / 2;
-
-		default:
-			console.warn( `textAlign: '${ALIGNMENT}' is not valid` );
+		console.log( this._value, this._input)
+		this._vector4ValueSetterFinal( this._value, this._input, element );
 
 	}
 
-};
+	set inline( value ) {
 
-;// CONCATENATED MODULE: ./src/components/core/InlineManager.js
-/**
+		this._input = value;
 
-Job: Positioning inline elements according to their dimensions inside this component
+		this._needsUpdate = true;
 
-Knows: This component dimensions, and its children dimensions
+	}
 
-This module is used for Block composition (Object.assign). A Block is responsible
-for the positioning of its inline elements. In order for it to know what is the
-size of these inline components, parseParams must be called on its children first.
+	/**
+	 *
+	 * @param {Vector4} vector4
+	 * @param {Vector4|Array.<Number>|Number|String} value
+	 * @protected
+	 */
+	_vector4ValueSetterFinal( vector4, value, element ) {
 
-It's worth noting that a Text is not positioned as a whole, but letter per letter,
-in order to create a line break when necessary. It's Text that merge the various letters
-in its own updateLayout function.
+		if ( value instanceof external_three_namespaceObject.Vector4 ) {
 
- */
+			return vector4.copy( value );
 
+		}
 
+		if ( typeof value === 'string' || value instanceof String ) {
 
-function InlineManager( Base ) {
+			value = value.split( ' ' );
 
-	return class InlineManager extends Base {
+		}
 
-		/** Compute children .inlines objects position, according to their pre-computed dimensions */
-		computeInlinesPosition() {
+		if ( Array.isArray( value ) ) {
 
-			// computed by BoxComponent
-			const INNER_WIDTH = this.getWidth() - ( this.padding * 2 || 0 );
-			const INNER_HEIGHT = this.getHeight() - ( this.padding * 2 || 0 );
+			switch ( value.length ) {
 
-			// got by MeshUIComponent
-			const JUSTIFICATION = this.getJustifyContent();
-			const ALIGNMENT = this.getTextAlign();
+				case 1:
+					return vector4.setScalar( this._parseValue( value[ 0 ], element ) );
 
-			const INTERLINE = this.getInterLine();
+				case 2:
+					vector4.x = vector4.z = this._parseValue(value[ 0 ]);
+					vector4.y = vector4.w = this._parseValue(value[ 1 ]);
+					return vector4;
 
-			// Compute lines
-			const lines = this.computeLines();
+				case 3:
+					vector4.x = this._parseValue(value[ 0 ]);
+					vector4.y = this._parseValue(value[ 1 ]);
+					vector4.z = this._parseValue(value[ 2 ]);
+					return vector4;
 
-			/////////////////////////////////////////////////////////////////
-			// Position lines according to justifyContent and contentAlign
-			/////////////////////////////////////////////////////////////////
+				case 4:
+					vector4.x = this._parseValue(value[ 0 ]);
+					vector4.y = this._parseValue(value[ 1 ]);
+					vector4.z = this._parseValue(value[ 2 ]);
+					vector4.w = this._parseValue(value[ 3 ]);
+					return vector4;
 
-			// individual vertical offset
+				default:
+					console.error( 'StyleVector4Property::set() Four Dimension property had more than four values' );
+					return;
 
-			let textHeight = lines.reduce( ( offsetY, line, i, arr ) => {
+			}
 
-				const charAlignement = line.lineHeight - line.lineBase;
+		}
 
-				line.forEach( ( inline ) => {
+		if ( !isNaN( value ) ) {
 
-					inline.offsetY = offsetY - line.lineHeight + charAlignement + arr[ 0 ].lineHeight;
+			vector4.setScalar( value );
 
-				} );
+		}
 
-				return offsetY - line.lineHeight - INTERLINE;
+		return vector4;
 
-			}, 0 ) + INTERLINE;
+	}
 
-			//
 
-			textHeight = Math.abs( textHeight );
+	_parseValue( v , element ){
 
-			// Line vertical positioning
+		if( !isNaN(v) ) return parseFloat(v);
 
-			const justificationOffset = ( () => {
-				switch ( JUSTIFICATION ) {
+		if( v.endsWith('em') ) {
 
-					case 'start':
-						return ( INNER_HEIGHT / 2 ) - lines[ 0 ].lineHeight;
-					case 'end':
-						return textHeight - lines[ 0 ].lineHeight - ( INNER_HEIGHT / 2 ) + ( lines[ lines.length - 1 ].lineHeight - lines[ lines.length - 1 ].lineHeight );
-					case 'center':
-						return ( textHeight / 2 ) - lines[ 0 ].lineHeight;
-					default:
-						console.warn( `justifyContent: '${JUSTIFICATION}' is not valid` );
+			return parseFloat( v.replace(/[^0-9.]+/,"") ) * element._fontSize._value;
 
-				}
-			} )();
+		}
 
-			// const justificationOffset = 0;
+	}
 
-			//
+}
 
-			lines.forEach( ( line ) => {
 
-				line.forEach( ( inline ) => {
 
-					inline.offsetY += justificationOffset;
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/bounds/MarginProperty.js
 
-				} );
 
-			} );
 
-			// Horizontal positioning
-			textAlign( lines, ALIGNMENT, INNER_WIDTH );
 
+// export default class MarginProperty extends StyleVector4Property {
+class MarginProperty extends Style4DimensionsProperty {
 
-			// Make lines accessible to provide helpful informations
-			this.lines = lines;
+	constructor() {
 
-		}
+		super('margin', new external_three_namespaceObject.Vector4(0,0,0,0) )
 
+	}
 
-		calculateBestFit( bestFit ) {
+	computeOutputValue( element ) {
 
-			if ( this.childrenInlines.length === 0 ) return;
+		super.computeOutputValue( element );
 
-			switch ( bestFit ) {
-				case 'grow':
-					this.calculateGrowFit();
-					break;
-				case 'shrink':
-					this.calculateShrinkFit();
-					break;
-				case 'auto':
-					this.calculateAutoFit();
-					break;
-			}
+		element._renderer._needsRender = true;
 
+		if( element._parent._value ){
+			element._parent._value._flexDirection._needsProcess = true;
 		}
+	}
 
-		calculateGrowFit() {
+}
 
-			const INNER_HEIGHT = this.getHeight() - ( this.padding * 2 || 0 );
+;// CONCATENATED MODULE: ./src/utils/mediator/transformers/CommonTransformers.js
+/**
+ * Transfer the alphaTest value from MeshUIComponent to material
+ * @type {import('../Mediator').MediationTransformer}
+ */
+const directTransfer = function ( target, targetProperty, value ) {
 
-			//Iterative method to find a fontSize of text children that text will fit into container
-			let iterations = 1;
-			const heightTolerance = 0.075;
-			const firstText = this.childrenInlines.find( inlineComponent => inlineComponent.isText );
+	target[targetProperty] = value;
 
-			let minFontMultiplier = 1;
-			let maxFontMultiplier = 2;
-			let fontMultiplier = firstText._fitFontSize ? firstText._fitFontSize / firstText.getFontSize() : 1;
-			let textHeight;
+}
 
-			do {
+const directTransferNotNull = function( target, targetProperty, value ) {
 
-				textHeight = this.calculateHeight( fontMultiplier );
+	if( value === null ) return;
 
-				if ( textHeight > INNER_HEIGHT ) {
+	target[targetProperty] = value;
 
-					if ( fontMultiplier <= minFontMultiplier ) { // can't shrink text
+}
 
-						this.childrenInlines.forEach( inlineComponent => {
+;// CONCATENATED MODULE: ./src/utils/mediator/Mediator.js
 
-							if ( inlineComponent.isInlineBlock ) return;
 
-							// ensure fontSize does not shrink
-							inlineComponent._fitFontSize = inlineComponent.getFontSize();
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-						} );
+/* eslint-enable no-unused-vars */
+/**
+ * An option function to transform value from subject to target
+ * @typedef {(target:any, targetProperty:string, value:any) => void} MediationTransformer
+ *
+ */
 
-						break;
+/**
+ * @typedef {Object.<{subjectProperty:string, trans?:MediationTransformer}>} MediationDefinition
+ *
+ */
 
-					}
+class Mediator{
 
-					maxFontMultiplier = fontMultiplier;
-					fontMultiplier -= ( maxFontMultiplier - minFontMultiplier ) / 2;
+	/**
+	 * @constructor
+	 * @param {MediationDefinition} definition
+	 */
+	constructor( definition ) {
 
-				} else {
+		/**
+		 *
+		 * @type {MediationDefinition}
+		 * @private
+		 */
+		this._definition = definition;
 
-					if ( Math.abs( INNER_HEIGHT - textHeight ) < heightTolerance ) break;
+	}
 
-					if ( Math.abs( fontMultiplier - maxFontMultiplier ) < 5e-10 ) maxFontMultiplier *= 2;
+	/**
+	 *
+	 * @param {MediationDefinition} value
+	 */
+	set definition( value ) {
 
-					minFontMultiplier = fontMultiplier;
-					fontMultiplier += ( maxFontMultiplier - minFontMultiplier ) / 2;
+		this._definition = value;
 
-				}
+	}
 
-			} while ( ++iterations <= 10 );
 
-		}
+	/**
+	 *
+	 * @param {MeshUIBaseElement} subject
+	 * @param {any} target
+	 * @param {Object.<(string|number), any>} options
+	 * @param {any} [secondTarget=null]
+	 */
+	mediate( subject, target, options, secondTarget = null ) {
 
-		calculateShrinkFit() {
+		// Mediate each subject properties to material
+		for ( const subjectProperty in this._definition ) {
+			const mediationDefinition = this._definition[subjectProperty];
 
-			const INNER_HEIGHT = this.getHeight() - ( this.padding * 2 || 0 );
+			if ( options[subjectProperty] !== undefined ) {
 
-			// Iterative method to find a fontSize of text children that text will fit into container
-			let iterations = 1;
-			const heightTolerance = 0.075;
-			const firstText = this.childrenInlines.find( inlineComponent => inlineComponent.isText );
+				// retrieve the mediation transformer to use for this property
+				const mediationTransformer = mediationDefinition.t ? mediationDefinition.t : directTransfer;
+				mediationTransformer( target, mediationDefinition.m, options[subjectProperty] );
 
-			let minFontMultiplier = 0;
-			let maxFontMultiplier = 1;
-			let fontMultiplier = firstText._fitFontSize ? firstText._fitFontSize / firstText.getFontSize() : 1;
-			let textHeight;
+				// Also transfert to second target is isset
+				if( secondTarget ) {
 
-			do {
+					mediationTransformer( secondTarget, mediationDefinition.m, options[subjectProperty] );
 
-				textHeight = this.calculateHeight( fontMultiplier );
+				}
 
-				if ( textHeight > INNER_HEIGHT ) {
+			}
 
-					maxFontMultiplier = fontMultiplier;
-					fontMultiplier -= ( maxFontMultiplier - minFontMultiplier ) / 2;
+		}
 
-				} else {
+	}
 
-					if ( fontMultiplier >= maxFontMultiplier ) { // can't grow text
 
-						this.childrenInlines.forEach( inlineComponent => {
+	/***********************************************************************************************************************
+	 * STATIC
+	 **********************************************************************************************************************/
 
-							if ( inlineComponent.isInlineBlock ) return;
+	/**
+	 *
+	 * @param {MeshUIComponent} subject
+	 * @param {any} target
+	 * @param {Object.<(string|number), any>} options
+	 * @param {Object.<{subjectProperty:string, t?:(target:any, targetProperty:string, value:any) => void}>} mediationDefinitions
+	 * @param {any} [secondTarget=null]
+	 */
+	static mediate( subject, target, options, mediationDefinitions, secondTarget = null ) {
 
-							// ensure fontSize does not grow
-							inlineComponent._fitFontSize = inlineComponent.getFontSize();
+		// Cannot mediate if target not defined
+		if( !target ) return;
 
-						} );
+		// Mediate each subject properties to material
+		for ( const subjectProperty in mediationDefinitions ) {
+			const definition = mediationDefinitions[subjectProperty];
 
-						break;
+			if ( options[subjectProperty] !== undefined ) {
 
-					}
+				// retrieve the mediation transformer to use for this property
+				const mediationTransformer = definition.t ? definition.t : directTransfer;
+				mediationTransformer( target, definition.m, options[subjectProperty] );
 
-					if ( Math.abs( INNER_HEIGHT - textHeight ) < heightTolerance ) break;
+				// Also transfert to second target is isset
+				if( secondTarget ) {
 
-					minFontMultiplier = fontMultiplier;
-					fontMultiplier += ( maxFontMultiplier - minFontMultiplier ) / 2;
+					mediationTransformer( secondTarget, definition.m, options[subjectProperty] );
 
 				}
 
-			} while ( ++iterations <= 10 );
+			}
+
 		}
 
-		calculateAutoFit()  {
+	}
 
-			const INNER_HEIGHT = this.getHeight() - ( this.padding * 2 || 0 );
 
-			//Iterative method to find a fontSize of text children that text will fit into container
-			let iterations = 1;
-			const heightTolerance = 0.075;
-			const firstText = this.childrenInlines.find( inlineComponent => inlineComponent.isText );
+}
 
-			let minFontMultiplier = 0;
-			let maxFontMultiplier = 2;
-			let fontMultiplier = firstText._fitFontSize ? firstText._fitFontSize / firstText.getFontSize() : 1;
-			let textHeight;
+;// CONCATENATED MODULE: ./src/core/properties/hierarchy/ParentProperty.js
 
-			do {
 
-				textHeight = this.calculateHeight( fontMultiplier );
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-				if ( textHeight > INNER_HEIGHT ) {
+/* eslint-enable no-unused-vars */
 
-					maxFontMultiplier = fontMultiplier;
-					fontMultiplier -= ( maxFontMultiplier - minFontMultiplier ) / 2;
+class ParentProperty extends BaseProperty {
 
-				} else {
+	constructor() {
 
-					if ( Math.abs( INNER_HEIGHT - textHeight ) < heightTolerance ) break;
+		super('parent', null, false);
 
-					if ( Math.abs( fontMultiplier - maxFontMultiplier ) < 5e-10 ) maxFontMultiplier *= 2;
+	}
 
-					minFontMultiplier = fontMultiplier;
-					fontMultiplier += ( maxFontMultiplier - minFontMultiplier ) / 2;
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update when :
+	 * 		- element has been added
+	 * 		- element has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) {
+		/* eslint-enable no-unused-vars */
 
-				}
+		if ( element.parent && element.parent.isUI ) {
 
-			} while ( ++iterations <= 10 );
-		}
+			this._value = element.parent;
+			// this.position.z = this.getOffset();
 
-		/**
-		 * computes lines based on children's inlines array.
-		 * @private
-		 */
-		computeLines() {
+		} else {
 
-			// computed by BoxComponent
-			const INNER_WIDTH = this.getWidth() - ( this.padding * 2 || 0 );
+			this._value = null;
 
-			// Will stock the characters of each line, so that we can
-			// correct lines position before to merge
-			const lines = [ [] ];
+		}
 
-			this.childrenInlines.reduce( ( lastInlineOffset, inlineComponent ) => {
+		// @TODO : parentElement
+		// // set elements as root
+		// if ( element.isBlock && !this._value ) {
+		//
+		// 	ThreeMeshUI.addRoot( element );
+		// 	element.pseudoClassList.add('root');
+		//
+		// } else {
+		//
+		// 	ThreeMeshUI.removeRoot( element );
+		// 	element.pseudoClassList.remove('root');
+		//
+		// }
 
-					// Abort condition
 
-					if ( !inlineComponent.inlines ) return;
+	}
 
-					//////////////////////////////////////////////////////////////
-					// Compute offset of each children according to its dimensions
-					//////////////////////////////////////////////////////////////
+	set value( value ) {
 
-					const FONTSIZE = inlineComponent._fitFontSize || inlineComponent.getFontSize();
-					const LETTERSPACING = inlineComponent.isText ? inlineComponent.getLetterSpacing() * FONTSIZE : 0;
-					const WHITESPACE = inlineComponent.getWhiteSpace();
-					const BREAKON = inlineComponent.getBreakOn();
+		console.warn('ParentProperty is readonly');
 
-					const whiteSpaceOptions = {
-						WHITESPACE,
-						LETTERSPACING,
-						BREAKON,
-						INNER_WIDTH
-					}
+	}
 
-					const currentInlineInfo = inlineComponent.inlines.reduce( ( lastInlineOffset, inline, i, inlines ) => {
+	/**
+	 *
+	 * @return {MeshUIBaseElement}
+	 */
+	get value() { return this._value; }
 
-						// Line break
-						const shouldBreak = Whitespace_shouldBreak(inlines,i,lastInlineOffset, whiteSpaceOptions );
 
-						if ( shouldBreak ) {
+	/**
+	 *
+	 * @param {(p:Object3D)=>boolean } conditionCallback
+	 */
+	find( conditionCallback ) {
 
-							lines.push( [ inline ] );
+		if( this._value ) {
 
-							inline.offsetX = inline.xoffset;
+			if( conditionCallback( this._value) ) {
 
-							// restart the lastInlineOffset as zero.
-							if ( inline.width === 0 ) return 0;
+				return this._value;
 
-							// compute lastInlineOffset normally
-							// except for kerning which won't apply
-							// as there is visually no lefthanded glyph to kern with
-							return inline.xadvance + LETTERSPACING;
+			}
 
-						}
+			return this._value._parent.find( conditionCallback );
 
-						lines[ lines.length - 1 ].push( inline );
+		}
 
-						inline.offsetX = lastInlineOffset + inline.xoffset + inline.kerning;
+		return null;
 
-						return lastInlineOffset + inline.xadvance + inline.kerning + LETTERSPACING;
+	}
 
-					}, lastInlineOffset );
 
-					//
+	/**
+	 *
+	 */
+	dispose() {
 
-					return currentInlineInfo;
+		this._value = null;
 
-				}, 0 );
+	}
 
-			// Compute lines dimensions
 
-			lines.forEach( ( line ) => {
+}
 
-				//
+;// CONCATENATED MODULE: ./src/utils/NumberUtils.js
+/**
+ * Get rid of the precision issue
+ * @param numA
+ * @param numB
+ * @param precision
+ * @return {boolean}
+ */
+const numberEquals = function ( numA, numB, precision = 6 ) {
 
-				line.lineHeight = line.reduce( ( height, inline ) => {
+	return numA.toFixed(precision) === numB.toFixed(precision)
 
-					const charHeight = inline.lineHeight !== undefined ? inline.lineHeight : inline.height;
-					// const charHeight = inline.height;
+}
 
-					return Math.max( height, charHeight );
+/**
+ *
+ * @param unprecisedNumber
+ * @param precision
+ * @return {number}
+ */
+const numberPrecise = function ( unprecisedNumber, precision = 6 ) {
 
-				}, 0 );
+	return parseFloat( unprecisedNumber.toFixed( precision ) );
 
-				//
+}
 
-				line.lineBase = line.reduce( ( lineBase, inline ) => {
+;// CONCATENATED MODULE: ./src/core/properties/NumberProperty.js
 
-					const newLineBase = inline.lineBase !== undefined ? inline.lineBase : inline.height;
-					// const newLineBase = inline.height;
 
-					return Math.max( lineBase, newLineBase );
 
-				}, 0 );
+class NumberProperty extends BaseProperty{
 
-				//
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {number} [value]
+	 */
+	constructor( propertyId, value ) {
 
-				line.width = 0;
-				const lineHasInlines = line[ 0 ];
+		super( propertyId, value, true);
 
-				if ( lineHasInlines ) {
+		this.output = this._outputValue;
+	}
 
-					// starts by processing whitespace, it will return a collapsed left offset
-					const WHITESPACE = this.getWhiteSpace();
-					const whiteSpaceOffset = collapseWhitespaceOnInlines( line, WHITESPACE );
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set value( value ) {
 
-					// apply the collapsed left offset to ensure the starting offset is 0
-					line.forEach( ( inline ) => {
+		if( ! this.isValid( value) ) return;
 
-						inline.offsetX -= whiteSpaceOffset;
+		if( numberEquals(this._value, value) ) return;
 
-					} );
+		this._value = value;
 
-					// compute its width: length from firstInline:LEFT to lastInline:RIGHT
-					line.width = this.computeLineWidth( line );
+		this._needsUpdate = true;
 
-				}
+	}
 
-			} );
 
-			return lines;
-		}
 
-		calculateHeight( fontMultiplier ) {
+	/**
+	 *
+	 * @return {number}
+	 */
+	get value() { return this._value; }
 
-			this.childrenInlines.forEach( inlineComponent => {
+}
 
-				if ( inlineComponent.isInlineBlock ) return;
+;// CONCATENATED MODULE: ./src/core/properties/SideProperty.js
 
-				// Set font size and recalculate dimensions
-				inlineComponent._fitFontSize = inlineComponent.getFontSize() * fontMultiplier;
-				inlineComponent.calculateInlines( inlineComponent._fitFontSize );
 
-			} );
 
-			const lines = this.computeLines();
+/**
+ * @property {number|"inherit"} value
+ */
+class SideProperty extends InheritableProperty {
 
-			const INTERLINE = this.getInterLine();
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId ) {
 
-			const textHeight = lines.reduce( ( offsetY, line ) => {
+		super( propertyId, 'inherit', true);
 
-				return offsetY - line.lineHeight - INTERLINE;
+		this.isValid = SideProperty_isValid;
 
-			}, 0 ) + INTERLINE;
+	}
 
-			return Math.abs( textHeight );
-		}
+}
 
-		/**
-		 * Compute the width of a line
-		 * @param line
-		 * @returns {number}
-		 */
-		computeLineWidth( line ) {
+const SideProperty_AVAILABLE_VALUES = [ external_three_namespaceObject.FrontSide, external_three_namespaceObject.BackSide, external_three_namespaceObject.DoubleSide ];
 
-			// only by the length of its extremities
-			const firstInline = line[ 0 ];
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function SideProperty_isValid( value ) {
 
-			const lastInline = line[ line.length - 1 ];
+	if( SideProperty_AVAILABLE_VALUES.indexOf( value) === -1 ){
 
-			// Right + Left ( left is negative )
-			return (lastInline.offsetX + lastInline.width) + firstInline.offsetX;
+		console.warn(`SideProperty value '${value}' is not valid. Abort`);
+		return false;
 
-		}
+	}
 
-	};
+	return true;
 
 }
 
@@ -1544,29 +1536,43 @@ function InlineManager( Base ) {
 
 
 
+// JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+
+
+
+
+/* eslint-enable no-unused-vars */
+
 
 /**
  * @abstract
  */
 class FontVariant extends external_three_namespaceObject.EventDispatcher {
 
+	/**
+	 *
+	 * @param {string} weight
+	 * @param {string} style
+	 */
 	constructor( weight, style ) {
 
 		super();
 
-		this._isReady = false;
+		/** @private */ this._isReady = false;
 
-		this._weight = weight;
-		this._style = style;
+		/** @protected */ this._weight = weight;
+		/** @protected */ this._style = style;
 
-		this._size = 42;
-		this._lineHeight = 42;
-		this._lineBase = 42;
+		/** @protected */ this._size = 42;
+		/** @protected */ this._lineHeight = 42;
+		/** @protected */ this._lineBase = 42;
 
 		/**
 		 *
-		 * @type {TypographyFont}
-		 * @private
+		 * @type {TypographicFont}
+		 * @protected
 		 */
 		this._font = null;
 
@@ -1574,34 +1580,70 @@ class FontVariant extends external_three_namespaceObject.EventDispatcher {
 
 	/**
 	 *
-	 * @returns {TypographyFont}
+	 * @returns {TypographicFont}
 	 */
 	get typographic() { return this._font; }
 
+	/**
+	 *
+	 * @returns {boolean}
+	 */
 	get isReady() {
 
 		return this._isReady;
 
 	}
 
+	/**
+	 *
+	 * @returns {string}
+	 */
 	get weight() {
 
 		return this._weight;
 
 	}
 
+	/**
+	 *
+	 * @returns {string}
+	 */
 	get style() {
 
 		return this._style;
 
 	}
 
+	/**
+	 *
+	 * @returns {Texture}
+	 */
 	get texture() {
 
 		return this._texture;
 
 	}
 
+	/**
+	 * @param {Function.<ShaderMaterial|Material>} v
+	 * @abstract
+	 */
+	set fontMaterial( v ) {
+		throw Error( `FontVariant('${this.id}')::fontMaterial - is abstract.` );
+	}
+
+	/**
+	 * @return {Function.<ShaderMaterial|Material>}
+	 * @abstract
+	 */
+	get fontMaterial() {
+		throw Error( `FontVariant('${this.id}')::fontMaterial - is abstract.` );
+	}
+
+	/**
+	 *
+	 * @returns {string}
+	 */
 	get id(){
 		return `${this._name}(w:${this.weight},s:${this.style})`;
 	}
@@ -1609,37 +1651,49 @@ class FontVariant extends external_three_namespaceObject.EventDispatcher {
 	/**
 	 *
 	 * @param {string} character
-	 * @returns {MSDFTypographyCharacter}
+	 * @returns {TypographicGlyph}
 	 */
-	getTypographyCharacter( character ) {
+	getTypographicGlyph( character ) {
 
-		let typographyCharacter = this._chars[ character ];
-		if ( typographyCharacter ) return typographyCharacter;
+		let typographicGlyph = this._chars[ character ];
+		if ( typographicGlyph ) return typographicGlyph;
 
+		// Auto generate whitespace chars
 		if ( character.match( /\s/ ) ) return this._chars[ " " ];
 
-		const fallbackCharacter = font_FontLibrary.missingCharacter( this, character );
+		const fallbackCharacter = this._getFallbackCharacter( character );
 		if( fallbackCharacter ) {
 
-			typographyCharacter = this._chars[ fallbackCharacter ];
-			if ( typographyCharacter ) return typographyCharacter;
+			typographicGlyph = this._chars[ fallbackCharacter ];
+			if ( typographicGlyph ) return typographicGlyph;
 
 		}
 
-		throw Error( `FontVariant('${this.id}')::getTypographyCharacter() - character('${character}') and/or fallback character were not found in provided msdf charset.` );
+		throw Error( `FontVariant('${this.id}')::getTypographicGlyph() - character('${character}') and/or fallback character were not found in provided msdf charset.` );
 	}
 
-	/* eslint-disable no-unused-vars */
 
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @abstract
+	 * @protected
+	 * @param {string} missingChar
+	 * @returns {string|null}
+	 */
+	_getFallbackCharacter( missingChar ) {  /* eslint-enable no-unused-vars */
+		throw new Error(`FontVariant(${typeof this})::_getFallbackCharacter() is abstract and should therefore be overridden.`);
+	}
 
+	/* eslint-disable no-unused-vars */
 	/**
 	 * Convert an InlineCharacter to a geometry
 	 *
 	 * @abstract
-	 * @param {InlineCharacter} inline
-	 * @returns {THREE.BufferGeometry|Array.<THREE.BufferGeometry>}
+	 * @param {InlineGlyph} inline
+	 * @param {MeshUIBaseElement} element
+	 * @returns {BufferGeometry|Array.<BufferGeometry>}
 	 */
-	getGeometryCharacter( inline ) {
+	getGeometricGlyph( inline, element ) {
 
 		throw new Error(`FontVariant(${typeof this})::getGeometryCharacter() is abstract and should therefore be overridden.`);
 
@@ -1663,17 +1717,17 @@ class FontVariant extends external_three_namespaceObject.EventDispatcher {
 
 	/**
 	 * Perform some changes on the character description of this font
-	 * @param {Object} adjustmentObject
+	 * @param {Object.<string,Object.<string,number|string>>} adjustmentObject
 	 */
-	adjustTypographyCharacters( adjustmentObject ){
+	adjustTypographicGlyphs( adjustmentObject ){
 
 		for ( const char in adjustmentObject ) {
 
-			const desc = this.getTypographyCharacter( char );
-			const characterAdjustment = adjustmentObject[ char ];
-			for ( const propertyToAdjust in characterAdjustment ) {
+			const typographicGlyph = this.getTypographicGlyph( char );
+			const glyphAdjustment = adjustmentObject[ char ];
+			for ( const propertyToAdjust in glyphAdjustment ) {
 
-				desc["_"+propertyToAdjust] = adjustmentObject[char][propertyToAdjust];
+				typographicGlyph["_"+propertyToAdjust] = adjustmentObject[char][propertyToAdjust];
 
 			}
 
@@ -1695,6 +1749,18 @@ class FontVariant extends external_three_namespaceObject.EventDispatcher {
 
 	}
 
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @abstract
+	 * @param element
+	 * @internal
+	 */
+	_alterElementProperties( element ) {  /* eslint-enable no-unused-vars */
+
+		throw new Error(`FontVariant(${typeof this})::_alterElementProperties() is abstract and should therefore be overridden.`);
+
+	}
+
 	/**
 	 *
 	 * @abstract
@@ -1704,7 +1770,7 @@ class FontVariant extends external_three_namespaceObject.EventDispatcher {
 	_readyCondition () {
 
 		// ie: MSDFFontVariant
-		// Must have chards and a texture
+		// Must have chars and a texture
 		// return this._chars && this._texture
 
 		throw new Error(`FontVariant(${typeof this})::_readyCondition() is abstract and should therefore be overridden.`);
@@ -1721,7 +1787,7 @@ const _readyEvent = { type: 'ready' };
 
 /**
  * Set the ready status of a fontVariant
- * @param fontVariant
+ * @param {FontVariant} fontVariant
  * @private
  */
 function _setReady( fontVariant ) {
@@ -1732,3774 +1798,13001 @@ function _setReady( fontVariant ) {
 }
 
 /**
- * @typedef {Object} MSDFJson
- * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
+ * @typedef {Object.<string,number>} KerningPairs
  *
- * @property {MSDFJsonInfo} info
- * @property {MSDFJsonCommon} common
- * @property {Array.<MSDFJsonPage>} pages
- * @property {Array.<MSDFJsonChar>} chars
- * @property {Array.<MSDFJsonKerning>} kernings
  */
 
-/**
- *
- * @typedef {Object} MSDFJsonInfo
- * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
- *
- * @property {string} face This is the name of the true type font.
- * @property {number} size The size of the true type font.
- * @property {boolean} bold The font is bold.
- * @property {boolean} italic The font is italic.
- * @property {string[]} charset The name of the OEM charset used (when not unicode).
- * @property {boolean} unicode 	Set to 1 if it is the unicode charset.
- * @property {number} stretchH The font height stretch in percentage. 100% means no stretch.
- * @property {number} smooth Set to 1 if smoothing was turned on.
- * @property {number} aa The supersampling level used. 1 means no supersampling was used.
- * @property {Array.<number>} padding TThe padding for each character (up, right, down, left).
- * @property {Array.<number>} spacing The spacing for each character (horizontal, vertical).
- * @property {number} outline (not found) The outline thickness for the characters.
- */
+/* harmony default export */ const font_FontVariant = (FontVariant);
 
-/**
- *
- * @typedef {Object} MSDFJsonCommon
- * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
- *
- * @property {number} lineHeight This is the distance in pixels between each line of text.
- * @property {number} base The number of pixels from the absolute top of the line to the base of the characters.
- * @property {number} scaleW The width of the texture, normally used to scale the x pos of the character image.
- * @property {number} scaleH The height of the texture, normally used to scale the y pos of the character image.
- * @property {number} pages The number of texture pages included in the font.
- * @property {boolean} packed
- * @property {number} alphaChnl
- * @property {number} redChnl
- * @property {number} greenChnl
- * @property {number[]} blueChnl
- */
+;// CONCATENATED MODULE: ./src/core/properties/FontProperty.js
 
-/**
- *
- * @typedef {Object} MSDFJsonPage
- * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
- *
- * @property {string} id The page id.
- * @property {string} file The texture file name.
- */
 
-/**
- *
- * @typedef {Object} MSDFJsonChar
- * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
- *
- * @property {number} id The character id.
- * @property {number} index The character index.
- * @property {string} char The character.
- * @property {number} x The left position of the character image in the texture.
- * @property {number} y The top position of the character image in the texture.
- * @property {number} width The width of the character image in the texture.
- * @property {number} height The height of the character image in the texture.
- * @property {number} xoffset How much the current position should be offset when copying the image from the texture to the screen.
- * @property {number} yoffset How much the current position should be offset when copying the image from the texture to the screen.
- * @property {number} xadvance How much the current position should be advanced after drawing the character.
- * @property {string} page The texture page where the character image is found.
- * @property {number} chnl The texture channel where the character image is found (1 = blue, 2 = green, 4 = red, 8 = alpha, 15 = all channels).
- */
 
+class FontProperty extends BaseProperty{
 
+	/**
+	 *
+	 * @param {FontVariant} [value=null]
+	 */
+	constructor( value = null ) {
 
-/**
- *
- * @typedef {Object} MSDFJsonKerning
- * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
- *
- * @property {number} first The first character id.
- * @property {number} second The second character id.
- * @property {number} amount How much the x position should be adjusted when drawing the second character immediately following the first.
- *
- */
+		super( 'font', value, false);
 
-;// CONCATENATED MODULE: ./src/font/TypographyFont.js
-class TypographyFont {
+		this._needsUpdate = false;
 
-	constructor() {
+		/**
+		 *
+		 * @type {FontVariant|null}
+		 * @internal
+		 */
+		this._fontVariant = null;
+
+
+		/**
+		 * @typedef ReadyClosure
+		 * @type { ()=> void|null }
+		 */
 
-		this._size = 42;
-		this._lineHeight = 42;
-		this._lineBase = 38;
+		/**
+		 *
+		 * @type {ReadyClosure}
+		 * @private
+		 */
+		this._handleFontReadyClosure = null;
 
-		this._name = "-";
+		/**
+		 * @override
+		 */
+		this.isValid = FontProperty_isValid;
 
-		this._charset = "";
 	}
 
-	get size() { return this._size; }
+	output( out ) {
 
-	get lineHeight() { return this._lineHeight; }
+		out[this._id] = this._fontVariant;
 
-	get lineBase() { return this._lineBase; }
+	}
 
-	get name() { return this._name; }
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 */
+	update( element, out ) { 	/* eslint-enable no-unused-vars */
 
-	get charset() { return this._charset; }
+		// if a previous font isset, be sure no event remains
+		if ( this._fontVariant && !this._fontVariant.isReady ) {
 
-}
+			this._fontVariant.removeEventListener( 'ready', this._handleFontReadyClosure );
 
-;// CONCATENATED MODULE: ./src/font/msdf/MSDFTypographyFont.js
+		}
 
+		// obtain font from value or from style combinaison
+		if( this._value && this._value instanceof font_FontVariant ) {
 
-class MSDFTypographyFont extends TypographyFont{
+			this._fontVariant = this._value;
 
-	/**
-	 *
-	 * @param {MSDFJson} json
-	 */
-	constructor( json ) {
+		} else {
 
-		super();
 
-		// base description
-		this._size = json.info.size;
-		this._lineHeight = json.common.lineHeight;
-		this._lineBase = json.common.base;
+			const fontFamily = element._fontFamily._value;
 
-		this._name = json.info.face;
+			if( typeof fontFamily !== 'string'  ) {
 
-		// MSDF
-		this._textureWidth = json.common.scaleW;
-		this._textureHeight = json.common.scaleH;
+				this._fontVariant = fontFamily.getVariant(
+					element._fontWeight._value,
+					element._fontStyle._value,
+				);
 
-		this._charset = json.chars.map( char => char.char ).join("");
+			}
 
-	}
+		}
 
-	get textureWidth() { return this._textureWidth; }
+		if( !this._fontVariant ) return;
 
-	get textureHeight() { return this._textureHeight; }
+		this._fontVariant._alterElementProperties( element );
 
-}
+		this._handleFontReadyClosure = _readyClosure( element, this );
 
-;// CONCATENATED MODULE: ./src/font/TypographyCharacter.js
-/**
- * @abstract
- */
-class TypographyCharacter {
+		// new font, means rebuild inlines, now or soon
+		if ( !this._fontVariant.isReady ) {
+
+			// @TODO : clear inlines components
+			// this.inlines = null;
+
+			this._fontVariant.addEventListener( 'ready', this._handleFontReadyClosure );
+
+		} else {
+
+			this._handleFontReadyClosure();
+
+		}
+
+		// Set the default material
+		if( !element._fontMaterial._defaultMaterial || !(element._fontMaterial._defaultMaterial instanceof this._fontVariant.fontMaterial) ) {
+
+			element._fontMaterial._defaultMaterial = new this._fontVariant.fontMaterial();
+			element._fontMaterial._needsUpdate = true;
+
+		}
+
+	}
 
 	/**
-	 *
-	 * @param {TypographyFont} typographicFont
+	 * @override
+	 * @param {FontVariant} value
 	 */
-	constructor( typographicFont ) {
+	set value( value ) {
 
-		this._char = "";
-		this._width = this._heigth = this._xadvance = 1;
-		this._xoffset = this._yoffset = 0;
+		if( ! this.isValid( value) ) return;
+
+		if( this._value !== value ) {
+
+			this._value = value;
+
+			this._needsUpdate = true;
+
+		}
 
-		/**
-		 *
-		 * @private
-		 */
-		this._font = typographicFont;
 	}
 
 	/**
 	 *
-	 * @returns {TypographyFont}
+	 * @return {FontVariant}
 	 */
-	get font() {
+	get value() { return this._value; }
 
-		return this._font;
 
-	}
+	/**
+	 *
+	 * @return {FontVariant|null}
+	 */
+	get fontVariant() { return this._fontVariant; }
 
 	/**
 	 *
-	 * @return {string}
 	 */
-	get char() {
+	dispose () {
 
-		return this._char;
+		if( this._handleFontReadyClosure ) {
 
-	}
+			this._fontVariant.removeEventListener( 'ready', this._handleFontReadyClosure );
+			this._handleFontReadyClosure = null;
 
-	get width() {
+		}
 
-		return this._width;
+		this._value = null;
+		this._fontVariant = null;
 
 	}
 
-	get height() {
+}
 
-		return this._heigth;
 
-	}
+/**
+ *
+ * @param {number} value
+ * @return {boolean}
+ * @private
+ */
+function FontProperty_isValid( value ) {
 
-	get xadvance() {
+	if( ! ( value instanceof font_FontVariant )  ) {
 
-		return this._xadvance;
+		console.warn(`.font value '${value}' is not valid. It requires a FontVariant instance. Aborted`);
+		return false;
 
 	}
 
-	get xoffset() {
-
-		return this._xoffset;
+	return true;
 
-	}
+}
 
-	get yoffset() {
+/**
+ *
+ * @param {MeshUIBaseElement} element
+ * @param {FontProperty} fontProperty
+ * @return {() => void}
+ * @private
+ */
+function _readyClosure( element, fontProperty ) {
+	return function () {
 
-		return this._yoffset;
+		fontProperty._needsUpdate = true;// ? update itself?
+		element._glyphs._needsProcess = true;
 
-	}
+		// this._transferToMaterial();
 
-	set yoffset( value ) {
+		// request parse update and parent layout
+		// this.update( true, true, false );
+		// this.getHighestParent().update( false, true, false );
 
-		this._yoffset = value;
+		// remove the listener
+		fontProperty._fontVariant.removeEventListener( 'ready', fontProperty._handleFontReadyClosure );
+		fontProperty._handleFontReadyClosure = null;
 
 	}
+}
 
-	/**
-	 *
-	 * @abstract
-	 * @returns {InlineCharacter}
-	 */
-	asInlineCharacter() {
-
-		throw new Error("Abstract... Need to be implemented")
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/visibility/Display.js
 
-	}
 
-}
 
-;// CONCATENATED MODULE: ./src/font/InlineCharacter.js
-class InlineCharacter {
+class Display extends SubStyleProperty {
 
-	/**
-	 *
-	 * @param {TypographyCharacter} characterDesc
-	 */
-	constructor( characterDesc ) {
+	constructor( defaultValue ) {
 
-		this._typographic = characterDesc;
+		super( 'display', defaultValue );
 
-		this._fontFactor = 1;
-		this._lineBreak = null;
+		// configure
+		this._value = 'flex';
+		this._allowsInherit = false;
+		this._needsUpdate = false;
 
-		this._fontSize = 0;
-		this._kerning = 0;
 
-		this._offsetX = 0;
-		this._offsetY = 0;
+		this.isValidValue = Display_isValid;
 
 	}
 
-	get typographic(){
+	computeOutputValue( element ) {
 
-		return this._typographic;
+		element._visible._value = this._output !== 'none';
 
 	}
+}
 
-	resetOffsets() {
+const Display_AVAILABLE_VALUES = ['none','flex'];
 
-		this._offsetX = this._offsetY = 0;
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function Display_isValid( value ) {
+
+	if( Display_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) display value '${value}' is not valid. Aborted` );
+		return false;
 
 	}
 
-	/*********************************************************************************************************************
-	 * GETTERS FROM CHARACTER DESCRIPTION
-	 ********************************************************************************************************************/
+	return true;
 
-	get xadvance() { return this._typographic.xadvance * this._fontFactor; }
+}
 
-	get xoffset() { return this._typographic.xoffset * this._fontFactor; }
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/bounds/BoxSizing.js
 
-	get yoffset() { return this._typographic.yoffset * this._fontFactor; }
 
-	get width() { return this._typographic.width * this._fontFactor ; }
 
-	get height() { return this._typographic.height * this._fontFactor; }
+class BoxSizing extends SubStyleProperty {
 
-	/**
-	 *
-	 * @return {string}
-	 */
-	get char() { return this._typographic.char; }
+	constructor( defaultValue ) {
 
-	set lineBreak( value ){
+		super( 'boxSizing', defaultValue );
 
-		this._lineBreak = value;
+		// Configure
+		this._allowsInherit = false;
 
-	}
+		this.isValidValue = BoxSizing_isValid;
 
-	get lineBreak() { return this._lineBreak; }
+	}
 
-	get anchor() {
+	computeOutputValue( element ) {
 
-		const lineHeight = this._typographic.font.lineHeight;
-		const lineBase = this._typographic.font.lineBase;
+		this._value = this._inheritedInput;
 
-		return ( ( this._typographic.yoffset + this._typographic.height - lineBase ) * this._fontSize ) / lineHeight;
+		element._bounds._needsUpdate = true;
 
 	}
 
-	get kerning() { return this._kerning * this._fontFactor; }
+}
 
-	set kerning( value ) {
 
-		this._kerning = value;
+/**
+ *
+ * @type {Array.<string>}
+ */
+const BoxSizing_AVAILABLE_VALUES = ['border-box', 'content-box'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function BoxSizing_isValid( value ) {
+
+	if( BoxSizing_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) boxSizing value '${value}' is not valid. Aborted` );
+		return false;
 
 	}
 
-	get fontSize() { return this._fontSize }
+	return true;
 
-	set fontSize( value ) {
+}
 
-		this._fontSize = value;
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/StyleColorProperty.js
 
-	}
 
 
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
 
-	get lineHeight() { return this._typographic.font.lineHeight * this._fontFactor; }
+class StyleColorProperty extends SubStyleProperty {
 
-	get offsetX() { return this._offsetX; }
+	constructor( propertyId, defaultValue ) {
 
-	set offsetX( value ){
+		super( propertyId, defaultValue, false );
 
-		this._offsetX = value;
+		/**
+		 * @type {Color|string|number}
+		 * @private
+		 */
+		this._input = defaultValue;
 
+		/**
+		 * @type {Color}
+		 * @protected
+		 */
+		this._value = new external_three_namespaceObject.Color();
+
+		this.output = this._outputValue;
 	}
 
-	get offsetY() { return this._offsetY; }
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @override
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-	set offsetY( value ){
+		if( this._input !== 'inherit' ) {
 
-		this._offsetY = value;
+			this._value.set(this._input);
+
+		}
 
 	}
 
+	set inline( value ) {
 
-	get lineBase() { return this._typographic.font.lineBase * this._fontFactor; }
+		// Colors are too wide to perform validation checks each time
+		// if( ! this.isValidValue( value ) ) return;
 
-	set fontFactor( value ){
+		this._input = this._inline = value;
 
-		this._fontFactor = value;
+		this._needsUpdate = true;
 
 	}
 
 }
 
-;// CONCATENATED MODULE: ./src/font/msdf/MSDFInlineCharacter.js
 
 
-class MSDFInlineCharacter extends InlineCharacter{
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/StyleFactorProperty.js
+
+
+class StyleFactorProperty extends SubStyleProperty {
 
 	/**
 	 *
-	 * @param {MSDFTypographyCharacter} characterDesc
+	 * @param {string} propertyId
+	 * @param {any} defaultValue
 	 */
-	constructor( characterDesc ) {
+	constructor( propertyId, defaultValue ) {
 
-		super( characterDesc );
+		super( propertyId, defaultValue, true );
 
-	}
+		this.isValidValue = StyleFactorProperty_isValid;
 
-	get uv() { return this.typographic.uv; }
+		this._allowsInherit = false;
 
-}
-
-;// CONCATENATED MODULE: ./src/font/msdf/MSDFTypographyCharacter.js
+		this._input = defaultValue;
 
+		this._value = defaultValue;
 
+		this.output = this._outputValue;
 
-class MSDFTypographyCharacter extends TypographyCharacter {
-
-	/**
-	 * @param {MSDFTypographyFont} fontDescription
-	 * @param {MSDFJsonChar} characterData
-	 */
-	constructor( fontDescription, characterData ) {
+		this.computeOutputValue = this._computeFromInherited;
 
-		super(fontDescription);
+	}
 
-		this._char = characterData.char;
-		this._width = characterData.width;
-		this._heigth = characterData.height;
 
-		this._xadvance = characterData.xadvance ? characterData.xadvance : this._width;
-		this._xoffset = characterData.xoffset ? characterData.xoffset : 0;
-		this._yoffset = characterData.yoffset ? characterData.yoffset : 0;
+	_outputValue( out ) {
 
-		// Msdf requires uvs
-		this._uv = null;
+		out[this._id] = this._inheritedInput;
 
-		if( !isNaN( characterData.x ) ) {
-			// transform absolute pixel values into uv values [0,1]
-			this._uv = {
-				left: characterData.x / fontDescription.textureWidth,
-				right: ( characterData.x + characterData.width ) / fontDescription.textureWidth,
-				top: 1 - ( ( characterData.y + characterData.height ) / fontDescription.textureHeight ),
-				bottom: 1 - ( characterData.y / fontDescription.textureHeight )
-			};
-		}
 	}
 
 
-	/**
-	 *
-	 * @returns {{left: number, right: number, top: number, bottom: number}|null}
-	 */
-	get uv() {
 
-		return this._uv;
+}
 
-	}
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function StyleFactorProperty_isValid( value ) {
 
-	/**
-	 * Abstraction
-	 *
-	 * @returns {MSDFInlineCharacter}
-	 */
-	asInlineCharacter() {
+	if ( value < 0 && value > 1.0 ) {
 
-		return new MSDFInlineCharacter( this );
+		console.warn( `(.style) styleFactorProperty('${this.id}') value '${value}' is not valid)` );
+		return false;
 
 	}
 
+	return true;
+
 }
 
-;// CONCATENATED MODULE: ./src/font/msdf/MSDFGeometryCharacter.js
 
 
-class MSDFGeometryCharacter extends external_three_namespaceObject.PlaneBufferGeometry {
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/background/BackgroundImage.js
 
-	/**
-	 *
-	 * @param {MSDFInlineCharacter} inline
-	 */
-	constructor( inline ) {
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-		super( inline.width, inline.height );
+/* eslint-enable no-unused-vars */
 
-		// If inline has UVs
-		if ( inline.uv ) {
 
-			this.mapUVs( inline );
+class BackgroundImage extends SubStyleProperty {
 
-			this.transformGeometry( inline );
+	constructor( defaultValue ) {
 
-			// White spaces (we don't want our plane geometry to have a visual width nor a height)
-		} else {
+		super( 'backgroundImage', defaultValue, true );
 
-			this.nullifyUVs();
 
-			this.scale( 0, 0, 1 );
+		this._input = null;
 
-			this.translate( 0, inline.fontSize / 2, 0 );
+		// configure
+		this._allowsInherit = false;
 
-		}
+		/**
+		 *
+		 * @type {Vector2}
+		 * @internal
+		 */
+		this._textureSize = new external_three_namespaceObject.Vector2( 1,1 );
+
+		this.isValidValue = BackgroundImage_isValid;
 
 	}
 
 	/**
-	 * Compute the right UVs that will map the MSDF texture so that the passed character
-	 * will appear centered in full size
-	 * @private
+	 * @override
+	 * @return {any|Texture|null}
 	 */
-	mapUVs( inline ) {
+	get value() {
 
-		const uvAttribute = this.attributes.uv;
+		return this._value;
 
-		for ( let i = 0; i < uvAttribute.count; i++ ) {
+	}
 
-			let u = uvAttribute.getX( i );
-			let v = uvAttribute.getY( i );
+	output( out ) {
 
-			[ u, v ] = ( () => {
+		out[this._id] = this._value;
 
-				switch ( i ) {
+		out['tSize'] = this._textureSize;
 
-					case 0 :
-						// return [ xMin, yMax ];
-						return [ inline.uv.left, inline.uv.bottom ];
-					case 1 :
-						// return [ xMax, yMax ];
-						return [ inline.uv.right, inline.uv.bottom ];
-					case 2 :
-						// return [ xMin, yMin ];
-						return [ inline.uv.left, inline.uv.top ];
-					case 3 :
-						// return [ xMax, yMin ];
-						return [ inline.uv.right, inline.uv.top ];
+	}
 
-				}
 
-			} )();
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-			uvAttribute.setXY( i, u, v );
+		// @TODO : URL
+		this._value = this._inheritedInput;
 
+		// ?
+		// out[this.id] = this._value;
+
+		if( this._value instanceof external_three_namespaceObject.Texture && !this._value.image ) {
+			console.warn( `ThreeMeshUI - .backgroundImage :: Please provide preloaded texture in order to have accurate sizing.`);
+			return;
 		}
 
+		this._needsProcess = true;
+
 	}
 
-	/** Set all UVs to 0, so that none of the glyphs on the texture will appear */
-	nullifyUVs() {
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._value ) {
 
-		const uvAttribute = this.attributes.uv;
+			this._textureSize.set( this._value.image.width, this._value.image.height );
 
-		for ( let i = 0; i < uvAttribute.count; i++ ) {
+		} else {
 
-			uvAttribute.setXY( i, 0, 0 );
+			this._textureSize.set( 1 , 1 );
 
 		}
 
 	}
 
-	/**
-	 *
-	 * @TODO: Apply pivot properties when splitText isset
-	 * Gives the previously computed scale and offset to the geometry
-	 * @param {MSDFInlineCharacter} inline
-	 */
-	transformGeometry( inline ) {
+}
 
-		//
+/* eslint-disable no-unused-vars */
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function BackgroundImage_isValid( value ) { /* eslint-enable no-unused-vars */
 
-		// @TODO : Evaluate this as being a property. It can wait until splitGeometry
-		this.translate(
-			inline.width / 2,
-			( inline.height / 2 ) - inline.anchor,
-			0
-		);
+	// @TODO : Texture or URL() or String or ID ?
+	//console.log( "todo, validate image value", value);
 
-	}
+	return true;
 
 }
 
-;// CONCATENATED MODULE: ./src/font/msdf/MSDFFontVariant.js
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/background/BackgroundSize.js
 
 
 
+/**
+ * @property {"cover"|"contain"|"stretch"} value
+ */
+class BackgroundSize extends SubStyleProperty {
 
+	constructor( defaultValue ) {
 
+		super( 'backgroundSize', defaultValue, true );
 
+		this.isValidValue = BackgroundSize_isValid;
 
-class MSDFFontVariant extends FontVariant {
+		this.output = this._outputValue;
+	}
 
-	constructor( weight, style, json, texture ) {
+}
 
-		super(weight, style);
+const BackgroundSize_AVAILABLE_VALUES = ['cover','contain','stretch'];
 
-		if ( json.pages ) {
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function BackgroundSize_isValid( value ) {
 
-			this._buildData( json );
+	if( BackgroundSize_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
 
-		} else {
+		console.warn( `(.style) backgroundSize value '${value}' is not valid. Aborted` );
+		return false;
 
-			_loadJson( this, json );
+	}
 
-		}
+	return true;
 
-		if ( texture instanceof external_three_namespaceObject.Texture ) {
+}
 
-			this._buildTexture( texture );
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/visibility/Overflow.js
 
-		} else {
 
-			_loadTexture( this, texture );
 
-		}
 
-		this._checkReadiness();
+class Overflow extends SubStyleProperty {
 
-	}
+	constructor( defaultValue ) {
 
+		super( 'overflow', defaultValue, true );
 
-	get texture() {
+		this.isValidValue = Overflow_isValid;
 
-		return this._texture;
+		/**
+		 *
+		 * @type {Array.<Plane>|null}
+		 * @internal
+		 */
+		this._clippingPlanes = null;
 
+		this._renderStrategy = this._emptyRender;
 	}
 
 	/**
-	 *
-	 * @param {MSDFJson} json
-	 * @private
+	 * Update of overflow is a bit different, as parent may trigger changes on it
+	 * @override
 	 */
-	_buildData( json ) {
+	update( element, out ) {
 
-		this._font = new MSDFTypographyFont( json );
+		// in any case, it will compute value. It doesn't have updateRequire evaluation
+		// let updateRequired = true;
 
-		this._kernings = this._buildKerningPairs( json );
-		this._chars = this._buildCharacters( json );
-		this._chars[ " " ] = this._buildCharacterWhite( json );
+		// Inline has priority if set
+		if ( this._inline !== undefined && this._inline !== 'unset' ) {
 
-		this._size = json.info.size;
-		this._lineHeight = json.common.lineHeight;
-		this._lineBase = json.common.base;
+			this._input = this._inline;
 
-	}
+		}
+		// or fallback on computed
+		else if ( this._computed !== undefined ) {
 
-	/**
-	 *
-	 * @param texture
-	 * @private
-	 */
-	_buildTexture( texture ) {
+			this._input = this._computed;
 
-		this._texture = texture;
+		}
 
-		texture.generateMipmaps = false;
-		texture.minFilter = external_three_namespaceObject.LinearFilter;
-		texture.magFilter = external_three_namespaceObject.LinearFilter;
+		if ( !this._allowsInherit ) {
 
-		texture.needsUpdate = true;
+			this._inheritedInput = this.getInheritedInput( element );
 
-	}
+		}
 
-	/**
-	 *
-	 * @param {MSDFInlineCharacter} inline
-	 * @returns {MSDFGeometryCharacter}
-	 */
-	getGeometryCharacter( inline ) {
+		this.computeOutputValue( element );
+
+		// rebuild same properties on children 'inheritance'
+		for ( const childUIElement of element._children._uis ) {
+			childUIElement[ `_overflow` ]._needsUpdate = true;
+		}
 
-		return new MSDFGeometryCharacter( inline );
+		this.output( out );
 
 	}
 
-	/**
-	 * Abstraction implementation
-	 *
-	 * @returns {boolean}
-	 * @private
-	 */
-	_readyCondition() {
+	output( out ) {
 
-		return this._chars && this._texture;
+		out['clippingPlanes'] = this._clippingPlanes;
 
 	}
 
-	/**
-	 * Ensure that each font variant has its kerning dictionary
-	 * @see src/font/msdf/FontVariantMSDF.js for an implementation
-	 *
-	 * @param {MSDFJson} json
-	 *
-	 * @returns {Object.<string, number>}
-	 * @private
-	 */
-	_buildKerningPairs( json ) {
+	computeOutputValue( element ) {
 
-		const friendlyKernings = {};
+		// update self --------------------
+		super.computeOutputValue( element );
 
-		// Loop through each kernings pairs defined in msdf json
-		for ( let i = 0; i < json.kernings.length; i++ ) {
+		if( this._value === 'hidden' ) {
 
-			const kerning = json.kernings[ i ];
+			this._renderStrategy = this._propagateRender;
 
-			// ignore zero kerned glyph pair
-			if ( kerning.amount === 0 ) continue;
+		}else{
 
-			// Build and store the glyph paired characters "ij","WA", ... as keys, referecing their kerning amount
-			const glyphPair = String.fromCharCode( kerning.first, kerning.second );
+			this._renderStrategy = this._emptyRender;
+			this._clippingPlanes = null;
+		}
 
-			// This would then be available for fast access
-			friendlyKernings[ glyphPair ] = kerning.amount;
+
+		const parent = element._parent._value;
+		if( parent !== null ) {
+
+			// Check that parent is hiddenOverflow or has clippingPlanes
+			const overflowParent = parent._overflow;
+			if ( ( overflowParent._value === 'hidden' || overflowParent._clippingPlanes !== null ) && !this._clippingPlanes ) {
+
+				// add planes and render
+				this._clippingPlanes =  [
+					// top
+					new external_three_namespaceObject.Plane( new external_three_namespaceObject.Vector3( 0, -1, 0 ), 1 ),
+					// right
+					new external_three_namespaceObject.Plane( new external_three_namespaceObject.Vector3( -1, 0, 0 ), 1 ),
+					// bottom
+					new external_three_namespaceObject.Plane( new external_three_namespaceObject.Vector3( 0, 1, 0 ), 1 ),
+					// left
+					new external_three_namespaceObject.Plane( new external_three_namespaceObject.Vector3( 1, 0, 0 ), 1 ),
+				];
+
+				// bind the parent to the clipping plane in a custom property
+				for ( let i = 0; i < this._clippingPlanes.length; i++ ) {
+					this._clippingPlanes[ i ].parent = parent;
+				}
+
+				// Also add parent clipping planes if isset
+				if( overflowParent._clippingPlanes !== null ) {
+					this._clippingPlanes.push( ...overflowParent._clippingPlanes );
+				}
+
+				this._renderStrategy = this._hiddenRender;
+				this._needsRender = true;
+
+			} else if ( ( overflowParent._value === 'visible' || overflowParent._clippingPlanes === null ) && this._clippingPlanes !== null ){
+
+				// remove planes and render
+				this._clippingPlanes = null;
+				this._renderStrategy = this._emptyRender;
+				this._needsRender = true;
+
+			}
 
 		}
 
-		// update the font to keep it
-		return friendlyKernings;
+	}
+
+	render( element) {
+
+		this._renderStrategy( element );
 
 	}
 
+	/* eslint-disable no-unused-vars */	_emptyRender( element ) { /* eslint-enable no-unused-vars */ }
 
-	/**
-	 *
-	 * @param {MSDFJson} json
-	 * @private
-	 */
-	_buildCharacters( json ) {
+	_hiddenRender( element ) {
 
-		const friendlyChars = {};
 
-		for ( let i = 0; i < json.chars.length; i++ ) {
-			const charOBJ = json.chars[ i ];
+		const parentUI = element._parent._value;
+
+		const yLimit = parentUI._bounds._offsetHeight;
+		const xLimit = parentUI._bounds._offsetWidth;
+		const padding = parentUI._padding._value;
+		const border = parentUI._borderWidth._value;
+
+		for ( let i = 0; i < 4 && i < this._clippingPlanes.length ; i++ ) {
+			const clippingPlane = this._clippingPlanes[ i ];
+
+			switch ( i % 4 ) {
+				// top
+				case 0:
+					clippingPlane.constant = yLimit / 2 - ( padding.x + border.x );
+					break;
+
+				// right
+				case 1:
+					clippingPlane.constant = xLimit / 2 - ( padding.y + border.y );
+					break;
+
+				// bottom
+				case 2:
+					clippingPlane.constant = yLimit / 2 - ( padding.z + border.z );
+					break;
 
-			friendlyChars[ charOBJ.char ] = new MSDFTypographyCharacter( this._font, charOBJ );
+				// left
+				case 3:
+					clippingPlane.constant = xLimit / 2 - ( padding.w + border.w );
+					break;
+			}
+
+			clippingPlane.applyMatrix4( parentUI.matrixWorld )
 
 		}
 
-		return friendlyChars;
+		for ( let i = 0; i < element._children._uis.length; i++ ) {
+			const ui = element._children._uis[ i ];
+			ui._overflow._needsRender = true;
+		}
 
 	}
 
-	/**
-	 *
-	 * @param {MSDFJson} json
-	 * @private
-	 */
-	_buildCharacterWhite( json ) {
-		return new MSDFTypographyCharacter( this._font,
-			{
-				char: ' ',
-				width: json.info.size / 3,
-				height: json.info.size * 0.7,
-			});
+	_propagateRender( element ) {
+
+		for ( let i = 0; i < element._children._uis.length; i++ ) {
+			const ui = element._children._uis[ i ];
+			ui._overflow._needsRender = true;
+		}
+
 	}
 
 }
 
-/***********************************************************************************************************************
- * INTERNAL STUFF
- **********************************************************************************************************************/
-
+const Overflow_AVAILABLE_VALUES = ['visible', 'hidden'];
+function Overflow_isValid( value ) {
 
-/**
- * Load a msdf json then build fontVariant data
- *
- * @param {FontVariant} fontVariant
- * @param {string} jsonUrl
- * @private
- */
-function _loadJson( fontVariant, jsonUrl ) {
+	if( Overflow_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
 
-	new external_three_namespaceObject.FileLoader().setResponseType( 'json' ) .load( jsonUrl, ( response ) => {
+		console.warn( `(.style) overflow value '${value}' is not valid. Aborted` );
+		return false;
 
-		fontVariant._buildData( response );
-		fontVariant._checkReadiness();
+	}
 
-	} );
+	return true;
 
 }
 
-/**
- * Load a msdf texture then build texture
- *
- * @param {FontVariant} fontVariant
- * @param {string} textureUrl
- * @private
- */
-function _loadTexture( fontVariant, textureUrl ) {
+;// CONCATENATED MODULE: ./src/utils/Units.js
+const WORLD_UNITS = 'rem';
 
-	new external_three_namespaceObject.TextureLoader().load( textureUrl, ( texture ) => {
+//
+const CENTIMETERS = 'cm';
+const MILLIMETERS = 'mm';
+const INCHES = 'in';
 
-		fontVariant._buildTexture( texture );
-		fontVariant._checkReadiness();
+const UV = 'em';
+const PERCENT = '%';
 
-	} );
+const availableUnits = [ WORLD_UNITS, UV, PERCENT ];
 
-}
 
 /**
- * @typedef {Object} MSDFJson
- * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
- *
+ * Obtain a valid unit
+ * @param {string} requestedUnits
+ * @returns {string}
+ */
+const validateUnits = function( requestedUnits ) {
+
+	// Sent default units if requested units not available
+	if( availableUnits.indexOf( requestedUnits) === -1 ) return WORLD_UNITS;
+
+	return requestedUnits;
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/border/BorderRadius.js
+
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class BorderRadius extends StyleVector4Property {
+
+	/**
+	 *
+	 * @param {Vector4} defaultValue
+	 */
+	constructor( defaultValue ) {
+
+		super( 'borderRadius', defaultValue );
+
+		/**
+		 *
+		 * @type {Vector4}
+		 * @private
+		 */
+		this._valueUV = this._value.clone();
+
+		/**
+		 *
+		 * @type {Vector4}
+		 * @private
+		 */
+		this._input = this._vector4ValueSetter(new external_three_namespaceObject.Vector4(0,0,0,0), defaultValue);
+		/**
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		this._mediation = true;
+
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerTL = new external_three_namespaceObject.Vector2(0, 1);
+
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerTR = new external_three_namespaceObject.Vector2(1, 1);
+
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerBR = new external_three_namespaceObject.Vector2(1, 0);
+
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerBL = new external_three_namespaceObject.Vector2(0, 0);
+
+		const mediationTop = new BorderRadiusMediator( this._valueUV, [ 'x', 'y' ] ); // bottom
+		const mediationBottom = new BorderRadiusMediator( this._valueUV, [ 'z', 'w'] ); // top
+		const mediationLeft = new BorderRadiusMediator( this._valueUV, [ 'x', 'w'] ); // right
+		const mediationRight = new BorderRadiusMediator( this._valueUV, [ 'y', 'z'] ); // left
+
+		mediationTop.complementaryMediation = mediationBottom;
+		mediationBottom.complementaryMediation = mediationTop;
+		mediationLeft.complementaryMediation = mediationRight;
+		mediationRight.complementaryMediation = mediationLeft;
+
+		/**
+		 *
+		 * @type {Array.<BorderRadiusMediator>}
+		 * @private
+		 */
+		this._sideMediators = [ mediationTop, mediationBottom, mediationLeft, mediationRight ];
+
+		this._units = WORLD_UNITS;
+
+	}
+
+	/**
+	 *
+	 * @param {string} units
+	 */
+	set units( units ) {
+
+		this._units = validateUnits( units );
+
+		this._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get units() { return this._units; }
+
+	/**
+	 *
+	 * @param {boolean} v
+	 */
+	set mediation ( v) {
+
+		if( v !== this._mediation ){
+
+			this._mediation = v;
+
+			this._needsUpdate = true;
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @returns {boolean}
+	 */
+	get mediation () { return this._mediation; }
+
+
+	/**
+	 *
+	 * @param {Object.<string,any>} out
+	 */
+
+	output( out ) {
+
+		out["cornerTL"] = this._cornerTL;
+		out["cornerTR"] = this._cornerTR;
+		out["cornerBR"] = this._cornerBR;
+		out["cornerBL"] = this._cornerBL;
+
+	}
+
+	/**
+	 *
+	 * @override
+	 */
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		this._vector4ValueSetter( this._value, this._input );
+
+		this._needsProcess = true;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 */
+	process( element ){ /* eslint-enable no-unused-vars */
+
+		this._needsRender = true;
+
+	}
+
+	/**
+	 *
+	 * @override
+	 */
+	render( element ){
+
+		this._valueUV.copy( this._value );
+
+		const elementWidth = element._bounds._offsetWidth;
+		const elementHeight = element._bounds._offsetHeight;
+
+		// @TODO: Units process could be strategies
+		if( this._units === PERCENT ) {
+			this._valueUV.divideScalar(100);
+		}
+
+		// @TODO: Units process could be strategies
+		if( this._units === WORLD_UNITS ) {
+			this._valueUV.divideScalar( Math.min(elementWidth , elementHeight) );
+		}
+
+
+
+		/**
+		 * mediate
+		 * Be sure no side is greater than 1 (uv units)
+		 */
+		if( this._mediation ) {
+
+			do {
+
+				this._sideMediators.forEach( srm => srm.computeValue() );
+				this._sideMediators.sort( ( a, b ) => {
+					return a.value < b.value ? 1 : -1
+				} );
+
+				if ( this._sideMediators[ 0 ].value > 1.0 ) {
+					this._sideMediators[ 0 ].mediate();
+				}
+
+			} while ( this._sideMediators[ 0 ].value > 1.0 );
+
+		}
+
+
+		let sX = elementWidth > elementHeight ? elementHeight/elementWidth : 1;
+		let sY = elementWidth < elementHeight ? elementWidth/elementHeight : 1;
+
+		// Do not scale pourcentages, allowing ovals
+		if( this._units === PERCENT ){
+			sX = sY = 1.0;
+		}
+
+		this._cornerTL.x = this._valueUV.x * sX;
+		this._cornerTL.y = 1 - (this._valueUV.x * sY );
+
+		this._cornerTR.x = 1 - (this._valueUV.y * sX );
+		this._cornerTR.y = 1 - (this._valueUV.y * sY );
+
+		this._cornerBR.x = 1 - (this._valueUV.z * sX );
+		this._cornerBR.y = this._valueUV.z * sY;
+
+		this._cornerBL.x = this._valueUV.w * sX;
+		this._cornerBL.y = this._valueUV.w * sY;
+
+	}
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		for ( const sideMediator of this._sideMediators ) {
+
+			sideMediator.dispose();
+
+		}
+
+		this._sideMediators = null;
+
+		this._cornerTL = null;
+		this._cornerTR = null;
+		this._cornerBR = null;
+		this._cornerBL = null;
+
+		super.dispose();
+
+	}
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set topLeft( v ) {
+
+		if( this._input.x === v ) return;
+
+		this._input.x = v;
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get topLeft() { return this._input.x; }
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set topRight( v ) {
+
+		if( this._input.y === v ) return;
+
+		this._input.y = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get topRight() { return this._input.y; }
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set bottomRight( v ) {
+		if( this._input.z === v ) return;
+
+		this._input.z = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get bottomRight() { return this._input.z; }
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set bottomLeft( v ) {
+
+		if( this._input.w === v ) return;
+
+		this._input.w = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get bottomLeft() { return this._input.w; }
+
+
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set top( v ) {
+
+		if( this._input.x === v && this._input.y === v ) return;
+
+		this._input.x = this._input.y = v;
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get top() { return (this._input.x + this._input.y) / 2; }
+
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set right( v ) {
+
+		if( this._input.y === v && this._input.z === v ) return;
+
+		this._input.y = this._input.z = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get right() { return (this._input.y + this._input.z) / 2; }
+
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set bottom( v ) {
+		if( this._input.z === v && this._input.w === v ) return;
+
+		this._input.z = this._input.w = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get bottom() { return (this._input.z + this._input.w) / 2; }
+
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set left( v ) {
+
+		if( this._input.w === v && this._input.x === v ) return;
+
+		this._input.w = this._input.x = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get left() { return (this._input.w + this._input.x) / 2; }
+
+}
+
+/**
+ * Job: Contains two border radiuses values of the same side
+ * 			If their sums is greater than 1 (uv units) mediation could occurs
+ */
+class BorderRadiusMediator {
+
+	/**
+	 *
+	 * @param {Vector4} borderRadiuses
+	 * @param {Array.<string>} sideProperties
+	 */
+	constructor( borderRadiuses, sideProperties ) {
+
+		/**
+		 *
+		 * @type {Vector4}
+		 * @private
+		 */
+		this._borderRadiuses = borderRadiuses;
+
+		/**
+		 *
+		 * @type {Array<string>}
+		 * @private
+		 */
+		this._sideProperties = sideProperties;
+
+		/**
+		 *
+		 * @type {BorderRadiusMediator|null}
+		 * @private
+		 */
+		this._complementaryMediation = null;
+
+		/**
+		 *
+		 * @type {number}
+		 * @private
+		 */
+		this._value = 0;
+	}
+
+	/**
+	 * The sum of the border radius of that side
+	 * @returns {number}
+	 */
+	get value(){ return this._value; }
+
+	/**
+	 * A complementary side mediation ie: For top, complementary is bottom
+	 * @param {BorderRadiusMediator} brm
+	 */
+	set complementaryMediation( brm ){
+
+		this._complementaryMediation = brm;
+
+	}
+
+	/**
+	 * Adds all side property to compute the value of that side
+	 */
+	computeValue(){
+
+		let totalRadius = 0;
+
+		for ( const radius of this._sideProperties ) {
+
+			totalRadius += this._borderRadiuses[radius];
+
+		}
+
+		this._value = totalRadius;
+	}
+
+	/**
+	 *
+	 * @param {boolean} [mediateOpposite=true]
+	 */
+	mediate( mediateOpposite = true ){
+
+		// Mediation only occurs when sum of radius are greater than 1 (uv units)
+		if( this._value < 1.0 ) return;
+
+		// Simply divide each component by the sum
+		for ( const radius of this._sideProperties ) {
+
+			this._borderRadiuses[radius] /= this._value;
+
+		}
+
+		if( mediateOpposite ) {
+
+			// and also mediate the complementary
+			this._complementaryMediation.mediate( false );
+
+		}
+
+	}
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		this._complementaryMediation = null;
+		this._borderRadiuses = null;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/border/BorderWidth.js
+
+
+
+class BorderWidth extends StyleVector4Property{
+
+	/**
+	 *
+	 * @param defaultValue
+	 */
+	constructor( defaultValue ) {
+
+		super ( 'borderWidth', defaultValue, false );
+
+
+		this._valueUV = this._value.clone();
+
+		// configure
+		this.output = this._outputValue;
+
+		this._units = WORLD_UNITS;
+
+	}
+
+	/**
+	 *
+	 * @param {string} units
+	 */
+	set units( units ) {
+
+		this._units = validateUnits( units );
+
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get units() { return this._units; }
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 */
+	computeOutputValue( element) { /* eslint-enable no-unused-vars */
+
+		this._vector4ValueSetter( this._value, this._input );
+
+		this._needsProcess = true;
+
+		element._bounds._needsUpdate = true;
+		element._layouter._needsUpdate = true;
+
+		// for ( let i = 0; i < element._children._uis.length; i++ ) {
+		// 	const child = element._children._uis[ i ];
+		// 	element._bounds._needsUpdate = true;
+		// }
+
+	}
+
+	_outputValue( out ) {
+		out[this._id] = this._valueUV;
+	}
+
+	/**
+	 *
+	 * @override
+	 */
+	process( element ) {
+		this._needsRender = true;
+		element._borderRadius._needsRender = true;
+	}
+
+	/**
+	 * @override
+	 */
+	render( element ) {
+
+		this._valueUV.copy( this._value );
+
+		const offsetWidth = element._bounds._offsetWidth;
+		const offsetHeight = element._bounds._offsetHeight;
+
+		// @TODO: Units process could be strategies
+		if( this._units === PERCENT ){
+
+			console.log( "Percent" );
+			// this._valueUV.divideScalar( 100 );
+			console.log( this._valueUV );
+
+		}
+
+		// @TODO: Units process could be strategies
+		if( this._units === WORLD_UNITS ) {
+
+			if( offsetWidth !== 0) {
+				this._valueUV.w /= offsetWidth;
+				this._valueUV.y /= offsetWidth;
+			}
+
+
+			if( offsetHeight !== 0 ) {
+				this._valueUV.x /= offsetHeight;
+				this._valueUV.z /= offsetHeight;
+			}
+
+
+		} else if( this._units === UV ) {
+
+			// @TODO: Units process could be strategies
+
+			if( offsetWidth !== 0 ) {
+				const sX = offsetWidth > offsetHeight ? offsetHeight/offsetWidth : 1;
+				this._valueUV.y *= sX;
+				this._valueUV.w *= sX;
+			}
+
+			if( offsetHeight !== 0 ) {
+				const sY = offsetWidth < offsetHeight ? offsetWidth/offsetHeight : 1;
+
+				this._valueUV.x *= sY;
+				this._valueUV.z *= sY;
+			}
+
+		}
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/VisibleProperty.js
+
+
+class VisibleProperty extends BaseProperty{
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 */
+	constructor( propertyId, value = true ) {
+
+		super( 'visible', value, true );
+
+		this._needsUpdate = false;
+
+	}
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		element.visible = this._value;
+
+		if( element._parent._value ) {
+
+			element._parent._value._children._needsUpdate = true;
+
+		}
+
+	}
+
+	set value( value ) {
+
+		if( ! this.isValid( value) ) return;
+
+		if( this._value !== value ) {
+
+			this._value = value;
+
+			this._needsUpdate = true;
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get value() { return this._value; }
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/background/BackgroundColorProperty.js
+
+
+
+
+class BackgroundColorProperty extends StyleColorProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'backgroundColor', defaultValue, false );
+
+		this._input = new external_three_namespaceObject.Color(defaultValue);
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		element._backgroundMesh.visible = !(this._input === 'none' || this._input === 'transparent');
+
+		if( this._input === 'inherit' ) {
+
+			this._value.set(this.getInheritedInput( element ));
+
+		} else {
+
+			this._value.set( this._input );
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set inline( value ) {
+
+		if( ! this.isValidValue( value ) ) return;
+
+		if( value === this._inline ) {
+
+			// do nothing no update, the value hasn't changed
+			return;
+
+		}
+
+		this._input = this._inline = value;
+
+		this._needsUpdate = true;
+
+	}
+
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/EmptyProperty.js
+
+
+class EmptyProperty extends BaseProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId = 'untitled' ) {
+
+		super( propertyId, undefined, false );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @param {Object.<string,any>} out
+	 */
+	update( element , out ) { /* eslint-enable no-unused-vars */ }
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Output this property in a dictionnary
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) { /* eslint-enable no-unused-vars */ }
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/InlineJustificator.js
+
+
+class InlineJustificator extends BaseProperty {
+
+	constructor() {
+		super( 'inlineJustificator', null, false );
+
+		/**
+		 *
+		 * @type {Lines}
+		 * @private
+		 */
+		this._value = null;
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */ }
+
+	/**
+	 *
+	 * @override
+	 */
+	process( element ) {
+
+		const INNER_HEIGHT = element._bounds._innerHeight;
+		const lines = element._layouter._value;
+
+		const textHeight = Math.abs( lines.height );
+
+
+		// Line vertical positioning
+		let justificationOffset = ( () => {
+
+			switch ( element._alignItems._value ) {
+
+				case 'inherit':
+				case 'start':
+					return INNER_HEIGHT / 2 ;
+
+				case 'end':
+					return textHeight - ( INNER_HEIGHT / 2 );
+
+
+				case 'stretch': // @TODO : Stretch should trigger an error in own property
+				case 'center':
+					return textHeight/2;
+
+			}
+		} )();
+
+		//console.log( justificationOffset );
+
+		// Apply padding
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		justificationOffset += ( - padding.x + padding.z ) / 2 + ( - border.x + border.z ) / 2;
+
+		//
+
+		lines.forEach( ( line ) => {
+
+			line.y += justificationOffset;
+
+			line.forEach( ( inline ) => {
+
+				inline.offsetY += justificationOffset;
+
+			} );
+
+		} );
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/AlignItemsProperty.js
+
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const AlignItemsProperty_AVAILABLE_VALUES = ['start', 'center', 'end', 'stretch'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+const AlignItemsProperty_isValid = function ( value ) {
+
+	if( AlignItemsProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) alignItems value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+class AlignItemsProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'alignItems', 'inherit', true );
+
+		this.isValidValue = AlignItemsProperty_isValid;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/TextAlignProperty.js
+
+
+
+class TextAlignProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'textAlign', 'inherit', true );
+
+		this.isValidValue = TextAlignProperty_isValid;
+
+	}
+
+}
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const TextAlignProperty_AVAILABLE_VALUES = ['left', 'right', 'center', 'justify', 'justify-left', 'justify-right','justify-center'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+const TextAlignProperty_isValid = function ( value ) {
+
+	if( TextAlignProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) textAlign value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/FlexDirectionProperty.js
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class FlexDirectionProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'flexDirection', 'inherit', true );
+
+		// configure
+
+		this.isValid = FlexDirectionProperty_isValid;
+
+	}
+
+}
+
+const FlexDirectionProperty_AVAILABLE_VALUES = ['row','row-reverse', 'column', 'column-reverse'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function FlexDirectionProperty_isValid( value ) {
+
+	if( FlexDirectionProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) flexDirection value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/JustifyContentProperty.js
+
+
+class JustifyContentProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'justifyContent', 'inherit', true );
+
+		/**
+		 *
+		 * @override
+		 */
+		this.isValidValue = JustifyContentProperty_isValid;
+
+	}
+
+}
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const JustifyContentProperty_AVAILABLE_VALUES = [ 'start', 'center', 'end', 'space-between', 'space-around', 'space-evenly' ];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function JustifyContentProperty_isValid( value ) {
+
+	if ( JustifyContentProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) justifyContent value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/OrderProperty.js
+
+
+class OrderProperty extends SubStyleProperty {
+
+	constructor( ) {
+
+		super( 'order', 0, true );
+
+		this._value = 0;
+
+		this._input = 0;
+
+		// configure
+		this._allowsInherit = false;
+	}
+
+	/* eslint-disable no-unused-vars */computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		this._value = this._inheritedInput;
+
+		// require parent children (order) update, which will require layout update
+		if( element._parent._value ) {
+
+			element._parent._value._children._needsProcess = true;
+
+		}
+
+	}
+
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/PositionProperty.js
+
+
+
+class PositionProperty extends SubStyleProperty {
+
+	constructor( ) {
+
+		super( 'position', 'static', true );
+
+		// configure
+		this._allowsInherit = false;
+
+		this._value = 'static';
+		this._needsUpdate = false;
+
+		this.computeOutputValue = this._computeFromInherited;
+
+		this.isValidValue = PositionProperty_isValid;
+
+	}
+
+	_computeFromInherited( element ) {
+		super._computeFromInherited( element );
+
+		//console.log( "Position update")
+		// require parent to compute children -> bounds -> etc...
+		if( element._parent._value ) element._parent._value._children._needsProcess = true;
+	}
+
+}
+
+const PositionProperty_AVAILABLE_VALUES = ['static', 'absolute'];
+
+function PositionProperty_isValid( value ) {
+
+	if( PositionProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) position value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/bounds/StyleSideProperty.js
+
+
+class StyleSideProperty extends SubStyleProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {number} defaultValue
+	 */
+	constructor( propertyId, defaultValue = null ) {
+
+		super( propertyId, defaultValue, true );
+
+		/**
+		 * @type {any}
+		 * @internal
+		 */
+		this._input = 'auto';
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._auto = true;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._relative = false;
+
+		this._updateRequired = true;
+
+
+
+	}
+
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set inline( value ) {
+
+		if( ! this.isValidValue( value ) ) return;
+
+		if( value === this._inline ) {
+
+			// do nothing no update, the value hasn't changed
+			return;
+
+		}
+
+		this._inline = value;
+
+		if( this._input === this._inline ) return;
+
+		this._parseInput();
+
+	}
+
+	get inline() { return this._inline; }
+
+	_parseInput() {
+
+		let updateRequired = true;
+
+		// Inline has priority if set
+		if( this._inline !== undefined && this._inline !== 'unset' ) {
+
+			this._input = this._inline;
+
+		}
+		// or fallback on computed
+		else if( this._computed !== undefined ) {
+
+			// do not require an update if the value remains
+			if( this._computed === this._input ) updateRequired = false;
+			this._input = this._computed;
+
+		}
+		// or fallback on default value
+		else {
+
+			updateRequired = this._input === 'inherit';
+
+		}
+
+		if( updateRequired ) {
+
+			this._auto = !this._input || this._input === 'auto';
+
+
+			if ( !this._auto ) {
+
+				// string can be percentages
+				// console.log( this._input, typeof this._input, this._input.endsWith('%'))
+				if ( ( typeof this._input === 'string' || this._input instanceof String ) && this._input.endsWith( '%' ) ) {
+
+
+					this._relative = true;
+					this._value = 0;
+
+
+					const floatValue = parseFloat( this._input.replace( '%', '' ).trim() );
+					if ( !isNaN( floatValue ) ) {
+
+						this._value = floatValue / 100;
+
+					}
+
+				} else {
+
+					this._relative = false;
+					this._value = this._input;
+
+				}
+
+			} else {
+
+
+				this._relative = false;
+
+			}
+
+			this._needsUpdate = this._updateRequired = updateRequired;
+
+		}
+
+	}
+
+	update( element, out ) {
+
+		if( this._updateRequired ) {
+
+			this._updateRequired = false;
+
+			if( !this._allowsInherit ) {
+
+				this._inheritedInput = this.getInheritedInput( element );
+
+			}
+
+			this.computeOutputValue( element );
+
+			// rebuild same properties on children 'inheritance'
+			for ( const childUIElement of element._children._uis ) {
+
+				childUIElement[`_${this._id}`]._needsUpdate = true;
+
+			}
+
+			this.output( out );
+
+			if( element._parent._value ) element._parent._value._layouter._needsProcess = true;
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		element._bounds._needsUpdate = true;
+		element._renderer._needsRender = true;
+		// element._autoSize._needsProcess = true;
+
+	}
+
+	getInheritedInput ( element ) {
+
+		if( this._input !== 'inherit' && !this._auto ) return this._input;
+
+		const parent = element._parent._value;
+		if( parent ) {
+
+			return parent[`_${this._id}`].getInheritedInput( parent )
+
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+	getDefaultValue() {
+
+		return 0;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get value() { return this._value; }
+
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/bounds/WidthProperty.js
+
+
+class WidthProperty extends StyleSideProperty {
+
+	constructor() {
+
+		super( 'width' );
+
+	}
+
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/bounds/HeightProperty.js
+
+
+class HeightProperty extends StyleSideProperty {
+
+	constructor() {
+
+		super( 'height' );
+
+	}
+
+	computeOutputValue( element ) {
+
+		super.computeOutputValue( element );
+
+	}
+
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/TextContentEmpty.js
+
+
+class TextContentEmpty extends EmptyProperty{
+
+	constructor() {
+
+		super( "textContent" );
+
+		this._needsUpdate = false;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ set value( v ) { 	/* eslint-enable no-unused-vars */ }
+
+
+	/* eslint-disable no-unused-vars */ process( element ) { /* eslint-enable no-unused-vars */
+
+		let content = "";
+		for ( let i = 0; i < element.children.length; i++ ) {
+			const child = element.children[i];
+
+			if( child.isUI ) {
+
+				content += child.textContent;
+
+			}
+
+		}
+
+		this._value = content;
+
+	}
+
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontStyleProperty.js
+
+
+
+class FontStyleProperty extends SubStyleProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'fontStyle', defaultValue, true );
+
+		this.isValidValue = FontStyleProperty_isValid;
+
+	}
+
+}
+
+
+const FontStyleProperty_AVAILABLE_VALUES = ['normal', 'italic'];
+function FontStyleProperty_isValid( value ) {
+
+	if( FontStyleProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) fontStyle value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontWeightProperty.js
+
+
+
+class FontWeightProperty extends SubStyleProperty {
+
+	constructor( def ) {
+
+		super( 'fontWeight', def , true );
+
+		this.isValid = FontWeightProperty_isValid;
+	}
+
+}
+
+const FontWeightProperty_AVAILABLE_VALUES = ['100','200','300','400','500','600','700','800','900','light','normal','bold','bolder'];
+function FontWeightProperty_isValid( value ) {
+
+	if( FontWeightProperty_AVAILABLE_VALUES.indexOf( value.toString() ) === -1 ) {
+
+		console.warn( `(.style) fontWeight value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+;// CONCATENATED MODULE: ./src/font/TypographicFont.js
+class TypographicFont {
+
+	constructor() {
+
+		/** @protected */ this._size = 42;
+		/** @protected */ this._lineHeight = 42;
+		/** @protected */ this._lineBase = 38;
+		/** @protected */ this._name = "-";
+		/** @protected */ this._charset = "";
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get size() { return this._size; }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get lineHeight() { return this._lineHeight; }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get lineBase() { return this._lineBase; }
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get name() { return this._name; }
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get charset() { return this._charset; }
+
+}
+
+;// CONCATENATED MODULE: ./src/font/msdf/MSDFTypographicFont.js
+
+
+class MSDFTypographicFont extends TypographicFont{
+
+	/**
+	 *
+	 * @param {import('./MSDFFontVariant').MSDFJson} json
+	 */
+	constructor( json ) {
+
+		super();
+
+		// base description
+		this._size = json.info.size;
+		this._lineHeight = json.common.lineHeight;
+		this._lineBase = json.common.base;
+
+		this._name = json.info.face;
+
+		// MSDF
+		this._textureWidth = json.common.scaleW;
+		this._textureHeight = json.common.scaleH;
+
+		this._charset = json.chars.map( char => char.char ).join("");
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get textureWidth() { return this._textureWidth; }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get textureHeight() { return this._textureHeight; }
+
+}
+
+;// CONCATENATED MODULE: ./src/font/TypographicGlyph.js
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+
+/* eslint-enable no-unused-vars */
+
+/**
+ * @class
+ * @abstract
+ */
+class TypographicGlyph {
+
+	/**
+	 *
+	 * @param {TypographicFont} typographicFont
+	 */
+	constructor( typographicFont ) {
+
+		/** @protected */ this._char = "";
+		/** @protected */ this._width = 1;
+		/** @protected */ this._heigth = 1;
+		/** @protected */ this._xadvance = 1;
+		/** @protected */ this._xoffset = 0;
+		/** @protected */ this._yoffset = 0;
+
+		/**
+		 *
+		 * @type {TypographicFont}
+		 * @protected
+		 */
+		this._font = typographicFont;
+
+	}
+
+	/**
+	 *
+	 * @returns {TypographicFont}
+	 */
+	get font() {
+
+		return this._font;
+
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	get char() {
+
+		return this._char;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get width() {
+
+		return this._width;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get height() {
+
+		return this._heigth;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get xadvance() {
+
+		return this._xadvance;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get xoffset() {
+
+		return this._xoffset;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get yoffset() {
+
+		return this._yoffset;
+
+	}
+
+	/**
+	 *
+	 * @param value
+	 */
+	set yoffset( value ) {
+
+		this._yoffset = value;
+
+	}
+
+	/**
+	 *
+	 * @abstract
+	 * @param {string} otherChar
+	 * @returns {TypographicGlyph}
+	 */
+	/* eslint-disable no-unused-vars */ clone( otherChar ) { /* eslint-enable no-unused-vars */
+
+		throw new Error("Abstract... Need to be implemented");
+
+	}
+
+	/**
+	 *
+	 * @abstract
+	 * @returns {InlineGlyph}
+	 */
+	asInlineGlyph() {
+
+		throw new Error("Abstract... Need to be implemented")
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/elements/glyphs/Inline.js
+/**
+ * This is the abstract/base class / interface of any inline
+ * Inline can be positioned according to text rules
+ */
+class Inline {
+
+	constructor() {
+
+		/** @protected */ this._offsetX = 0;
+		/** @protected */ this._offsetY = 0;
+
+		/** @protected */ this._lineBreak = null;
+
+		/** @protected */ this._kerning = 0;
+
+		/** @protected */ this._fontFactor = 1;
+		/** @protected */ this._fontSize = 0;
+
+		/** @protected */ this._cumulativeWidth = 0;
+
+		/** @protected */ this._paddingLeft = 0;
+		/** @protected */ this._paddingRight = 0;
+
+		/** @protected */ this._marginLeft = 0;
+		/** @protected */ this._marginRight = 0;
+
+	}
+
+	/**
+	 * @returns {void}
+	 */
+	resetOffsets() {
+
+		this._offsetX = this._offsetY = 0;
+		this._cumulativeWidth = 0;
+
+	}
+
+	/**
+	 * The horizontal distance this inline fills
+	 * @returns {number}
+	 */
+	get xadvance() { return 0 }
+
+	/**
+	 * The offset x of this inline in a line
+	 * @returns {number}
+	 */
+	get xoffset() { return 0 }
+
+	/**
+	 * The offset y of this inline in a line
+	 * @returns {number}
+	 */
+	get yoffset() { return 0 }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get width() { return 0 }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get height() { return 0 }
+
+	/**
+	 *
+	 * @param {string|null} value
+	 */
+	set lineBreak( value ) {
+
+		this._lineBreak = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {string|null}
+	 */
+	get lineBreak() { return this._lineBreak; }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get anchor() { return 0 }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get kerning() { return this._kerning * this._fontFactor; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set kerning( value ) {
+
+		this._kerning = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get fontSize() { return this._fontSize }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set fontSize( value ) {
+
+		this._fontSize = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get lineHeight() { return 0 }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get offsetX() { return this._offsetX; }
+
+	/**
+	 *
+	 * @param value
+	 */
+	set offsetX( value ){
+
+		this._offsetX = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get offsetY() { return this._offsetY; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set offsetY( value ){
+
+		this._offsetY = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get cumulativeWidth() { return this._cumulativeWidth; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set cumulativeWidth( value ) {
+
+		this._cumulativeWidth = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginLeft() { return this._marginLeft; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set marginLeft( value ) {
+
+		this._marginLeft = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginRight() { return this._marginRight; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set marginRight( value ) {
+
+		this._marginRight = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingLeft() { return this._paddingLeft; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set paddingLeft( value ) {
+
+		this._paddingLeft = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingRight() { return this._paddingRight; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set paddingRight( value ) {
+
+		this._paddingRight = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get lineBase() { return 0 }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set fontFactor( value ){
+
+		this._fontFactor = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get fontFactor() { return this._fontFactor }
+}
+
+;// CONCATENATED MODULE: ./src/font/InlineGlyph.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class InlineGlyph extends Inline {
+
+	/**
+	 *
+	 * @param {TypographicGlyph} characterDesc
+	 */
+	constructor( characterDesc ) {
+
+		super();
+
+		/** @protected */ this._typographic = characterDesc;
+
+	}
+
+	/**
+	 *
+	 * @returns {TypographicGlyph}
+	 */
+	get typographic(){
+
+		return this._typographic;
+
+	}
+
+	/*********************************************************************************************************************
+	 * GETTERS FROM CHARACTER DESCRIPTION
+	 ********************************************************************************************************************/
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get xadvance() { return this._typographic.xadvance * this._fontFactor; }
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get xoffset() { return this._typographic.xoffset * this._fontFactor; }
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get yoffset() { return this._typographic.yoffset * this._fontFactor; }
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get width() { return this._typographic.width * this._fontFactor ; }
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get height() { return this._typographic.height * this._fontFactor; }
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	get char() { return this._typographic.char; }
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get anchor() {
+
+		// const lineHeight = this._typographic.font.lineHeight;
+		// const lineBase = this._typographic.font.lineBase;
+		//
+		// return ( ( this._typographic.yoffset + this._typographic.height - lineBase ) * this._fontSize ) / lineHeight;
+
+		return this.yoffset;
+
+	}
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get lineHeight() { return this._typographic.font.lineHeight * this._fontFactor; }
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get lineBase() { return this._typographic.font.lineBase * this._fontFactor; }
+
+
+}
+
+;// CONCATENATED MODULE: ./src/font/msdf/MSDFInlineGlyph.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+/**
+ * @extends InlineGlyph
+ */
+class MSDFInlineGlyph extends InlineGlyph{
+
+	/**
+	 *
+	 * @param {MSDFTypographicGlyph} characterDesc
+	 */
+	constructor( characterDesc ) {
+
+		super( characterDesc );
+
+	}
+
+	/**
+	 *
+	 * @returns {{left:number, right:number, top:number, bottom:number}|null}
+	 */
+	get uv() { return this.typographic.uv; }
+
+}
+
+;// CONCATENATED MODULE: ./src/font/msdf/MSDFTypographicGlyph.js
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+
+/**
+ * @property {MSDFTypographicFont} _font
+ */
+class MSDFTypographicGlyph extends TypographicGlyph {
+
+	/**
+	 * @param {MSDFTypographicFont} fontDescription
+	 * @param {import('./MSDFFontVariant').MSDFJsonChar} characterData
+	 */
+	constructor( fontDescription, characterData ) {
+
+		super( fontDescription );
+
+		this._char = characterData.char;
+		this._width = characterData.width;
+		this._heigth = characterData.height;
+
+		this._xadvance = characterData.xadvance ? characterData.xadvance : this._width;
+		this._xoffset = characterData.xoffset ? characterData.xoffset : 0;
+		this._yoffset = characterData.yoffset ? characterData.yoffset : 0;
+
+		// Msdf requires uvs
+		this._uv = characterData.uv ? characterData.uv : null;
+
+		if ( !isNaN( characterData.x ) ) {
+			// transform absolute pixel values into uv values [0,1]
+			this._uv = {
+				left: characterData.x / fontDescription.textureWidth,
+				right: ( characterData.x + characterData.width ) / fontDescription.textureWidth,
+				top: 1 - ( ( characterData.y + characterData.height ) / fontDescription.textureHeight ),
+				bottom: 1 - ( characterData.y / fontDescription.textureHeight )
+			};
+		}
+	}
+
+
+	/**
+	 *
+	 * @returns {{left: number, right: number, top: number, bottom: number}|null}
+	 */
+	get uv() {
+
+		return this._uv;
+
+	}
+
+	/**
+	 * @override
+	 * @param {string} otherChar
+	 * @returns {MSDFTypographicGlyph}
+	 */
+	clone( otherChar ) {
+
+		return new MSDFTypographicGlyph( this._font, {
+			char: otherChar,
+			width: this._width,
+			height: this._heigth,
+			xadvance: this._xadvance,
+			xoffset: this._xoffset,
+			yoffset: this._yoffset,
+
+			// Msdf requires uvs
+			uv: null
+		} );
+
+	}
+
+
+	/**
+	 * @override
+	 * @returns {MSDFInlineGlyph}
+	 */
+	asInlineGlyph() {
+
+		return new MSDFInlineGlyph( this );
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/font/msdf/MSDFGeometricGlyph.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+
+/* eslint-enable no-unused-vars */
+
+class MSDFGeometricGlyph extends external_three_namespaceObject.PlaneGeometry {
+
+	/**
+	 *
+	 * @param {MSDFInlineGlyph} inline
+	 * @param {MeshUIBaseElement} element
+	 */
+	constructor( inline, element ) {
+
+
+		// default w & h segments
+		let wS = 1, hS=1;
+
+		// If charOBJ, try to distribute segments proportionally
+		const typographicFontSize = inline.typographic.font.size;
+
+		const segments = element._segments.value;
+
+		wS = Math.ceil((inline.typographic.width / typographicFontSize) * segments );
+		hS = Math.ceil((inline.typographic.height / typographicFontSize) * segments );
+
+		super( inline.width, inline.height, wS, hS );
+
+		// If inline has UVs
+		if ( inline.uv ) {
+
+			this._mapUVs( inline );
+
+			this._transformGeometry( inline );
+
+			// White spaces (we don't want our plane geometry to have a visual width nor a height)
+		} else {
+
+			this._nullifyUVs();
+
+			this.scale( 0, 0, 1 );
+
+			this.translate( 0, inline.fontSize / 2, 0 );
+
+		}
+
+		this.name = "GlyphGeometry";
+		// Demo alter geometry
+		// const maxOffset = inline.fontSize / 10;
+		// this.translate(0 , -maxOffset + Math.random() * maxOffset*2, 0 )
+		// this.rotateZ(-0.1 + 0.2 * Math.random() )
+
+	}
+
+	/**
+	 * Compute the right UVs that will map the MSDF texture so that the passed character
+	 * will appear centered in full size
+	 * @param {MSDFInlineGlyph} inline
+	 * @private
+	 */
+	_mapUVs( inline ) {
+
+
+		const width = inline.uv.right - inline.uv.left;
+		const height = inline.uv.bottom - inline.uv.top;
+
+		const originalUvArray = this.getAttribute('uv').array.slice()
+
+		const uvGlyph = [];
+		for (let i = 0; i < originalUvArray.length; i += 2) {
+			const u = originalUvArray[i];
+			const v = originalUvArray[i + 1];
+
+			uvGlyph.push(inline.uv.left + width * u);
+			uvGlyph.push(inline.uv.top + height * v);
+		}
+		this.setAttribute('uvG', new external_three_namespaceObject.BufferAttribute(new Float32Array(uvGlyph), 2));
+
+	}
+
+	/**
+	 * Set all UVs to 0, so that none of the glyphs on the texture will appear
+	 * @private
+	 * */
+	_nullifyUVs() {
+
+		// const uvAttribute = this.attributes.uv;
+		//
+		// for ( let i = 0; i < uvAttribute.count; i++ ) {
+		//
+		// 	uvAttribute.setXY( i, 0, 0 );
+		//
+		// }
+
+		const uvGlyph = [];
+		const length = this.getAttribute('uv').array.length;
+		for ( let i = 0; i < length; i++ ) {
+			uvGlyph.push(0);
+		}
+		this.setAttribute('uvG', new external_three_namespaceObject.BufferAttribute(new Float32Array(uvGlyph), 2));
+
+	}
+
+	/**
+	 *
+	 * @TODO: Apply pivot properties when splitText isset
+	 * Gives the previously computed scale and offset to the geometry
+	 * @param {MSDFInlineGlyph} inline
+	 * @private
+	 */
+	_transformGeometry( inline ) {
+
+		//
+
+		// @TODO : Evaluate this as being a property. It can wait until splitGeometry
+		this.translate(
+			inline.width / 2,
+			-inline.height/2,
+			0
+		);
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
+attribute vec2 uvG;
+varying vec2 vUvG;
+`;
+
+/* harmony default export */ const msdf_alphaglyph_pars_vertex_glsl = (program);
+
+;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const msdf_alphaglyph_vertex_glsl_program = /* glsl */ `
+vUvG = uvG;
+`;
+
+/* harmony default export */ const msdf_alphaglyph_vertex_glsl = (msdf_alphaglyph_vertex_glsl_program);
+
+;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const msdf_offsetglyph_vertex_glsl_program = /* glsl */`
+gl_Position.z -= 0.00001;
+`;
+
+/* harmony default export */ const msdf_offsetglyph_vertex_glsl = (msdf_offsetglyph_vertex_glsl_program);
+
+;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const msdf_alphaglyph_pars_fragment_glsl_program = /* glsl */`
+varying vec2 vUvG;
+uniform sampler2D glyphMap;
+uniform vec2 unitRange;
+// functions from the original msdf repo:
+// https://github.com/Chlumsky/msdfgen#using-a-multi-channel-distance-field
+float median(float r, float g, float b) {
+	return max(min(r, g), min(max(r, g), b));
+}
+float screenPxRange() {
+
+	// precomputed unitRange as recommended by Chlumsky
+	// vec2 unitRange = vec2(pxRange)/vec2(textureSize(glyphMap, 0));
+	vec2 screenTexSize = vec2(1.0)/fwidth(vUvG);
+	return max(0.5*dot(unitRange, screenTexSize), 1.0);
+}
+float tap(vec2 offsetUV) {
+	vec3 msd = texture( glyphMap, offsetUV ).rgb;
+	float sd = median(msd.r, msd.g, msd.b);
+	float screenPxDistance = screenPxRange() * (sd - 0.5);
+	float alpha = clamp(screenPxDistance + 0.5, 0.0, 1.0);
+	return alpha;
+}
+`;
+
+/* harmony default export */ const msdf_alphaglyph_pars_fragment_glsl = (msdf_alphaglyph_pars_fragment_glsl_program);
+
+;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const msdf_alphaglyph_fragment_glsl_program = /* glsl */`
+	float alpha;
+#ifdef NO_RGSS
+
+	alpha = tap( vUvG );
+
+#else
+
+	// shader-based supersampling based on https://bgolus.medium.com/sharper-mipmapping-using-shader-based-supersampling-ed7aadb47bec
+	// per pixel partial derivatives
+	vec2 dx = dFdx(vUvG);
+	vec2 dy = dFdy(vUvG);
+	// rotated grid uv offsets
+	vec2 uvOffsets = vec2(0.125, 0.375);
+	vec2 offsetUV = vec2(0.0, 0.0);
+	// supersampled using 2x2 rotated grid
+	alpha = 0.0;
+	offsetUV.xy = vUvG + uvOffsets.x * dx + uvOffsets.y * dy;
+	alpha += tap(offsetUV);
+	offsetUV.xy = vUvG - uvOffsets.x * dx - uvOffsets.y * dy;
+	alpha += tap(offsetUV);
+	offsetUV.xy = vUvG + uvOffsets.y * dx - uvOffsets.x * dy;
+	alpha += tap(offsetUV);
+	offsetUV.xy = vUvG - uvOffsets.y * dx + uvOffsets.x * dy;
+	alpha += tap(offsetUV);
+	alpha *= 0.25;
+
+#endif
+
+	alpha = clamp( alpha, 0.0, 1.0 );
+
+#ifdef INVERT_ALPHA
+
+	alpha = 1.0 - alpha;
+
+#endif
+
+	diffuseColor.a *= alpha;
+`;
+
+/* harmony default export */ const msdf_alphaglyph_fragment_glsl = (msdf_alphaglyph_fragment_glsl_program);
+
+;// CONCATENATED MODULE: ./src/utils/mediator/transformers/MaterialTransformers.js
+
+/**
+ * Transfer the alphaTest value from MeshUIComponent to material
+ * @type {import('../Mediator').MediationTransformer}
+ */
+const alphaTestTransformer = function ( target, targetProperty, value) {
+
+	// set the value in the material
+	target.alphaTest = value;
+
+	toPreprocessorTriggerTransformer(target, 'USE_ALPHATEST', value > 0 );
+
+}
+
+/**
+ * Transform a value as a preprocessor trigger
+ * @type {import('../Mediator').MediationTransformer}
+ */
+const toPreprocessorTriggerTransformer = function ( target, targetProperty, value) {
+
+	if( !target.defines ) return;
+
+	if ( value ) {
+
+		if( target.defines[targetProperty] === undefined ) {
+
+			target.defines[targetProperty] = '';
+			target.needsUpdate = true;
+
+		}
+
+	} else if( target.defines[targetProperty] !== undefined ) {
+
+		delete target.defines[targetProperty];
+		target.needsUpdate = true;
+
+	}
+
+}
+
+/**
+ * Transform a value as a preprocessor value
+ * @type {import('../Mediator').MediationTransformer}
+ */
+const asPreprocessorValueTransformer = function ( target, targetProperty, value) {
+
+	// abort if nothing to update, same value
+	if( target.defines[targetProperty] && target.defines[targetProperty] === value ) return;
+
+	// or change the preprocessor and update
+	target.defines[targetProperty] = value;
+	target.needsUpdate = true;
+
+}
+
+/**
+ * Transform a value as a uniform or userData value
+ * Non primitive values are bounds
+ * @type {import('../Mediator').MediationTransformer}
+ */
+const uniformOrUserDataTransformer = function( material, property, value ) {
+
+	if( material.userData[property] ) {
+
+		material.userData[property].value = value;
+
+	}else{
+
+		material.uniforms[property].value = value;
+
+	}
+
+}
+
+const toUserDataTransformer = function( material, property, value ) {
+
+	material.userData[property].value = value;
+
+}
+
+;// CONCATENATED MODULE: ./src/font/msdf/utils/MSDFFontMaterialUtils.js
+
+
+
+
+
+
+
+/* eslint-disable no-unused-vars */
+
+
+/* eslint-enable no-unused-vars */
+
+/**
+ * MSDFFontMaterialUtils provides utilities
+ * for customizing other threejs or custom materials
+ * into a three-mesh-ui MSDFFontMaterial
+ */
+class MSDFFontMaterialUtils {
+
+	/**
+	 * Alter a material options with required fontMaterial options and or default values
+	 * @param {Object.<string,any>} materialOptions
+	 */
+	static ensureMaterialOptions( materialOptions ) {
+		materialOptions.transparent = true;
+		materialOptions.alphaTest = materialOptions.alphaTest || 0.02;
+	}
+
+	/**
+	 * As three-mesh-ui FontMaterial relies on webgl preprocessors,
+	 * lets force the material to have a proper defines object
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 */
+	static ensureDefines( threeMaterial ) {
+		if ( !threeMaterial.defines ) {
+			threeMaterial.defines = {};
+		}
+	}
+
+	/**
+	 *
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 * @param {Object.<string,any>} materialOptions
+	 */
+	static ensureUserData( threeMaterial, materialOptions ) {
+		threeMaterial.userData.glyphMap = { value: materialOptions.glyphMap };
+		threeMaterial.userData.unitRange = { value: new external_three_namespaceObject.Vector2() };
+	}
+
+	/**
+	 *
+	 * @param {any} shader
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 */
+	static bindUniformsWithUserData( shader, threeMaterial ) {
+
+		shader.uniforms.glyphMap = threeMaterial.userData.glyphMap;
+		shader.uniforms.unitRange = threeMaterial.userData.unitRange;
+	}
+
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectShaderChunks( shader ) {
+		MSDFFontMaterialUtils.injectVertexShaderChunks( shader );
+		MSDFFontMaterialUtils.injectFragmentShaderChunks( shader );
+	}
+
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectVertexShaderChunks( shader ) {
+		shader.vertexShader = shader.vertexShader.replace(
+			'#include <uv_pars_vertex>',
+			'#include <uv_pars_vertex>\n' + msdf_alphaglyph_pars_vertex_glsl
+		);
+
+		// vertex chunks
+		shader.vertexShader = shader.vertexShader.replace(
+			'#include <uv_vertex>',
+			'#include <uv_vertex>\n' + msdf_alphaglyph_vertex_glsl
+		)
+
+		shader.vertexShader = shader.vertexShader.replace(
+			'#include <project_vertex>',
+			'#include <project_vertex>\n' + msdf_offsetglyph_vertex_glsl
+		)
+	}
+
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectFragmentShaderChunks( shader ) {
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <uv_pars_fragment>',
+			'#include <uv_pars_fragment>\n' + msdf_alphaglyph_pars_fragment_glsl
+		)
+
+		// fragment chunks
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <alphamap_fragment>',
+			'#include <alphamap_fragment>\n' + msdf_alphaglyph_fragment_glsl
+		)
+	}
+
+
+
+	/**
+	 * Mix a threejs Material into a three-mesh-ui FontMaterial
+	 * @param {typeof Material|ShaderMaterial} materialClass
+	 * @returns {typeof Material|ShaderMaterial}
+	 */
+	static from( materialClass ) {
+
+		return class extends materialClass {
+
+			/**
+			 *
+			 * @abstract
+			 * @returns {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+			 */
+			static get fontMaterialProperties() {
+				return MSDFFontMaterialUtils.mediation;
+			}
+
+			constructor( options = {} ) {
+
+				// same as FontMaterial extension
+				MSDFFontMaterialUtils.ensureMaterialOptions( options );
+				super( options );
+				MSDFFontMaterialUtils.ensureDefines( this );
+				MSDFFontMaterialUtils.ensureUserData( this, options );
+
+				// defines two internal properties in order to kept
+				// user allowed to use onBeforeCompile for its own stuff
+				// 1- store an callback for user
+				/* eslint-disable no-unused-vars */
+				this._userDefinedOnBeforeCompile = (shader) => {};
+				/* eslint-enable no-unused-vars */
+				// 2- store the cumulative callback
+				this._onBeforeCompile = this._cumulativeOnBeforeCompile;
+			}
+
+			////////////////////////////
+			// OnBeforeCompile Override
+			///////////////////////////
+
+			/**
+			 * Override the setter of onBeforeCompile in order to never overwrite
+			 * the three-mesh-ui fontMaterial onBeforeCompile
+			 * @param { (shader:any) => void }fct
+			 */
+			set onBeforeCompile( fct ) {
+				// only store it as userDefinedCallback
+				this._userDefinedOnBeforeCompile = fct;
+			}
+
+			/**
+			 * Override the getter of onBeforeCompile in order to
+			 * always deliver the cumulativeCallbacks to threejs
+			 * @returns { (shader:any) => void }
+			 */
+			get onBeforeCompile() {
+				return this._onBeforeCompile;
+			}
+
+			/**
+			 *
+			 * On before compile that first run three-mesh-ui fontMaterial
+			 * then user defined onBeforeCompile
+			 * @param shader
+			 * @private
+			 */
+			_cumulativeOnBeforeCompile = ( shader ) => {
+				// bind uniforms
+				MSDFFontMaterialUtils.bindUniformsWithUserData( shader, this );
+
+				// inject both vertex and fragment shaders
+				MSDFFontMaterialUtils.injectShaderChunks( shader );
+
+				// user defined additional onBeforeCompile
+				this._userDefinedOnBeforeCompile( shader );
+			}
+		}
+	}
+
+	/**
+	 *
+	 * @returns {Object<{m: string, t?: (function((Material|ShaderMaterial), string, *): void)}>}
+	 */
+	static get mediation() {
+
+		return mediationDefinitions;
+
+	}
+
+}
+
+/**
+ * Convert a fontVariant to a material glyphMap texture
+ * @type {(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void }
+ * @private
+ */
+const _fontToGlyphMapTransformer = function( fontMaterial, materialProperty, value) {
+
+	const texture = value ? value.texture : null;
+	const unitRange = value ? value.unitRange : new external_three_namespaceObject.Vector2();
+
+	if( fontMaterial[materialProperty] !== undefined ) {
+
+		fontMaterial.glyphMap = texture;
+		fontMaterial.unitRange = unitRange;
+		return;
+	}
+
+	if( fontMaterial.userData && fontMaterial.userData.glyphMap ) {
+
+		fontMaterial.userData.glyphMap.value = texture;
+		fontMaterial.userData.unitRange.value = unitRange;
+
+	}
+
+}
+
+/**
+ *
+ * @type {(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void }
+ * @private
+ */
+const _RGSSTransformer = function( fontMaterial, materialProperty, value){
+
+	if ( value && value !== 'antialiased' ) {
+
+		fontMaterial.defines['NO_RGSS'] = '';
+
+	} else {
+
+		delete fontMaterial.defines['NO_RGSS'];
+
+	}
+
+	fontMaterial.needsUpdate = true;
+
+}
+
+
+/**
+ *
+ * @type {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+ */
+const mediationDefinitions = {
+	clippingPlanes: { m: 'clippingPlanes' },
+	fontAlphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+	fontSide: { m: 'side' },
+	font: { m: "glyphMap", t: _fontToGlyphMapTransformer },
+	color: { m: 'color' },
+	fontOpacity: { m: 'opacity' },
+	fontSmooth: { m: 'NO_RGSS', t: _RGSSTransformer },
+	invertAlpha: { m: 'INVERT_ALPHA', t: toPreprocessorTriggerTransformer },
+}
+
+;// CONCATENATED MODULE: ./src/font/msdf/renderers/ShaderLib/msdf-fontmaterial.glsl.js
+
+
+
+
+
+
+/**
+ *
+ * @type {string}
+ */
+const vertexShader = /* glsl */`
+${msdf_alphaglyph_pars_vertex_glsl}
+#include <clipping_planes_pars_vertex>
+void main() {
+	${msdf_alphaglyph_vertex_glsl}
+	#include <begin_vertex>
+	#include <project_vertex>
+	${msdf_offsetglyph_vertex_glsl}
+	#include <clipping_planes_vertex>
+}
+`
+
+/**
+ *
+ * @type {string}
+ */
+const fragmentShader = /* glsl */`
+uniform vec3 diffuse;
+uniform float opacity;
+${msdf_alphaglyph_pars_fragment_glsl}
+#include <alphatest_pars_fragment>
+#include <clipping_planes_pars_fragment>
+void main() {
+	// instead of <color_fragment> : vec4 diffuseColor
+	vec4 diffuseColor = vec4( diffuse, opacity );
+	${msdf_alphaglyph_fragment_glsl}
+	#include <alphatest_fragment>
+	// instead of <output_fragment>
+	gl_FragColor = diffuseColor;
+	#include <clipping_planes_fragment>
+}
+`
+
+;// CONCATENATED MODULE: ./src/font/msdf/materials/MSDFFontMaterial.js
+
+
+
+
+// JSDoc related import
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+const ALPHA_TEST = 0.02;
+
+
+/**
+ * This material implements the msdf rendering shader
+ */
+class MSDFFontMaterial extends external_three_namespaceObject.ShaderMaterial {
+
+	/**
+	 * This static method is mandatory for extending ThreeMeshUI.MSDFFontMaterial
+	 * It will provide a transfer description for properties from ThreeMeshUI.Text to THREE.Material
+	 * @see {MSDFFontMaterialUtils.mediation}
+	 * @returns {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+	 */
+	static get mediation() {
+
+		return MSDFFontMaterialUtils.mediation;
+
+	}
+
+	constructor( materialOptions = {} ) {
+
+		super( {
+
+			uniforms: {
+				'glyphMap': { value: null }, // texture
+				'diffuse': { value: null }, // vec3
+				'opacity': { value: 1 },
+				'unitRange': { value: new external_three_namespaceObject.Vector2(0,0) }, // vec2
+				'alphaTest': { value: ALPHA_TEST },
+			},
+			transparent: true,
+			clipping: true,
+			vertexShader: vertexShader,
+			fragmentShader: fragmentShader,
+			extensions: {
+				derivatives: true
+			},
+		} );
+
+		// webgl preprocessor AlphaTest set by default
+		this.defines[ 'USE_ALPHATEST' ] = '';
+		this.needsUpdate = true;
+
+		// initiate additional properties
+		this.noRGSS = materialOptions.noRGSS || false;
+
+	}
+
+	/**
+	 * The color will be the diffuse uniform
+	 * @returns {Color}
+	 */
+	get color() {
+
+		return this.uniforms.diffuse.value;
+
+	}
+
+	/**
+	 *
+	 * @param {Color} v
+	 */
+	set color( v ) {
+
+		this.uniforms.diffuse.value = v;
+
+	}
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set opacity( v ) {
+
+		if( this.uniforms )
+			this.uniforms.opacity.value = v;
+
+	}
+
+	/**
+	 * The color will be the diffuse uniform
+	 * @returns {number}
+	 */
+	get opacity() {
+
+		return this.uniforms.opacity.value;
+
+	}
+
+
+
+
+	/**
+	 * The color will be the diffuse uniform
+	 * @returns {Vector2}
+	 */
+	get unitRange() {
+
+		return this.uniforms.unitRange.value;
+
+	}
+
+	/**
+	 *
+	 * @param {Vector2} v
+	 */
+	set unitRange( v ) {
+
+		this.uniforms.unitRange.value.copy( v );
+
+	}
+
+	/**
+	 *
+	 * @returns {Texture}
+	 */
+	get glyphMap() {
+
+		return this.uniforms.glyphMap.value;
+
+	}
+
+	/**
+	 *
+	 * @param {Texture} v
+	 */
+	set glyphMap( v ) {
+
+		this.uniforms.glyphMap.value = v;
+
+	}
+
+	/**
+	 * Is this a default fontMaterial instance
+	 * @returns {boolean}
+	 */
+	get isDefault() {
+
+		return this.constructor === MSDFFontMaterial;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get alphaTest() {
+		return this.uniforms.alphaTest.value;
+	}
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set alphaTest( v ) {
+		this.uniforms.alphaTest.value = v;
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/font/msdf/MSDFFontVariant.js
+
+
+
+
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+
+/* eslint-enable no-unused-vars */
+
+/**
+ * @extends {FontVariant}
+ */
+class MSDFFontVariant extends font_FontVariant {
+
+	constructor( weight, style, json, texture ) {
+
+		super(weight, style);
+
+		// provide default values
+		this._unitRange = new external_three_namespaceObject.Vector2( 1, 1 );
+
+		if ( json.pages ) {
+
+			this._buildData( json );
+
+		} else {
+
+			_loadJson( this, json );
+
+		}
+
+		if ( texture instanceof external_three_namespaceObject.Texture ) {
+
+			this._texture = texture;
+			this._buildTexture( texture );
+
+		} else if( typeof(texture) === 'string' || texture instanceof String ){
+
+			_loadTexture( this, texture );
+
+		} else {
+
+			throw new Error(`ThreeMeshUI::MSDFVariant provided 'texture' parameter is '${typeof texture}'. Only Texture and String allowed.`)
+
+		}
+
+		this._defaultMaterialClass = MSDFFontMaterial;
+
+
+		this._checkReadiness();
+
+	}
+
+
+	get texture() {
+
+		return this._texture;
+
+	}
+
+	get unitRange() {
+
+		return this._unitRange;
+
+	}
+
+	/**
+	 * @param {Function.<Material|ShaderMaterial>} v
+	 * @override
+	 */
+	set fontMaterial( v ) {
+
+		this._defaultMaterialClass = v;
+
+	}
+
+	/**
+	 *
+	 * @override
+	 * @returns {Function.<Material|ShaderMaterial>}
+	 */
+	get fontMaterial() {
+
+		return this._defaultMaterialClass;
+
+	}
+
+	/**
+	 *
+	 * @param {MSDFJson} json
+	 * @private
+	 */
+	_buildData( json ) {
+
+		this._font = new MSDFTypographicFont( json );
+
+		/**
+		 *
+		 * @type {import('../FontVariant').KerningPairs}
+		 * @private
+		 */
+		this._kernings = this._buildKerningPairs( json );
+		this._chars = this._buildCharacters( json );
+
+		this._chars[ " " ] = this._buildCharacterWhite( json );
+		this._chars[ "\n" ] = this._buildCharacterWhite( json, '\n' , 0.001, 1);
+		this._chars[ "\t" ] = this._buildCharacterWhite( json, '\t' , 4, 1);
+
+		this._size = json.info.size;
+		this._lineHeight = json.common.lineHeight;
+		this._lineBase = json.common.base;
+
+		this._distanceRange = json.distanceField.distanceRange;
+
+		// precompute the unit range as recommended by chlumsky
+		// @see https://github.com/Chlumsky/msdfgen
+		// "I would suggest precomputing unitRange as a uniform variable instead of pxRange for better performance."
+		this._unitRange = new external_three_namespaceObject.Vector2(this._distanceRange, this._distanceRange)
+			.divide( new external_three_namespaceObject.Vector2( json.common.scaleW, json.common.scaleH ) );
+
+	}
+
+	/**
+	 *
+	 * @param texture
+	 * @private
+	 */
+	_buildTexture( texture ) {
+
+		texture.generateMipmaps = false;
+		texture.minFilter = external_three_namespaceObject.LinearFilter;
+		texture.magFilter = external_three_namespaceObject.LinearFilter;
+
+		texture.needsUpdate = true;
+
+	}
+
+	/**
+	 * @abstract
+	 * @protected
+	 * @param {string} missingChar
+	 * @returns {string|null}
+	 */
+	_getFallbackCharacter( missingChar ) {
+		return font_FontLibrary.missingCharacter( this, missingChar );
+	}
+
+	/**
+	 *
+	 * @override
+	 * @param {import('./../InlineGlyph').default|import('./MSDFInlineGlyph').default} inline
+	 * @param {import('./../../core/elements/MeshUIBaseElement').default} element
+	 * @returns {MSDFGeometricGlyph}
+	 */
+	getGeometricGlyph( inline, element ) {
+
+		return new MSDFGeometricGlyph( inline, element );
+
+	}
+
+	/**
+	 * Abstraction implementation
+	 *
+	 * @returns {boolean}
+	 * @private
+	 */
+	_readyCondition() {
+
+		return this._chars && this._texture && this._texture.image;
+
+	}
+
+	/**
+	 * Ensure that each font variant has its kerning dictionary
+	 * @see src/font/msdf/FontVariantMSDF.js for an implementation
+	 *
+	 * @param {MSDFJson} json
+	 * @returns {import('../FontVariant').KerningPairs}
+	 * @private
+	 */
+	_buildKerningPairs( json ) {
+
+		const friendlyKernings = {};
+
+		// Loop through each kernings pairs defined in msdf json
+		for ( let i = 0; i < json.kernings.length; i++ ) {
+
+			const kerning = json.kernings[ i ];
+
+			// ignore zero kerned glyph pair
+			if ( kerning.amount === 0 ) continue;
+
+			// Build and store the glyph paired characters "ij","WA", ... as keys, referecing their kerning amount
+			const glyphPair = String.fromCharCode( kerning.first, kerning.second );
+
+			// This would then be available for fast access
+			friendlyKernings[ glyphPair ] = kerning.amount;
+
+		}
+
+		// update the font to keep it
+		return friendlyKernings;
+
+	}
+
+
+	/**
+	 *
+	 * @param {MSDFJson} json
+	 * @private
+	 */
+	_buildCharacters( json ) {
+
+		const friendlyChars = {};
+
+		for ( let i = 0; i < json.chars.length; i++ ) {
+			const charOBJ = json.chars[ i ];
+
+			friendlyChars[ charOBJ.char ] = new MSDFTypographicGlyph( this._font, charOBJ );
+
+		}
+
+		return friendlyChars;
+
+	}
+
+	/**
+	 *
+	 * @param {MSDFJson} json
+	 * @param char
+	 * @param scaleX
+	 * @param scaleY
+	 * @private
+	 */
+	_buildCharacterWhite( json, char = " ", scaleX = 1, scaleY = 1 ) {
+		return new MSDFTypographicGlyph( this._font,
+			{
+				char,
+				width: (json.info.size / 3)*scaleX,
+				height: (json.info.size * 0.7)*scaleY,
+			});
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @private
+	 */
+	_alterElementProperties( element ) { /* eslint-enable no-unused-vars */ }
+}
+
+/***********************************************************************************************************************
+ * INTERNAL STUFF
+ **********************************************************************************************************************/
+
+
+/**
+ * Load a msdf json then build fontVariant data
+ *
+ * @param {FontVariant} fontVariant
+ * @param {string} jsonUrl
+ * @private
+ */
+function _loadJson( fontVariant, jsonUrl ) {
+
+	new external_three_namespaceObject.FileLoader().setResponseType( 'json' ) .load( jsonUrl, ( response ) => {
+
+		fontVariant._buildData( response );
+		fontVariant._checkReadiness();
+
+	} );
+
+}
+
+/**
+ * Load a msdf texture then build texture
+ *
+ * @param {FontVariant} fontVariant
+ * @param {string} textureUrl
+ * @private
+ */
+function _loadTexture( fontVariant, textureUrl ) {
+
+	fontVariant._texture = new external_three_namespaceObject.TextureLoader().load( textureUrl, ( texture ) => {
+
+		fontVariant._buildTexture( texture );
+		fontVariant._checkReadiness();
+
+	} );
+
+}
+
+/***********************************************************************************************************************
+ * MSDF FILE FORMAT DESCRIPTION
+ * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
+ **********************************************************************************************************************/
+
+/**
+ * @typedef {Object} MSDFJson
+ *
  * @property {MSDFJsonInfo} info
  * @property {MSDFJsonCommon} common
  * @property {Array.<MSDFJsonPage>} pages
  * @property {Array.<MSDFJsonChar>} chars
+ * @property {{fieldType:string, distanceRange:number}} distanceField
  * @property {Array.<MSDFJsonKerning>} kernings
  */
 
 /**
- *
- * @typedef {Object} MSDFJsonInfo
- * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
- *
- * @property {string} face This is the name of the true type font.
- * @property {number} size The size of the true type font.
- * @property {boolean} bold The font is bold.
- * @property {boolean} italic The font is italic.
- * @property {string[]} charset The name of the OEM charset used (when not unicode).
- * @property {boolean} unicode 	Set to 1 if it is the unicode charset.
- * @property {number} stretchH The font height stretch in percentage. 100% means no stretch.
- * @property {number} smooth Set to 1 if smoothing was turned on.
- * @property {number} aa The supersampling level used. 1 means no supersampling was used.
- * @property {Array.<number>} padding TThe padding for each character (up, right, down, left).
- * @property {Array.<number>} spacing The spacing for each character (horizontal, vertical).
- * @property {number} outline (not found) The outline thickness for the characters.
+ *
+ * @typedef {Object} MSDFJsonInfo
+ *
+ * @property {string} face This is the name of the true type font.
+ * @property {number} size The size of the true type font.
+ * @property {boolean} bold The font is bold.
+ * @property {boolean} italic The font is italic.
+ * @property {string[]} charset The name of the OEM charset used (when not unicode).
+ * @property {boolean} unicode 	Set to 1 if it is the unicode charset.
+ * @property {number} stretchH The font height stretch in percentage. 100% means no stretch.
+ * @property {number} smooth Set to 1 if smoothing was turned on.
+ * @property {number} aa The supersampling level used. 1 means no supersampling was used.
+ * @property {Array.<number>} padding TThe padding for each character (up, right, down, left).
+ * @property {Array.<number>} spacing The spacing for each character (horizontal, vertical).
+ * @property {number} outline (not found) The outline thickness for the characters.
+ */
+
+/**
+ *
+ * @typedef {Object} MSDFJsonCommon
+ *
+ * @property {number} lineHeight This is the distance in pixels between each line of text.
+ * @property {number} base The number of pixels from the absolute top of the line to the base of the characters.
+ * @property {number} scaleW The width of the texture, normally used to scale the x pos of the character image.
+ * @property {number} scaleH The height of the texture, normally used to scale the y pos of the character image.
+ * @property {number} pages The number of texture pages included in the font.
+ * @property {boolean} packed
+ * @property {number} alphaChnl
+ * @property {number} redChnl
+ * @property {number} greenChnl
+ * @property {number[]} blueChnl
+ */
+
+/**
+ * @typedef {Object} MSDFJsonPage
+ *
+ * @property {string} id The page id.
+ * @property {string} file The texture file name.
+ */
+
+/**
+ *
+ * @typedef {Object} MSDFJsonChar
+ *
+ * @property {number} id The character id.
+ * @property {number} index The character index.
+ * @property {string} char The character.
+ * @property {number} x The left position of the character image in the texture.
+ * @property {number} y The top position of the character image in the texture.
+ * @property {number} width The width of the character image in the texture.
+ * @property {number} height The height of the character image in the texture.
+ * @property {number} xoffset How much the current position should be offset when copying the image from the texture to the screen.
+ * @property {number} yoffset How much the current position should be offset when copying the image from the texture to the screen.
+ * @property {number} xadvance How much the current position should be advanced after drawing the character.
+ * @property {string} page The texture page where the character image is found.
+ * @property {number} chnl The texture channel where the character image is found (1 = blue, 2 = green, 4 = red, 8 = alpha, 15 = all channels).
+ * @property {Object} [uv]
+ * /
+
+
+
+/**
+ *
+ * @typedef {Object} MSDFJsonKerning
+ *
+ * @property {number} first The first character id.
+ * @property {number} second The second character id.
+ * @property {number} amount How much the x position should be adjusted when drawing the second character immediately following the first.
+ *
+ */
+
+;// CONCATENATED MODULE: ./src/font/FontFamily.js
+
+
+//JSDoc related imports
+
+/* eslint-disable no-unused-vars */
+
+
+/* eslint-enable no-unused-vars */
+
+class FontFamily extends external_three_namespaceObject.EventDispatcher {
+
+	/**
+	 *
+	 * @param {string} name
+	 */
+	constructor( name ) {
+
+		super();
+
+		/**
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		this._name = name;
+
+		/**
+		 *
+		 * @type {Array.<FontVariant>}
+		 * @private
+		 */
+		this._variants = [];
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		this._isReady = false;
+
+	}
+
+	get isReady() { return this._isReady; }
+
+	/**
+	 *
+	 * @param {string|number} weight
+	 * @param {string} style
+	 * @param {string|Object} json
+	 * @param {string|Texture} texture
+	 * @param {boolean} [override=false]
+	 */
+	addVariant( weight, style, json, texture, override = false){
+
+		if( override || !this.getVariant( weight, style) ){
+
+			this._isReady = false;
+
+			const newVariant = new MSDFFontVariant( weight, style, json, texture);
+
+			this._variants.push( newVariant );
+
+			if( !newVariant.isReady ){
+
+				newVariant.addEventListener( "ready", this._checkReadiness )
+
+			} else {
+
+				this._checkReadiness();
+
+			}
+
+		} else {
+
+			console.warn(`FontFamily('${this._name}')::addVariant() - Variant(${weight}, ${style}) already exists.`);
+
+		}
+
+		return this;
+
+	}
+
+	/**
+	 *
+	 * @param {FontVariant} variantImplementation
+	 * @param {boolean} [override=false]
+	 */
+	addCustomImplementationVariant( variantImplementation, override = false){
+
+		if( override || !this.getVariant( variantImplementation.weight, variantImplementation.style) ){
+
+			this._isReady = false;
+
+			this._variants.push( variantImplementation );
+
+			if( !variantImplementation.isReady ){
+
+				variantImplementation.addEventListener( "ready", this._checkReadiness )
+
+			} else {
+
+				this._checkReadiness();
+
+			}
+
+		} else {
+
+			console.warn(`FontFamily('${this._name}')::addCustomImplementationVariant() - Variant(${variantImplementation.weight}, ${variantImplementation.style}) already exists.`);
+
+		}
+
+		return this;
+
+	}
+
+	/**
+	 *
+	 * @param {string|number} weight
+	 * @param {string} style
+	 * @returns {FontVariant|null}
+	 */
+	getVariant( weight, style ){
+
+		return this._variants.find( fontVariant => fontVariant.weight === weight && fontVariant.style === style );
+
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	get name(){ return this._name; }
+
+	_checkReadiness = () => {
+
+		if( this._variants.every( v => v.isReady ) ) {
+
+			FontFamily_setReady( this );
+
+		}
+
+	}
+
+}
+
+const FontFamily_readyEvent = { type: 'ready' };
+
+/**
+ * Set the ready status of a fontVariant
+ * @param {FontFamily} fontFamily
+ * @private
+ */
+function FontFamily_setReady( fontFamily ) {
+
+	fontFamily._isReady = true;
+	fontFamily.dispatchEvent( FontFamily_readyEvent );
+
+}
+
+;// CONCATENATED MODULE: ./src/font/FontLibrary.js
+
+
+// JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+
+const _fontFamilies = {};
+
+/* eslint-disable no-unused-vars */
+
+/**
+ *
+ * @param {FontFamily} fontFamily
+ * @returns {Promise<unknown>}
+ */
+const prepare = function ( fontFamily ) {
+
+	/**
+	 *
+	 * @type {FontFamily[]}
+	 */
+	const families = [ ...arguments ];
+
+	// Check all family are right instance
+	families.forEach( f => {
+
+		if( !(f instanceof FontFamily) ) {
+
+			throw new Error(`FontLibrary::prepare() - One of the provided parameter is not a FontFamily. Instead ${typeof f} given.`);
+
+		}
+
+	})
+
+	/**
+	 * Check that all provided families are loaded
+	 * @returns {boolean}
+	 */
+	const areAllLoaded = function() {
+
+		return families.every( f => f.isReady );
+
+	}
+
+	// @TODO: Should handle possible rejection
+	return new Promise((resolve,reject)=>{
+
+		// Direct resolve if all loaded
+		if ( areAllLoaded() ){
+
+			resolve();
+
+		} else {
+
+			// Add listener on each family not ready
+			for ( let i = 0; i < families.length; i++ ) {
+
+				const family = families[ i ];
+				if( !family.isReady ){
+
+					family.addEventListener( "ready" , ()=> {
+
+						// Resolve if all other families are loaded
+						if( areAllLoaded() ) {
+
+							resolve();
+
+						}
+
+					});
+
+				}
+
+			}
+
+		}
+
+	});
+
+}
+
+/* eslint-enable no-unused-vars */
+
+
+/**
+ *
+ * @param {string} name
+ * @returns {FontFamily}
+ */
+const addFontFamily = function ( name ) {
+
+	if ( _fontFamilies[ name ] ) {
+		console.error( `FontLibrary::addFontFamily - Font('${name}') is already registered` );
+	}
+
+	_fontFamilies[ name ] = new FontFamily( name );
+
+	return _fontFamilies[ name ];
+
+}
+
+/**
+ *
+ * @param {string} name
+ * @returns {FontFamily}
+ */
+const getFontFamily = function( name ) {
+
+	return _fontFamilies[ name ];
+
+}
+
+
+/**
+ *
+ * @param { (fontVariant:FontVariant, character:string ) => string|null } handler
+ */
+const setMissingCharacterHandler = function ( handler ) {
+
+	_missingCharacterHandler = handler;
+
+}
+
+/**
+ *
+ * @type { (fontVariant:FontVariant, character:string ) => string|null }
+ * @private
+ */
+let _missingCharacterHandler = function ( fontVariant, character ) {
+
+	console.error( `The character '${character}' is not included in the font characters set.` );
+
+	// return a glyph has fallback
+	return " ";
+
+};
+
+/**
+ *
+ * @param {FontVariant} fontVariant
+ * @param {string} character
+ *
+ * @returns {string}
+ */
+function missingCharacter( fontVariant, character ) {
+
+	// Execute the user defined handled
+	return _missingCharacterHandler( fontVariant, character );
+
+}
+
+
+//
+
+const FontLibrary = {
+	addFontFamily,
+	getFontFamily,
+	prepare,
+	setMissingCharacterHandler,
+	missingCharacter
+};
+
+/* harmony default export */ const font_FontLibrary = (FontLibrary);
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontFamilyProperty.js
+
+
+
+
+
+class FontFamilyProperty extends SubStyleProperty {
+
+	constructor( ) {
+
+		super( 'fontFamily', 'inherit' , true );
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._input instanceof FontFamily ) {
+
+			this._value = this._input;
+
+		} else if ( this._input === 'inherit' ) {
+
+			// do nothing
+
+		} else if ( typeof this._input === 'string' ) {
+
+			// string - family
+			const fontFamily = font_FontLibrary.getFontFamily( this._input );
+
+			if( fontFamily ) {
+
+				this._value = fontFamily;
+
+			} else {
+
+				console.warn( `(.style) fontFamily, the font '${this._input}' is not registered. Aborted.`)
+
+			}
+
+		} else {
+
+			console.warn( `(.style) fontFamily requires a registered fontFamily instance, or the id of a registered fontFamily.`);
+			console.warn( `If you want to set a specific font, please use .font property instead.`);
+
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @return {any|FontFamily|null}
+	 */
+	get value() { return this._value; }
+
+	getInheritedInput ( element ) {
+
+		if( this._input !== 'inherit' ) return this._input;
+
+		const parent = element._parent._value;
+		if( parent ) {
+
+			return parent[`_${this._id}`].getInheritedInput( parent )
+
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/LineHeightProperty.js
+
+
+class LineHeightProperty extends SubStyleProperty {
+
+	/**
+	 *
+	 */
+	constructor() {
+
+		super( 'lineHeight', 'inherit', true );
+
+	}
+
+	update( element, out ) {
+		super.update( element, out );
+
+		element._layouter._needsProcess = true;
+	}
+
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/WhiteSpaceProperty.js
+
+
+
+class WhiteSpaceProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'whiteSpace', 'inherit' );
+
+		this.isValidValue = WhiteSpaceProperty_isValid;
+
+	}
+
+}
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const WhiteSpaceProperty_AVAILABLE_VALUES = ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function WhiteSpaceProperty_isValid( value ) {
+
+	if( WhiteSpaceProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) whiteSpace value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/LetterSpacingProperty.js
+
+
+class LetterSpacingProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'letterSpacing', 'inherit', true );
+
+	}
+
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontSizeProperty.js
+
+
+class FontSizeProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'fontSize', 'inherit', true );
+
+		this._fontRelative = false;
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 * @param {Object.<string,any> } out
+	 */
+	update( element, out ) {
+
+		console.log("fontSize update")
+		// /if( !this._allowsInherit ) {
+
+			this._inheritedInput = this.getInheritedInput( element );
+			console.log( 'inherit?', this._inheritedInput )
+			this._value = _parseValue( this._inheritedInput, element );
+
+		// }else{
+		//
+		// 	console.log( this._input )
+		// 	this._value = _parseValue( this._input, element )
+		// }
+
+		console.log( "    = ", this._value )
+
+		this.computeOutputValue( element );
+
+		// rebuild same properties on children 'inheritance'
+		for ( const childUIElement of element._children._uis ) {
+
+			const property = childUIElement[`_${this._id}`];
+
+			if( !property ) continue;
+
+			const target = property._input ? property._input : property._value;
+
+			if( target === 'inherit' || property._fontRelative ) childUIElement[`_${this._id}`]._needsUpdate = true;
+
+		}
+
+		this.output( out );
+
+	}
+
+	computeOutputValue( element ) {}
+
+}
+
+function _parseValue( v, element ){
+
+	element._fontSize._fontRelative = false;
+
+	if( !isNaN(v) ) return v;
+
+	if( v.endsWith('em') ) {
+
+		element._fontSize._fontRelative = true;
+
+		console.log("VVVVVV", v);
+
+		return parseFloat( v.replace(/[^0-9.]+/,"") ) * element._parent._value._fontSize.getInheritedInput(element._parent._value);
+
+	}
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/geometry/SegmentsProperty.js
+
+
+class SegmentsProperty extends BaseProperty {
+
+	constructor() {
+
+		super( 'segments', 1, false );
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/InvertAlphaProperty.js
+
+
+/**
+ * Class definition
+ * @property {boolean|"inherit"} value - propriety description
+ *
+ */
+class InvertAlphaProperty extends InheritableProperty {
+
+	constructor() {
+
+		super( 'invertAlpha', 'inherit' );
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontKerningProperty.js
+
+
+
+class FontKerningProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'fontKerning', 'inherit' );
+
+		this.isValidValue = FontKerningProperty_isValid;
+
+	}
+
+}
+
+
+const FontKerningProperty_AVAILABLE_VALUES = ['normal', 'none', 'inherit'];
+
+function FontKerningProperty_isValid( value ) {
+
+	if( FontKerningProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) fontKerning value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/InheritableBooleanProperty.js
+
+
+/**
+ * @property {boolean|"inherit"} value
+ */
+class InheritableBooleanProperty extends InheritableProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId) {
+
+		super( propertyId, 'inherit', true );
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/InheritableMaterialProperty.js
+
+
+
+/**
+ * @property {Material|null|"inherit"} value
+ */
+class InheritableMaterialProperty extends InheritableProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId ) {
+
+		super( propertyId, 'inherit', false );
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(target:any, targetProperty:string, value:any) => void}>}
+		 * @internal
+		 */
+		this._mediation = {};
+
+		/**
+		 *
+		 * @type {null}
+		 * @internal
+		 */
+		this._defaultMaterial = null;
+
+	}
+
+	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		this._notInheritedValue = this._value;
+
+		if ( this._notInheritedValue === 'inherit' ) {
+			this._notInheritedValue = this.getInheritedInput( element );
+		} else {
+			this.propagate( element );
+		}
+
+		// no material
+		if ( !this._notInheritedValue ) {
+
+			// reset mediation
+			this._mediation = {};
+
+		} else if ( this._notInheritedValue.constructor.mediation ) {
+
+			this._mediation = { ...this._notInheritedValue.constructor.mediation };
+
+		} else {
+
+			this._mediation = {
+				clippingPlanes: { m: 'clippingPlanes' },
+				fontAlphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+				fontSide: { m: 'side' },
+				color: { m: 'color' },
+				fontOpacity: { m: 'opacity' }
+			};
+
+		}
+
+		element._transferToFontMaterial();
+
+		// dispatch to children
+
+
+		this._outputValue( out );
+
+	}
+
+	/**
+	 * @override
+	 */
+	getInheritedInput( element ) {
+
+		if ( this._value !== 'inherit' ) return this._value;
+
+		let recursiveParent = element;
+		let inheritedValue = null;
+		while ( recursiveParent._parent._value ) {
+
+			recursiveParent = recursiveParent._parent._value;
+			if ( recursiveParent[ `_${this._id}` ]._value !== 'inherit' ) {
+
+				inheritedValue = recursiveParent[ `_${this._id}` ]._value;
+				break;
+			}
+
+		}
+
+		if ( inheritedValue !== null ) {
+			return inheritedValue;
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+	getDefaultValue() {
+		return this._defaultMaterial;
+	}
+
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/VerticalAlignProperty.js
+
+
+
+class VerticalAlignProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'verticalAlign', 'inherit', true );
+
+		this.isValidValue = VerticalAlignProperty_isValid;
+
+	}
+
+}
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const VerticalAlignProperty_AVAILABLE_VALUES = ['inherit', 'baseline', 'sub', 'super'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+const VerticalAlignProperty_isValid = function ( value ) {
+
+	if( VerticalAlignProperty_AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) verticalAlign value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+;// CONCATENATED MODULE: ./src/core/elements/MeshUIBaseElement.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+
+
+
+
+/* eslint-enable no-unused-vars */
+
+class MeshUIBaseElement extends external_three_namespaceObject.Object3D {
+
+	/**
+	 *
+	 * @param {Properties} properties
+	 * @param {Options} values
+	 */
+	constructor( properties, values) {
+
+		super();
+
+		Object.defineProperties( this, {
+				isUI: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+		let uiType = values.uiType || 'default';
+		if( values.uiType ){
+			delete values.uiType;
+		}
+
+		Object.defineProperties( this, {
+				uiType: {
+					configurable: false,
+					enumerable: true,
+					value: uiType
+				}
+			}
+		);
+
+		/**
+		 *
+		 * @type {Mesh|null}
+		 * @internal
+		 */
+		this._backgroundMesh = null;
+
+		/**
+		 *
+		 * @type {Material}
+		 * @internal
+		 */
+		this._backgroundMaterial = null;
+
+		/**
+		 *
+		 * @type {Material}
+		 * @protected
+		 */
+		this._backgroundCustomDepthMaterial = null;
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(target:any, targetProperty:string, value:any) => void}>}
+		 * @protected
+		 */
+		this._backgroundMaterialMediation = {};
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(value:any) => any}>}
+		 * @private
+		 */
+		this._backgroundMeshMediation = {
+			backgroundCastShadow: { m: 'castShadow' },
+			backgroundReceiveShadow: { m: 'receiveShadow' },
+			renderOrder: {m: 'renderOrder' }
+		};
+
+		/**
+		 *
+		 * @type {Mesh|null}
+		 * @internal
+		 */
+		this._fontMesh = null;
+
+		/**
+		 *
+		 * @type {InheritableMaterialProperty}
+		 * @internal
+		 */
+		this._fontMaterial = new InheritableMaterialProperty('fontMaterial');
+
+		/**
+		 *
+		 * @type {InheritableMaterialProperty}
+		 * @private
+		 */
+		this._fontCustomDepthMaterial = new InheritableMaterialProperty('fontCustomDepthMaterial');
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(value:any) => any}>}
+		 * @private
+		 */
+		this._fontMeshMediation = {
+			fontMaterial: { m: 'material' },
+			fontCustomDepthMaterial: { m : 'customDepthMaterial', t:directTransferNotNull},
+			fontCastShadow: { m: 'castShadow' },
+			fontReceiveShadow: { m: 'receiveShadow' },
+			renderOrder: {m: 'renderOrder' }
+		};
+
+		// Children lists
+
+
+		const defaults = get(null, this.uiType );
+		/**
+		 *
+		 * @type {EmptyProperty|ChildrenBox|ChildrenText}
+		 * @internal
+		 */
+		this._children = properties.children ? new properties.children : new EmptyProperty("children");
+		this._parent = new ParentProperty();
+
+		// update parentUI when this component will be added or removed
+		this.addEventListener( 'added', this._rebuildParentUI );
+		this.addEventListener( 'removed', this._rebuildParentUI );
+
+		//material properties
+		this._backgroundSide = new SideProperty( 'backgroundSide', defaults.backgroundSide );
+		this._fontSide = new SideProperty( 'fontSide', defaults.fontSide );
+		this._backgroundAlphaTest = new NumberProperty( 'backgroundAlphaTest', defaults.backgroundAlphaTest );
+		this._fontAlphaTest = new NumberProperty( 'fontAlphaTest', defaults.fontAlphaTest );
+
+		// mesh properties
+		this._visible = new VisibleProperty( 'visible', true );
+
+		this._backgroundCastShadow = new InheritableBooleanProperty( 'backgroundCastShadow' );
+		this._fontCastShadow = new InheritableBooleanProperty( 'fontCastShadow' );
+		this._backgroundReceiveShadow = new InheritableBooleanProperty( 'backgroundReceiveShadow' );
+		this._fontReceiveShadow = new InheritableBooleanProperty( 'fontReceiveShadow' );
+
+		// @TODO: RenderOrder for background and fonts
+		this._renderOrder = new RenderOrderProperty();
+
+		// @TODO : background & Text
+		this._segments = properties.segments ? new properties.segments() : new SegmentsProperty();
+
+
+		/**
+		 *
+		 * @type {BoundsBox|BoundsText|EmptyProperty}
+		 * @ignore
+		 * @internal
+		 */
+		this._bounds = properties.bounds ? new properties.bounds() : new EmptyProperty("bounds");
+
+		// styles ---;
+
+		this._order = new OrderProperty();
+
+		this._padding = new PaddingProperty( defaults.padding );
+		this._margin = new MarginProperty( defaults.margin );
+
+
+		this._position = new PositionProperty( defaults.position );
+
+		/**
+		 *
+		 * @type {FlexDirectionProperty}
+		 * @internal
+		 */
+		this._flexDirection = properties.flexDirection ? new properties.flexDirection() : new FlexDirectionProperty();
+
+		this._justifyContent = properties.justifyContent ? new properties.justifyContent() : new JustifyContentProperty();
+
+		this._alignItems = properties.alignItems ? new properties.alignItems() : new AlignItemsProperty();
+
+		this._display = new Display( 'flex' );
+
+		this._boxSizing = new BoxSizing( 'border-box' );
+		this._width = new WidthProperty();
+		this._height = new HeightProperty();
+
+		this._backgroundColor = properties.backgroundColor ? new properties.backgroundColor( defaults.backgroundColor ) : new BackgroundColorProperty(defaults.backgroundColor);
+		this._backgroundOpacity = new StyleFactorProperty('backgroundOpacity', defaults.backgroundOpacity);
+		this._backgroundImage = new BackgroundImage();
+		this._backgroundSize = new BackgroundSize( 'cover' );
+
+		this._color = properties.color ? new properties.color( defaults.color ) : new StyleColorProperty('color', defaults.color);
+		this._fontOpacity = new StyleFactorProperty( 'fontOpacity', 'inherit');
+
+		this._whiteSpace = properties.whiteSpace ? new properties.whiteSpace() : new WhiteSpaceProperty();
+
+		this._fontFamily = properties.fontFamily ? new properties.fontFamily() : new FontFamilyProperty();
+		this._fontStyle = properties.fontStyle ? new properties.fontStyle(defaults.fontStyle) : new FontStyleProperty( defaults.fontStyle );
+		this._fontWeight = properties.fontWeight ? new properties.fontWeight( defaults.fontWeight ) : new FontWeightProperty(defaults.fontWeight);
+		this._fontSize = properties.fontSize ? new properties.fontSize() : new FontSizeProperty();
+
+		this._lineHeight = properties.lineHeight ? new properties.lineHeight() : new LineHeightProperty();
+
+		this._fontKerning = properties.fontKerning ? new properties.fontKerning() : new FontKerningProperty();
+		this._letterSpacing = properties.letterSpacing ? new properties.letterSpacing() : new LetterSpacingProperty();
+
+		this._overflow = new Overflow( 'visible' );
+
+		this._borderRadius = new BorderRadius( defaults.borderRadius );
+		this._borderWidth = new BorderWidth( defaults.borderWidth );
+		this._borderColor = properties.borderColor ? new properties.borderColor() : new StyleColorProperty( 'borderColor', defaults.borderColor );
+		this._borderOpacity = new StyleFactorProperty( 'borderOpacity', defaults.borderOpacity);
+
+		// styles ---;
+
+		this._font = new FontProperty();
+
+		this._lineBreak = properties.lineBreak ? new properties.lineBreak() : new EmptyProperty("lineBreak");
+
+		/**
+		 *
+		 * @type {TextContentEmpty|TextContentText|TextContentInline}
+		 * @internal
+		 */
+		this._textContent = properties.textContent ? new properties.textContent() : new TextContentEmpty();
+
+		/**
+		 *
+		 * @type {GlyphsProperty}
+		 * @internal
+		 */
+		this._glyphs = properties.glyphs ? new properties.glyphs() : new EmptyProperty("glyphs");
+
+		this._inlines = properties.inlines ? new properties.inlines() : new EmptyProperty("inlines");
+
+
+		/**
+		 *
+		 * @type {BoxLayouter|TextLayouter|EmptyProperty}
+		 * @internal
+		 */
+		this._layouter = properties.layouter ? new properties.layouter() : new EmptyProperty("layouter");
+
+		this._inlineJustificator = new InlineJustificator();
+
+		this._textAlign = properties.textAlign ? new properties.textAlign() : new TextAlignProperty();
+
+		this._verticalAlign = properties.verticalAlign ? new properties.verticalAlign() : new VerticalAlignProperty();
+
+		this._autoSize = properties.autoSize ? new properties.autoSize() : new EmptyProperty("autoSize");
+
+		this._renderer = properties.renderer ? new properties.renderer() : new EmptyProperty("renderer");
+
+		this._offset = new OffsetProperty();
+
+		// adds
+		this._invertAlpha = new InvertAlphaProperty();
+		this._fontSmooth = properties.fontSmooth ? new properties.fontSmooth() : new FontSmoothProperty();
+
+		/**
+		 *
+		 * @type {Array.<BaseProperty>}
+		 * @internal
+		 */
+		this._components = [
+
+			this._textContent,
+			this._children,
+			this._parent,
+
+
+			this._autoSize,
+
+
+			this._fontFamily,
+			this._fontStyle,
+			this._fontWeight,
+			this._font,
+
+			this._whiteSpace,
+
+
+			this._glyphs,
+
+			this._inlines,
+
+			this._visible,
+
+			// Meshes interfaces
+			this._backgroundSide,
+			this._fontSide,
+			this._backgroundAlphaTest,
+			this._fontAlphaTest,
+			this._backgroundCastShadow,
+			this._fontCastShadow,
+			this._backgroundReceiveShadow,
+			this._fontReceiveShadow,
+			this._renderOrder,
+			this._segments,
+			// styles ---;
+
+			this._fontSize,
+
+			this._padding,
+			this._margin,
+			this._width,
+			this._height,
+			this._borderWidth,
+			this._boxSizing,
+
+			this._bounds,
+
+			this._position,
+
+
+			this._flexDirection,
+			this._justifyContent,
+			this._alignItems,
+			this._order,
+
+
+			this._display,
+
+			this._fontOpacity,
+			this._color,
+
+			this._backgroundColor,
+			this._backgroundOpacity,
+			this._backgroundImage,
+			this._backgroundSize,
+
+
+
+			// font : update order : WhiteSpace > Glyph > Inlines > Kerning > newlineBreakability > LineBreak > FontSize
+			// font : process order : ??
+			// this._font,
+
+
+			this._lineHeight,
+			this._fontKerning,
+			this._letterSpacing,
+
+			this._borderRadius,
+			this._borderColor,
+			this._borderOpacity,
+
+			// this._styles,
+			// styles ---;
+			this._lineBreak,
+			this._offset,
+
+			this._verticalAlign,
+			this._layouter,
+
+			this._inlineJustificator,
+			this._textAlign,
+
+
+			// !! this._renderer renderer MUST NOT BE in components !!
+
+			this._invertAlpha,
+			this._fontSmooth,
+
+			this._fontMaterial,
+			this._fontCustomDepthMaterial,
+			this._overflow,
+			this._renderer,
+
+		]
+
+
+		/**
+		 *
+		 * @type {*[]}
+		 * @private
+		 */
+		this._onAfterUpdates = [];
+
+
+		// breaks inheritance chains
+		// if( !values ) values = {};
+		if( !values.backgroundSide ) values.backgroundSide = 0; // FrontSide
+
+
+		if( values ) this.set( values );
+
+	}
+
+
+	///////////////
+	///  UPDATE
+	///////////////
+
+	update( ) {
+
+
+		// console.log( "Update Element", this.name , this.constructor.name );
+
+		const out = {};
+		for ( const component of this._components ) {
+
+			if( component._needsUpdate ) {
+
+				// console.log( '    ', component.id )
+				component.update( this, out );
+				component._needsUpdate = false;
+
+			}
+
+		}
+
+		this._transferToBackgroundMesh( out );
+		this._transferToFontMesh( out );
+
+		this._transferToBackgroundMaterial( out );
+		this._transferToFontMaterial( out );
+
+
+		// update children
+		for ( const child of this._children._uis ) {
+			child.update();
+		}
+
+	}
+
+	process() {
+
+		// process first time : Natural size
+		for ( const child of this._children._uis ) {
+			child.process();
+		}
+
+
+		// console.log( 'Process ', this.name );
+		for ( const component of this._components ) {
+
+			if( component._needsProcess ) {
+
+				// console.log( '    ', component.id );
+				component.process( this );
+				component._needsProcess = false;
+
+			}
+
+		}
+
+	}
+
+	render() {
+
+		// console.log( 'render ', this.name );
+		for ( let i = 0; i < this._components.length; i++ ) {
+			const component = this._components[ i ];
+			if( component._needsRender ) {
+				// console.log( '    ', component.id);
+				component.render( this );
+				component._needsRender = false;
+			}
+		}
+
+		// render all children
+		for ( const child of this._children._uis ) {
+			child.render();
+		}
+
+	}
+
+
+	/**
+	 *
+	 * @param {Options} options
+	 */
+	set( options ) {
+
+		// Retro compatibility, when not recommended way
+		// 2. < v7.x.x way
+		if( options.fontTexture ) {
+
+			console.warn( "ThreeMeshUI::set( {fontTexture} ) is deprecated. Please use fontLibrary to register font families and variants.")
+
+			if( options.fontFamily ) {
+
+				// Set from old way, check if that family is already registered
+				const fontName = options.fontFamily.pages ? options.fontFamily.info.face : options.fontFamily;
+
+				let fontFamily = font_FontLibrary.getFontFamily( fontName );
+
+				if ( !fontFamily ) {
+
+					const fontStyle = options.fontStyle ? options.fontStyle : 'normal';
+					// const fontWeight = options.fontWeight ? options.fontWeight : '400';
+					const fontWeight = options.fontWeight ? options.fontWeight : 'normal';
+
+					fontFamily = font_FontLibrary.addFontFamily( fontName )
+						.addVariant( fontWeight, fontStyle, options.fontFamily, options.fontTexture );
+
+				}
+
+				options['fontFamily'] = fontFamily;
+
+				delete options['fontTexture'];
+
+			}
+
+		}
+
+
+
+		for ( let prop of Object.keys( options ) ) {
+
+			const value = options[prop];
+
+			// 1. replace deprecated properties
+			switch ( prop ){
+				case 'contentDirection':
+					console.warn('ThreeMeshUI v7xx: property `contentDirection` is deprecated and has been renamed as `flexDirection`');
+					prop = 'flexDirection';
+					break;
+
+				case 'interLine':
+					console.warn('ThreeMeshUI v7xx: property `interLine` is deprecated and has been renamed as `lineHeight`');
+					prop = 'lineHeight';
+					break;
+
+				case 'content':
+					console.warn( 'ThreeMeshUI v7xx: property `content` is deprecated and has been renamed as `textContent`');
+					prop = 'textContent';
+					break;
+
+				case 'fontColor':
+					console.warn( 'ThreeMeshUI v7xx: property `fontColor` is deprecated and has been renamed as `color`');
+					prop = 'color';
+					break;
+
+				case 'hiddenOverflow':
+					console.warn( 'ThreeMeshUI v7xx: property `hiddenOverflow` is deprecated and has been renamed as `overflow`');
+					prop = 'overflow';
+					break;
+
+				case 'backgroundTexture':
+					console.warn( 'ThreeMeshUI v7xx: property `backgroundTexture` is deprecated and has been renamed as `backgroundImage`');
+					prop = 'backgroundImage';
+					break;
+
+				case 'alignContent':
+					console.warn( 'ThreeMeshUI v7xx: property `alignContent` is deprecated and has been renamed as `alignItems`');
+					prop = 'alignItems';
+					break;
+
+				case "borderTopColor":
+				case "borderBottomColor":
+				case "borderLeftColor":
+				case "borderRightColor":
+					prop = 'borderColor';
+					break;
+			}
+
+				switch ( prop ) {
+
+				// properties
+
+				// As textContent property might alter the hierarchy, do not wait until update
+				// 	case 'textContent' :
+
+					case 'fontSmooth':
+					case 'renderOrder':
+					case 'segments' :
+					case 'visible' :
+					case 'offset':
+						this[`_${prop}`].value = value;
+						break;
+
+					// styles properties
+					case 'flexDirection' :
+					case 'justifyContent' :
+					case 'alignItems' :
+					case 'color' :
+					case 'fontFamily' :
+					case 'fontOpacity' :
+					case 'fontKerning' :
+					case 'fontSize' :
+					case 'fontStyle' :
+					case 'fontWeight' :
+					case 'textAlign' :
+					case 'letterSpacing' :
+					case 'lineHeight' :
+					case 'whiteSpace':
+					case 'breakOn': // Not valid anymore?
+					case 'width' :
+					case 'height' :
+					case 'padding':
+					case 'margin' :
+					case 'backgroundColor' :
+					case 'backgroundOpacity' :
+					case 'backgroundImage' :
+					case 'backgroundSize' :
+					case 'borderColor' :
+					case 'borderOpacity' :
+					case 'borderRadius' :
+					case 'borderWidth':
+					case 'overflow' :
+					case 'order':
+					case 'boxSizing':
+					case 'position':
+					case 'verticalAlign':
+						if( this[`_${prop}`] ){
+							this[`_${prop}`].inline = value;
+						}
+						break;
+
+					case 'paddingTop':
+						this._padding.top = value;
+						break;
+					case 'paddingRight':
+						this._padding.right = value;
+						break;
+					case 'paddingBottom':
+						this._padding.bottom = value;
+						break;
+					case 'paddingLeft':
+						this._padding.left = value;
+						break;
+
+					case 'marginTop':
+						this._margin.top = value;
+						break;
+					case 'marginRight':
+						this._margin.right = value;
+						break;
+					case 'marginBottom':
+						this._margin.bottom = value;
+						break;
+					case 'marginLeft':
+						this._margin.left = value;
+						break;
+
+					case 'borderTopWidth':
+						this._borderWidth.top = value;
+						break;
+					case 'borderRightWidth':
+						this._borderWidth.right = value;
+						break;
+					case 'borderBottomWidth':
+						this._borderWidth.bottom = value;
+						break;
+					case 'borderLeftWidth':
+						this._borderWidth.left = value;
+						break;
+
+					case 'borderTopLeftRadius':
+						this._borderRadius.topLeft = value;
+						break;
+					case 'borderTopRightRadius':
+						this._borderRadius.topRight = value;
+						break;
+					case 'borderBottomRightRadius':
+						this._borderRadius.bottomRight = value;
+						break;
+					case 'borderBottomLeftRadius':
+						this._borderRadius.bottomLeft = value;
+						break;
+
+
+					// Back & Front linked properties
+					case 'side':
+					case 'castShadow':
+					case 'receiveShadow':
+						const upperCamelCaseProperty = prop.charAt(0).toUpperCase()+prop.substr(1);
+						this[`_background${upperCamelCaseProperty}`].value = value;
+						this[`_font${upperCamelCaseProperty}`].value = value;
+						break;
+
+
+						// Meshes & material properties
+					case 'fontSide':
+					case 'backgroundSide':
+					case 'fontCastShadow':
+					case 'backgroundCastShadow':
+					case 'fontReceiveShadow':
+					case 'backgroundReceiveShadow':
+					case 'fontMaterial':
+					case 'fontCustomDepthMaterial':
+						this[`_${prop}`].value = value;
+						break;
+
+
+					default:
+
+						console.log(prop)
+
+						if( this[ prop ] !== undefined ) {
+
+							console.log(`--		${prop} has setter`)
+
+							this[ prop ] = value
+						}else if( this[`_${prop}`] !== undefined ) {
+							this[`_${prop}`].value = value;
+						} else {
+							// error
+						}
+				}
+
+		}
+
+	}
+
+	get ( property ) {
+
+		switch ( property ) {
+
+			case 'overflow':
+			case 'width' :
+			case 'height' :
+				return this[`_${property}`].inline;
+		}
+
+	}
+
+	/**
+	 * Filters children in order to compute only one times children lists
+	 * @private
+	 */
+	_rebuildChildrenLists() {
+
+		//console.log( this.name, 'child added' );
+		this._children._needsUpdate = true;
+
+	}
+
+	/**
+	 * Try to retrieve parentUI after each structural change
+	 * @protected
+	 */
+	_rebuildParentUI = () => {
+
+		this._parent._needsUpdate = true;
+
+		// set elements as root
+		if ( this.parent && !this.parent.isUI ) {
+
+			UpdateManager.register( this );
+			this.activatePseudoState('root');
+
+		} else {
+
+			UpdateManager.remove( this );
+			this.deactivatePseudoState('root');
+		}
+
+
+	};
+
+	/**
+	 * When the user calls component.add, it registers for updates,
+	 * then call THREE.Object3D.add.
+	 */
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) {
+
+		let addedUIChildren = false;
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			super.add( arguments[ i ] );
+
+			if( arguments[i].isUI ) {
+				addedUIChildren = true;
+			}
+
+		}
+
+		if( addedUIChildren ) this._rebuildChildrenLists();
+
+		return this;
+
+	}
+
+
+	/**
+	 * When the user calls component.remove, it registers for updates,
+	 * then call THREE.Object3D.remove.
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	remove( object ) {
+
+		for ( const id of Object.keys( arguments ) ) {
+
+			// An inline component relies on its parent for positioning
+			if ( arguments[ id ].isInline ) this.update( null, true );
+
+		}
+
+		super.remove( ...arguments );
+
+		this._rebuildChildrenLists();
+
+		return this;
+
+	}
+
+	/**
+	 *
+	 * @return {Object3D}
+	 */
+	clear() {
+
+		this.removeFromParent();
+
+		this.traverse( ( obj ) => {
+
+			if ( obj.material ) obj.material.dispose();
+			if ( obj.geometry ) obj.geometry.dispose();
+
+		} );
+
+		super.clear();
+
+		// remove properties
+		this._backgroundMesh = null;
+		this._backgroundMaterial = null;
+		this._backgroundMaterialMediation = null;
+		this._backgroundMeshMediation = null;
+
+		this._children.dispose();
+		this._children = null;
+
+		this._parent.dispose();
+		this._parent = null;
+
+		this._backgroundSide = null;
+		this._backgroundAlphaTest = null;
+		this._visible = null;
+		this._backgroundCastShadow = null;
+		this._backgroundReceiveShadow = null;
+		this._renderOrder = null;
+		this._segments = null;
+		this._bounds = null;
+
+		// styles properties
+		this._boxSizing = null;
+		this._padding = null;
+		this._margin = null;
+		this._position = null;
+		this._flexDirection = null;
+		this._justifyContent = null;
+		this._alignItems = null;
+		this._display = null;
+		this._backgroundColor = null;
+		this._backgroundOpacity = null;
+		this._backgroundSize = null;
+		this._fontOpacity = null;
+		this._color = null;
+		this._whiteSpace = null;
+		this._fontFamily = null;
+		this._fontStyle = null;
+		this._fontWeight = null;
+		this._lineHeight = null;
+		this._fontKerning = null;
+		this._letterSpacing = null;
+		this._overflow = null;
+		this._textAlign = null;
+
+		this._font = null;
+		this._lineBreak = null;
+		this._layouter = null;
+
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	get textContent() {
+
+		this._textContent.process( this );
+
+		return this._textContent._value;
+
+	}
+
+	/***********************************************************************************************************************
+	 * TO MATERIAL HOLDER
+	 **********************************************************************************************************************/
+
+	/**
+	 *
+	 * @returns {Material|ShaderMaterial}
+	 */
+	get backgroundMaterial() { return this._backgroundMaterial; }
+
+	/**
+	 *
+	 * @param {Material|ShaderMaterial} material
+	 */
+	set backgroundMaterial( material ) {
+
+		this._backgroundMaterial = material;
+
+		// Update the fontMaterialProperties that need to be transferred to
+		this._backgroundMaterialMediation = { ...material.constructor.mediation };
+
+		// transfer all the properties to material
+		this._transferToBackgroundMaterial();
+
+		if ( this._backgroundMesh ) {
+
+			this._backgroundMesh.material = this._backgroundMaterial;
+			uniformOrUserDataTransformer( material, 'frameSize', this._backgroundMesh.scale );
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @param {Material|null} material
+	 */
+	set backgroundCustomDepthMaterial( material ) {
+
+		this._backgroundCustomDepthMaterial = material;
+
+		this._transferToBackgroundMaterial();
+
+		if ( this._backgroundMesh ) {
+			// transfer to the main if isset
+			this._backgroundMesh.customDepthMaterial = this._backgroundCustomDepthMaterial;
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @returns {Material|null}
+	 */
+	get backgroundCustomDepthMaterial() { return this._backgroundCustomDepthMaterial; }
+
+	/**
+	 * According to the list of materialProperties
+	 * some properties are sent to material
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToBackgroundMaterial( options = null ) {
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+		}
+
+		Mediator.mediate( this, this._backgroundMaterial, options, this._backgroundMaterialMediation, this._backgroundCustomDepthMaterial );
+
+	}
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set backgroundSide( value ) {
+
+		this._backgroundSide.value = value;
+
+		if ( this._backgroundMaterial ) this._backgroundMaterial.side = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get backgroundSide() { return this._backgroundSide.value; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set backgroundAlphaTest ( value ) {
+
+		this._backgroundAlphaTest.value = value;
+
+		if( this._backgroundMaterial ) this._backgroundMaterial.alphaTest = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get backgroundAlphaTest () { return this._backgroundAlphaTest.value; }
+
+	/** Font Material ----------------------------------------------------------*/
+
+	/**
+	 *
+	 * @returns {Material|ShaderMaterial}
+	 */
+	// get fontMaterial() { return this._fontMaterial__; }
+	get fontMaterial() { return this._fontMaterial.value; }
+
+	/**
+	 *
+	 * @param {Material|ShaderMaterial} material
+	 */
+	set fontMaterial( material ) {
+
+		this._fontMaterial.value = material;
+
+	}
+
+	/**
+	 *
+	 * @param {Material|null} material
+	 */
+	set fontCustomDepthMaterial( material ) {
+
+		this._fontCustomDepthMaterial.value = material;
+
+	}
+
+	/**
+	 *
+	 * @returns {Material|null}
+	 */
+	get fontCustomDepthMaterial() { return this._fontCustomDepthMaterial.value; }
+
+	/**
+	 * According to the list of materialProperties
+	 * some properties are sent to material
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToFontMaterial( options = null ) {
+
+		const fontMat = this._fontMaterial.value;
+		if( !fontMat ) return;
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+		}
+
+		Mediator.mediate( this, fontMat, options, this._fontMaterial._mediation, this._fontCustomDepthMaterial.value );
+
+	}
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set fontSide( value ) {
+
+		this._fontSide.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get fontSide() { return this._fontSide.value; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set fontAlphaTest ( value ) {
+
+		this._fontAlphaTest.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get fontAlphaTest () { return this._fontAlphaTest.value; }
+
+	/*********************************************************************************************************************
+	 * MESH MEDIATION
+	 ********************************************************************************************************************/
+
+	/**
+	 * According to the list of meshProperties
+	 * some properties are sent to mesh
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToBackgroundMesh( options = null ) {
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+
+		}
+
+		Mediator.mediate( this, this._backgroundMesh, options, this._backgroundMeshMediation );
+
+	}
+
+	/**
+	 * @internal
+	 * @param {Mesh|Array.<Mesh>|null} mesh
+	 */
+	setBackgroundMesh( mesh ) {
+
+		if( this._backgroundMesh ) {
+
+			this.remove( this._backgroundMesh );
+			this.unbindBackgroundMeshProperties();
+
+		}
+
+		this._backgroundMesh = mesh;
+
+		if ( this._backgroundMesh ) {
+
+			this.bindBackgroundMeshProperties();
+
+			if( this._backgroundCustomDepthMaterial ) {
+				this._backgroundMesh.customDepthMaterial = this._backgroundCustomDepthMaterial;
+			}
+
+			if( this._backgroundMaterial ) {
+				uniformOrUserDataTransformer( this._backgroundMaterial, 'frameSize', this._backgroundMesh.scale );
+			}
+
+			this._transferToBackgroundMesh();
+
+			this.add( this._backgroundMesh );
+
+		}
+
+	}
+
+	/**
+	 *
+	 */
+	bindBackgroundMeshProperties () { }
+
+	/**
+	 *
+	 */
+	unbindBackgroundMeshProperties () { }
+
+
+	activatePseudoState ( state ) {
+
+	}
+
+	deactivatePseudoState ( state ) {
+
+	}
+
+	togglePseudoState ( state ) {
+
+	}
+
+
+	hasPseudoState( state ) {
+		return false;
+	}
+
+	set borderRadiusMediation ( value ) {
+		this._borderRadius.mediation = value;
+	}
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set backgroundCastShadow( value ) {
+
+		if( this._backgroundCastShadow ) this._backgroundCastShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get backgroundCastShadow() { return this._backgroundCastShadow; }
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set backgroundReceiveShadow( value ) {
+
+		if( this._backgroundReceiveShadow ) this._backgroundReceiveShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get backgroundReceiveShadow() { return this._backgroundReceiveShadow; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set renderOrder( value ) {
+
+		if( this._renderOrder ) this._renderOrder.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get renderOrder() { return this._renderOrder.value; }
+
+	/** Font Mesh --------------------------------------------------------------*/
+
+	/**
+	 * According to the list of meshProperties
+	 * some properties are sent to mesh
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToFontMesh( options = null ) {
+
+		if( !this._fontMesh ) return;
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+		}
+
+		Mediator.mediate( this, this._fontMesh, options, this._fontMeshMediation );
+
+	}
+
+	/**
+	 * @internal
+	 * @param {Mesh|Array.<Mesh>|null} mesh
+	 */
+	setFontMesh( mesh ) {
+
+		if( this._fontMesh ) {
+
+			this.remove( this._fontMesh );
+
+			if ( this._fontMesh.material ) this._fontMesh.material.dispose?.();
+			if ( this._fontMesh.geometry ) this._fontMesh.geometry.dispose?.();
+
+			this._fontMesh = null;
+			// deepDelete( this._fontMesh );
+
+			this.unbindFontMeshProperties();
+
+		}
+
+		this._fontMesh = mesh;
+
+		if ( this._fontMesh ) {
+
+			this._fontMesh.raycast = () => {};
+
+			this.bindFontMeshProperties();
+
+			this._transferToFontMaterial();
+			this._transferToFontMesh();
+
+			this.add( this._fontMesh );
+
+		}
+
+	}
+
+	/**
+	 *
+	 */
+	bindFontMeshProperties () { }
+
+	/**
+	 *
+	 */
+	unbindFontMeshProperties () { }
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set fontCastShadow( value ) {
+
+		if( this._fontCastShadow ) this._fontCastShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get fontCastShadow() { return this._fontCastShadow; }
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set fontReceiveShadow( value ) {
+
+		if( this._fontReceiveShadow ) this._fontReceiveShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get fontReceiveShadow() { return this._fontReceiveShadow; }
+
+	/***********************************************************************************************************************
+	 * GEOMETRY
+	 **********************************************************************************************************************/
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set segments (v) {
+
+		this._segments.value = v;
+
+		// @TODO : Geometry Update
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get segments () { return this._segments.value; }
+
+
+	/***********************************************************************************************************************
+	 * HOOKS & ALTERS
+	 **********************************************************************************************************************/
+
+	/**
+	 *
+	 * @param {Function} func
+	 */
+	set onAfterUpdate( func ) {
+
+		console.warn( 'ThreeMeshUI v7xx : `onAfterUpdate()` property has been deprecated, please rely on `addAfterUpdate` instead.' );
+		this.addAfterUpdate( func );
+
+	}
+
+	/**
+	 *
+	 * @param {Function} func
+	 */
+	addAfterUpdate( func ) {
+
+		this._onAfterUpdates.push( func );
+
+	}
+
+	/**
+	 *
+	 * @param {Function} func
+	 */
+	removeAfterUpdate( func ) {
+
+		const index = this._onAfterUpdates.indexOf( func );
+		if ( index !== -1 ) {
+
+			this._onAfterUpdates.splice( index, 1 );
+
+		}
+
+	}
+
+	/**
+	 * @todo: afterUpdate not called anymore
+	 */
+	performAfterUpdate() {
+
+		for ( let i = 0; i < this._onAfterUpdates.length; i++ ) {
+
+			this._onAfterUpdates[ i ]();
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @param {string} name
+	 * @param {BaseProperty} instance
+	 * @returns {void}
+	 */
+	appendProperty( name, instance ) {
+
+		this[`_${name}`] = instance;
+		this._components.push( instance );
+
+	}
+
+	/**
+	 *
+	 * @param {string} name
+	 * @param {BaseProperty} instance
+	 * @returns {BaseProperty}
+	 */
+	replaceProperty( name, instance ) {
+
+		const oldProperty = this[`_${name}`];
+
+		const index = this._components.indexOf( oldProperty );
+
+		this._components[index] = this[`_${name}`] = instance;
+		instance.needsUpdate = true;
+
+		return oldProperty;
+
+	}
+
+}
+
+/**
+ * @typedef Properties
+ * @type {Object.<string,Function>}
+ */
+
+/**
+ * @typedef Options
+ * @type {DocumentedOptions & Object.<string,any>}
+ */
+
+/**
+ *
+ * @typedef {Object} DocumentedOptions
+ *
+ * @property [options.name] {string}
+ * @property [options.flexDirection] {"row"|"row-reverse"|"column"|"column-reverse"}
+ * @property [options.justifyContent] {"start"|"center"|"end"|"space-around"|"space-between"|"space-evenly"}
+ * @property [options.alignItems] {"start"|"center"|"end"|"stretch"}
+ * @property [options.overflow] {"visible"|"hidden"}
+ * @property [options.fontKerning] {"normal"|"none"}
+ * @property [options.segments] {number}
+ * @property [options.fontFamily] {FontFamily|string}
+ * @property [options.fontStyle] {"normal"|"italic"}
+ * @property [options.fontWeight] {"light"|"normal"|"bold"|"bolder"|100|200|300|400|500|600|700|800|900}
+ *
+ * @property [options.color]{Color|number|string} The font color
+ *
+ * @property [options.backgroundColor]{Color|number|string} The background color
+ * @property [options.backgroundOpacity] {number}
+ * @property [options.backgroundSize] {"cover"|"contain"|"stretch"}
+ * @property [options.backgroundImage] {Texture|string}
+ *
+ *
+ * @property [options.borderRadius] {Vector4|Array.<number>|number|string}
+ * @property [options.borderWidth] {Vector4|Array.<number>|number|string}
+ * @property [options.borderColor] {Color|number|string}
+ *
+ * @property [options.boxSizing] {"content-box"|"border-box"}
+ * @property [options.width] {number|string|"100%"|"auto"}
+ * @property [options.height] {number|string|"100%"|"auto"}
+ * @property [options.padding] {Vector4|Array.<number>|number|string}
+ * @property [options.margin] {Vector4|Array.<number>|number|string}
+ *
+ * @property [options.textAlign] {"left"|"right"|"center"|"justify"|"justify-left"|"justify-right"}
+ * @property [options.visible] {boolean}
+ * @property [options.letterSpacing] {number}
+ *
+ * @property [options.whiteSpace] {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"}
+ * @property [options.fontTexture] {Texture|string} @deprecated
+ * @property [options.textContent] {string}
+ *
+ * @property [options.verticalAlign] {"baseline","super","sub","inherit"}
+ *
+ *
+ */
+
+;// CONCATENATED MODULE: ./src/components/core/UpdateManager.js
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+/**
+ * Job:
+ * - recording components required updates
+ * - trigger those updates when 'update' is called
+ *
+ * This module is a bit special. It is, with FontLibrary, one of the only modules in the 'component'
+ * directory not to be used in component composition (Object.assign).
+ *
+ * When MeshUIComponent is instanciated, it calls UpdateManager.register().
+ *
+ * Then when MeshUIComponent receives new attributes, it doesn't update the component right away.
+ * Instead, it calls UpdateManager.requestUpdate(), so that the component is updated when the user
+ * decides it (usually in the render loop).
+ *
+ * This is best for performance, because when a UI is created, thousands of componants can
+ * potentially be instantiated. If they called updates function on their ancestors right away,
+ * a given component could be updated thousands of times in one frame, which is very ineficient.
+ *
+ * Instead, redundant update request are moot, the component will update once when the use calls
+ * update() in their render loop.
+ */
+class UpdateManager {
+
+
+	static register( component ) {
+
+		if ( !this.elements.includes( component ) ) {
+
+				this.elements.push( component );
+
+		}
+
+	}
+
+	static remove( component ) {
+
+		const index = this.elements.indexOf( component );
+		if ( index !== -1 ) {
+
+			this.elements.splice( index, 1 );
+
+		}
+
+	}
+
+
+	static update() {
+
+		for ( const UIElement of this.elements ) {
+			UIElement.update();
+
+			UIElement.process(); // Natural process
+			UIElement.process(); // Actual process (optional) - For auto size and stretch
+
+			UIElement.render();
+		}
+
+	}
+
+}
+
+/**
+ * @internal
+ * @type {Array.<MeshUIBaseElement>}
+ */
+UpdateManager.elements = [];
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-border.pars.vertex.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const frame_border_pars_vertex_glsl_program = /* glsl */`
+
+// FrameBorder vertex pars
+attribute vec2 uvB;
+varying vec2 vUvB;
+
+`;
+
+/* harmony default export */ const frame_border_pars_vertex_glsl = (frame_border_pars_vertex_glsl_program);
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-border.vertex.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const frame_border_vertex_glsl_program = /* glsl */`
+
+	// FrameBorder vertex shader
+	vUvB = uvB;
+
+`;
+
+/* harmony default export */ const frame_border_vertex_glsl = (frame_border_vertex_glsl_program);
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-border.pars.fragment.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const frame_border_pars_fragment_glsl_program = /* glsl */`
+
+// borders sequences are : x:TOP, y:RIGHT, z:BOTTOM, w:LEFT
+uniform vec4 borderWidth;
+uniform vec3 borderColor;
+uniform float borderOpacity;
+uniform vec4 borderRadius;
+
+uniform vec2 cornerTL;
+uniform vec2 cornerTR;
+uniform vec2 cornerBR;
+uniform vec2 cornerBL;
+
+varying vec2 vUvB;
+
+float getEllipticFactor( vec2 uv, vec2 center, float radiusX, float radiusY )
+{
+
+		float edx = uv.x - center.x;
+		float edy = uv.y - center.y;
+
+		float ddx = (edx * edx) / (radiusX * radiusX);
+		float ddy = (edy * edy) / (radiusY * radiusY);
+
+		return ddx + ddy;
+
+}
+
+`;
+
+/* harmony default export */ const frame_border_pars_fragment_glsl = (frame_border_pars_fragment_glsl_program);
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-border.fragment.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const frame_border_fragment_glsl_program = /* glsl */`
+
+vec4 borderColor = vec4( borderColor, borderOpacity );
+
+// This could be tweak to produce more smoothing
+float mult = 1.0;
+
+// Step 1 ----------------------------------------------
+// Draw the four borders ( top - right - bottom - left )
+// Without worrying about radiuses ( Straight boorders )
+
+// Top
+float topBorderUVy = 1.0 - borderWidth.x;
+if( borderWidth.x > 0.0 && vUvB.y > topBorderUVy )
+{
+
+	float w = fwidth( 1.0 - vUvB.y ) * mult;
+	float step = smoothstep( topBorderUVy , topBorderUVy + w , vUvB.y );
+	diffuseColor = mix( diffuseColor, borderColor, step );
+
+}
+
+// Left
+float leftBorderUVx = borderWidth.w;
+if( borderWidth.w > 0.0 && vUvB.x < leftBorderUVx )
+{
+
+	float w = fwidth( vUvB.x ) * mult ;
+	float step = smoothstep( leftBorderUVx , leftBorderUVx - w , vUvB.x );
+	diffuseColor = mix( diffuseColor, borderColor, step );
+
+}
+
+// Bottom
+float bottomBorderUVy = borderWidth.z;
+if( borderWidth.z > 0.0 && vUvB.y < bottomBorderUVy )
+{
+	float w = fwidth( vUvB.y ) * mult;
+	float step = smoothstep( bottomBorderUVy , bottomBorderUVy - w , vUvB.y );
+	diffuseColor = mix( diffuseColor, borderColor, step );
+}
+
+// Right
+float rightBorderUVx = 1.0 - borderWidth.y;
+if( borderWidth.y > 0.0 && vUvB.x > rightBorderUVx )
+{
+	float w = fwidth( 1.0 - vUvB.x ) * mult;
+	float step = smoothstep( rightBorderUVx , rightBorderUVx + w , vUvB.x );
+	diffuseColor = mix( diffuseColor, borderColor, step );
+}
+
+
+// Step 2 ----------------------------------------------
+// Process each corners ( topLeft, topRight, bottomRight, bottomLeft )
+// To transparentize outside radiuses
+// To draw ellipse border on the corner
+
+
+// Top Left corner
+if( vUvB.x < cornerTL.x && vUvB.y > cornerTL.y ) {
+
+		// Only draw border if width is set
+		if( borderWidth.w + borderWidth.x > 0.0 ){
+
+			float borderFactor = getEllipticFactor( vUvB, cornerTL, cornerTL.x - borderWidth.w,  ( 1.0 - cornerTL.y ) - borderWidth.x );
+			float step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );
+			diffuseColor = mix( diffuseColor, borderColor, step );
+
+		}
+
+		// Then then radius
+		float radiusFactor = getEllipticFactor( vUvB, cornerTL, cornerTL.x, 1.0 - cornerTL.y );
+		float alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );
+		diffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );
+
+}
+// Bottom Left
+if( vUvB.x < cornerBL.x && vUvB.y < cornerBL.y ) {
+
+		if( borderWidth.w + borderWidth.z > 0.0 ){
+
+			float borderFactor = getEllipticFactor( vUvB, cornerBL, cornerBL.x - borderWidth.w,  cornerBL.y - borderWidth.z );
+			float step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );
+			diffuseColor = mix( diffuseColor, borderColor, step );
+
+		}
+
+
+		float radiusFactor = getEllipticFactor( vUvB, cornerBL, cornerBL.x, cornerBL.y );
+		float alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );
+		diffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );
+
+}
+// Top Right
+if( vUvB.x > cornerTR.x && vUvB.y > cornerTR.y ) {
+
+		if( borderWidth.y + borderWidth.x > 0.0 ){
+
+			float borderFactor = getEllipticFactor( vUvB, cornerTR, ( 1.0 - cornerTR.x ) - borderWidth.y,  ( 1.0 - cornerTR.y ) - borderWidth.x );
+			float step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );
+			diffuseColor = mix( diffuseColor, borderColor, step );
+
+		}
+
+		float radiusFactor = getEllipticFactor( vUvB, cornerTR, 1.0 - cornerTR.x, 1.0 - cornerTR.y );
+		float alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );
+		diffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );
+
+}
+// Bottom Right
+if( vUvB.x > cornerBR.x && vUvB.y < cornerBR.y ) {
+
+		if( borderWidth.y + borderWidth.z > 0.0 ){
+
+			float borderFactor = getEllipticFactor( vUvB, cornerBR, ( 1.0 - cornerBR.x ) - borderWidth.y,  cornerBR.y - borderWidth.z );
+			float step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );
+			diffuseColor = mix( diffuseColor, borderColor, step );
+
+		}
+
+		float radiusFactor = getEllipticFactor( vUvB, cornerBR, 1.0 - cornerBR.x, cornerBR.y );
+		float alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );
+		diffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );
+
+}
+
+`;
+
+/* harmony default export */ const frame_border_fragment_glsl = (frame_border_fragment_glsl_program);
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-common.pars.fragment.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const frame_common_pars_fragment_glsl_program = /* glsl */`
+
+// To be removed - required for both border and background
+uniform vec3 frameSize;
+uniform vec2 textureSize;
+
+`;
+
+/* harmony default export */ const frame_common_pars_fragment_glsl = (frame_common_pars_fragment_glsl_program);
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-background.pars.fragment.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const frame_background_pars_fragment_glsl_program = /* glsl */`
+
+#ifdef USE_MAP
+
+vec4 sampleTexture() {
+
+	vec2 uv = vUv;
+
+	// default stretch
+	#if BACKGROUND_MAPPING != 0
+
+	float textureRatio = textureSize.x / textureSize.y;
+	float panelRatio = frameSize.x / frameSize.y;
+	float ratio = panelRatio / textureRatio;
+	float ratio2 = textureRatio / panelRatio;
+
+		// contain
+		#if BACKGROUND_MAPPING == 1
+		if ( textureRatio < panelRatio ) { // repeat on X
+			float newX = uv.x * ratio;
+			newX += 0.5 - 0.5 * ratio;
+			uv.x = newX;
+		} else { // repeat on Y
+			float newY = uv.y * ratio2;
+			newY += 0.5 - 0.5 * ratio2;
+			uv.y = newY;
+		}
+		#else
+		// cover
+		if ( textureRatio < panelRatio ) { // stretch on Y
+			float newY = uv.y * ratio2;
+			newY += 0.5 - 0.5 * ratio2;
+			uv.y = newY;
+		} else { // stretch on X
+			float newX = uv.x * ratio;
+			newX += 0.5 - 0.5 * ratio;
+			uv.x = newX;
+		}
+
+		#endif
+
+	#endif
+
+	return texture2D( map, uv );
+
+}
+#endif
+`;
+
+/* harmony default export */ const frame_background_pars_fragment_glsl = (frame_background_pars_fragment_glsl_program);
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderChunk/frame-background.fragment.glsl.js
+/**
+ *
+ * @type {string}
+ */
+const frame_background_fragment_glsl_program = /* glsl */`
+#ifdef USE_MAP
+
+	vec4 textureSample = sampleTexture();
+	diffuseColor *= textureSample;
+
+#endif
+`;
+
+/* harmony default export */ const frame_background_fragment_glsl = (frame_background_fragment_glsl_program);
+
+;// CONCATENATED MODULE: ./src/renderers/shaders/ShaderChunkUI.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* eslint-disable camelcase */
+
+/**
+ * @typedef {Object} ChunksUI
+ * @property msdf_alphaglyph_vertex {string}
+ * @property frame_border_fragment {string}
+ * @property frame_background_pars_fragment {string}
+ * @property frame_common_pars {string}
+ * @property msdf_alphaglyph_pars_vertex {string}
+ * @property frame_border_pars_fragment {string}
+ * @property msdf_offset_vertex {string}
+ * @property frame_border_pars_vertex {string}
+ * @property msdf_alphaglyph_pars_fragment {string}
+ * @property frame_border_vertex {string}
+ * @property frame_background_fragment {string}
+ * @property msdf_alphaglyph_fragment {string}
+ */
+
+
+const ShaderChunkUI = {
+	msdfAlphaglyphParsVertexGlsl: msdf_alphaglyph_pars_vertex_glsl,
+	msdfAlphaglyphVertexGlsl: msdf_alphaglyph_vertex_glsl,
+	msdfOffsetglyphVertexGlsl: msdf_offsetglyph_vertex_glsl,
+	msdfAlphaglyphParsFragmentGlsl: msdf_alphaglyph_pars_fragment_glsl,
+	msdfAlphaglyphFragmentGlsl: msdf_alphaglyph_fragment_glsl,
+	frameBorderParsVertexGlsl: frame_border_pars_vertex_glsl,
+	frameBorderVertexGlsl: frame_border_vertex_glsl,
+	frameCommonParsFragmentGlsl: frame_common_pars_fragment_glsl,
+	frameBorderParsFragmentGlsl: frame_border_pars_fragment_glsl,
+	frameBorderFragmentGlsl: frame_border_fragment_glsl,
+	frameBackgroundParsFragmentGlsl: frame_background_pars_fragment_glsl,
+	frameBackgroundFragmentGlsl: frame_background_fragment_glsl,
+};
+/* eslint-enable camelcase */
+
+;// CONCATENATED MODULE: ./src/frame/renderers/ShaderLib/framematerial.glsl.js
+
+
+
+
+
+
+
+
+const framematerial_glsl_vertexShader = /* glsl */`
+// Would be automatic on three materials and from USE_UV
+#ifdef USE_MAP
+varying vec2 vUv;
+#endif
+
+${frame_border_pars_vertex_glsl}
+
+#include <clipping_planes_pars_vertex>
+
+void main() {
+
+	#ifdef USE_MAP
+	vUv = uv;
+	#endif
+
+	${frame_border_vertex_glsl}
+
+	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+	gl_Position = projectionMatrix * mvPosition;
+
+	#include <clipping_planes_vertex>
+
+}
+`
+
+const framematerial_glsl_fragmentShader = /* glsl */`
+
+// Basic
+uniform vec3 diffuse;
+uniform float opacity;
+
+#ifdef USE_ALPHATEST
+	uniform float alphaTest;
+#endif
+
+${frame_common_pars_fragment_glsl}
+
+${frame_border_pars_fragment_glsl}
+
+
+#ifdef USE_MAP
+varying vec2 vUv;
+uniform sampler2D map;
+#endif
+
+${frame_background_pars_fragment_glsl}
+
+#include <clipping_planes_pars_fragment>
+
+void main() {
+
+	vec4 diffuseColor = vec4( diffuse, opacity );
+
+	// map
+	${frame_background_fragment_glsl}
+
+	${frame_border_fragment_glsl}
+
+	#ifdef USE_ALPHATEST
+
+	if ( diffuseColor.a < alphaTest ) discard;
+
+	#endif
+
+	// output
+	gl_FragColor = diffuseColor;
+
+
+	#include <clipping_planes_fragment>
+}
+`
+
+;// CONCATENATED MODULE: ./src/frame/utils/FrameMaterialUtils.js
+
+
+//JSDoc related import
+/* eslint-disable no-unused-vars */
+
+
+
+
+
+
+
+
+
+/* eslint-enable no-unused-vars */
+
+
+class FrameMaterialUtils {
+
+
+
+	/**
+	 *
+	 * @returns {Object<{m: string, t?: (function((Material|ShaderMaterial), string, *): void)}>}
+	 */
+	static get mediation() {
+
+		return _mediationDefinitions;
+
+	}
+
+
+	/**
+	 * Alter a material options with required fontMaterial options and or default values
+	 * @param {Object.<string,any>} materialOptions
+	 */
+	static ensureMaterialOptions( materialOptions ) {
+		materialOptions.transparent = true;
+		materialOptions.alphaTest = materialOptions.alphaTest || 0.02;
+	}
+
+	/**
+	 * As three-mesh-ui FontMaterial relies on webgl preprocessors,
+	 * lets force the material to have a proper defines object
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 */
+	static ensureDefines( threeMaterial ) {
+		if ( !threeMaterial.defines ) {
+			threeMaterial.defines = {};
+		}
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 * @param {Object.<string,any>} materialOptions
+	 */
+	static ensureUserData( threeMaterial, materialOptions ) {
+		threeMaterial.userData.borderColor = { value: null };
+		threeMaterial.userData.borderRadius = { value: new external_three_namespaceObject.Vector4(0,0,0,0) };
+		// Store corners based on borderRadiuses
+		threeMaterial.userData.cornerTL = { value : new external_three_namespaceObject.Vector2(0,1) };
+		threeMaterial.userData.cornerTR = { value : new external_three_namespaceObject.Vector2(1,1) };
+		threeMaterial.userData.cornerBR = { value : new external_three_namespaceObject.Vector2(1,0) };
+		threeMaterial.userData.cornerBL = { value : new external_three_namespaceObject.Vector2(0,0) };
+
+		threeMaterial.userData.borderWidth = { value: new external_three_namespaceObject.Vector4(0,0,0,0) };
+		threeMaterial.userData.borderOpacity = { value: null };
+		threeMaterial.userData.frameSize = { value: new external_three_namespaceObject.Vector3( 1, 1, 1 ) };
+		threeMaterial.userData.textureSize = { value: new external_three_namespaceObject.Vector2( 1, 1 ) };
+
+	}
+	/* eslint-enable no-unused-vars */
+
+	/**
+	 *
+	 * @param {any} shader
+	 * @param {Material|ShaderMaterial} threeMaterial
+	 */
+	static bindUniformsWithUserData( shader, threeMaterial ) {
+
+		shader.uniforms.borderColor = threeMaterial.userData.borderColor;
+		// Border radiuses and corners
+		shader.uniforms.borderRadius = threeMaterial.userData.borderRadius;
+		shader.uniforms.cornerTL = threeMaterial.userData.cornerTL;
+		shader.uniforms.cornerTR = threeMaterial.userData.cornerTR;
+		shader.uniforms.cornerBR = threeMaterial.userData.cornerBR;
+		shader.uniforms.cornerBL = threeMaterial.userData.cornerBL;
+
+		shader.uniforms.borderWidth = threeMaterial.userData.borderWidth;
+		shader.uniforms.borderOpacity = threeMaterial.userData.borderOpacity;
+		shader.uniforms.frameSize = threeMaterial.userData.frameSize;
+		shader.uniforms.textureSize = threeMaterial.userData.textureSize;
+	}
+
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectShaderChunks( shader ) {
+		FrameMaterialUtils.injectVertexShaderChunks( shader );
+		FrameMaterialUtils.injectFragmentShaderChunks( shader );
+	}
+
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectVertexShaderChunks( shader ) {
+		shader.vertexShader = shader.vertexShader.replace(
+			'#include <uv_pars_vertex>',
+			'#include <uv_pars_vertex>\n' + frame_border_pars_vertex_glsl
+		);
+
+		// vertex chunks
+		shader.vertexShader = shader.vertexShader.replace(
+			'#include <uv_vertex>',
+			'#include <uv_vertex>\n' + frame_border_vertex_glsl
+		)
+
+	}
+
+	/**
+	 *
+	 * @param shader
+	 */
+	static injectFragmentShaderChunks( shader ) {
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <map_pars_fragment>',
+			'#include <map_pars_fragment>\n' + frame_background_pars_fragment_glsl
+		)
+
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <map_pars_fragment>',
+			'#include <map_pars_fragment>\n' + frame_border_pars_fragment_glsl
+		)
+
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <map_pars_fragment>',
+			'#include <map_pars_fragment>\n' + frame_common_pars_fragment_glsl
+		)
+
+		// fragment chunks
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <map_fragment>',
+			frame_background_fragment_glsl
+		)
+
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <alphamap_fragment>',
+			frame_border_fragment_glsl+'\n#include <alphamap_fragment>'
+		)
+
+	}
+
+}
+
+/**
+ *
+ * @param target
+ * @param property
+ * @param value
+ * @private
+ */
+const _backgroundSizeTransformer = function( target, property, value ) {
+
+	value = ['stretch','contain','cover'].indexOf(value);
+	asPreprocessorValueTransformer(target, 'BACKGROUND_MAPPING', value);
+
+}
+
+// /**
+//  *
+//  * @type {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+//  */
+// const _mediationDefinitions = {
+// 	alphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+// 	backgroundTexture: { m: 'map' },
+// 	backgroundColor: { m: 'color' },
+// 	backgroundOpacity: { m:'opacity' },
+// 	backgroundSize: { m: 'u_backgroundMapping', t: _backgroundSizeTransformer },
+// 	_borderWidthComponent: { m: 'borderWidth', t: _linkComponentOutput },
+// 	borderColor: { m: 'borderColor', t: uniformOrUserDataTransformer },
+// 	_borderRadiusComponent: { m: 'computedCorners', t: _linkCornersOutput },
+// 	borderOpacity: { m: 'borderOpacity', t: uniformOrUserDataTransformer },
+// 	size: { m: 'frameSize', t: uniformOrUserDataTransformer },
+// 	tSize: { m: 'textureSize', t: uniformOrUserDataTransformer }
+// }
+
+
+/**
+ * 7xx
+ * @type {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+ */
+const _mediationDefinitions = {
+	clippingPlanes : {m: 'clippingPlanes'},
+	backgroundAlphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+	backgroundSide: { m: 'side' },
+	// backgroundTexture: { m: 'map' },
+	backgroundImage: { m: 'map'},
+	backgroundColor: { m: 'color' },
+	backgroundOpacity: { m:'opacity' },
+	backgroundSize: { m: 'computedBackgroundSize', t: _backgroundSizeTransformer },
+	borderWidth: { m: 'borderWidth', t: uniformOrUserDataTransformer },
+	borderColor: { m: 'borderColor', t: uniformOrUserDataTransformer },
+	cornerTL : { m: 'cornerTL', t: uniformOrUserDataTransformer },
+	cornerTR : { m: 'cornerTR', t: uniformOrUserDataTransformer },
+	cornerBR : { m: 'cornerBR', t: uniformOrUserDataTransformer },
+	cornerBL : { m: 'cornerBL', t: uniformOrUserDataTransformer },
+	borderOpacity: { m: 'borderOpacity', t: uniformOrUserDataTransformer },
+	size: { m: 'frameSize', t: uniformOrUserDataTransformer },
+	tSize: { m: 'textureSize', t: uniformOrUserDataTransformer }
+}
+
+;// CONCATENATED MODULE: ./src/frame/materials/FrameMaterial.js
+
+
+
+
+class FrameMaterial extends external_three_namespaceObject.ShaderMaterial {
+
+
+	/**
+	 * This static method is mandatory for extending ThreeMeshUI.FrameMaterial
+	 * It will provide a transfer description for properties from ThreeMeshUI.Text to THREE.Material
+	 * @see {FrameMaterialUtils.mediation}
+	 * @returns {Object.<{m:string, t?:(frameMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+	 */
+	static get mediation() {
+
+		return FrameMaterialUtils.mediation;
+
+	}
+
+	constructor() {
+		super ( {
+			uniforms: {
+				alphaTest: { value: 0.02 },
+				map: { value: null },
+				diffuse: { value: new external_three_namespaceObject.Color(0xffffff) },
+				opacity: { value: 1.0 },
+				borderColor: { value: new external_three_namespaceObject.Color(0x000000) },
+				borderOpacity: { value: 0 },
+				borderRadius: { value: new external_three_namespaceObject.Vector4(0,0,0,0) },
+				// Corners for customized radius not all starting on center [0.5,0.5];
+				// Corners will be generated from borderRadiuses
+				cornerTL: { value : new external_three_namespaceObject.Vector2(0,1) },
+				cornerTR: { value : new external_three_namespaceObject.Vector2(1,1) },
+				cornerBR: { value : new external_three_namespaceObject.Vector2(1,0) },
+				cornerBL: { value : new external_three_namespaceObject.Vector2(0,0) },
+				borderWidth: { value: new external_three_namespaceObject.Vector4(0,0,0,0) },
+
+				frameSize: { value: new external_three_namespaceObject.Vector3( 1, 1, 1 ) },
+				textureSize: { value: new external_three_namespaceObject.Vector2( 1, 1 ) }
+			},
+			side: external_three_namespaceObject.FrontSide,
+			transparent: true,
+			clipping: true,
+			vertexShader: framematerial_glsl_vertexShader,
+			fragmentShader: framematerial_glsl_fragmentShader,
+			extensions: {
+				derivatives: true
+			}
+		} );
+
+		// webgl preprocessor AlphaTest set by default
+		this.defines[ 'USE_ALPHATEST' ] = '';
+		this.needsUpdate = true;
+	}
+
+	set map( value ) {
+
+		this.uniforms.map.value = value;
+		if( !value ) {
+
+			if( this.defines['USE_UV'] !== undefined ) {
+
+				delete this.defines['USE_UV'];
+				this.needsUpdate = true;
+
+			}
+
+		} else if( this.defines['USE_UV'] === undefined ) {
+
+			this.defines['USE_UV'] = '';
+			this.needsUpdate = true;
+
+		}
+
+		this.needsUpdate = true;
+
+	}
+
+	get map(){
+		return this.uniforms.map.value;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get alphaTest() {
+
+		return this.uniforms.alphaTest.value;
+
+	}
+
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set alphaTest( v ) {
+		this.uniforms.alphaTest.value = v;
+	}
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set opacity( v ) {
+
+		if( this.uniforms )
+			this.uniforms.opacity.value = v;
+
+	}
+
+	/**
+	 * The color will be the diffuse uniform
+	 * @returns {number}
+	 */
+	get opacity() {
+
+		return this.uniforms.opacity.value;
+
+	}
+
+	/**
+	 * The color will be the diffuse uniform
+	 * @returns {Color}
+	 */
+	get color() {
+
+		return this.uniforms.diffuse.value;
+
+	}
+
+	/**
+	 *
+	 * @param {Color} v
+	 */
+	set color( v ) {
+
+		this.uniforms.diffuse.value = v;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/hierarchy/ChildrenBox.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class ChildrenBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'children', null, false );
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @private
+		 */
+		this._uis = [];
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._boxes = [];
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update requested when :
+	 * 		- New child has been added
+	 * 		- Existing child has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) { /* eslint-enable no-unused-vars */
+
+		this._compute( element );
+
+		element._layouter._needsUpdate = true;
+		element._renderOrder._needsUpdate = true;
+
+	}
+
+
+	/**
+	 * Process when :
+	 * 		- Existing child visibility changed
+	 *
+	 * @param element
+	 */
+	process( element ) {
+
+		this._compute( element );
+
+		element._flexDirection._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+		element._overflow._needsRender = true;
+
+	}
+
+	_compute( element ) {
+
+		// Stores all children that are box
+		this._uis = element.children.filter( child => child.visible && child.isUI );
+		this._boxes = this._uis.filter( child => child.isBox ).sort( this._sortOrder );
+
+		// @TODO: check if it has changes boxes values? with array join to 'fingerprint'?
+		// 				computation to remove computation? Does it worth it? When would it worth it?
+		//				// Changed order property of children but doesn't impact the output of boxes => Order have change, okay to have more computation
+		//				// Removed the Added the same element, at the same position => Rare case
+		// 		Conclusion : Not worth it at the time of writing
+
+
+
+	}
+
+
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		this._uis = null;
+		this._boxes = null;
+
+	}
+
+	/**
+	 *
+	 * Sort children according to their .style.order property or fallback on children index
+	 *
+	 * @param {HTMLElementVR} a
+	 * @param {HTMLElementVR} b
+	 * @return {number}
+	 * @private
+	 */
+	_sortOrder = ( a, b ) => {
+
+		if( a._order._value < b._order._value ) return -1;
+		if( a._order._value > b._order._value ) return 1;
+
+		// if both children have the same order value, use their children index to order them
+		if( this._uis.indexOf(a) < this._uis.indexOf(b) ) {
+			return -1;
+		}
+
+		return 1;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/BoundsBox.js
+
+
+
+
+class BoundsBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'bounds', null, false );
+
+		/**
+		 *
+		 * @type {Vector3}
+		 * @internal
+		 */
+		this._size = new external_three_namespaceObject.Vector3( 1, 1, 1 );
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._offsetWidth = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._offsetHeight = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._innerWidth = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._innerHeight = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._centerX = 0.5;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._centerY = 0.5;
+
+
+		this._needsProcess = true;
+
+	}
+
+	/**
+	 * Set the value of the width 100%
+	 * @param element
+	 * @param value
+	 */
+	setReferenceWidth( element, value ) {
+
+		const width = element._width;
+		const padding = element._padding._value;
+		const borderWidth = element._borderWidth._value;
+		const margin = element._margin._value;
+
+		const factor = width._auto ? 1 : width._value;
+		// const newOffsetWidth = (value * factor) - (margin.y + margin.w);
+		const newOffsetWidth = (value * factor) - (margin.y + margin.w);
+		if ( numberEquals( newOffsetWidth, this._offsetWidth ) ) return;
+
+		this._offsetWidth = newOffsetWidth;
+		this._innerWidth = this._offsetWidth - ( padding.y + padding.w + borderWidth.y + borderWidth.w );
+
+		this._centerX = _computeCenterX( element );
+
+		this._propagateWidth( element );
+
+		this._triggerCascadingDependencies( element );
+
+	}
+
+	/**
+	 * Set the value of the height 100%
+	 * @param element
+	 * @param value
+	 */
+	setReferenceHeight( element, value ) {
+
+		const height = element._height;
+		const padding = element._padding._value;
+		const borderWidth = element._borderWidth._value;
+		const margin = element._margin._value;
+
+		const factor = height._auto ? 1 : height._value;
+
+		const newOffsetHeight = (value * factor) - ( margin.x + margin.z );
+		if ( numberEquals( newOffsetHeight, this._offsetHeight ) ) return;
+
+		this._offsetHeight = newOffsetHeight;
+		this._innerHeight = this._offsetHeight - ( padding.x + padding.z + borderWidth.x + borderWidth.z );
+		this._centerY = _computeCenterY( element );
+
+		this._propagateHeight( element );
+
+		this._triggerCascadingDependencies( element );
+
+	}
+
+	setChildrenWidth( element, value ) {
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		this._innerWidth = value;
+		this._offsetWidth = this._innerWidth + ( padding.y + padding.w + border.y + border.w )
+
+		this._centerX = _computeCenterX( element );
+
+		this._propagateWidth( element );
+		this._triggerCascadingDependencies( element );
+
+
+	}
+
+	setChildrenHeight( element, value ) {
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		this._innerHeight = value;
+		this._offsetHeight = this._innerHeight + ( padding.x + padding.z + border.x + border.z )
+
+		this._centerY = _computeCenterY( element );
+
+		this._propagateHeight( element );
+		this._triggerCascadingDependencies( element );
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		// only compute new width if explicitely defined
+		const width = element._width;
+		if( !width._auto && !width._relative ) {
+
+			if ( element._boxSizing._value === 'content-box' ) {
+
+				this._innerWidth = width._value;
+				this._offsetWidth = this._innerWidth + padding.y + padding.w + border.y + border.w;
+
+			} else {
+
+				this._offsetWidth = width._value;
+				this._innerWidth = this._offsetWidth - ( padding.y + padding.w + border.y + border.w );
+
+			}
+
+			this._centerX = _computeCenterX( element );
+			this._needsProcess = true;
+
+			// tells children width has changed
+			this._propagateWidth( element );
+			this._triggerCascadingDependencies( element );
+
+		}
+
+		const height = element._height;
+		if( !height._auto && !height._relative ) {
+
+			if ( element._boxSizing._value === 'content-box' ) {
+
+				this._innerHeight = height._value;
+				this._offsetHeight = this._innerHeight + padding.x + padding.z + border.x + border.z;
+
+			} else {
+
+				this._offsetHeight = height._value;
+				this._innerHeight = this._offsetHeight - ( padding.x + padding.z + border.x + border.z );
+
+			}
+
+			this._centerY = _computeCenterY( element );
+			this._needsProcess = true;
+
+			// tells children height has changed
+			this._propagateHeight( element );
+			this._triggerCascadingDependencies( element );
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */ render( element ) { /* eslint-enable no-unused-vars */
+
+		this._size.x = this._offsetWidth;
+		this._size.y = this._offsetHeight;
+
+		element._renderer._needsRender = true;
+
+	}
+
+	/**
+	 *
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) {
+
+		out[ 'size' ] = this._size;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @override
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */
+
+		// this._triggerCascadingDependencies( element )
+
+		//console.log( 'process bounds box', element.name );
+
+		// update primitives or unbinded values
+
+		// require cascading processes
+
+		element._overflow._needsRender = true;
+
+
+	}
+
+	/**
+	 *
+	 * @param element
+	 * @internal
+	 */
+	_computeChildrenSideWidth( element ) {
+
+		return _computeChildrenSideWidth( element );
+
+	}
+
+	/**
+	 *
+	 * @param element
+	 * @internal
+	 */
+	_computeChildrenSideHeight( element ) {
+
+		return _computeChildrenSideHeight( element );
+
+	}
+
+	_propagateWidth( element ) {
+
+		for ( let i = 0; i < element._children._boxes.length; i++ ) {
+
+			const box = element._children._boxes[ i ];
+			const width = box._width;
+
+			if( width._relative ) box._bounds.setReferenceWidth( box, this._innerWidth );
+
+		}
+
+	}
+
+	_propagateHeight( element ) {
+
+		for ( let i = 0; i < element._children._boxes.length; i++ ) {
+
+			const box = element._children._boxes[ i ];
+			const height = box._height;
+
+			if( height._relative ) box._bounds.setReferenceHeight( box, this._innerHeight );
+
+		}
+
+	}
+
+	_triggerCascadingDependencies( element ) {
+
+		// also change parent when require
+		if ( element._parent._value ) {
+			element._parent._value._autoSize._needsProcess = true;
+		}
+
+		element._flexDirection._needsProcess = true;
+		element._fontSize._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+		this._needsRender = true;
+
+		element._borderWidth._needsRender = true;
+		element._borderRadius._needsRender = true;
+
+		element._overflow._needsRender = true;
+
+	}
+
+}
+
+
+
+
+/***********************************************************************************************************************
+ * INTERNAL FUNCTIONS
+ **********************************************************************************************************************/
+
+/**
+ * Retrieve the center X according to box sized dimensions
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeCenterX( element ) {
+
+	const padding = element._padding._value;
+	const borderWidth = element._borderWidth._value;
+
+	const leftSide = padding.w + borderWidth.w;
+	const rightSide = padding.y + borderWidth.y;
+
+	return ( leftSide - rightSide ) / 2;
+}
+
+/**
+ * Retrieve the center Y according to box sized dimensions
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeCenterY( element ) {
+
+
+	const padding = element._padding._value;
+	const borderWidth = element._borderWidth._value;
+
+	const topSide = padding.x + borderWidth.x;
+	const bottomSide = padding.z + borderWidth.z;
+
+	return ( bottomSide - topSide ) / 2;
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideWidth( element ) {
+
+	return element._children._boxes.reduce( ( accu, child ) => {
+
+		// if ( child._bounds._needsProcess ) child._bounds.process( child );
+
+		const margin = child._margin._value;
+		const CHILD_SIZE = child._bounds._offsetWidth + margin.y + margin.w;
+
+		return accu + CHILD_SIZE;
+
+	}, 0 );
+
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideHeight( element ) {
+
+	return element._children._boxes.reduce( ( accu, child ) => {
+
+
+		// if ( child._bounds._needsProcess ) child._bounds.process( child );
+
+		const margin = child._margin._value;
+
+		const CHILD_SIZE = child._bounds._offsetHeight + margin.x + margin.z;
+
+		return accu + CHILD_SIZE;
+
+	}, 0 );
+
+}
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/AlignItemsPropertyBox.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class AlignItemsPropertyBox extends AlignItemsProperty {
+
+	constructor( ) {
+
+		super();
+
+		// configure this property
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+		// strategies
+		/**
+		 *
+		 * @type {(element:MeshUIBaseElement, (child:MeshUIBaseElement, parentOffset:number )=> number ) =>  void  }
+		 * @private
+		 */
+		this._process = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {(child:MeshUIBaseElement, parentOffset:number )=> number}
+		 * @private
+		 */
+		this._childAlign = this.emptyStrategyLogic;
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) {
+
+		// Stretch : Current or previous requires a bounds update of children
+		// if( this._value === 'stretch' || this._input === 'stretch' ) {
+		//
+		// 	for ( let i = 0; i < element._children._boxes.length; i++ ) {
+		// 		element._children._boxes[ i ]._bounds._needsProcess = true;
+		// 	}
+		//
+		// }
+
+		this._value = this._inheritedInput;
+
+		switch( element._flexDirection._value ) {
+
+			case 'row':
+			case 'row-reverse':
+				this._process = _processRow;
+				switch ( this._value ) {
+					case 'start':
+						this._childAlign = _alignChildRowStart;
+						break;
+					case 'end':
+						this._childAlign = _alignChildRowEnd;
+						break;
+
+					default:
+						this._childAlign = _alignChild;
+				}
+				break;
+
+			case 'column':
+			case 'column-reverse':
+				this._process = _processColumn;
+
+				switch ( this._value ) {
+					case 'start':
+						this._childAlign = _alignChildColumnStart;
+						break;
+					case 'end':
+						this._childAlign = _alignChildColumnEnd;
+						break;
+
+					default:
+						this._childAlign = _alignChild;
+				}
+
+				break;
+
+		}
+
+		this._needsProcess = true;
+		// @TODO: Store children here
+		element._autoSize._needsProcess = true;
+
+		element._flexDirection._needsProcess = true; //not mandatory
+		element._justifyContent._needsProcess = true;
+
+		this._needsProcess = true;
+		element._fontSize._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @param element
+	 */
+	process( element ) {
+
+		// return;
+		// if( !element._children._boxes.length ) return;
+
+		this._process( element, this._childAlign );
+
+		// @TODO : Could be strategized
+		let snap = 'center';
+		let snapXon = 'center';
+		let snapYon = 'center';
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		if( element._flexDirection._value.indexOf('column') !== -1 ) {
+
+			if( this._value === 'start' ) {
+				snap = snapXon = 'left';
+			}else if( this._value === 'end' ){
+				snap = snapXon ='right';
+			}else {
+				snap = 'centerX';
+			}
+
+		} else {
+
+			/* eslint-disable no-lonely-if */
+			if( this._value === 'start' ) {
+				snap = snapYon = 'top';
+			}else if( this._value === 'end' ){
+				snap = snapYon ='bottom';
+			}else{
+				snap = 'centerY';
+			}
+			/* eslint-enable no-lonely-if */
+
+		}
+
+		// apply 4 directional padding and borders
+		let y = -(padding.x - padding.z) / 2 - (border.x - border.z)  / 2;
+		let x = -(padding.y - padding.w) / 2 - ( border.y - border.w ) / 2;
+
+
+		if( snapXon === 'left' ) {
+
+			x = (padding.w - padding.y) / 2 + (border.w - border.y) / 2;
+
+		} else if( snapXon === 'right' ) {
+
+			x = - ( padding.y - padding.w ) / 2 - ( border.y - border.w ) / 2;
+
+		}
+
+		if( snapYon === 'top' ) {
+
+			y = - (padding.x - padding.z) / 2 - (border.x - border.z)  / 2;
+
+		} else if( snapYon === 'bottom' ) {
+
+			y = (padding.z - padding.x) / 2 + (border.z - border.x)  / 2;
+
+		}
+
+
+		element._children._boxes.forEach( ( child ) => {
+
+			let marginX = 0;
+			let marginY = 0;
+			// let marginY = ( -child._margin._value.x + child._margin._value.z ) /2;
+			// let marginY = ( -child._margin._value.x + child._margin._value.z ) /2;
+
+			if( snap === 'top' ) {
+
+				marginY = - child._margin._value.x;
+
+			} else if( snap === 'bottom' ) {
+
+				marginY = child._margin._value.z;
+
+			} else if( snap === 'left' ) {
+
+				marginX = child._margin._value.w;
+
+			} else if( snap === 'right' ) {
+
+				marginX = - child._margin._value.y;
+
+			} else if( snap === 'centerX' ) {
+
+				marginX = ( child._margin._value.w - child._margin._value.y ) /2;
+
+			} else if( snap === 'centerY' ) {
+
+				marginY = ( - child._margin._value.x + child._margin._value.z ) /2;
+
+			}
+
+			element._layouter._childrenPos[ child.id ].x += x + marginX;
+			element._layouter._childrenPos[ child.id ].y += y + marginY;
+
+		} );
+
+	}
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
+function _alignChild() {
+	return 0;
+}
+
+/**
+ *
+ * @param child
+ * @param parentOffset
+ * @return {number}
+ * @private
+ */
+function _alignChildRowEnd( child, parentOffset ) {
+	return - parentOffset + ( child._bounds._offsetHeight / 2 );
+}
+
+function _alignChildRowStart( child, parentOffset ) {
+	return parentOffset - ( child._bounds._offsetHeight / 2 );
+}
+
+function _alignChildColumnEnd( child, parentOffset ) {
+	return parentOffset - ( child._bounds._offsetWidth / 2 );
+}
+
+function _alignChildColumnStart( child, parentOffset ) {
+	return - parentOffset + ( child._bounds._offsetWidth / 2 );
+}
+
+function _processColumn( element, childAligner ) {
+
+	const AXIS_TARGET = element._bounds._innerWidth / 2;
+
+	element._children._boxes.forEach( ( child ) => {
+
+		element._layouter._childrenPos[ child.id ].x = childAligner( child, AXIS_TARGET );
+
+	} );
+
+}
+
+function _processRow( element, childAligner ) {
+
+	const AXIS_TARGET = element._bounds._innerHeight / 2;
+
+	element._children._boxes.forEach( ( child ) => {
+
+		element._layouter._childrenPos[ child.id ].y = childAligner( child, AXIS_TARGET );
+
+	} );
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/FlexDirectionPropertyBox.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class FlexDirectionPropertyBox extends FlexDirectionProperty {
+
+	constructor( ) {
+
+		super();
+
+		// Configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._offset = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._reverse = 1;
+
+		/**
+		 *
+		 * @param { (element:MeshUIBaseElement) => void} element
+		 * @private
+		 */
+		this._process = this.emptyStrategyLogic;
+
+	}
+
+	computeOutputValue( element ) {
+
+		this._value = this._inheritedInput;
+
+		switch ( this._value ) {
+			case "row":
+				this._process = FlexDirectionPropertyBox_processRow;
+				// this._offset = - element._bounds._innerWidth / 2;
+				break;
+
+			case "row-reverse":
+				this._process = _processRowReverse;
+				// this._offset = element._bounds._innerWidth / 2;
+				break;
+
+			case "column":
+				this._process = FlexDirectionPropertyBox_processColumn;
+				// this._offset = element._bounds._innerHeight / 2;
+				break;
+
+			case "column-reverse":
+				this._process = _processColumnReverse;
+				// this._offset = - element._bounds._innerHeight / 2;
+				break;
+		}
+
+		// also update dependencies
+		if( !element._justifyContent._needsUpdate ) element._justifyContent.computeOutputValue( element );
+		if( !element._alignItems._needsUpdate ) element._alignItems.computeOutputValue( element );
+
+		this._needsProcess = true;
+
+	}
+
+	process( element ) {
+		// this will be defined from strategy
+
+		//console.log( element.name, 'flexDirection process');
+
+
+		switch ( this._value ) {
+			case "row":
+				this._offset = - element._bounds._innerWidth / 2;
+				break;
+
+			case "row-reverse":
+				this._offset = element._bounds._innerWidth / 2;
+				break;
+
+			case "column":
+				this._offset = element._bounds._innerHeight / 2;
+				break;
+
+			case "column-reverse":
+				this._offset = - element._bounds._innerHeight / 2;
+				break;
+		}
+
+		this._reverse = -Math.sign( this._offset );
+		if( this._reverse === 0 ) {
+			this._reverse = 1;
+		}
+
+
+		this._process( element );
+
+		element._justifyContent._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
+function FlexDirectionPropertyBox_processRow( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 */
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetWidth;
+
+		// increase with the left margin before placing the child
+		accu += child._margin._value.w * REVERSE;
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+		position.y = 0;
+
+
+		// increase the next child with this child right margin
+		accu += REVERSE * ( CHILD_SIZE + child._margin._value.y ) ;
+
+	}
+
+}
+
+function _processRowReverse( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 */
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetWidth;
+
+		// decrease with the right margin before placing the child
+		accu += child._margin._value.y * REVERSE;
+
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+		position.y = 0;
+
+		// decrease the next child with this child left margin
+		accu += (CHILD_SIZE + child._margin._value.w) * REVERSE ;
+
+	}
+
+}
+
+function FlexDirectionPropertyBox_processColumn( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetHeight;
+
+		// increase with the top margin before placing the child
+		accu += child._margin._value.x * REVERSE;
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = 0;
+		position.y = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+
+		// increase the next child with this child bottom margin
+		accu += (CHILD_SIZE + child._margin._value.z) * REVERSE ;
+
+	}
+
+}
+
+function _processColumnReverse( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetHeight;
+
+		// decrease with the bottom margin before placing the child
+		accu += child._margin._value.z * REVERSE;
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = 0;
+		position.y = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+
+		// decrease the next child with this child top margin
+		accu += ( CHILD_SIZE + child._margin._value.x ) * REVERSE ;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/JustifyContentPropertyBox.js
+
+
+class JustifyContentPropertyBox extends JustifyContentProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'justifyContent', defaultValue, true );
+
+		// configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+		// strategies
+		/**
+		 *
+		 * @type {(axisOffset:number) => number}
+		 * @private
+		 */
+		this._computeOffset = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {(element:MeshUIBaseElement, availableSpace:number, reverse:number) => Array.<number> }
+		 * @private
+		 */
+		this._computeMargin = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {(element:MeshUIBaseElement) => void}
+		 * @private
+		 */
+		this._process = this.emptyStrategyLogic;
+
+	}
+
+
+	computeOutputValue( element ) {
+
+		this._value = this._inheritedInput;
+
+		//console.log( element._flexDirection._value );
+		switch ( element._flexDirection._value ) {
+
+			case 'column-reverse':
+			case 'column':
+				this._process = _column.bind( this );
+				break;
+
+
+			case 'row-reverse':
+			case 'row':
+				this._process = _row.bind( this );
+				break;
+
+		}
+
+		switch ( this._value ) {
+			case 'end':
+				this._computeOffset = _justificationOffsetEnd;
+				this._computeMargin = _justificationMargin;
+				break;
+
+			case 'center':
+				this._computeOffset = _justificationOffsetCenter;
+				this._computeMargin = _justificationMargin;
+				break;
+
+			case 'start':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMargin;
+				break;
+
+			case 'space-between':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMarginSpaceBetween;
+				break;
+
+			case 'space-around':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMarginSpaceAround;
+				break;
+
+			case 'space-evenly':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMarginSpaceEvenly;
+				break;
+		}
+
+		// @TODO : 	If flexDirection was keeping its children position,
+		//  				it won't be necessary to compute the same result again
+		//					but it will increase the memory footprint
+		element._flexDirection._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		this._process( element );
+
+		element._alignItems._needsProcess = true; // not mandatory : Layout could sum each
+
+	}
+
+}
+
+function _row( element ) {
+
+	const startPos = element._flexDirection._offset;
+
+	const { usedDirectionSpace, remainingSpace } = _rowRemainingSpace( element );
+
+	// Items Offset
+	const axisOffset = ( startPos * 2 ) - ( usedDirectionSpace * Math.sign( startPos ) );
+	const justificationOffset = this._computeOffset( axisOffset );
+
+	// Items margin
+	// const justificationMargins = _getJustificationMargin( boxComponent.childrenBoxes, remainingSpace, JUSTIFICATION, REVERSE );
+	const justificationMargins = this._computeMargin( element, remainingSpace, element._flexDirection._reverse );
+
+
+	// Apply
+	element._children._boxes.forEach( ( child, childIndex ) => {
+
+		element._layouter._childrenPos[ child.id ].x -= justificationOffset - justificationMargins[ childIndex ];
+
+	} );
+
+}
+
+function _column( element ) {
+
+
+	const startPos = element._flexDirection._offset;
+
+	const { usedDirectionSpace, remainingSpace } = _columnRemainingSpace( element );
+
+	// Items Offset
+	const axisOffset = ( startPos * 2 ) - ( usedDirectionSpace * Math.sign( startPos ) );
+	const justificationOffset = this._computeOffset( axisOffset );
+
+	// Items margin
+	const justificationMargins = this._computeMargin( element, remainingSpace, element._flexDirection._reverse );
+
+	// Apply
+	element._children._boxes.forEach( ( child, childIndex ) => {
+
+		element._layouter._childrenPos[ child.id ].y -= justificationOffset - justificationMargins[ childIndex ];
+
+	} );
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
+/**
+ *
+ * @param {MeshUIBaseElement} element
+ * @return {{usedDirectionSpace: *, remainingSpace: number}}
+ * @private
+ */
+function _rowRemainingSpace( element ) {
+
+	const usedDirectionSpace = element._bounds._computeChildrenSideWidth( element );
+	return { usedDirectionSpace, remainingSpace: element._bounds._innerWidth - usedDirectionSpace };
+
+}
+
+function _columnRemainingSpace( element ) {
+
+	const usedDirectionSpace = element._bounds._computeChildrenSideHeight( element );
+	return { usedDirectionSpace, remainingSpace: element._bounds._innerHeight - usedDirectionSpace };
+
+}
+
+
+/* eslint-disable no-unused-vars */ function _justificationOffset( axisOffset ) { /* eslint-enable no-unused-vars */
+
+	return 0;
+
+}
+
+function _justificationOffsetEnd( axisOffset ) {
+
+	return axisOffset;
+
+}
+
+function _justificationOffsetCenter( axisOffset ) {
+
+	return axisOffset / 2;
+
+}
+
+/* eslint-disable no-unused-vars */
+function _justificationMargin( element, availableSpace = 0, reverse = 1 ) { /* eslint-enable no-unused-vars */
+
+	return Array( element._children._boxes.length ).fill( 0 );
+
+}
+
+function _justificationMarginSpaceBetween( element, availableSpace = 0, reverse = 1 ) {
+
+	const boxes = element._children._boxes;
+	const length = boxes.length;
+	const justificationMargins = Array( length ).fill( 0 );
+
+	if ( availableSpace > 0 ) {
+
+		// only one children would act as start
+		if ( length > 1 ) {
+
+			const margin = availableSpace / ( length - 1 ) * reverse;
+			// set this margin for any children
+
+			// except for first child
+			justificationMargins[ 0 ] = 0;
+
+			for ( let i = 1; i < length; i++ ) {
+
+				justificationMargins[ i ] = margin * i;
+
+			}
+
+		}
+
+	}
+
+	return justificationMargins;
+
+}
+
+function _justificationMarginSpaceEvenly( element, availableSpace = 0, reverse = 1 ) {
+
+	const boxes = element._children._boxes;
+	const length = boxes.length;
+	const justificationMargins = Array( length ).fill( 0 );
+
+	if ( availableSpace > 0 ) {
+
+		const margin = availableSpace / ( length + 1 ) * reverse;
+
+		// set this margin for any children
+		for ( let i = 0; i < length; i++ ) {
+
+			justificationMargins[ i ] = margin * ( i + 1 );
+
+		}
+
+	}
+
+	return justificationMargins;
+
+}
+
+function _justificationMarginSpaceAround( element, availableSpace = 0, reverse = 1 ) {
+
+	const boxes = element._children._boxes;
+	const length = boxes.length;
+	const justificationMargins = Array( length ).fill( 0 );
+
+	if ( availableSpace > 0 ) {
+
+
+		const margin = availableSpace / ( length ) * reverse;
+
+		const start = margin / 2;
+		justificationMargins[ 0 ] = start;
+
+		// set this margin for any children
+		for ( let i = 1; i < length; i++ ) {
+
+			justificationMargins[ i ] = start + margin * i;
+
+		}
+
+
+	}
+
+	return justificationMargins;
+
+}
+
+;// CONCATENATED MODULE: ./src/frame/Frame.js
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+/**
+ * Returns a basic plane mesh.
+ */
+class Frame extends external_three_namespaceObject.Mesh {
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	constructor( element ) {
+
+		const geometry = new external_three_namespaceObject.PlaneGeometry( 1, 1, element._segments.value, element._segments.value );
+
+		// Add additional uv for borders computations by copying initial uv
+		const uvB = new external_three_namespaceObject.BufferAttribute( new Float32Array( geometry.getAttribute('uv').array ), 2);
+		geometry.setAttribute('uvB', uvB ).name = 'uvB';
+
+		super( geometry, element.backgroundMaterial );
+
+		this.name = 'UIBackgroundBox';
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/rendering/RendererPropertyBox.js
+
+
+
+class RendererPropertyBox extends BaseProperty{
+
+	constructor() {
+
+		super( 'renderer' );
+
+	}
+
+
+	render( element ) {
+
+		if( !element._backgroundMesh ) {
+
+			element.setBackgroundMesh( new Frame(element) );
+
+		}
+
+		element.performAfterUpdate();
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/PositionPropertyBox.js
+
+
+class PositionPropertyBox extends PositionProperty {
+
+	constructor( ) {
+
+		super( 'position' );
+
+	}
+
+	update( element, out ) {
+
+		super.update( element, out );
+
+		this._needsProcess = true;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/AutoSizePropertyBox.js
+
+
+/**
+ * Autosize are only trigger when natural size changed
+ */
+class AutoSizePropertyBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'autosize' );
+
+		this._needsProcess = true;
+	}
+
+	process( element ) {
+
+		// if( parent ) return;
+
+
+		// has auto size get the height from children
+		if ( element._width._auto ) _processAutoWidth( element );
+		if ( element._height._auto ) _processAutoHeight( element );
+
+		const stretch = element._alignItems._value === 'stretch';
+		const stretchChildrenWidth = stretch && element._flexDirection._value.indexOf( 'column' ) !== -1;
+		const stretchChildrenHeight = stretch && !stretchChildrenWidth;
+
+		for ( const box of element._children._boxes ) {
+
+			if ( ( box._width._auto && stretchChildrenWidth ) || box._width._relative ) {
+
+				box._bounds.setReferenceWidth( box, element._bounds._innerWidth );
+
+			}
+
+			if ( ( box._height._auto && stretchChildrenHeight ) || box._height._relative ) {
+
+				box._bounds.setReferenceHeight( box, element._bounds._innerHeight );
+
+			}
+
+		}
+
+		// // justify stretch - Not that easy
+		// const stretchD = element._justifyContent._value === 'stretch';
+		// const stretchChildrenWidthD = stretchD && element._flexDirection._value.indexOf( 'row' ) !== -1;
+		// const stretchChildrenHeightD = stretchD && !stretchChildrenWidthD;
+		//
+		//
+		// if ( stretchChildrenWidthD ) {
+		//
+		// 	const used = _computeChildrenSideWidth( element );
+		// 	const available = element._bounds._innerWidth - used;
+		// 	if ( available > 0 ) {
+		//
+		// 		const autoElement = element._children._uis.filter( c => c._width._auto );
+		// 		const distributed = available / autoElement.length;
+		//
+		// 		for ( const child of autoElement ) {
+		//
+		// 			const width = child._bounds._offsetWidth + distributed;
+		// 			child._bounds.setReferenceWidth( child, width );
+		//
+		// 		}
+		//
+		// 		element._layouter._needsProcess = true;
+		// 		element._flexDirection._needsProcess = true;
+		//
+		// 	}
+		//
+		// } else if ( stretchChildrenHeightD ) {
+		//
+		// 	const used = _computeChildrenSideHeight( element );
+		// 	const available = element._bounds._innerHeight - used;
+		// 	if ( available > 0 ) {
+		//
+		// 		const autoElement = element._children._uis.filter( c => c._height._auto );
+		// 		const distributed = available / autoElement.length;
+		//
+		// 		for ( const child of autoElement ) {
+		//
+		// 			const height = child._bounds._offsetHeight + distributed;
+		// 			child._bounds.setReferenceHeight( child, height );
+		//
+		// 		}
+		//
+		// 		element._layouter._needsProcess = true;
+		// 		element._flexDirection._needsProcess = true;
+		//
+		// 	}
+		//
+		// }
+
+
+	}
+
+}
+
+function _processAutoWidth( element ) {
+
+	// column : retrieve the biggest child width
+	// row : retrieve the sum of children width
+	element._bounds.setChildrenWidth( element, _computeAutoWidth( element ) );
+
+}
+
+function _processAutoHeight( element ) {
+
+	// column : retrieve the sum of children height
+	// row : retrieve the biggest child height
+	element._bounds.setChildrenHeight( element, _computeAutoHeight( element ) );
+
+}
+
+/**
+ * Retrieve the automatic height from children boxes
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeAutoHeight( element ) {
+
+	switch ( element._flexDirection._value ) {
+
+		case 'row' :
+		case 'row-reverse' :
+			return _computeHighestChildHeight( element );
+
+
+		case 'column' :
+		case 'column-reverse' :
+			return AutoSizePropertyBox_computeChildrenSideHeight( element );
+
+	}
+
+}
+
+/**
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ *
+ */
+function _computeAutoWidth( element ) {
+
+	switch ( element._flexDirection._value ) {
+
+		case 'row' :
+		case 'row-reverse' :
+			return AutoSizePropertyBox_computeChildrenSideWidth( element );
+
+
+		case 'column' :
+		case 'column-reverse' :
+			return _computeHighestChildWidth( element );
+
+	}
+
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function AutoSizePropertyBox_computeChildrenSideWidth( element ) {
+
+	let sumWidth = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const width = box._bounds._offsetWidth + margin.y + margin.w;
+
+		sumWidth += width;
+
+	}
+
+	return sumWidth;
+
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function AutoSizePropertyBox_computeChildrenSideHeight( element ) {
+
+	let sumHeight = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const height = box._bounds._offsetHeight + margin.x + margin.z;
+
+		sumHeight += height;
+
+	}
+
+	return sumHeight;
+
+}
+
+/**
+ * Returns the highest linear dimension among all the children of the passed component
+ * MARGIN INCLUDED
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeHighestChildWidth( element ) {
+
+	let maxWidth = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const width = box._bounds._offsetWidth + margin.y + margin.w;
+
+		if ( width > maxWidth ) maxWidth = width;
+
+	}
+
+	return maxWidth;
+
+}
+
+/**
+ * Returns the highest linear dimension among all the children of the passed component
+ * MARGIN INCLUDED
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeHighestChildHeight( element ) {
+
+	let maxHeight = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const height = box._bounds._offsetHeight + margin.x + margin.z;
+
+		if ( height > maxHeight ) maxHeight = height;
+
+	}
+
+	return maxHeight;
+
+}
+
+;// CONCATENATED MODULE: ./src/elements/basic/BoxElement.js
+
+
+
+
+
+
+
+
+
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class BoxElement extends MeshUIBaseElement {
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	constructor( properties, values) {
+
+		BoxElement.definePropertiesValues( properties, values );
+
+		super( properties, values );
+
+		BoxElement.init( this );
+
+	}
+
+	/**
+	 * When the backgroundMesh has been set, bind properties
+	 * @override
+	 */
+	bindBackgroundMeshProperties () {
+
+		// bind the background scale with bounds
+		this._bounds._size = this._backgroundMesh.scale;
+		this._bounds._needsProcess = true;
+
+	}
+
+	/**
+	 * When the backgroundMesh has been unset, unbind properties
+	 * @override
+	 */
+	unbindBackgroundMeshProperties () {
+
+		// detach bounds size
+		this._bounds._size = new external_three_namespaceObject.Vector3(1,1,1);
+		this._bounds._needsProcess = true;
+
+	}
+
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {
+
+		// customize property
+		if( !properties.children ) properties.children = ChildrenBox;
+		if( !properties.bounds ) properties.bounds = BoundsBox;
+		if( !properties.flexDirection ) properties.flexDirection = FlexDirectionPropertyBox;
+		if( !properties.justifyContent ) properties.justifyContent = JustifyContentPropertyBox;
+		if( !properties.alignItems ) properties.alignItems = AlignItemsPropertyBox;
+		if( !properties.position ) properties.position = PositionPropertyBox;
+		if( !properties.autoSize ) properties.autoSize = AutoSizePropertyBox;
+
+		if( !properties.renderer ) properties.renderer = RendererPropertyBox;
+
+
+		// configure
+		// /* ie: * /if ( !values.width ) values.width = '100%';
+
+
+		// break inheritance chains
+		if ( !values.fontSide ) values.fontSide = 0; // FrontSide;
+		if ( !values.invertAlpha ) values.invertAlpha = false;
+		if ( !values.fontCastShadow ) values.fontCastShadow = false;
+		if ( !values.fontReceiveShadow ) values.fontReceiveShadow = false;
+		if ( !values.backgroundCastShadow ) values.backgroundCastShadow = false;
+		if ( !values.backgroundReceiveShadow ) values.backgroundReceiveShadow = false;
+
+		if( !values.uiType ) values.uiType = 'block';
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init( element ) {
+
+		Object.defineProperties( element, {
+				isBox: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+
+		element.backgroundMaterial = new FrameMaterial();
+		element._renderer.render( element );
+
+		element._backgroundMesh.visible = false;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/elements/glyphs/Line.js
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+
+/**
+ * Line represents an horizontal combination of positioned inlines with additional properties
+ */
+class Line extends Array {
+
+	/**
+	 *
+	 * @param {Inline[]} items
+	 */
+	constructor(...items) {
+		super(...items);
+
+		/**
+		 * The width of this line
+		 * @type {number}
+		 */
+		this.width = 0;
+
+		/**
+		 * The maximum lineBase of this line of inlines
+		 * @type {number}
+		 */
+		this.lineBase = 0;
+
+		/**
+		 * The maximum lineHeight of this line of inlines
+		 * @type {number}
+		 */
+		this.lineHeight = 0;
+
+		/**
+		 * The vertical position of this line
+		 * @type {number}
+		 */
+		this.y = 0;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/BoxLayouter.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+
+
+/* eslint-enable no-unused-vars */
+
+class BoxLayouter extends BaseProperty {
+
+	constructor() {
+
+		super( 'layouter', null, false);
+
+		// configure
+		this._needsUpdate = true;
+
+		/**
+		 * @typedef ChildrenPos
+		 * @type {Object & Object.<string,Vector3>}
+		 */
+
+		/**
+		 *
+		 * @type {ChildrenPos}
+		 * @internal
+		 */
+		this._childrenPos = {};
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Updated when :
+	 * 	- New child added
+	 * 	- Child removed
+	 * 	- Child position changed
+	 * 	- Child visibility changed
+	 * 	- ...?
+	 * 	@override
+	 */
+	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		//console.log( "BoxLayouter update", element.name );
+		// reset
+		this._childrenPos = {};
+
+		for ( const uiBoxElement of element._children._boxes ) {
+
+			//console.log( uiBoxElement._position._value )
+			if( uiBoxElement._position._value === 'static' ) {
+
+				// bind position
+				this._childrenPos[ uiBoxElement.id ] = uiBoxElement.position;
+
+			}
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @override
+	 */
+	/* eslint-disable no-unused-vars */ process( element ) { 	/* eslint-enable no-unused-vars */
+
+		// As _childrenPos are bounds with child.position, this is not required anymore
+		//
+		// element._position._needsProcess = true;
+		//
+		// for ( const box of element._children._boxes ) {
+		//
+		// 	if( this._childrenPos[box.id] ) {
+		//
+		// 		box.position.x = this._childrenPos[box.id].x;
+		// 		box.position.y = this._childrenPos[box.id].y;
+		//
+		// 	}
+		//
+		// }
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/elements/basic/BlockElement.js
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+
+/* eslint-enable no-unused-vars */
+
+
+class BlockElement extends BoxElement {
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 */
+	constructor( values = {} ) {
+
+		const properties = {};
+		BlockElement.definePropertiesValues( properties, values );
+
+		super( properties , values );
+
+		BlockElement.init( this );
+
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * A Block Element can only contains box elements
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) {
+		/* eslint-enable no-unused-vars */
+
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			const argument = arguments[ i ];
+
+			if ( !argument.isUI || argument.isBox ) {
+
+				validChildren.push( argument );
+
+			} else {
+
+				console.warn( 'Block element can only contain Box elements.', argument );
+
+			}
+
+		}
+
+		return super.add( ...validChildren );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {  /* eslint-enable no-unused-vars */
+
+		properties.layouter = BoxLayouter;
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init ( element ) {
+
+		Object.defineProperties( element , {
+				isBlock: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/TextContentInline.js
+
+
+class TextContentInline extends BaseProperty{
+
+	constructor() {
+
+		super( "textContent", null, false );
+
+	}
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		element._glyphs._needsUpdate = true;
+		element._whiteSpace._needsProcess = true;
+
+	}
+
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/InlinesProperty.js
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class InlinesProperty extends BaseProperty{
+
+	constructor() {
+
+		super( "inlines", null, false );
+
+		/**
+		 *
+		 * @type {Array.<Inline>}
+		 * @private
+		 */
+		this._value = null;
+
+		// value
+
+		// 3. Inlines
+		// this._textContentInlines = this._textContentGlyphs.map( ( glyphBox ) => glyphBox.asInlineGlyph() );
+
+		// 4. kerning
+		// this._buildContentKernings();
+
+
+		// 5.? Apply margin and padding on first and last inlines
+		// if( this._textContentInlines.length ) {
+		//
+		// 	// First gets left side
+		// 	this._textContentInlines[0].paddingLeft = this._padding.w;
+		// 	this._textContentInlines[0].marginLeft = this._margin.w;
+		//
+		// 	// Last gets right side
+		// 	const lastIndex = this._textContentInlines.length - 1;
+		// 	this._textContentInlines[lastIndex].paddingRight = this._padding.y;
+		// 	this._textContentInlines[lastIndex].marginRight = this._margin.y;
+		//
+		// }
+
+	}
+
+	process( element ) {
+
+		this._value = element._glyphs._value.map( ( glyphBox ) => glyphBox.asInlineGlyph() );
+
+		if( this._value.length ) {
+
+			// First gets left side
+			this._value[0].paddingLeft = element._padding._value.w;
+			this._value[0].marginLeft = element._margin._value.w;
+
+			// Last gets right side
+			const lastIndex = this._value.length - 1;
+			this._value[lastIndex].paddingRight = element._padding._value.y;
+			this._value[lastIndex].marginRight = element._margin._value.y;
+
+		}
+
+
+		element._verticalAlign._needsProcess = true;
+		element._fontSize._needsProcess = true;
+		element._lineBreak._needsProcess = true;
+		element._fontKerning._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @return {Array.<Inline>}
+	 */
+	get value() { return this._value; }
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/GlyphsProperty.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class GlyphsProperty extends BaseProperty{
+
+	constructor() {
+
+		super( "glyphs", null, false);
+
+		this._needsUpdate = false;
+
+		/**
+		 *
+		 * @type {Array.<TypographicGlyph>}
+		 * @private
+		 */
+		this._value = null;
+
+		// value
+
+		// 1. collapsed whiteSpace;
+		// this._textContent = Whitespace.collapseWhitespaceOnString( this.content, this.getWhiteSpace() );
+
+		// 2. glyphs
+		// this._textContentGlyphs = this._textContent.split( '' ).map( ( char ) => this._font.getTypographicGlyph( char ) );
+
+		// 3. Inlines
+		// this._textContentInlines = this._textContentGlyphs.map( ( glyphBox ) => glyphBox.asInlineGlyph() );
+
+		// 4. kerning
+		// this._buildContentKernings();
+
+
+		// 5.? Apply margin and padding on first and last inlines
+		// if( this._textContentInlines.length ) {
+		//
+		// 	// First gets left side
+		// 	this._textContentInlines[0].paddingLeft = this._padding.w;
+		// 	this._textContentInlines[0].marginLeft = this._margin.w;
+		//
+		// 	// Last gets right side
+		// 	const lastIndex = this._textContentInlines.length - 1;
+		// 	this._textContentInlines[lastIndex].paddingRight = this._padding.y;
+		// 	this._textContentInlines[lastIndex].marginRight = this._margin.y;
+		//
+		// }
+
+	}
+
+	process( element ) {
+
+		if( !element._font._fontVariant ) return;
+		if( !element._font._fontVariant.isReady ) return;
+
+		this._value = element._whiteSpace._whiteSpacedContent.split( '' ).map( ( char ) => element._font._fontVariant.getTypographicGlyph( char ) );
+
+		// @TODO : Even if the value is removed it should trigger a rebuild.
+		if( this._value ) element._inlines._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @return {Array.<TypographicGlyph>}
+	 */
+	get value() { return this._value; }
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/ColorProperty.js
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+
+/* eslint-enable no-unused-vars */
+
+class ColorProperty extends StyleColorProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'color', defaultValue, false );
+
+		this._input = defaultValue;
+
+		this.output = this._outputValue;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._input === 'inherit' ) {
+
+			this._value.set( this.getInheritedInput( element ) );
+
+		} else {
+
+			this._value.set( this._input);
+
+		}
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/LineBreakProperty.js
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
+
+class LineBreakProperty extends BaseProperty{
+
+	constructor( defaultValue = "- ,.:?!\n" ) {
+
+		super( "lineBreak", defaultValue, true );
+
+		/**
+		 *
+		 * @type {"mandatory"|"possible"|null}
+		 * @private
+		 */
+		this._newLineBreakability = null;
+
+
+	}
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		this._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		const newLineBreakability = element._whiteSpace._newLineBreakability;
+
+		if( !element._inlines._value ) return;
+
+		// update inlines properties before inline placements in lines
+		for ( let i = 0; i < element._inlines._value.length; i++ ) {
+
+
+			const inline = element._inlines._value[ i ];
+			const char = inline.char;
+
+			// Whitespace Breakability ---------------------------------------------------------------------------------------
+			let lineBreak = null;
+
+			// could be inlineBlock without char
+			if( char !== undefined ) {
+
+				// @question : Does it worth to be strategy? I don't really think so
+				if ( newLineBreakability !== 'nowrap' ) {
+
+					if ( this._value.includes( char ) || char.match( /\s/g ) ) lineBreak = 'possible';
+
+				}
+
+				if ( char.match( /\n/g ) ) {
+
+					lineBreak = newLineBreakability;
+
+				}
+
+			}
+
+			inline.lineBreak = lineBreak;
+
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @return {string}
+	 */
+	get value() { return this._value; }
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/InlineLayouter.js
+
+
+class InlineLayouter extends BaseProperty {
+
+	constructor() {
+
+		super( 'layouter', null, false );
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 * @private
+		 */
+		this._value = null;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		// find the first text parent;
+		this._value = element._parent.find( (p) => { return p.isUI && p.isText } );
+
+		this._needsProcess = true;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 */
+	process( element ) { 	/* eslint-enable no-unused-vars */
+
+
+		// layout has been changed
+		if( this._value ) {
+
+			this._value._layouter._needsProcess = true;
+
+		}
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/background/BackgroundColorPropertyInline.js
+
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
+
+class BackgroundColorPropertyInline extends StyleColorProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'backgroundColor', defaultValue, false );
+
+		this._allowsInherit = false;
+
+		this._input = 'transparent';
+
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		// @TODO : Changes multiple mesh visibility
+		// element._backgroundMesh.visible = !(this._input === 'none' || this._input === 'transparent');
+
+		if( this._input === 'inherit' ) {
+
+			this._value.set(this.getInheritedInput( element ));
+
+		} else {
+
+			this._value.set( this._input );
+
+		}
+
+	}
+
+}
+
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontStylePropertyInline.js
+
+
+
+class FontStylePropertyInline extends FontStyleProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+	}
+
+	_computeFromInherited( element ) {
+
+		super._computeFromInherited(element);
+
+		element._font._needsUpdate = true;
+
+	}
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontWeightPropertyInline.js
+
+
+class FontWeightPropertyInline extends FontWeightProperty {
+
+	constructor( def ) {
+
+		super( def );
+
+	}
+
+	computeOutputValue( element ) {
+
+		const input = this.getInheritedInput( element );
+
+		const converted = LOOK_UP_TABLE[ input ];
+
+		if ( converted ) {
+
+			this._value = converted
+
+		} else {
+
+			this._value = input;
+
+		}
+
+		element._font._needsUpdate = true;
+
+	}
+
+}
+
+// @TODO : Evaluate the need
+const LOOK_UP_TABLE = {
+	// 'light'		: '100',
+	// 'normal'	: '400',
+	// 'bold' 		: '700',
+	// 'bolder' 	: '900'
+}
+
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontFamilyPropertyInline.js
+
+
+
+
+
+class FontFamilyPropertyInline extends FontFamilyProperty {
+
+	constructor( ) {
+
+		super( 'fontFamily', 'inherit' , true );
+
+		this._input = 'inherit';
+		this._needsUpdate = true;
+
+		// configure
+		this._allowsInherit = false;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		let abstractedInput = this._inheritedInput;
+
+		if( abstractedInput === 'inherit' ) {
+			abstractedInput = this.getInheritedInput( element );
+		}
+
+		if( abstractedInput instanceof FontFamily ) {
+
+			this._value = abstractedInput;
+			element._font._needsUpdate = true;
+
+		} else if ( typeof abstractedInput === 'string' ) {
+
+			// string - family
+			const fontFamily = font_FontLibrary.getFontFamily(abstractedInput);
+
+			if( fontFamily ) {
+
+				this._value = fontFamily;
+				element._font._needsUpdate = true;
+
+			} else {
+
+				console.warn( `(.style) fontFamily, the font '${abstractedInput}' is not registered. Aborted.`)
+
+			}
+
+		} else {
+
+			console.warn( `(.style) fontFamily requires a registered fontFamily instance, or the id of a registered fontFamily.`);
+			console.warn( `If you want to set a specific font, please use .font property instead.`);
+
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @return {any|FontFamilyPropertyInline|null}
+	 */
+	get value() { return this._value; }
+
+}
+
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/WhiteSpacePropertyInline.js
+
+
+/**
+ * @typedef  StringCollapserStrategy
+ * @type {(textContent:{string}) => string}
+ */
+
+
+/**
+ * @typedef  InlineCollapserStrategy
+ * @type {(line:{Line}) => number }
+ */
+
+
+/**
+ * @typedef InlineWrapperStrategy
+ * @type {(inlines:{Array}, i:{number}, lastInlineOffset:{number}, options:Object<string,any>) => boolean}
  */
 
+class WhiteSpacePropertyInline extends WhiteSpaceProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+
+		this._whiteSpacedContent = '';
+
+		// strategies
+
+		/**
+		 *
+		 * @type {StringCollapserStrategy}
+		 * @internal
+		 */
+		this._stringCollapser = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {InlineCollapserStrategy}
+		 * @internal
+		 */
+		this._inlineCollapser = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {InlineWrapperStrategy}
+		 * @internal
+		 */
+		this._inlineWrapper = this.emptyStrategyLogic;
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @private
+	 */
+	_computeFromInherited( element ) { /* eslint-enable no-unused-vars */
+		super._computeFromInherited( element );
+
+		// set strategies
+		this._newLineBreakability = _newlineBreakability( this._value );
+
+		// REDO Whitespace Matrix
+		// https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
+
+		switch ( this._value ) {
+
+			case 'nowrap':
+			case 'normal':
+				this._stringCollapser = _stringCollapseNewLine;
+				break;
+
+			case 'pre-line':
+				this._stringCollapser = _stringCollapseMultipleSpace;
+				break;
+
+			default:
+				this._stringCollapser = _stringCollapseNothing;
+
+		}
+
+		switch ( this._value ) {
+
+			case 'pre-line':
+			case 'nowrap':
+			case 'normal':
+				this._inlineCollapser = _inlineCollapseMultiple;
+				break;
+
+			case 'pre-wrap':
+				this._inlineCollapser = _inlineCollapseSingle;
+				break;
+
+			default:
+				this._inlineCollapser = _inlineCollapseNothing;
+
+		}
+
+		switch ( this._value ) {
+
+			case 'pre-line':
+			case 'pre-wrap':
+			case 'normal':
+				this._inlineWrapper = _lineBreakerWrapText;
+				break;
+
+			case 'pre':
+				this._inlineWrapper = _lineBreakerLineBreakOnly;
+				break;
+
+			default:
+				this._inlineWrapper = _lineBreakerNoWrap;
+
+		}
+
+
+		this._needsProcess = true;
+
+	}
+
+
+	process( element ) {
+
+		// @TODO: Make a property for Text -> inlineCollapser
+		if( element.isInline && !element.isInlineBlock ) {
+
+			this._whiteSpacedContent = this._stringCollapser( element._textContent._value );
+
+			element._glyphs._needsProcess = true;
+
+		}
+	}
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
 /**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace#whitespace_helper_functions
  *
- * @typedef {Object} MSDFJsonCommon
- * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
+ * Throughout, whitespace is defined as one of the characters
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
  *
- * @property {number} lineHeight This is the distance in pixels between each line of text.
- * @property {number} base The number of pixels from the absolute top of the line to the base of the characters.
- * @property {number} scaleW The width of the texture, normally used to scale the x pos of the character image.
- * @property {number} scaleH The height of the texture, normally used to scale the y pos of the character image.
- * @property {number} pages The number of texture pages included in the font.
- * @property {boolean} packed
- * @property {number} alphaChnl
- * @property {number} redChnl
- * @property {number} greenChnl
- * @property {number[]} blueChnl
+ * This does not use Javascript's "\s" because that includes non-breaking
+ * spaces (and also some other characters).
+ **/
+const WHITE_CHARS = { '\t': '\u0009', '\n': '\u000A', '\r': '\u000D', ' ': '\u0020' };
+
+/**
+ * Get the breakability of a newline character according to white-space property
+ *
+ * @param whiteSpace
+ * @returns {string|null}
  */
+const _newlineBreakability = function ( whiteSpace ) {
+
+	switch ( whiteSpace ) {
+
+		case 'pre':
+		case 'pre-wrap':
+		case 'pre-line':
+			return 'mandatory';
+	}
+
+	// case NOWRAP:
+	// case NORMAL:
+	// default:
+
+	return null;
+
+};
+
+
+// STRING COLLAPSER -----------------------------------------------------
 
 /**
+ * Treat newlines as spaces
+ * @param textContentValue
+ * @return {*}
+ * @private
  *
- * @typedef {Object} MSDFJsonPage
- * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
+ */
+function _stringCollapseNewLine( textContentValue ) {
+
+	return _stringCollapseMultipleSpace( textContentValue.replace( /\n/g, ' ' ) );
+
+}
+
+/**
+ * Treat sequences of spaces as only one space
+ * @param textContentValue
+ * @return {*}
+ * @private
+ */
+function _stringCollapseMultipleSpace( textContentValue ) {
+
+	return textContentValue.replace( /[ ]{2,}/g, ' ' );
+
+}
+
+/**
  *
- * @property {string} id The page id.
- * @property {string} file The texture file name.
+ * @param textContentValue
+ * @return {*}
+ * @private
  */
+function _stringCollapseNothing ( textContentValue ) {
+	return textContentValue;
+}
+
+// LineBreakers -----------------------------------------------------
 
 /**
  *
- * @typedef {Object} MSDFJsonChar
- * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
+ * @param inlines
+ * @param i
+ * @param lastInlineOffset
+ * @param options
+ * @return {boolean}
+ * @private
+ */
+function _lineBreakerWrapText( inlines, i, lastInlineOffset, options ) {
+	const inline = inlines[ i ];
+
+	// prevent additional computation if line break is mandatory
+	if ( inline.lineBreak === 'mandatory' ) return true;
+
+	// ?? Missing letterSpacing ?
+	// prevent additional computation if this character already exceed the available size
+	if ( lastInlineOffset + inline.xadvance + inline.xoffset + inline.kerning > options.INNER_WIDTH ) return true;
+
+
+	const nextBreak = _distanceToNextBreak( inlines, i, options );
+	return _shouldFriendlyBreak( inlines[ i - 1 ], lastInlineOffset, nextBreak, options );
+}
+
+/* eslint-disable no-unused-vars */
+/**
  *
- * @property {number} id The character id.
- * @property {number} index The character index.
- * @property {string} char The character.
- * @property {number} x The left position of the character image in the texture.
- * @property {number} y The top position of the character image in the texture.
- * @property {number} width The width of the character image in the texture.
- * @property {number} height The height of the character image in the texture.
- * @property {number} xoffset How much the current position should be offset when copying the image from the texture to the screen.
- * @property {number} yoffset How much the current position should be offset when copying the image from the texture to the screen.
- * @property {number} xadvance How much the current position should be advanced after drawing the character.
- * @property {string} page The texture page where the character image is found.
- * @property {number} chnl The texture channel where the character image is found (1 = blue, 2 = green, 4 = red, 8 = alpha, 15 = all channels).
+ * @param inlines
+ * @param i
+ * @param lastInlineOffset
+ * @param options
+ * @return {boolean}
+ * @private
  */
+function _lineBreakerLineBreakOnly( inlines, i, lastInlineOffset, options ) { /* eslint-enable no-unused-vars */
+
+	return inlines[ i ].lineBreak === 'mandatory';
+
+}
 
+/**
+ *
+ * @return {boolean}
+ * @private
+ */
+function _lineBreakerNoWrap() {
+	return false;
+}
 
+// Inlines collapser -----------------------------------------------------
 
 /**
  *
- * @typedef {Object} MSDFJsonKerning
- * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
- *
- * @property {number} first The first character id.
- * @property {number} second The second character id.
- * @property {number} amount How much the x position should be adjusted when drawing the second character immediately following the first.
- *
+ * @param line
+ * @return {number}
+ * @private
  */
+function _inlineCollapseSingle( line ) {
+	if ( !line[ 0 ] ) return 0;
 
-;// CONCATENATED MODULE: ./src/font/FontFamily.js
+	const firstInline = line[ 0 ];
+	const lastInline = line[ line.length - 1 ];
 
+	// only process whiteChars glyphs inlines
+	// if( firstInline.glyph && whiteChars[firstInline.glyph] && line.length > 1 ){
+	if ( firstInline.char && firstInline.char === '\n' && line.length > 1 ) {
+	// if ( firstInline.char && WHITE_CHARS[ firstInline.char ] && line.length > 1 ) {
 
+		_collapseLeftInlines( [ firstInline ], line[ 1 ] );
 
-class FontFamily extends external_three_namespaceObject.EventDispatcher {
+	}
 
-	/**
-	 *
-	 * @param name
-	 */
-	constructor( name ) {
+	// if( lastInline.glyph && whiteChars[lastInline.glyph] && line.length > 1 ){
+	if ( lastInline.char && lastInline.char === '\n' && line.length > 1 ) {
+	// if ( lastInline.char && WHITE_CHARS[ firstInline.char ] && line.length > 1 ) {
 
-		super();
+		_collapseRightInlines( [ lastInline ], line[ line.length - 2 ] );
 
-		this._name = name;
-		this._variants = [];
+	}
 
-		this._isReady = false;
+	return firstInline.offsetX;
 
-	}
+}
 
-	get isReady() { return this._isReady; }
+function _inlineCollapseMultiple( line ) {
 
-	/**
-	 *
-	 * @param weight
-	 * @param style
-	 * @param json
-	 * @param texture
-	 * @param override
-	 */
-	addVariant( weight, style, json, texture, override = false){
+	if ( !line[ 0 ] ) return 0;
 
-		if( override || !this.getVariant( weight, style) ){
+	let inlinesToCollapse = [];
+	let collapsingTarget;
+	// collect starting whitespaces to collapse
+	for ( let i = 0; i < line.length; i++ ) {
 
-			this._isReady = false;
+		const inline = line[ i ];
 
-			const newVariant = new MSDFFontVariant( weight, style, json, texture);
+		if ( inline.char && WHITE_CHARS[ inline.char ] && line.length > i ) {
 
-			this._variants.push( newVariant );
+			inlinesToCollapse.push( inline );
+			collapsingTarget = line[ i + 1 ];
+			continue;
 
-			if( !newVariant.isReady ){
+		}
 
-				newVariant.addEventListener( "ready", this._checkReadiness )
+		break;
 
-			} else {
+	}
 
-				this._checkReadiness();
+	_collapseLeftInlines( inlinesToCollapse, collapsingTarget );
 
-			}
 
-		} else {
+	inlinesToCollapse = [];
+	collapsingTarget = null;
+	// collect ending whitespace to collapse
+	for ( let i = line.length - 1; i > 0; i-- ) {
 
-			console.warn(`FontFamily('${this._name}')::addVariant() - Variant(${weight}, ${style}) already exists.`);
+		const inline = line[ i ];
+		if ( inline.char && WHITE_CHARS[ inline.char ] && i > 0 ) {
+
+			inlinesToCollapse.push( inline );
+			collapsingTarget = line[ i - 1 ];
+			continue;
 
 		}
 
-		return this;
+		break;
 
 	}
 
-	/**
-	 *
-	 * @param {FontVariant} variantImplementation
-	 * @param {boolean} [override=false]
-	 */
-	addCustomImplementationVariant( variantImplementation, override = false){
+	_collapseRightInlines( inlinesToCollapse, collapsingTarget );
 
-		if( override || !this.getVariant( variantImplementation.weight, variantImplementation.style) ){
+	return line[ 0 ].offsetX;
 
-			this._isReady = false;
+}
 
-			this._variants.push( variantImplementation );
+/**
+ *
+ * @param line
+ * @return {number|*}
+ * @private
+ */
+function _inlineCollapseNothing( line ) {
 
-			if( !variantImplementation.isReady ){
+	if ( !line[ 0 ] ) return 0;
+	return line[ 0 ].offsetX;
 
-				variantImplementation.addEventListener( "ready", this._checkReadiness )
+}
 
-			} else {
+/***********************************************************************************************************************
+ * Internal logics
+ **********************************************************************************************************************/
 
-				this._checkReadiness();
 
-			}
+/**
+ * Visually collapse inlines from right to left ( endtrim )
+ * @param {Array} inlines
+ * @param targetInline
+ * @private
+ */
+function _collapseRightInlines( inlines, targetInline ) {
 
-		} else {
+	if ( !targetInline ) return;
 
-			console.warn(`FontFamily('${this._name}')::addCustomImplementationVariant() - Variant(${variantImplementation.weight}, ${variantImplementation.style}) already exists.`);
+	for ( let i = 0; i < inlines.length; i++ ) {
 
-		}
+		const inline = inlines[ i ];
 
-		return this;
+		inline.fontFactor = 0;
+		inline.offsetX = targetInline.offsetX + targetInline.cumulativeWidth;
+		inline.cumulativeWidth = 0;
 
 	}
 
-	/**
-	 *
-	 * @param weight
-	 * @param style
-	 * @returns {FontVariant}
-	 */
-	getVariant( weight, style ){
-
-		return this._variants.find( fontVariant => fontVariant.weight === weight && fontVariant.style === style );
-
-	}
+}
 
-	get name(){ return this._name; }
+/**
+ * Visually collapse inlines from left to right (starttrim)
+ * @param {Array} inlines
+ * @param targetInline
+ * @private
+ */
+function _collapseLeftInlines( inlines, targetInline ) {
 
-	_checkReadiness = () => {
+	if ( !targetInline ) return;
 
-		if( this._variants.every( v => v.isReady ) ) {
+	for ( let i = 0; i < inlines.length; i++ ) {
 
-			FontFamily_setReady( this );
+		const inline = inlines[ i ];
 
-		}
+		inline.fontFactor = 0;
+		// inline.offsetX += inline.cumulativeWidth;
+		inline.offsetX = targetInline.offsetX;
+		inline.cumulativeWidth = 0;
 
 	}
 
 }
 
-const FontFamily_readyEvent = { type: 'ready' };
-
 /**
- * Set the ready status of a fontVariant
- * @param {FontFamily} fontFamily
+ * get the distance in world coord to the next glyph defined
+ * as break-line-safe ( like whitespace for instance )
  * @private
  */
-function FontFamily_setReady( fontFamily ) {
+function _distanceToNextBreak( inlines, currentIdx, options, accu ) {
 
-	fontFamily._isReady = true;
-	fontFamily.dispatchEvent( FontFamily_readyEvent );
+	accu = accu || 0;
 
-}
+	// end of the text
+	if ( !inlines[ currentIdx ] ) return accu;
 
-;// CONCATENATED MODULE: ./src/font/FontLibrary.js
+	const inline = inlines[ currentIdx ];
 
+	// const kerning = inline.kerning ? inline.kerning : 0;
+	// const xoffset = inline.xoffset ? inline.xoffset : 0;
+	// const xadvance = inline.xadvance ? inline.xadvance : inline.width;
 
-const _fontFamilies = {};
+	// if inline.lineBreak is set, it is 'mandatory' or 'possible'
+	if ( inline.lineBreak ) return accu + inline.xadvance;
 
-/* eslint-disable no-unused-vars */
+	// no line break is possible on this character
+	return _distanceToNextBreak(
+		inlines,
+		currentIdx + 1,
+		options,
+		accu + inline.xadvance + inline.xoffset + inline.kerning + options.LETTERSPACING
+	);
+
+}
 
 /**
- *
- * @param {FontFamily} fontFamily
- * @returns {Promise<unknown>}
+ * Test if we should line break here even if the current glyph is not out of boundary.
+ * It might be necessary if the last glyph was break-line-friendly (whitespace, hyphen..)
+ * and the distance to the next friendly glyph is out of boundary.
  */
-function prepare( fontFamily ) {
+function _shouldFriendlyBreak( prevChar, lastInlineOffset, nextBreak, options ) {
 
-	/**
-	 *
-	 * @type {FontFamily[]}
-	 */
-	const families = [ ...arguments ];
+	// We can't check if last glyph is break-line-friendly it does not exist
+	if ( !prevChar || !prevChar.char ) return false;
 
-	// Check all family are right instance
-	families.forEach( f => {
+	// Next break-line-friendly glyph is inside boundary
+	if ( lastInlineOffset + nextBreak < options.INNER_WIDTH ) return false;
 
-		if( !(f instanceof FontFamily) ) {
+	// Previous glyph was break-line-friendly
+	return options.BREAKON.indexOf( prevChar.char ) > -1;
 
-			throw new Error(`FontLibrary::prepare() - One of the provided parameter is not a FontFamily. Instead ${typeof f} given.`);
+}
 
-		}
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/LetterSpacingPropertyInline.js
 
-	})
 
-	/**
-	 * Check that all provided families are loaded
-	 * @returns {boolean}
-	 */
-	const areAllLoaded = function() {
+class LetterSpacingPropertyInline extends LetterSpacingProperty {
 
-		return families.every( f => f.isReady );
+	constructor() {
+
+		super();
+
+		// configure
+		this._input = 'inherit';
+		this._allowsInherit = false;
+
+		this.computeOutputValue = this._computeFromInherited;
 
 	}
 
-	// @TODO: Should handle possible rejection
-	return new Promise((resolve,reject)=>{
+	_computeFromInherited( element ) {
+		super._computeFromInherited( element );
 
-		// Direct resolve if all loaded
-		if ( areAllLoaded() ){
 
-			resolve();
+		element._fontSize._needsProcess = true;
+		element._layouter._needsProcess = true;
 
-		} else {
+	}
 
-			// Add listener on each family not ready
-			for ( let i = 0; i < families.length; i++ ) {
+}
 
-				const family = families[ i ];
-				if( !family.isReady ){
 
-					family.addEventListener( "ready" , ()=> {
 
-						// Resolve if all other families are loaded
-						if( areAllLoaded() ) {
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontSizePropertyInline.js
 
-							resolve();
 
-						}
 
-					});
+class FontSizePropertyInline extends FontSizeProperty {
 
-				}
+	constructor( ) {
 
-			}
+		super();
 
-		}
+		// Configure
+		this._allowsInherit = false;
 
-	});
+	}
 
-}
+	computeOutputValue( element ) {
 
-/* eslint-enable no-unused-vars */
+		// this._value = this._inheritedInput;
 
+		if( element._font._fontVariant ) {
+			element._bounds._needsProcess = true;
+			element._layouter._needsProcess = true;
+		}
 
-/**
- *
- * @param {string} name
- * @returns {FontFamily}
- */
-function addFontFamily( name ) {
+		// @TODO : FontRelatives properties?? instead of manual registering them?
+		// for em dimensions;
+		element._margin._needsProcess = true;
 
-	if ( _fontFamilies[ name ] ) {
-		console.error( `FontLibrary::addFontFamily - Font('${name}') is already registered` );
 	}
 
-	_fontFamilies[ name ] = new FontFamily( name );
+	process( element ) {
 
-	return _fontFamilies[ name ];
+		if( !element._font._fontVariant || !element._font._fontVariant.isReady ) return;
 
-}
+		const SCALE_MULT = this._value / element._font._fontVariant.typographic.size;
 
-/**
- *
- * @param {string} name
- * @returns {FontFamily}
- */
-function getFontFamily( name ) {
+		// First character won't be kerned with its void lefthanded peer
+		const inlines = element._inlines._value;
 
-	return _fontFamilies[ name ];
+		// update inlines properties before inline placements in lines
+		for ( let i = 0; i < inlines.length; i++ ) {
+
+			const inline = inlines[ i ];
+
+			inline.resetOffsets();
+
+			inline.fontSize = this._value;
+			inline.fontFactor = SCALE_MULT;
+
+		}
+
+		// element._layouter._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get value() { return this._value; }
 
 }
 
 
-/**
- *
- * @param { (fontVariant:FontVariant, character:string ) => string|null } handler
- */
-function setMissingCharacterHandler( handler ) {
 
-	_missingCharacterHandler = handler;
+;// CONCATENATED MODULE: ./src/core/properties/geometry/SegmentsPropertyText.js
+
+
+class SegmentsPropertyText extends SegmentsProperty {
+
+	constructor() {
+
+		super( 'segments', 1, false );
+
+		this._notInheritedValue = undefined;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		this._notInheritedValue = this._value;
+		if ( this._notInheritedValue === 'inherit' ) {
+
+			this._notInheritedValue = this.getInheritedInput( element );
 
-}
+		}
 
-//
+		element._layouter._needsUpdate = true;
 
-const FontLibrary = {
-	addFontFamily,
-	getFontFamily,
-	prepare,
-	setMissingCharacterHandler,
-	missingCharacter
-};
+	}
 
-/* harmony default export */ const font_FontLibrary = (FontLibrary);
+	/**
+	 *
+	 * @param {number|"inherit"} v
+	 */
+	set value( v ) {
 
-/**
- *
- * @type { (fontVariant:FontVariant, character:string ) => string|null }
- * @private
- */
-let _missingCharacterHandler = function ( fontVariant, character ) {
+		if ( this._value === v ) return;
 
-	console.error( `The character '${character}' is not included in the font characters set.` );
+		this._value = v;
+		this._needsUpdate = true;
+	}
 
-	// return a glyph has fallback
-	return " ";
+	/**
+	 *
+	 * @override
+	 * @return {number}
+	 */
+	get value() {
 
-};
+		if ( this._value === 'inherit' ) return this._notInheritedValue;
 
-/**
- *
- * @param {FontVariant} fontVariant
- * @param {string} character
- *
- * @returns {string}
- */
-function missingCharacter( fontVariant, character ) {
+		return this._value;
 
-	// Execute the user defined handled
-	return _missingCharacterHandler( fontVariant, character );
+	}
 
 }
 
+;// CONCATENATED MODULE: ./src/core/properties/geometry/SegmentsPropertyInline.js
 
 
-;// CONCATENATED MODULE: ./src/components/core/UpdateManager.js
-/**
- * Job:
- * - recording components required updates
- * - trigger those updates when 'update' is called
- *
- * This module is a bit special. It is, with FontLibrary, one of the only modules in the 'component'
- * directory not to be used in component composition (Object.assign).
- *
- * When MeshUIComponent is instanciated, it calls UpdateManager.register().
- *
- * Then when MeshUIComponent receives new attributes, it doesn't update the component right away.
- * Instead, it calls UpdateManager.requestUpdate(), so that the component is updated when the user
- * decides it (usually in the render loop).
- *
- * This is best for performance, because when a UI is created, thousands of componants can
- * potentially be instantiated. If they called updates function on their ancestors right away,
- * a given component could be updated thousands of times in one frame, which is very ineficient.
- *
- * Instead, redundant update request are moot, the component will update once when the use calls
- * update() in their render loop.
- */
-class UpdateManager {
+class SegmentsPropertyInline extends SegmentsPropertyText {
 
-	/*
-	 * get called by MeshUIComponent when component.set has been used.
-	 * It registers this component and all its descendants for the different types of updates that were required.
-	 */
-	static requestUpdate( component, updateParsing, updateLayout, updateInner ) {
+	constructor() {
 
-		component.traverse( ( child ) => {
+		super();
 
-			if ( !child.isUI ) return;
+		this._value = 'inherit';
 
-			// request updates for all descendants of the passed components
-			if ( !this.requestedUpdates[ child.id ] ) {
+	}
 
-				this.requestedUpdates[ child.id ] = {
-					updateParsing,
-					updateLayout,
-					updateInner,
-					needCallback: ( updateParsing || updateLayout || updateInner )
-				};
+}
 
-			} else {
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontKerningPropertyInline.js
 
-				if ( updateParsing ) this.requestedUpdates[ child.id ].updateParsing = true;
-				if ( updateLayout ) this.requestedUpdates[ child.id ].updateLayout = true;
-				if ( updateInner ) this.requestedUpdates[ child.id ].updateInner = true;
 
-			}
 
-		} );
+class FontKerningPropertyInline extends FontKerningProperty {
 
-	}
+	constructor() {
 
-	/** Register a passed component for later updates */
-	static register( component ) {
+		super();
 
-		if ( !this.components.includes( component ) ) {
+		// Configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+	}
 
-			this.components.push( component );
 
-		}
+	_computeFromInherited( element ) {
+		super._computeFromInherited(element);
 
+		// this._needsProcess = true;
+		element._parent._value._layouter._needsProcess = false;
 	}
 
-	/** Unregister a component (when it's deleted for instance) */
-	static disposeOf( component ) {
+	process( element ) {
+
+		// apply kerning on inlines
+		if ( this._value !== 'none' ) {
+
+			// First character won't be kerned with its void lefthanded peer
+			const whiteSpacedContent = element._whiteSpace._whiteSpacedContent;
+			const inlines = element._inlines._value;
+			for ( let i = 1; i < inlines.length; i++ ) {
 
-		const idx = this.components.indexOf( component );
+				const glyphPair = whiteSpacedContent[ i - 1 ] + whiteSpacedContent[ i ];
 
-		if ( idx > -1 ) {
+				// retrieve the kerning from the font
+				// as set it on the characterInline
+				inlines[ i ].kerning = element._font._fontVariant.getKerningAmount( glyphPair );
 
-			this.components.splice( idx, 1 );
+			}
 
 		}
 
 	}
 
-	/** Trigger all requested updates of registered components */
-	static update() {
+}
 
-		if ( Object.keys( this.requestedUpdates ).length > 0 ) {
+;// CONCATENATED MODULE: ./src/core/properties/hierarchy/ChildrenInline.js
 
-			const roots = this.components.filter( ( component ) => {
 
-				return !component.parentUI;
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-			} );
+/* eslint-enable no-unused-vars */
 
-			roots.forEach( root => this.traverseParsing( root ) );
-			roots.forEach( root => this.traverseUpdates( root ) );
+class ChildrenInline extends BaseProperty {
 
-		}
+	constructor() {
+
+		super( 'children', null, false );
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._uis = [];
 
 	}
 
+	/* eslint-disable no-unused-vars */
 	/**
-	 * Calls parseParams update of all components from parent to children
-	 * @private
+	 * Update requested when :
+	 * 		- New child has been added
+	 * 		- Existing child has been removed
+	 *
+	 * @param element
+	 * @param out
 	 */
-	static traverseParsing( component ) {
+	update( element, out ) { /* eslint-enable no-unused-vars */
+
+		// this._compute( element );
+		//
+		// this._needsProcess = true;
+
+	}
 
-		const request = this.requestedUpdates[ component.id ];
 
-		if ( request && request.updateParsing ) {
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Process when :
+	 * 		- Existing child visibility changed
+	 *
+	 * @param element
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */
 
-			component.parseParams();
+		// this._compute( element );
 
-			request.updateParsing = false;
+	}
 
-		}
+	/* eslint-disable no-unused-vars */ _compute( element ) { /* eslint-enable no-unused-vars */
 
-		component.childrenUIs.forEach( child => this.traverseParsing( child ) );
+		// this._uis = element.children.filter( child => child.visible && child.isUI );
+		//
+		// this._inlines = this._uis.filter( child => child.isInline );
 
 	}
 
 	/**
-	 * Calls updateLayout and updateInner functions of components that need an update
-	 * @private
+	 *
 	 */
-	static traverseUpdates( component ) {
+	dispose() {
 
-		const request = this.requestedUpdates[ component.id ];
-		// instant remove the requested update,
-		// allowing code below ( especially onAfterUpdate ) to add it without being directly remove
-		delete this.requestedUpdates[ component.id ];
+		// this._inlines = null;
 
-		//
+	}
 
-		if ( request && request.updateLayout ) {
+}
 
-			request.updateLayout = false;
+;// CONCATENATED MODULE: ./node_modules/three/examples/jsm/utils/BufferGeometryUtils.js
 
-			component.updateLayout();
 
-		}
+function computeTangents() {
 
-		//
+	throw new Error( 'BufferGeometryUtils: computeTangents renamed to computeMikkTSpaceTangents.' );
 
-		if ( request && request.updateInner ) {
+}
 
-			request.updateInner = false;
+function computeMikkTSpaceTangents( geometry, MikkTSpace, negateSign = true ) {
 
-			component.updateInner();
+	if ( ! MikkTSpace || ! MikkTSpace.isReady ) {
 
-		}
+		throw new Error( 'BufferGeometryUtils: Initialized MikkTSpace library required.' );
 
+	}
 
-		// Update any child
-		component.childrenUIs.forEach( ( childUI ) => {
+	if ( ! geometry.hasAttribute( 'position' ) || ! geometry.hasAttribute( 'normal' ) || ! geometry.hasAttribute( 'uv' ) ) {
 
-			this.traverseUpdates( childUI );
+		throw new Error( 'BufferGeometryUtils: Tangents require "position", "normal", and "uv" attributes.' );
 
-		} );
+	}
 
-		// before sending onAfterUpdate
-		if ( request && request.needCallback ) {
+	function getAttributeArray( attribute ) {
 
-			component.onAfterUpdate();
+		if ( attribute.normalized || attribute.isInterleavedBufferAttribute ) {
 
-		}
+			const dstArray = new Float32Array( attribute.getCount() * attribute.itemSize );
 
-	}
+			for ( let i = 0, j = 0; i < attribute.getCount(); i ++ ) {
 
-}
+				dstArray[ j ++ ] = attribute.getX( i );
+				dstArray[ j ++ ] = attribute.getY( i );
 
-// TODO move these into the class (Webpack unfortunately doesn't understand
-// `static` property syntax, despite browsers already supporting this)
-UpdateManager.components = [];
-UpdateManager.requestedUpdates = {};
+				if ( attribute.itemSize > 2 ) {
 
-;// CONCATENATED MODULE: ./src/utils/font/FontWeight.js
-const LIGHTER = '100';
-const _100 = '100';
-const _200 = '200';
-const _300 = '300';
-const FontWeight_NORMAL = '400';
-const _400 = '400';
-const _500 = '500';
-const _600 = '600';
-const BOLD = '700';
-const _700 = '700';
-const _800 = '800';
-const BOLDER = '900';
-const _900 = '900';
+					dstArray[ j ++ ] = attribute.getZ( i );
 
+				}
 
+			}
 
-;// CONCATENATED MODULE: ./src/utils/font/FontStyle.js
-const FontStyle_NORMAL = "normal";
-const ITALIC = "italic";
-const OBLIQUE = "oblique";
+			return dstArray;
 
-const MAX_OBLIQUE_ANGLE = 90;
+		}
 
-/**
- * Get the oblique style with custom angle
- * @param angleInDegree
- */
-function obliqueCustomAngle( angleInDegree ){
+		if ( attribute.array instanceof Float32Array ) {
 
-	// Clamp the angle
-	angleInDegree = angleInDegree < - MAX_OBLIQUE_ANGLE ? - MAX_OBLIQUE_ANGLE : angleInDegree > MAX_OBLIQUE_ANGLE ? MAX_OBLIQUE_ANGLE : angleInDegree;
+			return attribute.array;
 
-	return `${OBLIQUE} ${angleInDegree}deg`;
+		}
 
-}
+		return new Float32Array( attribute.array );
 
+	}
 
-;// CONCATENATED MODULE: ./src/utils/Defaults.js
+	// MikkTSpace algorithm requires non-indexed input.
 
+	const _geometry = geometry.index ? geometry.toNonIndexed() : geometry;
 
+	// Compute vertex tangents.
 
+	const tangents = MikkTSpace.generateTangents(
 
+		getAttributeArray( _geometry.attributes.position ),
+		getAttributeArray( _geometry.attributes.normal ),
+		getAttributeArray( _geometry.attributes.uv )
 
+	);
 
+	// Texture coordinate convention of glTF differs from the apparent
+	// default of the MikkTSpace library; .w component must be flipped.
 
+	if ( negateSign ) {
 
+		for ( let i = 3; i < tangents.length; i += 4 ) {
 
+			tangents[ i ] *= - 1;
 
+		}
 
-/** List the default values of the lib components */
-/* harmony default export */ const Defaults = ({
-	container: null,
-	fontFamily: null,
-	fontSize: 0.05,
-	fontKerning: 'normal', // FontKerning would act like css : "none"|"normal"|"auto"("auto" not yet implemented)
-	fontStyle: FontStyle_NORMAL,
-	fontWeight: FontWeight_NORMAL,
-	bestFit: 'none',
-	offset: 0.01,
-	interLine: 0.01,
-	breakOn: '- ,.:?!\n',// added '\n' to also acts as friendly breaks when white-space:normal
-	whiteSpace: PRE_LINE,
-	contentDirection: COLUMN,
-	alignItems: CENTER,
-	justifyContent: JustifyContent_START,
-	fontTexture: null,
-	textAlign: TextAlign_CENTER,
-	fontColor: new external_three_namespaceObject.Color( 0xffffff ),
-	fontOpacity: 1,
-	fontPXRange: 4,
-	fontSupersampling: true,
-	borderRadius: 0.01,
-	borderWidth: 0,
-	borderColor: new external_three_namespaceObject.Color( 'black' ),
-	borderOpacity: 1,
-	backgroundSize: "cover",
-	backgroundColor: new external_three_namespaceObject.Color( 0x222222 ),
-	backgroundWhiteColor: new external_three_namespaceObject.Color( 0xffffff ),
-	backgroundOpacity: 0.8,
-	backgroundOpaqueOpacity: 1.0,
-	// this default value is a function to avoid initialization issues (see issue #126)
-	backgroundTexture: makeBackgroundTexture,
-	hiddenOverflow: false,
-	letterSpacing: 0
-});
+	}
 
-//
-let defaultBgTexture;
+	//
 
-function makeBackgroundTexture() {
+	_geometry.setAttribute( 'tangent', new BufferAttribute( tangents, 4 ) );
 
-	if ( !defaultBgTexture ) {
+	if ( geometry !== _geometry ) {
 
-		const ctx = document.createElement( 'canvas' ).getContext( '2d' );
-		ctx.canvas.width = 1;
-		ctx.canvas.height = 1;
-		ctx.fillStyle = '#ffffff';
-		ctx.fillRect( 0, 0, 1, 1 );
-		defaultBgTexture = new external_three_namespaceObject.CanvasTexture( ctx.canvas );
-		defaultBgTexture.isDefault = true;
+		geometry.copy( _geometry );
 
 	}
 
-	return defaultBgTexture;
+	return geometry;
 
 }
 
-;// CONCATENATED MODULE: ./src/components/core/MeshUIComponent.js
+/**
+ * @param  {Array<BufferGeometry>} geometries
+ * @param  {Boolean} useGroups
+ * @return {BufferGeometry}
+ */
+function mergeBufferGeometries( geometries, useGroups = false ) {
+
+	const isIndexed = geometries[ 0 ].index !== null;
+
+	const attributesUsed = new Set( Object.keys( geometries[ 0 ].attributes ) );
+	const morphAttributesUsed = new Set( Object.keys( geometries[ 0 ].morphAttributes ) );
+
+	const attributes = {};
+	const morphAttributes = {};
+
+	const morphTargetsRelative = geometries[ 0 ].morphTargetsRelative;
 
+	const mergedGeometry = new external_three_namespaceObject.BufferGeometry();
 
+	let offset = 0;
 
+	for ( let i = 0; i < geometries.length; ++ i ) {
 
+		const geometry = geometries[ i ];
+		let attributesCount = 0;
 
+		// ensure that all geometries are indexed, or none
 
+		if ( isIndexed !== ( geometry.index !== null ) ) {
 
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. All geometries must have compatible attributes; make sure index attribute exists among all geometries, or in none of them.' );
+			return null;
 
+		}
 
+		// gather attributes, exit early if they're different
 
+		for ( const name in geometry.attributes ) {
 
+			if ( ! attributesUsed.has( name ) ) {
 
-/**
+				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. All geometries must have compatible attributes; make sure "' + name + '" attribute exists among all geometries, or in none of them.' );
+				return null;
+
+			}
 
-Job:
-- Set this component attributes and call updates accordingly
-- Getting this component attribute, from itself or from its parents
-- Managing this component's states
+			if ( attributes[ name ] === undefined ) attributes[ name ] = [];
 
-This is the core module of three-mesh-ui. Every component is composed with it.
-It owns the principal public methods of a component : set, setupState and setState.
+			attributes[ name ].push( geometry.attributes[ name ] );
 
- */
-function MeshUIComponent( Base ) {
+			attributesCount ++;
 
-	return class MeshUIComponent extends Base {
+		}
+
+		// ensure geometries have the same number of attributes
+
+		if ( attributesCount !== attributesUsed.size ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. Make sure all geometries have the same number of attributes.' );
+			return null;
 
-		constructor( options ) {
+		}
 
-			super( options );
+		// gather morph attributes, exit early if they're different
 
-			this.states = {};
-			this.currentState = undefined;
-			this.isUI = true;
-			this.autoLayout = true;
+		if ( morphTargetsRelative !== geometry.morphTargetsRelative ) {
 
-			// children
-			this.childrenUIs = [];
-			this.childrenBoxes = [];
-			this.childrenTexts = [];
-			this.childrenInlines = [];
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. .morphTargetsRelative must be consistent throughout all geometries.' );
+			return null;
 
-			// parents
-			this.parentUI = null;
-			// update parentUI when this component will be added or removed
-			this.addEventListener( 'added', this._rebuildParentUI );
-			this.addEventListener( 'removed', this._rebuildParentUI );
 		}
 
-		/////////////
-		/// GETTERS
-		/////////////
+		for ( const name in geometry.morphAttributes ) {
+
+			if ( ! morphAttributesUsed.has( name ) ) {
+
+				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '.  .morphAttributes must be consistent throughout all geometries.' );
+				return null;
 
-		getClippingPlanes() {
+			}
 
-			const planes = [];
+			if ( morphAttributes[ name ] === undefined ) morphAttributes[ name ] = [];
 
-			if ( this.parentUI ) {
+			morphAttributes[ name ].push( geometry.morphAttributes[ name ] );
 
-				if ( this.isBlock && this.parentUI.getHiddenOverflow() ) {
+		}
 
-					const yLimit = ( this.parentUI.getHeight() / 2 ) - ( this.parentUI.padding || 0 );
-					const xLimit = ( this.parentUI.getWidth() / 2 ) - ( this.parentUI.padding || 0 );
+		// gather .userData
 
-					const newPlanes = [
-						new external_three_namespaceObject.Plane( new external_three_namespaceObject.Vector3( 0, 1, 0 ), yLimit ),
-						new external_three_namespaceObject.Plane( new external_three_namespaceObject.Vector3( 0, -1, 0 ), yLimit ),
-						new external_three_namespaceObject.Plane( new external_three_namespaceObject.Vector3( 1, 0, 0 ), xLimit ),
-						new external_three_namespaceObject.Plane( new external_three_namespaceObject.Vector3( -1, 0, 0 ), xLimit )
-					];
+		mergedGeometry.userData.mergedUserData = mergedGeometry.userData.mergedUserData || [];
+		mergedGeometry.userData.mergedUserData.push( geometry.userData );
 
-					newPlanes.forEach( plane => {
+		if ( useGroups ) {
 
-						plane.applyMatrix4( this.parent.matrixWorld );
+			let count;
 
-					} );
+			if ( isIndexed ) {
 
-					planes.push( ...newPlanes );
+				count = geometry.index.count;
 
-				}
+			} else if ( geometry.attributes.position !== undefined ) {
 
-				if ( this.parentUI.parentUI ) {
+				count = geometry.attributes.position.count;
 
-					planes.push( ...this.parentUI.getClippingPlanes() );
+			} else {
 
-				}
+				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. The geometry must have either an index or a position attribute' );
+				return null;
 
 			}
 
-			return planes;
+			mergedGeometry.addGroup( offset, count, i );
+
+			offset += count;
 
 		}
 
-		/** Get the highest parent of this component (the parent that has no parent on top of it) */
-		getHighestParent() {
+	}
 
-			if ( !this.parentUI ) {
+	// merge indices
 
-				return this;
+	if ( isIndexed ) {
 
-			}
+		let indexOffset = 0;
+		const mergedIndex = [];
+
+		for ( let i = 0; i < geometries.length; ++ i ) {
 
-			return this.parent.getHighestParent();
+			const index = geometries[ i ].index;
+
+			for ( let j = 0; j < index.count; ++ j ) {
+
+				mergedIndex.push( index.getX( j ) + indexOffset );
+
+			}
 
+			indexOffset += geometries[ i ].attributes.position.count;
 
 		}
 
-		/**
-		 * look for a property in this object, and if does not find it, find in parents or return default value
-		 * @private
-		 */
-		_getProperty( propName ) {
+		mergedGeometry.setIndex( mergedIndex );
+
+	}
+
+	// merge attributes
 
-			if ( this[ propName ] === undefined && this.parentUI ) {
+	for ( const name in attributes ) {
 
-				return this.parent._getProperty( propName );
+		const mergedAttribute = mergeBufferAttributes( attributes[ name ] );
 
-			} else if ( this[ propName ] !== undefined ) {
+		if ( ! mergedAttribute ) {
 
-				return this[ propName ];
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the ' + name + ' attribute.' );
+			return null;
 
-			}
+		}
 
-			return Defaults[ propName ];
+		mergedGeometry.setAttribute( name, mergedAttribute );
 
-		}
+	}
 
-		//
+	// merge morph attributes
 
-		getFontSize() {
+	for ( const name in morphAttributes ) {
 
-			return this._getProperty( 'fontSize' );
+		const numMorphTargets = morphAttributes[ name ][ 0 ].length;
 
-		}
+		if ( numMorphTargets === 0 ) break;
 
-		getFontKerning() {
+		mergedGeometry.morphAttributes = mergedGeometry.morphAttributes || {};
+		mergedGeometry.morphAttributes[ name ] = [];
 
-			return this._getProperty( 'fontKerning' );
+		for ( let i = 0; i < numMorphTargets; ++ i ) {
 
-		}
+			const morphAttributesToMerge = [];
 
-		getFontStyle() {
+			for ( let j = 0; j < morphAttributes[ name ].length; ++ j ) {
 
-			return this._getProperty( 'fontStyle' );
+				morphAttributesToMerge.push( morphAttributes[ name ][ j ][ i ] );
 
-		}
+			}
 
-		getFontWeight() {
+			const mergedMorphAttribute = mergeBufferAttributes( morphAttributesToMerge );
 
-			return this._getProperty( 'fontWeight' );
+			if ( ! mergedMorphAttribute ) {
 
-		}
+				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the ' + name + ' morphAttribute.' );
+				return null;
 
-		getLetterSpacing() {
+			}
 
-			return this._getProperty( 'letterSpacing' );
+			mergedGeometry.morphAttributes[ name ].push( mergedMorphAttribute );
 
 		}
 
-		getFontTexture() {
+	}
 
-			if( this._font && this._font.isReady ){
+	return mergedGeometry;
 
-				return this._font.texture;
+}
 
-			}
+/**
+ * @param {Array<BufferAttribute>} attributes
+ * @return {BufferAttribute}
+ */
+function mergeBufferAttributes( attributes ) {
+
+	let TypedArray;
+	let itemSize;
+	let normalized;
+	let arrayLength = 0;
 
-			return this._getProperty( 'fontTexture' );
+	for ( let i = 0; i < attributes.length; ++ i ) {
 
-		}
+		const attribute = attributes[ i ];
 
-		getFontFamily() {
+		if ( attribute.isInterleavedBufferAttribute ) {
 
-			return this._getProperty( 'fontFamily' );
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. InterleavedBufferAttributes are not supported.' );
+			return null;
 
 		}
 
-		getBreakOn() {
+		if ( TypedArray === undefined ) TypedArray = attribute.array.constructor;
+		if ( TypedArray !== attribute.array.constructor ) {
 
-			return this._getProperty( 'breakOn' );
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.array must be of consistent array types across matching attributes.' );
+			return null;
 
 		}
 
-		getWhiteSpace() {
+		if ( itemSize === undefined ) itemSize = attribute.itemSize;
+		if ( itemSize !== attribute.itemSize ) {
 
-			return this._getProperty( 'whiteSpace' );
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.itemSize must be consistent across matching attributes.' );
+			return null;
 
 		}
 
-		getTextAlign() {
+		if ( normalized === undefined ) normalized = attribute.normalized;
+		if ( normalized !== attribute.normalized ) {
 
-			return this._getProperty( 'textAlign' );
+			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.normalized must be consistent across matching attributes.' );
+			return null;
 
 		}
 
-		getFontColor() {
+		arrayLength += attribute.array.length;
 
-			return this._getProperty( 'fontColor' );
+	}
 
-		}
+	const array = new TypedArray( arrayLength );
+	let offset = 0;
 
+	for ( let i = 0; i < attributes.length; ++ i ) {
 
-		getFontSupersampling() {
+		array.set( attributes[ i ].array, offset );
 
-			return this._getProperty( 'fontSupersampling' );
+		offset += attributes[ i ].array.length;
 
-		}
+	}
 
-		getFontOpacity() {
+	return new external_three_namespaceObject.BufferAttribute( array, itemSize, normalized );
 
-			return this._getProperty( 'fontOpacity' );
+}
 
-		}
+/**
+ * @param {Array<BufferAttribute>} attributes
+ * @return {Array<InterleavedBufferAttribute>}
+ */
+function interleaveAttributes( attributes ) {
 
-		getFontPXRange() {
+	// Interleaves the provided attributes into an InterleavedBuffer and returns
+	// a set of InterleavedBufferAttributes for each attribute
+	let TypedArray;
+	let arrayLength = 0;
+	let stride = 0;
 
-			return this._getProperty( 'fontPXRange' );
+	// calculate the length and type of the interleavedBuffer
+	for ( let i = 0, l = attributes.length; i < l; ++ i ) {
 
-		}
+		const attribute = attributes[ i ];
 
-		getBorderRadius() {
+		if ( TypedArray === undefined ) TypedArray = attribute.array.constructor;
+		if ( TypedArray !== attribute.array.constructor ) {
 
-			return this._getProperty( 'borderRadius' );
+			console.error( 'AttributeBuffers of different types cannot be interleaved' );
+			return null;
 
 		}
 
-		getBorderWidth() {
+		arrayLength += attribute.array.length;
+		stride += attribute.itemSize;
 
-			return this._getProperty( 'borderWidth' );
+	}
 
-		}
+	// Create the set of buffer attributes
+	const interleavedBuffer = new InterleavedBuffer( new TypedArray( arrayLength ), stride );
+	let offset = 0;
+	const res = [];
+	const getters = [ 'getX', 'getY', 'getZ', 'getW' ];
+	const setters = [ 'setX', 'setY', 'setZ', 'setW' ];
 
-		getBorderColor() {
+	for ( let j = 0, l = attributes.length; j < l; j ++ ) {
 
-			return this._getProperty( 'borderColor' );
+		const attribute = attributes[ j ];
+		const itemSize = attribute.itemSize;
+		const count = attribute.count;
+		const iba = new InterleavedBufferAttribute( interleavedBuffer, itemSize, offset, attribute.normalized );
+		res.push( iba );
 
-		}
+		offset += itemSize;
 
-		getBorderOpacity() {
+		// Move the data for each attribute into the new interleavedBuffer
+		// at the appropriate offset
+		for ( let c = 0; c < count; c ++ ) {
 
-			return this._getProperty( 'borderOpacity' );
+			for ( let k = 0; k < itemSize; k ++ ) {
 
-		}
+				iba[ setters[ k ] ]( c, attribute[ getters[ k ] ]( c ) );
 
-		/// SPECIALS
+			}
 
-		/** return the first parent with a 'threeOBJ' property */
-		getContainer() {
+		}
 
-			if ( !this.threeOBJ && this.parent ) {
+	}
 
-				return this.parent.getContainer();
+	return res;
 
-			} else if ( this.threeOBJ ) {
+}
 
-				return this;
+// returns a new, non-interleaved version of the provided attribute
+function deinterleaveAttribute( attribute ) {
 
-			}
+	const cons = attribute.data.array.constructor;
+	const count = attribute.count;
+	const itemSize = attribute.itemSize;
+	const normalized = attribute.normalized;
 
-			return Defaults.container;
+	const array = new cons( count * itemSize );
+	let newAttribute;
+	if ( attribute.isInstancedInterleavedBufferAttribute ) {
 
+		newAttribute = new InstancedBufferAttribute( array, itemSize, normalized, attribute.meshPerAttribute );
 
-		}
+	} else {
 
-		/** Get the number of UI parents above this elements (0 if no parent) */
-		getParentsNumber( i ) {
+		newAttribute = new BufferAttribute( array, itemSize, normalized );
 
-			i = i || 0;
+	}
 
-			if ( this.parentUI ) {
+	for ( let i = 0; i < count; i ++ ) {
 
-				return this.parentUI.getParentsNumber( i + 1 );
+		newAttribute.setX( i, attribute.getX( i ) );
 
-			}
+		if ( itemSize >= 2 ) {
 
-			return i;
+			newAttribute.setY( i, attribute.getY( i ) );
 
 		}
 
-		////////////////////////////////////
-		/// GETTERS WITH NO PARENTS LOOKUP
-		////////////////////////////////////
+		if ( itemSize >= 3 ) {
 
-		getBackgroundOpacity() {
-
-			return ( !this.backgroundOpacity && this.backgroundOpacity !== 0 ) ?
-				Defaults.backgroundOpacity : this.backgroundOpacity;
+			newAttribute.setZ( i, attribute.getZ( i ) );
 
 		}
 
-		getBackgroundColor() {
+		if ( itemSize >= 4 ) {
 
-			return this.backgroundColor || Defaults.backgroundColor;
+			newAttribute.setW( i, attribute.getW( i ) );
 
 		}
 
-		getBackgroundTexture() {
+	}
 
-			return this.backgroundTexture || Defaults.backgroundTexture();
+	return newAttribute;
 
-		}
+}
 
-		/**
-		 * @deprecated
-		 * @returns {string}
-		 */
-		getAlignContent() {
+// deinterleaves all attributes on the geometry
+function deinterleaveGeometry( geometry ) {
 
-			return this.alignContent || Defaults.alignContent;
+	const attributes = geometry.attributes;
+	const morphTargets = geometry.morphTargets;
+	const attrMap = new Map();
 
-		}
+	for ( const key in attributes ) {
 
-		getAlignItems() {
+		const attr = attributes[ key ];
+		if ( attr.isInterleavedBufferAttribute ) {
 
-			return this.alignItems || Defaults.alignItems;
+			if ( ! attrMap.has( attr ) ) {
 
-		}
+				attrMap.set( attr, deinterleaveAttribute( attr ) );
 
-		getContentDirection() {
+			}
 
-			return this.contentDirection || Defaults.contentDirection;
+			attributes[ key ] = attrMap.get( attr );
 
 		}
 
-		getJustifyContent() {
+	}
+
+	for ( const key in morphTargets ) {
 
-			return this.justifyContent || Defaults.justifyContent;
+		const attr = morphTargets[ key ];
+		if ( attr.isInterleavedBufferAttribute ) {
 
-		}
+			if ( ! attrMap.has( attr ) ) {
 
-		getInterLine() {
+				attrMap.set( attr, deinterleaveAttribute( attr ) );
 
-			return ( this.interLine === undefined ) ? Defaults.interLine : this.interLine;
+			}
+
+			morphTargets[ key ] = attrMap.get( attr );
 
 		}
 
-		getOffset() {
+	}
 
-			return ( this.offset === undefined ) ? Defaults.offset : this.offset;
+}
 
-		}
+/**
+ * @param {Array<BufferGeometry>} geometry
+ * @return {number}
+ */
+function estimateBytesUsed( geometry ) {
 
-		getBackgroundSize() {
+	// Return the estimated memory used by this geometry in bytes
+	// Calculate using itemSize, count, and BYTES_PER_ELEMENT to account
+	// for InterleavedBufferAttributes.
+	let mem = 0;
+	for ( const name in geometry.attributes ) {
 
-			return ( this.backgroundSize === undefined ) ? Defaults.backgroundSize : this.backgroundSize;
+		const attr = geometry.getAttribute( name );
+		mem += attr.count * attr.itemSize * attr.array.BYTES_PER_ELEMENT;
 
-		}
+	}
 
-		getHiddenOverflow() {
+	const indices = geometry.getIndex();
+	mem += indices ? indices.count * indices.itemSize * indices.array.BYTES_PER_ELEMENT : 0;
+	return mem;
 
-			return ( this.hiddenOverflow === undefined ) ? Defaults.hiddenOverflow : this.hiddenOverflow;
+}
 
-		}
+/**
+ * @param {BufferGeometry} geometry
+ * @param {number} tolerance
+ * @return {BufferGeometry}
+ */
+function mergeVertices( geometry, tolerance = 1e-4 ) {
+
+	tolerance = Math.max( tolerance, Number.EPSILON );
 
-		getBestFit() {
+	// Generate an index buffer if the geometry doesn't have one, or optimize it
+	// if it's already available.
+	const hashToIndex = {};
+	const indices = geometry.getIndex();
+	const positions = geometry.getAttribute( 'position' );
+	const vertexCount = indices ? indices.count : positions.count;
 
-			return ( this.bestFit === undefined ) ? Defaults.bestFit : this.bestFit;
+	// next value for triangle indices
+	let nextIndex = 0;
 
-		}
+	// attributes and new attribute arrays
+	const attributeNames = Object.keys( geometry.attributes );
+	const tmpAttributes = {};
+	const tmpMorphAttributes = {};
+	const newIndices = [];
+	const getters = [ 'getX', 'getY', 'getZ', 'getW' ];
+	const setters = [ 'setX', 'setY', 'setZ', 'setW' ];
 
-		///////////////
-		///  UPDATE
-		///////////////
+	// Initialize the arrays, allocating space conservatively. Extra
+	// space will be trimmed in the last step.
+	for ( let i = 0, l = attributeNames.length; i < l; i ++ ) {
 
-		/**
-		 * Filters children in order to compute only one times children lists
-		 * @private
-		 */
-		_rebuildChildrenLists() {
+		const name = attributeNames[ i ];
+		const attr = geometry.attributes[ name ];
 
-			// Stores all children that are ui
-			this.childrenUIs = this.children.filter( child => child.isUI );
+		tmpAttributes[ name ] = new BufferAttribute(
+			new attr.array.constructor( attr.count * attr.itemSize ),
+			attr.itemSize,
+			attr.normalized
+		);
 
-			// Stores all children that are box
-			this.childrenBoxes = this.children.filter( child => child.isBoxComponent );
+		const morphAttr = geometry.morphAttributes[ name ];
+		if ( morphAttr ) {
 
-			// Stores all children that are inline
-			this.childrenInlines = this.children.filter( child => child.isInline );
+			tmpMorphAttributes[ name ] = new BufferAttribute(
+				new morphAttr.array.constructor( morphAttr.count * morphAttr.itemSize ),
+				morphAttr.itemSize,
+				morphAttr.normalized
+			);
 
-			// Stores all children that are text
-			this.childrenTexts = this.children.filter( child => child.isText );
 		}
 
-		/**
-		 * Try to retrieve parentUI after each structural change
-		 * @private
-		 */
-		_rebuildParentUI = () => {
+	}
+
+	// convert the error tolerance to an amount of decimal places to truncate to
+	const decimalShift = Math.log10( 1 / tolerance );
+	const shiftMultiplier = Math.pow( 10, decimalShift );
+	for ( let i = 0; i < vertexCount; i ++ ) {
 
-			if ( this.parent && this.parent.isUI ) {
+		const index = indices ? indices.getX( i ) : i;
 
-				this.parentUI = this.parent;
+		// Generate a hash for the vertex attributes at the current index 'i'
+		let hash = '';
+		for ( let j = 0, l = attributeNames.length; j < l; j ++ ) {
 
-			} else {
+			const name = attributeNames[ j ];
+			const attribute = geometry.getAttribute( name );
+			const itemSize = attribute.itemSize;
+
+			for ( let k = 0; k < itemSize; k ++ ) {
 
-				this.parentUI = null;
+				// double tilde truncates the decimal value
+				hash += `${ ~ ~ ( attribute[ getters[ k ] ]( index ) * shiftMultiplier ) },`;
 
 			}
 
-		};
+		}
 
-		/**
-		 * When the user calls component.add, it registers for updates,
-		 * then call THREE.Object3D.add.
-		 */
-		add() {
+		// Add another reference to the vertex if it's already
+		// used by another index
+		if ( hash in hashToIndex ) {
+
+			newIndices.push( hashToIndex[ hash ] );
 
-			for ( const id of Object.keys( arguments ) ) {
+		} else {
 
-				// An inline component relies on its parent for positioning
-				if ( arguments[ id ].isInline ) this.update( null, true );
+			// copy data to the new index in the temporary attributes
+			for ( let j = 0, l = attributeNames.length; j < l; j ++ ) {
 
-			}
+				const name = attributeNames[ j ];
+				const attribute = geometry.getAttribute( name );
+				const morphAttr = geometry.morphAttributes[ name ];
+				const itemSize = attribute.itemSize;
+				const newarray = tmpAttributes[ name ];
+				const newMorphArrays = tmpMorphAttributes[ name ];
+
+				for ( let k = 0; k < itemSize; k ++ ) {
 
-			const result = super.add( ...arguments );
+					const getterFunc = getters[ k ];
+					const setterFunc = setters[ k ];
+					newarray[ setterFunc ]( nextIndex, attribute[ getterFunc ]( index ) );
 
-			this._rebuildChildrenLists();
+					if ( morphAttr ) {
 
-			return result;
+						for ( let m = 0, ml = morphAttr.length; m < ml; m ++ ) {
 
-		}
+							newMorphArrays[ m ][ setterFunc ]( nextIndex, morphAttr[ m ][ getterFunc ]( index ) );
 
-		/**
-		 * When the user calls component.remove, it registers for updates,
-		 * then call THREE.Object3D.remove.
-		 */
-		remove() {
+						}
 
-			for ( const id of Object.keys( arguments ) ) {
+					}
 
-				// An inline component relies on its parent for positioning
-				if ( arguments[ id ].isInline ) this.update( null, true );
+				}
 
 			}
 
-			const result = super.remove( ...arguments );
+			hashToIndex[ hash ] = nextIndex;
+			newIndices.push( nextIndex );
+			nextIndex ++;
 
-			this._rebuildChildrenLists();
+		}
 
-			return result;
+	}
 
-		}
+	// generate result BufferGeometry
+	const result = geometry.clone();
+	for ( const name in geometry.attributes ) {
 
-		//
+		const tmpAttribute = tmpAttributes[ name ];
 
-		update( updateParsing, updateLayout, updateInner ) {
+		result.setAttribute( name, new BufferAttribute(
+			tmpAttribute.array.slice( 0, nextIndex * tmpAttribute.itemSize ),
+			tmpAttribute.itemSize,
+			tmpAttribute.normalized,
+		) );
 
-			UpdateManager.requestUpdate( this, updateParsing, updateLayout, updateInner );
+		if ( ! ( name in tmpMorphAttributes ) ) continue;
 
-		}
+		for ( let j = 0; j < tmpMorphAttributes[ name ].length; j ++ ) {
 
-		onAfterUpdate() {
+			const tmpMorphAttribute = tmpMorphAttributes[ name ][ j ];
+
+			result.morphAttributes[ name ][ j ] = new BufferAttribute(
+				tmpMorphAttribute.array.slice( 0, nextIndex * tmpMorphAttribute.itemSize ),
+				tmpMorphAttribute.itemSize,
+				tmpMorphAttribute.normalized,
+			);
 
 		}
 
-		/**
-		 * Set this component's passed parameters.
-		 * If necessary, take special actions.
-		 * Update this component unless otherwise specified.
-		 */
-		set( options ) {
+	}
 
-			let parsingNeedsUpdate, layoutNeedsUpdate, innerNeedsUpdate;
+	// indices
 
-			// Register to the update manager, so that it knows when to update
+	result.setIndex( newIndices );
 
-			UpdateManager.register( this );
+	return result;
 
-			// Abort if no option passed
+}
 
-			if ( !options || JSON.stringify( options ) === JSON.stringify( {} ) ) return;
+/**
+ * @param {BufferGeometry} geometry
+ * @param {number} drawMode
+ * @return {BufferGeometry}
+ */
+function toTrianglesDrawMode( geometry, drawMode ) {
 
-			// DEPRECATION Warnings until -------------------------------------- 7.x.x ---------------------------------------
+	if ( drawMode === TrianglesDrawMode ) {
 
-			// Align content has been removed
-			if ( options[ 'alignContent' ] ) {
+		console.warn( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Geometry already defined as triangles.' );
+		return geometry;
 
-				options[ 'alignItems' ] = options[ 'alignContent' ];
+	}
 
-				if ( !options[ 'textAlign' ] ) {
+	if ( drawMode === TriangleFanDrawMode || drawMode === TriangleStripDrawMode ) {
 
-					options[ 'textAlign' ] = options[ 'alignContent' ];
+		let index = geometry.getIndex();
 
-				}
+		// generate index if not present
 
-				console.warn( '`alignContent` property has been deprecated, please rely on `alignItems` and `textAlign` instead.' );
+		if ( index === null ) {
 
-				delete options[ 'alignContent' ];
+			const indices = [];
 
-			}
+			const position = geometry.getAttribute( 'position' );
 
-			// Align items left top bottom right will be removed
-			if ( options[ 'alignItems' ] ) {
+			if ( position !== undefined ) {
 
-				warnAboutDeprecatedAlignItems( options[ 'alignItems' ] );
+				for ( let i = 0; i < position.count; i ++ ) {
 
-			}
+					indices.push( i );
 
+				}
 
-			// Set this component parameters according to options, and trigger updates accordingly
-			// The benefit of having two types of updates, is to put everthing that takes time
-			// in one batch, and the rest in the other. This way, efficient animation is possible with
-			// attribute from the light batch.
-
-			for ( const prop of Object.keys( options ) ) {
-
-				if ( this[ prop ] != options[ prop ] ) {
-
-					switch ( prop ) {
-
-						case 'content' :
-						case 'fontWeight' :
-						case 'fontStyle' :
-						case 'whiteSpace': // @TODO : Whitespace could also just be layouting
-							if ( this.isText ) parsingNeedsUpdate = true;
-							layoutNeedsUpdate = true;
-							this[ prop ] = options[ prop ];
-							break;
-
-						// Only layout now - Not anymore parsing
-						case 'fontSize' :
-						case 'fontKerning' :
-						case 'breakOn':
-							layoutNeedsUpdate = true;
-							this[ prop ] = options[ prop ];
-							break;
-
-						case 'bestFit' :
-							if ( this.isBlock ) {
-								parsingNeedsUpdate = true;
-								layoutNeedsUpdate = true;
-							}
-							this[ prop ] = options[ prop ];
-							break;
-
-						case 'width' :
-						case 'height' :
-						case 'padding' :
-							// @TODO: I don't think this is true anymore
-							if ( this.isInlineBlock || ( this.isBlock && this.getBestFit() != 'none' ) ) parsingNeedsUpdate = true;
-							layoutNeedsUpdate = true;
-							this[ prop ] = options[ prop ];
-							break;
-
-						case 'letterSpacing' :
-						case 'interLine' :
-							// @TODO: I don't think this is true anymore
-							if ( this.isBlock && this.getBestFit() != 'none' ) parsingNeedsUpdate = true;
-							layoutNeedsUpdate = true;
-							this[ prop ] = options[ prop ];
-							break;
-
-						case 'margin' :
-						case 'contentDirection' :
-						case 'justifyContent' :
-						case 'alignContent' :
-						case 'alignItems' :
-						case 'textAlign' :
-						case 'textType' :
-							layoutNeedsUpdate = true;
-							this[ prop ] = options[ prop ];
-							break;
-
-						case 'fontColor' :
-						case 'fontOpacity' :
-						case 'fontSupersampling' :
-						case 'offset' :
-						case 'backgroundColor' :
-						case 'backgroundOpacity' :
-						case 'backgroundTexture' :
-						case 'backgroundSize' :
-						case 'borderRadius' :
-						case 'borderWidth' :
-						case 'borderColor' :
-						case 'borderOpacity' :
-							innerNeedsUpdate = true;
-							this[ prop ] = options[ prop ];
-							break;
-
-						case 'hiddenOverflow' :
-							this[ prop ] = options[ prop ];
-							break;
+				geometry.setIndex( indices );
+				index = geometry.getIndex();
 
-					}
+			} else {
 
-				}
+				console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Undefined position attribute. Processing not possible.' );
+				return geometry;
 
 			}
 
+		}
 
-			// special cases, this.update() must be called only when some files finished loading
+		//
 
-			// Selection of fontFamily and font property
-			// 1. Preferred way, give a {FontFamily} property
-			if ( options.fontFamily instanceof FontFamily ) {
+		const numberOfTriangles = index.count - 2;
+		const newIndices = [];
 
-				this.fontFamily = options.fontFamily;
-				this.font = options.fontFamily.getVariant( FontWeight_NORMAL, FontStyle_NORMAL );
+		if ( drawMode === TriangleFanDrawMode ) {
 
-			}
+			// gl.TRIANGLE_FAN
 
-			// 1.1 Preferred way, a bit annoying to check options.fontTexture ( retro-compatibility )
-			else if( typeof options.fontFamily === 'string' && !options.fontTexture ) {
+			for ( let i = 1; i <= numberOfTriangles; i ++ ) {
 
-				const fontFamily = font_FontLibrary.getFontFamily( options.fontFamily );
+				newIndices.push( index.getX( 0 ) );
+				newIndices.push( index.getX( i ) );
+				newIndices.push( index.getX( i + 1 ) );
 
-				if( fontFamily ){
+			}
 
-					this.fontFamily = fontFamily;
-					this.font = fontFamily.getVariant( FontWeight_NORMAL, FontStyle_NORMAL );
+		} else {
 
-				}
+			// gl.TRIANGLE_STRIP
 
-			}
-			// 2. < v7.x.x way
-			else if ( options.fontFamily && options.fontTexture ) {
+			for ( let i = 0; i < numberOfTriangles; i ++ ) {
 
-				// Set from old way, check if that family is already registered
-				const fontName = options.fontFamily.pages ? options.fontFamily.info.face : options.fontFamily;
+				if ( i % 2 === 0 ) {
 
-				let fontFamily = font_FontLibrary.getFontFamily( fontName );
+					newIndices.push( index.getX( i ) );
+					newIndices.push( index.getX( i + 1 ) );
+					newIndices.push( index.getX( i + 2 ) );
 
-				if ( !fontFamily ) {
+				} else {
 
-					fontFamily = font_FontLibrary.addFontFamily( fontName )
-						.addVariant( FontWeight_NORMAL, FontStyle_NORMAL, options.fontFamily, options.fontTexture );
+					newIndices.push( index.getX( i + 2 ) );
+					newIndices.push( index.getX( i + 1 ) );
+					newIndices.push( index.getX( i ) );
 
 				}
 
-				this.fontFamily = fontFamily;
-
-				// @TODO: Add more variant selection
-				this.font = fontFamily.getVariant( FontWeight_NORMAL, FontStyle_NORMAL );
-
 			}
 
-			// if font kerning changes for a child of a block with Best Fit enabled, we need to trigger parsing for the parent as well.
-			if ( this.parentUI && this.parentUI.getBestFit() != 'none' ) this.parentUI.update( true, true, false );
-
-			// Call component update
-
-			this.update( parsingNeedsUpdate, layoutNeedsUpdate, innerNeedsUpdate );
-
-
-			if ( layoutNeedsUpdate ) this.getHighestParent().update( false, true, false );
-
 		}
 
-		/////////////////////
-		// STATES MANAGEMENT
-		/////////////////////
-
-		/** Store a new state in this component, with linked attributes */
-		setupState( options ) {
+		if ( ( newIndices.length / 3 ) !== numberOfTriangles ) {
 
-			this.states[ options.state ] = {
-				attributes: options.attributes,
-				onSet: options.onSet
-			};
+			console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Unable to generate correct amount of triangles.' );
 
 		}
 
-		/** Set the attributes of a stored state of this component */
-		setState( state ) {
+		// build final geometry
 
-			const savedState = this.states[ state ];
+		const newGeometry = geometry.clone();
+		newGeometry.setIndex( newIndices );
+		newGeometry.clearGroups();
 
-			if ( !savedState ) {
-				console.warn( `state "${state}" does not exist within this component` );
-				return;
-			}
+		return newGeometry;
 
-			if ( state === this.currentState ) return;
+	} else {
 
-			this.currentState = state;
+		console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Unknown draw mode:', drawMode );
+		return geometry;
 
-			if ( savedState.onSet ) savedState.onSet();
+	}
 
-			if ( savedState.attributes ) this.set( savedState.attributes );
+}
 
-		}
+/**
+ * Calculates the morphed attributes of a morphed/skinned BufferGeometry.
+ * Helpful for Raytracing or Decals.
+ * @param {Mesh | Line | Points} object An instance of Mesh, Line or Points.
+ * @return {Object} An Object with original position/normal attributes and morphed ones.
+ */
+function computeMorphedAttributes( object ) {
 
-		/** Get completely rid of this component and its children, also unregister it for updates */
-		clear() {
+	if ( object.geometry.isBufferGeometry !== true ) {
 
-			this.traverse( ( obj ) => {
+		console.error( 'THREE.BufferGeometryUtils: Geometry is not of type BufferGeometry.' );
+		return null;
 
-				UpdateManager.disposeOf( obj );
+	}
 
-				if ( obj.material ) obj.material.dispose();
+	const _vA = new Vector3();
+	const _vB = new Vector3();
+	const _vC = new Vector3();
 
-				if ( obj.geometry ) obj.geometry.dispose();
+	const _tempA = new Vector3();
+	const _tempB = new Vector3();
+	const _tempC = new Vector3();
 
-			} );
+	const _morphA = new Vector3();
+	const _morphB = new Vector3();
+	const _morphC = new Vector3();
 
-		}
+	function _calculateMorphedAttributeData(
+		object,
+		attribute,
+		morphAttribute,
+		morphTargetsRelative,
+		a,
+		b,
+		c,
+		modifiedAttributeArray
+	) {
 
-	};
+		_vA.fromBufferAttribute( attribute, a );
+		_vB.fromBufferAttribute( attribute, b );
+		_vC.fromBufferAttribute( attribute, c );
 
-}
+		const morphInfluences = object.morphTargetInfluences;
 
-;// CONCATENATED MODULE: ./src/components/core/MaterialManager.js
-/* eslint-disable camelcase */
-//@TODO: Get rid of non camelcase uniforms
+		if ( morphAttribute && morphInfluences ) {
 
+			_morphA.set( 0, 0, 0 );
+			_morphB.set( 0, 0, 0 );
+			_morphC.set( 0, 0, 0 );
 
+			for ( let i = 0, il = morphAttribute.length; i < il; i ++ ) {
 
+				const influence = morphInfluences[ i ];
+				const morph = morphAttribute[ i ];
 
-/**
+				if ( influence === 0 ) continue;
 
-Job:
-- Host the materials of a given component.
-- Update a component's materials clipping planes.
-- Update a material uniforms and such.
+				_tempA.fromBufferAttribute( morph, a );
+				_tempB.fromBufferAttribute( morph, b );
+				_tempC.fromBufferAttribute( morph, c );
 
-Knows:
-- Its component materials.
-- Its component ancestors clipping planes.
+				if ( morphTargetsRelative ) {
 
- */
-function MaterialManager( Base ) {
+					_morphA.addScaledVector( _tempA, influence );
+					_morphB.addScaledVector( _tempB, influence );
+					_morphC.addScaledVector( _tempC, influence );
 
-	return class MaterialManager extends Base {
+				} else {
 
-		constructor( options ) {
+					_morphA.addScaledVector( _tempA.sub( _vA ), influence );
+					_morphB.addScaledVector( _tempB.sub( _vB ), influence );
+					_morphC.addScaledVector( _tempC.sub( _vC ), influence );
 
-			super( options );
+				}
 
-			this.textUniforms = {
-				u_texture: { value: null },
-				u_color: { value: null },
-				u_opacity: { value: null },
-				u_pxRange: { value: null },
-				u_useRGSS: { value: null },
-			};
+			}
 
-			this.backgroundUniforms = {
-				u_texture: { value: null },
-				u_color: { value: null },
-				u_opacity: { value: null },
-				u_backgroundMapping: { value: null },
-				u_borderWidth: { value: null },
-				u_borderColor: { value: null },
-				u_borderRadiusTopLeft: { value: null },
-				u_borderRadiusTopRight: { value: null },
-				u_borderRadiusBottomRight: { value: null },
-				u_borderRadiusBottomLeft: { value: null },
-				u_borderOpacity: { value: null },
-				u_size: { value: new external_three_namespaceObject.Vector2( 1, 1 ) },
-				u_tSize: { value: new external_three_namespaceObject.Vector2( 1, 1 ) }
-			};
+			_vA.add( _morphA );
+			_vB.add( _morphB );
+			_vC.add( _morphC );
 
 		}
 
-		/**
-		 * Update backgroundMaterial uniforms.
-		 * Used within MaterialManager and in Block and InlineBlock innerUpdates.
-		 */
-		updateBackgroundMaterial() {
-
-			this.backgroundUniforms.u_texture.value = this.getBackgroundTexture();
-
-			this.backgroundUniforms.u_tSize.value.set(
-				this.backgroundUniforms.u_texture.value.image.width,
-				this.backgroundUniforms.u_texture.value.image.height
-			);
+		if ( object.isSkinnedMesh ) {
 
-			if ( this.size ) this.backgroundUniforms.u_size.value.copy( this.size );
+			object.boneTransform( a, _vA );
+			object.boneTransform( b, _vB );
+			object.boneTransform( c, _vC );
 
-			if ( this.backgroundUniforms.u_texture.value.isDefault ) {
+		}
 
-				this.backgroundUniforms.u_color.value = this.getBackgroundColor();
+		modifiedAttributeArray[ a * 3 + 0 ] = _vA.x;
+		modifiedAttributeArray[ a * 3 + 1 ] = _vA.y;
+		modifiedAttributeArray[ a * 3 + 2 ] = _vA.z;
+		modifiedAttributeArray[ b * 3 + 0 ] = _vB.x;
+		modifiedAttributeArray[ b * 3 + 1 ] = _vB.y;
+		modifiedAttributeArray[ b * 3 + 2 ] = _vB.z;
+		modifiedAttributeArray[ c * 3 + 0 ] = _vC.x;
+		modifiedAttributeArray[ c * 3 + 1 ] = _vC.y;
+		modifiedAttributeArray[ c * 3 + 2 ] = _vC.z;
 
-				this.backgroundUniforms.u_opacity.value = this.getBackgroundOpacity();
+	}
 
-			} else {
+	const geometry = object.geometry;
+	const material = object.material;
 
-				this.backgroundUniforms.u_color.value = this.backgroundColor || Defaults.backgroundWhiteColor;
+	let a, b, c;
+	const index = geometry.index;
+	const positionAttribute = geometry.attributes.position;
+	const morphPosition = geometry.morphAttributes.position;
+	const morphTargetsRelative = geometry.morphTargetsRelative;
+	const normalAttribute = geometry.attributes.normal;
+	const morphNormal = geometry.morphAttributes.position;
 
-				this.backgroundUniforms.u_opacity.value = ( !this.backgroundOpacity && this.backgroundOpacity !== 0 ) ?
-					Defaults.backgroundOpaqueOpacity :
-					this.backgroundOpacity;
+	const groups = geometry.groups;
+	const drawRange = geometry.drawRange;
+	let i, j, il, jl;
+	let group;
+	let start, end;
 
-			}
+	const modifiedPosition = new Float32Array( positionAttribute.count * positionAttribute.itemSize );
+	const modifiedNormal = new Float32Array( normalAttribute.count * normalAttribute.itemSize );
 
-			this.backgroundUniforms.u_backgroundMapping.value = ( () => {
+	if ( index !== null ) {
 
-				switch ( this.getBackgroundSize() ) {
+		// indexed buffer geometry
 
-					case 'stretch':
-						return 0;
-					case 'contain':
-						return 1;
-					case 'cover':
-						return 2;
+		if ( Array.isArray( material ) ) {
 
-				}
+			for ( i = 0, il = groups.length; i < il; i ++ ) {
 
-			} )();
+				group = groups[ i ];
 
-			const borderRadius = this.getBorderRadius();
-			this.backgroundUniforms.u_borderWidth.value = this.getBorderWidth();
-			this.backgroundUniforms.u_borderColor.value = this.getBorderColor();
-			this.backgroundUniforms.u_borderOpacity.value = this.getBorderOpacity();
+				start = Math.max( group.start, drawRange.start );
+				end = Math.min( ( group.start + group.count ), ( drawRange.start + drawRange.count ) );
 
-			//
+				for ( j = start, jl = end; j < jl; j += 3 ) {
 
-			if ( Array.isArray( borderRadius ) ) {
+					a = index.getX( j );
+					b = index.getX( j + 1 );
+					c = index.getX( j + 2 );
 
-				this.backgroundUniforms.u_borderRadiusTopLeft.value = borderRadius[ 0 ];
-				this.backgroundUniforms.u_borderRadiusTopRight.value = borderRadius[ 1 ];
-				this.backgroundUniforms.u_borderRadiusBottomRight.value = borderRadius[ 2 ];
-				this.backgroundUniforms.u_borderRadiusBottomLeft.value = borderRadius[ 3 ];
+					_calculateMorphedAttributeData(
+						object,
+						positionAttribute,
+						morphPosition,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedPosition
+					);
 
-			} else {
+					_calculateMorphedAttributeData(
+						object,
+						normalAttribute,
+						morphNormal,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedNormal
+					);
 
-				this.backgroundUniforms.u_borderRadiusTopLeft.value = borderRadius;
-				this.backgroundUniforms.u_borderRadiusTopRight.value = borderRadius;
-				this.backgroundUniforms.u_borderRadiusBottomRight.value = borderRadius;
-				this.backgroundUniforms.u_borderRadiusBottomLeft.value = borderRadius;
+				}
 
 			}
 
-		}
-
-		/**
-		 * Update backgroundMaterial uniforms.
-		 * Used within MaterialManager and in Text innerUpdates.
-		 */
-		updateTextMaterial() {
+		} else {
 
-			this.textUniforms.u_texture.value = this.getFontTexture();
-			this.textUniforms.u_color.value = this.getFontColor();
-			this.textUniforms.u_opacity.value = this.getFontOpacity();
-			this.textUniforms.u_pxRange.value = this.getFontPXRange();
-			this.textUniforms.u_useRGSS.value = this.getFontSupersampling();
+			start = Math.max( 0, drawRange.start );
+			end = Math.min( index.count, ( drawRange.start + drawRange.count ) );
 
-		}
+			for ( i = start, il = end; i < il; i += 3 ) {
 
-		/** Called by Block, which needs the background material to create a mesh */
-		getBackgroundMaterial() {
+				a = index.getX( i );
+				b = index.getX( i + 1 );
+				c = index.getX( i + 2 );
 
-			if ( !this.backgroundMaterial || !this.backgroundUniforms ) {
+				_calculateMorphedAttributeData(
+					object,
+					positionAttribute,
+					morphPosition,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedPosition
+				);
 
-				this.backgroundMaterial = this._makeBackgroundMaterial();
+				_calculateMorphedAttributeData(
+					object,
+					normalAttribute,
+					morphNormal,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedNormal
+				);
 
 			}
 
-			return this.backgroundMaterial;
-
 		}
 
-		/** Called by Text to get the font material */
-		getFontMaterial() {
+	} else {
 
-			if ( !this.fontMaterial || !this.textUniforms ) {
+		// non-indexed buffer geometry
 
-				this.fontMaterial = this._makeTextMaterial();
+		if ( Array.isArray( material ) ) {
 
-			}
+			for ( i = 0, il = groups.length; i < il; i ++ ) {
 
-			return this.fontMaterial;
+				group = groups[ i ];
 
-		}
+				start = Math.max( group.start, drawRange.start );
+				end = Math.min( ( group.start + group.count ), ( drawRange.start + drawRange.count ) );
 
-		/** @private */
-		_makeTextMaterial() {
+				for ( j = start, jl = end; j < jl; j += 3 ) {
 
-			return new external_three_namespaceObject.ShaderMaterial( {
-				uniforms: this.textUniforms,
-				transparent: true,
-				clipping: true,
-				vertexShader: textVertex,
-				fragmentShader: textFragment,
-				extensions: {
-					derivatives: true
-				}
-			} );
+					a = j;
+					b = j + 1;
+					c = j + 2;
 
-		}
+					_calculateMorphedAttributeData(
+						object,
+						positionAttribute,
+						morphPosition,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedPosition
+					);
 
-		/** @private */
-		_makeBackgroundMaterial() {
+					_calculateMorphedAttributeData(
+						object,
+						normalAttribute,
+						morphNormal,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedNormal
+					);
 
-			return new external_three_namespaceObject.ShaderMaterial( {
-				uniforms: this.backgroundUniforms,
-				transparent: true,
-				clipping: true,
-				vertexShader: backgroundVertex,
-				fragmentShader: backgroundFragment,
-				extensions: {
-					derivatives: true
 				}
-			} );
 
-		}
+			}
 
-		/**
-		 * Update a component's materials clipping planes.
-		 * Called every frame.
-		 */
-		updateClippingPlanes( value ) {
+		} else {
 
-			const newClippingPlanes = value !== undefined ? value : this.getClippingPlanes();
+			start = Math.max( 0, drawRange.start );
+			end = Math.min( positionAttribute.count, ( drawRange.start + drawRange.count ) );
 
-			if ( JSON.stringify( newClippingPlanes ) !== JSON.stringify( this.clippingPlanes ) ) {
+			for ( i = start, il = end; i < il; i += 3 ) {
 
-				this.clippingPlanes = newClippingPlanes;
+				a = i;
+				b = i + 1;
+				c = i + 2;
 
-				if ( this.fontMaterial ) this.fontMaterial.clippingPlanes = this.clippingPlanes;
+				_calculateMorphedAttributeData(
+					object,
+					positionAttribute,
+					morphPosition,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedPosition
+				);
 
-				if ( this.backgroundMaterial ) this.backgroundMaterial.clippingPlanes = this.clippingPlanes;
+				_calculateMorphedAttributeData(
+					object,
+					normalAttribute,
+					morphNormal,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedNormal
+				);
 
 			}
 
 		}
 
-	};
+	}
 
-}
+	const morphedPositionAttribute = new Float32BufferAttribute( modifiedPosition, 3 );
+	const morphedNormalAttribute = new Float32BufferAttribute( modifiedNormal, 3 );
 
-////////////////
-// Text shaders
-////////////////
+	return {
 
-const textVertex = `
-varying vec2 vUv;
+		positionAttribute: positionAttribute,
+		normalAttribute: normalAttribute,
+		morphedPositionAttribute: morphedPositionAttribute,
+		morphedNormalAttribute: morphedNormalAttribute
 
-#include <clipping_planes_pars_vertex>
+	};
 
-void main() {
+}
 
-	vUv = uv;
-	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
-	gl_Position = projectionMatrix * mvPosition;
-	gl_Position.z -= 0.00001;
+function mergeGroups( geometry ) {
 
-	#include <clipping_planes_vertex>
+	if ( geometry.groups.length === 0 ) {
 
-}
-`;
+		console.warn( 'THREE.BufferGeometryUtils.mergeGroups(): No groups are defined. Nothing to merge.' );
+		return geometry;
 
-//
+	}
 
-const textFragment = `
+	let groups = geometry.groups;
 
-uniform sampler2D u_texture;
-uniform vec3 u_color;
-uniform float u_opacity;
-uniform float u_pxRange;
-uniform bool u_useRGSS;
+	// sort groups by material index
 
-varying vec2 vUv;
+	groups = groups.sort( ( a, b ) => {
 
-#include <clipping_planes_pars_fragment>
+		if ( a.materialIndex !== b.materialIndex ) return a.materialIndex - b.materialIndex;
 
-// functions from the original msdf repo:
-// https://github.com/Chlumsky/msdfgen#using-a-multi-channel-distance-field
+		return a.start - b.start;
 
-float median(float r, float g, float b) {
-	return max(min(r, g), min(max(r, g), b));
-}
+	} );
 
-float screenPxRange() {
-	vec2 unitRange = vec2(u_pxRange)/vec2(textureSize(u_texture, 0));
-	vec2 screenTexSize = vec2(1.0)/fwidth(vUv);
-	return max(0.5*dot(unitRange, screenTexSize), 1.0);
-}
+	// create index for non-indexed geometries
 
-float tap(vec2 offsetUV) {
-	vec3 msd = texture( u_texture, offsetUV ).rgb;
-	float sd = median(msd.r, msd.g, msd.b);
-	float screenPxDistance = screenPxRange() * (sd - 0.5);
-	float alpha = clamp(screenPxDistance + 0.5, 0.0, 1.0);
-	return alpha;
-}
+	if ( geometry.getIndex() === null ) {
 
-void main() {
+		const positionAttribute = geometry.getAttribute( 'position' );
+		const indices = [];
 
-	float alpha;
+		for ( let i = 0; i < positionAttribute.count; i += 3 ) {
 
-	if ( u_useRGSS ) {
-
-		// shader-based supersampling based on https://bgolus.medium.com/sharper-mipmapping-using-shader-based-supersampling-ed7aadb47bec
-		// per pixel partial derivatives
-		vec2 dx = dFdx(vUv);
-		vec2 dy = dFdy(vUv);
-
-		// rotated grid uv offsets
-		vec2 uvOffsets = vec2(0.125, 0.375);
-		vec2 offsetUV = vec2(0.0, 0.0);
-
-		// supersampled using 2x2 rotated grid
-		alpha = 0.0;
-		offsetUV.xy = vUv + uvOffsets.x * dx + uvOffsets.y * dy;
-		alpha += tap(offsetUV);
-		offsetUV.xy = vUv - uvOffsets.x * dx - uvOffsets.y * dy;
-		alpha += tap(offsetUV);
-		offsetUV.xy = vUv + uvOffsets.y * dx - uvOffsets.x * dy;
-		alpha += tap(offsetUV);
-		offsetUV.xy = vUv - uvOffsets.y * dx + uvOffsets.x * dy;
-		alpha += tap(offsetUV);
-		alpha *= 0.25;
+			indices.push( i, i + 1, i + 2 );
 
-	} else {
+		}
 
-		alpha = tap( vUv );
+		geometry.setIndex( indices );
 
 	}
 
+	// sort index
 
-	// apply the opacity
-	alpha *= u_opacity;
+	const index = geometry.getIndex();
 
-	// this is useful to avoid z-fighting when quads overlap because of kerning
-	if ( alpha < 0.02) discard;
+	const newIndices = [];
 
+	for ( let i = 0; i < groups.length; i ++ ) {
 
-	gl_FragColor = vec4( u_color, alpha );
+		const group = groups[ i ];
 
-	#include <clipping_planes_fragment>
+		const groupStart = group.start;
+		const groupLength = groupStart + group.count;
 
-}
-`;
+		for ( let j = groupStart; j < groupLength; j ++ ) {
 
-//////////////////////
-// Background shaders
-//////////////////////
+			newIndices.push( index.getX( j ) );
 
-const backgroundVertex = `
-varying vec2 vUv;
+		}
 
-#include <clipping_planes_pars_vertex>
+	}
 
-void main() {
+	geometry.dispose(); // Required to force buffer recreation
+	geometry.setIndex( newIndices );
 
-	vUv = uv;
-	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
-	gl_Position = projectionMatrix * mvPosition;
+	// update groups indices
 
-	#include <clipping_planes_vertex>
+	let start = 0;
 
-}
-`;
+	for ( let i = 0; i < groups.length; i ++ ) {
 
-//
+		const group = groups[ i ];
 
-const backgroundFragment = `
+		group.start = start;
+		start += group.count;
 
-uniform sampler2D u_texture;
-uniform vec3 u_color;
-uniform float u_opacity;
+	}
 
-uniform float u_borderRadiusTopLeft;
-uniform float u_borderRadiusTopRight;
-uniform float u_borderRadiusBottomLeft;
-uniform float u_borderRadiusBottomRight;
-uniform float u_borderWidth;
-uniform vec3 u_borderColor;
-uniform float u_borderOpacity;
-uniform vec2 u_size;
-uniform vec2 u_tSize;
-uniform int u_backgroundMapping;
+	// merge groups
 
-varying vec2 vUv;
+	let currentGroup = groups[ 0 ];
 
-#include <clipping_planes_pars_fragment>
+	geometry.groups = [ currentGroup ];
 
-float getEdgeDist() {
-	vec2 ndc = vec2( vUv.x * 2.0 - 1.0, vUv.y * 2.0 - 1.0 );
-	vec2 planeSpaceCoord = vec2( u_size.x * 0.5 * ndc.x, u_size.y * 0.5 * ndc.y );
-	vec2 corner = u_size * 0.5;
-	vec2 offsetCorner = corner - abs( planeSpaceCoord );
-	float innerRadDist = min( offsetCorner.x, offsetCorner.y ) * -1.0;
-	if (vUv.x < 0.5 && vUv.y >= 0.5) {
-		float roundedDist = length( max( abs( planeSpaceCoord ) - u_size * 0.5 + u_borderRadiusTopLeft, 0.0 ) ) - u_borderRadiusTopLeft;
-		float s = step( innerRadDist * -1.0, u_borderRadiusTopLeft );
-		return mix( innerRadDist, roundedDist, s );
-	}
-	if (vUv.x >= 0.5 && vUv.y >= 0.5) {
-		float roundedDist = length( max( abs( planeSpaceCoord ) - u_size * 0.5 + u_borderRadiusTopRight, 0.0 ) ) - u_borderRadiusTopRight;
-		float s = step( innerRadDist * -1.0, u_borderRadiusTopRight );
-		return mix( innerRadDist, roundedDist, s );
-	}
-	if (vUv.x >= 0.5 && vUv.y < 0.5) {
-		float roundedDist = length( max( abs( planeSpaceCoord ) - u_size * 0.5 + u_borderRadiusBottomRight, 0.0 ) ) - u_borderRadiusBottomRight;
-		float s = step( innerRadDist * -1.0, u_borderRadiusBottomRight );
-		return mix( innerRadDist, roundedDist, s );
-	}
-	if (vUv.x < 0.5 && vUv.y < 0.5) {
-		float roundedDist = length( max( abs( planeSpaceCoord ) - u_size * 0.5 + u_borderRadiusBottomLeft, 0.0 ) ) - u_borderRadiusBottomLeft;
-		float s = step( innerRadDist * -1.0, u_borderRadiusBottomLeft );
-		return mix( innerRadDist, roundedDist, s );
-	}
-}
+	for ( let i = 1; i < groups.length; i ++ ) {
 
-vec4 sampleTexture() {
-	float textureRatio = u_tSize.x / u_tSize.y;
-	float panelRatio = u_size.x / u_size.y;
-	vec2 uv = vUv;
-	if ( u_backgroundMapping == 1 ) { // contain
-		if ( textureRatio < panelRatio ) { // repeat on X
-			float newX = uv.x * ( panelRatio / textureRatio );
-			newX += 0.5 - 0.5 * ( panelRatio / textureRatio );
-			uv.x = newX;
-		} else { // repeat on Y
-			float newY = uv.y * ( textureRatio / panelRatio );
-			newY += 0.5 - 0.5 * ( textureRatio / panelRatio );
-			uv.y = newY;
-		}
-	} else if ( u_backgroundMapping == 2 ) { // cover
-		if ( textureRatio < panelRatio ) { // stretch on Y
-			float newY = uv.y * ( textureRatio / panelRatio );
-			newY += 0.5 - 0.5 * ( textureRatio / panelRatio );
-			uv.y = newY;
-		} else { // stretch on X
-			float newX = uv.x * ( panelRatio / textureRatio );
-			newX += 0.5 - 0.5 * ( panelRatio / textureRatio );
-			uv.x = newX;
-		}
-	}
-	return texture2D( u_texture, uv ).rgba;
-}
+		const group = groups[ i ];
 
-void main() {
+		if ( currentGroup.materialIndex === group.materialIndex ) {
 
-	float edgeDist = getEdgeDist();
-	float change = fwidth( edgeDist );
+			currentGroup.count += group.count;
 
-	vec4 textureSample = sampleTexture();
-	vec3 blendedColor = textureSample.rgb * u_color;
+		} else {
 
-	float alpha = smoothstep( change, 0.0, edgeDist );
-	float blendedOpacity = u_opacity * textureSample.a * alpha;
+			currentGroup = group;
+			geometry.groups.push( currentGroup );
 
-	vec4 frameColor = vec4( blendedColor, blendedOpacity );
+		}
 
-	if ( u_borderWidth <= 0.0 ) {
-		gl_FragColor = frameColor;
-	} else {
-		vec4 borderColor = vec4( u_borderColor, u_borderOpacity * alpha );
-		float stp = smoothstep( edgeDist + change, edgeDist, u_borderWidth * -1.0 );
-		gl_FragColor = mix( frameColor, borderColor, stp );
 	}
 
-	#include <clipping_planes_fragment>
+	return geometry;
+
 }
-`;
 
-;// CONCATENATED MODULE: ./src/content/Frame.js
 
 
+;// CONCATENATED MODULE: ./src/core/properties/rendering/RendererPropertyInline.js
 
-/**
- * Returns a basic plane mesh.
- */
-class Frame extends external_three_namespaceObject.Mesh {
 
-	constructor( material ) {
 
-		const geometry = new external_three_namespaceObject.PlaneGeometry();
 
-		super( geometry, material );
+class RendererPropertyInline extends BaseProperty{
 
-		this.castShadow = true;
-		this.receiveShadow = true;
+	constructor() {
 
-		this.name = 'MeshUI-Frame';
+		super( 'renderer' );
 
 	}
 
-}
-
-;// CONCATENATED MODULE: ./src/utils/mix.js
-let _Base = null;
 
-/**
- * A function for applying multiple mixins more tersely (less verbose)
- * @param {Function[]} mixins - All args to this function should be mixins that take a class and return a class.
- */
-function mix( ...mixins ) {
+	render( element ) {
 
-	// console.log('initial Base: ', _Base);
+		if( !element._inlines._value || !element._inlines._value.length ) return;
 
-	if( !_Base ){
-		throw new Error("Cannot use mixins with Base null");
-	}
+			const charactersAsGeometries = element._inlines._value.map(
+				inline => {
+					return element._font._fontVariant.getGeometricGlyph( inline, element )
+						.translate( inline.offsetX, inline.offsetY, 0 )
+				}
+			);
 
-	let Base = _Base;
+			const mergedGeom = mergeBufferGeometries( charactersAsGeometries );
 
-	_Base = null;
+			element.setFontMesh( new external_three_namespaceObject.Mesh( mergedGeom, element.fontMaterial) );
 
-	let i = mixins.length;
-	let mixin;
+			element._fontMesh.renderOrder = Infinity;
 
-	while ( --i >= 0 ) {
 
-		mixin = mixins[ i ];
-		Base = mixin( Base );
 
 	}
 
-	return Base;
-
 }
 
-mix.withBase = ( Base ) => {
-
-	_Base = Base;
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/TextAlignPropertyInline.js
 
-	return mix;
 
-};
 
-;// CONCATENATED MODULE: ./src/components/Block.js
+class TextAlignPropertyInline extends TextAlignProperty {
 
+	constructor() {
 
+		super();
 
+		// configure
+		this._allowsInherit = false;
+		this._needsUpdate = false;
 
+	}
 
 
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
+		this._value = this._inheritedInput;
 
+		element._layouter._needsProcess = true;
 
+	}
 
-/**
+}
 
-Job:
-- Update a Block component
-- Calls BoxComponent's API to position its children box components
-- Calls InlineManager's API to position its children inline components
-- Call creation and update functions of its background planes
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/VerticalAlignPropertyInline.js
 
- */
-class Block extends mix.withBase( external_three_namespaceObject.Object3D )(
-	BoxComponent,
-	InlineManager,
-	MaterialManager,
-	MeshUIComponent
-) {
 
-	constructor( options ) {
 
-		super( options );
+class VerticalAlignPropertyInline extends VerticalAlignProperty {
 
-		this.isBlock = true;
+	constructor() {
 
-		//
+		super();
 
-		this.size = new external_three_namespaceObject.Vector2( 1, 1 );
+		// configure
+		this._allowsInherit = false;
+		this._needsUpdate = false;
 
-		this.frame = new Frame( this.getBackgroundMaterial() );
+	}
 
-		// This is for hiddenOverflow to work
-		this.frame.onBeforeRender = () => {
 
-			if ( this.updateClippingPlanes ) {
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-				this.updateClippingPlanes();
+		this._value = this._inheritedInput;
 
-			}
+		this._needsProcess = true;
+		element._layouter._needsProcess = true;
 
-		};
+	}
 
-		this.add( this.frame );
+	process( element ) {
 
-		// Lastly set the options parameters to this object, which will trigger an update
+		if( !element._inlines.value ) return;
 
-		this.set( options );
+		element._inlines.value.forEach( inline => {
+			inline.verticalAlign = this._value;
+		});
 
 	}
 
-	////////////
-	//  UPDATE
-	////////////
-
-	parseParams() {
+}
 
-		const bestFit = this.getBestFit();
+;// CONCATENATED MODULE: ./src/elements/basic/InlineElement.js
 
-		if ( bestFit != 'none' && this.childrenTexts.length ) {
 
-			this.calculateBestFit( bestFit );
 
-		} else {
 
-			this.childrenTexts.forEach( child => {
 
-				child._fitFontSize = undefined;
 
-			} );
-		}
-	}
 
-	updateLayout() {
 
-		// Get temporary dimension
 
-		const WIDTH = this.getWidth();
 
-		const HEIGHT = this.getHeight();
 
-		if ( !WIDTH || !HEIGHT ) {
 
-			console.warn( 'Block got no dimension from its parameters or from children parameters' );
-			return;
 
-		}
 
-		this.size.set( WIDTH, HEIGHT );
-		this.frame.scale.set( WIDTH, HEIGHT, 1 );
 
-		if ( this.frame ) this.updateBackgroundMaterial();
 
-		this.frame.renderOrder = this.getParentsNumber();
 
-		// Position this element according to earlier parent computation.
-		// Delegate to BoxComponent.
 
-		if ( this.autoLayout ) {
 
-			this.setPosFromParentRecords();
 
-		}
 
-		// Position inner elements according to dimensions and layout parameters.
-		// Delegate to BoxComponent.
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-		if ( this.childrenInlines.length ) {
 
-			this.computeInlinesPosition();
+/* eslint-enable no-unused-vars */
 
-		}
+class InlineElement extends MeshUIBaseElement {
 
-		this.computeChildrenPosition();
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 */
+	constructor( values = { }) {
 
-		// We check if this block is the root component,
-		// because most of the time the user wants to set the
-		// root component's z position themselves
-		if ( this.parentUI ) {
+		const properties = {};
+		InlineElement.definePropertiesValues( properties, values );
 
-			this.position.z = this.getOffset();
+		super( properties, values );
 
-		}
+		InlineElement.init( this );
 
 	}
 
-	//
-
-	updateInner() {
+	/* eslint-disable no-unused-vars */
+	/**
+	 * A Text Element can only contains inline elements
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) { /* eslint-enable no-unused-vars */
 
-		// We check if this block is the root component,
-		// because most of the time the user wants to set the
-		// root component's z position themselves
-		if ( this.parentUI ) {
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
 
-			this.position.z = this.getOffset();
+		for ( let i = 0; i < arguments.length; i++ ) {
 
-		}
+			const argument = arguments[ i ];
 
-		if ( this.frame ) this.updateBackgroundMaterial();
+			if ( !argument.isUI || argument.isInline ) {
 
-	}
+				validChildren.push( argument );
 
-}
+				argument.position.z = 0.005;
 
-;// CONCATENATED MODULE: ./src/components/core/InlineComponent.js
-/**
+			} else {
 
-Job: nothing yet, but adding a isInline parameter to an inline component
+				console.warn( 'Block element can only contain Box elements.', argument );
 
-Knows: parent dimensions
+			}
 
- */
-function InlineComponent( Base ) {
+		}
 
-	return class InlineComponent extends Base {
+		return super.add( ...validChildren );
 
-		constructor( options ) {
+	}
 
-			super( options );
+	_rebuildParentUI = () => {
 
-			this.isInline = true;
+		super._rebuildParentUI();
 
-		}
+		this._layouter._needsUpdate = true;
 
-	};
-}
+	}
 
-;// CONCATENATED MODULE: ./src/utils/deepDelete.js
+	set textContent( value ) {
 
+		this._textContent.value = value;
 
-/** Recursively erase THE CHILDREN of the passed object */
-function deepDelete( object3D ) {
+	}
 
-	object3D.children.forEach( ( child ) => {
+	get textContent () { return this._textContent._value; }
 
-		if ( child.children.length > 0 ) deepDelete( child );
+	set invertAlpha( value ) {
 
-		object3D.remove( child );
+		this._invertAlpha.value = value;
 
-		UpdateManager.disposeOf( child );
+	}
 
-		if ( child.material ) child.material.dispose();
+	get invertAlpha () { return this._invertAlpha._value; }
 
-		if ( child.geometry ) child.geometry.dispose();
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {  /* eslint-enable no-unused-vars */
 
-	} );
+		if( !properties.children ) properties.children = ChildrenInline;
+		if( !properties.textContent ) properties.textContent = TextContentInline;
+		if( !properties.glyphs ) properties.glyphs = GlyphsProperty;
+		if( !properties.inlines ) properties.inlines = InlinesProperty;
+		if( !properties.layouter ) properties.layouter = InlineLayouter;
+		if( !properties.renderer ) properties.renderer = RendererPropertyInline;
 
-	object3D.children = [];
 
-}
+		if( !properties.fontFamily ) properties.fontFamily = FontFamilyPropertyInline;
+		if( !properties.fontWeight ) properties.fontWeight = FontWeightPropertyInline;
+		if( !properties.fontStyle ) properties.fontStyle = FontStylePropertyInline;
+		if( !properties.fontSize ) properties.fontSize = FontSizePropertyInline;
+		if( !properties.color ) properties.color = ColorProperty;
+		if( !properties.backgroundColor ) properties.backgroundColor = BackgroundColorPropertyInline;
+		if( !properties.lineBreak ) properties.lineBreak = LineBreakProperty;
+		if( !properties.letterSpacing ) properties.letterSpacing = LetterSpacingPropertyInline;
+		if( !properties.whiteSpace ) properties.whiteSpace = WhiteSpacePropertyInline;
+		if( !properties.segments ) properties.segments = SegmentsPropertyInline;
+		if( !properties.textAlign ) properties.textAlign = TextAlignPropertyInline;
+		if( !properties.verticalAlign ) properties.verticalAlign = VerticalAlignPropertyInline;
 
-/* harmony default export */ const utils_deepDelete = (deepDelete);
+		if( !properties.fontKerning ) properties.fontKerning = FontKerningPropertyInline;
 
-;// CONCATENATED MODULE: ./node_modules/three/examples/jsm/utils/BufferGeometryUtils.js
+		// if( !properties.inlines ) properties.inlines = InlinesProperty;
 
+		if( !values.uiType ) values.uiType = 'inline';
 
+	}
 
-function computeTangents( geometry ) {
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init( element ) {
 
-	geometry.computeTangents();
-	console.warn( 'THREE.BufferGeometryUtils: .computeTangents() has been removed. Use BufferGeometry.computeTangents() instead.' );
+		Object.defineProperties( element, {
+				isInline: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
 
+	}
 }
 
-/**
-	 * @param  {Array<BufferGeometry>} geometries
-	 * @param  {Boolean} useGroups
-	 * @return {BufferGeometry}
-	 */
-function mergeBufferGeometries( geometries, useGroups = false ) {
+;// CONCATENATED MODULE: ./src/core/properties/TextContentText.js
 
-	const isIndexed = geometries[ 0 ].index !== null;
 
-	const attributesUsed = new Set( Object.keys( geometries[ 0 ].attributes ) );
-	const morphAttributesUsed = new Set( Object.keys( geometries[ 0 ].morphAttributes ) );
 
-	const attributes = {};
-	const morphAttributes = {};
+class TextContentText extends TextContentEmpty{
 
-	const morphTargetsRelative = geometries[ 0 ].morphTargetsRelative;
+	constructor() {
 
-	const mergedGeometry = new external_three_namespaceObject.BufferGeometry();
+		super( "textContent", null, false );
 
-	let offset = 0;
+		this._needsUpdate = false;
 
-	for ( let i = 0; i < geometries.length; ++ i ) {
+	}
 
-		const geometry = geometries[ i ];
-		let attributesCount = 0;
+	set value( value ) {
 
-		// ensure that all geometries are indexed, or none
+		// If content hasn't change, dont update it
+		if( this._value !== value ) {
 
-		if ( isIndexed !== ( geometry.index !== null ) ) {
+			this._value = value;
 
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. All geometries must have compatible attributes; make sure index attribute exists among all geometries, or in none of them.' );
-			return null;
+			console.log( this._value );
+
+			this._needsUpdate = true;
 
 		}
 
-		// gather attributes, exit early if they're different
+	}
 
-		for ( const name in geometry.attributes ) {
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
 
-			if ( ! attributesUsed.has( name ) ) {
+		// prevent multiple update
+		this._needsUpdate = false;
 
-				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. All geometries must have compatible attributes; make sure "' + name + '" attribute exists among all geometries, or in none of them.' );
-				return null;
+		// Remove all its children (Inlines)
+		for ( let i = element.children.length - 1 ; i >= 0; i-- ) {
+			const child = element.children[ i ];
+			if( child.isUI ) {
+
+				element.remove( child );
+				child.clear();
 
 			}
 
-			if ( attributes[ name ] === undefined ) attributes[ name ] = [];
+		}
+
+		// Rebuild its child list
+		element._children._uis = [];
+
+		// If a value, add a child
+		if( this._value ) {
+			element.add( new InlineElement({name:'anonymousInline',textContent:this._value}));
+		}
+
 
-			attributes[ name ].push( geometry.attributes[ name ] );
+	}
 
-			attributesCount ++;
+	process( element ) {
 
-		}
+		// If not already updated, return raw values
+		if( this._needsUpdate ) return this._value;
 
-		// ensure geometries have the same number of attributes
+		// or default traverse all children to concat textContent
+		return super.process(element);
 
-		if ( attributesCount !== attributesUsed.size ) {
+	}
 
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. Make sure all geometries have the same number of attributes.' );
-			return null;
+}
 
-		}
+;// CONCATENATED MODULE: ./src/core/elements/glyphs/Lines.js
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-		// gather morph attributes, exit early if they're different
+/* eslint-enable no-unused-vars */
 
-		if ( morphTargetsRelative !== geometry.morphTargetsRelative ) {
+/**
+ * Lines represents a vertical succession of Line
+ */
+class Lines extends Array {
 
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. .morphTargetsRelative must be consistent throughout all geometries.' );
-			return null;
+	/**
+	 *
+	 * @param {Line} items
+	 */
+	constructor(...items) {
+		super(...items);
 
-		}
+		/**
+		 * The maximum width of Line items
+		 * @type {number}
+		 */
+		this.width = 0;
 
-		for ( const name in geometry.morphAttributes ) {
+		/**
+		 * The addition of height of any Line
+		 * @type {number}
+		 */
+		this.height = 0;
 
-			if ( ! morphAttributesUsed.has( name ) ) {
+	}
 
-				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '.  .morphAttributes must be consistent throughout all geometries.' );
-				return null;
+}
 
-			}
+;// CONCATENATED MODULE: ./src/core/properties/TextLayouter.js
 
-			if ( morphAttributes[ name ] === undefined ) morphAttributes[ name ] = [];
 
-			morphAttributes[ name ].push( geometry.morphAttributes[ name ] );
 
-		}
 
-		// gather .userData
+class TextLayouter extends BaseProperty {
 
-		mergedGeometry.userData.mergedUserData = mergedGeometry.userData.mergedUserData || [];
-		mergedGeometry.userData.mergedUserData.push( geometry.userData );
+	constructor() {
 
-		if ( useGroups ) {
+		super( 'layouter', null, false );
 
-			let count;
+		/**
+		 *
+		 * @type {Lines}
+		 * @private
+		 */
+		this._value = null;
+	}
 
-			if ( isIndexed ) {
 
-				count = geometry.index.count;
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */ }
 
-			} else if ( geometry.attributes.position !== undefined ) {
+	/**
+	 *
+	 * @override
+	 */
+	process( element ) {
 
-				count = geometry.attributes.position.count;
 
-			} else {
+		let INNER_WIDTH = element._width._value;
 
-				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. The geometry must have either an index or a position attribute' );
-				return null;
+		if ( element._width._auto ) {
 
-			}
+			INNER_WIDTH = Infinity;
 
-			mergedGeometry.addGroup( offset, count, i );
+		} else {
 
-			offset += count;
+			INNER_WIDTH = element._bounds._innerWidth;
 
 		}
 
-	}
+		// Compute lines
 
-	// merge indices
+		const INTERLINE = element._lineHeight._value;
 
-	if ( isIndexed ) {
+		// Will stock the characters of each line, so that we can
+		// correct lines position before to merge
+		const lines = new Lines( new Line() );
 
-		let indexOffset = 0;
-		const mergedIndex = [];
+		let lastInlineOffset = 0;
+		element._children._inlines.forEach( ( inlineElement ) => {
 
-		for ( let i = 0; i < geometries.length; ++ i ) {
+			// Abort condition
 
-			const index = geometries[ i ].index;
+			if ( !inlineElement._inlines.value ) return;
 
-			for ( let j = 0; j < index.count; ++ j ) {
+			this._resetInlines( inlineElement );
 
-				mergedIndex.push( index.getX( j ) + indexOffset );
+			//////////////////////////////////////////////////////////////
+			// Compute offset of each children according to its dimensions
+			//////////////////////////////////////////////////////////////
 
-			}
+			// @TODO: Fontsize best fit
+			const FONTSIZE = inlineElement._fontSize._value;
 
-			indexOffset += geometries[ i ].attributes.position.count;
+			const LETTERSPACING = inlineElement._letterSpacing._value * FONTSIZE;
 
-		}
+			const WHITESPACE = inlineElement._whiteSpace._value;
 
-		mergedGeometry.setIndex( mergedIndex );
+			const BREAKON = inlineElement._lineBreak._value;
 
-	}
+			const POSITION = inlineElement._position._value;
 
-	// merge attributes
+			const whiteSpaceOptions = {
+				WHITESPACE,
+				LETTERSPACING,
+				BREAKON,
+				INNER_WIDTH
+			}
 
-	for ( const name in attributes ) {
+			const inlineWrapper = inlineElement._whiteSpace._inlineWrapper;
 
-		const mergedAttribute = mergeBufferAttributes( attributes[ name ] );
+			// @TODO : absolute inlines in Texts
+			var remember = lastInlineOffset;
+			if( POSITION === 'absolute' ){
+					lastInlineOffset = 0;
+			}
 
-		if ( ! mergedAttribute ) {
 
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the ' + name + ' attribute.' );
-			return null;
+			lastInlineOffset += inlineElement._margin._value.w + inlineElement._padding._value.w;
 
-		}
+			inlineElement._inlines.value.forEach( ( inline, i, inlines ) => {
 
-		mergedGeometry.setAttribute( name, mergedAttribute );
+				const line = lines[lines.length - 1];
 
-	}
+				// Line break
+				const shouldBreak = inlineWrapper(inlines,i,lastInlineOffset, whiteSpaceOptions );
 
-	// merge morph attributes
+				if ( shouldBreak ) {
 
-	for ( const name in morphAttributes ) {
+					lines.push( new Line( inline ) );
 
-		const numMorphTargets = morphAttributes[ name ][ 0 ].length;
+					inline.offsetX = inline.xoffset;
 
-		if ( numMorphTargets === 0 ) break;
+					// restart the lastInlineOffset as zero.
+					if ( inline.width === 0 ) {
+						lastInlineOffset = 0;
+						return;
+					}
 
-		mergedGeometry.morphAttributes = mergedGeometry.morphAttributes || {};
-		mergedGeometry.morphAttributes[ name ] = [];
+					// compute lastInlineOffset normally
+					// except for kerning which won't apply
+					// as there is visually no lefthanded glyph to kern with
+					inline.cumulativeWidth = inline.xadvance + LETTERSPACING;
+					lastInlineOffset = inline.cumulativeWidth;
+					return;
 
-		for ( let i = 0; i < numMorphTargets; ++ i ) {
+				}
 
-			const morphAttributesToMerge = [];
+				lines[ lines.length - 1 ].push( inline );
+				inline.offsetX = lastInlineOffset + inline.xoffset + inline.kerning;
 
-			for ( let j = 0; j < morphAttributes[ name ].length; ++ j ) {
+				inline.cumulativeWidth = inline.xadvance + inline.kerning + LETTERSPACING;
+				lastInlineOffset += inline.cumulativeWidth;
 
-				morphAttributesToMerge.push( morphAttributes[ name ][ j ][ i ] );
+				// in case of lineBreak mandatory
+				if( line.length-1 === 1) {
 
-			}
+					if ( line[ line.length - 2 ].width === 0 ) {
 
-			const mergedMorphAttribute = mergeBufferAttributes( morphAttributesToMerge );
+						// remove the offset of the character following the newline
+						inline.offsetX -= inline.xoffset;
+						lastInlineOffset -= inline.xoffset;
 
-			if ( ! mergedMorphAttribute ) {
+					}
 
-				console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the ' + name + ' morphAttribute.' );
-				return null;
+				}
 
-			}
+			} );
 
-			mergedGeometry.morphAttributes[ name ].push( mergedMorphAttribute );
+			lastInlineOffset += inlineElement._margin._value.y + inlineElement._padding._value.y;
 
-		}
+			// @TODO : absolute inlines in Texts
+			if( POSITION === 'absolute'){
+				lastInlineOffset = remember;
+			}
 
-	}
+		} );
 
-	return mergedGeometry;
+		// Compute single line and combined lines dimensions
+		const inlineCollapser = element._whiteSpace._inlineCollapser;
 
-}
 
-/**
- * @param {Array<BufferAttribute>} attributes
- * @return {BufferAttribute}
- */
-function mergeBufferAttributes( attributes ) {
+		let width = 0, height =0, lineOffsetY = 0;
 
-	let TypedArray;
-	let itemSize;
-	let normalized;
-	let arrayLength = 0;
+		// calculates lines
+		lines.forEach( ( line, i ) => {
 
-	for ( let i = 0; i < attributes.length; ++ i ) {
+			// starts by processing whitespace, it will return a collapsed left offset
+			const whiteSpaceOffset = inlineCollapser( line );
 
-		const attribute = attributes[ i ];
+			//
+			let lineHeight = 0;
+			let lineBase = 0;
 
-		if ( attribute.isInterleavedBufferAttribute ) {
+			line.forEach( ( inline ) => {
 
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. InterleavedBufferAttributes are not supported.' );
-			return null;
+				lineHeight = Math.max( lineHeight, inline.lineHeight );
+				lineBase = Math.max( lineBase, inline.lineBase );
 
-		}
+				inline.offsetX -= whiteSpaceOffset;
 
-		if ( TypedArray === undefined ) TypedArray = attribute.array.constructor;
-		if ( TypedArray !== attribute.array.constructor ) {
+			});
 
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.array must be of consistent array types across matching attributes.' );
-			return null;
+			line.lineHeight = lineHeight;
+			line.lineBase = lineBase;
 
-		}
+			const baseLineDelta = lineHeight - lineBase;
 
-		if ( itemSize === undefined ) itemSize = attribute.itemSize;
-		if ( itemSize !== attribute.itemSize ) {
+			if( i === 0 ){
+				lineOffsetY = -(lineHeight*INTERLINE - lineHeight) * 0.5;
+			} else {
+				lineOffsetY -= lines[i-1].lineHeight*INTERLINE;
+			}
 
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.itemSize must be consistent across matching attributes.' );
-			return null;
+			line.y = lineOffsetY;
+			line.x = 0;
 
-		}
+			// process yoffset
+			line.forEach( ( inline ) => {
 
-		if ( normalized === undefined ) normalized = attribute.normalized;
-		if ( normalized !== attribute.normalized ) {
+				inline.offsetY = lineOffsetY - inline.anchor;
 
-			console.error( 'THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.normalized must be consistent across matching attributes.' );
-			return null;
+				// VERTICAL ALIGN
+				if( inline.lineHeight < line.lineHeight ){
 
-		}
+					if ( inline.verticalAlign === 'super' ) {
+						inline.offsetY += inline.lineBase / 5;
+					}else if( inline.verticalAlign === 'sub'){
+						inline.offsetY -= line.lineBase * 1.2 - inline.lineBase;
+					}else{
+						// Baseline
+							inline.offsetY -= line.lineBase- inline.lineBase;
+					}
 
-		arrayLength += attribute.array.length;
 
-	}
+				}
 
-	const array = new TypedArray( arrayLength );
-	let offset = 0;
+			});
 
-	for ( let i = 0; i < attributes.length; ++ i ) {
 
-		array.set( attributes[ i ].array, offset );
 
-		offset += attributes[ i ].array.length;
+			height += ( line.lineHeight * INTERLINE );
+			// height += ( line.lineHeight);
 
-	}
+			//
+			line.width = 0;
+			// if this line have inlines
+			if ( line[ 0 ] ) {
 
-	return new external_three_namespaceObject.BufferAttribute( array, itemSize, normalized );
+				// compute its width: length from firstInline:LEFT to lastInline:RIGHT
+				// only by the length of its extremities
+				const lastInline = line[ line.length - 1 ];
 
-}
+				// Right + Left ( left is negative )
+				line.width = ( lastInline.offsetX + lastInline.cumulativeWidth + lastInline.paddingRight + lastInline.marginRight ) + line[ 0 ].offsetX;
 
-/**
- * @param {Array<BufferAttribute>} attributes
- * @return {Array<InterleavedBufferAttribute>}
- */
-function interleaveAttributes( attributes ) {
+				width = Math.max( width, line.width);
+			}
 
-	// Interleaves the provided attributes into an InterleavedBuffer and returns
-	// a set of InterleavedBufferAttributes for each attribute
-	let TypedArray;
-	let arrayLength = 0;
-	let stride = 0;
+		} );
 
-	// calculate the the length and type of the interleavedBuffer
-	for ( let i = 0, l = attributes.length; i < l; ++ i ) {
+		lines.height = height;
+		lines.width = width;
 
-		const attribute = attributes[ i ];
+		this._value = lines;
 
-		if ( TypedArray === undefined ) TypedArray = attribute.array.constructor;
-		if ( TypedArray !== attribute.array.constructor ) {
+		if( INNER_WIDTH === Infinity ) {
 
-			console.error( 'AttributeBuffers of different types cannot be interleaved' );
-			return null;
+			element._bounds.setChildrenWidth( element, lines.width );
 
 		}
 
-		arrayLength += attribute.array.length;
-		stride += attribute.itemSize;
+		if( element._height._auto ) {
 
-	}
+			element._bounds.setChildrenHeight( element, lines.height );
 
-	// Create the set of buffer attributes
-	const interleavedBuffer = new InterleavedBuffer( new TypedArray( arrayLength ), stride );
-	let offset = 0;
-	const res = [];
-	const getters = [ 'getX', 'getY', 'getZ', 'getW' ];
-	const setters = [ 'setX', 'setY', 'setZ', 'setW' ];
+		}
 
-	for ( let j = 0, l = attributes.length; j < l; j ++ ) {
+		const parent = element._parent._value;
+		if( parent ) {
 
-		const attribute = attributes[ j ];
-		const itemSize = attribute.itemSize;
-		const count = attribute.count;
-		const iba = new InterleavedBufferAttribute( interleavedBuffer, itemSize, offset, attribute.normalized );
-		res.push( iba );
+			parent._autoSize._needsProcess = true;
+			parent._flexDirection._needsProcess = true;
 
-		offset += itemSize;
+		}
 
-		// Move the data for each attribute into the new interleavedBuffer
-		// at the appropriate offset
-		for ( let c = 0; c < count; c ++ ) {
+		element._inlineJustificator._needsProcess = true;
+		element._textAlign._needsProcess = true;
 
-			for ( let k = 0; k < itemSize; k ++ ) {
+		element._overflow._needsUpdate = true;
 
-				iba[ setters[ k ] ]( c, attribute[ getters[ k ] ]( c ) );
+	}
 
-			}
+	/**
+	 *
+	 * @param inlineElement
+	 * @protected
+	 */
+	_resetInlines ( inlineElement ) {
 
-		}
+		// ensure no collapsed remains
+		inlineElement._fontSize.process( inlineElement );
 
 	}
 
-	return res;
-
 }
 
-/**
- * @param {Array<BufferGeometry>} geometry
- * @return {number}
- */
-function estimateBytesUsed( geometry ) {
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/TextAlignPropertyText.js
 
-	// Return the estimated memory used by this geometry in bytes
-	// Calculate using itemSize, count, and BYTES_PER_ELEMENT to account
-	// for InterleavedBufferAttributes.
-	let mem = 0;
-	for ( const name in geometry.attributes ) {
 
-		const attr = geometry.getAttribute( name );
-		mem += attr.count * attr.itemSize * attr.array.BYTES_PER_ELEMENT;
 
-	}
+class TextAlignPropertyText extends TextAlignProperty {
 
-	const indices = geometry.getIndex();
-	mem += indices ? indices.count * indices.itemSize * indices.array.BYTES_PER_ELEMENT : 0;
-	return mem;
+	constructor() {
 
-}
+		super();
 
-/**
- * @param {BufferGeometry} geometry
- * @param {number} tolerance
- * @return {BufferGeometry>}
- */
-function mergeVertices( geometry, tolerance = 1e-4 ) {
+		// configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
 
-	tolerance = Math.max( tolerance, Number.EPSILON );
+		//
+		// @TODO : strategies
 
-	// Generate an index buffer if the geometry doesn't have one, or optimize it
-	// if it's already available.
-	const hashToIndex = {};
-	const indices = geometry.getIndex();
-	const positions = geometry.getAttribute( 'position' );
-	const vertexCount = indices ? indices.count : positions.count;
+	}
 
-	// next value for triangle indices
-	let nextIndex = 0;
 
-	// attributes and new attribute arrays
-	const attributeNames = Object.keys( geometry.attributes );
-	const attrArrays = {};
-	const morphAttrsArrays = {};
-	const newIndices = [];
-	const getters = [ 'getX', 'getY', 'getZ', 'getW' ];
+	/* eslint-disable no-unused-vars */computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-	// initialize the arrays
-	for ( let i = 0, l = attributeNames.length; i < l; i ++ ) {
+		this._value = this._inheritedInput;
 
-		const name = attributeNames[ i ];
+		this._needsProcess = true;
 
-		attrArrays[ name ] = [];
+	}
 
-		const morphAttr = geometry.morphAttributes[ name ];
-		if ( morphAttr ) {
+	process( element ) {
 
-			morphAttrsArrays[ name ] = new Array( morphAttr.length ).fill().map( () => [] );
+		_process( element );
 
-		}
+		element._renderer._needsRender = true;
 
 	}
 
-	// convert the error tolerance to an amount of decimal places to truncate to
-	const decimalShift = Math.log10( 1 / tolerance );
-	const shiftMultiplier = Math.pow( 10, decimalShift );
-	for ( let i = 0; i < vertexCount; i ++ ) {
+}
 
-		const index = indices ? indices.getX( i ) : i;
+function _process( element ) {
 
-		// Generate a hash for the vertex attributes at the current index 'i'
-		let hash = '';
-		for ( let j = 0, l = attributeNames.length; j < l; j ++ ) {
+	const lines = element._layouter._value;
+	const ALIGNMENT = element._textAlign._value;
+	const INNER_WIDTH = element._bounds._innerWidth;
 
-			const name = attributeNames[ j ];
-			const attribute = geometry.getAttribute( name );
-			const itemSize = attribute.itemSize;
+	// Start the alignment by sticking to directions : left, right, center
+	for ( let i = 0; i < lines.length; i++ ) {
 
-			for ( let k = 0; k < itemSize; k ++ ) {
+		const line = lines[ i ];
 
-				// double tilde truncates the decimal value
-				hash += `${ ~ ~ ( attribute[ getters[ k ] ]( index ) * shiftMultiplier ) },`;
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
 
-			}
+		// compute the alignment offset of the line
+		const offsetX = _computeLineOffset( element, line, i === lines.length - 1 , padding);
 
-		}
 
-		// Add another reference to the vertex if it's already
-		// used by another index
-		if ( hash in hashToIndex ) {
 
-			newIndices.push( hashToIndex[ hash ] );
+		// const paddingAmount = - ( padding.w + padding.y ) / 2 - ( border.w + border.y ) / 2;
+		// const paddingAmount = - ( padding.w + padding.y ) / 2;
+		const paddingAmount = ( - padding.w + padding.y ) / 2 + ( - border.w + border.y ) / 2;
 
-		} else {
+		line.x += offsetX;
 
-			// copy data to the new index in the attribute arrays
-			for ( let j = 0, l = attributeNames.length; j < l; j ++ ) {
+		// apply the offset to each characters of the line
+		for ( let j = 0; j < line.length; j++ ) {
 
-				const name = attributeNames[ j ];
-				const attribute = geometry.getAttribute( name );
-				const morphAttr = geometry.morphAttributes[ name ];
-				const itemSize = attribute.itemSize;
-				const newarray = attrArrays[ name ];
-				const newMorphArrays = morphAttrsArrays[ name ];
+			line[ j ].offsetX += offsetX - paddingAmount;
+			// line[ j ].offsetX += offsetX;
 
-				for ( let k = 0; k < itemSize; k ++ ) {
+		}
 
-					const getterFunc = getters[ k ];
-					newarray.push( attribute[ getterFunc ]( index ) );
+		// line.x = line[ 0 ].offsetX;
 
-					if ( morphAttr ) {
 
-						for ( let m = 0, ml = morphAttr.length; m < ml; m ++ ) {
+	}
 
-							newMorphArrays[ m ].push( morphAttr[ m ][ getterFunc ]( index ) );
+	// last operations for justifications alignments
+	if ( ALIGNMENT.indexOf( 'justify' ) === 0 ) {
 
-						}
+		for ( let i = 0; i < lines.length; i++ ) {
 
-					}
+			const line = lines[ i ];
 
-				}
 
-			}
+			// do not process last line for justify-left or justify-right
+			if ( ALIGNMENT.indexOf( '-' ) !== -1 && i === lines.length - 1 ) return;
 
-			hashToIndex[ hash ] = nextIndex;
-			newIndices.push( nextIndex );
-			nextIndex ++;
+			// can only justify is space is remaining
+			const REMAINING_SPACE = INNER_WIDTH - line.width;
+			if ( REMAINING_SPACE <= 0 ) return;
 
-		}
+			// count the valid spaces to extend
+			// Do not take the first nor the last space into account
+			let validSpaces = 0;
+			for ( let j = 1; j < line.length - 1; j++ ) {
 
-	}
+				validSpaces += line[ j ].char === ' ' ? 1 : 0;
 
-	// Generate typed arrays from new attribute arrays and update
-	// the attributeBuffers
-	const result = geometry.clone();
-	for ( let i = 0, l = attributeNames.length; i < l; i ++ ) {
+			}
+			const additionalSpace = REMAINING_SPACE / validSpaces;
 
-		const name = attributeNames[ i ];
-		const oldAttribute = geometry.getAttribute( name );
 
-		const buffer = new oldAttribute.array.constructor( attrArrays[ name ] );
-		const attribute = new BufferAttribute( buffer, oldAttribute.itemSize, oldAttribute.normalized );
+			// for right justification, process the loop in reverse
+			let inverter = 1;
+			if ( ALIGNMENT === 'justify-right' ) {
+
+				line.reverse();
+				inverter = -1;
+
+			}
 
-		result.setAttribute( name, attribute );
+			let incrementalOffsetX = 0;
 
-		// Update the attribute arrays
-		if ( name in morphAttrsArrays ) {
+			// start at ONE to avoid first space
+			for ( let j = 1; j <= line.length - 1; j++ ) {
 
-			for ( let j = 0; j < morphAttrsArrays[ name ].length; j ++ ) {
+				// apply offset on each char
+				const inlineCharacter = line[ j ];
+				inlineCharacter.offsetX += incrementalOffsetX * inverter;
 
-				const oldMorphAttribute = geometry.morphAttributes[ name ][ j ];
+				// and increase it when space
+				incrementalOffsetX += inlineCharacter.char === ' ' ? additionalSpace : 0;
 
-				const buffer = new oldMorphAttribute.array.constructor( morphAttrsArrays[ name ][ j ] );
-				const morphAttribute = new BufferAttribute( buffer, oldMorphAttribute.itemSize, oldMorphAttribute.normalized );
-				result.morphAttributes[ name ][ j ] = morphAttribute;
+			}
 
+			// for right justification, the loop was processed in reverse
+			if ( ALIGNMENT === 'justify-right' ) {
+				line.reverse();
 			}
 
+
 		}
 
 	}
 
-	// indices
+}
 
-	result.setIndex( newIndices );
+function _computeLineOffset ( element, line, lastLine, padding ) {
 
-	return result;
+	switch ( element._textAlign._value ) {
 
-}
+		case 'justify-left':
+		case 'justify':
+		case 'left':
+			return - element._bounds._innerWidth / 2 + padding.w;
 
-/**
- * @param {BufferGeometry} geometry
- * @param {number} drawMode
- * @return {BufferGeometry>}
- */
-function toTrianglesDrawMode( geometry, drawMode ) {
+		case 'justify-right':
+		case 'right':
+			return -line.width + ( element._bounds._innerWidth / 2 ) - padding.y;
 
-	if ( drawMode === TrianglesDrawMode ) {
 
-		console.warn( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Geometry already defined as triangles.' );
-		return geometry;
+		case 'center':
+			return -line.width / 2;
 
-	}
+		case 'justify-center':
+			if ( lastLine ) {
 
-	if ( drawMode === TriangleFanDrawMode || drawMode === TriangleStripDrawMode ) {
+				// center alignement
+				return -line.width / 2;
 
-		let index = geometry.getIndex();
+			}
 
-		// generate index if not present
+			// left alignment
+			return - element._bounds._innerWidth / 2 + padding.w;
 
-		if ( index === null ) {
+		default:
+			console.warn( `textAlign: '${element._textAlign._value}' is not valid` );
 
-			const indices = [];
+	}
 
-			const position = geometry.getAttribute( 'position' );
+}
 
-			if ( position !== undefined ) {
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/flex/FlexDirectionPropertyText.js
 
-				for ( let i = 0; i < position.count; i ++ ) {
 
-					indices.push( i );
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-				}
+/* eslint-enable no-unused-vars */
 
-				geometry.setIndex( indices );
-				index = geometry.getIndex();
+class FlexDirectionPropertyText extends FlexDirectionProperty {
 
-			} else {
+	constructor( ) {
 
-				console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Undefined position attribute. Processing not possible.' );
-				return geometry;
+		super();
 
-			}
+		this._value = this._input = 'column';
 
-		}
+		// Configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
 
-		//
+	}
 
-		const numberOfTriangles = index.count - 2;
-		const newIndices = [];
+	/* eslint-disable no-unused-vars */computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-		if ( drawMode === TriangleFanDrawMode ) {
+		// @TODO : Evaluate the needs of this property. Could be empty
+		this._value = this._inheritedInput;
 
-			// gl.TRIANGLE_FAN
+	}
 
-			for ( let i = 1; i <= numberOfTriangles; i ++ ) {
+}
 
-				newIndices.push( index.getX( 0 ) );
-				newIndices.push( index.getX( i ) );
-				newIndices.push( index.getX( i + 1 ) );
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/LineHeightPropertyInline.js
 
-			}
 
-		} else {
 
-			// gl.TRIANGLE_STRIP
+class LineHeightPropertyInline extends LineHeightProperty {
 
-			for ( let i = 0; i < numberOfTriangles; i ++ ) {
+	/**
+	 *
+	 */
+	constructor() {
 
-				if ( i % 2 === 0 ) {
+		super();
 
-					newIndices.push( index.getX( i ) );
-					newIndices.push( index.getX( i + 1 ) );
-					newIndices.push( index.getX( i + 2 ) );
+		// configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
 
-				} else {
+	}
 
-					newIndices.push( index.getX( i + 2 ) );
-					newIndices.push( index.getX( i + 1 ) );
-					newIndices.push( index.getX( i ) );
+}
 
-				}
 
-			}
 
-		}
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/FontKerningPropertyText.js
 
-		if ( ( newIndices.length / 3 ) !== numberOfTriangles ) {
 
-			console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Unable to generate correct amount of triangles.' );
 
-		}
+class FontKerningPropertyText extends FontKerningProperty {
 
-		// build final geometry
+	constructor() {
 
-		const newGeometry = geometry.clone();
-		newGeometry.setIndex( newIndices );
-		newGeometry.clearGroups();
+		super();
 
-		return newGeometry;
+		this._value = this._input = this.getDefaultValue();
 
-	} else {
+		// Configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+
+	}
+
+
+	_computeFromInherited( element ) {
+		super._computeFromInherited(element);
 
-		console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Unknown draw mode:', drawMode );
-		return geometry;
 
 	}
 
 }
 
-/**
- * Calculates the morphed attributes of a morphed/skinned BufferGeometry.
- * Helpful for Raytracing or Decals.
- * @param {Mesh | Line | Points} object An instance of Mesh, Line or Points.
- * @return {Object} An Object with original position/normal attributes and morphed ones.
- */
-function computeMorphedAttributes( object ) {
-
-	if ( object.geometry.isBufferGeometry !== true ) {
+;// CONCATENATED MODULE: ./src/core/properties/BoundsText.js
 
-		console.error( 'THREE.BufferGeometryUtils: Geometry is not of type BufferGeometry.' );
-		return null;
 
-	}
+class BoundsText extends BoundsBox {
 
-	const _vA = new Vector3();
-	const _vB = new Vector3();
-	const _vC = new Vector3();
+	constructor() {
 
-	const _tempA = new Vector3();
-	const _tempB = new Vector3();
-	const _tempC = new Vector3();
+		super();
 
-	const _morphA = new Vector3();
-	const _morphB = new Vector3();
-	const _morphC = new Vector3();
+		this._innerWidth = Infinity;
+		this._innerHeight = 0;
 
-	function _calculateMorphedAttributeData(
-		object,
-		material,
-		attribute,
-		morphAttribute,
-		morphTargetsRelative,
-		a,
-		b,
-		c,
-		modifiedAttributeArray
-	) {
+	}
 
-		_vA.fromBufferAttribute( attribute, a );
-		_vB.fromBufferAttribute( attribute, b );
-		_vC.fromBufferAttribute( attribute, c );
+}
 
-		const morphInfluences = object.morphTargetInfluences;
+;// CONCATENATED MODULE: ./src/core/properties/hierarchy/ChildrenText.js
 
-		if ( material.morphTargets && morphAttribute && morphInfluences ) {
 
-			_morphA.set( 0, 0, 0 );
-			_morphB.set( 0, 0, 0 );
-			_morphC.set( 0, 0, 0 );
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-			for ( let i = 0, il = morphAttribute.length; i < il; i ++ ) {
+/* eslint-enable no-unused-vars */
 
-				const influence = morphInfluences[ i ];
-				const morph = morphAttribute[ i ];
+class ChildrenText extends BaseProperty {
 
-				if ( influence === 0 ) continue;
+	constructor() {
 
-				_tempA.fromBufferAttribute( morph, a );
-				_tempB.fromBufferAttribute( morph, b );
-				_tempC.fromBufferAttribute( morph, c );
+		super( 'children', null, false );
 
-				if ( morphTargetsRelative ) {
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._uis = [];
 
-					_morphA.addScaledVector( _tempA, influence );
-					_morphB.addScaledVector( _tempB, influence );
-					_morphC.addScaledVector( _tempC, influence );
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._inlines = [];
 
-				} else {
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._boxes = [];
 
-					_morphA.addScaledVector( _tempA.sub( _vA ), influence );
-					_morphB.addScaledVector( _tempB.sub( _vB ), influence );
-					_morphC.addScaledVector( _tempC.sub( _vC ), influence );
+	}
 
-				}
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update requested when :
+	 * 		- New child has been added
+	 * 		- Existing child has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) { /* eslint-enable no-unused-vars */
 
-			}
+		this._compute( element );
 
-			_vA.add( _morphA );
-			_vB.add( _morphB );
-			_vC.add( _morphC );
+		this._needsProcess = true;
 
-		}
+	}
 
-		if ( object.isSkinnedMesh ) {
 
-			object.boneTransform( a, _vA );
-			object.boneTransform( b, _vB );
-			object.boneTransform( c, _vC );
+	/**
+	 * Process when :
+	 * 		- Existing child visibility changed
+	 *
+	 * @param element
+	 */
+	process( element ) {
 
-		}
+		this._compute( element );
 
-		modifiedAttributeArray[ a * 3 + 0 ] = _vA.x;
-		modifiedAttributeArray[ a * 3 + 1 ] = _vA.y;
-		modifiedAttributeArray[ a * 3 + 2 ] = _vA.z;
-		modifiedAttributeArray[ b * 3 + 0 ] = _vB.x;
-		modifiedAttributeArray[ b * 3 + 1 ] = _vB.y;
-		modifiedAttributeArray[ b * 3 + 2 ] = _vB.z;
-		modifiedAttributeArray[ c * 3 + 0 ] = _vC.x;
-		modifiedAttributeArray[ c * 3 + 1 ] = _vC.y;
-		modifiedAttributeArray[ c * 3 + 2 ] = _vC.z;
+		element._overflow._needsRender = true;
 
 	}
 
-	const geometry = object.geometry;
-	const material = object.material;
+	_compute( element ) {
 
-	let a, b, c;
-	const index = geometry.index;
-	const positionAttribute = geometry.attributes.position;
-	const morphPosition = geometry.morphAttributes.position;
-	const morphTargetsRelative = geometry.morphTargetsRelative;
-	const normalAttribute = geometry.attributes.normal;
-	const morphNormal = geometry.morphAttributes.position;
+		this._uis = element.children.filter( child => child.visible && child.isUI );
 
-	const groups = geometry.groups;
-	const drawRange = geometry.drawRange;
-	let i, j, il, jl;
-	let group, groupMaterial;
-	let start, end;
+		this._inlines = this._uis.filter( child => child.isInline ).sort( this._sortOrder );
 
-	const modifiedPosition = new Float32Array( positionAttribute.count * positionAttribute.itemSize );
-	const modifiedNormal = new Float32Array( normalAttribute.count * normalAttribute.itemSize );
+	}
 
-	if ( index !== null ) {
+	/**
+	 *
+	 */
+	dispose() {
 
-		// indexed buffer geometry
+		this._inlines = null;
 
-		if ( Array.isArray( material ) ) {
+	}
 
-			for ( i = 0, il = groups.length; i < il; i ++ ) {
+	/**
+	 *
+	 * Sort children according to their .style.order property or fallback on children index
+	 *
+	 * @param {HTMLElementVR} a
+	 * @param {HTMLElementVR} b
+	 * @return {number}
+	 * @private
+	 */
+	_sortOrder = ( a, b ) => {
 
-				group = groups[ i ];
-				groupMaterial = material[ group.materialIndex ];
+		if( a._order._value < b._order._value ) return -1;
+		if( a._order._value > b._order._value ) return 1;
 
-				start = Math.max( group.start, drawRange.start );
-				end = Math.min( ( group.start + group.count ), ( drawRange.start + drawRange.count ) );
+		// if both children have the same order value, use their children index to order them
+		if( this._uis.indexOf(a) < this._uis.indexOf(b) ) {
+			return -1;
+		}
 
-				for ( j = start, jl = end; j < jl; j += 3 ) {
+		return 1;
 
-					a = index.getX( j );
-					b = index.getX( j + 1 );
-					c = index.getX( j + 2 );
+	}
 
-					_calculateMorphedAttributeData(
-						object,
-						groupMaterial,
-						positionAttribute,
-						morphPosition,
-						morphTargetsRelative,
-						a, b, c,
-						modifiedPosition
-					);
+}
 
-					_calculateMorphedAttributeData(
-						object,
-						groupMaterial,
-						normalAttribute,
-						morphNormal,
-						morphTargetsRelative,
-						a, b, c,
-						modifiedNormal
-					);
+;// CONCATENATED MODULE: ./src/core/properties/AutoSizePropertyText.js
 
-				}
 
-			}
+/**
+ * Autosize are only trigger when natural size changed
+ */
+class AutoSizePropertyText extends BaseProperty {
 
-		} else {
+	constructor() {
 
-			start = Math.max( 0, drawRange.start );
-			end = Math.min( index.count, ( drawRange.start + drawRange.count ) );
+		super( 'autosize' );
 
-			for ( i = start, il = end; i < il; i += 3 ) {
+	}
 
-				a = index.getX( i );
-				b = index.getX( i + 1 );
-				c = index.getX( i + 2 );
+	process( element ) {
 
-				_calculateMorphedAttributeData(
-					object,
-					material,
-					positionAttribute,
-					morphPosition,
-					morphTargetsRelative,
-					a, b, c,
-					modifiedPosition
-				);
+		if( element._layouter._value && element._layouter._value.length ) {
 
-				_calculateMorphedAttributeData(
-					object,
-					material,
-					normalAttribute,
-					morphNormal,
-					morphTargetsRelative,
-					a, b, c,
-					modifiedNormal
-				);
+			const lines = element._layouter._value;
 
-			}
+			// as this is from children offsetWidth, it means parent innerWidth
+			const padding = element._padding._value;
+			const border = element._borderWidth._value;
 
-		}
+			// has auto size get the height from children
+			if ( element._width._auto ) {
 
-	} else if ( positionAttribute !== undefined ) {
+				element._bounds.setOffsetWidth( element, lines.width + padding.w + padding.y + border.w + border.y );
 
-		// non-indexed buffer geometry
+			}
 
-		if ( Array.isArray( material ) ) {
+			if ( element._height._auto ) {
 
-			for ( i = 0, il = groups.length; i < il; i ++ ) {
+				element._bounds.setOffsetHeight( element, lines.height + padding.x + padding.z + border.x + border.z );
 
-				group = groups[ i ];
-				groupMaterial = material[ group.materialIndex ];
+			}
 
-				start = Math.max( group.start, drawRange.start );
-				end = Math.min( ( group.start + group.count ), ( drawRange.start + drawRange.count ) );
+		}
 
-				for ( j = start, jl = end; j < jl; j += 3 ) {
+	}
 
-					a = j;
-					b = j + 1;
-					c = j + 2;
+}
 
-					_calculateMorphedAttributeData(
-						object,
-						groupMaterial,
-						positionAttribute,
-						morphPosition,
-						morphTargetsRelative,
-						a, b, c,
-						modifiedPosition
-					);
+;// CONCATENATED MODULE: ./src/core/properties/rendering/RendererPropertyText.js
 
-					_calculateMorphedAttributeData(
-						object,
-						groupMaterial,
-						normalAttribute,
-						morphNormal,
-						morphTargetsRelative,
-						a, b, c,
-						modifiedNormal
-					);
 
-				}
+class RendererPropertyText extends RendererPropertyBox{
 
-			}
+	constructor() {
 
-		} else {
+		super( 'renderer' );
 
-			start = Math.max( 0, drawRange.start );
-			end = Math.min( positionAttribute.count, ( drawRange.start + drawRange.count ) );
+		this._needsUpdate = false;
 
-			for ( i = start, il = end; i < il; i += 3 ) {
+	}
 
-				a = i;
-				b = i + 1;
-				c = i + 2;
 
-				_calculateMorphedAttributeData(
-					object,
-					material,
-					positionAttribute,
-					morphPosition,
-					morphTargetsRelative,
-					a, b, c,
-					modifiedPosition
-				);
+	render( element ) {
 
-				_calculateMorphedAttributeData(
-					object,
-					material,
-					normalAttribute,
-					morphNormal,
-					morphTargetsRelative,
-					a, b, c,
-					modifiedNormal
-				);
+		super.render( element );
 
-			}
+		for ( const inlineElement of element._children._inlines ) {
+
+			inlineElement._renderer.render( inlineElement );
 
 		}
 
-	}
+		element.performAfterUpdate();
 
-	const morphedPositionAttribute = new Float32BufferAttribute( modifiedPosition, 3 );
-	const morphedNormalAttribute = new Float32BufferAttribute( modifiedNormal, 3 );
+	}
 
-	return {
+}
 
-		positionAttribute: positionAttribute,
-		normalAttribute: normalAttribute,
-		morphedPositionAttribute: morphedPositionAttribute,
-		morphedNormalAttribute: morphedNormalAttribute
+;// CONCATENATED MODULE: ./src/elements/basic/TextElement.js
 
-	};
 
-}
 
 
 
 
 
-;// CONCATENATED MODULE: ./src/components/Text.js
 
 
 
@@ -5511,1563 +14804,812 @@ function computeMorphedAttributes( object ) {
 
 
 
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
 
-/**
+/* eslint-enable no-unused-vars */
 
-Job:
-- computing its own size according to user measurements or content measurement
-- creating 'inlines' objects with info, so that the parent component can organise them in lines
+class TextElement extends BoxElement {
 
-Knows:
-- Its text content (string)
-- Font attributes ('font', 'fontSize'.. etc..)
-- Parent block
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 * @param [properties={}]
+	 */
+	constructor( values = {}, properties = {}) {
 
- */
-class Text extends mix.withBase( external_three_namespaceObject.Object3D )(
-	InlineComponent,
-	MaterialManager,
-	MeshUIComponent
-) {
+		TextElement.definePropertiesValues( properties, values );
 
-	constructor( options ) {
+		super( properties, values );
 
-		super();
+		TextElement.init( this );
 
-		this.isText = true;
 
-		// adds internal properties
-		/**
-		 *
-		 * @type {string[]}
-		 * @private
-		 */
-		this._textContent = null;
+	}
 
-		/**
-		 *
-		 * @type {MSDFTypographyCharacter[]}
-		 * @private
-		 */
-		this._textContentGlyphs = null;
+	/* eslint-disable no-unused-vars */
+	/**
+	 * A Text Element can only contains inline elements
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) { /* eslint-enable no-unused-vars */
 
 		/**
 		 *
-		 * @type {MSDFInlineCharacter[]}
-		 * @private
+		 * @type {Array.<Object3D>}
 		 */
-		this._textContentInlines = null;
+		const validChildren = [];
+		let updateLayout = false;
 
-		this.set( options );
+		for ( let i = 0; i < arguments.length; i++ ) {
 
-		this.addEventListener( 'added', this._acquireFont );
-
-	}
+			const argument = arguments[ i ];
 
-	/**
-	 * Temporary code
-	 * @param {FontVariant} value
-	 */
-	set font( value ) {
+			if ( !argument.isUI || argument.isInline ) {
 
-		// if a previous font isset, be sure not event remains
-		if ( this._font && !this._font.isReady ) {
+				if( argument.isInline ) {
+					updateLayout = true;
+				}
 
-			this._font.removeEventListener( 'ready', this._handleFontVariantReady );
+				validChildren.push( argument );
 
-		}
+			} else {
 
-		this._font = value;
+				console.warn( 'Block element can only contain Box elements.', argument );
 
-		// new font, means rebuild inlines, now or soon
-		if ( !this._font.isReady ) {
+			}
 
-			this.inlines = null;
-			this._font.addEventListener( 'ready', this._handleFontVariantReady );
+		}
 
-		} else {
+		if( validChildren.length > 0 ) {
 
-			this._handleFontVariantReady();
+			super.add( ...validChildren )
 
 		}
 
-	}
-
-	/**
-	 *
-	 * @private
-	 */
-	_handleFontVariantReady = () => {
+		if( updateLayout ) {
+			this._children._needsUpdate = true;
+			this._layouter._needsProcess = true;
+		}
 
-		// request parse update and parent layout
-		this.update( true, true, false );
-		this.getHighestParent().update( false, true, false );
+		return this;
 
-		// remove the listener
-		this._font.removeEventListener( 'ready', this._handleFontVariantReady );
+	}
 
-	};
 
-	_acquireFont = () => {
+	set textContent ( value ) {
 
-		if( !this._font ) {
+		this._textContent.value = value;
 
-			let fontFamily = this.getFontFamily();
-			if ( fontFamily ) {
+	}
 
-				if ( fontFamily instanceof FontFamily ) {
+	// Must redefine getter also, or issue.
+	get textContent() {
 
-					this.font = fontFamily.getVariant( this.getFontWeight(), this.getFontStyle() );
+		return super.textContent;
 
-				} else {
+	}
 
-					// Set from old way, check if that family is already registered
-					const fontName = fontFamily.pages ? fontFamily.info.face : fontFamily;
-					fontFamily = font_FontLibrary.getFontFamily( fontName );
-					if ( fontFamily ) {
+	set invertAlpha( value ) {
 
-						this.font = fontFamily.getVariant( this.getFontWeight(), this.getFontStyle() );
+		this._invertAlpha.value = value;
 
-					}
+	}
 
-				}
+	get invertAlpha () { return this._invertAlpha._value; }
 
-			}
+	get lines() { return this._layouter._value; }
 
-		}
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {
 
-	}
+		properties.flexDirection = FlexDirectionPropertyText;
+		properties.justifyContent = JustifyContentProperty;
+		properties.alignItems = AlignItemsProperty;
+		properties.bounds = BoundsText;
+		properties.autoSize = AutoSizePropertyText;
+		properties.renderer = RendererPropertyText;
 
-	_onBeforeRender = () => {
+		if( !properties.children ) properties.children = ChildrenText;
+		if( !properties.textContent ) properties.textContent = TextContentText;
+		if( !properties.layouter ) properties.layouter = TextLayouter;
+		if( !properties.lineHeight ) properties.lineHeight = LineHeightPropertyInline;
+		if( !properties.textAlign ) properties.textAlign = TextAlignPropertyText;
+		if( !properties.whiteSpace ) properties.whiteSpace = WhiteSpacePropertyInline;
+		if( !properties.fontKerning ) properties.fontKerning = FontKerningPropertyText;
+		if( !properties.segments ) properties.segments = SegmentsPropertyText;
 
-			if ( this.updateClippingPlanes ) {
+		// configure
+		if ( !values.width ) values.width = '100%';
 
-				this.updateClippingPlanes();
 
-			}
+		// break inheritance chains
+		if ( !values.fontSide ) values.fontSide = 0; // FrontSide;
 
 	}
 
 	/**
 	 *
-	 * @returns {FontVariant}
+	 * @param {MeshUIBaseElement} element
 	 */
-	get font() {
-		return this._font;
+	static init( element ) {
+
+		Object.defineProperties( element, {
+				isText: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
 	}
+}
 
-	/*******************************************************************************************************************
-	 * GETTERS - SETTERS
-	 ******************************************************************************************************************/
+;// CONCATENATED MODULE: ./src/core/properties/InlinesPropertyInlineBlock.js
 
-	// get whiteSpace(){
-	//
-	// 	// initialisation can look on parents
-	// 	if( !this._whiteSpace ) this._whiteSpace = this.getWhiteSpace();
-	//
-	// 	return this._whiteSpace;
-	//
-	// }
-	//
-	// set whiteSpace( value ) {
-	//
-	// 	if( this._whiteSpace === value ) return;
-	//
-	// 	value = Whitespace.isValid( value );
-	//
-	// 	this._whiteSpace = value;
-	//
-	// 	// request parse and layout
-	// 	this.update( true, true, false );
-	//
-	// }
 
 
-	_buildContentKernings(){
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-		// apply kerning
-		if ( this.getFontKerning() !== 'none' ) {
+/* eslint-enable no-unused-vars */
 
-			// First character won't be kerned with its void lefthanded peer
-			for ( let i = 1; i < this._textContent.length; i++ ) {
+/**
+ * @property {Array.<InlineGlyph>} value
+ */
+class InlinesPropertyInlineBlock extends BaseProperty{
 
-				const glyphPair = this._textContent[ i - 1 ] + this._textContent[ i ];
+	constructor() {
 
-				// retrieve the kerning from the font
-				// as set it on the characterInline
-				this._textContentInlines[ i ].kerning = this._font.getKerningAmount( glyphPair );
+		super( "inlines", null, false );
 
-			}
-		}
+		/**
+		 *
+		 * @type {Array.<Inline>}
+		 * @internal
+		 */
+		this._value = [];
 
 	}
 
-	///////////
-	// UPDATES
-	///////////
+	process( element ) {
 
+		// First gets left side
+		this._value[0].paddingLeft = element._padding._value.w;
+		this._value[0].marginLeft = element._margin._value.w;
 
-	/**
-	 * Here we compute each glyph dimension, and we store it in this
-	 * component's inlines parameter. This way the parent Block will
-	 * compute each glyph position on updateLayout.
-	 */
-	parseParams() {
+		// Last gets right side
+		const lastIndex = this._value.length - 1;
+		this._value[lastIndex].paddingRight = element._padding._value.y;
+		this._value[lastIndex].marginRight = element._margin._value.y;
 
-		this._acquireFont();
+	}
 
-		if( !this.content || this.content.length === 0 ) return;
+}
 
-		// won't parse without font or unready font
-		if( !this._font || !this._font.isReady ) return;
+;// CONCATENATED MODULE: ./src/core/properties/rendering/RendererPropertyInlineBox.js
 
-		// Apply whitespace on string characters themselves.
-		// Will possibly :
-		//  - l/r trim whitespace
-		//  - collapse whitespace sequences
-		//  - remove newlines / tabulations
-		this._textContent = collapseWhitespaceOnString( this.content, this.getWhiteSpace() );
 
-		// Now that we know exactly which characters will be printed
-		// Store the character description ( typographic properties )
-		this._textContentGlyphs = this._textContent.split( '' ).map( ( char ) => this._font.getTypographyCharacter( char ) );
 
-		// And from the descriptions ( which are static/freezed per character per font )
-		// Build the inline
-		this._textContentInlines = this._textContentGlyphs.map( ( glyphBox ) => glyphBox.asInlineCharacter() );
-		this.inlines = this._textContentInlines;
+class RendererPropertyInlineBox extends BaseProperty{
 
+	constructor() {
 
-		// this.calculateInlines( this._fitFontSize || this.getFontSize() );
-		this.calculateInlines( this._fitFontSize || this.getFontSize() );
+		super( 'renderer' );
 
 	}
 
-	/**
-	 * Create text content
-	 *
-	 * At this point, text.inlines should have been modified by the parent
-	 * component, to add xOffset and yOffset properties to each inlines.
-	 * This way, TextContent knows were to position each character.
-	 */
-	updateLayout() {
 
-		utils_deepDelete( this );
+	render( element ) {
 
-		if ( this.inlines ) {
+		if( !element._backgroundMesh ) {
 
-			const charactersAsGeometries = this.inlines.map(
-				inline =>
-					this._font.getGeometryCharacter( inline )
-						.translate( inline.offsetX, inline.offsetY, 0 )
+			element.setBackgroundMesh( new Frame(element) );
 
-			);
+		}
 
-			const mergedGeom = mergeBufferGeometries( charactersAsGeometries );
+		element._backgroundMesh.position.x = element._inlines._value[0].offsetX + element._inlines._value[0].width/2;
+		// element._backgroundMesh.position.y = element._inlines._value[0].offsetY + element._inlines._value[0].lineBase/4;
+		element._backgroundMesh.position.y = element._inlines._value[0].offsetY + element._inlines._value[0].lineBase/2;
 
-			this.textContent = new external_three_namespaceObject.Mesh( mergedGeom, this.getFontMaterial() );
+		element._bounds.render( element );
 
-			this.textContent.renderOrder = Infinity;
+	}
 
-			// This is for hiddenOverflow to work
-			this.textContent.onBeforeRender = this._onBeforeRender
+}
 
-			this.updateTextMaterial();
+;// CONCATENATED MODULE: ./src/core/properties/BoundsInlineBlock.js
 
-			this.add( this.textContent );
 
-		}
 
-		this.position.z = this.getOffset();
+class BoundsInlineBlock extends BaseProperty {
 
-	}
+	constructor() {
 
-	updateInner() {
+		super( 'bounds', null, false );
 
-		this.position.z = this.getOffset();
+		/**
+		 *
+		 * @type {Vector3}
+		 * @internal
+		 */
+		this._size = new external_three_namespaceObject.Vector3( 1, 1, 1 );
 
-		if ( this.textContent ) this.updateTextMaterial();
+		this._offsetWidth = 0;
+		this._offsetHeight = 0;
 
+		this._innerWidth = 0;
+		this._innerHeight = 0;
 	}
 
-	calculateInlines( fontSize ) {
-
-		// Abort conditions
-		if ( !this._font || !this._font.isReady ) return;
-		if ( !this._textContent) return;
 
-		const whiteSpace = this.getWhiteSpace();
-		const newLineBreakability = newlineBreakability( whiteSpace )
 
-		const breakChars = this.getBreakOn();
 
-		const SCALE_MULT = fontSize / this._font.typographic.size;
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
 
-		// update inlines properties before inline placements in lines
-		for ( let i = 0; i < this._textContent.length; i++ ) {
+		this.output( out );
 
-			const char = this._textContent[ i ];
+		this._needsProcess = true;
 
-			/**
-			 *
-			 * @type {MSDFInlineCharacter}
-			 */
-			const inline = this._textContentInlines[ i ];
+	}
 
-			inline.resetOffsets();
+	process( element ) {
 
-			// Whitespace Breakability ---------------------------------------------------------------------------------------
-			let lineBreak = null;
-			if ( whiteSpace !== NOWRAP ) {
+		this._offsetWidth = this._innerWidth = element._inlines._value[0].width;
+		this._offsetHeight = this._innerHeight = element._inlines._value[0].height;
 
-				if ( breakChars.includes( char ) || char.match( /\s/g ) ) lineBreak = 'possible';
+		this._needsRender = true;
 
-			}
+		element._borderWidth._needsRender = true;
+		element._borderRadius._needsRender = true;
 
-			if ( char.match( /\n/g ) ) {
+	}
 
-				lineBreak = newLineBreakability;
+	/* eslint-disable no-unused-vars */ render( element ) { /* eslint-enable no-unused-vars */
 
-			}
+		this._size.x = this._offsetWidth;
+		this._size.y = this._offsetHeight;
 
-			inline.lineBreak = lineBreak;
+	}
 
-			// --------------------------------------------------------------------------------------  Whitespace Breakability
+	/**
+	 *
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) {
 
-			inline.fontSize = fontSize;
+		out[ 'size' ] = this._size;
 
-			inline.fontFactor = SCALE_MULT;
+	}
 
+}
 
-		}
 
-	}
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/background/BackgroundColorPropertyInlineBlock.js
 
-}
 
-;// CONCATENATED MODULE: ./src/components/InlineBlock.js
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
 
+class BackgroundColorPropertyInlineBlock extends StyleColorProperty {
 
+	constructor() {
 
+		super( 'backgroundColor', 'inherit', false );
 
+		this._allowsInherit = false;
 
+		this._input = 'inherit';
 
+	}
 
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
+		element._backgroundMesh.visible = !(this._input === 'none' || this._input === 'transparent');
 
+		if( this._input === 'inherit' ) {
 
+			this._value.set(this.getInheritedInput( element ));
 
-/**
- * Job:
- * - computing its own size according to user measurements or content measurement
- * - creating an 'inlines' object with info, so that the parent component can organise it along with other inlines
- *
- * Knows:
- * - Its measurements parameter
- * - Parent block
- */
-class InlineBlock extends mix.withBase( external_three_namespaceObject.Object3D )(
-	InlineComponent,
-	BoxComponent,
-	InlineManager,
-	MaterialManager,
-	MeshUIComponent
-) {
+		} else {
 
-	constructor( options ) {
+			this._value.set( this._input );
 
-		super( options );
+		}
 
-		this.isInlineBlock = true;
+	}
 
-		//
+	// background color of inlineBlock looks for parent color instead of backgroundColor
+	getInheritedInput( element ) {
 
-		this.size = new external_three_namespaceObject.Vector2( 1, 1 );
+		if ( this._input !== 'inherit' ) return this._input;
 
-		this.frame = new Frame( this.getBackgroundMaterial() );
+		return element._color._value;
 
-		// This is for hiddenOverflow to work
-		this.frame.onBeforeRender = () => {
+	}
 
-			if ( this.updateClippingPlanes ) {
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set inline( value ) {
 
-				this.updateClippingPlanes();
+		if( ! this.isValidValue( value ) ) return;
 
-			}
+		if( value === this._inline ) {
 
-		};
+			// do nothing no update, the value hasn't changed
+			return;
 
-		this.add( this.frame );
+		}
 
-		// Lastly set the options parameters to this object, which will trigger an update
+		this._input = this._inline = value;
 
-		this.set( options );
+		this._needsUpdate = true;
 
 	}
 
-	///////////
-	// UPDATES
-	///////////
+}
 
-	parseParams() {
 
-		// Get image dimensions
 
-		if ( !this.width ) console.warn( 'inlineBlock has no width. Set to 0.3 by default' );
-		if ( !this.height ) console.warn( 'inlineBlock has no height. Set to 0.3 by default' );
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/font/ColorPropertyInlineBlock.js
 
 
-		// Add an object that can be seen and CharacterInline
-		this.inlines = [ {
-			lineBreak : 'possible',
-			kerning : 0,
-      offsetX : 0,
-			offsetY : 0,
-			width: this.width || 0.3,
-			height: this.height || 0.3,
-			anchor: 0, // @TODO: Could be useful
-			xadvance: this.width || 0.3,
-			xoffset: 0,
-			yoffset: 0,
-			lineHeight : this.height || 0.3,
-			lineBase: this.height || 0.3
-		}];
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
 
-	}
+class ColorPropertyInlineBlock extends StyleColorProperty {
 
-	//
+	constructor() {
+
+		super( 'color', 'inherit', false );
+
+		this._input = 'inherit';
 
+		this.output = this._outputValue;
 
+	}
+
+	/* eslint-disable no-unused-vars */
 	/**
-	 * Create text content
-	 *
-	 * At this point, text.inlines should have been modified by the parent
-	 * component, to add xOffset and yOffset properties to each inlines.
-	 * This way, TextContent knows were to position each character.
 	 *
+	 * @param {MeshUIBaseElement} element
 	 */
-	updateLayout() {
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-		const WIDTH = this.getWidth();
-		const HEIGHT = this.getHeight();
+		if( this._input === 'inherit' ) {
 
-		if ( this.inlines ) {
+			this._value.set( this.getInheritedInput( element ) );
 
-			const options = this.inlines[ 0 ];
+		} else {
 
-			// basic translation to put the plane's left bottom corner at the center of its space
-			this.position.set( options.width / 2, options.height / 2, 0 );
+			this._value.set( this._input);
 
-			// translation required by inlineManager to position this component inline
-			this.position.x += options.offsetX;
-			this.position.y += options.offsetY;
+		}
 
-			this.position.y += options.anchor;
+		element._backgroundColor._needsUpdate = true;
+		element._borderColor._needsUpdate = true;
 
-		}
+	}
 
-		this.size.set( WIDTH, HEIGHT );
-		this.frame.scale.set( WIDTH, HEIGHT, 1 );
+}
 
-		if ( this.frame ) this.updateBackgroundMaterial();
+;// CONCATENATED MODULE: ./src/core/properties/style-properties/border/BorderColorPropertyInlineBlock.js
 
-		this.frame.renderOrder = this.getParentsNumber();
 
-		// Position inner elements according to dimensions and layout parameters.
-		// Delegate to BoxComponent.
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
 
-		if ( this.childrenInlines.length ) {
+class BorderColorPropertyInlineBlock extends StyleColorProperty {
 
-			this.computeInlinesPosition();
+	constructor() {
 
-		}
+		super( 'borderColor', 'inherit', false );
 
-		this.computeChildrenPosition();
+		this._allowsInherit = false;
 
-		this.position.z = this.getOffset();
+		this._input = 'inherit';
 
 	}
 
-	//
-
-	updateInner() {
-
-		this.position.z = this.getOffset();
-
-		if ( this.frame ) this.updateBackgroundMaterial();
-
-	}
-
-}
-
-;// CONCATENATED MODULE: ./src/utils/Keymaps.js
-/**
-
-Contains key maps for the Keyboard component.
-Most languages need a specific keyboard. Therefore, Keyboard takes a language attribute
-and if not passed tries to detect the language. If not found, it uses the basic QZERTY layout.
-
- */
-/* harmony default export */ const Keymaps = ({
-
-	fr:
-		[
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'p', upperCase: 'P' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'm', upperCase: 'M' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	///////////////////////////////////////////////////////////
-
-	eng:
-		[
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'p', upperCase: 'P' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'l', upperCase: 'L' } ] }
-				],
-
-				[
-					{ width: 0.15, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 0.15, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	////////////////////////////////////////////////////////////
-
-	ru:
-		[
-			[
-				[
-					{ width: 1 / 12, chars: [ { lowerCase: 'й', upperCase: 'Й' }, { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ц', upperCase: 'Ц' }, { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'у', upperCase: 'У' }, { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'к', upperCase: 'К' }, { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'е', upperCase: 'Е' }, { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'н', upperCase: 'Н' }, { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'г', upperCase: 'Г' }, { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ш', upperCase: 'Ш' }, { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'щ', upperCase: 'Щ' }, { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'з', upperCase: 'З' }, { lowerCase: 'p', upperCase: 'P' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'х', upperCase: 'Х' }, { lowerCase: '{', upperCase: '[' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ъ', upperCase: 'Ъ' }, { lowerCase: '}', upperCase: ']' } ] }
-				],
-
-				[
-					{ width: 1 / 12, chars: [ { lowerCase: 'ф', upperCase: 'Ф' }, { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ы', upperCase: 'Ы' }, { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'в', upperCase: 'В' }, { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'а', upperCase: 'А' }, { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'п', upperCase: 'П' }, { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'р', upperCase: 'Р' }, { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'о', upperCase: 'О' }, { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'л', upperCase: 'Л' }, { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'д', upperCase: 'Д' }, { lowerCase: 'l', upperCase: 'L' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ж', upperCase: 'Ж' }, { lowerCase: ':', upperCase: ';' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'э', upperCase: 'Э' }, { lowerCase: '"', upperCase: '\'' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ё', upperCase: 'Ё' }, { lowerCase: '|', upperCase: '\\' } ] }
-				],
-
-				[
-					{ width: 1.5 / 12, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'я', upperCase: 'Я' }, { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ч', upperCase: 'Ч' }, { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'с', upperCase: 'С' }, { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'м', upperCase: 'М' }, { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'и', upperCase: 'И' }, { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'т', upperCase: 'Т' }, { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ь', upperCase: 'Ь' }, { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'б', upperCase: 'Б' }, { lowerCase: ',', upperCase: '' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ю', upperCase: 'Ю' }, { lowerCase: '.', upperCase: '' } ] },
-					{ width: 1.5 / 12, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.15, command: 'switch-set', chars: [ { lowerCase: 'eng' } ] },
-					{ width: 0.15, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.3, command: 'switch', chars: [ { lowerCase: 'АБВ' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	/////////////////////////////////////////////////////////
-
-	de:
-		[
-			[
-				[
-					{ width: 1 / 11, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'p', upperCase: 'P' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'ü', upperCase: 'Ü' } ] }
-				],
-
-				[
-					{ width: 1 / 11, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'ö', upperCase: 'Ö' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'ä', upperCase: 'Ä' } ] }
-				],
-
-				[
-					{ width: 2 / 11, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 2 / 11, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	///////////////////////////////////////////////////////////
-
-	es:
-		[
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'p', upperCase: 'P' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ñ', upperCase: 'Ñ' } ] }
-				],
-
-				[
-					{ width: 0.15, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 0.15, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	//////////////////////////////////////////////////////////////////////
-
-	el:
-		[
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: ';', upperCase: ':' }, { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ς', upperCase: 'ς' }, { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ε', upperCase: 'Ε' }, { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ρ', upperCase: 'Ρ' }, { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'τ', upperCase: 'Τ' }, { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'υ', upperCase: 'Υ' }, { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'θ', upperCase: 'Θ' }, { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ι', upperCase: 'Ι' }, { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ο', upperCase: 'Ο' }, { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'π', upperCase: 'Π' }, { lowerCase: 'p', upperCase: 'P' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'α', upperCase: 'Α' }, { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'σ', upperCase: 'Σ' }, { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'δ', upperCase: 'Δ' }, { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'φ', upperCase: 'Φ' }, { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'γ', upperCase: 'Γ' }, { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'η', upperCase: 'Η' }, { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ξ', upperCase: 'Ξ' }, { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'κ', upperCase: 'Κ' }, { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'λ', upperCase: 'Λ' }, { lowerCase: 'l', upperCase: 'L' } ] }
-				],
-
-				[
-					{ width: 0.15, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ζ', upperCase: 'Ζ' }, { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'χ', upperCase: 'Χ' }, { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ψ', upperCase: 'Ψ' }, { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ω', upperCase: 'Ω' }, { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'β', upperCase: 'Β' }, { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ν', upperCase: 'Ν' }, { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'μ', upperCase: 'Μ' }, { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 0.15, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.15, command: 'switch-set', chars: [ { lowerCase: 'eng' } ] },
-					{ width: 0.15, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	////////////////////////////////////////////////////////////////////////////////
-
-	nord:
-		[
-			[
-				[
-					{ width: 1 / 11, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'p', upperCase: 'P' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'å', upperCase: 'Å' } ] }
-				],
-
-				[
-					{ width: 1 / 11, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'æ', upperCase: 'Æ' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'ø', upperCase: 'Ø' } ] }
-				],
-
-				[
-					{ width: 2 / 11, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 2 / 11, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		]
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
 
-});
+		if( this._input === 'inherit' ) {
 
-;// CONCATENATED MODULE: ./src/components/Keyboard.js
+			this._value.set(this.getInheritedInput( element ));
 
+		} else {
 
+			this._value.set( this._input );
 
+		}
 
+	}
 
+	// background color of inlineBlock looks for parent color instead of backgroundColor
+	getInheritedInput( element ) {
 
+		if ( this._input !== 'inherit' ) return this._input;
 
+		return element._color._value;
 
+	}
 
+}
 
 
 
+;// CONCATENATED MODULE: ./src/elements/basic/InlineBlockElement.js
 
-//
 
-const textureLoader = new external_three_namespaceObject.TextureLoader();
 
-//
 
-/**
- * Job: high-level component that returns a keyboard
- */
-class Keyboard extends mix.withBase( external_three_namespaceObject.Object3D )( BoxComponent, MeshUIComponent ) {
 
-	constructor( options ) {
 
-		// DEFAULTS
 
-		if ( !options ) options = {};
-		if ( !options.width ) options.width = 1;
-		if ( !options.height ) options.height = 0.4;
-		if ( !options.margin ) options.margin = 0.003;
-		if ( !options.padding ) options.padding = 0.01;
 
-		//
 
-		super( options );
 
-		this.currentPanel = 0;
 
-		this.isLowerCase = true;
 
-		this.charsetCount = 1;
 
-		//////////
-		// KEYMAP
-		//////////
 
-		// ../utils/Keymaps contains information about various keyboard layouts
-		// We select one depending on the user's browser language if
-		// there is no options.language
 
-		let keymap;
 
-		if ( options.language || navigator.language ) {
 
-			switch ( options.language || navigator.language ) {
 
-				case 'fr' :
-				case 'fr-CH' :
-				case 'fr-CA' :
-					keymap = Keymaps.fr;
-					break;
 
-				case 'ru' :
-					this.charsetCount = 2;
-					keymap = Keymaps.ru;
-					break;
 
-				case 'de' :
-				case 'de-DE' :
-				case 'de-AT' :
-				case 'de-LI' :
-				case 'de-CH' :
-					keymap = Keymaps.de;
-					break;
 
-				case 'es' :
-				case 'es-419' :
-				case 'es-AR' :
-				case 'es-CL' :
-				case 'es-CO' :
-				case 'es-ES' :
-				case 'es-CR' :
-				case 'es-US' :
-				case 'es-HN' :
-				case 'es-MX' :
-				case 'es-PE' :
-				case 'es-UY' :
-				case 'es-VE' :
-					keymap = Keymaps.es;
-					break;
+class InlineBlockElement extends MeshUIBaseElement {
 
-				case 'el' :
-					this.charsetCount = 2;
-					keymap = Keymaps.el;
-					break;
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 */
+	constructor( values = {}) {
 
-				case 'nord' :
-					keymap = Keymaps.nord;
-					break;
+		const properties = {};
+		InlineBlockElement.definePropertiesValues( properties, values );
 
-				default :
-					keymap = Keymaps.eng;
-					break;
+		super( properties, values );
 
-			}
+		InlineBlockElement.init( this );
 
-		} else {
+	}
 
-			keymap = Keymaps.eng;
+	clear() {
 
+		// remove cross reference
+		for ( const inline of this._inlines._value ) {
+			inline.clear();
 		}
 
-		////////////////////
-		// BLOCKS CREATION
-		////////////////////
+		return super.clear();
+	}
+
+	/**
+	 * When the backgroundMesh has been set, bind properties
+	 * @override
+	 */
+	bindBackgroundMeshProperties () {
+
+		this._backgroundMesh.raycast = ()=>{};
+
+		// bind the background scale with bounds
+		this._bounds._size = this._backgroundMesh.scale;
+		this._bounds._needsUpdate = true;
 
-		// PANELS
+	}
 
-		this.keys = [];
+	/**
+	 * When the backgroundMesh has been unset, unbind properties
+	 * @override
+	 */
+	unbindBackgroundMeshProperties () {
 
-		this.panels = keymap.map( ( panel ) => {
+		// detach bounds size
+		this._bounds._size = new external_three_namespaceObject.Vector3(1,1,1);
+		this._bounds._needsUpdate = true;
 
-			const lineHeight = ( options.height / panel.length ) - ( options.margin * 2 );
+	}
 
-			const panelBlock = new Block( {
-				width: options.width + ( options.padding * 2 ),
-				height: options.height + ( options.padding * 2 ),
-				offset: 0,
-				padding: options.padding,
-				fontFamily: options.fontFamily,
-				fontTexture: options.fontTexture,
-				backgroundColor: options.backgroundColor,
-				backgroundOpacity: options.backgroundOpacity
-			} );
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) { /* eslint-enable no-unused-vars */
 
-			panelBlock.charset = 0;
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
 
-			panelBlock.add( ...panel.map( ( line ) => {
+		for ( let i = 0; i < arguments.length; i++ ) {
 
-				const lineBlock = new Block( {
-					width: options.width,
-					height: lineHeight,
-					margin: options.margin,
-					contentDirection: 'row',
-					justifyContent: 'center'
-				} );
+			const argument = arguments[ i ];
 
-				lineBlock.frame.visible = false;
+			if ( !argument.isUI ) {
 
-				const keys = [];
+				validChildren.push( argument );
 
-				line.forEach( ( keyItem ) => {
+				argument.position.z = 0.005;
 
-					const key = new Block( {
-						width: ( options.width * keyItem.width ) - ( options.margin * 2 ),
-						height: lineHeight,
-						margin: options.margin,
-						justifyContent: 'center',
-						offset: 0
-					} );
+			} else {
 
-					const char = keyItem.chars[ panelBlock.charset ].lowerCase || keyItem.chars[ panelBlock.charset ].icon || 'undif';
+				console.warn( 'ThreeMeshUI::InlineBlockElement cannot contains UI Elements.', argument );
 
-					if (
-						( char === 'enter' && options.enterTexture ) ||
-						( char === 'shift' && options.shiftTexture ) ||
-						( char === 'backspace' && options.backspaceTexture )
-					) {
+			}
 
-						const url = ( () => {
+		}
 
-							switch ( char ) {
+		return super.add( ...validChildren );
 
-								case 'backspace':
-									return options.backspaceTexture;
-								case 'enter':
-									return options.enterTexture;
-								case 'shift':
-									return options.shiftTexture;
-								default:
-									console.warn( 'There is no icon image for this key' );
+	}
 
-							}
 
-						} )();
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {
 
-						textureLoader.load( url, ( texture ) => {
+		if( !properties.children ) properties.children = ChildrenInline;
+		if( !properties.bounds ) properties.bounds = BoundsInlineBlock;
+		if( !properties.inlines ) properties.inlines = InlinesPropertyInlineBlock;
+		if( !properties.layouter ) properties.layouter = InlineLayouter;
+		if( !properties.renderer ) properties.renderer = RendererPropertyInlineBox;
 
-							key.add(
-								new InlineBlock( {
-									width: key.width * 0.65,
-									height: key.height * 0.65,
-									backgroundSize: 'contain',
-									backgroundTexture: texture
-								} )
-							);
+		// reset inlineElement specificity
+		if( !properties.fontFamily ) properties.fontFamily = FontFamilyPropertyInline;
+		if( !properties.fontWeight ) properties.fontWeight = FontWeightPropertyInline;
+		if( !properties.fontStyle ) properties.fontStyle = FontStylePropertyInline;
+		if( !properties.fontSize ) properties.fontSize = FontSizePropertyInline;
 
-						} );
+		if( !properties.backgroundColor ) properties.backgroundColor = BackgroundColorPropertyInlineBlock;
+		if( !properties.borderColor ) properties.borderColor = BorderColorPropertyInlineBlock;
+		if( !properties.color ) properties.color = ColorPropertyInlineBlock;
 
-					} else {
+		if( !properties.lineBreak ) properties.lineBreak = LineBreakProperty;
+		if( !properties.letterSpacing ) properties.letterSpacing = LetterSpacingPropertyInline;
+		if( !properties.whiteSpace ) properties.whiteSpace = WhiteSpacePropertyInline;
+		if( !properties.fontKerning ) properties.fontKerning = FontKerningProperty;
 
-						key.add(
-							new Text( {
-								content: char,
-								offset: 0
-							} )
-						);
+		if( values.backgroundOpacity === undefined) values.backgroundOpacity = 1;
 
-					}
+		if( !values.backgroundSize ) values.backgroundSize = 'cover';
+		if( !values.width ) values.width = '100%';
+		if( !values.height ) values.height = '100%';
+		if( !values.boxSizing ) values.boxSizing = 'border-box';
 
-					key.type = 'Key';
+	}
 
-					key.info = keyItem;
-					key.info.input = char;
-					key.panel = panelBlock;
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init( element ) {
+
+		Object.defineProperties( element, {
+				isInline: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				},
+				isInlineBlock: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
 
-					// line's keys
-					keys.push( key );
+		element._inlines._value = [new InlineBlockInline(element)];
 
-					// keyboard's keys
-					this.keys.push( key );
+		element.backgroundMaterial = new FrameMaterial();
+		element._renderer.render( element );
 
-				} );
+	}
 
-				lineBlock.add( ...keys );
+}
 
-				return lineBlock;
 
-			} ) );
 
-			return panelBlock;
 
-		} );
+/**
+ * InlineBlock has its own Inline implementation
+ */
+class InlineBlockInline extends Inline {
+
+	/**
+	 *
+	 * @param {InlineBlockElement} parent
+	 */
+	constructor( parent ) {
 
-		this.add( this.panels[ 0 ] );
+		super();
 
-		// Lastly set the options parameters to this object, which will trigger an update
-		this.set( options );
+		/**
+		 * @TODO: This currently make a circular reference that should ideally be removed
+		 * @type {InlineBlockElement}
+		 * @private
+		 */
+		this._uiElement = parent;
 
 	}
 
 	/**
-	 * Used to switch to an entirely different panel of this keyboard,
-	 * with potentially a completely different layout
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
 	 */
-	setNextPanel() {
+	get xadvance() {
 
-		this.panels.forEach( ( panel ) => {
+		const padding = this._uiElement._padding._value;
+		const width = this._uiElement._width;
+		if( width._relative ) {
+			return width._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
 
-			this.remove( panel );
+		return padding.w + padding.y + width.value ;
+	}
 
-		} );
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get width() {
 
-		this.currentPanel = ( this.currentPanel + 1 ) % ( this.panels.length );
+		const width = this._uiElement._width;
 
-		this.add( this.panels[ this.currentPanel ] );
+		if( width._relative ) {
+			return width._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
 
-		this.update( true, true, true );
+		return width.value;
 
 	}
 
-	/*
-	 * Used to change the keys charset. Some layout support this,
-	 * like the Russian or Greek keyboard, to be able to switch to
-	 * English layout when necessary
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
 	 */
-	setNextCharset() {
+	get height() {
 
-		this.panels[ this.currentPanel ].charset = ( this.panels[ this.currentPanel ].charset + 1 ) % this.charsetCount;
+		const height = this._uiElement._height;
+		if( height._relative ) {
+			return height._value * this._uiElement._fontSize.getInheritedInput( this._uiElement ) ;
+		}
 
-		this.keys.forEach( ( key ) => {
+		return height.value;
 
-			// Here we sort the keys, we only keep the ones that are part of the current panel.
+	}
 
-			const isInCurrentPanel = this.panels[ this.currentPanel ].getObjectById( key.id );
+	get anchor(){
+		return this.height;
+	}
 
-			if ( !isInCurrentPanel ) return;
 
-			//
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get lineHeight() {
 
-			const char = key.info.chars[ key.panel.charset ] || key.info.chars[ 0 ];
+		const height = this._uiElement._height;
+		if( height._relative ) {
+			return height._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
+
+		return height.value;
 
-			const newContent = this.isLowerCase || !char.upperCase ? char.lowerCase : char.upperCase;
+	}
 
-			if ( !key.childrenTexts.length ) return;
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get lineBase() {
 
-			const textComponent = key.childrenTexts[0];
+		const height = this._uiElement._height;
+		if( height._relative ) {
+			return height._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
 
-			key.info.input = newContent;
+		return height.value;
 
-			textComponent.set( {
-				content: newContent
-			} );
+	}
 
-			textComponent.update( true, true, true );
+	/**
+	 *
+	 */
+	clear() {
 
-		} );
+		this._uiElement = null;
 
 	}
 
-	/** Toggle case for characters that support it. */
-	toggleCase() {
+}
 
-		this.isLowerCase = !this.isLowerCase;
 
-		this.keys.forEach( ( key ) => {
+;// CONCATENATED MODULE: ./src/utils/Behavior.js
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
 
-			const char = key.info.chars[ key.panel.charset ] || key.info.chars[ 0 ];
+/* eslint-enable no-unused-vars */
 
-			const newContent = this.isLowerCase || !char.upperCase ? char.lowerCase : char.upperCase;
 
-			if ( !key.childrenTexts.length ) return;
+class Behavior {
 
-			const textComponent = key.childrenTexts[0];
+	/**
+	 *
+	 * @param {MeshUIBaseElement} subject
+	 */
+	constructor( subject ) {
 
-			key.info.input = newContent;
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 * @protected
+		 */
+		this._subject = subject;
 
-			textComponent.set( {
-				content: newContent
-			} );
+	}
 
-			textComponent.update( true, true, true );
+	/**
+	 * @abstract
+	 */
+	attach() {
 
-		} );
+		console.error(`Behavior::attach() - Is abstract and therefore should be overridden in ${this.constructor.name}`);
 
 	}
 
-	////////////
-	//  UPDATE
-	////////////
+	/**
+	 * @abstract
+	 * @returns {void}
+	 */
+	act() {
+
+		throw new Error(`Behavior::act() - Is abstract and therefore should be overridden in ${this.constructor.name}`);
 
-	parseParams() {
 	}
 
-	updateLayout() {
+	/**
+	 * @abstract
+	 */
+	detach() {
+
+		console.error(`Behavior::detach() - Is abstract and therefore should be overridden in ${this.constructor.name}`);
+
 	}
 
-	updateInner() {
+	/**
+	 *
+	 */
+	clear() {
+
 	}
 
 }
@@ -7084,25 +15626,38 @@ class Keyboard extends mix.withBase( external_three_namespaceObject.Object3D )(
 
 
 
+
+
+
+
+
+
+
+
+
+
 
 
 
 const update = () => UpdateManager.update();
 
 const ThreeMeshUI = {
-	Block: Block,
-	Text: Text,
-	InlineBlock: InlineBlock,
-	Keyboard: Keyboard,
+	Block: BlockElement,
+	Text : TextElement,
+	Inline: InlineElement,
+	InlineBlock : InlineBlockElement,
+	// Keyboard : KeyboardElement,
+	MeshUIBaseElement: MeshUIBaseElement,
 	FontLibrary: font_FontLibrary,
 	update,
-	TextAlign: TextAlign_namespaceObject,
-	Whitespace: Whitespace_namespaceObject,
-	JustifyContent: JustifyContent_namespaceObject,
-	AlignItems: AlignItems_namespaceObject,
-	ContentDirection: ContentDirection_namespaceObject
+	MSDFFontMaterialUtils: MSDFFontMaterialUtils,
+	ShaderChunkUI: ShaderChunkUI,
+	Behavior: Behavior,
+	FontVariant: font_FontVariant,
+	DefaultValues: DefaultValues_namespaceObject
 };
 
+
 if ( typeof global !== 'undefined' ) global.ThreeMeshUI = ThreeMeshUI;
 
 
@@ -7117,18 +15672,38 @@ if ( typeof global !== 'undefined' ) global.ThreeMeshUI = ThreeMeshUI;
 
 
 
+
+
+
+
+
+
+
 /* harmony default export */ const three_mesh_ui = (ThreeMeshUI);
 
-var __webpack_exports__AlignItems = __webpack_exports__.g1;
+console.warn("ThreeMeshUI v7.1.x - Three "+window.__THREE__)
+
+
+
+
+
+var __webpack_exports__BaseProperty = __webpack_exports__.w8;
+var __webpack_exports__Behavior = __webpack_exports__.cg;
 var __webpack_exports__Block = __webpack_exports__.gO;
-var __webpack_exports__ContentDirection = __webpack_exports__.km;
+var __webpack_exports__DefaultValues = __webpack_exports__.wb;
 var __webpack_exports__FontLibrary = __webpack_exports__.zV;
+var __webpack_exports__FontVariant = __webpack_exports__.HS;
+var __webpack_exports__InheritableProperty = __webpack_exports__.Ec;
+var __webpack_exports__Inline = __webpack_exports__.gF;
 var __webpack_exports__InlineBlock = __webpack_exports__.ol;
-var __webpack_exports__JustifyContent = __webpack_exports__.uM;
-var __webpack_exports__Keyboard = __webpack_exports__.N1;
+var __webpack_exports__InlineGlyph = __webpack_exports__.pz;
+var __webpack_exports__MSDFFontMaterialUtils = __webpack_exports__.tx;
+var __webpack_exports__MaterialTransformers = __webpack_exports__.hj;
+var __webpack_exports__MeshUIBaseElement = __webpack_exports__.FV;
+var __webpack_exports__ShaderChunkUI = __webpack_exports__.sV;
 var __webpack_exports__Text = __webpack_exports__.xv;
-var __webpack_exports__TextAlign = __webpack_exports__.PH;
-var __webpack_exports__Whitespace = __webpack_exports__.UH;
+var __webpack_exports__TypographicFont = __webpack_exports__.mx;
+var __webpack_exports__TypographicGlyph = __webpack_exports__.gE;
 var __webpack_exports__default = __webpack_exports__.ZP;
 var __webpack_exports__update = __webpack_exports__.Vx;
-export { __webpack_exports__AlignItems as AlignItems, __webpack_exports__Block as Block, __webpack_exports__ContentDirection as ContentDirection, __webpack_exports__FontLibrary as FontLibrary, __webpack_exports__InlineBlock as InlineBlock, __webpack_exports__JustifyContent as JustifyContent, __webpack_exports__Keyboard as Keyboard, __webpack_exports__Text as Text, __webpack_exports__TextAlign as TextAlign, __webpack_exports__Whitespace as Whitespace, __webpack_exports__default as default, __webpack_exports__update as update };
+export { __webpack_exports__BaseProperty as BaseProperty, __webpack_exports__Behavior as Behavior, __webpack_exports__Block as Block, __webpack_exports__DefaultValues as DefaultValues, __webpack_exports__FontLibrary as FontLibrary, __webpack_exports__FontVariant as FontVariant, __webpack_exports__InheritableProperty as InheritableProperty, __webpack_exports__Inline as Inline, __webpack_exports__InlineBlock as InlineBlock, __webpack_exports__InlineGlyph as InlineGlyph, __webpack_exports__MSDFFontMaterialUtils as MSDFFontMaterialUtils, __webpack_exports__MaterialTransformers as MaterialTransformers, __webpack_exports__MeshUIBaseElement as MeshUIBaseElement, __webpack_exports__ShaderChunkUI as ShaderChunkUI, __webpack_exports__Text as Text, __webpack_exports__TypographicFont as TypographicFont, __webpack_exports__TypographicGlyph as TypographicGlyph, __webpack_exports__default as default, __webpack_exports__update as update };
diff --git a/build/three-mesh-ui.module.min.js b/build/three-mesh-ui.module.min.js
index 0c95f531..8458c928 100644
--- a/build/three-mesh-ui.module.min.js
+++ b/build/three-mesh-ui.module.min.js
@@ -1 +1 @@
-import*as e from"three";var t={d:(e,s)=>{for(var r in s)t.o(s,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:s[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},s={};t.d(s,{g1:()=>a,gO:()=>Ue,km:()=>r,zV:()=>ue,ol:()=>Te,uM:()=>i,N1:()=>Me,xv:()=>Ie,PH:()=>o,UH:()=>n,ZP:()=>Ge,Vx:()=>We});var r={};t.r(r),t.d(r,{COLUMN:()=>d,COLUMN_REVERSE:()=>u,ROW:()=>c,ROW_REVERSE:()=>l,contentDirection:()=>p});var a={};t.r(a),t.d(a,{CENTER:()=>C,END:()=>f,START:()=>w,STRETCH:()=>g,alignItems:()=>m,warnAboutDeprecatedAlignItems:()=>_});var i={};t.r(i),t.d(i,{CENTER:()=>x,END:()=>k,SPACE_AROUND:()=>R,SPACE_BETWEEN:()=>U,SPACE_EVENLY:()=>S,START:()=>v,justifyContent:()=>B});var n={};t.r(n),t.d(n,{NORMAL:()=>P,NOWRAP:()=>O,PRE:()=>E,PRE_LINE:()=>z,PRE_WRAP:()=>H,WHITE_CHARS:()=>T,collapseWhitespaceOnInlines:()=>V,collapseWhitespaceOnString:()=>D,isValid:()=>A,newlineBreakability:()=>M,shouldBreak:()=>W});var o={};t.r(o),t.d(o,{CENTER:()=>$,JUSTIFY:()=>q,JUSTIFY_CENTER:()=>Z,JUSTIFY_LEFT:()=>J,JUSTIFY_RIGHT:()=>K,LEFT:()=>j,RIGHT:()=>Y,textAlign:()=>Q});const h=(e=>{var s={};return t.d(s,e),s})({BufferAttribute:()=>e.BufferAttribute,BufferGeometry:()=>e.BufferGeometry,CanvasTexture:()=>e.CanvasTexture,Color:()=>e.Color,EventDispatcher:()=>e.EventDispatcher,FileLoader:()=>e.FileLoader,LinearFilter:()=>e.LinearFilter,Mesh:()=>e.Mesh,Object3D:()=>e.Object3D,Plane:()=>e.Plane,PlaneBufferGeometry:()=>e.PlaneBufferGeometry,PlaneGeometry:()=>e.PlaneGeometry,ShaderMaterial:()=>e.ShaderMaterial,Texture:()=>e.Texture,TextureLoader:()=>e.TextureLoader,Vector2:()=>e.Vector2,Vector3:()=>e.Vector3}),c="row",l="row-reverse",d="column",u="column-reverse";function p(e,t,s,r){let a=s,i="getWidth",n="x",o="y";0===t.indexOf(d)&&(i="getHeight",n="y",o="x");for(let t=0;t<e.childrenBoxes.length;t++){const s=e.childrenBoxes[t],h=s.id,c=s[i](),l=s.margin||0;a+=l*r,e.childrenPos[h]={[n]:a+c/2*r,[o]:0},a+=r*(c+l)}}const w="start",C="center",f="end",g="stretch";function m(e,t){const s=e.getAlignItems();-1===y.indexOf(s)&&console.warn(`alignItems === '${s}' is not supported`);let r="getWidth",a="x";0===t.indexOf(c)&&(r="getHeight",a="y");const i=e[r]()/2-(e.padding||0);e.childrenBoxes.forEach((n=>{let o;switch(s){case f:case"right":case"bottom":o=0===t.indexOf(c)?-i+n[r]()/2+(n.margin||0):i-n[r]()/2-(n.margin||0);break;case w:case"left":case"top":o=0===t.indexOf(c)?i-n[r]()/2-(n.margin||0):-i+n[r]()/2+(n.margin||0)}e.childrenPos[n.id][a]=o||0}))}function _(e){-1!==b.indexOf(e)&&console.warn(`alignItems === '${e}' is deprecated and will be remove in 7.x.x. Fallback are 'start'|'end'`)}const y=[w,C,f,g,"top","right","bottom","left"],b=["top","right","bottom","left"],v="start",x="center",k="end",R="space-around",U="space-between",S="space-evenly";function B(e,t,s,r){const a=e.getJustifyContent();-1===F.indexOf(a)&&console.warn(`justifyContent === '${a}' is not supported`);const i=0===t.indexOf("row")?"width":"height",n=e.getChildrenSideSum(i),o=("width"===i?e.getInnerWidth():e.getInnerHeight())-n,h=function(e,t){switch(e){case k:return t;case x:return t/2}return 0}(a,2*s-n*Math.sign(s)),c=function(e,t,s,r){const a=Array(e.length).fill(0);if(t>0)switch(s){case U:if(e.length>1){const s=t/(e.length-1)*r;a[0]=0;for(let t=1;t<e.length;t++)a[t]=s*t}break;case S:if(e.length>1){const s=t/(e.length+1)*r;for(let t=0;t<e.length;t++)a[t]=s*(t+1)}break;case R:if(e.length>1){const s=t/e.length*r,i=s/2;a[0]=i;for(let t=1;t<e.length;t++)a[t]=i+s*t}}return a}(e.childrenBoxes,o,a,r),l=0===t.indexOf("row")?"x":"y";e.childrenBoxes.forEach(((t,s)=>{e.childrenPos[t.id][l]-=h-c[s]}))}const F=[v,x,k,R,U,S];function I(e){return class extends e{constructor(e){super(e),this.isBoxComponent=!0,this.childrenPos={}}getInnerWidth(){const e=this.getContentDirection();switch(e){case"row":case"row-reverse":return this.width-(2*this.padding||0)||this.getChildrenSideSum("width");case"column":case"column-reverse":return this.getHighestChildSizeOn("width");default:console.error(`Invalid contentDirection : ${e}`)}}getInnerHeight(){const e=this.getContentDirection();switch(e){case"row":case"row-reverse":return this.getHighestChildSizeOn("height");case"column":case"column-reverse":return this.height-(2*this.padding||0)||this.getChildrenSideSum("height");default:console.error(`Invalid contentDirection : ${e}`)}}getChildrenSideSum(e){return this.childrenBoxes.reduce(((t,s)=>{const r=2*s.margin||0;return t+("width"===e?s.getWidth()+r:s.getHeight()+r)}),0)}setPosFromParentRecords(){this.parentUI&&this.parentUI.childrenPos[this.id]&&(this.position.x=this.parentUI.childrenPos[this.id].x,this.position.y=this.parentUI.childrenPos[this.id].y)}computeChildrenPosition(){if(this.children.length>0){const e=this.getContentDirection();let t;switch(e){case c:t=-this.getInnerWidth()/2;break;case l:t=this.getInnerWidth()/2;break;case d:t=this.getInnerHeight()/2;break;case u:t=-this.getInnerHeight()/2}const s=-Math.sign(t);p(this,e,t,s),B(this,e,t,s),m(this,e)}}getHighestChildSizeOn(e){return this.childrenBoxes.reduce(((t,s)=>{const r=s.margin||0,a="width"===e?s.getWidth()+2*r:s.getHeight()+2*r;return Math.max(t,a)}),0)}getWidth(){return this.parentUI&&"stretch"===this.parentUI.getAlignItems()&&-1!==this.parentUI.getContentDirection().indexOf("column")?this.parentUI.getWidth()-(2*this.parentUI.padding||0):this.width||this.getInnerWidth()+(2*this.padding||0)}getHeight(){return this.parentUI&&"stretch"===this.parentUI.getAlignItems()&&-1!==this.parentUI.getContentDirection().indexOf("row")?this.parentUI.getHeight()-(2*this.parentUI.padding||0):this.height||this.getInnerHeight()+(2*this.padding||0)}}}const T={"\t":"\t","\n":"\n","\r":"\r"," ":" "},P="normal",O="nowrap",E="pre",z="pre-line",H="pre-wrap",L=[P,O,E,z,H];function A(e){return-1===L.indexOf(e)&&(console.warn(`Whitespace::isValid() The provided white-space value ('${e}') is not valid !`),console.warn(`    - Automatic fallback to ('${z}')`),e=z),e}const D=function(e,t){switch(t){case O:case P:e=e.replace(/\n/g," ");case z:e=e.replace(/[ ]{2,}/g," ")}return e},M=function(e){switch(e){case E:case H:case z:return"mandatory"}return null},W=function(e,t,s,r){const a=e[t];switch(r.WHITESPACE){case P:case z:case H:if("mandatory"===a.lineBreak)return!0;if(s+a.xadvance+a.xoffset+a.kerning>r.INNER_WIDTH)return!0;const i=X(e,t,r);return function(e,t,s,r){return!(!e||!e.char)&&(!(t+s<r.INNER_WIDTH)&&r.BREAKON.indexOf(e.char)>-1)}(e[t-1],s,i,r);case E:return"mandatory"===a.lineBreak;default:return!1}},V=function(e,t){const s=e[0],r=e[e.length-1];switch(t){case H:s.char&&"\n"===s.char&&e.length>1&&N([s],e[1]),r.char&&"\n"===r.char&&e.length>1&&G([r],e[e.length-2]);break;case z:case O:case P:let a,i=[];for(let t=0;t<e.length;t++){const s=e[t];if(!(s.char&&T[s.char]&&e.length>t))break;i.push(s),a=e[t+1]}N(i,a),i=[],a=null;for(let t=e.length-1;t>0;t--){const s=e[t];if(!(s.char&&T[s.char]&&t>0))break;i.push(s),a=e[t-1]}G(i,a);break;case E:break;default:return console.warn(`whiteSpace: '${t}' is not valid`),0}return s.offsetX};function G(e,t){if(t)for(let s=0;s<e.length;s++){const r=e[s];r.fontFactor=0,r.offsetX=t.offsetX+t.width}}function N(e,t){if(t)for(let s=0;s<e.length;s++){const r=e[s];r.fontFactor=0,r.offsetX=t.offsetX}}function X(e,t,s,r){if(r=r||0,!e[t])return r;const a=e[t];return a.lineBreak?r+a.xadvance:X(e,t+1,s,r+a.xadvance+a.xoffset+a.kerning+s.LETTERSPACING)}const j="left",Y="right",$="center",q="justify",J="justify-left",K="justify-right",Z="justify-center";function Q(e,t,s){for(let r=0;r<e.length;r++){const a=e[r],i=ee(a,t,s,r===e.length-1);for(let e=0;e<a.length;e++)a[e].offsetX+=i}if(0===t.indexOf(q))for(let r=0;r<e.length;r++){const a=e[r];if(-1!==t.indexOf("-")&&r===e.length-1)return;const i=s-a.width;if(i<=0)return;let n=0;for(let e=1;e<a.length-1;e++)n+=" "===a[e].char?1:0;const o=i/n;let h=1;t===K&&(a.reverse(),h=-1);let c=0;for(let e=1;e<=a.length-1;e++){const t=a[e];t.offsetX+=c*h,c+=" "===t.char?o:0}t===K&&a.reverse()}}const ee=(e,t,s,r)=>{switch(t){case J:case q:case j:return-s/2;case K:case Y:return-e.width+s/2;case $:return-e.width/2;case Z:return r?-e.width/2:-s/2;default:console.warn(`textAlign: '${t}' is not valid`)}};function te(e){return class extends e{computeInlinesPosition(){const e=this.getWidth()-(2*this.padding||0),t=this.getHeight()-(2*this.padding||0),s=this.getJustifyContent(),r=this.getTextAlign(),a=this.getInterLine(),i=this.computeLines();let n=i.reduce(((e,t,s,r)=>{const i=t.lineHeight-t.lineBase;return t.forEach((s=>{s.offsetY=e-t.lineHeight+i+r[0].lineHeight})),e-t.lineHeight-a}),0)+a;n=Math.abs(n);const o=(()=>{switch(s){case"start":return t/2-i[0].lineHeight;case"end":return n-i[0].lineHeight-t/2+(i[i.length-1].lineHeight-i[i.length-1].lineHeight);case"center":return n/2-i[0].lineHeight;default:console.warn(`justifyContent: '${s}' is not valid`)}})();i.forEach((e=>{e.forEach((e=>{e.offsetY+=o}))})),Q(i,r,e),this.lines=i}calculateBestFit(e){if(0!==this.childrenInlines.length)switch(e){case"grow":this.calculateGrowFit();break;case"shrink":this.calculateShrinkFit();break;case"auto":this.calculateAutoFit()}}calculateGrowFit(){const e=this.getHeight()-(2*this.padding||0);let t=1;const s=this.childrenInlines.find((e=>e.isText));let r,a=1,i=2,n=s._fitFontSize?s._fitFontSize/s.getFontSize():1;do{if(r=this.calculateHeight(n),r>e){if(n<=a){this.childrenInlines.forEach((e=>{e.isInlineBlock||(e._fitFontSize=e.getFontSize())}));break}i=n,n-=(i-a)/2}else{if(Math.abs(e-r)<.075)break;Math.abs(n-i)<5e-10&&(i*=2),a=n,n+=(i-a)/2}}while(++t<=10)}calculateShrinkFit(){const e=this.getHeight()-(2*this.padding||0);let t=1;const s=this.childrenInlines.find((e=>e.isText));let r,a=0,i=1,n=s._fitFontSize?s._fitFontSize/s.getFontSize():1;do{if(r=this.calculateHeight(n),r>e)i=n,n-=(i-a)/2;else{if(n>=i){this.childrenInlines.forEach((e=>{e.isInlineBlock||(e._fitFontSize=e.getFontSize())}));break}if(Math.abs(e-r)<.075)break;a=n,n+=(i-a)/2}}while(++t<=10)}calculateAutoFit(){const e=this.getHeight()-(2*this.padding||0);let t=1;const s=this.childrenInlines.find((e=>e.isText));let r,a=0,i=2,n=s._fitFontSize?s._fitFontSize/s.getFontSize():1;do{if(r=this.calculateHeight(n),r>e)i=n,n-=(i-a)/2;else{if(Math.abs(e-r)<.075)break;Math.abs(n-i)<5e-10&&(i*=2),a=n,n+=(i-a)/2}}while(++t<=10)}computeLines(){const e=this.getWidth()-(2*this.padding||0),t=[[]];return this.childrenInlines.reduce(((s,r)=>{if(!r.inlines)return;const a=r._fitFontSize||r.getFontSize(),i=r.isText?r.getLetterSpacing()*a:0,n=r.getWhiteSpace(),o=r.getBreakOn(),h={WHITESPACE:n,LETTERSPACING:i,BREAKON:o,INNER_WIDTH:e};return r.inlines.reduce(((e,s,r,a)=>W(a,r,e,h)?(t.push([s]),s.offsetX=s.xoffset,0===s.width?0:s.xadvance+i):(t[t.length-1].push(s),s.offsetX=e+s.xoffset+s.kerning,e+s.xadvance+s.kerning+i)),s)}),0),t.forEach((e=>{e.lineHeight=e.reduce(((e,t)=>{const s=void 0!==t.lineHeight?t.lineHeight:t.height;return Math.max(e,s)}),0),e.lineBase=e.reduce(((e,t)=>{const s=void 0!==t.lineBase?t.lineBase:t.height;return Math.max(e,s)}),0),e.width=0;if(e[0]){const t=this.getWhiteSpace(),s=V(e,t);e.forEach((e=>{e.offsetX-=s})),e.width=this.computeLineWidth(e)}})),t}calculateHeight(e){this.childrenInlines.forEach((t=>{t.isInlineBlock||(t._fitFontSize=t.getFontSize()*e,t.calculateInlines(t._fitFontSize))}));const t=this.computeLines(),s=this.getInterLine(),r=t.reduce(((e,t)=>e-t.lineHeight-s),0)+s;return Math.abs(r)}computeLineWidth(e){const t=e[0],s=e[e.length-1];return s.offsetX+s.width+t.offsetX}}}class se extends h.EventDispatcher{constructor(e,t){super(),this._isReady=!1,this._weight=e,this._style=t,this._size=42,this._lineHeight=42,this._lineBase=42,this._font=null}get typographic(){return this._font}get isReady(){return this._isReady}get weight(){return this._weight}get style(){return this._style}get texture(){return this._texture}get id(){return`${this._name}(w:${this.weight},s:${this.style})`}getTypographyCharacter(e){let t=this._chars[e];if(t)return t;if(e.match(/\s/))return this._chars[" "];const s=ue.missingCharacter(this,e);if(s&&(t=this._chars[s],t))return t;throw Error(`FontVariant('${this.id}')::getTypographyCharacter() - character('${e}') and/or fallback character were not found in provided msdf charset.`)}getGeometryCharacter(e){throw new Error(`FontVariant(${typeof this})::getGeometryCharacter() is abstract and should therefore be overridden.`)}getKerningAmount(e){return this._kernings[e]?this._kernings[e]:0}adjustTypographyCharacters(e){for(const t in e){const s=this.getTypographyCharacter(t),r=e[t];for(const a in r)s["_"+a]=e[t][a]}}_checkReadiness(){var e;this._readyCondition()&&((e=this)._isReady=!0,e.dispatchEvent(re))}_readyCondition(){throw new Error(`FontVariant(${typeof this})::_readyCondition() is abstract and should therefore be overridden.`)}}const re={type:"ready"};class ae extends class{constructor(){this._size=42,this._lineHeight=42,this._lineBase=38,this._name="-",this._charset=""}get size(){return this._size}get lineHeight(){return this._lineHeight}get lineBase(){return this._lineBase}get name(){return this._name}get charset(){return this._charset}}{constructor(e){super(),this._size=e.info.size,this._lineHeight=e.common.lineHeight,this._lineBase=e.common.base,this._name=e.info.face,this._textureWidth=e.common.scaleW,this._textureHeight=e.common.scaleH,this._charset=e.chars.map((e=>e.char)).join("")}get textureWidth(){return this._textureWidth}get textureHeight(){return this._textureHeight}}class ie extends class{constructor(e){this._typographic=e,this._fontFactor=1,this._lineBreak=null,this._fontSize=0,this._kerning=0,this._offsetX=0,this._offsetY=0}get typographic(){return this._typographic}resetOffsets(){this._offsetX=this._offsetY=0}get xadvance(){return this._typographic.xadvance*this._fontFactor}get xoffset(){return this._typographic.xoffset*this._fontFactor}get yoffset(){return this._typographic.yoffset*this._fontFactor}get width(){return this._typographic.width*this._fontFactor}get height(){return this._typographic.height*this._fontFactor}get char(){return this._typographic.char}set lineBreak(e){this._lineBreak=e}get lineBreak(){return this._lineBreak}get anchor(){const e=this._typographic.font.lineHeight,t=this._typographic.font.lineBase;return(this._typographic.yoffset+this._typographic.height-t)*this._fontSize/e}get kerning(){return this._kerning*this._fontFactor}set kerning(e){this._kerning=e}get fontSize(){return this._fontSize}set fontSize(e){this._fontSize=e}get lineHeight(){return this._typographic.font.lineHeight*this._fontFactor}get offsetX(){return this._offsetX}set offsetX(e){this._offsetX=e}get offsetY(){return this._offsetY}set offsetY(e){this._offsetY=e}get lineBase(){return this._typographic.font.lineBase*this._fontFactor}set fontFactor(e){this._fontFactor=e}}{constructor(e){super(e)}get uv(){return this.typographic.uv}}class ne extends class{constructor(e){this._char="",this._width=this._heigth=this._xadvance=1,this._xoffset=this._yoffset=0,this._font=e}get font(){return this._font}get char(){return this._char}get width(){return this._width}get height(){return this._heigth}get xadvance(){return this._xadvance}get xoffset(){return this._xoffset}get yoffset(){return this._yoffset}set yoffset(e){this._yoffset=e}asInlineCharacter(){throw new Error("Abstract... Need to be implemented")}}{constructor(e,t){super(e),this._char=t.char,this._width=t.width,this._heigth=t.height,this._xadvance=t.xadvance?t.xadvance:this._width,this._xoffset=t.xoffset?t.xoffset:0,this._yoffset=t.yoffset?t.yoffset:0,this._uv=null,isNaN(t.x)||(this._uv={left:t.x/e.textureWidth,right:(t.x+t.width)/e.textureWidth,top:1-(t.y+t.height)/e.textureHeight,bottom:1-t.y/e.textureHeight})}get uv(){return this._uv}asInlineCharacter(){return new ie(this)}}class oe extends h.PlaneBufferGeometry{constructor(e){super(e.width,e.height),e.uv?(this.mapUVs(e),this.transformGeometry(e)):(this.nullifyUVs(),this.scale(0,0,1),this.translate(0,e.fontSize/2,0))}mapUVs(e){const t=this.attributes.uv;for(let s=0;s<t.count;s++){let r=t.getX(s),a=t.getY(s);[r,a]=(()=>{switch(s){case 0:return[e.uv.left,e.uv.bottom];case 1:return[e.uv.right,e.uv.bottom];case 2:return[e.uv.left,e.uv.top];case 3:return[e.uv.right,e.uv.top]}})(),t.setXY(s,r,a)}}nullifyUVs(){const e=this.attributes.uv;for(let t=0;t<e.count;t++)e.setXY(t,0,0)}transformGeometry(e){this.translate(e.width/2,e.height/2-e.anchor,0)}}class he extends se{constructor(e,t,s,r){var a,i;super(e,t),s.pages?this._buildData(s):(a=this,i=s,(new h.FileLoader).setResponseType("json").load(i,(e=>{a._buildData(e),a._checkReadiness()}))),r instanceof h.Texture?this._buildTexture(r):function(e,t){(new h.TextureLoader).load(t,(t=>{e._buildTexture(t),e._checkReadiness()}))}(this,r),this._checkReadiness()}get texture(){return this._texture}_buildData(e){this._font=new ae(e),this._kernings=this._buildKerningPairs(e),this._chars=this._buildCharacters(e),this._chars[" "]=this._buildCharacterWhite(e),this._size=e.info.size,this._lineHeight=e.common.lineHeight,this._lineBase=e.common.base}_buildTexture(e){this._texture=e,e.generateMipmaps=!1,e.minFilter=h.LinearFilter,e.magFilter=h.LinearFilter,e.needsUpdate=!0}getGeometryCharacter(e){return new oe(e)}_readyCondition(){return this._chars&&this._texture}_buildKerningPairs(e){const t={};for(let s=0;s<e.kernings.length;s++){const r=e.kernings[s];if(0===r.amount)continue;t[String.fromCharCode(r.first,r.second)]=r.amount}return t}_buildCharacters(e){const t={};for(let s=0;s<e.chars.length;s++){const r=e.chars[s];t[r.char]=new ne(this._font,r)}return t}_buildCharacterWhite(e){return new ne(this._font,{char:" ",width:e.info.size/3,height:.7*e.info.size})}}class ce extends h.EventDispatcher{constructor(e){super(),this._name=e,this._variants=[],this._isReady=!1}get isReady(){return this._isReady}addVariant(e,t,s,r,a=!1){if(a||!this.getVariant(e,t)){this._isReady=!1;const a=new he(e,t,s,r);this._variants.push(a),a.isReady?this._checkReadiness():a.addEventListener("ready",this._checkReadiness)}else console.warn(`FontFamily('${this._name}')::addVariant() - Variant(${e}, ${t}) already exists.`);return this}addCustomImplementationVariant(e,t=!1){return t||!this.getVariant(e.weight,e.style)?(this._isReady=!1,this._variants.push(e),e.isReady?this._checkReadiness():e.addEventListener("ready",this._checkReadiness)):console.warn(`FontFamily('${this._name}')::addCustomImplementationVariant() - Variant(${e.weight}, ${e.style}) already exists.`),this}getVariant(e,t){return this._variants.find((s=>s.weight===e&&s.style===t))}get name(){return this._name}_checkReadiness=()=>{var e;this._variants.every((e=>e.isReady))&&((e=this)._isReady=!0,e.dispatchEvent(le))}}const le={type:"ready"};const de={};const ue={addFontFamily:function(e){return de[e]&&console.error(`FontLibrary::addFontFamily - Font('${e}') is already registered`),de[e]=new ce(e),de[e]},getFontFamily:function(e){return de[e]},prepare:function(e){const t=[...arguments];t.forEach((e=>{if(!(e instanceof ce))throw new Error(`FontLibrary::prepare() - One of the provided parameter is not a FontFamily. Instead ${typeof e} given.`)}));const s=function(){return t.every((e=>e.isReady))};return new Promise(((e,r)=>{if(s())e();else for(let r=0;r<t.length;r++){const a=t[r];a.isReady||a.addEventListener("ready",(()=>{s()&&e()}))}}))},setMissingCharacterHandler:function(e){pe=e},missingCharacter:function(e,t){return pe(e,t)}};let pe=function(e,t){return console.error(`The character '${t}' is not included in the font characters set.`)," "};class we{static requestUpdate(e,t,s,r){e.traverse((e=>{e.isUI&&(this.requestedUpdates[e.id]?(t&&(this.requestedUpdates[e.id].updateParsing=!0),s&&(this.requestedUpdates[e.id].updateLayout=!0),r&&(this.requestedUpdates[e.id].updateInner=!0)):this.requestedUpdates[e.id]={updateParsing:t,updateLayout:s,updateInner:r,needCallback:t||s||r})}))}static register(e){this.components.includes(e)||this.components.push(e)}static disposeOf(e){const t=this.components.indexOf(e);t>-1&&this.components.splice(t,1)}static update(){if(Object.keys(this.requestedUpdates).length>0){const e=this.components.filter((e=>!e.parentUI));e.forEach((e=>this.traverseParsing(e))),e.forEach((e=>this.traverseUpdates(e)))}}static traverseParsing(e){const t=this.requestedUpdates[e.id];t&&t.updateParsing&&(e.parseParams(),t.updateParsing=!1),e.childrenUIs.forEach((e=>this.traverseParsing(e)))}static traverseUpdates(e){const t=this.requestedUpdates[e.id];delete this.requestedUpdates[e.id],t&&t.updateLayout&&(t.updateLayout=!1,e.updateLayout()),t&&t.updateInner&&(t.updateInner=!1,e.updateInner()),e.childrenUIs.forEach((e=>{this.traverseUpdates(e)})),t&&t.needCallback&&e.onAfterUpdate()}}we.components=[],we.requestedUpdates={};const Ce={container:null,fontFamily:null,fontSize:.05,fontKerning:"normal",fontStyle:"normal",fontWeight:"400",bestFit:"none",offset:.01,interLine:.01,breakOn:"- ,.:?!\n",whiteSpace:z,contentDirection:d,alignItems:C,justifyContent:v,fontTexture:null,textAlign:$,fontColor:new h.Color(16777215),fontOpacity:1,fontPXRange:4,fontSupersampling:!0,borderRadius:.01,borderWidth:0,borderColor:new h.Color("black"),borderOpacity:1,backgroundSize:"cover",backgroundColor:new h.Color(2236962),backgroundWhiteColor:new h.Color(16777215),backgroundOpacity:.8,backgroundOpaqueOpacity:1,backgroundTexture:function(){if(!fe){const e=document.createElement("canvas").getContext("2d");e.canvas.width=1,e.canvas.height=1,e.fillStyle="#ffffff",e.fillRect(0,0,1,1),fe=new h.CanvasTexture(e.canvas),fe.isDefault=!0}return fe},hiddenOverflow:!1,letterSpacing:0};let fe;function ge(e){return class extends e{constructor(e){super(e),this.states={},this.currentState=void 0,this.isUI=!0,this.autoLayout=!0,this.childrenUIs=[],this.childrenBoxes=[],this.childrenTexts=[],this.childrenInlines=[],this.parentUI=null,this.addEventListener("added",this._rebuildParentUI),this.addEventListener("removed",this._rebuildParentUI)}getClippingPlanes(){const e=[];if(this.parentUI){if(this.isBlock&&this.parentUI.getHiddenOverflow()){const t=this.parentUI.getHeight()/2-(this.parentUI.padding||0),s=this.parentUI.getWidth()/2-(this.parentUI.padding||0),r=[new h.Plane(new h.Vector3(0,1,0),t),new h.Plane(new h.Vector3(0,-1,0),t),new h.Plane(new h.Vector3(1,0,0),s),new h.Plane(new h.Vector3(-1,0,0),s)];r.forEach((e=>{e.applyMatrix4(this.parent.matrixWorld)})),e.push(...r)}this.parentUI.parentUI&&e.push(...this.parentUI.getClippingPlanes())}return e}getHighestParent(){return this.parentUI?this.parent.getHighestParent():this}_getProperty(e){return void 0===this[e]&&this.parentUI?this.parent._getProperty(e):void 0!==this[e]?this[e]:Ce[e]}getFontSize(){return this._getProperty("fontSize")}getFontKerning(){return this._getProperty("fontKerning")}getFontStyle(){return this._getProperty("fontStyle")}getFontWeight(){return this._getProperty("fontWeight")}getLetterSpacing(){return this._getProperty("letterSpacing")}getFontTexture(){return this._font&&this._font.isReady?this._font.texture:this._getProperty("fontTexture")}getFontFamily(){return this._getProperty("fontFamily")}getBreakOn(){return this._getProperty("breakOn")}getWhiteSpace(){return this._getProperty("whiteSpace")}getTextAlign(){return this._getProperty("textAlign")}getFontColor(){return this._getProperty("fontColor")}getFontSupersampling(){return this._getProperty("fontSupersampling")}getFontOpacity(){return this._getProperty("fontOpacity")}getFontPXRange(){return this._getProperty("fontPXRange")}getBorderRadius(){return this._getProperty("borderRadius")}getBorderWidth(){return this._getProperty("borderWidth")}getBorderColor(){return this._getProperty("borderColor")}getBorderOpacity(){return this._getProperty("borderOpacity")}getContainer(){return!this.threeOBJ&&this.parent?this.parent.getContainer():this.threeOBJ?this:Ce.container}getParentsNumber(e){return e=e||0,this.parentUI?this.parentUI.getParentsNumber(e+1):e}getBackgroundOpacity(){return this.backgroundOpacity||0===this.backgroundOpacity?this.backgroundOpacity:Ce.backgroundOpacity}getBackgroundColor(){return this.backgroundColor||Ce.backgroundColor}getBackgroundTexture(){return this.backgroundTexture||Ce.backgroundTexture()}getAlignContent(){return this.alignContent||Ce.alignContent}getAlignItems(){return this.alignItems||Ce.alignItems}getContentDirection(){return this.contentDirection||Ce.contentDirection}getJustifyContent(){return this.justifyContent||Ce.justifyContent}getInterLine(){return void 0===this.interLine?Ce.interLine:this.interLine}getOffset(){return void 0===this.offset?Ce.offset:this.offset}getBackgroundSize(){return void 0===this.backgroundSize?Ce.backgroundSize:this.backgroundSize}getHiddenOverflow(){return void 0===this.hiddenOverflow?Ce.hiddenOverflow:this.hiddenOverflow}getBestFit(){return void 0===this.bestFit?Ce.bestFit:this.bestFit}_rebuildChildrenLists(){this.childrenUIs=this.children.filter((e=>e.isUI)),this.childrenBoxes=this.children.filter((e=>e.isBoxComponent)),this.childrenInlines=this.children.filter((e=>e.isInline)),this.childrenTexts=this.children.filter((e=>e.isText))}_rebuildParentUI=()=>{this.parent&&this.parent.isUI?this.parentUI=this.parent:this.parentUI=null};add(){for(const e of Object.keys(arguments))arguments[e].isInline&&this.update(null,!0);const e=super.add(...arguments);return this._rebuildChildrenLists(),e}remove(){for(const e of Object.keys(arguments))arguments[e].isInline&&this.update(null,!0);const e=super.remove(...arguments);return this._rebuildChildrenLists(),e}update(e,t,s){we.requestUpdate(this,e,t,s)}onAfterUpdate(){}set(e){let t,s,r;if(we.register(this),e&&JSON.stringify(e)!==JSON.stringify({})){e.alignContent&&(e.alignItems=e.alignContent,e.textAlign||(e.textAlign=e.alignContent),console.warn("`alignContent` property has been deprecated, please rely on `alignItems` and `textAlign` instead."),delete e.alignContent),e.alignItems&&_(e.alignItems);for(const a of Object.keys(e))if(this[a]!=e[a])switch(a){case"content":case"fontWeight":case"fontStyle":case"whiteSpace":this.isText&&(t=!0),s=!0,this[a]=e[a];break;case"fontSize":case"fontKerning":case"breakOn":case"margin":case"contentDirection":case"justifyContent":case"alignContent":case"alignItems":case"textAlign":case"textType":s=!0,this[a]=e[a];break;case"bestFit":this.isBlock&&(t=!0,s=!0),this[a]=e[a];break;case"width":case"height":case"padding":(this.isInlineBlock||this.isBlock&&"none"!=this.getBestFit())&&(t=!0),s=!0,this[a]=e[a];break;case"letterSpacing":case"interLine":this.isBlock&&"none"!=this.getBestFit()&&(t=!0),s=!0,this[a]=e[a];break;case"fontColor":case"fontOpacity":case"fontSupersampling":case"offset":case"backgroundColor":case"backgroundOpacity":case"backgroundTexture":case"backgroundSize":case"borderRadius":case"borderWidth":case"borderColor":case"borderOpacity":r=!0,this[a]=e[a];break;case"hiddenOverflow":this[a]=e[a]}if(e.fontFamily instanceof ce)this.fontFamily=e.fontFamily,this.font=e.fontFamily.getVariant("400","normal");else if("string"!=typeof e.fontFamily||e.fontTexture){if(e.fontFamily&&e.fontTexture){const t=e.fontFamily.pages?e.fontFamily.info.face:e.fontFamily;let s=ue.getFontFamily(t);s||(s=ue.addFontFamily(t).addVariant("400","normal",e.fontFamily,e.fontTexture)),this.fontFamily=s,this.font=s.getVariant("400","normal")}}else{const t=ue.getFontFamily(e.fontFamily);t&&(this.fontFamily=t,this.font=t.getVariant("400","normal"))}this.parentUI&&"none"!=this.parentUI.getBestFit()&&this.parentUI.update(!0,!0,!1),this.update(t,s,r),s&&this.getHighestParent().update(!1,!0,!1)}}setupState(e){this.states[e.state]={attributes:e.attributes,onSet:e.onSet}}setState(e){const t=this.states[e];t?e!==this.currentState&&(this.currentState=e,t.onSet&&t.onSet(),t.attributes&&this.set(t.attributes)):console.warn(`state "${e}" does not exist within this component`)}clear(){this.traverse((e=>{we.disposeOf(e),e.material&&e.material.dispose(),e.geometry&&e.geometry.dispose()}))}}}function me(e){return class extends e{constructor(e){super(e),this.textUniforms={u_texture:{value:null},u_color:{value:null},u_opacity:{value:null},u_pxRange:{value:null},u_useRGSS:{value:null}},this.backgroundUniforms={u_texture:{value:null},u_color:{value:null},u_opacity:{value:null},u_backgroundMapping:{value:null},u_borderWidth:{value:null},u_borderColor:{value:null},u_borderRadiusTopLeft:{value:null},u_borderRadiusTopRight:{value:null},u_borderRadiusBottomRight:{value:null},u_borderRadiusBottomLeft:{value:null},u_borderOpacity:{value:null},u_size:{value:new h.Vector2(1,1)},u_tSize:{value:new h.Vector2(1,1)}}}updateBackgroundMaterial(){this.backgroundUniforms.u_texture.value=this.getBackgroundTexture(),this.backgroundUniforms.u_tSize.value.set(this.backgroundUniforms.u_texture.value.image.width,this.backgroundUniforms.u_texture.value.image.height),this.size&&this.backgroundUniforms.u_size.value.copy(this.size),this.backgroundUniforms.u_texture.value.isDefault?(this.backgroundUniforms.u_color.value=this.getBackgroundColor(),this.backgroundUniforms.u_opacity.value=this.getBackgroundOpacity()):(this.backgroundUniforms.u_color.value=this.backgroundColor||Ce.backgroundWhiteColor,this.backgroundUniforms.u_opacity.value=this.backgroundOpacity||0===this.backgroundOpacity?this.backgroundOpacity:Ce.backgroundOpaqueOpacity),this.backgroundUniforms.u_backgroundMapping.value=(()=>{switch(this.getBackgroundSize()){case"stretch":return 0;case"contain":return 1;case"cover":return 2}})();const e=this.getBorderRadius();this.backgroundUniforms.u_borderWidth.value=this.getBorderWidth(),this.backgroundUniforms.u_borderColor.value=this.getBorderColor(),this.backgroundUniforms.u_borderOpacity.value=this.getBorderOpacity(),Array.isArray(e)?(this.backgroundUniforms.u_borderRadiusTopLeft.value=e[0],this.backgroundUniforms.u_borderRadiusTopRight.value=e[1],this.backgroundUniforms.u_borderRadiusBottomRight.value=e[2],this.backgroundUniforms.u_borderRadiusBottomLeft.value=e[3]):(this.backgroundUniforms.u_borderRadiusTopLeft.value=e,this.backgroundUniforms.u_borderRadiusTopRight.value=e,this.backgroundUniforms.u_borderRadiusBottomRight.value=e,this.backgroundUniforms.u_borderRadiusBottomLeft.value=e)}updateTextMaterial(){this.textUniforms.u_texture.value=this.getFontTexture(),this.textUniforms.u_color.value=this.getFontColor(),this.textUniforms.u_opacity.value=this.getFontOpacity(),this.textUniforms.u_pxRange.value=this.getFontPXRange(),this.textUniforms.u_useRGSS.value=this.getFontSupersampling()}getBackgroundMaterial(){return this.backgroundMaterial&&this.backgroundUniforms||(this.backgroundMaterial=this._makeBackgroundMaterial()),this.backgroundMaterial}getFontMaterial(){return this.fontMaterial&&this.textUniforms||(this.fontMaterial=this._makeTextMaterial()),this.fontMaterial}_makeTextMaterial(){return new h.ShaderMaterial({uniforms:this.textUniforms,transparent:!0,clipping:!0,vertexShader:_e,fragmentShader:ye,extensions:{derivatives:!0}})}_makeBackgroundMaterial(){return new h.ShaderMaterial({uniforms:this.backgroundUniforms,transparent:!0,clipping:!0,vertexShader:be,fragmentShader:ve,extensions:{derivatives:!0}})}updateClippingPlanes(e){const t=void 0!==e?e:this.getClippingPlanes();JSON.stringify(t)!==JSON.stringify(this.clippingPlanes)&&(this.clippingPlanes=t,this.fontMaterial&&(this.fontMaterial.clippingPlanes=this.clippingPlanes),this.backgroundMaterial&&(this.backgroundMaterial.clippingPlanes=this.clippingPlanes))}}}const _e="\nvarying vec2 vUv;\n\n#include <clipping_planes_pars_vertex>\n\nvoid main() {\n\n\tvUv = uv;\n\tvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\n\tgl_Position = projectionMatrix * mvPosition;\n\tgl_Position.z -= 0.00001;\n\n\t#include <clipping_planes_vertex>\n\n}\n",ye="\n\nuniform sampler2D u_texture;\nuniform vec3 u_color;\nuniform float u_opacity;\nuniform float u_pxRange;\nuniform bool u_useRGSS;\n\nvarying vec2 vUv;\n\n#include <clipping_planes_pars_fragment>\n\n// functions from the original msdf repo:\n// https://github.com/Chlumsky/msdfgen#using-a-multi-channel-distance-field\n\nfloat median(float r, float g, float b) {\n\treturn max(min(r, g), min(max(r, g), b));\n}\n\nfloat screenPxRange() {\n\tvec2 unitRange = vec2(u_pxRange)/vec2(textureSize(u_texture, 0));\n\tvec2 screenTexSize = vec2(1.0)/fwidth(vUv);\n\treturn max(0.5*dot(unitRange, screenTexSize), 1.0);\n}\n\nfloat tap(vec2 offsetUV) {\n\tvec3 msd = texture( u_texture, offsetUV ).rgb;\n\tfloat sd = median(msd.r, msd.g, msd.b);\n\tfloat screenPxDistance = screenPxRange() * (sd - 0.5);\n\tfloat alpha = clamp(screenPxDistance + 0.5, 0.0, 1.0);\n\treturn alpha;\n}\n\nvoid main() {\n\n\tfloat alpha;\n\n\tif ( u_useRGSS ) {\n\n\t\t// shader-based supersampling based on https://bgolus.medium.com/sharper-mipmapping-using-shader-based-supersampling-ed7aadb47bec\n\t\t// per pixel partial derivatives\n\t\tvec2 dx = dFdx(vUv);\n\t\tvec2 dy = dFdy(vUv);\n\n\t\t// rotated grid uv offsets\n\t\tvec2 uvOffsets = vec2(0.125, 0.375);\n\t\tvec2 offsetUV = vec2(0.0, 0.0);\n\n\t\t// supersampled using 2x2 rotated grid\n\t\talpha = 0.0;\n\t\toffsetUV.xy = vUv + uvOffsets.x * dx + uvOffsets.y * dy;\n\t\talpha += tap(offsetUV);\n\t\toffsetUV.xy = vUv - uvOffsets.x * dx - uvOffsets.y * dy;\n\t\talpha += tap(offsetUV);\n\t\toffsetUV.xy = vUv + uvOffsets.y * dx - uvOffsets.x * dy;\n\t\talpha += tap(offsetUV);\n\t\toffsetUV.xy = vUv - uvOffsets.y * dx + uvOffsets.x * dy;\n\t\talpha += tap(offsetUV);\n\t\talpha *= 0.25;\n\n\t} else {\n\n\t\talpha = tap( vUv );\n\n\t}\n\n\n\t// apply the opacity\n\talpha *= u_opacity;\n\n\t// this is useful to avoid z-fighting when quads overlap because of kerning\n\tif ( alpha < 0.02) discard;\n\n\n\tgl_FragColor = vec4( u_color, alpha );\n\n\t#include <clipping_planes_fragment>\n\n}\n",be="\nvarying vec2 vUv;\n\n#include <clipping_planes_pars_vertex>\n\nvoid main() {\n\n\tvUv = uv;\n\tvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\n\tgl_Position = projectionMatrix * mvPosition;\n\n\t#include <clipping_planes_vertex>\n\n}\n",ve="\n\nuniform sampler2D u_texture;\nuniform vec3 u_color;\nuniform float u_opacity;\n\nuniform float u_borderRadiusTopLeft;\nuniform float u_borderRadiusTopRight;\nuniform float u_borderRadiusBottomLeft;\nuniform float u_borderRadiusBottomRight;\nuniform float u_borderWidth;\nuniform vec3 u_borderColor;\nuniform float u_borderOpacity;\nuniform vec2 u_size;\nuniform vec2 u_tSize;\nuniform int u_backgroundMapping;\n\nvarying vec2 vUv;\n\n#include <clipping_planes_pars_fragment>\n\nfloat getEdgeDist() {\n\tvec2 ndc = vec2( vUv.x * 2.0 - 1.0, vUv.y * 2.0 - 1.0 );\n\tvec2 planeSpaceCoord = vec2( u_size.x * 0.5 * ndc.x, u_size.y * 0.5 * ndc.y );\n\tvec2 corner = u_size * 0.5;\n\tvec2 offsetCorner = corner - abs( planeSpaceCoord );\n\tfloat innerRadDist = min( offsetCorner.x, offsetCorner.y ) * -1.0;\n\tif (vUv.x < 0.5 && vUv.y >= 0.5) {\n\t\tfloat roundedDist = length( max( abs( planeSpaceCoord ) - u_size * 0.5 + u_borderRadiusTopLeft, 0.0 ) ) - u_borderRadiusTopLeft;\n\t\tfloat s = step( innerRadDist * -1.0, u_borderRadiusTopLeft );\n\t\treturn mix( innerRadDist, roundedDist, s );\n\t}\n\tif (vUv.x >= 0.5 && vUv.y >= 0.5) {\n\t\tfloat roundedDist = length( max( abs( planeSpaceCoord ) - u_size * 0.5 + u_borderRadiusTopRight, 0.0 ) ) - u_borderRadiusTopRight;\n\t\tfloat s = step( innerRadDist * -1.0, u_borderRadiusTopRight );\n\t\treturn mix( innerRadDist, roundedDist, s );\n\t}\n\tif (vUv.x >= 0.5 && vUv.y < 0.5) {\n\t\tfloat roundedDist = length( max( abs( planeSpaceCoord ) - u_size * 0.5 + u_borderRadiusBottomRight, 0.0 ) ) - u_borderRadiusBottomRight;\n\t\tfloat s = step( innerRadDist * -1.0, u_borderRadiusBottomRight );\n\t\treturn mix( innerRadDist, roundedDist, s );\n\t}\n\tif (vUv.x < 0.5 && vUv.y < 0.5) {\n\t\tfloat roundedDist = length( max( abs( planeSpaceCoord ) - u_size * 0.5 + u_borderRadiusBottomLeft, 0.0 ) ) - u_borderRadiusBottomLeft;\n\t\tfloat s = step( innerRadDist * -1.0, u_borderRadiusBottomLeft );\n\t\treturn mix( innerRadDist, roundedDist, s );\n\t}\n}\n\nvec4 sampleTexture() {\n\tfloat textureRatio = u_tSize.x / u_tSize.y;\n\tfloat panelRatio = u_size.x / u_size.y;\n\tvec2 uv = vUv;\n\tif ( u_backgroundMapping == 1 ) { // contain\n\t\tif ( textureRatio < panelRatio ) { // repeat on X\n\t\t\tfloat newX = uv.x * ( panelRatio / textureRatio );\n\t\t\tnewX += 0.5 - 0.5 * ( panelRatio / textureRatio );\n\t\t\tuv.x = newX;\n\t\t} else { // repeat on Y\n\t\t\tfloat newY = uv.y * ( textureRatio / panelRatio );\n\t\t\tnewY += 0.5 - 0.5 * ( textureRatio / panelRatio );\n\t\t\tuv.y = newY;\n\t\t}\n\t} else if ( u_backgroundMapping == 2 ) { // cover\n\t\tif ( textureRatio < panelRatio ) { // stretch on Y\n\t\t\tfloat newY = uv.y * ( textureRatio / panelRatio );\n\t\t\tnewY += 0.5 - 0.5 * ( textureRatio / panelRatio );\n\t\t\tuv.y = newY;\n\t\t} else { // stretch on X\n\t\t\tfloat newX = uv.x * ( panelRatio / textureRatio );\n\t\t\tnewX += 0.5 - 0.5 * ( panelRatio / textureRatio );\n\t\t\tuv.x = newX;\n\t\t}\n\t}\n\treturn texture2D( u_texture, uv ).rgba;\n}\n\nvoid main() {\n\n\tfloat edgeDist = getEdgeDist();\n\tfloat change = fwidth( edgeDist );\n\n\tvec4 textureSample = sampleTexture();\n\tvec3 blendedColor = textureSample.rgb * u_color;\n\n\tfloat alpha = smoothstep( change, 0.0, edgeDist );\n\tfloat blendedOpacity = u_opacity * textureSample.a * alpha;\n\n\tvec4 frameColor = vec4( blendedColor, blendedOpacity );\n\n\tif ( u_borderWidth <= 0.0 ) {\n\t\tgl_FragColor = frameColor;\n\t} else {\n\t\tvec4 borderColor = vec4( u_borderColor, u_borderOpacity * alpha );\n\t\tfloat stp = smoothstep( edgeDist + change, edgeDist, u_borderWidth * -1.0 );\n\t\tgl_FragColor = mix( frameColor, borderColor, stp );\n\t}\n\n\t#include <clipping_planes_fragment>\n}\n";class xe extends h.Mesh{constructor(e){super(new h.PlaneGeometry,e),this.castShadow=!0,this.receiveShadow=!0,this.name="MeshUI-Frame"}}let ke=null;function Re(...e){if(!ke)throw new Error("Cannot use mixins with Base null");let t=ke;ke=null;let s,r=e.length;for(;--r>=0;)s=e[r],t=s(t);return t}Re.withBase=e=>(ke=e,Re);class Ue extends(Re.withBase(h.Object3D)(I,te,me,ge)){constructor(e){super(e),this.isBlock=!0,this.size=new h.Vector2(1,1),this.frame=new xe(this.getBackgroundMaterial()),this.frame.onBeforeRender=()=>{this.updateClippingPlanes&&this.updateClippingPlanes()},this.add(this.frame),this.set(e)}parseParams(){const e=this.getBestFit();"none"!=e&&this.childrenTexts.length?this.calculateBestFit(e):this.childrenTexts.forEach((e=>{e._fitFontSize=void 0}))}updateLayout(){const e=this.getWidth(),t=this.getHeight();e&&t?(this.size.set(e,t),this.frame.scale.set(e,t,1),this.frame&&this.updateBackgroundMaterial(),this.frame.renderOrder=this.getParentsNumber(),this.autoLayout&&this.setPosFromParentRecords(),this.childrenInlines.length&&this.computeInlinesPosition(),this.computeChildrenPosition(),this.parentUI&&(this.position.z=this.getOffset())):console.warn("Block got no dimension from its parameters or from children parameters")}updateInner(){this.parentUI&&(this.position.z=this.getOffset()),this.frame&&this.updateBackgroundMaterial()}}function Se(e){return class extends e{constructor(e){super(e),this.isInline=!0}}}const Be=function e(t){t.children.forEach((s=>{s.children.length>0&&e(s),t.remove(s),we.disposeOf(s),s.material&&s.material.dispose(),s.geometry&&s.geometry.dispose()})),t.children=[]};function Fe(e){let t,s,r,a=0;for(let i=0;i<e.length;++i){const n=e[i];if(n.isInterleavedBufferAttribute)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. InterleavedBufferAttributes are not supported."),null;if(void 0===t&&(t=n.array.constructor),t!==n.array.constructor)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.array must be of consistent array types across matching attributes."),null;if(void 0===s&&(s=n.itemSize),s!==n.itemSize)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.itemSize must be consistent across matching attributes."),null;if(void 0===r&&(r=n.normalized),r!==n.normalized)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.normalized must be consistent across matching attributes."),null;a+=n.array.length}const i=new t(a);let n=0;for(let t=0;t<e.length;++t)i.set(e[t].array,n),n+=e[t].array.length;return new h.BufferAttribute(i,s,r)}class Ie extends(Re.withBase(h.Object3D)(Se,me,ge)){constructor(e){super(),this.isText=!0,this._textContent=null,this._textContentGlyphs=null,this._textContentInlines=null,this.set(e),this.addEventListener("added",this._acquireFont)}set font(e){this._font&&!this._font.isReady&&this._font.removeEventListener("ready",this._handleFontVariantReady),this._font=e,this._font.isReady?this._handleFontVariantReady():(this.inlines=null,this._font.addEventListener("ready",this._handleFontVariantReady))}_handleFontVariantReady=()=>{this.update(!0,!0,!1),this.getHighestParent().update(!1,!0,!1),this._font.removeEventListener("ready",this._handleFontVariantReady)};_acquireFont=()=>{if(!this._font){let e=this.getFontFamily();if(e)if(e instanceof ce)this.font=e.getVariant(this.getFontWeight(),this.getFontStyle());else{const t=e.pages?e.info.face:e;e=ue.getFontFamily(t),e&&(this.font=e.getVariant(this.getFontWeight(),this.getFontStyle()))}}};_onBeforeRender=()=>{this.updateClippingPlanes&&this.updateClippingPlanes()};get font(){return this._font}_buildContentKernings(){if("none"!==this.getFontKerning())for(let e=1;e<this._textContent.length;e++){const t=this._textContent[e-1]+this._textContent[e];this._textContentInlines[e].kerning=this._font.getKerningAmount(t)}}parseParams(){this._acquireFont(),this.content&&0!==this.content.length&&this._font&&this._font.isReady&&(this._textContent=D(this.content,this.getWhiteSpace()),this._textContentGlyphs=this._textContent.split("").map((e=>this._font.getTypographyCharacter(e))),this._textContentInlines=this._textContentGlyphs.map((e=>e.asInlineCharacter())),this.inlines=this._textContentInlines,this.calculateInlines(this._fitFontSize||this.getFontSize()))}updateLayout(){if(Be(this),this.inlines){const e=function(e,t=!1){const s=null!==e[0].index,r=new Set(Object.keys(e[0].attributes)),a=new Set(Object.keys(e[0].morphAttributes)),i={},n={},o=e[0].morphTargetsRelative,c=new h.BufferGeometry;let l=0;for(let h=0;h<e.length;++h){const d=e[h];let u=0;if(s!==(null!==d.index))return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+h+". All geometries must have compatible attributes; make sure index attribute exists among all geometries, or in none of them."),null;for(const e in d.attributes){if(!r.has(e))return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+h+'. All geometries must have compatible attributes; make sure "'+e+'" attribute exists among all geometries, or in none of them.'),null;void 0===i[e]&&(i[e]=[]),i[e].push(d.attributes[e]),u++}if(u!==r.size)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+h+". Make sure all geometries have the same number of attributes."),null;if(o!==d.morphTargetsRelative)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+h+". .morphTargetsRelative must be consistent throughout all geometries."),null;for(const e in d.morphAttributes){if(!a.has(e))return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+h+".  .morphAttributes must be consistent throughout all geometries."),null;void 0===n[e]&&(n[e]=[]),n[e].push(d.morphAttributes[e])}if(c.userData.mergedUserData=c.userData.mergedUserData||[],c.userData.mergedUserData.push(d.userData),t){let e;if(s)e=d.index.count;else{if(void 0===d.attributes.position)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+h+". The geometry must have either an index or a position attribute"),null;e=d.attributes.position.count}c.addGroup(l,e,h),l+=e}}if(s){let t=0;const s=[];for(let r=0;r<e.length;++r){const a=e[r].index;for(let e=0;e<a.count;++e)s.push(a.getX(e)+t);t+=e[r].attributes.position.count}c.setIndex(s)}for(const e in i){const t=Fe(i[e]);if(!t)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the "+e+" attribute."),null;c.setAttribute(e,t)}for(const e in n){const t=n[e][0].length;if(0===t)break;c.morphAttributes=c.morphAttributes||{},c.morphAttributes[e]=[];for(let s=0;s<t;++s){const t=[];for(let r=0;r<n[e].length;++r)t.push(n[e][r][s]);const r=Fe(t);if(!r)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the "+e+" morphAttribute."),null;c.morphAttributes[e].push(r)}}return c}(this.inlines.map((e=>this._font.getGeometryCharacter(e).translate(e.offsetX,e.offsetY,0))));this.textContent=new h.Mesh(e,this.getFontMaterial()),this.textContent.renderOrder=1/0,this.textContent.onBeforeRender=this._onBeforeRender,this.updateTextMaterial(),this.add(this.textContent)}this.position.z=this.getOffset()}updateInner(){this.position.z=this.getOffset(),this.textContent&&this.updateTextMaterial()}calculateInlines(e){if(!this._font||!this._font.isReady)return;if(!this._textContent)return;const t=this.getWhiteSpace(),s=M(t),r=this.getBreakOn(),a=e/this._font.typographic.size;for(let i=0;i<this._textContent.length;i++){const n=this._textContent[i],o=this._textContentInlines[i];o.resetOffsets();let h=null;t!==O&&(r.includes(n)||n.match(/\s/g))&&(h="possible"),n.match(/\n/g)&&(h=s),o.lineBreak=h,o.fontSize=e,o.fontFactor=a}}}class Te extends(Re.withBase(h.Object3D)(Se,I,te,me,ge)){constructor(e){super(e),this.isInlineBlock=!0,this.size=new h.Vector2(1,1),this.frame=new xe(this.getBackgroundMaterial()),this.frame.onBeforeRender=()=>{this.updateClippingPlanes&&this.updateClippingPlanes()},this.add(this.frame),this.set(e)}parseParams(){this.width||console.warn("inlineBlock has no width. Set to 0.3 by default"),this.height||console.warn("inlineBlock has no height. Set to 0.3 by default"),this.inlines=[{lineBreak:"possible",kerning:0,offsetX:0,offsetY:0,width:this.width||.3,height:this.height||.3,anchor:0,xadvance:this.width||.3,xoffset:0,yoffset:0,lineHeight:this.height||.3,lineBase:this.height||.3}]}updateLayout(){const e=this.getWidth(),t=this.getHeight();if(this.inlines){const e=this.inlines[0];this.position.set(e.width/2,e.height/2,0),this.position.x+=e.offsetX,this.position.y+=e.offsetY,this.position.y+=e.anchor}this.size.set(e,t),this.frame.scale.set(e,t,1),this.frame&&this.updateBackgroundMaterial(),this.frame.renderOrder=this.getParentsNumber(),this.childrenInlines.length&&this.computeInlinesPosition(),this.computeChildrenPosition(),this.position.z=this.getOffset()}updateInner(){this.position.z=this.getOffset(),this.frame&&this.updateBackgroundMaterial()}}const Pe=[[[{width:.1,chars:[{lowerCase:"a",upperCase:"A"}]},{width:.1,chars:[{lowerCase:"z",upperCase:"Z"}]},{width:.1,chars:[{lowerCase:"e",upperCase:"E"}]},{width:.1,chars:[{lowerCase:"r",upperCase:"R"}]},{width:.1,chars:[{lowerCase:"t",upperCase:"T"}]},{width:.1,chars:[{lowerCase:"y",upperCase:"Y"}]},{width:.1,chars:[{lowerCase:"u",upperCase:"U"}]},{width:.1,chars:[{lowerCase:"i",upperCase:"I"}]},{width:.1,chars:[{lowerCase:"o",upperCase:"O"}]},{width:.1,chars:[{lowerCase:"p",upperCase:"P"}]}],[{width:.1,chars:[{lowerCase:"q",upperCase:"Q"}]},{width:.1,chars:[{lowerCase:"s",upperCase:"S"}]},{width:.1,chars:[{lowerCase:"d",upperCase:"D"}]},{width:.1,chars:[{lowerCase:"f",upperCase:"F"}]},{width:.1,chars:[{lowerCase:"g",upperCase:"G"}]},{width:.1,chars:[{lowerCase:"h",upperCase:"H"}]},{width:.1,chars:[{lowerCase:"j",upperCase:"J"}]},{width:.1,chars:[{lowerCase:"k",upperCase:"K"}]},{width:.1,chars:[{lowerCase:"l",upperCase:"L"}]},{width:.1,chars:[{lowerCase:"m",upperCase:"M"}]}],[{width:.2,command:"shift",chars:[{icon:"shift"}]},{width:.1,chars:[{lowerCase:"w",upperCase:"W"}]},{width:.1,chars:[{lowerCase:"x",upperCase:"X"}]},{width:.1,chars:[{lowerCase:"c",upperCase:"C"}]},{width:.1,chars:[{lowerCase:"v",upperCase:"V"}]},{width:.1,chars:[{lowerCase:"b",upperCase:"B"}]},{width:.1,chars:[{lowerCase:"n",upperCase:"N"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]],[[{width:.1,chars:[{lowerCase:"1"}]},{width:.1,chars:[{lowerCase:"2"}]},{width:.1,chars:[{lowerCase:"3"}]},{width:.1,chars:[{lowerCase:"4"}]},{width:.1,chars:[{lowerCase:"5"}]},{width:.1,chars:[{lowerCase:"6"}]},{width:.1,chars:[{lowerCase:"7"}]},{width:.1,chars:[{lowerCase:"8"}]},{width:.1,chars:[{lowerCase:"9"}]},{width:.1,chars:[{lowerCase:"0"}]}],[{width:.1,chars:[{lowerCase:"@"}]},{width:.1,chars:[{lowerCase:"#"}]},{width:.1,chars:[{lowerCase:"|"}]},{width:.1,chars:[{lowerCase:"_"}]},{width:.1,chars:[{lowerCase:"&"}]},{width:.1,chars:[{lowerCase:"-"}]},{width:.1,chars:[{lowerCase:"+"}]},{width:.1,chars:[{lowerCase:"("}]},{width:.1,chars:[{lowerCase:")"}]},{width:.1,chars:[{lowerCase:"/"}]}],[{width:.1,chars:[{lowerCase:"="}]},{width:.1,chars:[{lowerCase:"*"}]},{width:.1,chars:[{lowerCase:'"'}]},{width:.1,chars:[{lowerCase:"'"}]},{width:.1,chars:[{lowerCase:":"}]},{width:.1,chars:[{lowerCase:";"}]},{width:.1,chars:[{lowerCase:"!"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]]],Oe=[[[{width:.1,chars:[{lowerCase:"q",upperCase:"Q"}]},{width:.1,chars:[{lowerCase:"w",upperCase:"W"}]},{width:.1,chars:[{lowerCase:"e",upperCase:"E"}]},{width:.1,chars:[{lowerCase:"r",upperCase:"R"}]},{width:.1,chars:[{lowerCase:"t",upperCase:"T"}]},{width:.1,chars:[{lowerCase:"y",upperCase:"Y"}]},{width:.1,chars:[{lowerCase:"u",upperCase:"U"}]},{width:.1,chars:[{lowerCase:"i",upperCase:"I"}]},{width:.1,chars:[{lowerCase:"o",upperCase:"O"}]},{width:.1,chars:[{lowerCase:"p",upperCase:"P"}]}],[{width:.1,chars:[{lowerCase:"a",upperCase:"A"}]},{width:.1,chars:[{lowerCase:"s",upperCase:"S"}]},{width:.1,chars:[{lowerCase:"d",upperCase:"D"}]},{width:.1,chars:[{lowerCase:"f",upperCase:"F"}]},{width:.1,chars:[{lowerCase:"g",upperCase:"G"}]},{width:.1,chars:[{lowerCase:"h",upperCase:"H"}]},{width:.1,chars:[{lowerCase:"j",upperCase:"J"}]},{width:.1,chars:[{lowerCase:"k",upperCase:"K"}]},{width:.1,chars:[{lowerCase:"l",upperCase:"L"}]}],[{width:.15,command:"shift",chars:[{icon:"shift"}]},{width:.1,chars:[{lowerCase:"z",upperCase:"Z"}]},{width:.1,chars:[{lowerCase:"x",upperCase:"X"}]},{width:.1,chars:[{lowerCase:"c",upperCase:"C"}]},{width:.1,chars:[{lowerCase:"v",upperCase:"V"}]},{width:.1,chars:[{lowerCase:"b",upperCase:"B"}]},{width:.1,chars:[{lowerCase:"n",upperCase:"N"}]},{width:.1,chars:[{lowerCase:"m",upperCase:"M"}]},{width:.15,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]],[[{width:.1,chars:[{lowerCase:"1"}]},{width:.1,chars:[{lowerCase:"2"}]},{width:.1,chars:[{lowerCase:"3"}]},{width:.1,chars:[{lowerCase:"4"}]},{width:.1,chars:[{lowerCase:"5"}]},{width:.1,chars:[{lowerCase:"6"}]},{width:.1,chars:[{lowerCase:"7"}]},{width:.1,chars:[{lowerCase:"8"}]},{width:.1,chars:[{lowerCase:"9"}]},{width:.1,chars:[{lowerCase:"0"}]}],[{width:.1,chars:[{lowerCase:"@"}]},{width:.1,chars:[{lowerCase:"#"}]},{width:.1,chars:[{lowerCase:"|"}]},{width:.1,chars:[{lowerCase:"_"}]},{width:.1,chars:[{lowerCase:"&"}]},{width:.1,chars:[{lowerCase:"-"}]},{width:.1,chars:[{lowerCase:"+"}]},{width:.1,chars:[{lowerCase:"("}]},{width:.1,chars:[{lowerCase:")"}]},{width:.1,chars:[{lowerCase:"/"}]}],[{width:.1,chars:[{lowerCase:"="}]},{width:.1,chars:[{lowerCase:"*"}]},{width:.1,chars:[{lowerCase:'"'}]},{width:.1,chars:[{lowerCase:"'"}]},{width:.1,chars:[{lowerCase:":"}]},{width:.1,chars:[{lowerCase:";"}]},{width:.1,chars:[{lowerCase:"!"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]]],Ee=[[[{width:1/12,chars:[{lowerCase:"й",upperCase:"Й"},{lowerCase:"q",upperCase:"Q"}]},{width:1/12,chars:[{lowerCase:"ц",upperCase:"Ц"},{lowerCase:"w",upperCase:"W"}]},{width:1/12,chars:[{lowerCase:"у",upperCase:"У"},{lowerCase:"e",upperCase:"E"}]},{width:1/12,chars:[{lowerCase:"к",upperCase:"К"},{lowerCase:"r",upperCase:"R"}]},{width:1/12,chars:[{lowerCase:"е",upperCase:"Е"},{lowerCase:"t",upperCase:"T"}]},{width:1/12,chars:[{lowerCase:"н",upperCase:"Н"},{lowerCase:"y",upperCase:"Y"}]},{width:1/12,chars:[{lowerCase:"г",upperCase:"Г"},{lowerCase:"u",upperCase:"U"}]},{width:1/12,chars:[{lowerCase:"ш",upperCase:"Ш"},{lowerCase:"i",upperCase:"I"}]},{width:1/12,chars:[{lowerCase:"щ",upperCase:"Щ"},{lowerCase:"o",upperCase:"O"}]},{width:1/12,chars:[{lowerCase:"з",upperCase:"З"},{lowerCase:"p",upperCase:"P"}]},{width:1/12,chars:[{lowerCase:"х",upperCase:"Х"},{lowerCase:"{",upperCase:"["}]},{width:1/12,chars:[{lowerCase:"ъ",upperCase:"Ъ"},{lowerCase:"}",upperCase:"]"}]}],[{width:1/12,chars:[{lowerCase:"ф",upperCase:"Ф"},{lowerCase:"a",upperCase:"A"}]},{width:1/12,chars:[{lowerCase:"ы",upperCase:"Ы"},{lowerCase:"s",upperCase:"S"}]},{width:1/12,chars:[{lowerCase:"в",upperCase:"В"},{lowerCase:"d",upperCase:"D"}]},{width:1/12,chars:[{lowerCase:"а",upperCase:"А"},{lowerCase:"f",upperCase:"F"}]},{width:1/12,chars:[{lowerCase:"п",upperCase:"П"},{lowerCase:"g",upperCase:"G"}]},{width:1/12,chars:[{lowerCase:"р",upperCase:"Р"},{lowerCase:"h",upperCase:"H"}]},{width:1/12,chars:[{lowerCase:"о",upperCase:"О"},{lowerCase:"j",upperCase:"J"}]},{width:1/12,chars:[{lowerCase:"л",upperCase:"Л"},{lowerCase:"k",upperCase:"K"}]},{width:1/12,chars:[{lowerCase:"д",upperCase:"Д"},{lowerCase:"l",upperCase:"L"}]},{width:1/12,chars:[{lowerCase:"ж",upperCase:"Ж"},{lowerCase:":",upperCase:";"}]},{width:1/12,chars:[{lowerCase:"э",upperCase:"Э"},{lowerCase:'"',upperCase:"'"}]},{width:1/12,chars:[{lowerCase:"ё",upperCase:"Ё"},{lowerCase:"|",upperCase:"\\"}]}],[{width:.125,command:"shift",chars:[{icon:"shift"}]},{width:1/12,chars:[{lowerCase:"я",upperCase:"Я"},{lowerCase:"z",upperCase:"Z"}]},{width:1/12,chars:[{lowerCase:"ч",upperCase:"Ч"},{lowerCase:"x",upperCase:"X"}]},{width:1/12,chars:[{lowerCase:"с",upperCase:"С"},{lowerCase:"c",upperCase:"C"}]},{width:1/12,chars:[{lowerCase:"м",upperCase:"М"},{lowerCase:"v",upperCase:"V"}]},{width:1/12,chars:[{lowerCase:"и",upperCase:"И"},{lowerCase:"b",upperCase:"B"}]},{width:1/12,chars:[{lowerCase:"т",upperCase:"Т"},{lowerCase:"n",upperCase:"N"}]},{width:1/12,chars:[{lowerCase:"ь",upperCase:"Ь"},{lowerCase:"m",upperCase:"M"}]},{width:1/12,chars:[{lowerCase:"б",upperCase:"Б"},{lowerCase:",",upperCase:""}]},{width:1/12,chars:[{lowerCase:"ю",upperCase:"Ю"},{lowerCase:".",upperCase:""}]},{width:.125,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.15,command:"switch-set",chars:[{lowerCase:"eng"}]},{width:.15,command:"switch",chars:[{lowerCase:".?12"}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]],[[{width:.1,chars:[{lowerCase:"1"}]},{width:.1,chars:[{lowerCase:"2"}]},{width:.1,chars:[{lowerCase:"3"}]},{width:.1,chars:[{lowerCase:"4"}]},{width:.1,chars:[{lowerCase:"5"}]},{width:.1,chars:[{lowerCase:"6"}]},{width:.1,chars:[{lowerCase:"7"}]},{width:.1,chars:[{lowerCase:"8"}]},{width:.1,chars:[{lowerCase:"9"}]},{width:.1,chars:[{lowerCase:"0"}]}],[{width:.1,chars:[{lowerCase:"@"}]},{width:.1,chars:[{lowerCase:"#"}]},{width:.1,chars:[{lowerCase:"|"}]},{width:.1,chars:[{lowerCase:"_"}]},{width:.1,chars:[{lowerCase:"&"}]},{width:.1,chars:[{lowerCase:"-"}]},{width:.1,chars:[{lowerCase:"+"}]},{width:.1,chars:[{lowerCase:"("}]},{width:.1,chars:[{lowerCase:")"}]},{width:.1,chars:[{lowerCase:"/"}]}],[{width:.1,chars:[{lowerCase:"="}]},{width:.1,chars:[{lowerCase:"*"}]},{width:.1,chars:[{lowerCase:'"'}]},{width:.1,chars:[{lowerCase:"'"}]},{width:.1,chars:[{lowerCase:":"}]},{width:.1,chars:[{lowerCase:";"}]},{width:.1,chars:[{lowerCase:"!"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.3,command:"switch",chars:[{lowerCase:"АБВ"}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]]],ze=[[[{width:1/11,chars:[{lowerCase:"q",upperCase:"Q"}]},{width:1/11,chars:[{lowerCase:"w",upperCase:"W"}]},{width:1/11,chars:[{lowerCase:"e",upperCase:"E"}]},{width:1/11,chars:[{lowerCase:"r",upperCase:"R"}]},{width:1/11,chars:[{lowerCase:"t",upperCase:"T"}]},{width:1/11,chars:[{lowerCase:"z",upperCase:"Z"}]},{width:1/11,chars:[{lowerCase:"u",upperCase:"U"}]},{width:1/11,chars:[{lowerCase:"i",upperCase:"I"}]},{width:1/11,chars:[{lowerCase:"o",upperCase:"O"}]},{width:1/11,chars:[{lowerCase:"p",upperCase:"P"}]},{width:1/11,chars:[{lowerCase:"ü",upperCase:"Ü"}]}],[{width:1/11,chars:[{lowerCase:"a",upperCase:"A"}]},{width:1/11,chars:[{lowerCase:"s",upperCase:"S"}]},{width:1/11,chars:[{lowerCase:"d",upperCase:"D"}]},{width:1/11,chars:[{lowerCase:"f",upperCase:"F"}]},{width:1/11,chars:[{lowerCase:"g",upperCase:"G"}]},{width:1/11,chars:[{lowerCase:"h",upperCase:"H"}]},{width:1/11,chars:[{lowerCase:"j",upperCase:"J"}]},{width:1/11,chars:[{lowerCase:"k",upperCase:"K"}]},{width:1/11,chars:[{lowerCase:"l",upperCase:"L"}]},{width:1/11,chars:[{lowerCase:"ö",upperCase:"Ö"}]},{width:1/11,chars:[{lowerCase:"ä",upperCase:"Ä"}]}],[{width:2/11,command:"shift",chars:[{icon:"shift"}]},{width:1/11,chars:[{lowerCase:"y",upperCase:"Y"}]},{width:1/11,chars:[{lowerCase:"x",upperCase:"X"}]},{width:1/11,chars:[{lowerCase:"c",upperCase:"C"}]},{width:1/11,chars:[{lowerCase:"v",upperCase:"V"}]},{width:1/11,chars:[{lowerCase:"b",upperCase:"B"}]},{width:1/11,chars:[{lowerCase:"n",upperCase:"N"}]},{width:1/11,chars:[{lowerCase:"m",upperCase:"M"}]},{width:2/11,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]],[[{width:.1,chars:[{lowerCase:"1"}]},{width:.1,chars:[{lowerCase:"2"}]},{width:.1,chars:[{lowerCase:"3"}]},{width:.1,chars:[{lowerCase:"4"}]},{width:.1,chars:[{lowerCase:"5"}]},{width:.1,chars:[{lowerCase:"6"}]},{width:.1,chars:[{lowerCase:"7"}]},{width:.1,chars:[{lowerCase:"8"}]},{width:.1,chars:[{lowerCase:"9"}]},{width:.1,chars:[{lowerCase:"0"}]}],[{width:.1,chars:[{lowerCase:"@"}]},{width:.1,chars:[{lowerCase:"#"}]},{width:.1,chars:[{lowerCase:"|"}]},{width:.1,chars:[{lowerCase:"_"}]},{width:.1,chars:[{lowerCase:"&"}]},{width:.1,chars:[{lowerCase:"-"}]},{width:.1,chars:[{lowerCase:"+"}]},{width:.1,chars:[{lowerCase:"("}]},{width:.1,chars:[{lowerCase:")"}]},{width:.1,chars:[{lowerCase:"/"}]}],[{width:.1,chars:[{lowerCase:"="}]},{width:.1,chars:[{lowerCase:"*"}]},{width:.1,chars:[{lowerCase:'"'}]},{width:.1,chars:[{lowerCase:"'"}]},{width:.1,chars:[{lowerCase:":"}]},{width:.1,chars:[{lowerCase:";"}]},{width:.1,chars:[{lowerCase:"!"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]]],He=[[[{width:.1,chars:[{lowerCase:"q",upperCase:"Q"}]},{width:.1,chars:[{lowerCase:"w",upperCase:"W"}]},{width:.1,chars:[{lowerCase:"e",upperCase:"E"}]},{width:.1,chars:[{lowerCase:"r",upperCase:"R"}]},{width:.1,chars:[{lowerCase:"t",upperCase:"T"}]},{width:.1,chars:[{lowerCase:"y",upperCase:"Y"}]},{width:.1,chars:[{lowerCase:"u",upperCase:"U"}]},{width:.1,chars:[{lowerCase:"i",upperCase:"I"}]},{width:.1,chars:[{lowerCase:"o",upperCase:"O"}]},{width:.1,chars:[{lowerCase:"p",upperCase:"P"}]}],[{width:.1,chars:[{lowerCase:"a",upperCase:"A"}]},{width:.1,chars:[{lowerCase:"s",upperCase:"S"}]},{width:.1,chars:[{lowerCase:"d",upperCase:"D"}]},{width:.1,chars:[{lowerCase:"f",upperCase:"F"}]},{width:.1,chars:[{lowerCase:"g",upperCase:"G"}]},{width:.1,chars:[{lowerCase:"h",upperCase:"H"}]},{width:.1,chars:[{lowerCase:"j",upperCase:"J"}]},{width:.1,chars:[{lowerCase:"k",upperCase:"K"}]},{width:.1,chars:[{lowerCase:"l",upperCase:"L"}]},{width:.1,chars:[{lowerCase:"ñ",upperCase:"Ñ"}]}],[{width:.15,command:"shift",chars:[{icon:"shift"}]},{width:.1,chars:[{lowerCase:"z",upperCase:"Z"}]},{width:.1,chars:[{lowerCase:"x",upperCase:"X"}]},{width:.1,chars:[{lowerCase:"c",upperCase:"C"}]},{width:.1,chars:[{lowerCase:"v",upperCase:"V"}]},{width:.1,chars:[{lowerCase:"b",upperCase:"B"}]},{width:.1,chars:[{lowerCase:"n",upperCase:"N"}]},{width:.1,chars:[{lowerCase:"m",upperCase:"M"}]},{width:.15,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]],[[{width:.1,chars:[{lowerCase:"1"}]},{width:.1,chars:[{lowerCase:"2"}]},{width:.1,chars:[{lowerCase:"3"}]},{width:.1,chars:[{lowerCase:"4"}]},{width:.1,chars:[{lowerCase:"5"}]},{width:.1,chars:[{lowerCase:"6"}]},{width:.1,chars:[{lowerCase:"7"}]},{width:.1,chars:[{lowerCase:"8"}]},{width:.1,chars:[{lowerCase:"9"}]},{width:.1,chars:[{lowerCase:"0"}]}],[{width:.1,chars:[{lowerCase:"@"}]},{width:.1,chars:[{lowerCase:"#"}]},{width:.1,chars:[{lowerCase:"|"}]},{width:.1,chars:[{lowerCase:"_"}]},{width:.1,chars:[{lowerCase:"&"}]},{width:.1,chars:[{lowerCase:"-"}]},{width:.1,chars:[{lowerCase:"+"}]},{width:.1,chars:[{lowerCase:"("}]},{width:.1,chars:[{lowerCase:")"}]},{width:.1,chars:[{lowerCase:"/"}]}],[{width:.1,chars:[{lowerCase:"="}]},{width:.1,chars:[{lowerCase:"*"}]},{width:.1,chars:[{lowerCase:'"'}]},{width:.1,chars:[{lowerCase:"'"}]},{width:.1,chars:[{lowerCase:":"}]},{width:.1,chars:[{lowerCase:";"}]},{width:.1,chars:[{lowerCase:"!"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]]],Le=[[[{width:.1,chars:[{lowerCase:";",upperCase:":"},{lowerCase:"q",upperCase:"Q"}]},{width:.1,chars:[{lowerCase:"ς",upperCase:"ς"},{lowerCase:"w",upperCase:"W"}]},{width:.1,chars:[{lowerCase:"ε",upperCase:"Ε"},{lowerCase:"e",upperCase:"E"}]},{width:.1,chars:[{lowerCase:"ρ",upperCase:"Ρ"},{lowerCase:"r",upperCase:"R"}]},{width:.1,chars:[{lowerCase:"τ",upperCase:"Τ"},{lowerCase:"t",upperCase:"T"}]},{width:.1,chars:[{lowerCase:"υ",upperCase:"Υ"},{lowerCase:"y",upperCase:"Y"}]},{width:.1,chars:[{lowerCase:"θ",upperCase:"Θ"},{lowerCase:"u",upperCase:"U"}]},{width:.1,chars:[{lowerCase:"ι",upperCase:"Ι"},{lowerCase:"i",upperCase:"I"}]},{width:.1,chars:[{lowerCase:"ο",upperCase:"Ο"},{lowerCase:"o",upperCase:"O"}]},{width:.1,chars:[{lowerCase:"π",upperCase:"Π"},{lowerCase:"p",upperCase:"P"}]}],[{width:.1,chars:[{lowerCase:"α",upperCase:"Α"},{lowerCase:"a",upperCase:"A"}]},{width:.1,chars:[{lowerCase:"σ",upperCase:"Σ"},{lowerCase:"s",upperCase:"S"}]},{width:.1,chars:[{lowerCase:"δ",upperCase:"Δ"},{lowerCase:"d",upperCase:"D"}]},{width:.1,chars:[{lowerCase:"φ",upperCase:"Φ"},{lowerCase:"f",upperCase:"F"}]},{width:.1,chars:[{lowerCase:"γ",upperCase:"Γ"},{lowerCase:"g",upperCase:"G"}]},{width:.1,chars:[{lowerCase:"η",upperCase:"Η"},{lowerCase:"h",upperCase:"H"}]},{width:.1,chars:[{lowerCase:"ξ",upperCase:"Ξ"},{lowerCase:"j",upperCase:"J"}]},{width:.1,chars:[{lowerCase:"κ",upperCase:"Κ"},{lowerCase:"k",upperCase:"K"}]},{width:.1,chars:[{lowerCase:"λ",upperCase:"Λ"},{lowerCase:"l",upperCase:"L"}]}],[{width:.15,command:"shift",chars:[{icon:"shift"}]},{width:.1,chars:[{lowerCase:"ζ",upperCase:"Ζ"},{lowerCase:"z",upperCase:"Z"}]},{width:.1,chars:[{lowerCase:"χ",upperCase:"Χ"},{lowerCase:"x",upperCase:"X"}]},{width:.1,chars:[{lowerCase:"ψ",upperCase:"Ψ"},{lowerCase:"c",upperCase:"C"}]},{width:.1,chars:[{lowerCase:"ω",upperCase:"Ω"},{lowerCase:"v",upperCase:"V"}]},{width:.1,chars:[{lowerCase:"β",upperCase:"Β"},{lowerCase:"b",upperCase:"B"}]},{width:.1,chars:[{lowerCase:"ν",upperCase:"Ν"},{lowerCase:"n",upperCase:"N"}]},{width:.1,chars:[{lowerCase:"μ",upperCase:"Μ"},{lowerCase:"m",upperCase:"M"}]},{width:.15,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.15,command:"switch-set",chars:[{lowerCase:"eng"}]},{width:.15,command:"switch",chars:[{lowerCase:".?12"}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]],[[{width:.1,chars:[{lowerCase:"1"}]},{width:.1,chars:[{lowerCase:"2"}]},{width:.1,chars:[{lowerCase:"3"}]},{width:.1,chars:[{lowerCase:"4"}]},{width:.1,chars:[{lowerCase:"5"}]},{width:.1,chars:[{lowerCase:"6"}]},{width:.1,chars:[{lowerCase:"7"}]},{width:.1,chars:[{lowerCase:"8"}]},{width:.1,chars:[{lowerCase:"9"}]},{width:.1,chars:[{lowerCase:"0"}]}],[{width:.1,chars:[{lowerCase:"@"}]},{width:.1,chars:[{lowerCase:"#"}]},{width:.1,chars:[{lowerCase:"|"}]},{width:.1,chars:[{lowerCase:"_"}]},{width:.1,chars:[{lowerCase:"&"}]},{width:.1,chars:[{lowerCase:"-"}]},{width:.1,chars:[{lowerCase:"+"}]},{width:.1,chars:[{lowerCase:"("}]},{width:.1,chars:[{lowerCase:")"}]},{width:.1,chars:[{lowerCase:"/"}]}],[{width:.1,chars:[{lowerCase:"="}]},{width:.1,chars:[{lowerCase:"*"}]},{width:.1,chars:[{lowerCase:'"'}]},{width:.1,chars:[{lowerCase:"'"}]},{width:.1,chars:[{lowerCase:":"}]},{width:.1,chars:[{lowerCase:";"}]},{width:.1,chars:[{lowerCase:"!"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]]],Ae=[[[{width:1/11,chars:[{lowerCase:"q",upperCase:"Q"}]},{width:1/11,chars:[{lowerCase:"w",upperCase:"W"}]},{width:1/11,chars:[{lowerCase:"e",upperCase:"E"}]},{width:1/11,chars:[{lowerCase:"r",upperCase:"R"}]},{width:1/11,chars:[{lowerCase:"t",upperCase:"T"}]},{width:1/11,chars:[{lowerCase:"y",upperCase:"Y"}]},{width:1/11,chars:[{lowerCase:"u",upperCase:"U"}]},{width:1/11,chars:[{lowerCase:"i",upperCase:"I"}]},{width:1/11,chars:[{lowerCase:"o",upperCase:"O"}]},{width:1/11,chars:[{lowerCase:"p",upperCase:"P"}]},{width:1/11,chars:[{lowerCase:"å",upperCase:"Å"}]}],[{width:1/11,chars:[{lowerCase:"a",upperCase:"A"}]},{width:1/11,chars:[{lowerCase:"s",upperCase:"S"}]},{width:1/11,chars:[{lowerCase:"d",upperCase:"D"}]},{width:1/11,chars:[{lowerCase:"f",upperCase:"F"}]},{width:1/11,chars:[{lowerCase:"g",upperCase:"G"}]},{width:1/11,chars:[{lowerCase:"h",upperCase:"H"}]},{width:1/11,chars:[{lowerCase:"j",upperCase:"J"}]},{width:1/11,chars:[{lowerCase:"k",upperCase:"K"}]},{width:1/11,chars:[{lowerCase:"l",upperCase:"L"}]},{width:1/11,chars:[{lowerCase:"æ",upperCase:"Æ"}]},{width:1/11,chars:[{lowerCase:"ø",upperCase:"Ø"}]}],[{width:2/11,command:"shift",chars:[{icon:"shift"}]},{width:1/11,chars:[{lowerCase:"z",upperCase:"Z"}]},{width:1/11,chars:[{lowerCase:"x",upperCase:"X"}]},{width:1/11,chars:[{lowerCase:"c",upperCase:"C"}]},{width:1/11,chars:[{lowerCase:"v",upperCase:"V"}]},{width:1/11,chars:[{lowerCase:"b",upperCase:"B"}]},{width:1/11,chars:[{lowerCase:"n",upperCase:"N"}]},{width:1/11,chars:[{lowerCase:"m",upperCase:"M"}]},{width:2/11,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]],[[{width:.1,chars:[{lowerCase:"1"}]},{width:.1,chars:[{lowerCase:"2"}]},{width:.1,chars:[{lowerCase:"3"}]},{width:.1,chars:[{lowerCase:"4"}]},{width:.1,chars:[{lowerCase:"5"}]},{width:.1,chars:[{lowerCase:"6"}]},{width:.1,chars:[{lowerCase:"7"}]},{width:.1,chars:[{lowerCase:"8"}]},{width:.1,chars:[{lowerCase:"9"}]},{width:.1,chars:[{lowerCase:"0"}]}],[{width:.1,chars:[{lowerCase:"@"}]},{width:.1,chars:[{lowerCase:"#"}]},{width:.1,chars:[{lowerCase:"|"}]},{width:.1,chars:[{lowerCase:"_"}]},{width:.1,chars:[{lowerCase:"&"}]},{width:.1,chars:[{lowerCase:"-"}]},{width:.1,chars:[{lowerCase:"+"}]},{width:.1,chars:[{lowerCase:"("}]},{width:.1,chars:[{lowerCase:")"}]},{width:.1,chars:[{lowerCase:"/"}]}],[{width:.1,chars:[{lowerCase:"="}]},{width:.1,chars:[{lowerCase:"*"}]},{width:.1,chars:[{lowerCase:'"'}]},{width:.1,chars:[{lowerCase:"'"}]},{width:.1,chars:[{lowerCase:":"}]},{width:.1,chars:[{lowerCase:";"}]},{width:.1,chars:[{lowerCase:"!"}]},{width:.1,chars:[{lowerCase:"?"}]},{width:.2,command:"backspace",chars:[{icon:"backspace"}]}],[{width:.2,command:"switch",chars:[{lowerCase:".?12"}]},{width:.1,chars:[{lowerCase:","}]},{width:.4,command:"space",chars:[{icon:"space"}]},{width:.1,chars:[{lowerCase:"."}]},{width:.2,command:"enter",chars:[{icon:"enter"}]}]]],De=new h.TextureLoader;class Me extends(Re.withBase(h.Object3D)(I,ge)){constructor(e){let t;if(e||(e={}),e.width||(e.width=1),e.height||(e.height=.4),e.margin||(e.margin=.003),e.padding||(e.padding=.01),super(e),this.currentPanel=0,this.isLowerCase=!0,this.charsetCount=1,e.language||navigator.language)switch(e.language||navigator.language){case"fr":case"fr-CH":case"fr-CA":t=Pe;break;case"ru":this.charsetCount=2,t=Ee;break;case"de":case"de-DE":case"de-AT":case"de-LI":case"de-CH":t=ze;break;case"es":case"es-419":case"es-AR":case"es-CL":case"es-CO":case"es-ES":case"es-CR":case"es-US":case"es-HN":case"es-MX":case"es-PE":case"es-UY":case"es-VE":t=He;break;case"el":this.charsetCount=2,t=Le;break;case"nord":t=Ae;break;default:t=Oe}else t=Oe;this.keys=[],this.panels=t.map((t=>{const s=e.height/t.length-2*e.margin,r=new Ue({width:e.width+2*e.padding,height:e.height+2*e.padding,offset:0,padding:e.padding,fontFamily:e.fontFamily,fontTexture:e.fontTexture,backgroundColor:e.backgroundColor,backgroundOpacity:e.backgroundOpacity});return r.charset=0,r.add(...t.map((t=>{const a=new Ue({width:e.width,height:s,margin:e.margin,contentDirection:"row",justifyContent:"center"});a.frame.visible=!1;const i=[];return t.forEach((t=>{const a=new Ue({width:e.width*t.width-2*e.margin,height:s,margin:e.margin,justifyContent:"center",offset:0}),n=t.chars[r.charset].lowerCase||t.chars[r.charset].icon||"undif";if("enter"===n&&e.enterTexture||"shift"===n&&e.shiftTexture||"backspace"===n&&e.backspaceTexture){const t=(()=>{switch(n){case"backspace":return e.backspaceTexture;case"enter":return e.enterTexture;case"shift":return e.shiftTexture;default:console.warn("There is no icon image for this key")}})();De.load(t,(e=>{a.add(new Te({width:.65*a.width,height:.65*a.height,backgroundSize:"contain",backgroundTexture:e}))}))}else a.add(new Ie({content:n,offset:0}));a.type="Key",a.info=t,a.info.input=n,a.panel=r,i.push(a),this.keys.push(a)})),a.add(...i),a}))),r})),this.add(this.panels[0]),this.set(e)}setNextPanel(){this.panels.forEach((e=>{this.remove(e)})),this.currentPanel=(this.currentPanel+1)%this.panels.length,this.add(this.panels[this.currentPanel]),this.update(!0,!0,!0)}setNextCharset(){this.panels[this.currentPanel].charset=(this.panels[this.currentPanel].charset+1)%this.charsetCount,this.keys.forEach((e=>{if(!this.panels[this.currentPanel].getObjectById(e.id))return;const t=e.info.chars[e.panel.charset]||e.info.chars[0],s=this.isLowerCase||!t.upperCase?t.lowerCase:t.upperCase;if(!e.childrenTexts.length)return;const r=e.childrenTexts[0];e.info.input=s,r.set({content:s}),r.update(!0,!0,!0)}))}toggleCase(){this.isLowerCase=!this.isLowerCase,this.keys.forEach((e=>{const t=e.info.chars[e.panel.charset]||e.info.chars[0],s=this.isLowerCase||!t.upperCase?t.lowerCase:t.upperCase;if(!e.childrenTexts.length)return;const r=e.childrenTexts[0];e.info.input=s,r.set({content:s}),r.update(!0,!0,!0)}))}parseParams(){}updateLayout(){}updateInner(){}}const We=()=>we.update(),Ve={Block:Ue,Text:Ie,InlineBlock:Te,Keyboard:Me,FontLibrary:ue,update:We,TextAlign:o,Whitespace:n,JustifyContent:i,AlignItems:a,ContentDirection:r};"undefined"!=typeof global&&(global.ThreeMeshUI=Ve);const Ge=Ve;var Ne=s.g1,Xe=s.gO,je=s.km,Ye=s.zV,$e=s.ol,qe=s.uM,Je=s.N1,Ke=s.xv,Ze=s.PH,Qe=s.UH,et=s.ZP,tt=s.Vx;export{Ne as AlignItems,Xe as Block,je as ContentDirection,Ye as FontLibrary,$e as InlineBlock,qe as JustifyContent,Je as Keyboard,Ke as Text,Ze as TextAlign,Qe as Whitespace,et as default,tt as update};
\ No newline at end of file
+import*as e from"three";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},i={};t.d(i,{w8:()=>l,cg:()=>wn,gO:()=>gi,wb:()=>n,zV:()=>st,HS:()=>T,Ec:()=>d,gF:()=>Qi,ol:()=>yn,pz:()=>We,tx:()=>Ke,hj:()=>s,FV:()=>wt,sV:()=>Mt,xv:()=>_n,mx:()=>Fe,gE:()=>ze,ZP:()=>kn,Vx:()=>Sn});var n={};t.r(n),t.d(n,{get:()=>u,set:()=>o});var s={};t.r(s),t.d(s,{alphaTestTransformer:()=>$e,asPreprocessorValueTransformer:()=>Xe,toPreprocessorTriggerTransformer:()=>je,toUserDataTransformer:()=>Ye,uniformOrUserDataTransformer:()=>Ne});const r={fontFamily:null,fontSize:.05,fontKerning:"normal",fontStyle:"normal",fontWeight:"normal",offset:.005,lineHeight:1.2,lineBreak:"- ,.:?!\n",whiteSpace:"pre-line",flexDirection:"column",justifyContent:"start",alignItems:"start",backgroundImage:null,textAlign:"left",boxSizing:"content-box",position:"static",color:16777215,fontOpacity:1,opacity:1,fontPXRange:4,fontSupersampling:!0,fontSmooth:"antialiased",borderRadius:0,borderWidth:0,borderColor:"black",borderOpacity:1,backgroundSize:"cover",backgroundColor:0,backgroundOpacity:0,overflow:"visible",letterSpacing:0,invertAlpha:!1,segments:1,backgroundSide:0,backgroundAlphaTest:.02,fontSide:0,fontAlphaTest:.02,padding:0,margin:0,verticalAlign:"baseline"},a={default:r,block:{},inline:{fontStyle:"inherit",fontWeight:"inherit",color:"inherit"}},o=function(e,t="default"){const i=a[t]||a.default;for(const t in e)i[t]=e[t]},u=function(e,t="default"){const i=a[t]?{...r,...a[t]}:{...a.default};return e?(Object.prototype.hasOwnProperty.call(i,e)||console.warn(`ThreeMeshUI::DefaultValues is trying to retrieve non-existing property '${e}'`),i[e]):i};class l{constructor(e,t=null,i=!0){this._id=e,this._value=t,this._needsUpdate=!0,this._needsProcess=!1,this._needsRender=!1,this._isPrimitive=i}get id(){return this._id}get value(){return this._value}set value(e){this.isValid(e)&&this._value!==e&&(this._value=e,this._needsUpdate=!0)}update(e,t){this.output(t)}output(e){}_outputValue(e){e[this._id]=this._value}process(e){}render(e){}getInheritedInput(e){if("inherit"!==this._value)return this._value;const t=e._parent._value;return t&&t[`_${this._id}`]?t[`_${this._id}`].getInheritedInput(t):this.getDefaultValue()}getDefaultValue(){return u(this._id)}isValid(e){return!0}emptyStrategyLogic(){throw new Error(`ThreeMeshUI::${this.constructor.name} has empty strategy. Update has not been processed.`)}}class h extends l{constructor(){super("renderOrder","auto",!0),this.output=this._outputValue,this._actualValue=0}set value(e){this.isValid(e)&&(this._value=e,this._needsUpdate=!0)}update(e,t){if("auto"!==this._value)this._actualValue=this._value;else{const t=e._parent._value;if(null!==t){const i=t._renderOrder._actualValue,n=1+t._children._uis.indexOf(e);this._actualValue=i+n}}for(const t of e._children._uis){"auto"===t._renderOrder._value&&(t._renderOrder._needsUpdate=!0)}this._outputValue(t)}_outputValue(e){e[this._id]=this._actualValue}get value(){return this._value}}class d extends l{constructor(e,t=null,i=!0){super(e,t,i),this.output=this._outputValue,this._notInheritedValue=null}update(e,t){this._notInheritedValue=this._value,"inherit"===this._notInheritedValue&&(this._notInheritedValue=this.getInheritedInput(e)),this.propagate(e),this._outputValue(t)}propagate(e){for(const t of e._children._uis){const e=t[`_${this._id}`];void 0!==e&&"inherit"===e._value&&(t[`_${this._id}`]._needsUpdate=!0)}}_outputValue(e){e[this._id]=this._notInheritedValue}set value(e){this.isValid(e)&&this._value!==e&&(this._value=e,this._needsUpdate=!0)}get value(){return"inherit"===this._value?this._notInheritedValue:this._value}}class c extends d{constructor(){super("offset","inherit",!1)}update(e,t){super.update(e,t),null!==e._parent._value&&(e.position.z=this._notInheritedValue)}}class _ extends d{constructor(){super("fontSmooth","inherit",!0),this._needsUpdate=!1,this.isValid=f,this.output=this._outputValue}}const p=["inherit","none","antialiased"];function f(e){return-1!==p.indexOf(e)||(console.warn(`.fontSmoothing value '${e}' is not valid. Aborted`),!1)}const g=(e=>{var i={};return t.d(i,e),i})({BackSide:()=>e.BackSide,BufferAttribute:()=>e.BufferAttribute,BufferGeometry:()=>e.BufferGeometry,Color:()=>e.Color,DoubleSide:()=>e.DoubleSide,EventDispatcher:()=>e.EventDispatcher,FileLoader:()=>e.FileLoader,FrontSide:()=>e.FrontSide,LinearFilter:()=>e.LinearFilter,Mesh:()=>e.Mesh,Object3D:()=>e.Object3D,Plane:()=>e.Plane,PlaneGeometry:()=>e.PlaneGeometry,ShaderMaterial:()=>e.ShaderMaterial,Texture:()=>e.Texture,TextureLoader:()=>e.TextureLoader,Vector2:()=>e.Vector2,Vector3:()=>e.Vector3,Vector4:()=>e.Vector4});class v extends l{constructor(e,t,i=!0){super(e,"unset",i),this._input="inherit",this._allowsInherit=!0,this._inheritedInput=void 0,this._inline=void 0}update(e,t){this._allowsInherit||(this._inheritedInput=this.getInheritedInput(e)),this.computeOutputValue(e);for(const t of e._children._uis){const e=t[`_${this._id}`];if(!e)continue;"inherit"===(e._input?e._input:e._value)&&(t[`_${this._id}`]._needsUpdate=!0)}this.output(t)}computeOutputValue(e){this._value=this._input}_computeFromInherited(e){this._value=this._inheritedInput}set value(e){console.warn(".(style) sub-property cannot be directly set. It must comes from inline or computed setter.")}set inline(e){this.isValidValue(e)&&e!==this._inline&&(this._input=this._inline=e,this._needsUpdate=!0)}get inline(){return this._inline}isValidValue(e){return!0}getInheritedInput(e){if("inherit"!==this._input)return this._input;const t=e._parent._value;if(t){return t[`_${this._id}`]?t[`_${this._id}`].getInheritedInput(t):this.getDefaultValue()}return this.getDefaultValue()}}class m extends v{constructor(e,t){super(e,t,!1),this._input=this._vector4ValueSetter(new g.Vector4(0,0,0,0),t),this._inline=null,this._value=new g.Vector4(0,0,0,0)}get value(){return this._value}computeOutputValue(e){this._vector4ValueSetter(this._value,this._input,e)}set inline(e){this._vector4ValueSetter(this._input,e),this._input.equals(this._value)||(this._needsUpdate=!0)}set top(e){this._input.x!==e&&(this._input.x=e,this._needsUpdate=!0)}get top(){return this._input.x}set right(e){this._input.y!==e&&(this._input.y=e,this._needsUpdate=!0)}get right(){return this._input.y}set bottom(e){this._input.z!==e&&(this._input.z=e,this._needsUpdate=!0)}get bottom(){return this._input.z}set left(e){this._input.w!==e&&(this._input.w=e,this._needsUpdate=!0)}get left(){return this._input.w}dispose(){this._computed=null,this._inline=null,this._input=null,this._output=null}_vector4ValueSetter(e,t){if(t instanceof g.Vector4)return e.copy(t);if(("string"==typeof t||t instanceof String)&&(t=t.split(" ")),Array.isArray(t))switch((t=t.map((e=>parseFloat(e)))).length){case 1:return e.setScalar(t[0]);case 2:return e.x=e.z=t[0],e.y=e.w=t[1],e;case 3:return e.x=t[0],e.y=t[1],e.z=t[2],e;case 4:return e.x=t[0],e.y=t[1],e.z=t[2],e.w=t[3],e;default:return void console.error("StyleVector4Property::set() Four Dimension property had more than four values")}return isNaN(t)||e.setScalar(t),e}}class b extends m{constructor(e){super("padding",e)}computeOutputValue(e){super.computeOutputValue(e),e._bounds._needsUpdate=!0,e._bounds._needsRender=!0,e._layouter._needsProcess=!0,e._renderer._needsRender=!0,e._parent._value&&(e._parent._value._layouter._needsProcess=!0)}}class y extends m{constructor(e,t){super(e,t,!1)}computeOutputValue(e){this._value,this._input,this._vector4ValueSetterFinal(this._value,this._input,e)}set inline(e){this._input=e,this._needsUpdate=!0}_vector4ValueSetterFinal(e,t,i){if(t instanceof g.Vector4)return e.copy(t);if(("string"==typeof t||t instanceof String)&&(t=t.split(" ")),Array.isArray(t))switch(t.length){case 1:return e.setScalar(this._parseValue(t[0],i));case 2:return e.x=e.z=this._parseValue(t[0]),e.y=e.w=this._parseValue(t[1]),e;case 3:return e.x=this._parseValue(t[0]),e.y=this._parseValue(t[1]),e.z=this._parseValue(t[2]),e;case 4:return e.x=this._parseValue(t[0]),e.y=this._parseValue(t[1]),e.z=this._parseValue(t[2]),e.w=this._parseValue(t[3]),e;default:return void console.error("StyleVector4Property::set() Four Dimension property had more than four values")}return isNaN(t)||e.setScalar(t),e}_parseValue(e,t){return isNaN(e)?e.endsWith("em")?parseFloat(e.replace(/[^0-9.]+/,""))*t._fontSize._value:void 0:parseFloat(e)}}class x extends y{constructor(){super("margin",new g.Vector4(0,0,0,0))}computeOutputValue(e){super.computeOutputValue(e),e._renderer._needsRender=!0,e._parent._value&&(e._parent._value._flexDirection._needsProcess=!0)}}const w=function(e,t,i){e[t]=i},S=function(e,t,i){null!==i&&(e[t]=i)};class V{constructor(e){this._definition=e}set definition(e){this._definition=e}mediate(e,t,i,n=null){for(const e in this._definition){const s=this._definition[e];if(void 0!==i[e]){const r=s.t?s.t:w;r(t,s.m,i[e]),n&&r(n,s.m,i[e])}}}static mediate(e,t,i,n,s=null){if(t)for(const e in n){const r=n[e];if(void 0!==i[e]){const n=r.t?r.t:w;n(t,r.m,i[e]),s&&n(s,r.m,i[e])}}}}class k extends l{constructor(){super("parent",null,!1)}update(e,t){e.parent&&e.parent.isUI?this._value=e.parent:this._value=null}set value(e){console.warn("ParentProperty is readonly")}get value(){return this._value}find(e){return this._value?e(this._value)?this._value:this._value._parent.find(e):null}dispose(){this._value=null}}const U=function(e,t,i=6){return e.toFixed(i)===t.toFixed(i)};class R extends l{constructor(e,t){super(e,t,!0),this.output=this._outputValue}set value(e){this.isValid(e)&&(U(this._value,e)||(this._value=e,this._needsUpdate=!0))}get value(){return this._value}}class C extends d{constructor(e){super(e,"inherit",!0),this.isValid=M}}const I=[g.FrontSide,g.BackSide,g.DoubleSide];function M(e){return-1!==I.indexOf(e)||(console.warn(`SideProperty value '${e}' is not valid. Abort`),!1)}class B extends g.EventDispatcher{constructor(e,t){super(),this._isReady=!1,this._weight=e,this._style=t,this._size=42,this._lineHeight=42,this._lineBase=42,this._font=null}get typographic(){return this._font}get isReady(){return this._isReady}get weight(){return this._weight}get style(){return this._style}get texture(){return this._texture}set fontMaterial(e){throw Error(`FontVariant('${this.id}')::fontMaterial - is abstract.`)}get fontMaterial(){throw Error(`FontVariant('${this.id}')::fontMaterial - is abstract.`)}get id(){return`${this._name}(w:${this.weight},s:${this.style})`}getTypographicGlyph(e){let t=this._chars[e];if(t)return t;if(e.match(/\s/))return this._chars[" "];const i=this._getFallbackCharacter(e);if(i&&(t=this._chars[i],t))return t;throw Error(`FontVariant('${this.id}')::getTypographicGlyph() - character('${e}') and/or fallback character were not found in provided msdf charset.`)}_getFallbackCharacter(e){throw new Error(`FontVariant(${typeof this})::_getFallbackCharacter() is abstract and should therefore be overridden.`)}getGeometricGlyph(e,t){throw new Error(`FontVariant(${typeof this})::getGeometryCharacter() is abstract and should therefore be overridden.`)}getKerningAmount(e){return this._kernings[e]?this._kernings[e]:0}adjustTypographicGlyphs(e){for(const t in e){const i=this.getTypographicGlyph(t),n=e[t];for(const s in n)i["_"+s]=e[t][s]}}_checkReadiness(){var e;this._readyCondition()&&((e=this)._isReady=!0,e.dispatchEvent(P))}_alterElementProperties(e){throw new Error(`FontVariant(${typeof this})::_alterElementProperties() is abstract and should therefore be overridden.`)}_readyCondition(){throw new Error(`FontVariant(${typeof this})::_readyCondition() is abstract and should therefore be overridden.`)}}const P={type:"ready"};const T=B;class F extends l{constructor(e=null){super("font",e,!1),this._needsUpdate=!1,this._fontVariant=null,this._handleFontReadyClosure=null,this.isValid=O}output(e){e[this._id]=this._fontVariant}update(e,t){if(this._fontVariant&&!this._fontVariant.isReady&&this._fontVariant.removeEventListener("ready",this._handleFontReadyClosure),this._value&&this._value instanceof T)this._fontVariant=this._value;else{const t=e._fontFamily._value;"string"!=typeof t&&(this._fontVariant=t.getVariant(e._fontWeight._value,e._fontStyle._value))}this._fontVariant&&(this._fontVariant._alterElementProperties(e),this._handleFontReadyClosure=function(e,t){return function(){t._needsUpdate=!0,e._glyphs._needsProcess=!0,t._fontVariant.removeEventListener("ready",t._handleFontReadyClosure),t._handleFontReadyClosure=null}}(e,this),this._fontVariant.isReady?this._handleFontReadyClosure():this._fontVariant.addEventListener("ready",this._handleFontReadyClosure),e._fontMaterial._defaultMaterial&&e._fontMaterial._defaultMaterial instanceof this._fontVariant.fontMaterial||(e._fontMaterial._defaultMaterial=new this._fontVariant.fontMaterial,e._fontMaterial._needsUpdate=!0))}set value(e){this.isValid(e)&&this._value!==e&&(this._value=e,this._needsUpdate=!0)}get value(){return this._value}get fontVariant(){return this._fontVariant}dispose(){this._handleFontReadyClosure&&(this._fontVariant.removeEventListener("ready",this._handleFontReadyClosure),this._handleFontReadyClosure=null),this._value=null,this._fontVariant=null}}function O(e){return e instanceof T||(console.warn(`.font value '${e}' is not valid. It requires a FontVariant instance. Aborted`),!1)}class z extends v{constructor(e){super("display",e),this._value="flex",this._allowsInherit=!1,this._needsUpdate=!1,this.isValidValue=W}computeOutputValue(e){e._visible._value="none"!==this._output}}const A=["none","flex"];function W(e){return-1!==A.indexOf(e)||(console.warn(`(.style) display value '${e}' is not valid. Aborted`),!1)}class D extends v{constructor(e){super("boxSizing",e),this._allowsInherit=!1,this.isValidValue=L}computeOutputValue(e){this._value=this._inheritedInput,e._bounds._needsUpdate=!0}}const E=["border-box","content-box"];function L(e){return-1!==E.indexOf(e)||(console.warn(`(.style) boxSizing value '${e}' is not valid. Aborted`),!1)}class H extends v{constructor(e,t){super(e,t,!1),this._input=t,this._value=new g.Color,this.output=this._outputValue}computeOutputValue(e){"inherit"!==this._input&&this._value.set(this._input)}set inline(e){this._input=this._inline=e,this._needsUpdate=!0}}class G extends v{constructor(e,t){super(e,t,!0),this.isValidValue=$,this._allowsInherit=!1,this._input=t,this._value=t,this.output=this._outputValue,this.computeOutputValue=this._computeFromInherited}_outputValue(e){e[this._id]=this._inheritedInput}}function $(e){return!(e<0&&e>1)||(console.warn(`(.style) styleFactorProperty('${this.id}') value '${e}' is not valid)`),!1)}class j extends v{constructor(e){super("backgroundImage",e,!0),this._input=null,this._allowsInherit=!1,this._textureSize=new g.Vector2(1,1),this.isValidValue=X}get value(){return this._value}output(e){e[this._id]=this._value,e.tSize=this._textureSize}computeOutputValue(e){this._value=this._inheritedInput,this._value instanceof g.Texture&&!this._value.image?console.warn("ThreeMeshUI - .backgroundImage :: Please provide preloaded texture in order to have accurate sizing."):this._needsProcess=!0}process(e){this._value?this._textureSize.set(this._value.image.width,this._value.image.height):this._textureSize.set(1,1)}}function X(e){return!0}class N extends v{constructor(e){super("backgroundSize",e,!0),this.isValidValue=K,this.output=this._outputValue}}const Y=["cover","contain","stretch"];function K(e){return-1!==Y.indexOf(e)||(console.warn(`(.style) backgroundSize value '${e}' is not valid. Aborted`),!1)}class q extends v{constructor(e){super("overflow",e,!0),this.isValidValue=Z,this._clippingPlanes=null,this._renderStrategy=this._emptyRender}update(e,t){void 0!==this._inline&&"unset"!==this._inline?this._input=this._inline:void 0!==this._computed&&(this._input=this._computed),this._allowsInherit||(this._inheritedInput=this.getInheritedInput(e)),this.computeOutputValue(e);for(const t of e._children._uis)t._overflow._needsUpdate=!0;this.output(t)}output(e){e.clippingPlanes=this._clippingPlanes}computeOutputValue(e){super.computeOutputValue(e),"hidden"===this._value?this._renderStrategy=this._propagateRender:(this._renderStrategy=this._emptyRender,this._clippingPlanes=null);const t=e._parent._value;if(null!==t){const e=t._overflow;if("hidden"!==e._value&&null===e._clippingPlanes||this._clippingPlanes)"visible"!==e._value&&null!==e._clippingPlanes||null===this._clippingPlanes||(this._clippingPlanes=null,this._renderStrategy=this._emptyRender,this._needsRender=!0);else{this._clippingPlanes=[new g.Plane(new g.Vector3(0,-1,0),1),new g.Plane(new g.Vector3(-1,0,0),1),new g.Plane(new g.Vector3(0,1,0),1),new g.Plane(new g.Vector3(1,0,0),1)];for(let e=0;e<this._clippingPlanes.length;e++)this._clippingPlanes[e].parent=t;null!==e._clippingPlanes&&this._clippingPlanes.push(...e._clippingPlanes),this._renderStrategy=this._hiddenRender,this._needsRender=!0}}}render(e){this._renderStrategy(e)}_emptyRender(e){}_hiddenRender(e){const t=e._parent._value,i=t._bounds._offsetHeight,n=t._bounds._offsetWidth,s=t._padding._value,r=t._borderWidth._value;for(let e=0;e<4&&e<this._clippingPlanes.length;e++){const a=this._clippingPlanes[e];switch(e%4){case 0:a.constant=i/2-(s.x+r.x);break;case 1:a.constant=n/2-(s.y+r.y);break;case 2:a.constant=i/2-(s.z+r.z);break;case 3:a.constant=n/2-(s.w+r.w)}a.applyMatrix4(t.matrixWorld)}for(let t=0;t<e._children._uis.length;t++){e._children._uis[t]._overflow._needsRender=!0}}_propagateRender(e){for(let t=0;t<e._children._uis.length;t++){e._children._uis[t]._overflow._needsRender=!0}}}const J=["visible","hidden"];function Z(e){return-1!==J.indexOf(e)||(console.warn(`(.style) overflow value '${e}' is not valid. Aborted`),!1)}const Q=["rem","em","%"],ee=function(e){return-1===Q.indexOf(e)?"rem":e};class te extends m{constructor(e){super("borderRadius",e),this._valueUV=this._value.clone(),this._input=this._vector4ValueSetter(new g.Vector4(0,0,0,0),e),this._mediation=!0,this._cornerTL=new g.Vector2(0,1),this._cornerTR=new g.Vector2(1,1),this._cornerBR=new g.Vector2(1,0),this._cornerBL=new g.Vector2(0,0);const t=new ie(this._valueUV,["x","y"]),i=new ie(this._valueUV,["z","w"]),n=new ie(this._valueUV,["x","w"]),s=new ie(this._valueUV,["y","z"]);t.complementaryMediation=i,i.complementaryMediation=t,n.complementaryMediation=s,s.complementaryMediation=n,this._sideMediators=[t,i,n,s],this._units="rem"}set units(e){this._units=ee(e),this._needsProcess=!0}get units(){return this._units}set mediation(e){e!==this._mediation&&(this._mediation=e,this._needsUpdate=!0)}get mediation(){return this._mediation}output(e){e.cornerTL=this._cornerTL,e.cornerTR=this._cornerTR,e.cornerBR=this._cornerBR,e.cornerBL=this._cornerBL}computeOutputValue(e){this._vector4ValueSetter(this._value,this._input),this._needsProcess=!0}process(e){this._needsRender=!0}render(e){this._valueUV.copy(this._value);const t=e._bounds._offsetWidth,i=e._bounds._offsetHeight;if("%"===this._units&&this._valueUV.divideScalar(100),"rem"===this._units&&this._valueUV.divideScalar(Math.min(t,i)),this._mediation)do{this._sideMediators.forEach((e=>e.computeValue())),this._sideMediators.sort(((e,t)=>e.value<t.value?1:-1)),this._sideMediators[0].value>1&&this._sideMediators[0].mediate()}while(this._sideMediators[0].value>1);let n=t>i?i/t:1,s=t<i?t/i:1;"%"===this._units&&(n=s=1),this._cornerTL.x=this._valueUV.x*n,this._cornerTL.y=1-this._valueUV.x*s,this._cornerTR.x=1-this._valueUV.y*n,this._cornerTR.y=1-this._valueUV.y*s,this._cornerBR.x=1-this._valueUV.z*n,this._cornerBR.y=this._valueUV.z*s,this._cornerBL.x=this._valueUV.w*n,this._cornerBL.y=this._valueUV.w*s}dispose(){for(const e of this._sideMediators)e.dispose();this._sideMediators=null,this._cornerTL=null,this._cornerTR=null,this._cornerBR=null,this._cornerBL=null,super.dispose()}set topLeft(e){this._input.x!==e&&(this._input.x=e,this._needsUpdate=!0)}get topLeft(){return this._input.x}set topRight(e){this._input.y!==e&&(this._input.y=e,this._needsUpdate=!0)}get topRight(){return this._input.y}set bottomRight(e){this._input.z!==e&&(this._input.z=e,this._needsUpdate=!0)}get bottomRight(){return this._input.z}set bottomLeft(e){this._input.w!==e&&(this._input.w=e,this._needsUpdate=!0)}get bottomLeft(){return this._input.w}set top(e){this._input.x===e&&this._input.y===e||(this._input.x=this._input.y=e,this._needsUpdate=!0)}get top(){return(this._input.x+this._input.y)/2}set right(e){this._input.y===e&&this._input.z===e||(this._input.y=this._input.z=e,this._needsUpdate=!0)}get right(){return(this._input.y+this._input.z)/2}set bottom(e){this._input.z===e&&this._input.w===e||(this._input.z=this._input.w=e,this._needsUpdate=!0)}get bottom(){return(this._input.z+this._input.w)/2}set left(e){this._input.w===e&&this._input.x===e||(this._input.w=this._input.x=e,this._needsUpdate=!0)}get left(){return(this._input.w+this._input.x)/2}}class ie{constructor(e,t){this._borderRadiuses=e,this._sideProperties=t,this._complementaryMediation=null,this._value=0}get value(){return this._value}set complementaryMediation(e){this._complementaryMediation=e}computeValue(){let e=0;for(const t of this._sideProperties)e+=this._borderRadiuses[t];this._value=e}mediate(e=!0){if(!(this._value<1)){for(const e of this._sideProperties)this._borderRadiuses[e]/=this._value;e&&this._complementaryMediation.mediate(!1)}}dispose(){this._complementaryMediation=null,this._borderRadiuses=null}}class ne extends m{constructor(e){super("borderWidth",e,!1),this._valueUV=this._value.clone(),this.output=this._outputValue,this._units="rem"}set units(e){this._units=ee(e),this._needsUpdate=!0}get units(){return this._units}computeOutputValue(e){this._vector4ValueSetter(this._value,this._input),this._needsProcess=!0,e._bounds._needsUpdate=!0,e._layouter._needsUpdate=!0}_outputValue(e){e[this._id]=this._valueUV}process(e){this._needsRender=!0,e._borderRadius._needsRender=!0}render(e){this._valueUV.copy(this._value);const t=e._bounds._offsetWidth,i=e._bounds._offsetHeight;if("%"===this._units&&this._valueUV,"rem"===this._units)0!==t&&(this._valueUV.w/=t,this._valueUV.y/=t),0!==i&&(this._valueUV.x/=i,this._valueUV.z/=i);else if("em"===this._units){if(0!==t){const e=t>i?i/t:1;this._valueUV.y*=e,this._valueUV.w*=e}if(0!==i){const e=t<i?t/i:1;this._valueUV.x*=e,this._valueUV.z*=e}}}}class se extends l{constructor(e,t=!0){super("visible",t,!0),this._needsUpdate=!1}update(e,t){e.visible=this._value,e._parent._value&&(e._parent._value._children._needsUpdate=!0)}set value(e){this.isValid(e)&&this._value!==e&&(this._value=e,this._needsUpdate=!0)}get value(){return this._value}}class re extends H{constructor(e){super("backgroundColor",e,!1),this._input=new g.Color(e)}computeOutputValue(e){e._backgroundMesh.visible=!("none"===this._input||"transparent"===this._input),"inherit"===this._input?this._value.set(this.getInheritedInput(e)):this._value.set(this._input)}set inline(e){this.isValidValue(e)&&e!==this._inline&&(this._input=this._inline=e,this._needsUpdate=!0)}}class ae extends l{constructor(e="untitled"){super(e,void 0,!1)}update(e,t){}output(e){}}class oe extends l{constructor(){super("inlineJustificator",null,!1),this._value=null}update(e,t){}process(e){const t=e._bounds._innerHeight,i=e._layouter._value,n=Math.abs(i.height);let s=(()=>{switch(e._alignItems._value){case"inherit":case"start":return t/2;case"end":return n-t/2;case"stretch":case"center":return n/2}})();const r=e._padding._value,a=e._borderWidth._value;s+=(-r.x+r.z)/2+(-a.x+a.z)/2,i.forEach((e=>{e.y+=s,e.forEach((e=>{e.offsetY+=s}))}))}}const ue=["start","center","end","stretch"],le=function(e){return-1!==ue.indexOf(e)||(console.warn(`(.style) alignItems value '${e}' is not valid. Aborted`),!1)};class he extends v{constructor(){super("alignItems","inherit",!0),this.isValidValue=le}}class de extends v{constructor(){super("textAlign","inherit",!0),this.isValidValue=_e}}const ce=["left","right","center","justify","justify-left","justify-right","justify-center"],_e=function(e){return-1!==ce.indexOf(e)||(console.warn(`(.style) textAlign value '${e}' is not valid. Aborted`),!1)};class pe extends v{constructor(){super("flexDirection","inherit",!0),this.isValid=ge}}const fe=["row","row-reverse","column","column-reverse"];function ge(e){return-1!==fe.indexOf(e)||(console.warn(`(.style) flexDirection value '${e}' is not valid. Aborted`),!1)}class ve extends v{constructor(){super("justifyContent","inherit",!0),this.isValidValue=be}}const me=["start","center","end","space-between","space-around","space-evenly"];function be(e){return-1!==me.indexOf(e)||(console.warn(`(.style) justifyContent value '${e}' is not valid. Aborted`),!1)}class ye extends v{constructor(){super("order",0,!0),this._value=0,this._input=0,this._allowsInherit=!1}computeOutputValue(e){this._value=this._inheritedInput,e._parent._value&&(e._parent._value._children._needsProcess=!0)}}class xe extends v{constructor(){super("position","static",!0),this._allowsInherit=!1,this._value="static",this._needsUpdate=!1,this.computeOutputValue=this._computeFromInherited,this.isValidValue=Se}_computeFromInherited(e){super._computeFromInherited(e),e._parent._value&&(e._parent._value._children._needsProcess=!0)}}const we=["static","absolute"];function Se(e){return-1!==we.indexOf(e)||(console.warn(`(.style) position value '${e}' is not valid. Aborted`),!1)}class Ve extends v{constructor(e,t=null){super(e,t,!0),this._input="auto",this._auto=!0,this._relative=!1,this._updateRequired=!0}set inline(e){this.isValidValue(e)&&e!==this._inline&&(this._inline=e,this._input!==this._inline&&this._parseInput())}get inline(){return this._inline}_parseInput(){let e=!0;if(void 0!==this._inline&&"unset"!==this._inline?this._input=this._inline:void 0!==this._computed?(this._computed===this._input&&(e=!1),this._input=this._computed):e="inherit"===this._input,e){if(this._auto=!this._input||"auto"===this._input,this._auto)this._relative=!1;else if(("string"==typeof this._input||this._input instanceof String)&&this._input.endsWith("%")){this._relative=!0,this._value=0;const e=parseFloat(this._input.replace("%","").trim());isNaN(e)||(this._value=e/100)}else this._relative=!1,this._value=this._input;this._needsUpdate=this._updateRequired=e}}update(e,t){if(this._updateRequired){this._updateRequired=!1,this._allowsInherit||(this._inheritedInput=this.getInheritedInput(e)),this.computeOutputValue(e);for(const t of e._children._uis)t[`_${this._id}`]._needsUpdate=!0;this.output(t),e._parent._value&&(e._parent._value._layouter._needsProcess=!0)}}computeOutputValue(e){e._bounds._needsUpdate=!0,e._renderer._needsRender=!0}getInheritedInput(e){if("inherit"!==this._input&&!this._auto)return this._input;const t=e._parent._value;return t?t[`_${this._id}`].getInheritedInput(t):this.getDefaultValue()}getDefaultValue(){return 0}get value(){return this._value}}class ke extends Ve{constructor(){super("width")}}class Ue extends Ve{constructor(){super("height")}computeOutputValue(e){super.computeOutputValue(e)}}class Re extends ae{constructor(){super("textContent"),this._needsUpdate=!1}set value(e){}process(e){let t="";for(let i=0;i<e.children.length;i++){const n=e.children[i];n.isUI&&(t+=n.textContent)}this._value=t}}class Ce extends v{constructor(e){super("fontStyle",e,!0),this.isValidValue=Me}}const Ie=["normal","italic"];function Me(e){return-1!==Ie.indexOf(e)||(console.warn(`(.style) fontStyle value '${e}' is not valid. Aborted`),!1)}class Be extends v{constructor(e){super("fontWeight",e,!0),this.isValid=Te}}const Pe=["100","200","300","400","500","600","700","800","900","light","normal","bold","bolder"];function Te(e){return-1!==Pe.indexOf(e.toString())||(console.warn(`(.style) fontWeight value '${e}' is not valid. Aborted`),!1)}class Fe{constructor(){this._size=42,this._lineHeight=42,this._lineBase=38,this._name="-",this._charset=""}get size(){return this._size}get lineHeight(){return this._lineHeight}get lineBase(){return this._lineBase}get name(){return this._name}get charset(){return this._charset}}class Oe extends Fe{constructor(e){super(),this._size=e.info.size,this._lineHeight=e.common.lineHeight,this._lineBase=e.common.base,this._name=e.info.face,this._textureWidth=e.common.scaleW,this._textureHeight=e.common.scaleH,this._charset=e.chars.map((e=>e.char)).join("")}get textureWidth(){return this._textureWidth}get textureHeight(){return this._textureHeight}}class ze{constructor(e){this._char="",this._width=1,this._heigth=1,this._xadvance=1,this._xoffset=0,this._yoffset=0,this._font=e}get font(){return this._font}get char(){return this._char}get width(){return this._width}get height(){return this._heigth}get xadvance(){return this._xadvance}get xoffset(){return this._xoffset}get yoffset(){return this._yoffset}set yoffset(e){this._yoffset=e}clone(e){throw new Error("Abstract... Need to be implemented")}asInlineGlyph(){throw new Error("Abstract... Need to be implemented")}}class Ae{constructor(){this._offsetX=0,this._offsetY=0,this._lineBreak=null,this._kerning=0,this._fontFactor=1,this._fontSize=0,this._cumulativeWidth=0,this._paddingLeft=0,this._paddingRight=0,this._marginLeft=0,this._marginRight=0}resetOffsets(){this._offsetX=this._offsetY=0,this._cumulativeWidth=0}get xadvance(){return 0}get xoffset(){return 0}get yoffset(){return 0}get width(){return 0}get height(){return 0}set lineBreak(e){this._lineBreak=e}get lineBreak(){return this._lineBreak}get anchor(){return 0}get kerning(){return this._kerning*this._fontFactor}set kerning(e){this._kerning=e}get fontSize(){return this._fontSize}set fontSize(e){this._fontSize=e}get lineHeight(){return 0}get offsetX(){return this._offsetX}set offsetX(e){this._offsetX=e}get offsetY(){return this._offsetY}set offsetY(e){this._offsetY=e}get cumulativeWidth(){return this._cumulativeWidth}set cumulativeWidth(e){this._cumulativeWidth=e}get marginLeft(){return this._marginLeft}set marginLeft(e){this._marginLeft=e}get marginRight(){return this._marginRight}set marginRight(e){this._marginRight=e}get paddingLeft(){return this._paddingLeft}set paddingLeft(e){this._paddingLeft=e}get paddingRight(){return this._paddingRight}set paddingRight(e){this._paddingRight=e}get lineBase(){return 0}set fontFactor(e){this._fontFactor=e}get fontFactor(){return this._fontFactor}}class We extends Ae{constructor(e){super(),this._typographic=e}get typographic(){return this._typographic}get xadvance(){return this._typographic.xadvance*this._fontFactor}get xoffset(){return this._typographic.xoffset*this._fontFactor}get yoffset(){return this._typographic.yoffset*this._fontFactor}get width(){return this._typographic.width*this._fontFactor}get height(){return this._typographic.height*this._fontFactor}get char(){return this._typographic.char}get anchor(){return this.yoffset}get lineHeight(){return this._typographic.font.lineHeight*this._fontFactor}get lineBase(){return this._typographic.font.lineBase*this._fontFactor}}class De extends We{constructor(e){super(e)}get uv(){return this.typographic.uv}}class Ee extends ze{constructor(e,t){super(e),this._char=t.char,this._width=t.width,this._heigth=t.height,this._xadvance=t.xadvance?t.xadvance:this._width,this._xoffset=t.xoffset?t.xoffset:0,this._yoffset=t.yoffset?t.yoffset:0,this._uv=t.uv?t.uv:null,isNaN(t.x)||(this._uv={left:t.x/e.textureWidth,right:(t.x+t.width)/e.textureWidth,top:1-(t.y+t.height)/e.textureHeight,bottom:1-t.y/e.textureHeight})}get uv(){return this._uv}clone(e){return new Ee(this._font,{char:e,width:this._width,height:this._heigth,xadvance:this._xadvance,xoffset:this._xoffset,yoffset:this._yoffset,uv:null})}asInlineGlyph(){return new De(this)}}class Le extends g.PlaneGeometry{constructor(e,t){let i=1,n=1;const s=e.typographic.font.size,r=t._segments.value;i=Math.ceil(e.typographic.width/s*r),n=Math.ceil(e.typographic.height/s*r),super(e.width,e.height,i,n),e.uv?(this._mapUVs(e),this._transformGeometry(e)):(this._nullifyUVs(),this.scale(0,0,1),this.translate(0,e.fontSize/2,0)),this.name="GlyphGeometry"}_mapUVs(e){const t=e.uv.right-e.uv.left,i=e.uv.bottom-e.uv.top,n=this.getAttribute("uv").array.slice(),s=[];for(let r=0;r<n.length;r+=2){const a=n[r],o=n[r+1];s.push(e.uv.left+t*a),s.push(e.uv.top+i*o)}this.setAttribute("uvG",new g.BufferAttribute(new Float32Array(s),2))}_nullifyUVs(){const e=[],t=this.getAttribute("uv").array.length;for(let i=0;i<t;i++)e.push(0);this.setAttribute("uvG",new g.BufferAttribute(new Float32Array(e),2))}_transformGeometry(e){this.translate(e.width/2,-e.height/2,0)}}const He="\nvarying vec2 vUvG;\nuniform sampler2D glyphMap;\nuniform vec2 unitRange;\n// functions from the original msdf repo:\n// https://github.com/Chlumsky/msdfgen#using-a-multi-channel-distance-field\nfloat median(float r, float g, float b) {\n\treturn max(min(r, g), min(max(r, g), b));\n}\nfloat screenPxRange() {\n\n\t// precomputed unitRange as recommended by Chlumsky\n\t// vec2 unitRange = vec2(pxRange)/vec2(textureSize(glyphMap, 0));\n\tvec2 screenTexSize = vec2(1.0)/fwidth(vUvG);\n\treturn max(0.5*dot(unitRange, screenTexSize), 1.0);\n}\nfloat tap(vec2 offsetUV) {\n\tvec3 msd = texture( glyphMap, offsetUV ).rgb;\n\tfloat sd = median(msd.r, msd.g, msd.b);\n\tfloat screenPxDistance = screenPxRange() * (sd - 0.5);\n\tfloat alpha = clamp(screenPxDistance + 0.5, 0.0, 1.0);\n\treturn alpha;\n}\n",Ge="\n\tfloat alpha;\n#ifdef NO_RGSS\n\n\talpha = tap( vUvG );\n\n#else\n\n\t// shader-based supersampling based on https://bgolus.medium.com/sharper-mipmapping-using-shader-based-supersampling-ed7aadb47bec\n\t// per pixel partial derivatives\n\tvec2 dx = dFdx(vUvG);\n\tvec2 dy = dFdy(vUvG);\n\t// rotated grid uv offsets\n\tvec2 uvOffsets = vec2(0.125, 0.375);\n\tvec2 offsetUV = vec2(0.0, 0.0);\n\t// supersampled using 2x2 rotated grid\n\talpha = 0.0;\n\toffsetUV.xy = vUvG + uvOffsets.x * dx + uvOffsets.y * dy;\n\talpha += tap(offsetUV);\n\toffsetUV.xy = vUvG - uvOffsets.x * dx - uvOffsets.y * dy;\n\talpha += tap(offsetUV);\n\toffsetUV.xy = vUvG + uvOffsets.y * dx - uvOffsets.x * dy;\n\talpha += tap(offsetUV);\n\toffsetUV.xy = vUvG - uvOffsets.y * dx + uvOffsets.x * dy;\n\talpha += tap(offsetUV);\n\talpha *= 0.25;\n\n#endif\n\n\talpha = clamp( alpha, 0.0, 1.0 );\n\n#ifdef INVERT_ALPHA\n\n\talpha = 1.0 - alpha;\n\n#endif\n\n\tdiffuseColor.a *= alpha;\n",$e=function(e,t,i){e.alphaTest=i,je(e,"USE_ALPHATEST",i>0)},je=function(e,t,i){e.defines&&(i?void 0===e.defines[t]&&(e.defines[t]="",e.needsUpdate=!0):void 0!==e.defines[t]&&(delete e.defines[t],e.needsUpdate=!0))},Xe=function(e,t,i){e.defines[t]&&e.defines[t]===i||(e.defines[t]=i,e.needsUpdate=!0)},Ne=function(e,t,i){e.userData[t]?e.userData[t].value=i:e.uniforms[t].value=i},Ye=function(e,t,i){e.userData[t].value=i};class Ke{static ensureMaterialOptions(e){e.transparent=!0,e.alphaTest=e.alphaTest||.02}static ensureDefines(e){e.defines||(e.defines={})}static ensureUserData(e,t){e.userData.glyphMap={value:t.glyphMap},e.userData.unitRange={value:new g.Vector2}}static bindUniformsWithUserData(e,t){e.uniforms.glyphMap=t.userData.glyphMap,e.uniforms.unitRange=t.userData.unitRange}static injectShaderChunks(e){Ke.injectVertexShaderChunks(e),Ke.injectFragmentShaderChunks(e)}static injectVertexShaderChunks(e){e.vertexShader=e.vertexShader.replace("#include <uv_pars_vertex>","#include <uv_pars_vertex>\n\nattribute vec2 uvG;\nvarying vec2 vUvG;\n"),e.vertexShader=e.vertexShader.replace("#include <uv_vertex>","#include <uv_vertex>\n\nvUvG = uvG;\n"),e.vertexShader=e.vertexShader.replace("#include <project_vertex>","#include <project_vertex>\n\ngl_Position.z -= 0.00001;\n")}static injectFragmentShaderChunks(e){e.fragmentShader=e.fragmentShader.replace("#include <uv_pars_fragment>","#include <uv_pars_fragment>\n"+He),e.fragmentShader=e.fragmentShader.replace("#include <alphamap_fragment>","#include <alphamap_fragment>\n"+Ge)}static from(e){return class extends e{static get fontMaterialProperties(){return Ke.mediation}constructor(e={}){Ke.ensureMaterialOptions(e),super(e),Ke.ensureDefines(this),Ke.ensureUserData(this,e),this._userDefinedOnBeforeCompile=e=>{},this._onBeforeCompile=this._cumulativeOnBeforeCompile}set onBeforeCompile(e){this._userDefinedOnBeforeCompile=e}get onBeforeCompile(){return this._onBeforeCompile}_cumulativeOnBeforeCompile=e=>{Ke.bindUniformsWithUserData(e,this),Ke.injectShaderChunks(e),this._userDefinedOnBeforeCompile(e)}}}static get mediation(){return qe}}const qe={clippingPlanes:{m:"clippingPlanes"},fontAlphaTest:{m:"alphaTest",t:$e},fontSide:{m:"side"},font:{m:"glyphMap",t:function(e,t,i){const n=i?i.texture:null,s=i?i.unitRange:new g.Vector2;if(void 0!==e[t])return e.glyphMap=n,void(e.unitRange=s);e.userData&&e.userData.glyphMap&&(e.userData.glyphMap.value=n,e.userData.unitRange.value=s)}},color:{m:"color"},fontOpacity:{m:"opacity"},fontSmooth:{m:"NO_RGSS",t:function(e,t,i){i&&"antialiased"!==i?e.defines.NO_RGSS="":delete e.defines.NO_RGSS,e.needsUpdate=!0}},invertAlpha:{m:"INVERT_ALPHA",t:je}},Je=`\nuniform vec3 diffuse;\nuniform float opacity;\n${He}\n#include <alphatest_pars_fragment>\n#include <clipping_planes_pars_fragment>\nvoid main() {\n\t// instead of <color_fragment> : vec4 diffuseColor\n\tvec4 diffuseColor = vec4( diffuse, opacity );\n\t${Ge}\n\t#include <alphatest_fragment>\n\t// instead of <output_fragment>\n\tgl_FragColor = diffuseColor;\n\t#include <clipping_planes_fragment>\n}\n`;class Ze extends g.ShaderMaterial{static get mediation(){return Ke.mediation}constructor(e={}){super({uniforms:{glyphMap:{value:null},diffuse:{value:null},opacity:{value:1},unitRange:{value:new g.Vector2(0,0)},alphaTest:{value:.02}},transparent:!0,clipping:!0,vertexShader:"\n\nattribute vec2 uvG;\nvarying vec2 vUvG;\n\n#include <clipping_planes_pars_vertex>\nvoid main() {\n\t\nvUvG = uvG;\n\n\t#include <begin_vertex>\n\t#include <project_vertex>\n\t\ngl_Position.z -= 0.00001;\n\n\t#include <clipping_planes_vertex>\n}\n",fragmentShader:Je,extensions:{derivatives:!0}}),this.defines.USE_ALPHATEST="",this.needsUpdate=!0,this.noRGSS=e.noRGSS||!1}get color(){return this.uniforms.diffuse.value}set color(e){this.uniforms.diffuse.value=e}set opacity(e){this.uniforms&&(this.uniforms.opacity.value=e)}get opacity(){return this.uniforms.opacity.value}get unitRange(){return this.uniforms.unitRange.value}set unitRange(e){this.uniforms.unitRange.value.copy(e)}get glyphMap(){return this.uniforms.glyphMap.value}set glyphMap(e){this.uniforms.glyphMap.value=e}get isDefault(){return this.constructor===Ze}get alphaTest(){return this.uniforms.alphaTest.value}set alphaTest(e){this.uniforms.alphaTest.value=e}}class Qe extends T{constructor(e,t,i,n){var s,r;if(super(e,t),this._unitRange=new g.Vector2(1,1),i.pages?this._buildData(i):(s=this,r=i,(new g.FileLoader).setResponseType("json").load(r,(e=>{s._buildData(e),s._checkReadiness()}))),n instanceof g.Texture)this._texture=n,this._buildTexture(n);else{if(!("string"==typeof n||n instanceof String))throw new Error(`ThreeMeshUI::MSDFVariant provided 'texture' parameter is '${typeof n}'. Only Texture and String allowed.`);!function(e,t){e._texture=(new g.TextureLoader).load(t,(t=>{e._buildTexture(t),e._checkReadiness()}))}(this,n)}this._defaultMaterialClass=Ze,this._checkReadiness()}get texture(){return this._texture}get unitRange(){return this._unitRange}set fontMaterial(e){this._defaultMaterialClass=e}get fontMaterial(){return this._defaultMaterialClass}_buildData(e){this._font=new Oe(e),this._kernings=this._buildKerningPairs(e),this._chars=this._buildCharacters(e),this._chars[" "]=this._buildCharacterWhite(e),this._chars["\n"]=this._buildCharacterWhite(e,"\n",.001,1),this._chars["\t"]=this._buildCharacterWhite(e,"\t",4,1),this._size=e.info.size,this._lineHeight=e.common.lineHeight,this._lineBase=e.common.base,this._distanceRange=e.distanceField.distanceRange,this._unitRange=new g.Vector2(this._distanceRange,this._distanceRange).divide(new g.Vector2(e.common.scaleW,e.common.scaleH))}_buildTexture(e){e.generateMipmaps=!1,e.minFilter=g.LinearFilter,e.magFilter=g.LinearFilter,e.needsUpdate=!0}_getFallbackCharacter(e){return st.missingCharacter(this,e)}getGeometricGlyph(e,t){return new Le(e,t)}_readyCondition(){return this._chars&&this._texture&&this._texture.image}_buildKerningPairs(e){const t={};for(let i=0;i<e.kernings.length;i++){const n=e.kernings[i];if(0===n.amount)continue;t[String.fromCharCode(n.first,n.second)]=n.amount}return t}_buildCharacters(e){const t={};for(let i=0;i<e.chars.length;i++){const n=e.chars[i];t[n.char]=new Ee(this._font,n)}return t}_buildCharacterWhite(e,t=" ",i=1,n=1){return new Ee(this._font,{char:t,width:e.info.size/3*i,height:.7*e.info.size*n})}_alterElementProperties(e){}}class et extends g.EventDispatcher{constructor(e){super(),this._name=e,this._variants=[],this._isReady=!1}get isReady(){return this._isReady}addVariant(e,t,i,n,s=!1){if(s||!this.getVariant(e,t)){this._isReady=!1;const s=new Qe(e,t,i,n);this._variants.push(s),s.isReady?this._checkReadiness():s.addEventListener("ready",this._checkReadiness)}else console.warn(`FontFamily('${this._name}')::addVariant() - Variant(${e}, ${t}) already exists.`);return this}addCustomImplementationVariant(e,t=!1){return t||!this.getVariant(e.weight,e.style)?(this._isReady=!1,this._variants.push(e),e.isReady?this._checkReadiness():e.addEventListener("ready",this._checkReadiness)):console.warn(`FontFamily('${this._name}')::addCustomImplementationVariant() - Variant(${e.weight}, ${e.style}) already exists.`),this}getVariant(e,t){return this._variants.find((i=>i.weight===e&&i.style===t))}get name(){return this._name}_checkReadiness=()=>{var e;this._variants.every((e=>e.isReady))&&((e=this)._isReady=!0,e.dispatchEvent(tt))}}const tt={type:"ready"};const it={};let nt=function(e,t){return console.error(`The character '${t}' is not included in the font characters set.`)," "};const st={addFontFamily:function(e){return it[e]&&console.error(`FontLibrary::addFontFamily - Font('${e}') is already registered`),it[e]=new et(e),it[e]},getFontFamily:function(e){return it[e]},prepare:function(e){const t=[...arguments];t.forEach((e=>{if(!(e instanceof et))throw new Error(`FontLibrary::prepare() - One of the provided parameter is not a FontFamily. Instead ${typeof e} given.`)}));const i=function(){return t.every((e=>e.isReady))};return new Promise(((e,n)=>{if(i())e();else for(let n=0;n<t.length;n++){const s=t[n];s.isReady||s.addEventListener("ready",(()=>{i()&&e()}))}}))},setMissingCharacterHandler:function(e){nt=e},missingCharacter:function(e,t){return nt(e,t)}};class rt extends v{constructor(){super("fontFamily","inherit",!0)}computeOutputValue(e){if(this._input instanceof et)this._value=this._input;else if("inherit"===this._input);else if("string"==typeof this._input){const e=st.getFontFamily(this._input);e?this._value=e:console.warn(`(.style) fontFamily, the font '${this._input}' is not registered. Aborted.`)}else console.warn("(.style) fontFamily requires a registered fontFamily instance, or the id of a registered fontFamily."),console.warn("If you want to set a specific font, please use .font property instead.")}get value(){return this._value}getInheritedInput(e){if("inherit"!==this._input)return this._input;const t=e._parent._value;return t?t[`_${this._id}`].getInheritedInput(t):this.getDefaultValue()}}class at extends v{constructor(){super("lineHeight","inherit",!0)}update(e,t){super.update(e,t),e._layouter._needsProcess=!0}}class ot extends v{constructor(){super("whiteSpace","inherit"),this.isValidValue=lt}}const ut=["normal","nowrap","pre","pre-line","pre-wrap"];function lt(e){return-1!==ut.indexOf(e)||(console.warn(`(.style) whiteSpace value '${e}' is not valid. Aborted`),!1)}class ht extends v{constructor(){super("letterSpacing","inherit",!0)}}class dt extends v{constructor(){super("fontSize","inherit",!0),this._fontRelative=!1}update(e,t){this._inheritedInput=this.getInheritedInput(e),this._inheritedInput,this._value=function(e,t){if(t._fontSize._fontRelative=!1,!isNaN(e))return e;if(e.endsWith("em"))return t._fontSize._fontRelative=!0,parseFloat(e.replace(/[^0-9.]+/,""))*t._parent._value._fontSize.getInheritedInput(t._parent._value)}(this._inheritedInput,e),this._value,this.computeOutputValue(e);for(const t of e._children._uis){const e=t[`_${this._id}`];if(!e)continue;("inherit"===(e._input?e._input:e._value)||e._fontRelative)&&(t[`_${this._id}`]._needsUpdate=!0)}this.output(t)}computeOutputValue(e){}}class ct extends l{constructor(){super("segments",1,!1)}}class _t extends d{constructor(){super("invertAlpha","inherit")}}class pt extends v{constructor(){super("fontKerning","inherit"),this.isValidValue=gt}}const ft=["normal","none","inherit"];function gt(e){return-1!==ft.indexOf(e)||(console.warn(`(.style) fontKerning value '${e}' is not valid. Aborted`),!1)}class vt extends d{constructor(e){super(e,"inherit",!0)}}class mt extends d{constructor(e){super(e,"inherit",!1),this._mediation={},this._defaultMaterial=null}update(e,t){this._notInheritedValue=this._value,"inherit"===this._notInheritedValue?this._notInheritedValue=this.getInheritedInput(e):this.propagate(e),this._notInheritedValue?this._notInheritedValue.constructor.mediation?this._mediation={...this._notInheritedValue.constructor.mediation}:this._mediation={clippingPlanes:{m:"clippingPlanes"},fontAlphaTest:{m:"alphaTest",t:$e},fontSide:{m:"side"},color:{m:"color"},fontOpacity:{m:"opacity"}}:this._mediation={},e._transferToFontMaterial(),this._outputValue(t)}getInheritedInput(e){if("inherit"!==this._value)return this._value;let t=e,i=null;for(;t._parent._value;)if(t=t._parent._value,"inherit"!==t[`_${this._id}`]._value){i=t[`_${this._id}`]._value;break}return null!==i?i:this.getDefaultValue()}getDefaultValue(){return this._defaultMaterial}}class bt extends v{constructor(){super("verticalAlign","inherit",!0),this.isValidValue=xt}}const yt=["inherit","baseline","sub","super"],xt=function(e){return-1!==yt.indexOf(e)||(console.warn(`(.style) verticalAlign value '${e}' is not valid. Aborted`),!1)};class wt extends g.Object3D{constructor(e,t){super(),Object.defineProperties(this,{isUI:{configurable:!1,enumerable:!0,value:!0}});let i=t.uiType||"default";t.uiType&&delete t.uiType,Object.defineProperties(this,{uiType:{configurable:!1,enumerable:!0,value:i}}),this._backgroundMesh=null,this._backgroundMaterial=null,this._backgroundCustomDepthMaterial=null,this._backgroundMaterialMediation={},this._backgroundMeshMediation={backgroundCastShadow:{m:"castShadow"},backgroundReceiveShadow:{m:"receiveShadow"},renderOrder:{m:"renderOrder"}},this._fontMesh=null,this._fontMaterial=new mt("fontMaterial"),this._fontCustomDepthMaterial=new mt("fontCustomDepthMaterial"),this._fontMeshMediation={fontMaterial:{m:"material"},fontCustomDepthMaterial:{m:"customDepthMaterial",t:S},fontCastShadow:{m:"castShadow"},fontReceiveShadow:{m:"receiveShadow"},renderOrder:{m:"renderOrder"}};const n=u(null,this.uiType);this._children=e.children?new e.children:new ae("children"),this._parent=new k,this.addEventListener("added",this._rebuildParentUI),this.addEventListener("removed",this._rebuildParentUI),this._backgroundSide=new C("backgroundSide",n.backgroundSide),this._fontSide=new C("fontSide",n.fontSide),this._backgroundAlphaTest=new R("backgroundAlphaTest",n.backgroundAlphaTest),this._fontAlphaTest=new R("fontAlphaTest",n.fontAlphaTest),this._visible=new se("visible",!0),this._backgroundCastShadow=new vt("backgroundCastShadow"),this._fontCastShadow=new vt("fontCastShadow"),this._backgroundReceiveShadow=new vt("backgroundReceiveShadow"),this._fontReceiveShadow=new vt("fontReceiveShadow"),this._renderOrder=new h,this._segments=e.segments?new e.segments:new ct,this._bounds=e.bounds?new e.bounds:new ae("bounds"),this._order=new ye,this._padding=new b(n.padding),this._margin=new x(n.margin),this._position=new xe(n.position),this._flexDirection=e.flexDirection?new e.flexDirection:new pe,this._justifyContent=e.justifyContent?new e.justifyContent:new ve,this._alignItems=e.alignItems?new e.alignItems:new he,this._display=new z("flex"),this._boxSizing=new D("border-box"),this._width=new ke,this._height=new Ue,this._backgroundColor=e.backgroundColor?new e.backgroundColor(n.backgroundColor):new re(n.backgroundColor),this._backgroundOpacity=new G("backgroundOpacity",n.backgroundOpacity),this._backgroundImage=new j,this._backgroundSize=new N("cover"),this._color=e.color?new e.color(n.color):new H("color",n.color),this._fontOpacity=new G("fontOpacity","inherit"),this._whiteSpace=e.whiteSpace?new e.whiteSpace:new ot,this._fontFamily=e.fontFamily?new e.fontFamily:new rt,this._fontStyle=e.fontStyle?new e.fontStyle(n.fontStyle):new Ce(n.fontStyle),this._fontWeight=e.fontWeight?new e.fontWeight(n.fontWeight):new Be(n.fontWeight),this._fontSize=e.fontSize?new e.fontSize:new dt,this._lineHeight=e.lineHeight?new e.lineHeight:new at,this._fontKerning=e.fontKerning?new e.fontKerning:new pt,this._letterSpacing=e.letterSpacing?new e.letterSpacing:new ht,this._overflow=new q("visible"),this._borderRadius=new te(n.borderRadius),this._borderWidth=new ne(n.borderWidth),this._borderColor=e.borderColor?new e.borderColor:new H("borderColor",n.borderColor),this._borderOpacity=new G("borderOpacity",n.borderOpacity),this._font=new F,this._lineBreak=e.lineBreak?new e.lineBreak:new ae("lineBreak"),this._textContent=e.textContent?new e.textContent:new Re,this._glyphs=e.glyphs?new e.glyphs:new ae("glyphs"),this._inlines=e.inlines?new e.inlines:new ae("inlines"),this._layouter=e.layouter?new e.layouter:new ae("layouter"),this._inlineJustificator=new oe,this._textAlign=e.textAlign?new e.textAlign:new de,this._verticalAlign=e.verticalAlign?new e.verticalAlign:new bt,this._autoSize=e.autoSize?new e.autoSize:new ae("autoSize"),this._renderer=e.renderer?new e.renderer:new ae("renderer"),this._offset=new c,this._invertAlpha=new _t,this._fontSmooth=e.fontSmooth?new e.fontSmooth:new _,this._components=[this._textContent,this._children,this._parent,this._autoSize,this._fontFamily,this._fontStyle,this._fontWeight,this._font,this._whiteSpace,this._glyphs,this._inlines,this._visible,this._backgroundSide,this._fontSide,this._backgroundAlphaTest,this._fontAlphaTest,this._backgroundCastShadow,this._fontCastShadow,this._backgroundReceiveShadow,this._fontReceiveShadow,this._renderOrder,this._segments,this._fontSize,this._padding,this._margin,this._width,this._height,this._borderWidth,this._boxSizing,this._bounds,this._position,this._flexDirection,this._justifyContent,this._alignItems,this._order,this._display,this._fontOpacity,this._color,this._backgroundColor,this._backgroundOpacity,this._backgroundImage,this._backgroundSize,this._lineHeight,this._fontKerning,this._letterSpacing,this._borderRadius,this._borderColor,this._borderOpacity,this._lineBreak,this._offset,this._verticalAlign,this._layouter,this._inlineJustificator,this._textAlign,this._invertAlpha,this._fontSmooth,this._fontMaterial,this._fontCustomDepthMaterial,this._overflow,this._renderer],this._onAfterUpdates=[],t.backgroundSide||(t.backgroundSide=0),t&&this.set(t)}update(){const e={};for(const t of this._components)t._needsUpdate&&(t.update(this,e),t._needsUpdate=!1);this._transferToBackgroundMesh(e),this._transferToFontMesh(e),this._transferToBackgroundMaterial(e),this._transferToFontMaterial(e);for(const e of this._children._uis)e.update()}process(){for(const e of this._children._uis)e.process();for(const e of this._components)e._needsProcess&&(e.process(this),e._needsProcess=!1)}render(){for(let e=0;e<this._components.length;e++){const t=this._components[e];t._needsRender&&(t.render(this),t._needsRender=!1)}for(const e of this._children._uis)e.render()}set(e){if(e.fontTexture&&(console.warn("ThreeMeshUI::set( {fontTexture} ) is deprecated. Please use fontLibrary to register font families and variants."),e.fontFamily)){const t=e.fontFamily.pages?e.fontFamily.info.face:e.fontFamily;let i=st.getFontFamily(t);if(!i){const n=e.fontStyle?e.fontStyle:"normal",s=e.fontWeight?e.fontWeight:"normal";i=st.addFontFamily(t).addVariant(s,n,e.fontFamily,e.fontTexture)}e.fontFamily=i,delete e.fontTexture}for(let t of Object.keys(e)){const i=e[t];switch(t){case"contentDirection":console.warn("ThreeMeshUI v7xx: property `contentDirection` is deprecated and has been renamed as `flexDirection`"),t="flexDirection";break;case"interLine":console.warn("ThreeMeshUI v7xx: property `interLine` is deprecated and has been renamed as `lineHeight`"),t="lineHeight";break;case"content":console.warn("ThreeMeshUI v7xx: property `content` is deprecated and has been renamed as `textContent`"),t="textContent";break;case"fontColor":console.warn("ThreeMeshUI v7xx: property `fontColor` is deprecated and has been renamed as `color`"),t="color";break;case"hiddenOverflow":console.warn("ThreeMeshUI v7xx: property `hiddenOverflow` is deprecated and has been renamed as `overflow`"),t="overflow";break;case"backgroundTexture":console.warn("ThreeMeshUI v7xx: property `backgroundTexture` is deprecated and has been renamed as `backgroundImage`"),t="backgroundImage";break;case"alignContent":console.warn("ThreeMeshUI v7xx: property `alignContent` is deprecated and has been renamed as `alignItems`"),t="alignItems";break;case"borderTopColor":case"borderBottomColor":case"borderLeftColor":case"borderRightColor":t="borderColor"}switch(t){case"fontSmooth":case"renderOrder":case"segments":case"visible":case"offset":case"fontSide":case"backgroundSide":case"fontCastShadow":case"backgroundCastShadow":case"fontReceiveShadow":case"backgroundReceiveShadow":case"fontMaterial":case"fontCustomDepthMaterial":this[`_${t}`].value=i;break;case"flexDirection":case"justifyContent":case"alignItems":case"color":case"fontFamily":case"fontOpacity":case"fontKerning":case"fontSize":case"fontStyle":case"fontWeight":case"textAlign":case"letterSpacing":case"lineHeight":case"whiteSpace":case"breakOn":case"width":case"height":case"padding":case"margin":case"backgroundColor":case"backgroundOpacity":case"backgroundImage":case"backgroundSize":case"borderColor":case"borderOpacity":case"borderRadius":case"borderWidth":case"overflow":case"order":case"boxSizing":case"position":case"verticalAlign":this[`_${t}`]&&(this[`_${t}`].inline=i);break;case"paddingTop":this._padding.top=i;break;case"paddingRight":this._padding.right=i;break;case"paddingBottom":this._padding.bottom=i;break;case"paddingLeft":this._padding.left=i;break;case"marginTop":this._margin.top=i;break;case"marginRight":this._margin.right=i;break;case"marginBottom":this._margin.bottom=i;break;case"marginLeft":this._margin.left=i;break;case"borderTopWidth":this._borderWidth.top=i;break;case"borderRightWidth":this._borderWidth.right=i;break;case"borderBottomWidth":this._borderWidth.bottom=i;break;case"borderLeftWidth":this._borderWidth.left=i;break;case"borderTopLeftRadius":this._borderRadius.topLeft=i;break;case"borderTopRightRadius":this._borderRadius.topRight=i;break;case"borderBottomRightRadius":this._borderRadius.bottomRight=i;break;case"borderBottomLeftRadius":this._borderRadius.bottomLeft=i;break;case"side":case"castShadow":case"receiveShadow":const e=t.charAt(0).toUpperCase()+t.substr(1);this[`_background${e}`].value=i,this[`_font${e}`].value=i;break;default:void 0!==this[t]?this[t]=i:void 0!==this[`_${t}`]&&(this[`_${t}`].value=i)}}}get(e){switch(e){case"overflow":case"width":case"height":return this[`_${e}`].inline}}_rebuildChildrenLists(){this._children._needsUpdate=!0}_rebuildParentUI=()=>{this._parent._needsUpdate=!0,this.parent&&!this.parent.isUI?(St.register(this),this.activatePseudoState("root")):(St.remove(this),this.deactivatePseudoState("root"))};add(e){let t=!1;for(let e=0;e<arguments.length;e++)super.add(arguments[e]),arguments[e].isUI&&(t=!0);return t&&this._rebuildChildrenLists(),this}remove(e){for(const e of Object.keys(arguments))arguments[e].isInline&&this.update(null,!0);return super.remove(...arguments),this._rebuildChildrenLists(),this}clear(){return this.removeFromParent(),this.traverse((e=>{e.material&&e.material.dispose(),e.geometry&&e.geometry.dispose()})),super.clear(),this._backgroundMesh=null,this._backgroundMaterial=null,this._backgroundMaterialMediation=null,this._backgroundMeshMediation=null,this._children.dispose(),this._children=null,this._parent.dispose(),this._parent=null,this._backgroundSide=null,this._backgroundAlphaTest=null,this._visible=null,this._backgroundCastShadow=null,this._backgroundReceiveShadow=null,this._renderOrder=null,this._segments=null,this._bounds=null,this._boxSizing=null,this._padding=null,this._margin=null,this._position=null,this._flexDirection=null,this._justifyContent=null,this._alignItems=null,this._display=null,this._backgroundColor=null,this._backgroundOpacity=null,this._backgroundSize=null,this._fontOpacity=null,this._color=null,this._whiteSpace=null,this._fontFamily=null,this._fontStyle=null,this._fontWeight=null,this._lineHeight=null,this._fontKerning=null,this._letterSpacing=null,this._overflow=null,this._textAlign=null,this._font=null,this._lineBreak=null,this._layouter=null,this}get textContent(){return this._textContent.process(this),this._textContent._value}get backgroundMaterial(){return this._backgroundMaterial}set backgroundMaterial(e){this._backgroundMaterial=e,this._backgroundMaterialMediation={...e.constructor.mediation},this._transferToBackgroundMaterial(),this._backgroundMesh&&(this._backgroundMesh.material=this._backgroundMaterial,Ne(e,"frameSize",this._backgroundMesh.scale))}set backgroundCustomDepthMaterial(e){this._backgroundCustomDepthMaterial=e,this._transferToBackgroundMaterial(),this._backgroundMesh&&(this._backgroundMesh.customDepthMaterial=this._backgroundCustomDepthMaterial)}get backgroundCustomDepthMaterial(){return this._backgroundCustomDepthMaterial}_transferToBackgroundMaterial(e=null){if(!e){e={};for(const t of this._components)t.output(e)}V.mediate(this,this._backgroundMaterial,e,this._backgroundMaterialMediation,this._backgroundCustomDepthMaterial)}set backgroundSide(e){this._backgroundSide.value=e,this._backgroundMaterial&&(this._backgroundMaterial.side=e)}get backgroundSide(){return this._backgroundSide.value}set backgroundAlphaTest(e){this._backgroundAlphaTest.value=e,this._backgroundMaterial&&(this._backgroundMaterial.alphaTest=e)}get backgroundAlphaTest(){return this._backgroundAlphaTest.value}get fontMaterial(){return this._fontMaterial.value}set fontMaterial(e){this._fontMaterial.value=e}set fontCustomDepthMaterial(e){this._fontCustomDepthMaterial.value=e}get fontCustomDepthMaterial(){return this._fontCustomDepthMaterial.value}_transferToFontMaterial(e=null){const t=this._fontMaterial.value;if(t){if(!e){e={};for(const t of this._components)t.output(e)}V.mediate(this,t,e,this._fontMaterial._mediation,this._fontCustomDepthMaterial.value)}}set fontSide(e){this._fontSide.value=e}get fontSide(){return this._fontSide.value}set fontAlphaTest(e){this._fontAlphaTest.value=e}get fontAlphaTest(){return this._fontAlphaTest.value}_transferToBackgroundMesh(e=null){if(!e){e={};for(const t of this._components)t.output(e)}V.mediate(this,this._backgroundMesh,e,this._backgroundMeshMediation)}setBackgroundMesh(e){this._backgroundMesh&&(this.remove(this._backgroundMesh),this.unbindBackgroundMeshProperties()),this._backgroundMesh=e,this._backgroundMesh&&(this.bindBackgroundMeshProperties(),this._backgroundCustomDepthMaterial&&(this._backgroundMesh.customDepthMaterial=this._backgroundCustomDepthMaterial),this._backgroundMaterial&&Ne(this._backgroundMaterial,"frameSize",this._backgroundMesh.scale),this._transferToBackgroundMesh(),this.add(this._backgroundMesh))}bindBackgroundMeshProperties(){}unbindBackgroundMeshProperties(){}activatePseudoState(e){}deactivatePseudoState(e){}togglePseudoState(e){}hasPseudoState(e){return!1}set borderRadiusMediation(e){this._borderRadius.mediation=e}set backgroundCastShadow(e){this._backgroundCastShadow&&(this._backgroundCastShadow.value=e)}get backgroundCastShadow(){return this._backgroundCastShadow}set backgroundReceiveShadow(e){this._backgroundReceiveShadow&&(this._backgroundReceiveShadow.value=e)}get backgroundReceiveShadow(){return this._backgroundReceiveShadow}set renderOrder(e){this._renderOrder&&(this._renderOrder.value=e)}get renderOrder(){return this._renderOrder.value}_transferToFontMesh(e=null){if(this._fontMesh){if(!e){e={};for(const t of this._components)t.output(e)}V.mediate(this,this._fontMesh,e,this._fontMeshMediation)}}setFontMesh(e){this._fontMesh&&(this.remove(this._fontMesh),this._fontMesh.material&&this._fontMesh.material.dispose?.(),this._fontMesh.geometry&&this._fontMesh.geometry.dispose?.(),this._fontMesh=null,this.unbindFontMeshProperties()),this._fontMesh=e,this._fontMesh&&(this._fontMesh.raycast=()=>{},this.bindFontMeshProperties(),this._transferToFontMaterial(),this._transferToFontMesh(),this.add(this._fontMesh))}bindFontMeshProperties(){}unbindFontMeshProperties(){}set fontCastShadow(e){this._fontCastShadow&&(this._fontCastShadow.value=e)}get fontCastShadow(){return this._fontCastShadow}set fontReceiveShadow(e){this._fontReceiveShadow&&(this._fontReceiveShadow.value=e)}get fontReceiveShadow(){return this._fontReceiveShadow}set segments(e){this._segments.value=e}get segments(){return this._segments.value}set onAfterUpdate(e){console.warn("ThreeMeshUI v7xx : `onAfterUpdate()` property has been deprecated, please rely on `addAfterUpdate` instead."),this.addAfterUpdate(e)}addAfterUpdate(e){this._onAfterUpdates.push(e)}removeAfterUpdate(e){const t=this._onAfterUpdates.indexOf(e);-1!==t&&this._onAfterUpdates.splice(t,1)}performAfterUpdate(){for(let e=0;e<this._onAfterUpdates.length;e++)this._onAfterUpdates[e]()}appendProperty(e,t){this[`_${e}`]=t,this._components.push(t)}replaceProperty(e,t){const i=this[`_${e}`],n=this._components.indexOf(i);return this._components[n]=this[`_${e}`]=t,t.needsUpdate=!0,i}}class St{static register(e){this.elements.includes(e)||this.elements.push(e)}static remove(e){const t=this.elements.indexOf(e);-1!==t&&this.elements.splice(t,1)}static update(){for(const e of this.elements)e.update(),e.process(),e.process(),e.render()}}St.elements=[];const Vt="\n\n// FrameBorder vertex pars\nattribute vec2 uvB;\nvarying vec2 vUvB;\n\n",kt="\n\n// borders sequences are : x:TOP, y:RIGHT, z:BOTTOM, w:LEFT\nuniform vec4 borderWidth;\nuniform vec3 borderColor;\nuniform float borderOpacity;\nuniform vec4 borderRadius;\n\nuniform vec2 cornerTL;\nuniform vec2 cornerTR;\nuniform vec2 cornerBR;\nuniform vec2 cornerBL;\n\nvarying vec2 vUvB;\n\nfloat getEllipticFactor( vec2 uv, vec2 center, float radiusX, float radiusY )\n{\n\n\t\tfloat edx = uv.x - center.x;\n\t\tfloat edy = uv.y - center.y;\n\n\t\tfloat ddx = (edx * edx) / (radiusX * radiusX);\n\t\tfloat ddy = (edy * edy) / (radiusY * radiusY);\n\n\t\treturn ddx + ddy;\n\n}\n\n",Ut="\n\nvec4 borderColor = vec4( borderColor, borderOpacity );\n\n// This could be tweak to produce more smoothing\nfloat mult = 1.0;\n\n// Step 1 ----------------------------------------------\n// Draw the four borders ( top - right - bottom - left )\n// Without worrying about radiuses ( Straight boorders )\n\n// Top\nfloat topBorderUVy = 1.0 - borderWidth.x;\nif( borderWidth.x > 0.0 && vUvB.y > topBorderUVy )\n{\n\n\tfloat w = fwidth( 1.0 - vUvB.y ) * mult;\n\tfloat step = smoothstep( topBorderUVy , topBorderUVy + w , vUvB.y );\n\tdiffuseColor = mix( diffuseColor, borderColor, step );\n\n}\n\n// Left\nfloat leftBorderUVx = borderWidth.w;\nif( borderWidth.w > 0.0 && vUvB.x < leftBorderUVx )\n{\n\n\tfloat w = fwidth( vUvB.x ) * mult ;\n\tfloat step = smoothstep( leftBorderUVx , leftBorderUVx - w , vUvB.x );\n\tdiffuseColor = mix( diffuseColor, borderColor, step );\n\n}\n\n// Bottom\nfloat bottomBorderUVy = borderWidth.z;\nif( borderWidth.z > 0.0 && vUvB.y < bottomBorderUVy )\n{\n\tfloat w = fwidth( vUvB.y ) * mult;\n\tfloat step = smoothstep( bottomBorderUVy , bottomBorderUVy - w , vUvB.y );\n\tdiffuseColor = mix( diffuseColor, borderColor, step );\n}\n\n// Right\nfloat rightBorderUVx = 1.0 - borderWidth.y;\nif( borderWidth.y > 0.0 && vUvB.x > rightBorderUVx )\n{\n\tfloat w = fwidth( 1.0 - vUvB.x ) * mult;\n\tfloat step = smoothstep( rightBorderUVx , rightBorderUVx + w , vUvB.x );\n\tdiffuseColor = mix( diffuseColor, borderColor, step );\n}\n\n\n// Step 2 ----------------------------------------------\n// Process each corners ( topLeft, topRight, bottomRight, bottomLeft )\n// To transparentize outside radiuses\n// To draw ellipse border on the corner\n\n\n// Top Left corner\nif( vUvB.x < cornerTL.x && vUvB.y > cornerTL.y ) {\n\n\t\t// Only draw border if width is set\n\t\tif( borderWidth.w + borderWidth.x > 0.0 ){\n\n\t\t\tfloat borderFactor = getEllipticFactor( vUvB, cornerTL, cornerTL.x - borderWidth.w,  ( 1.0 - cornerTL.y ) - borderWidth.x );\n\t\t\tfloat step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );\n\t\t\tdiffuseColor = mix( diffuseColor, borderColor, step );\n\n\t\t}\n\n\t\t// Then then radius\n\t\tfloat radiusFactor = getEllipticFactor( vUvB, cornerTL, cornerTL.x, 1.0 - cornerTL.y );\n\t\tfloat alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );\n\t\tdiffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );\n\n}\n// Bottom Left\nif( vUvB.x < cornerBL.x && vUvB.y < cornerBL.y ) {\n\n\t\tif( borderWidth.w + borderWidth.z > 0.0 ){\n\n\t\t\tfloat borderFactor = getEllipticFactor( vUvB, cornerBL, cornerBL.x - borderWidth.w,  cornerBL.y - borderWidth.z );\n\t\t\tfloat step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );\n\t\t\tdiffuseColor = mix( diffuseColor, borderColor, step );\n\n\t\t}\n\n\n\t\tfloat radiusFactor = getEllipticFactor( vUvB, cornerBL, cornerBL.x, cornerBL.y );\n\t\tfloat alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );\n\t\tdiffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );\n\n}\n// Top Right\nif( vUvB.x > cornerTR.x && vUvB.y > cornerTR.y ) {\n\n\t\tif( borderWidth.y + borderWidth.x > 0.0 ){\n\n\t\t\tfloat borderFactor = getEllipticFactor( vUvB, cornerTR, ( 1.0 - cornerTR.x ) - borderWidth.y,  ( 1.0 - cornerTR.y ) - borderWidth.x );\n\t\t\tfloat step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );\n\t\t\tdiffuseColor = mix( diffuseColor, borderColor, step );\n\n\t\t}\n\n\t\tfloat radiusFactor = getEllipticFactor( vUvB, cornerTR, 1.0 - cornerTR.x, 1.0 - cornerTR.y );\n\t\tfloat alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );\n\t\tdiffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );\n\n}\n// Bottom Right\nif( vUvB.x > cornerBR.x && vUvB.y < cornerBR.y ) {\n\n\t\tif( borderWidth.y + borderWidth.z > 0.0 ){\n\n\t\t\tfloat borderFactor = getEllipticFactor( vUvB, cornerBR, ( 1.0 - cornerBR.x ) - borderWidth.y,  cornerBR.y - borderWidth.z );\n\t\t\tfloat step = smoothstep( 1.0, 1.0 + fwidth( borderFactor ) * mult, borderFactor );\n\t\t\tdiffuseColor = mix( diffuseColor, borderColor, step );\n\n\t\t}\n\n\t\tfloat radiusFactor = getEllipticFactor( vUvB, cornerBR, 1.0 - cornerBR.x, cornerBR.y );\n\t\tfloat alphaStep = smoothstep( 1.0 , 1.0 + fwidth(radiusFactor) * mult , radiusFactor );\n\t\tdiffuseColor.a = mix( diffuseColor.a, 0.0, alphaStep );\n\n}\n\n",Rt="\n\n// To be removed - required for both border and background\nuniform vec3 frameSize;\nuniform vec2 textureSize;\n\n",Ct="\n\n#ifdef USE_MAP\n\nvec4 sampleTexture() {\n\n\tvec2 uv = vUv;\n\n\t// default stretch\n\t#if BACKGROUND_MAPPING != 0\n\n\tfloat textureRatio = textureSize.x / textureSize.y;\n\tfloat panelRatio = frameSize.x / frameSize.y;\n\tfloat ratio = panelRatio / textureRatio;\n\tfloat ratio2 = textureRatio / panelRatio;\n\n\t\t// contain\n\t\t#if BACKGROUND_MAPPING == 1\n\t\tif ( textureRatio < panelRatio ) { // repeat on X\n\t\t\tfloat newX = uv.x * ratio;\n\t\t\tnewX += 0.5 - 0.5 * ratio;\n\t\t\tuv.x = newX;\n\t\t} else { // repeat on Y\n\t\t\tfloat newY = uv.y * ratio2;\n\t\t\tnewY += 0.5 - 0.5 * ratio2;\n\t\t\tuv.y = newY;\n\t\t}\n\t\t#else\n\t\t// cover\n\t\tif ( textureRatio < panelRatio ) { // stretch on Y\n\t\t\tfloat newY = uv.y * ratio2;\n\t\t\tnewY += 0.5 - 0.5 * ratio2;\n\t\t\tuv.y = newY;\n\t\t} else { // stretch on X\n\t\t\tfloat newX = uv.x * ratio;\n\t\t\tnewX += 0.5 - 0.5 * ratio;\n\t\t\tuv.x = newX;\n\t\t}\n\n\t\t#endif\n\n\t#endif\n\n\treturn texture2D( map, uv );\n\n}\n#endif\n",It="\n#ifdef USE_MAP\n\n\tvec4 textureSample = sampleTexture();\n\tdiffuseColor *= textureSample;\n\n#endif\n",Mt={msdfAlphaglyphParsVertexGlsl:"\nattribute vec2 uvG;\nvarying vec2 vUvG;\n",msdfAlphaglyphVertexGlsl:"\nvUvG = uvG;\n",msdfOffsetglyphVertexGlsl:"\ngl_Position.z -= 0.00001;\n",msdfAlphaglyphParsFragmentGlsl:He,msdfAlphaglyphFragmentGlsl:Ge,frameBorderParsVertexGlsl:Vt,frameBorderVertexGlsl:"\n\n\t// FrameBorder vertex shader\n\tvUvB = uvB;\n\n",frameCommonParsFragmentGlsl:Rt,frameBorderParsFragmentGlsl:kt,frameBorderFragmentGlsl:Ut,frameBackgroundParsFragmentGlsl:Ct,frameBackgroundFragmentGlsl:It},Bt=`\n// Would be automatic on three materials and from USE_UV\n#ifdef USE_MAP\nvarying vec2 vUv;\n#endif\n\n${Vt}\n\n#include <clipping_planes_pars_vertex>\n\nvoid main() {\n\n\t#ifdef USE_MAP\n\tvUv = uv;\n\t#endif\n\n\t\n\n\t// FrameBorder vertex shader\n\tvUvB = uvB;\n\n\n\n\tvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\n\tgl_Position = projectionMatrix * mvPosition;\n\n\t#include <clipping_planes_vertex>\n\n}\n`,Pt=`\n\n// Basic\nuniform vec3 diffuse;\nuniform float opacity;\n\n#ifdef USE_ALPHATEST\n\tuniform float alphaTest;\n#endif\n\n${Rt}\n\n${kt}\n\n\n#ifdef USE_MAP\nvarying vec2 vUv;\nuniform sampler2D map;\n#endif\n\n${Ct}\n\n#include <clipping_planes_pars_fragment>\n\nvoid main() {\n\n\tvec4 diffuseColor = vec4( diffuse, opacity );\n\n\t// map\n\t${It}\n\n\t${Ut}\n\n\t#ifdef USE_ALPHATEST\n\n\tif ( diffuseColor.a < alphaTest ) discard;\n\n\t#endif\n\n\t// output\n\tgl_FragColor = diffuseColor;\n\n\n\t#include <clipping_planes_fragment>\n}\n`;class Tt{static get mediation(){return Ft}static ensureMaterialOptions(e){e.transparent=!0,e.alphaTest=e.alphaTest||.02}static ensureDefines(e){e.defines||(e.defines={})}static ensureUserData(e,t){e.userData.borderColor={value:null},e.userData.borderRadius={value:new g.Vector4(0,0,0,0)},e.userData.cornerTL={value:new g.Vector2(0,1)},e.userData.cornerTR={value:new g.Vector2(1,1)},e.userData.cornerBR={value:new g.Vector2(1,0)},e.userData.cornerBL={value:new g.Vector2(0,0)},e.userData.borderWidth={value:new g.Vector4(0,0,0,0)},e.userData.borderOpacity={value:null},e.userData.frameSize={value:new g.Vector3(1,1,1)},e.userData.textureSize={value:new g.Vector2(1,1)}}static bindUniformsWithUserData(e,t){e.uniforms.borderColor=t.userData.borderColor,e.uniforms.borderRadius=t.userData.borderRadius,e.uniforms.cornerTL=t.userData.cornerTL,e.uniforms.cornerTR=t.userData.cornerTR,e.uniforms.cornerBR=t.userData.cornerBR,e.uniforms.cornerBL=t.userData.cornerBL,e.uniforms.borderWidth=t.userData.borderWidth,e.uniforms.borderOpacity=t.userData.borderOpacity,e.uniforms.frameSize=t.userData.frameSize,e.uniforms.textureSize=t.userData.textureSize}static injectShaderChunks(e){Tt.injectVertexShaderChunks(e),Tt.injectFragmentShaderChunks(e)}static injectVertexShaderChunks(e){e.vertexShader=e.vertexShader.replace("#include <uv_pars_vertex>","#include <uv_pars_vertex>\n"+Vt),e.vertexShader=e.vertexShader.replace("#include <uv_vertex>","#include <uv_vertex>\n\n\n\t// FrameBorder vertex shader\n\tvUvB = uvB;\n\n")}static injectFragmentShaderChunks(e){e.fragmentShader=e.fragmentShader.replace("#include <map_pars_fragment>","#include <map_pars_fragment>\n"+Ct),e.fragmentShader=e.fragmentShader.replace("#include <map_pars_fragment>","#include <map_pars_fragment>\n"+kt),e.fragmentShader=e.fragmentShader.replace("#include <map_pars_fragment>","#include <map_pars_fragment>\n"+Rt),e.fragmentShader=e.fragmentShader.replace("#include <map_fragment>",It),e.fragmentShader=e.fragmentShader.replace("#include <alphamap_fragment>",Ut+"\n#include <alphamap_fragment>")}}const Ft={clippingPlanes:{m:"clippingPlanes"},backgroundAlphaTest:{m:"alphaTest",t:$e},backgroundSide:{m:"side"},backgroundImage:{m:"map"},backgroundColor:{m:"color"},backgroundOpacity:{m:"opacity"},backgroundSize:{m:"computedBackgroundSize",t:function(e,t,i){i=["stretch","contain","cover"].indexOf(i),Xe(e,"BACKGROUND_MAPPING",i)}},borderWidth:{m:"borderWidth",t:Ne},borderColor:{m:"borderColor",t:Ne},cornerTL:{m:"cornerTL",t:Ne},cornerTR:{m:"cornerTR",t:Ne},cornerBR:{m:"cornerBR",t:Ne},cornerBL:{m:"cornerBL",t:Ne},borderOpacity:{m:"borderOpacity",t:Ne},size:{m:"frameSize",t:Ne},tSize:{m:"textureSize",t:Ne}};class Ot extends g.ShaderMaterial{static get mediation(){return Tt.mediation}constructor(){super({uniforms:{alphaTest:{value:.02},map:{value:null},diffuse:{value:new g.Color(16777215)},opacity:{value:1},borderColor:{value:new g.Color(0)},borderOpacity:{value:0},borderRadius:{value:new g.Vector4(0,0,0,0)},cornerTL:{value:new g.Vector2(0,1)},cornerTR:{value:new g.Vector2(1,1)},cornerBR:{value:new g.Vector2(1,0)},cornerBL:{value:new g.Vector2(0,0)},borderWidth:{value:new g.Vector4(0,0,0,0)},frameSize:{value:new g.Vector3(1,1,1)},textureSize:{value:new g.Vector2(1,1)}},side:g.FrontSide,transparent:!0,clipping:!0,vertexShader:Bt,fragmentShader:Pt,extensions:{derivatives:!0}}),this.defines.USE_ALPHATEST="",this.needsUpdate=!0}set map(e){this.uniforms.map.value=e,e?void 0===this.defines.USE_UV&&(this.defines.USE_UV="",this.needsUpdate=!0):void 0!==this.defines.USE_UV&&(delete this.defines.USE_UV,this.needsUpdate=!0),this.needsUpdate=!0}get map(){return this.uniforms.map.value}get alphaTest(){return this.uniforms.alphaTest.value}set alphaTest(e){this.uniforms.alphaTest.value=e}set opacity(e){this.uniforms&&(this.uniforms.opacity.value=e)}get opacity(){return this.uniforms.opacity.value}get color(){return this.uniforms.diffuse.value}set color(e){this.uniforms.diffuse.value=e}}class zt extends l{constructor(){super("children",null,!1),this._uis=[],this._boxes=[]}update(e,t){this._compute(e),e._layouter._needsUpdate=!0,e._renderOrder._needsUpdate=!0}process(e){this._compute(e),e._flexDirection._needsProcess=!0,e._layouter._needsProcess=!0,e._overflow._needsRender=!0}_compute(e){this._uis=e.children.filter((e=>e.visible&&e.isUI)),this._boxes=this._uis.filter((e=>e.isBox)).sort(this._sortOrder)}dispose(){this._uis=null,this._boxes=null}_sortOrder=(e,t)=>e._order._value<t._order._value?-1:e._order._value>t._order._value?1:this._uis.indexOf(e)<this._uis.indexOf(t)?-1:1}class At extends l{constructor(){super("bounds",null,!1),this._size=new g.Vector3(1,1,1),this._offsetWidth=0,this._offsetHeight=0,this._innerWidth=0,this._innerHeight=0,this._centerX=.5,this._centerY=.5,this._needsProcess=!0}setReferenceWidth(e,t){const i=e._width,n=e._padding._value,s=e._borderWidth._value,r=e._margin._value,a=t*(i._auto?1:i._value)-(r.y+r.w);U(a,this._offsetWidth)||(this._offsetWidth=a,this._innerWidth=this._offsetWidth-(n.y+n.w+s.y+s.w),this._centerX=Wt(e),this._propagateWidth(e),this._triggerCascadingDependencies(e))}setReferenceHeight(e,t){const i=e._height,n=e._padding._value,s=e._borderWidth._value,r=e._margin._value,a=t*(i._auto?1:i._value)-(r.x+r.z);U(a,this._offsetHeight)||(this._offsetHeight=a,this._innerHeight=this._offsetHeight-(n.x+n.z+s.x+s.z),this._centerY=Dt(e),this._propagateHeight(e),this._triggerCascadingDependencies(e))}setChildrenWidth(e,t){const i=e._padding._value,n=e._borderWidth._value;this._innerWidth=t,this._offsetWidth=this._innerWidth+(i.y+i.w+n.y+n.w),this._centerX=Wt(e),this._propagateWidth(e),this._triggerCascadingDependencies(e)}setChildrenHeight(e,t){const i=e._padding._value,n=e._borderWidth._value;this._innerHeight=t,this._offsetHeight=this._innerHeight+(i.x+i.z+n.x+n.z),this._centerY=Dt(e),this._propagateHeight(e),this._triggerCascadingDependencies(e)}update(e,t){const i=e._padding._value,n=e._borderWidth._value,s=e._width;s._auto||s._relative||("content-box"===e._boxSizing._value?(this._innerWidth=s._value,this._offsetWidth=this._innerWidth+i.y+i.w+n.y+n.w):(this._offsetWidth=s._value,this._innerWidth=this._offsetWidth-(i.y+i.w+n.y+n.w)),this._centerX=Wt(e),this._needsProcess=!0,this._propagateWidth(e),this._triggerCascadingDependencies(e));const r=e._height;r._auto||r._relative||("content-box"===e._boxSizing._value?(this._innerHeight=r._value,this._offsetHeight=this._innerHeight+i.x+i.z+n.x+n.z):(this._offsetHeight=r._value,this._innerHeight=this._offsetHeight-(i.x+i.z+n.x+n.z)),this._centerY=Dt(e),this._needsProcess=!0,this._propagateHeight(e),this._triggerCascadingDependencies(e))}render(e){this._size.x=this._offsetWidth,this._size.y=this._offsetHeight,e._renderer._needsRender=!0}output(e){e.size=this._size}process(e){e._overflow._needsRender=!0}_computeChildrenSideWidth(e){return function(e){return e._children._boxes.reduce(((e,t)=>{const i=t._margin._value;return e+(t._bounds._offsetWidth+i.y+i.w)}),0)}(e)}_computeChildrenSideHeight(e){return function(e){return e._children._boxes.reduce(((e,t)=>{const i=t._margin._value;return e+(t._bounds._offsetHeight+i.x+i.z)}),0)}(e)}_propagateWidth(e){for(let t=0;t<e._children._boxes.length;t++){const i=e._children._boxes[t];i._width._relative&&i._bounds.setReferenceWidth(i,this._innerWidth)}}_propagateHeight(e){for(let t=0;t<e._children._boxes.length;t++){const i=e._children._boxes[t];i._height._relative&&i._bounds.setReferenceHeight(i,this._innerHeight)}}_triggerCascadingDependencies(e){e._parent._value&&(e._parent._value._autoSize._needsProcess=!0),e._flexDirection._needsProcess=!0,e._fontSize._needsProcess=!0,e._layouter._needsProcess=!0,this._needsRender=!0,e._borderWidth._needsRender=!0,e._borderRadius._needsRender=!0,e._overflow._needsRender=!0}}function Wt(e){const t=e._padding._value,i=e._borderWidth._value;return(t.w+i.w-(t.y+i.y))/2}function Dt(e){const t=e._padding._value,i=e._borderWidth._value,n=t.x+i.x;return(t.z+i.z-n)/2}class Et extends he{constructor(){super(),this._allowsInherit=!1,this._needsUpdate=!0,this._process=this.emptyStrategyLogic,this._childAlign=this.emptyStrategyLogic}computeOutputValue(e){switch(this._value=this._inheritedInput,e._flexDirection._value){case"row":case"row-reverse":switch(this._process=Nt,this._value){case"start":this._childAlign=Gt;break;case"end":this._childAlign=Ht;break;default:this._childAlign=Lt}break;case"column":case"column-reverse":switch(this._process=Xt,this._value){case"start":this._childAlign=jt;break;case"end":this._childAlign=$t;break;default:this._childAlign=Lt}}this._needsProcess=!0,e._autoSize._needsProcess=!0,e._flexDirection._needsProcess=!0,e._justifyContent._needsProcess=!0,this._needsProcess=!0,e._fontSize._needsProcess=!0,e._layouter._needsProcess=!0}process(e){this._process(e,this._childAlign);let t="center",i="center",n="center";const s=e._padding._value,r=e._borderWidth._value;t=-1!==e._flexDirection._value.indexOf("column")?"start"===this._value?i="left":"end"===this._value?i="right":"centerX":"start"===this._value?n="top":"end"===this._value?n="bottom":"centerY";let a=-(s.x-s.z)/2-(r.x-r.z)/2,o=-(s.y-s.w)/2-(r.y-r.w)/2;"left"===i?o=(s.w-s.y)/2+(r.w-r.y)/2:"right"===i&&(o=-(s.y-s.w)/2-(r.y-r.w)/2),"top"===n?a=-(s.x-s.z)/2-(r.x-r.z)/2:"bottom"===n&&(a=(s.z-s.x)/2+(r.z-r.x)/2),e._children._boxes.forEach((i=>{let n=0,s=0;"top"===t?s=-i._margin._value.x:"bottom"===t?s=i._margin._value.z:"left"===t?n=i._margin._value.w:"right"===t?n=-i._margin._value.y:"centerX"===t?n=(i._margin._value.w-i._margin._value.y)/2:"centerY"===t&&(s=(-i._margin._value.x+i._margin._value.z)/2),e._layouter._childrenPos[i.id].x+=o+n,e._layouter._childrenPos[i.id].y+=a+s}))}}function Lt(){return 0}function Ht(e,t){return-t+e._bounds._offsetHeight/2}function Gt(e,t){return t-e._bounds._offsetHeight/2}function $t(e,t){return t-e._bounds._offsetWidth/2}function jt(e,t){return-t+e._bounds._offsetWidth/2}function Xt(e,t){const i=e._bounds._innerWidth/2;e._children._boxes.forEach((n=>{e._layouter._childrenPos[n.id].x=t(n,i)}))}function Nt(e,t){const i=e._bounds._innerHeight/2;e._children._boxes.forEach((n=>{e._layouter._childrenPos[n.id].y=t(n,i)}))}class Yt extends pe{constructor(){super(),this._allowsInherit=!1,this._needsUpdate=!0,this._offset=0,this._reverse=1,this._process=this.emptyStrategyLogic}computeOutputValue(e){switch(this._value=this._inheritedInput,this._value){case"row":this._process=Kt;break;case"row-reverse":this._process=qt;break;case"column":this._process=Jt;break;case"column-reverse":this._process=Zt}e._justifyContent._needsUpdate||e._justifyContent.computeOutputValue(e),e._alignItems._needsUpdate||e._alignItems.computeOutputValue(e),this._needsProcess=!0}process(e){switch(this._value){case"row":this._offset=-e._bounds._innerWidth/2;break;case"row-reverse":this._offset=e._bounds._innerWidth/2;break;case"column":this._offset=e._bounds._innerHeight/2;break;case"column-reverse":this._offset=-e._bounds._innerHeight/2}this._reverse=-Math.sign(this._offset),0===this._reverse&&(this._reverse=1),this._process(e),e._justifyContent._needsProcess=!0,e._layouter._needsProcess=!0}}function Kt(e){let t=e._flexDirection._offset;const i=e._flexDirection._reverse,n=e._children._boxes;for(let s=0;s<n.length;s++){const r=n[s],a=r.id,o=r._bounds._offsetWidth;t+=r._margin._value.w*i;const u=e._layouter._childrenPos[a];u.x=t+o/2*i,u.y=0,t+=i*(o+r._margin._value.y)}}function qt(e){let t=e._flexDirection._offset;const i=e._flexDirection._reverse,n=e._children._boxes;for(let s=0;s<n.length;s++){const r=n[s],a=r.id,o=r._bounds._offsetWidth;t+=r._margin._value.y*i;const u=e._layouter._childrenPos[a];u.x=t+o/2*i,u.y=0,t+=(o+r._margin._value.w)*i}}function Jt(e){let t=e._flexDirection._offset;const i=e._flexDirection._reverse,n=e._children._boxes;for(let s=0;s<n.length;s++){const r=n[s],a=r.id,o=r._bounds._offsetHeight;t+=r._margin._value.x*i;const u=e._layouter._childrenPos[a];u.x=0,u.y=t+o/2*i,t+=(o+r._margin._value.z)*i}}function Zt(e){let t=e._flexDirection._offset;const i=e._flexDirection._reverse,n=e._children._boxes;for(let s=0;s<n.length;s++){const r=n[s],a=r.id,o=r._bounds._offsetHeight;t+=r._margin._value.z*i;const u=e._layouter._childrenPos[a];u.x=0,u.y=t+o/2*i,t+=(o+r._margin._value.x)*i}}class Qt extends ve{constructor(e){super("justifyContent",e,!0),this._allowsInherit=!1,this._needsUpdate=!0,this._computeOffset=this.emptyStrategyLogic,this._computeMargin=this.emptyStrategyLogic,this._process=this.emptyStrategyLogic}computeOutputValue(e){switch(this._value=this._inheritedInput,e._flexDirection._value){case"column-reverse":case"column":this._process=ti.bind(this);break;case"row-reverse":case"row":this._process=ei.bind(this)}switch(this._value){case"end":this._computeOffset=ni,this._computeMargin=ri;break;case"center":this._computeOffset=si,this._computeMargin=ri;break;case"start":this._computeOffset=ii,this._computeMargin=ri;break;case"space-between":this._computeOffset=ii,this._computeMargin=ai;break;case"space-around":this._computeOffset=ii,this._computeMargin=ui;break;case"space-evenly":this._computeOffset=ii,this._computeMargin=oi}e._flexDirection._needsProcess=!0}process(e){this._process(e),e._alignItems._needsProcess=!0}}function ei(e){const t=e._flexDirection._offset,{usedDirectionSpace:i,remainingSpace:n}=function(e){const t=e._bounds._computeChildrenSideWidth(e);return{usedDirectionSpace:t,remainingSpace:e._bounds._innerWidth-t}}(e),s=2*t-i*Math.sign(t),r=this._computeOffset(s),a=this._computeMargin(e,n,e._flexDirection._reverse);e._children._boxes.forEach(((t,i)=>{e._layouter._childrenPos[t.id].x-=r-a[i]}))}function ti(e){const t=e._flexDirection._offset,{usedDirectionSpace:i,remainingSpace:n}=function(e){const t=e._bounds._computeChildrenSideHeight(e);return{usedDirectionSpace:t,remainingSpace:e._bounds._innerHeight-t}}(e),s=2*t-i*Math.sign(t),r=this._computeOffset(s),a=this._computeMargin(e,n,e._flexDirection._reverse);e._children._boxes.forEach(((t,i)=>{e._layouter._childrenPos[t.id].y-=r-a[i]}))}function ii(e){return 0}function ni(e){return e}function si(e){return e/2}function ri(e,t=0,i=1){return Array(e._children._boxes.length).fill(0)}function ai(e,t=0,i=1){const n=e._children._boxes.length,s=Array(n).fill(0);if(t>0&&n>1){const e=t/(n-1)*i;s[0]=0;for(let t=1;t<n;t++)s[t]=e*t}return s}function oi(e,t=0,i=1){const n=e._children._boxes.length,s=Array(n).fill(0);if(t>0){const e=t/(n+1)*i;for(let t=0;t<n;t++)s[t]=e*(t+1)}return s}function ui(e,t=0,i=1){const n=e._children._boxes.length,s=Array(n).fill(0);if(t>0){const e=t/n*i,r=e/2;s[0]=r;for(let t=1;t<n;t++)s[t]=r+e*t}return s}class li extends g.Mesh{constructor(e){const t=new g.PlaneGeometry(1,1,e._segments.value,e._segments.value),i=new g.BufferAttribute(new Float32Array(t.getAttribute("uv").array),2);t.setAttribute("uvB",i).name="uvB",super(t,e.backgroundMaterial),this.name="UIBackgroundBox"}}class hi extends l{constructor(){super("renderer")}render(e){e._backgroundMesh||e.setBackgroundMesh(new li(e)),e.performAfterUpdate()}}class di extends xe{constructor(){super("position")}update(e,t){super.update(e,t),this._needsProcess=!0}}class ci extends l{constructor(){super("autosize"),this._needsProcess=!0}process(e){e._width._auto&&function(e){e._bounds.setChildrenWidth(e,function(e){switch(e._flexDirection._value){case"row":case"row-reverse":return function(e){let t=0;for(const i of e._children._boxes){if("static"!==i._position._value)continue;const e=i._margin._value;t+=i._bounds._offsetWidth+e.y+e.w}return t}(e);case"column":case"column-reverse":return function(e){let t=0;for(const i of e._children._boxes){if("static"!==i._position._value)continue;const e=i._margin._value,n=i._bounds._offsetWidth+e.y+e.w;n>t&&(t=n)}return t}(e)}}(e))}(e),e._height._auto&&function(e){e._bounds.setChildrenHeight(e,function(e){switch(e._flexDirection._value){case"row":case"row-reverse":return function(e){let t=0;for(const i of e._children._boxes){if("static"!==i._position._value)continue;const e=i._margin._value,n=i._bounds._offsetHeight+e.x+e.z;n>t&&(t=n)}return t}(e);case"column":case"column-reverse":return function(e){let t=0;for(const i of e._children._boxes){if("static"!==i._position._value)continue;const e=i._margin._value;t+=i._bounds._offsetHeight+e.x+e.z}return t}(e)}}(e))}(e);const t="stretch"===e._alignItems._value,i=t&&-1!==e._flexDirection._value.indexOf("column"),n=t&&!i;for(const t of e._children._boxes)(t._width._auto&&i||t._width._relative)&&t._bounds.setReferenceWidth(t,e._bounds._innerWidth),(t._height._auto&&n||t._height._relative)&&t._bounds.setReferenceHeight(t,e._bounds._innerHeight)}}class _i extends wt{constructor(e,t){_i.definePropertiesValues(e,t),super(e,t),_i.init(this)}bindBackgroundMeshProperties(){this._bounds._size=this._backgroundMesh.scale,this._bounds._needsProcess=!0}unbindBackgroundMeshProperties(){this._bounds._size=new g.Vector3(1,1,1),this._bounds._needsProcess=!0}static definePropertiesValues(e,t){e.children||(e.children=zt),e.bounds||(e.bounds=At),e.flexDirection||(e.flexDirection=Yt),e.justifyContent||(e.justifyContent=Qt),e.alignItems||(e.alignItems=Et),e.position||(e.position=di),e.autoSize||(e.autoSize=ci),e.renderer||(e.renderer=hi),t.fontSide||(t.fontSide=0),t.invertAlpha||(t.invertAlpha=!1),t.fontCastShadow||(t.fontCastShadow=!1),t.fontReceiveShadow||(t.fontReceiveShadow=!1),t.backgroundCastShadow||(t.backgroundCastShadow=!1),t.backgroundReceiveShadow||(t.backgroundReceiveShadow=!1),t.uiType||(t.uiType="block")}static init(e){Object.defineProperties(e,{isBox:{configurable:!1,enumerable:!0,value:!0}}),e.backgroundMaterial=new Ot,e._renderer.render(e),e._backgroundMesh.visible=!1}}class pi extends Array{constructor(...e){super(...e),this.width=0,this.lineBase=0,this.lineHeight=0,this.y=0}}class fi extends l{constructor(){super("layouter",null,!1),this._needsUpdate=!0,this._childrenPos={}}update(e,t){this._childrenPos={};for(const t of e._children._boxes)"static"===t._position._value&&(this._childrenPos[t.id]=t.position)}process(e){}}class gi extends _i{constructor(e={}){const t={};gi.definePropertiesValues(t,e),super(t,e),gi.init(this)}add(e){const t=[];for(let e=0;e<arguments.length;e++){const i=arguments[e];!i.isUI||i.isBox?t.push(i):console.warn("Block element can only contain Box elements.",i)}return super.add(...t)}static definePropertiesValues(e,t){e.layouter=fi}static init(e){Object.defineProperties(e,{isBlock:{configurable:!1,enumerable:!0,value:!0}})}}class vi extends l{constructor(){super("textContent",null,!1)}update(e,t){e._glyphs._needsUpdate=!0,e._whiteSpace._needsProcess=!0}}class mi extends l{constructor(){super("inlines",null,!1),this._value=null}process(e){if(this._value=e._glyphs._value.map((e=>e.asInlineGlyph())),this._value.length){this._value[0].paddingLeft=e._padding._value.w,this._value[0].marginLeft=e._margin._value.w;const t=this._value.length-1;this._value[t].paddingRight=e._padding._value.y,this._value[t].marginRight=e._margin._value.y}e._verticalAlign._needsProcess=!0,e._fontSize._needsProcess=!0,e._lineBreak._needsProcess=!0,e._fontKerning._needsProcess=!0,e._layouter._needsProcess=!0}get value(){return this._value}}class bi extends l{constructor(){super("glyphs",null,!1),this._needsUpdate=!1,this._value=null}process(e){e._font._fontVariant&&e._font._fontVariant.isReady&&(this._value=e._whiteSpace._whiteSpacedContent.split("").map((t=>e._font._fontVariant.getTypographicGlyph(t))),this._value&&(e._inlines._needsProcess=!0))}get value(){return this._value}}class yi extends H{constructor(e){super("color",e,!1),this._input=e,this.output=this._outputValue}computeOutputValue(e){"inherit"===this._input?this._value.set(this.getInheritedInput(e)):this._value.set(this._input)}}class xi extends l{constructor(e="- ,.:?!\n"){super("lineBreak",e,!0),this._newLineBreakability=null}update(e,t){this._needsProcess=!0}process(e){const t=e._whiteSpace._newLineBreakability;if(e._inlines._value)for(let i=0;i<e._inlines._value.length;i++){const n=e._inlines._value[i],s=n.char;let r=null;void 0!==s&&("nowrap"!==t&&(this._value.includes(s)||s.match(/\s/g))&&(r="possible"),s.match(/\n/g)&&(r=t)),n.lineBreak=r}}get value(){return this._value}}class wi extends l{constructor(){super("layouter",null,!1),this._value=null}update(e,t){this._value=e._parent.find((e=>e.isUI&&e.isText)),this._needsProcess=!0}process(e){this._value&&(this._value._layouter._needsProcess=!0)}}class Si extends H{constructor(e){super("backgroundColor",e,!1),this._allowsInherit=!1,this._input="transparent"}computeOutputValue(e){"inherit"===this._input?this._value.set(this.getInheritedInput(e)):this._value.set(this._input)}}class Vi extends Ce{constructor(){super(),this._allowsInherit=!1,this.computeOutputValue=this._computeFromInherited}_computeFromInherited(e){super._computeFromInherited(e),e._font._needsUpdate=!0}}class ki extends Be{constructor(e){super(e)}computeOutputValue(e){const t=this.getInheritedInput(e),i=Ui[t];this._value=i||t,e._font._needsUpdate=!0}}const Ui={};class Ri extends rt{constructor(){super("fontFamily","inherit",!0),this._input="inherit",this._needsUpdate=!0,this._allowsInherit=!1}computeOutputValue(e){let t=this._inheritedInput;if("inherit"===t&&(t=this.getInheritedInput(e)),t instanceof et)this._value=t,e._font._needsUpdate=!0;else if("string"==typeof t){const i=st.getFontFamily(t);i?(this._value=i,e._font._needsUpdate=!0):console.warn(`(.style) fontFamily, the font '${t}' is not registered. Aborted.`)}else console.warn("(.style) fontFamily requires a registered fontFamily instance, or the id of a registered fontFamily."),console.warn("If you want to set a specific font, please use .font property instead.")}get value(){return this._value}}class Ci extends ot{constructor(){super(),this._allowsInherit=!1,this.computeOutputValue=this._computeFromInherited,this._whiteSpacedContent="",this._stringCollapser=this.emptyStrategyLogic,this._inlineCollapser=this.emptyStrategyLogic,this._inlineWrapper=this.emptyStrategyLogic}_computeFromInherited(e){switch(super._computeFromInherited(e),this._newLineBreakability=Mi(this._value),this._value){case"nowrap":case"normal":this._stringCollapser=Bi;break;case"pre-line":this._stringCollapser=Pi;break;default:this._stringCollapser=Ti}switch(this._value){case"pre-line":case"nowrap":case"normal":this._inlineCollapser=Wi;break;case"pre-wrap":this._inlineCollapser=Ai;break;default:this._inlineCollapser=Di}switch(this._value){case"pre-line":case"pre-wrap":case"normal":this._inlineWrapper=Fi;break;case"pre":this._inlineWrapper=Oi;break;default:this._inlineWrapper=zi}this._needsProcess=!0}process(e){e.isInline&&!e.isInlineBlock&&(this._whiteSpacedContent=this._stringCollapser(e._textContent._value),e._glyphs._needsProcess=!0)}}const Ii={"\t":"\t","\n":"\n","\r":"\r"," ":" "},Mi=function(e){switch(e){case"pre":case"pre-wrap":case"pre-line":return"mandatory"}return null};function Bi(e){return Pi(e.replace(/\n/g," "))}function Pi(e){return e.replace(/[ ]{2,}/g," ")}function Ti(e){return e}function Fi(e,t,i,n){const s=e[t];if("mandatory"===s.lineBreak)return!0;if(i+s.xadvance+s.xoffset+s.kerning>n.INNER_WIDTH)return!0;const r=Hi(e,t,n);return function(e,t,i,n){return!(!e||!e.char)&&(!(t+i<n.INNER_WIDTH)&&n.BREAKON.indexOf(e.char)>-1)}(e[t-1],i,r,n)}function Oi(e,t,i,n){return"mandatory"===e[t].lineBreak}function zi(){return!1}function Ai(e){if(!e[0])return 0;const t=e[0],i=e[e.length-1];return t.char&&"\n"===t.char&&e.length>1&&Li([t],e[1]),i.char&&"\n"===i.char&&e.length>1&&Ei([i],e[e.length-2]),t.offsetX}function Wi(e){if(!e[0])return 0;let t,i=[];for(let n=0;n<e.length;n++){const s=e[n];if(!(s.char&&Ii[s.char]&&e.length>n))break;i.push(s),t=e[n+1]}Li(i,t),i=[],t=null;for(let n=e.length-1;n>0;n--){const s=e[n];if(!(s.char&&Ii[s.char]&&n>0))break;i.push(s),t=e[n-1]}return Ei(i,t),e[0].offsetX}function Di(e){return e[0]?e[0].offsetX:0}function Ei(e,t){if(t)for(let i=0;i<e.length;i++){const n=e[i];n.fontFactor=0,n.offsetX=t.offsetX+t.cumulativeWidth,n.cumulativeWidth=0}}function Li(e,t){if(t)for(let i=0;i<e.length;i++){const n=e[i];n.fontFactor=0,n.offsetX=t.offsetX,n.cumulativeWidth=0}}function Hi(e,t,i,n){if(n=n||0,!e[t])return n;const s=e[t];return s.lineBreak?n+s.xadvance:Hi(e,t+1,i,n+s.xadvance+s.xoffset+s.kerning+i.LETTERSPACING)}class Gi extends ht{constructor(){super(),this._input="inherit",this._allowsInherit=!1,this.computeOutputValue=this._computeFromInherited}_computeFromInherited(e){super._computeFromInherited(e),e._fontSize._needsProcess=!0,e._layouter._needsProcess=!0}}class $i extends dt{constructor(){super(),this._allowsInherit=!1}computeOutputValue(e){e._font._fontVariant&&(e._bounds._needsProcess=!0,e._layouter._needsProcess=!0),e._margin._needsProcess=!0}process(e){if(!e._font._fontVariant||!e._font._fontVariant.isReady)return;const t=this._value/e._font._fontVariant.typographic.size,i=e._inlines._value;for(let e=0;e<i.length;e++){const n=i[e];n.resetOffsets(),n.fontSize=this._value,n.fontFactor=t}}get value(){return this._value}}class ji extends ct{constructor(){super("segments",1,!1),this._notInheritedValue=void 0}update(e,t){this._notInheritedValue=this._value,"inherit"===this._notInheritedValue&&(this._notInheritedValue=this.getInheritedInput(e)),e._layouter._needsUpdate=!0}set value(e){this._value!==e&&(this._value=e,this._needsUpdate=!0)}get value(){return"inherit"===this._value?this._notInheritedValue:this._value}}class Xi extends ji{constructor(){super(),this._value="inherit"}}class Ni extends pt{constructor(){super(),this._allowsInherit=!1,this.computeOutputValue=this._computeFromInherited}_computeFromInherited(e){super._computeFromInherited(e),e._parent._value._layouter._needsProcess=!1}process(e){if("none"!==this._value){const t=e._whiteSpace._whiteSpacedContent,i=e._inlines._value;for(let n=1;n<i.length;n++){const s=t[n-1]+t[n];i[n].kerning=e._font._fontVariant.getKerningAmount(s)}}}}class Yi extends l{constructor(){super("children",null,!1),this._uis=[]}update(e,t){}process(e){}_compute(e){}dispose(){}}function Ki(e){let t,i,n,s=0;for(let r=0;r<e.length;++r){const a=e[r];if(a.isInterleavedBufferAttribute)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. InterleavedBufferAttributes are not supported."),null;if(void 0===t&&(t=a.array.constructor),t!==a.array.constructor)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.array must be of consistent array types across matching attributes."),null;if(void 0===i&&(i=a.itemSize),i!==a.itemSize)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.itemSize must be consistent across matching attributes."),null;if(void 0===n&&(n=a.normalized),n!==a.normalized)return console.error("THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.normalized must be consistent across matching attributes."),null;s+=a.array.length}const r=new t(s);let a=0;for(let t=0;t<e.length;++t)r.set(e[t].array,a),a+=e[t].array.length;return new g.BufferAttribute(r,i,n)}class qi extends l{constructor(){super("renderer")}render(e){if(!e._inlines._value||!e._inlines._value.length)return;const t=function(e,t=!1){const i=null!==e[0].index,n=new Set(Object.keys(e[0].attributes)),s=new Set(Object.keys(e[0].morphAttributes)),r={},a={},o=e[0].morphTargetsRelative,u=new g.BufferGeometry;let l=0;for(let h=0;h<e.length;++h){const d=e[h];let c=0;if(i!==(null!==d.index))return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+h+". All geometries must have compatible attributes; make sure index attribute exists among all geometries, or in none of them."),null;for(const e in d.attributes){if(!n.has(e))return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+h+'. All geometries must have compatible attributes; make sure "'+e+'" attribute exists among all geometries, or in none of them.'),null;void 0===r[e]&&(r[e]=[]),r[e].push(d.attributes[e]),c++}if(c!==n.size)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+h+". Make sure all geometries have the same number of attributes."),null;if(o!==d.morphTargetsRelative)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+h+". .morphTargetsRelative must be consistent throughout all geometries."),null;for(const e in d.morphAttributes){if(!s.has(e))return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+h+".  .morphAttributes must be consistent throughout all geometries."),null;void 0===a[e]&&(a[e]=[]),a[e].push(d.morphAttributes[e])}if(u.userData.mergedUserData=u.userData.mergedUserData||[],u.userData.mergedUserData.push(d.userData),t){let e;if(i)e=d.index.count;else{if(void 0===d.attributes.position)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index "+h+". The geometry must have either an index or a position attribute"),null;e=d.attributes.position.count}u.addGroup(l,e,h),l+=e}}if(i){let t=0;const i=[];for(let n=0;n<e.length;++n){const s=e[n].index;for(let e=0;e<s.count;++e)i.push(s.getX(e)+t);t+=e[n].attributes.position.count}u.setIndex(i)}for(const e in r){const t=Ki(r[e]);if(!t)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the "+e+" attribute."),null;u.setAttribute(e,t)}for(const e in a){const t=a[e][0].length;if(0===t)break;u.morphAttributes=u.morphAttributes||{},u.morphAttributes[e]=[];for(let i=0;i<t;++i){const t=[];for(let n=0;n<a[e].length;++n)t.push(a[e][n][i]);const n=Ki(t);if(!n)return console.error("THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the "+e+" morphAttribute."),null;u.morphAttributes[e].push(n)}}return u}(e._inlines._value.map((t=>e._font._fontVariant.getGeometricGlyph(t,e).translate(t.offsetX,t.offsetY,0))));e.setFontMesh(new g.Mesh(t,e.fontMaterial)),e._fontMesh.renderOrder=1/0}}class Ji extends de{constructor(){super(),this._allowsInherit=!1,this._needsUpdate=!1}computeOutputValue(e){this._value=this._inheritedInput,e._layouter._needsProcess=!0}}class Zi extends bt{constructor(){super(),this._allowsInherit=!1,this._needsUpdate=!1}computeOutputValue(e){this._value=this._inheritedInput,this._needsProcess=!0,e._layouter._needsProcess=!0}process(e){e._inlines.value&&e._inlines.value.forEach((e=>{e.verticalAlign=this._value}))}}class Qi extends wt{constructor(e={}){const t={};Qi.definePropertiesValues(t,e),super(t,e),Qi.init(this)}add(e){const t=[];for(let e=0;e<arguments.length;e++){const i=arguments[e];!i.isUI||i.isInline?(t.push(i),i.position.z=.005):console.warn("Block element can only contain Box elements.",i)}return super.add(...t)}_rebuildParentUI=()=>{super._rebuildParentUI(),this._layouter._needsUpdate=!0};set textContent(e){this._textContent.value=e}get textContent(){return this._textContent._value}set invertAlpha(e){this._invertAlpha.value=e}get invertAlpha(){return this._invertAlpha._value}static definePropertiesValues(e,t){e.children||(e.children=Yi),e.textContent||(e.textContent=vi),e.glyphs||(e.glyphs=bi),e.inlines||(e.inlines=mi),e.layouter||(e.layouter=wi),e.renderer||(e.renderer=qi),e.fontFamily||(e.fontFamily=Ri),e.fontWeight||(e.fontWeight=ki),e.fontStyle||(e.fontStyle=Vi),e.fontSize||(e.fontSize=$i),e.color||(e.color=yi),e.backgroundColor||(e.backgroundColor=Si),e.lineBreak||(e.lineBreak=xi),e.letterSpacing||(e.letterSpacing=Gi),e.whiteSpace||(e.whiteSpace=Ci),e.segments||(e.segments=Xi),e.textAlign||(e.textAlign=Ji),e.verticalAlign||(e.verticalAlign=Zi),e.fontKerning||(e.fontKerning=Ni),t.uiType||(t.uiType="inline")}static init(e){Object.defineProperties(e,{isInline:{configurable:!1,enumerable:!0,value:!0}})}}class en extends Re{constructor(){super("textContent",null,!1),this._needsUpdate=!1}set value(e){this._value!==e&&(this._value=e,this._value,this._needsUpdate=!0)}update(e,t){this._needsUpdate=!1;for(let t=e.children.length-1;t>=0;t--){const i=e.children[t];i.isUI&&(e.remove(i),i.clear())}e._children._uis=[],this._value&&e.add(new Qi({name:"anonymousInline",textContent:this._value}))}process(e){return this._needsUpdate?this._value:super.process(e)}}class tn extends Array{constructor(...e){super(...e),this.width=0,this.height=0}}class nn extends l{constructor(){super("layouter",null,!1),this._value=null}update(e,t){}process(e){let t=e._width._value;t=e._width._auto?1/0:e._bounds._innerWidth;const i=e._lineHeight._value,n=new tn(new pi);let s=0;e._children._inlines.forEach((e=>{if(!e._inlines.value)return;this._resetInlines(e);const i=e._fontSize._value,r=e._letterSpacing._value*i,a=e._whiteSpace._value,o=e._lineBreak._value,u=e._position._value,l={WHITESPACE:a,LETTERSPACING:r,BREAKON:o,INNER_WIDTH:t},h=e._whiteSpace._inlineWrapper;var d=s;"absolute"===u&&(s=0),s+=e._margin._value.w+e._padding._value.w,e._inlines.value.forEach(((e,t,i)=>{const a=n[n.length-1];if(h(i,t,s,l))return n.push(new pi(e)),e.offsetX=e.xoffset,0===e.width?void(s=0):(e.cumulativeWidth=e.xadvance+r,void(s=e.cumulativeWidth));n[n.length-1].push(e),e.offsetX=s+e.xoffset+e.kerning,e.cumulativeWidth=e.xadvance+e.kerning+r,s+=e.cumulativeWidth,a.length-1==1&&0===a[a.length-2].width&&(e.offsetX-=e.xoffset,s-=e.xoffset)})),s+=e._margin._value.y+e._padding._value.y,"absolute"===u&&(s=d)}));const r=e._whiteSpace._inlineCollapser;let a=0,o=0,u=0;n.forEach(((e,t)=>{const s=r(e);let l=0,h=0;e.forEach((e=>{l=Math.max(l,e.lineHeight),h=Math.max(h,e.lineBase),e.offsetX-=s})),e.lineHeight=l,e.lineBase=h;if(0===t?u=.5*-(l*i-l):u-=n[t-1].lineHeight*i,e.y=u,e.x=0,e.forEach((t=>{t.offsetY=u-t.anchor,t.lineHeight<e.lineHeight&&("super"===t.verticalAlign?t.offsetY+=t.lineBase/5:"sub"===t.verticalAlign?t.offsetY-=1.2*e.lineBase-t.lineBase:t.offsetY-=e.lineBase-t.lineBase)})),o+=e.lineHeight*i,e.width=0,e[0]){const t=e[e.length-1];e.width=t.offsetX+t.cumulativeWidth+t.paddingRight+t.marginRight+e[0].offsetX,a=Math.max(a,e.width)}})),n.height=o,n.width=a,this._value=n,t===1/0&&e._bounds.setChildrenWidth(e,n.width),e._height._auto&&e._bounds.setChildrenHeight(e,n.height);const l=e._parent._value;l&&(l._autoSize._needsProcess=!0,l._flexDirection._needsProcess=!0),e._inlineJustificator._needsProcess=!0,e._textAlign._needsProcess=!0,e._overflow._needsUpdate=!0}_resetInlines(e){e._fontSize.process(e)}}class sn extends de{constructor(){super(),this._allowsInherit=!1,this._needsUpdate=!0}computeOutputValue(e){this._value=this._inheritedInput,this._needsProcess=!0}process(e){!function(e){const t=e._layouter._value,i=e._textAlign._value,n=e._bounds._innerWidth;for(let i=0;i<t.length;i++){const n=t[i],s=e._padding._value,r=e._borderWidth._value,a=rn(e,n,i===t.length-1,s),o=(-s.w+s.y)/2+(-r.w+r.y)/2;n.x+=a;for(let e=0;e<n.length;e++)n[e].offsetX+=a-o}if(0===i.indexOf("justify"))for(let e=0;e<t.length;e++){const s=t[e];if(-1!==i.indexOf("-")&&e===t.length-1)return;const r=n-s.width;if(r<=0)return;let a=0;for(let e=1;e<s.length-1;e++)a+=" "===s[e].char?1:0;const o=r/a;let u=1;"justify-right"===i&&(s.reverse(),u=-1);let l=0;for(let e=1;e<=s.length-1;e++){const t=s[e];t.offsetX+=l*u,l+=" "===t.char?o:0}"justify-right"===i&&s.reverse()}}(e),e._renderer._needsRender=!0}}function rn(e,t,i,n){switch(e._textAlign._value){case"justify-left":case"justify":case"left":return-e._bounds._innerWidth/2+n.w;case"justify-right":case"right":return-t.width+e._bounds._innerWidth/2-n.y;case"center":return-t.width/2;case"justify-center":return i?-t.width/2:-e._bounds._innerWidth/2+n.w;default:console.warn(`textAlign: '${e._textAlign._value}' is not valid`)}}class an extends pe{constructor(){super(),this._value=this._input="column",this._allowsInherit=!1,this._needsUpdate=!0}computeOutputValue(e){this._value=this._inheritedInput}}class on extends at{constructor(){super(),this._allowsInherit=!1,this.computeOutputValue=this._computeFromInherited}}class un extends pt{constructor(){super(),this._value=this._input=this.getDefaultValue(),this._allowsInherit=!1,this.computeOutputValue=this._computeFromInherited}_computeFromInherited(e){super._computeFromInherited(e)}}class ln extends At{constructor(){super(),this._innerWidth=1/0,this._innerHeight=0}}class hn extends l{constructor(){super("children",null,!1),this._uis=[],this._inlines=[],this._boxes=[]}update(e,t){this._compute(e),this._needsProcess=!0}process(e){this._compute(e),e._overflow._needsRender=!0}_compute(e){this._uis=e.children.filter((e=>e.visible&&e.isUI)),this._inlines=this._uis.filter((e=>e.isInline)).sort(this._sortOrder)}dispose(){this._inlines=null}_sortOrder=(e,t)=>e._order._value<t._order._value?-1:e._order._value>t._order._value?1:this._uis.indexOf(e)<this._uis.indexOf(t)?-1:1}class dn extends l{constructor(){super("autosize")}process(e){if(e._layouter._value&&e._layouter._value.length){const t=e._layouter._value,i=e._padding._value,n=e._borderWidth._value;e._width._auto&&e._bounds.setOffsetWidth(e,t.width+i.w+i.y+n.w+n.y),e._height._auto&&e._bounds.setOffsetHeight(e,t.height+i.x+i.z+n.x+n.z)}}}class cn extends hi{constructor(){super("renderer"),this._needsUpdate=!1}render(e){super.render(e);for(const t of e._children._inlines)t._renderer.render(t);e.performAfterUpdate()}}class _n extends _i{constructor(e={},t={}){_n.definePropertiesValues(t,e),super(t,e),_n.init(this)}add(e){const t=[];let i=!1;for(let e=0;e<arguments.length;e++){const n=arguments[e];!n.isUI||n.isInline?(n.isInline&&(i=!0),t.push(n)):console.warn("Block element can only contain Box elements.",n)}return t.length>0&&super.add(...t),i&&(this._children._needsUpdate=!0,this._layouter._needsProcess=!0),this}set textContent(e){this._textContent.value=e}get textContent(){return super.textContent}set invertAlpha(e){this._invertAlpha.value=e}get invertAlpha(){return this._invertAlpha._value}get lines(){return this._layouter._value}static definePropertiesValues(e,t){e.flexDirection=an,e.justifyContent=ve,e.alignItems=he,e.bounds=ln,e.autoSize=dn,e.renderer=cn,e.children||(e.children=hn),e.textContent||(e.textContent=en),e.layouter||(e.layouter=nn),e.lineHeight||(e.lineHeight=on),e.textAlign||(e.textAlign=sn),e.whiteSpace||(e.whiteSpace=Ci),e.fontKerning||(e.fontKerning=un),e.segments||(e.segments=ji),t.width||(t.width="100%"),t.fontSide||(t.fontSide=0)}static init(e){Object.defineProperties(e,{isText:{configurable:!1,enumerable:!0,value:!0}})}}class pn extends l{constructor(){super("inlines",null,!1),this._value=[]}process(e){this._value[0].paddingLeft=e._padding._value.w,this._value[0].marginLeft=e._margin._value.w;const t=this._value.length-1;this._value[t].paddingRight=e._padding._value.y,this._value[t].marginRight=e._margin._value.y}}class fn extends l{constructor(){super("renderer")}render(e){e._backgroundMesh||e.setBackgroundMesh(new li(e)),e._backgroundMesh.position.x=e._inlines._value[0].offsetX+e._inlines._value[0].width/2,e._backgroundMesh.position.y=e._inlines._value[0].offsetY+e._inlines._value[0].lineBase/2,e._bounds.render(e)}}class gn extends l{constructor(){super("bounds",null,!1),this._size=new g.Vector3(1,1,1),this._offsetWidth=0,this._offsetHeight=0,this._innerWidth=0,this._innerHeight=0}update(e,t){this.output(t),this._needsProcess=!0}process(e){this._offsetWidth=this._innerWidth=e._inlines._value[0].width,this._offsetHeight=this._innerHeight=e._inlines._value[0].height,this._needsRender=!0,e._borderWidth._needsRender=!0,e._borderRadius._needsRender=!0}render(e){this._size.x=this._offsetWidth,this._size.y=this._offsetHeight}output(e){e.size=this._size}}class vn extends H{constructor(){super("backgroundColor","inherit",!1),this._allowsInherit=!1,this._input="inherit"}computeOutputValue(e){e._backgroundMesh.visible=!("none"===this._input||"transparent"===this._input),"inherit"===this._input?this._value.set(this.getInheritedInput(e)):this._value.set(this._input)}getInheritedInput(e){return"inherit"!==this._input?this._input:e._color._value}set inline(e){this.isValidValue(e)&&e!==this._inline&&(this._input=this._inline=e,this._needsUpdate=!0)}}class mn extends H{constructor(){super("color","inherit",!1),this._input="inherit",this.output=this._outputValue}computeOutputValue(e){"inherit"===this._input?this._value.set(this.getInheritedInput(e)):this._value.set(this._input),e._backgroundColor._needsUpdate=!0,e._borderColor._needsUpdate=!0}}class bn extends H{constructor(){super("borderColor","inherit",!1),this._allowsInherit=!1,this._input="inherit"}computeOutputValue(e){"inherit"===this._input?this._value.set(this.getInheritedInput(e)):this._value.set(this._input)}getInheritedInput(e){return"inherit"!==this._input?this._input:e._color._value}}class yn extends wt{constructor(e={}){const t={};yn.definePropertiesValues(t,e),super(t,e),yn.init(this)}clear(){for(const e of this._inlines._value)e.clear();return super.clear()}bindBackgroundMeshProperties(){this._backgroundMesh.raycast=()=>{},this._bounds._size=this._backgroundMesh.scale,this._bounds._needsUpdate=!0}unbindBackgroundMeshProperties(){this._bounds._size=new g.Vector3(1,1,1),this._bounds._needsUpdate=!0}add(e){const t=[];for(let e=0;e<arguments.length;e++){const i=arguments[e];i.isUI?console.warn("ThreeMeshUI::InlineBlockElement cannot contains UI Elements.",i):(t.push(i),i.position.z=.005)}return super.add(...t)}static definePropertiesValues(e,t){e.children||(e.children=Yi),e.bounds||(e.bounds=gn),e.inlines||(e.inlines=pn),e.layouter||(e.layouter=wi),e.renderer||(e.renderer=fn),e.fontFamily||(e.fontFamily=Ri),e.fontWeight||(e.fontWeight=ki),e.fontStyle||(e.fontStyle=Vi),e.fontSize||(e.fontSize=$i),e.backgroundColor||(e.backgroundColor=vn),e.borderColor||(e.borderColor=bn),e.color||(e.color=mn),e.lineBreak||(e.lineBreak=xi),e.letterSpacing||(e.letterSpacing=Gi),e.whiteSpace||(e.whiteSpace=Ci),e.fontKerning||(e.fontKerning=pt),void 0===t.backgroundOpacity&&(t.backgroundOpacity=1),t.backgroundSize||(t.backgroundSize="cover"),t.width||(t.width="100%"),t.height||(t.height="100%"),t.boxSizing||(t.boxSizing="border-box")}static init(e){Object.defineProperties(e,{isInline:{configurable:!1,enumerable:!0,value:!0},isInlineBlock:{configurable:!1,enumerable:!0,value:!0}}),e._inlines._value=[new xn(e)],e.backgroundMaterial=new Ot,e._renderer.render(e)}}class xn extends Ae{constructor(e){super(),this._uiElement=e}get xadvance(){const e=this._uiElement._padding._value,t=this._uiElement._width;return t._relative?t._value*this._uiElement._fontSize.getInheritedInput(this._uiElement):e.w+e.y+t.value}get width(){const e=this._uiElement._width;return e._relative?e._value*this._uiElement._fontSize.getInheritedInput(this._uiElement):e.value}get height(){const e=this._uiElement._height;return e._relative?e._value*this._uiElement._fontSize.getInheritedInput(this._uiElement):e.value}get anchor(){return this.height}get lineHeight(){const e=this._uiElement._height;return e._relative?e._value*this._uiElement._fontSize.getInheritedInput(this._uiElement):e.value}get lineBase(){const e=this._uiElement._height;return e._relative?e._value*this._uiElement._fontSize.getInheritedInput(this._uiElement):e.value}clear(){this._uiElement=null}}class wn{constructor(e){this._subject=e}attach(){console.error(`Behavior::attach() - Is abstract and therefore should be overridden in ${this.constructor.name}`)}act(){throw new Error(`Behavior::act() - Is abstract and therefore should be overridden in ${this.constructor.name}`)}detach(){console.error(`Behavior::detach() - Is abstract and therefore should be overridden in ${this.constructor.name}`)}clear(){}}const Sn=()=>St.update(),Vn={Block:gi,Text:_n,Inline:Qi,InlineBlock:yn,MeshUIBaseElement:wt,FontLibrary:st,update:Sn,MSDFFontMaterialUtils:Ke,ShaderChunkUI:Mt,Behavior:wn,FontVariant:T,DefaultValues:n};"undefined"!=typeof global&&(global.ThreeMeshUI=Vn);const kn=Vn;console.warn("ThreeMeshUI v7.1.x - Three "+window.__THREE__);var Un=i.w8,Rn=i.cg,Cn=i.gO,In=i.wb,Mn=i.zV,Bn=i.HS,Pn=i.Ec,Tn=i.gF,Fn=i.ol,On=i.pz,zn=i.tx,An=i.hj,Wn=i.FV,Dn=i.sV,En=i.xv,Ln=i.mx,Hn=i.gE,Gn=i.ZP,$n=i.Vx;export{Un as BaseProperty,Rn as Behavior,Cn as Block,In as DefaultValues,Mn as FontLibrary,Bn as FontVariant,Pn as InheritableProperty,Tn as Inline,Fn as InlineBlock,On as InlineGlyph,zn as MSDFFontMaterialUtils,An as MaterialTransformers,Wn as MeshUIBaseElement,Dn as ShaderChunkUI,En as Text,Ln as TypographicFont,Hn as TypographicGlyph,Gn as default,$n as update};
\ No newline at end of file
diff --git a/build/types/behaviors/Behavior.d.ts b/build/types/behaviors/Behavior.d.ts
deleted file mode 100644
index 6d68c7df..00000000
--- a/build/types/behaviors/Behavior.d.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export default class Behavior {
-    _subject: any;
-    setSubject(subject: any): Behavior;
-    /**
-     *
-     * @returns {Behavior}
-     */
-    attach(): Behavior;
-    /**
-     * @param {any|null} [alterable=null]
-     * @abstract
-     */
-    act(alterable?: any | null): void;
-    /**
-     *
-     * @returns {Behavior}
-     */
-    detach(): Behavior;
-    /**
-     *
-     */
-    dispose(): void;
-    /**
-     *
-     */
-    clear(): void;
-}
diff --git a/build/types/behaviors/EventBehavior.d.ts b/build/types/behaviors/EventBehavior.d.ts
deleted file mode 100644
index c104312b..00000000
--- a/build/types/behaviors/EventBehavior.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export default class EventBehavior extends Behavior {
-    constructor(type: any, priority: any);
-    _hookType: any;
-    _hookPriority: any;
-}
-import Behavior from "./Behavior";
diff --git a/build/types/behaviors/HookBehavior.d.ts b/build/types/behaviors/HookBehavior.d.ts
deleted file mode 100644
index dfe59ca1..00000000
--- a/build/types/behaviors/HookBehavior.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export default class HookBehavior extends Behavior {
-    constructor(type: any, priority: any);
-    _hookType: any;
-    _hookPriority: any;
-}
-import Behavior from "./Behavior";
diff --git a/build/types/components/Block.d.ts b/build/types/components/Block.d.ts
deleted file mode 100644
index 66819a8b..00000000
--- a/build/types/components/Block.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
-
-Job:
-- Update a Block component
-- Calls BoxComponent's API to position its children box components
-- Calls InlineManager's API to position its children inline components
-- Call creation and update functions of its background planes
- */
-export default class Block extends BoxComponent {
-    isBlock: boolean;
-    size: Vector2;
-    _material: FrameMaterial;
-    get frame(): Frame;
-    parseParams(): void;
-    updateLayout(): void;
-    updateInner(): void;
-}
-import BoxComponent from "./core/BoxComponent.js";
-import { Vector2 } from "three/src/math/Vector2";
-import FrameMaterial from "../frame/materials/FrameMaterial";
-import Frame from "../frame/Frame.js";
diff --git a/build/types/components/InlineBlock.d.ts b/build/types/components/InlineBlock.d.ts
deleted file mode 100644
index 4421a2da..00000000
--- a/build/types/components/InlineBlock.d.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Job:
- * - computing its own size according to user measurements or content measurement
- * - creating an 'inlines' object with info, so that the parent component can organise it along with other inlines
- *
- * Knows:
- * - Its measurements parameter
- * - Parent block
- */
-export default class InlineBlock extends MeshUIComponent {
-    constructor(options: any);
-    isInline: boolean;
-    isInlineBlock: boolean;
-    size: Vector2;
-    _material: FrameMaterial;
-    inline: InlineBlockInline;
-    inlines: InlineBlockInline[];
-    parseParams(): void;
-    /**
-     * Create text content
-     *
-     * At this point, text.inlines should have been modified by the parent
-     * component, to add xOffset and yOffset properties to each inlines.
-     * This way, TextContent knows were to position each character.
-     *
-     */
-    updateLayout(): void;
-    updateInner(): void;
-    /*********************************************************************************************************************
-     * POVIDES INLINE SIZING
-     ********************************************************************************************************************/
-    /**
-     *
-     * @return {number}
-     */
-    get inlineXAdvance(): number;
-    /**
-     *
-     * @return {number}
-     */
-    get inlineWidth(): number;
-    /**
-     *
-     * @return {number}
-     */
-    get inlineHeight(): number;
-}
-import MeshUIComponent from "./core/MeshUIComponent";
-import { Vector2 } from "three/src/math/Vector2";
-import FrameMaterial from "../frame/materials/FrameMaterial";
-/**
- * InlineBlock has its own Inline implementation
- */
-declare class InlineBlockInline extends Inline {
-    /**
-     *
-     * @param {InlineBlock} parent
-     */
-    constructor(parent: InlineBlock);
-    /**
-     * @TODO: This currently make a circular reference that should ideally be removed
-     * @type {InlineBlock}
-     * @private
-     */
-    private _parent;
-}
-import Inline from "./core/Inline";
-export {};
diff --git a/build/types/components/Keyboard.d.ts b/build/types/components/Keyboard.d.ts
deleted file mode 100644
index 279c6730..00000000
--- a/build/types/components/Keyboard.d.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Job: high-level component that returns a keyboard
- */
-export default class Keyboard extends BoxComponent {
-    currentPanel: number;
-    isLowerCase: boolean;
-    charsetCount: number;
-    keys: any[];
-    panels: Block[];
-    /**
-     * Used to switch to an entirely different panel of this keyboard,
-     * with potentially a completely different layout
-     */
-    setNextPanel(): void;
-    setNextCharset(): void;
-    /** Toggle case for characters that support it. */
-    toggleCase(): void;
-    parseParams(): void;
-    updateLayout(): void;
-    updateInner(): void;
-}
-import BoxComponent from "./core/BoxComponent.js";
-import Block from "./Block.js";
diff --git a/build/types/components/Text.d.ts b/build/types/components/Text.d.ts
deleted file mode 100644
index 0c55f855..00000000
--- a/build/types/components/Text.d.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
-
-Job:
-- computing its own size according to user measurements or content measurement
-- creating 'inlines' objects with info, so that the parent component can organise them in lines
-
-Knows:
-- Its text content (string)
-- Font attributes ('font', 'fontSize'.. etc..)
-- Parent block
- */
-export default class Text extends MeshUIComponent {
-    constructor(options: any);
-    isInline: boolean;
-    isText: boolean;
-    /**
-     *
-     * @type {string[]}
-     * @private
-     */
-    private _textContent;
-    /**
-     *
-     * @type {MSDFTypographicGlyph[]}
-     * @private
-     */
-    private _textContentGlyphs;
-    /**
-     *
-     * @type {MSDFInlineGlyph[]}
-     * @private
-     */
-    private _textContentInlines;
-    /**
-     * Trigger some update when the font is ready
-     * @private
-     */
-    private _handleFontVariantReady;
-    /**
-     * When adding a text to a parent ui element,
-     * acquire parent font, if needed
-     * @private
-     */
-    private _acquireFont;
-    _onBeforeRender: () => void;
-    inlines: MSDFInlineGlyph[];
-    _buildContentKernings(): void;
-    /**
-     * Here we compute each glyph dimension, and we store it in this
-     * component's inlines parameter. This way the parent Block will
-     * compute each glyph position on updateLayout.
-     */
-    parseParams(): void;
-    /**
-     * Create text content
-     *
-     * At this point, text.inlines should have been modified by the parent
-     * component, to add xOffset and yOffset properties to each inlines.
-     * This way, TextContent knows were to position each character.
-     */
-    updateLayout(): void;
-    updateInner(): void;
-    calculateInlines(fontSize: any): void;
-}
-import MeshUIComponent from "./core/MeshUIComponent";
-import MSDFInlineGlyph from "../font/msdf/MSDFInlineGlyph";
diff --git a/build/types/components/core/BoxComponent.d.ts b/build/types/components/core/BoxComponent.d.ts
deleted file mode 100644
index af47621b..00000000
--- a/build/types/components/core/BoxComponent.d.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export default class BoxComponent extends InlineManager {
-    isBoxComponent: boolean;
-    childrenPos: {};
-    /** Get width of this component minus its padding */
-    getInnerWidth(): any;
-    /** Get height of this component minus its padding */
-    getInnerHeight(): any;
-    /** Return the sum of all this component's children sides + their margin */
-    getChildrenSideSum(dimension: any): any;
-    /** Look in parent record what is the instructed position for this component, then set its position */
-    setPosFromParentRecords(): void;
-    /** Position inner elements according to dimensions and layout parameters. */
-    computeChildrenPosition(): void;
-    /**
-     * Returns the highest linear dimension among all the children of the passed component
-     * MARGIN INCLUDED
-     */
-    getHighestChildSizeOn(direction: any): number;
-    /**
-     * Get width of this element
-     * With padding, without margin
-     */
-    getWidth(): any;
-    /**
-     * Get height of this element
-     * With padding, without margin
-     */
-    getHeight(): any;
-}
-import InlineManager from "./InlineManager";
diff --git a/build/types/components/core/InlineManager.d.ts b/build/types/components/core/InlineManager.d.ts
deleted file mode 100644
index 6c9502f3..00000000
--- a/build/types/components/core/InlineManager.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default class InlineManager extends MeshUIComponent {
-    constructor(options: any);
-    /** Compute children .inlines objects position, according to their pre-computed dimensions */
-    computeInlinesPosition(): void;
-    /**
-     * computes lines based on children's inlines array.
-     * @private
-     */
-    private computeLines;
-}
-import MeshUIComponent from "./MeshUIComponent";
diff --git a/build/types/components/core/MeshUIComponent.d.ts b/build/types/components/core/MeshUIComponent.d.ts
deleted file mode 100644
index 809b20fd..00000000
--- a/build/types/components/core/MeshUIComponent.d.ts
+++ /dev/null
@@ -1,277 +0,0 @@
-/**
-
-Job:
-- Set this component attributes and call updates accordingly
-- Getting this component attribute, from itself or from its parents
-- Managing this component's states
-
-This is the core module of three-mesh-ui. Every component is composed with it.
-It owns the principal public methods of a component : set, setupState and setState.
-
- */
-export default class MeshUIComponent extends Object3D<import("three").Event> {
-    /**
-     *
-     * @param {Object.<(string), any>} options
-     */
-    constructor(options: any);
-    states: {};
-    currentState: any;
-    isUI: boolean;
-    autoLayout: boolean;
-    /**
-     *
-     * @type {MeshUIComponent[]}
-     */
-    childrenUIs: MeshUIComponent[];
-    /**
-     *
-     * @type {MeshUIComponent[]}
-     */
-    childrenBoxes: MeshUIComponent[];
-    /**
-     *
-     * @type {MeshUIComponent[]}
-     */
-    childrenTexts: MeshUIComponent[];
-    /**
-     *
-     * @type {MeshUIComponent[]}
-     */
-    childrenInlines: MeshUIComponent[];
-    /**
-     * parents
-     * @type {MeshUIComponent|null}
-     */
-    parentUI: MeshUIComponent | null;
-    /**
-     *
-     * @type {Mesh|null}
-     * @protected
-     */
-    protected _main: Mesh | null;
-    _hooks: {};
-    _onAfterUpdates: any[];
-    /**
-     *
-     * @type {Object.<{m:string, t?:(value:any) => any}>}
-     * @protected
-     */
-    protected _materialMediation: any;
-    _meshMediation: {
-        _castShadow: {
-            m: string;
-        };
-        _receiveShadow: {
-            m: string;
-        };
-    };
-    /**
-     *
-     * @type {Vector4}
-     * @private
-     */
-    private _borderRadius;
-    /**
-     *
-     * @type {Vector4}
-     * @private
-     */
-    private _borderWidth;
-    /**
-     * @Todo: Probably only for boxComponents
-     * @type {Lines}
-     */
-    lines: Lines;
-    /**
-     *
-     * @type {FontVariant}
-     * @protected
-     */
-    protected _font: FontVariant;
-    getClippingPlanes(): any;
-    /**
-     * @TODO : This is already present in MaterialManager
-     * Update a component's materials clipping planes.
-     * Called every frame.
-     */
-    updateClippingPlanes(value: any): void;
-    clippingPlanes: any;
-    /** Get the highest parent of this component (the parent that has no parent on top of it) */
-    getHighestParent(): any;
-    /**
-     * look for a property in this object, and if does not find it, find in parents or return default value
-     * @private
-     */
-    private _getProperty;
-    getFontSize(): any;
-    getSegments(): any;
-    getAlphaTest(): any;
-    getFontKerning(): any;
-    getFontStyle(): any;
-    getFontWeight(): any;
-    getLetterSpacing(): any;
-    getFontTexture(): any;
-    getFontFamily(): any;
-    getBreakOn(): any;
-    getWhiteSpace(): any;
-    getTextAlign(): any;
-    getFontColor(): any;
-    getFontSupersampling(): any;
-    getFontOpacity(): any;
-    getFontPXRange(): any;
-    getBorderRadius(): any;
-    getBorderWidth(): any;
-    getBorderColor(): any;
-    getBorderOpacity(): any;
-    /** return the first parent with a 'threeOBJ' property */
-    getContainer(): any;
-    /** Get the number of UI parents above this elements (0 if no parent) */
-    getParentsNumber(i: any): any;
-    getBackgroundOpacity(): any;
-    getBackgroundColor(): any;
-    getBackgroundTexture(): any;
-    /**
-     * @deprecated
-     * @returns {string}
-     */
-    getAlignContent(): string;
-    getAlignItems(): any;
-    getContentDirection(): any;
-    getJustifyContent(): any;
-    getInterLine(): any;
-    getOffset(): any;
-    getBackgroundSize(): any;
-    getHiddenOverflow(): any;
-    getBestFit(): any;
-    /**
-     * Filters children in order to compute only one times children lists
-     * @private
-     */
-    private _rebuildChildrenLists;
-    /**
-     * Try to retrieve parentUI after each structural change
-     * @private
-     */
-    private _rebuildParentUI;
-    /**
-     * When the user calls component.add, it registers for updates,
-     * then call THREE.Object3D.add.
-     */
-    /**
-     *
-     * @override
-     * @param {...Object3D} object
-     * @return {this}
-     */
-    override add(...args: Object3D<import("three").Event>[]): this;
-    /**
-     * When the user calls component.remove, it registers for updates,
-     * then call THREE.Object3D.remove.
-     * @override
-     * @param {...Object3D} object
-     * @return {this}
-     */
-    override remove(...args: Object3D<import("three").Event>[]): this;
-    update(updateParsing: any, updateLayout: any, updateInner: any): void;
-    performAfterUpdate(): void;
-    /**
-     *
-     * @param func
-     */
-    set onAfterUpdate(arg: any);
-    addAfterUpdate(func: any): void;
-    /**
-     *
-     * @TODO: Adding a new hook should no be direct, but delayed before or after performing the hookLoop
-     * @param {string} type
-     * @param {function|Behavior} newHook
-     * @param {number} priority
-     */
-    hook(type: string, newHook: Function | Behavior, priority?: number): void;
-    /**
-     *
-     * @param {string} type
-     * @param {function|Behavior} hookToRemove
-     */
-    unhook(type: string, hookToRemove: Function | Behavior): void;
-    performHooks(hooks: any, alterable?: any): void;
-    /**
-     * Set this component's passed parameters.
-     * If necessary, take special actions.
-     * Update this component unless otherwise specified.
-     */
-    set(options: any): void;
-    fontFamily: any;
-    /**
-     * @param {FontVariant} value
-     */
-    set font(arg: FontVariant);
-    /**
-     *
-     * @returns {FontVariant}
-     */
-    get font(): FontVariant;
-    /** Store a new state in this component, with linked attributes */
-    setupState(options: any): void;
-    /** Set the attributes of a stored state of this component */
-    setState(state: any): void;
-    /**
-     * Get completely rid of this component and its children, also unregister it for updates
-     * @override
-     * @return {this}
-     */
-    override clear(): this;
-    /**
-     *
-     * @param {Material|ShaderMaterial} material
-     */
-    set material(arg: any);
-    /***********************************************************************************************************************
-     * TO MATERIAL HOLDER
-     **********************************************************************************************************************/
-    get material(): any;
-    _material: any;
-    _customDepthMaterial: Material;
-    /**
-     * According to the list of materialProperties
-     * some properties are sent to material
-     * @private
-     */
-    private _transferToMaterial;
-    _transferToMesh(options?: any): void;
-    /**
-     *
-     * @param {Vector4} vector4
-     * @param {string|number|Array.<string|number>} value
-     * @private
-     */
-    private _fourDimensionsValueSetter;
-    _visible: boolean;
-    _castShadow: boolean;
-    _receiveShadow: boolean;
-    _renderOrder: number;
-    /*********************************************************************************************************************
-     * MATERIAL MEDIATION
-     ********************************************************************************************************************/
-    /**
-     *
-     * @param {number} value
-     */
-    set side(arg: number);
-    /**
-     *
-     * @return {number}
-     */
-    get side(): number;
-    _side: number;
-    bestFit: any;
-    hiddenOverflow: any;
-    offset: any;
-}
-import { Object3D } from "three/src/core/Object3D";
-import { Mesh } from "three/src/objects/Mesh";
-import Lines from "./Lines";
-import FontVariant from "../../font/FontVariant";
-import Behavior from "../../behaviors/Behavior";
-import { Material } from "three/src/materials/Material";
diff --git a/build/types/components/core/UpdateManager.d.ts b/build/types/components/core/UpdateManager.d.ts
index dccc132c..ead6a93f 100644
--- a/build/types/components/core/UpdateManager.d.ts
+++ b/build/types/components/core/UpdateManager.d.ts
@@ -20,26 +20,12 @@
  * update() in their render loop.
  */
 declare class UpdateManager {
-    static requestUpdate(component: any, updateParsing: any, updateLayout: any, updateInner: any): void;
-    /** Register a passed component for later updates */
     static register(component: any): void;
-    /** Unregister a component (when it's deleted for instance) */
-    static disposeOf(component: any): void;
-    /** Trigger all requested updates of registered components */
+    static remove(component: any): void;
     static update(): void;
-    /**
-     * Calls parseParams update of all components from parent to children
-     * @private
-     */
-    private static traverseParsing;
-    /**
-     * Calls updateLayout and updateInner functions of components that need an update
-     * @private
-     */
-    private static traverseUpdates;
 }
 declare namespace UpdateManager {
-    const components: any[];
-    const requestedUpdates: {};
+    const elements: Array<MeshUIBaseElement>;
 }
 export default UpdateManager;
+import MeshUIBaseElement from "./../../core/elements/MeshUIBaseElement";
diff --git a/build/types/core/DefaultValues.d.ts b/build/types/core/DefaultValues.d.ts
new file mode 100644
index 00000000..99d3be74
--- /dev/null
+++ b/build/types/core/DefaultValues.d.ts
@@ -0,0 +1,2 @@
+export function set(overrideProperties: import('./../core/elements/MeshUIBaseElement').Options): void;
+export function get(property: string): any;
diff --git a/build/types/core/elements/MeshUIBaseElement.d.ts b/build/types/core/elements/MeshUIBaseElement.d.ts
new file mode 100644
index 00000000..dd838603
--- /dev/null
+++ b/build/types/core/elements/MeshUIBaseElement.d.ts
@@ -0,0 +1,511 @@
+export default class MeshUIBaseElement extends Object3D<import("three").Event> {
+    /**
+     *
+     * @param {Properties} properties
+     * @param {Options} values
+     */
+    constructor(properties: Properties, values: Options);
+    /**
+     *
+     * @type {Mesh|null}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {Material}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {Material}
+     * @protected
+     */
+
+    /**
+     *
+     * @type {Object.<{m:string, t?:(target:any, targetProperty:string, value:any) => void}>}
+     * @protected
+     */
+
+    /**
+     *
+     * @type {Object.<{m:string, t?:(value:any) => any}>}
+     * @private
+     */
+
+    /**
+     *
+     * @type {Mesh|null}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {InheritableMaterialProperty}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {InheritableMaterialProperty}
+     * @private
+     */
+
+    /**
+     *
+     * @type {Object.<{m:string, t?:(value:any) => any}>}
+     * @private
+     */
+
+    /**
+     *
+     * @type {EmptyProperty|ChildrenBox|ChildrenText}
+     * @internal
+     */
+
+
+
+
+
+
+
+
+
+
+
+
+
+    /**
+     *
+     * @type {BoundsBox|BoundsText|EmptyProperty}
+     * @ignore
+     * @internal
+     */
+
+
+
+
+
+    /**
+     *
+     * @type {FlexDirectionProperty}
+     * @internal
+     */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    /**
+     *
+     * @type {TextContentEmpty|TextContentText|TextContentInline}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {GlyphsProperty}
+     * @internal
+     */
+
+
+    /**
+     *
+     * @type {BoxLayouter|TextLayouter|EmptyProperty}
+     * @internal
+     */
+
+
+
+
+
+
+
+
+    /**
+     *
+     * @type {Array.<BaseProperty>}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {*[]}
+     * @private
+     */
+
+    update(): void;
+    process(): void;
+    render(): void;
+    /**
+     *
+     * @param {Options} options
+     */
+    set(options: Options): void;
+    get(property: any): any;
+    /**
+     * Filters children in order to compute only one times children lists
+     * @private
+     */
+
+    /**
+     * Try to retrieve parentUI after each structural change
+     * @protected
+     */
+
+    /**
+     * When the user calls component.add, it registers for updates,
+     * then call THREE.Object3D.add.
+     */
+    /**
+     *
+     * @override
+     * @param {...Object3D} object
+     * @return {this}
+     */
+    override add(...args: Object3D<import("three").Event>[]): this;
+    /**
+     * When the user calls component.remove, it registers for updates,
+     * then call THREE.Object3D.remove.
+     * @override
+     * @param {...Object3D} object
+     * @return {this}
+     */
+    override remove(...args: Object3D<import("three").Event>[]): this;
+    /**
+     *
+     * @return {string}
+     */
+    get textContent(): string;
+    /**
+     *
+     * @param {Material|ShaderMaterial} material
+     */
+    set backgroundMaterial(arg: Material | ShaderMaterial);
+    /***********************************************************************************************************************
+     * TO MATERIAL HOLDER
+     **********************************************************************************************************************/
+    /**
+     *
+     * @returns {Material|ShaderMaterial}
+     */
+    get backgroundMaterial(): Material | ShaderMaterial;
+    /**
+     *
+     * @param {Material|null} material
+     */
+    set backgroundCustomDepthMaterial(arg: Material);
+    /**
+     *
+     * @returns {Material|null}
+     */
+    get backgroundCustomDepthMaterial(): Material;
+    /**
+     * According to the list of materialProperties
+     * some properties are sent to material
+     * @param {Object} [options=null]
+     * @private
+     */
+
+    /**
+     *
+     * @param {number} value
+     */
+    set backgroundSide(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get backgroundSide(): number;
+    /**
+     *
+     * @param {number} value
+     */
+    set backgroundAlphaTest(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get backgroundAlphaTest(): number;
+    /**
+     *
+     * @param {Material|ShaderMaterial} material
+     */
+    set fontMaterial(arg: Material | ShaderMaterial);
+    /** Font Material ----------------------------------------------------------*/
+    /**
+     *
+     * @returns {Material|ShaderMaterial}
+     */
+    get fontMaterial(): Material | ShaderMaterial;
+    /**
+     *
+     * @param {Material|null} material
+     */
+    set fontCustomDepthMaterial(arg: Material);
+    /**
+     *
+     * @returns {Material|null}
+     */
+    get fontCustomDepthMaterial(): Material;
+    /**
+     * According to the list of materialProperties
+     * some properties are sent to material
+     * @param {Object} [options=null]
+     * @private
+     */
+
+    /**
+     *
+     * @param {number} value
+     */
+    set fontSide(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get fontSide(): number;
+    /**
+     *
+     * @param {number} value
+     */
+    set fontAlphaTest(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get fontAlphaTest(): number;
+    /*********************************************************************************************************************
+     * MESH MEDIATION
+     ********************************************************************************************************************/
+    /**
+     * According to the list of meshProperties
+     * some properties are sent to mesh
+     * @param {Object} [options=null]
+     * @private
+     */
+
+    /**
+     * @internal
+     * @param {Mesh|Array.<Mesh>|null} mesh
+     */
+    setBackgroundMesh(mesh: Mesh | Array<Mesh> | null): void;
+    /**
+     *
+     */
+    bindBackgroundMeshProperties(): void;
+    /**
+     *
+     */
+    unbindBackgroundMeshProperties(): void;
+    activatePseudoState(state: any): void;
+    deactivatePseudoState(state: any): void;
+    togglePseudoState(state: any): void;
+    set borderRadiusMediation(arg: any);
+    /**
+     *
+     * @param {boolean} value
+     */
+    set backgroundCastShadow(arg: boolean);
+    /**
+     *
+     * @return {boolean}
+     */
+    get backgroundCastShadow(): boolean;
+    /**
+     *
+     * @param {boolean} value
+     */
+    set backgroundReceiveShadow(arg: boolean);
+    /**
+     *
+     * @return {boolean}
+     */
+    get backgroundReceiveShadow(): boolean;
+    /** Font Mesh --------------------------------------------------------------*/
+    /**
+     * According to the list of meshProperties
+     * some properties are sent to mesh
+     * @param {Object} [options=null]
+     * @private
+     */
+
+    /**
+     * @internal
+     * @param {Mesh|Array.<Mesh>|null} mesh
+     */
+    setFontMesh(mesh: Mesh | Array<Mesh> | null): void;
+    /**
+     *
+     */
+    bindFontMeshProperties(): void;
+    /**
+     *
+     */
+    unbindFontMeshProperties(): void;
+    /**
+     *
+     * @param {boolean} value
+     */
+    set fontCastShadow(arg: boolean);
+    /**
+     *
+     * @return {boolean}
+     */
+    get fontCastShadow(): boolean;
+    /**
+     *
+     * @param {boolean} value
+     */
+    set fontReceiveShadow(arg: boolean);
+    /**
+     *
+     * @return {boolean}
+     */
+    get fontReceiveShadow(): boolean;
+    /***********************************************************************************************************************
+     * GEOMETRY
+     **********************************************************************************************************************/
+    /**
+     *
+     * @param {Number} v
+     */
+    set segments(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get segments(): number;
+    /***********************************************************************************************************************
+     * HOOKS & ALTERS
+     **********************************************************************************************************************/
+    /**
+     *
+     * @param {Function} func
+     */
+    set onAfterUpdate(arg: Function);
+    /**
+     *
+     * @param {Function} func
+     */
+    addAfterUpdate(func: Function): void;
+    /**
+     *
+     * @param {Function} func
+     */
+    removeAfterUpdate(func: Function): void;
+    /**
+     * @todo: afterUpdate not called anymore
+     */
+    performAfterUpdate(): void;
+    /**
+     *
+     * @param {string} name
+     * @param {BaseProperty} instance
+     * @returns {void}
+     */
+    appendProperty(name: string, instance: BaseProperty): void;
+    /**
+     *
+     * @param {string} name
+     * @param {BaseProperty} instance
+     * @returns {BaseProperty}
+     */
+    replaceProperty(name: string, instance: BaseProperty): BaseProperty;
+}
+export type Properties = {
+    [x: string]: Function;
+};
+export type Options = DocumentedOptions & {
+    [x: string]: any;
+};
+export type DocumentedOptions = {
+    name?: string;
+    flexDirection?: "row" | "row-reverse" | "column" | "column-reverse";
+    justifyContent?: "start" | "center" | "end" | "space-around" | "space-between" | "space-evenly";
+    alignItems?: "start" | "center" | "end" | "stretch";
+    overflow?: "visible" | "hidden";
+    fontKerning?: "normal" | "none";
+    segments?: number;
+    fontStyle?: "normal" | "italic";
+    fontWeight?: "light" | "normal" | "bold" | "bolder" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+    backgroundColor?: Color | number | string;
+    backgroundOpacity?: number;
+    backgroundSize?: "cover" | "contain" | "stretch";
+    backgroundImage?: Texture | string;
+    borderRadius?: Vector4 | Array<number> | number | string;
+    borderWidth?: Vector4 | Array<number> | number | string;
+    borderColor?: Color | number | string;
+    boxSizing?: "content-box" | "border-box";
+    width?: number | string | "100%" | "auto";
+    height?: number | string | "100%" | "auto";
+    padding?: Vector4 | Array<number> | number | string;
+    margin?: Vector4 | Array<number> | number | string;
+    textAlign?: "left" | "right" | "center" | "justify" | "justify-left" | "justify-right";
+    visible?: boolean;
+    letterSpacing?: number;
+    whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
+    fontTexture?: Texture | string;
+};
+import { Object3D } from "three/src/core/Object3D";
+import { Mesh } from "three/src/objects/Mesh";
+import { Material } from "three/src/materials/Material";
+import InheritableMaterialProperty from "../properties/InheritableMaterialProperty";
+import EmptyProperty from "../properties/EmptyProperty";
+import ParentProperty from "../properties/hierarchy/ParentProperty";
+import SideProperty from "../properties/SideProperty";
+import NumberProperty from "../properties/NumberProperty";
+import VisibleProperty from "../properties/VisibleProperty";
+import InheritableBooleanProperty from "../properties/InheritableBooleanProperty";
+import RenderOrderProperty from "../properties/RenderOrderProperty";
+import OrderProperty from "../properties/style-properties/flex/OrderProperty";
+import PaddingProperty from "../properties/style-properties/bounds/PaddingProperty";
+import MarginProperty from "../properties/style-properties/bounds/MarginProperty";
+import PositionProperty from "../properties/style-properties/PositionProperty";
+import FlexDirectionProperty from "../properties/style-properties/flex/FlexDirectionProperty";
+import Display from "../properties/style-properties/visibility/Display";
+import BoxSizing from "../properties/style-properties/bounds/BoxSizing";
+import WidthProperty from "../properties/style-properties/bounds/WidthProperty";
+import HeightProperty from "../properties/style-properties/bounds/HeightProperty";
+import StyleFactorProperty from "../properties/style-properties/StyleFactorProperty";
+import BackgroundImage from "../properties/style-properties/background/BackgroundImage";
+import BackgroundSize from "../properties/style-properties/background/BackgroundSize";
+import Overflow from "../properties/style-properties/visibility/Overflow";
+import BorderRadius from "../properties/style-properties/border/BorderRadius";
+import BorderWidth from "../properties/style-properties/border/BorderWidth";
+import StyleColorProperty from "../properties/style-properties/StyleColorProperty";
+import FontProperty from "../properties/FontProperty";
+import TextContentEmpty from "../properties/TextContentEmpty";
+import InlineJustificator from "../properties/InlineJustificator";
+import OffsetProperty from "../properties/OffsetProperty";
+import InvertAlphaProperty from "../properties/InvertAlphaProperty";
+import BaseProperty from "./../properties/BaseProperty";
+import { ShaderMaterial } from "three/src/materials/ShaderMaterial";
+import { Color } from "three/src/math/Color";
+import { Texture } from "three/src/textures/Texture";
+import { Vector4 } from "three/src/math/Vector4";
diff --git a/build/types/components/core/Inline.d.ts b/build/types/core/elements/glyphs/Inline.d.ts
similarity index 66%
rename from build/types/components/core/Inline.d.ts
rename to build/types/core/elements/glyphs/Inline.d.ts
index 41ce5d3b..4bd15933 100644
--- a/build/types/components/core/Inline.d.ts
+++ b/build/types/core/elements/glyphs/Inline.d.ts
@@ -3,12 +3,17 @@
  * Inline can be positioned according to text rules
  */
 export default class Inline {
-    /** @protected */ protected _offsetX: number;
-    /** @protected */ protected _offsetY: number;
-    /** @protected */ protected _lineBreak: string;
-    /** @protected */ protected _kerning: number;
-    /** @protected */ protected _fontFactor: number;
-    /** @protected */ protected _fontSize: number;
+
+
+
+
+
+
+
+
+
+
+
     /**
      * @returns {void}
      */
@@ -98,6 +103,56 @@ export default class Inline {
      * @returns {number}
      */
     get offsetY(): number;
+    /**
+     *
+     * @param {number} value
+     */
+    set cumulativeWidth(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get cumulativeWidth(): number;
+    /**
+     *
+     * @param {number} value
+     */
+    set marginLeft(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get marginLeft(): number;
+    /**
+     *
+     * @param {number} value
+     */
+    set marginRight(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get marginRight(): number;
+    /**
+     *
+     * @param {number} value
+     */
+    set paddingLeft(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get paddingLeft(): number;
+    /**
+     *
+     * @param {number} value
+     */
+    set paddingRight(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get paddingRight(): number;
     /**
      *
      * @returns {number}
@@ -108,4 +163,9 @@ export default class Inline {
      * @param {number} value
      */
     set fontFactor(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get fontFactor(): number;
 }
diff --git a/build/types/components/core/Line.d.ts b/build/types/core/elements/glyphs/Line.d.ts
similarity index 100%
rename from build/types/components/core/Line.d.ts
rename to build/types/core/elements/glyphs/Line.d.ts
diff --git a/build/types/components/core/Lines.d.ts b/build/types/core/elements/glyphs/Lines.d.ts
similarity index 100%
rename from build/types/components/core/Lines.d.ts
rename to build/types/core/elements/glyphs/Lines.d.ts
diff --git a/build/types/core/properties/AutoSizePropertyBox.d.ts b/build/types/core/properties/AutoSizePropertyBox.d.ts
new file mode 100644
index 00000000..da6fa197
--- /dev/null
+++ b/build/types/core/properties/AutoSizePropertyBox.d.ts
@@ -0,0 +1,8 @@
+/**
+ * Autosize are only trigger when natural size changed
+ */
+export default class AutoSizePropertyBox extends BaseProperty {
+    constructor();
+    process(element: any): void;
+}
+import BaseProperty from "./BaseProperty";
diff --git a/build/types/core/properties/AutoSizePropertyText.d.ts b/build/types/core/properties/AutoSizePropertyText.d.ts
new file mode 100644
index 00000000..9d3fb1fa
--- /dev/null
+++ b/build/types/core/properties/AutoSizePropertyText.d.ts
@@ -0,0 +1,8 @@
+/**
+ * Autosize are only trigger when natural size changed
+ */
+export default class AutoSizePropertyText extends BaseProperty {
+    constructor();
+    process(element: any): void;
+}
+import BaseProperty from "./BaseProperty";
diff --git a/build/types/core/properties/BaseProperty.d.ts b/build/types/core/properties/BaseProperty.d.ts
new file mode 100644
index 00000000..430528dc
--- /dev/null
+++ b/build/types/core/properties/BaseProperty.d.ts
@@ -0,0 +1,114 @@
+export default class BaseProperty {
+    /**
+     *
+     * @param {string} propertyId
+     * @param {any} [value=null]
+     * @param primitive
+     */
+    constructor(propertyId: string, value?: any, primitive?: boolean);
+    /**
+     *
+     * @type {string}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {any}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {boolean}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {boolean}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {boolean}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {boolean}
+     * @protected
+     */
+
+    /**
+     *
+     * @return {string}
+     */
+    get id(): string;
+    /**
+     *
+     * @param {any} value
+     */
+    set value(arg: any);
+    /**
+     *
+     * @return {any}
+     */
+    get value(): any;
+    /**
+     *
+     * @param element
+     * @param {Object.<string,any>} out
+     */
+    update(element: any, out: {
+        [x: string]: any;
+    }): void;
+    /**
+     * Output this property in a dictionnary
+     * @param {Object.<string,any>} out
+     */
+    output(out: {
+        [x: string]: any;
+    }): void;
+    /**
+     *
+     * @param {Out} out
+     */
+
+    /**
+     * Execute additional process after all properties have been updated
+     * @param {MeshUIBaseElement} element
+     */
+    process(element: MeshUIBaseElement): void;
+    /**
+     * Execute additional process after all properties have been updated
+     * @param {MeshUIBaseElement} element
+     */
+    render(element: MeshUIBaseElement): void;
+    /**
+     *
+     * @param {MeshUIBaseElement} element
+     */
+    getInheritedInput(element: MeshUIBaseElement): any;
+    /**
+     *
+     * @return {any}
+     */
+    getDefaultValue(): any;
+    /**
+     *
+     * @param {any} value
+     * @return {boolean}
+     */
+    isValid(value: any): boolean;
+    /**
+     *
+     */
+    emptyStrategyLogic(): void;
+}
+export type Out = any & {
+    [x: string]: any;
+};
+import MeshUIBaseElement from "./../../core/elements/MeshUIBaseElement";
diff --git a/build/types/core/properties/BooleanProperty.d.ts b/build/types/core/properties/BooleanProperty.d.ts
new file mode 100644
index 00000000..046d76c8
--- /dev/null
+++ b/build/types/core/properties/BooleanProperty.d.ts
@@ -0,0 +1,26 @@
+export default class BooleanProperty extends BaseProperty {
+    /**
+     *
+     * @param {string} propertyId
+     * @param {any} [value=null]
+     */
+    constructor(propertyId: string, value?: any);
+    /**
+     * @override
+     * @type {boolean}
+     * @private
+     */
+
+    output: (out: any) => void;
+    /**
+     *
+     * @param {boolean} value
+     */
+    set value(arg: boolean);
+    /**
+     *
+     * @return {boolean}
+     */
+    get value(): boolean;
+}
+import BaseProperty from "./BaseProperty";
diff --git a/build/types/core/properties/BoundsBox.d.ts b/build/types/core/properties/BoundsBox.d.ts
new file mode 100644
index 00000000..63b8d31c
--- /dev/null
+++ b/build/types/core/properties/BoundsBox.d.ts
@@ -0,0 +1,82 @@
+export default class BoundsBox extends BaseProperty {
+    constructor();
+    /**
+     *
+     * @type {Vector3}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {number}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {number}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {number}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {number}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {number}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {number}
+     * @internal
+     */
+
+    /**
+     * Set the value of the width 100%
+     * @param element
+     * @param value
+     */
+    setReferenceWidth(element: any, value: any): void;
+    /**
+     * Set the value of the height 100%
+     * @param element
+     * @param value
+     */
+    setReferenceHeight(element: any, value: any): void;
+    setChildrenWidth(element: any, value: any): void;
+    setChildrenHeight(element: any, value: any): void;
+    update(element: any, out: any): void;
+    render(element: any): void;
+    /**
+     * @override
+     */
+    override process(element: any): void;
+    /**
+     *
+     * @param element
+     * @internal
+     */
+
+    /**
+     *
+     * @param element
+     * @internal
+     */
+
+
+
+
+}
+import BaseProperty from "./BaseProperty";
+import { Vector3 } from "three/src/math/Vector3";
diff --git a/build/types/core/properties/BoundsInlineBlock.d.ts b/build/types/core/properties/BoundsInlineBlock.d.ts
new file mode 100644
index 00000000..a4ed2719
--- /dev/null
+++ b/build/types/core/properties/BoundsInlineBlock.d.ts
@@ -0,0 +1,17 @@
+export default class BoundsInlineBlock extends BaseProperty {
+    constructor();
+    /**
+     *
+     * @type {Vector3}
+     * @internal
+     */
+
+
+
+
+
+    update(element: any, out: any): void;
+    render(element: any): void;
+}
+import BaseProperty from "./BaseProperty";
+import { Vector3 } from "three/src/math/Vector3";
diff --git a/build/types/core/properties/BoundsText.d.ts b/build/types/core/properties/BoundsText.d.ts
new file mode 100644
index 00000000..d58c0cd1
--- /dev/null
+++ b/build/types/core/properties/BoundsText.d.ts
@@ -0,0 +1,3 @@
+export default class BoundsText extends BoundsBox {
+}
+import BoundsBox from "./BoundsBox";
diff --git a/build/types/core/properties/BoxLayouter.d.ts b/build/types/core/properties/BoxLayouter.d.ts
new file mode 100644
index 00000000..abdabd53
--- /dev/null
+++ b/build/types/core/properties/BoxLayouter.d.ts
@@ -0,0 +1,29 @@
+export default class BoxLayouter extends BaseProperty {
+    constructor();
+    /**
+     * @typedef ChildrenPos
+     * @type {Object & Object.<string,Vector3>}
+     */
+    /**
+     *
+     * @type {ChildrenPos}
+     * @internal
+     */
+
+    /**
+     * Updated when :
+     * 	- New child added
+     * 	- Child removed
+     * 	- Child position changed
+     * 	- Child visibility changed
+     * 	- ...?
+     * 	@override
+     */
+    override update(element: any, out: any): void;
+    /**
+     *
+     * @override
+     */
+    override process(element: any): void;
+}
+import BaseProperty from "./BaseProperty";
diff --git a/build/types/core/properties/EmptyProperty.d.ts b/build/types/core/properties/EmptyProperty.d.ts
new file mode 100644
index 00000000..e26b546b
--- /dev/null
+++ b/build/types/core/properties/EmptyProperty.d.ts
@@ -0,0 +1,8 @@
+export default class EmptyProperty extends BaseProperty {
+    /**
+     *
+     * @param {string} propertyId
+     */
+    constructor(propertyId?: string);
+}
+import BaseProperty from "./BaseProperty";
diff --git a/build/types/core/properties/FontProperty.d.ts b/build/types/core/properties/FontProperty.d.ts
new file mode 100644
index 00000000..97668fe1
--- /dev/null
+++ b/build/types/core/properties/FontProperty.d.ts
@@ -0,0 +1,62 @@
+export default class FontProperty extends BaseProperty {
+    /**
+     *
+     * @param {FontVariant} [value=null]
+     */
+    constructor(value?: FontVariant);
+    /**
+     *
+     * @type {FontVariant|null}
+     * @internal
+     */
+
+    /**
+     * @typedef ReadyClosure
+     * @type { ()=> void|null }
+     */
+    /**
+     *
+     * @type {ReadyClosure}
+     * @private
+     */
+
+    /**
+     * @override
+     */
+
+    output(out: any): void;
+    /**
+     *
+     * @override
+     */
+    override update(element: any, out: any): void;
+    /**
+     * @override
+     * @param {FontVariant} value
+     */
+    override set value(arg: FontVariant);
+    /**
+     *
+     * @return {FontVariant}
+     */
+    override get value(): FontVariant;
+    /**
+     *
+     * @return {FontVariant|null}
+     */
+    get fontVariant(): FontVariant;
+    /**
+     *
+     */
+    dispose(): void;
+}
+import BaseProperty from "./BaseProperty";
+import FontVariant from "../../font/FontVariant";
+/**
+ *
+ * @param {number} value
+ * @return {boolean}
+ * @private
+ */
+
+export {};
diff --git a/build/types/core/properties/FontSmoothProperty.d.ts b/build/types/core/properties/FontSmoothProperty.d.ts
new file mode 100644
index 00000000..d6778c89
--- /dev/null
+++ b/build/types/core/properties/FontSmoothProperty.d.ts
@@ -0,0 +1,13 @@
+export default class FontSmoothProperty extends InheritableProperty {
+    constructor();
+
+}
+import InheritableProperty from "./InheritableProperty";
+/**
+ *
+ * @param {string} value
+ * @return {boolean}
+ * @private
+ */
+
+export {};
diff --git a/build/types/core/properties/FontSmoothPropertyInline.d.ts b/build/types/core/properties/FontSmoothPropertyInline.d.ts
new file mode 100644
index 00000000..f3a3dfd6
--- /dev/null
+++ b/build/types/core/properties/FontSmoothPropertyInline.d.ts
@@ -0,0 +1,3 @@
+export default class FontSmoothPropertyInline extends FontSmoothProperty {
+}
+import FontSmoothProperty from "./FontSmoothProperty";
diff --git a/build/types/core/properties/GlyphsProperty.d.ts b/build/types/core/properties/GlyphsProperty.d.ts
new file mode 100644
index 00000000..0eb87728
--- /dev/null
+++ b/build/types/core/properties/GlyphsProperty.d.ts
@@ -0,0 +1,17 @@
+export default class GlyphsProperty extends BaseProperty {
+    constructor();
+    /**
+     *
+     * @type {Array.<TypographicGlyph>}
+     * @private
+     */
+
+    process(element: any): void;
+    /**
+     *
+     * @return {Array.<TypographicGlyph>}
+     */
+    get value(): TypographicGlyph[];
+}
+import BaseProperty from "./BaseProperty";
+import TypographicGlyph from "../../font/TypographicGlyph";
diff --git a/build/types/core/properties/InheritableBooleanProperty.d.ts b/build/types/core/properties/InheritableBooleanProperty.d.ts
new file mode 100644
index 00000000..d4199ac9
--- /dev/null
+++ b/build/types/core/properties/InheritableBooleanProperty.d.ts
@@ -0,0 +1,11 @@
+/**
+ * @property {boolean|"inherit"} value
+ */
+export default class InheritableBooleanProperty extends InheritableProperty {
+    /**
+     *
+     * @param {string} propertyId
+     */
+    constructor(propertyId: string);
+}
+import InheritableProperty from "./InheritableProperty";
diff --git a/build/types/core/properties/InheritableMaterialProperty.d.ts b/build/types/core/properties/InheritableMaterialProperty.d.ts
new file mode 100644
index 00000000..5c4092c5
--- /dev/null
+++ b/build/types/core/properties/InheritableMaterialProperty.d.ts
@@ -0,0 +1,27 @@
+/**
+ * @property {Material|null|"inherit"} value
+ */
+export default class InheritableMaterialProperty extends InheritableProperty {
+    /**
+     *
+     * @param {string} propertyId
+     */
+    constructor(propertyId: string);
+    /**
+     *
+     * @type {Object.<{m:string, t?:(target:any, targetProperty:string, value:any) => void}>}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {null}
+     * @internal
+     */
+
+    /**
+     * @override
+     */
+    override getInheritedInput(element: any): any;
+}
+import InheritableProperty from "./InheritableProperty";
diff --git a/build/types/core/properties/InheritableProperty.d.ts b/build/types/core/properties/InheritableProperty.d.ts
new file mode 100644
index 00000000..a0f452c9
--- /dev/null
+++ b/build/types/core/properties/InheritableProperty.d.ts
@@ -0,0 +1,12 @@
+export default class InheritableProperty extends BaseProperty {
+    output: (out: any) => void;
+
+    update(element: any, out: any): void;
+    propagate(element: any): void;
+    /**
+     * Output this property in a dictionnary
+     * @override
+     */
+
+}
+import BaseProperty from "./BaseProperty";
diff --git a/build/types/core/properties/InlineJustificator.d.ts b/build/types/core/properties/InlineJustificator.d.ts
new file mode 100644
index 00000000..d8d34188
--- /dev/null
+++ b/build/types/core/properties/InlineJustificator.d.ts
@@ -0,0 +1,10 @@
+export default class InlineJustificator extends BaseProperty {
+    constructor();
+    update(element: any, out: any): void;
+    /**
+     *
+     * @override
+     */
+    override process(element: any): void;
+}
+import BaseProperty from "./BaseProperty";
diff --git a/build/types/core/properties/InlineLayouter.d.ts b/build/types/core/properties/InlineLayouter.d.ts
new file mode 100644
index 00000000..44468426
--- /dev/null
+++ b/build/types/core/properties/InlineLayouter.d.ts
@@ -0,0 +1,10 @@
+export default class InlineLayouter extends BaseProperty {
+    constructor();
+    update(element: any, out: any): void;
+    /**
+     *
+     * @override
+     */
+    override process(element: any): void;
+}
+import BaseProperty from "./BaseProperty";
diff --git a/build/types/core/properties/InlinesProperty.d.ts b/build/types/core/properties/InlinesProperty.d.ts
new file mode 100644
index 00000000..48758faf
--- /dev/null
+++ b/build/types/core/properties/InlinesProperty.d.ts
@@ -0,0 +1,17 @@
+export default class InlinesProperty extends BaseProperty {
+    constructor();
+    /**
+     *
+     * @type {Array.<Inline>}
+     * @private
+     */
+
+    process(element: any): void;
+    /**
+     *
+     * @return {Array.<Inline>}
+     */
+    get value(): Inline[];
+}
+import BaseProperty from "./BaseProperty";
+import Inline from "../elements/glyphs/Inline";
diff --git a/build/types/core/properties/InlinesPropertyInlineBlock.d.ts b/build/types/core/properties/InlinesPropertyInlineBlock.d.ts
new file mode 100644
index 00000000..45179cf1
--- /dev/null
+++ b/build/types/core/properties/InlinesPropertyInlineBlock.d.ts
@@ -0,0 +1,15 @@
+/**
+ * @property {Array.<InlineGlyph>} value
+ */
+export default class InlinesPropertyInlineBlock extends BaseProperty {
+    constructor();
+    /**
+     *
+     * @type {Array.<Inline>}
+     * @internal
+     */
+
+    process(element: any): void;
+}
+import BaseProperty from "./BaseProperty";
+import Inline from "../elements/glyphs/Inline";
diff --git a/build/types/core/properties/InvertAlphaProperty.d.ts b/build/types/core/properties/InvertAlphaProperty.d.ts
new file mode 100644
index 00000000..e3b59c4f
--- /dev/null
+++ b/build/types/core/properties/InvertAlphaProperty.d.ts
@@ -0,0 +1,9 @@
+/**
+ * Class definition
+ * @property {boolean|"inherit"} value - propriety description
+ *
+ */
+export default class InvertAlphaProperty extends InheritableProperty {
+    constructor();
+}
+import InheritableProperty from "./InheritableProperty";
diff --git a/build/types/core/properties/LineBreakProperty.d.ts b/build/types/core/properties/LineBreakProperty.d.ts
new file mode 100644
index 00000000..bd2ae07f
--- /dev/null
+++ b/build/types/core/properties/LineBreakProperty.d.ts
@@ -0,0 +1,17 @@
+export default class LineBreakProperty extends BaseProperty {
+    constructor(defaultValue?: string);
+    /**
+     *
+     * @type {"mandatory"|"possible"|null}
+     * @private
+     */
+
+    update(element: any, out: any): void;
+    process(element: any): void;
+    /**
+     * @override
+     * @return {string}
+     */
+    override get value(): string;
+}
+import BaseProperty from "./BaseProperty";
diff --git a/build/types/core/properties/NumberProperty.d.ts b/build/types/core/properties/NumberProperty.d.ts
new file mode 100644
index 00000000..9901525a
--- /dev/null
+++ b/build/types/core/properties/NumberProperty.d.ts
@@ -0,0 +1,20 @@
+export default class NumberProperty extends BaseProperty {
+    /**
+     *
+     * @param {string} propertyId
+     * @param {number} [value]
+     */
+    constructor(propertyId: string, value?: number);
+    output: (out: any) => void;
+    /**
+     *
+     * @param {number} value
+     */
+    set value(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get value(): number;
+}
+import BaseProperty from "./BaseProperty";
diff --git a/build/types/core/properties/OffsetProperty.d.ts b/build/types/core/properties/OffsetProperty.d.ts
new file mode 100644
index 00000000..9479eab9
--- /dev/null
+++ b/build/types/core/properties/OffsetProperty.d.ts
@@ -0,0 +1,4 @@
+export default class OffsetProperty extends InheritableProperty {
+    constructor();
+}
+import InheritableProperty from "./InheritableProperty";
diff --git a/build/types/core/properties/RenderOrderProperty.d.ts b/build/types/core/properties/RenderOrderProperty.d.ts
new file mode 100644
index 00000000..394ae3b5
--- /dev/null
+++ b/build/types/core/properties/RenderOrderProperty.d.ts
@@ -0,0 +1,18 @@
+export default class RenderOrderProperty extends BaseProperty {
+    constructor();
+    output: (out: any) => void;
+
+    /**
+     *
+     * @param {number} value
+     */
+    set value(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get value(): number;
+    update(element: any, out: any): void;
+
+}
+import BaseProperty from "./BaseProperty";
diff --git a/build/types/core/properties/SideProperty.d.ts b/build/types/core/properties/SideProperty.d.ts
new file mode 100644
index 00000000..c20d0fae
--- /dev/null
+++ b/build/types/core/properties/SideProperty.d.ts
@@ -0,0 +1,11 @@
+/**
+ * @property {number|"inherit"} value
+ */
+export default class SideProperty extends InheritableProperty {
+    /**
+     *
+     * @param {string} propertyId
+     */
+    constructor(propertyId: string);
+}
+import InheritableProperty from "./InheritableProperty";
diff --git a/build/types/core/properties/TextContentEmpty.d.ts b/build/types/core/properties/TextContentEmpty.d.ts
new file mode 100644
index 00000000..1f4da4cc
--- /dev/null
+++ b/build/types/core/properties/TextContentEmpty.d.ts
@@ -0,0 +1,5 @@
+export default class TextContentEmpty extends EmptyProperty {
+    constructor();
+    process(element: any): void;
+}
+import EmptyProperty from "./EmptyProperty";
diff --git a/build/types/core/properties/TextContentInline.d.ts b/build/types/core/properties/TextContentInline.d.ts
new file mode 100644
index 00000000..e62bac78
--- /dev/null
+++ b/build/types/core/properties/TextContentInline.d.ts
@@ -0,0 +1,5 @@
+export default class TextContentInline extends BaseProperty {
+    constructor();
+    update(element: any, out: any): void;
+}
+import BaseProperty from "./BaseProperty";
diff --git a/build/types/core/properties/TextContentText.d.ts b/build/types/core/properties/TextContentText.d.ts
new file mode 100644
index 00000000..9fa6f88a
--- /dev/null
+++ b/build/types/core/properties/TextContentText.d.ts
@@ -0,0 +1,4 @@
+export default class TextContentText extends TextContentEmpty {
+    update(element: any, out: any): void;
+}
+import TextContentEmpty from "./TextContentEmpty";
diff --git a/build/types/core/properties/TextLayouter.d.ts b/build/types/core/properties/TextLayouter.d.ts
new file mode 100644
index 00000000..a59bb9c8
--- /dev/null
+++ b/build/types/core/properties/TextLayouter.d.ts
@@ -0,0 +1,17 @@
+export default class TextLayouter extends BaseProperty {
+    constructor();
+    /**
+     *
+     * @type {Lines}
+     * @private
+     */
+
+    update(element: any, out: any): void;
+    /**
+     *
+     * @override
+     */
+    override process(element: any): void;
+
+}
+import BaseProperty from "./BaseProperty";
diff --git a/build/types/core/properties/VisibleProperty.d.ts b/build/types/core/properties/VisibleProperty.d.ts
new file mode 100644
index 00000000..a3884449
--- /dev/null
+++ b/build/types/core/properties/VisibleProperty.d.ts
@@ -0,0 +1,16 @@
+export default class VisibleProperty extends BaseProperty {
+    /**
+     *
+     * @param {string} propertyId
+     * @param {any} [value=null]
+     */
+    constructor(propertyId: string, value?: any);
+    update(element: any, out: any): void;
+    set value(arg: boolean);
+    /**
+     *
+     * @return {boolean}
+     */
+    get value(): boolean;
+}
+import BaseProperty from "./BaseProperty";
diff --git a/build/types/core/properties/geometry/SegmentsProperty.d.ts b/build/types/core/properties/geometry/SegmentsProperty.d.ts
new file mode 100644
index 00000000..1cc9e9d9
--- /dev/null
+++ b/build/types/core/properties/geometry/SegmentsProperty.d.ts
@@ -0,0 +1,4 @@
+export default class SegmentsProperty extends BaseProperty {
+    constructor();
+}
+import BaseProperty from "../BaseProperty";
diff --git a/build/types/core/properties/geometry/SegmentsPropertyInline.d.ts b/build/types/core/properties/geometry/SegmentsPropertyInline.d.ts
new file mode 100644
index 00000000..49f6d5f8
--- /dev/null
+++ b/build/types/core/properties/geometry/SegmentsPropertyInline.d.ts
@@ -0,0 +1,4 @@
+export default class SegmentsPropertyInline extends SegmentsPropertyText {
+
+}
+import SegmentsPropertyText from "./SegmentsPropertyText";
diff --git a/build/types/core/properties/geometry/SegmentsPropertyText.d.ts b/build/types/core/properties/geometry/SegmentsPropertyText.d.ts
new file mode 100644
index 00000000..385cedec
--- /dev/null
+++ b/build/types/core/properties/geometry/SegmentsPropertyText.d.ts
@@ -0,0 +1,16 @@
+export default class SegmentsPropertyText extends SegmentsProperty {
+
+    update(element: any, out: any): void;
+    /**
+     *
+     * @param {number|"inherit"} v
+     */
+    set value(arg: number);
+    /**
+     *
+     * @override
+     * @return {number}
+     */
+    get value(): number;
+}
+import SegmentsProperty from "./SegmentsProperty";
diff --git a/build/types/core/properties/hierarchy/ChildrenBox.d.ts b/build/types/core/properties/hierarchy/ChildrenBox.d.ts
new file mode 100644
index 00000000..973af2ae
--- /dev/null
+++ b/build/types/core/properties/hierarchy/ChildrenBox.d.ts
@@ -0,0 +1,48 @@
+export default class ChildrenBox extends BaseProperty {
+    constructor();
+    /**
+     *
+     * @type {Array.<MeshUIBaseElement>}
+     * @private
+     */
+
+    /**
+     *
+     * @type {Array.<MeshUIBaseElement>}
+     * @internal
+     */
+
+    /**
+     * Update requested when :
+     * 		- New child has been added
+     * 		- Existing child has been removed
+     *
+     * @param element
+     * @param out
+     */
+    update(element: any, out: any): void;
+    /**
+     * Process when :
+     * 		- Existing child visibility changed
+     *
+     * @param element
+     */
+    process(element: any): void;
+
+    /**
+     *
+     */
+    dispose(): void;
+    /**
+     *
+     * Sort children according to their .style.order property or fallback on children index
+     *
+     * @param {HTMLElementVR} a
+     * @param {HTMLElementVR} b
+     * @return {number}
+     * @private
+     */
+
+}
+import BaseProperty from "../BaseProperty";
+import MeshUIBaseElement from "../../elements/MeshUIBaseElement";
diff --git a/build/types/core/properties/hierarchy/ChildrenInline.d.ts b/build/types/core/properties/hierarchy/ChildrenInline.d.ts
new file mode 100644
index 00000000..c51997ee
--- /dev/null
+++ b/build/types/core/properties/hierarchy/ChildrenInline.d.ts
@@ -0,0 +1,32 @@
+export default class ChildrenInline extends BaseProperty {
+    constructor();
+    /**
+     *
+     * @type {Array.<MeshUIBaseElement>}
+     * @internal
+     */
+
+    /**
+     * Update requested when :
+     * 		- New child has been added
+     * 		- Existing child has been removed
+     *
+     * @param element
+     * @param out
+     */
+    update(element: any, out: any): void;
+    /**
+     * Process when :
+     * 		- Existing child visibility changed
+     *
+     * @param element
+     */
+    process(element: any): void;
+
+    /**
+     *
+     */
+    dispose(): void;
+}
+import BaseProperty from "../BaseProperty";
+import MeshUIBaseElement from "../../elements/MeshUIBaseElement";
diff --git a/build/types/core/properties/hierarchy/ChildrenText.d.ts b/build/types/core/properties/hierarchy/ChildrenText.d.ts
new file mode 100644
index 00000000..c19cc13a
--- /dev/null
+++ b/build/types/core/properties/hierarchy/ChildrenText.d.ts
@@ -0,0 +1,44 @@
+export default class ChildrenText extends BaseProperty {
+    constructor();
+    /**
+     *
+     * @type {Array.<MeshUIBaseElement>}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {Array.<MeshUIBaseElement>}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {Array.<MeshUIBaseElement>}
+     * @internal
+     */
+
+    /**
+     * Update requested when :
+     * 		- New child has been added
+     * 		- Existing child has been removed
+     *
+     * @param element
+     * @param out
+     */
+    update(element: any, out: any): void;
+    /**
+     * Process when :
+     * 		- Existing child visibility changed
+     *
+     * @param element
+     */
+    process(element: any): void;
+
+    /**
+     *
+     */
+    dispose(): void;
+}
+import BaseProperty from "../BaseProperty";
+import MeshUIBaseElement from "../../elements/MeshUIBaseElement";
diff --git a/build/types/core/properties/hierarchy/ParentProperty.d.ts b/build/types/core/properties/hierarchy/ParentProperty.d.ts
new file mode 100644
index 00000000..3dac939b
--- /dev/null
+++ b/build/types/core/properties/hierarchy/ParentProperty.d.ts
@@ -0,0 +1,23 @@
+export default class ParentProperty extends BaseProperty {
+    constructor();
+    /**
+     * Update when :
+     * 		- element has been added
+     * 		- element has been removed
+     *
+     * @param element
+     * @param out
+     */
+    update(element: any, out: any): void;
+    /**
+     *
+     * @param {(p:Object3D)=>boolean } conditionCallback
+     */
+    find(conditionCallback: (p: Object3D) => boolean): any;
+    /**
+     *
+     */
+    dispose(): void;
+}
+import BaseProperty from "../BaseProperty";
+import { Object3D } from "three/src/core/Object3D";
diff --git a/build/types/core/properties/rendering/RendererPropertyBox.d.ts b/build/types/core/properties/rendering/RendererPropertyBox.d.ts
new file mode 100644
index 00000000..95ea584c
--- /dev/null
+++ b/build/types/core/properties/rendering/RendererPropertyBox.d.ts
@@ -0,0 +1,5 @@
+export default class RendererPropertyBox extends BaseProperty {
+    constructor();
+    render(element: any): void;
+}
+import BaseProperty from "../BaseProperty";
diff --git a/build/types/core/properties/rendering/RendererPropertyInline.d.ts b/build/types/core/properties/rendering/RendererPropertyInline.d.ts
new file mode 100644
index 00000000..19b688b1
--- /dev/null
+++ b/build/types/core/properties/rendering/RendererPropertyInline.d.ts
@@ -0,0 +1,5 @@
+export default class RendererPropertyInline extends BaseProperty {
+    constructor();
+    render(element: any): void;
+}
+import BaseProperty from "../BaseProperty";
diff --git a/build/types/core/properties/rendering/RendererPropertyInlineBox.d.ts b/build/types/core/properties/rendering/RendererPropertyInlineBox.d.ts
new file mode 100644
index 00000000..4ed24084
--- /dev/null
+++ b/build/types/core/properties/rendering/RendererPropertyInlineBox.d.ts
@@ -0,0 +1,5 @@
+export default class RendererPropertyInlineBox extends BaseProperty {
+    constructor();
+    render(element: any): void;
+}
+import BaseProperty from "../BaseProperty";
diff --git a/build/types/core/properties/rendering/RendererPropertyText.d.ts b/build/types/core/properties/rendering/RendererPropertyText.d.ts
new file mode 100644
index 00000000..c4f7ed47
--- /dev/null
+++ b/build/types/core/properties/rendering/RendererPropertyText.d.ts
@@ -0,0 +1,3 @@
+export default class RendererPropertyText extends RendererPropertyBox {
+}
+import RendererPropertyBox from "./RendererPropertyBox";
diff --git a/build/types/core/properties/style-properties/PositionProperty.d.ts b/build/types/core/properties/style-properties/PositionProperty.d.ts
new file mode 100644
index 00000000..bd9895f2
--- /dev/null
+++ b/build/types/core/properties/style-properties/PositionProperty.d.ts
@@ -0,0 +1,10 @@
+export default class PositionProperty extends SubStyleProperty {
+    constructor();
+
+    computeOutputValue: (element: any) => void;
+
+
+}
+import SubStyleProperty from "./SubStyleProperty";
+
+export {};
diff --git a/build/types/core/properties/style-properties/PositionPropertyBox.d.ts b/build/types/core/properties/style-properties/PositionPropertyBox.d.ts
new file mode 100644
index 00000000..41865de5
--- /dev/null
+++ b/build/types/core/properties/style-properties/PositionPropertyBox.d.ts
@@ -0,0 +1,4 @@
+export default class PositionPropertyBox extends PositionProperty {
+    update(element: any, out: any): void;
+}
+import PositionProperty from "./PositionProperty";
diff --git a/build/types/core/properties/style-properties/StyleColorProperty.d.ts b/build/types/core/properties/style-properties/StyleColorProperty.d.ts
new file mode 100644
index 00000000..5b8c1d87
--- /dev/null
+++ b/build/types/core/properties/style-properties/StyleColorProperty.d.ts
@@ -0,0 +1,15 @@
+export default class StyleColorProperty extends SubStyleProperty {
+    constructor(propertyId: any, defaultValue: any);
+    /**
+     * @type {Color}
+     * @protected
+     */
+
+    output: (out: any) => void;
+    /**
+     * @override
+     */
+    override computeOutputValue(element: any): void;
+}
+import SubStyleProperty from "./SubStyleProperty";
+import { Color } from "three/src/math/Color";
diff --git a/build/types/core/properties/style-properties/StyleEmptyProperty.d.ts b/build/types/core/properties/style-properties/StyleEmptyProperty.d.ts
new file mode 100644
index 00000000..2d60e5a8
--- /dev/null
+++ b/build/types/core/properties/style-properties/StyleEmptyProperty.d.ts
@@ -0,0 +1,9 @@
+export default class StyleEmptyProperty extends SubStyleProperty {
+    /**
+     *
+     * @param {string} propertyId
+     */
+    constructor(propertyId?: string);
+    output(out: any): void;
+}
+import SubStyleProperty from "./SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/StyleFactorProperty.d.ts b/build/types/core/properties/style-properties/StyleFactorProperty.d.ts
new file mode 100644
index 00000000..d395e58f
--- /dev/null
+++ b/build/types/core/properties/style-properties/StyleFactorProperty.d.ts
@@ -0,0 +1,11 @@
+export default class StyleFactorProperty extends SubStyleProperty {
+    /**
+     *
+     * @param {string} propertyId
+     * @param {any} defaultValue
+     */
+    constructor(propertyId: string, defaultValue: any);
+    output: (out: any) => void;
+
+}
+import SubStyleProperty from "./SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/StyleNumberProperty.d.ts b/build/types/core/properties/style-properties/StyleNumberProperty.d.ts
new file mode 100644
index 00000000..d968d293
--- /dev/null
+++ b/build/types/core/properties/style-properties/StyleNumberProperty.d.ts
@@ -0,0 +1,14 @@
+export default class StyleNumberProperty extends SubStyleProperty {
+    /**
+     *
+     * @param {string} propertyId
+     * @param {any} defaultValue
+     */
+    constructor(propertyId: string, defaultValue: any);
+    /**
+     * @override
+     * @return {Number}
+     */
+    override get value(): number;
+}
+import SubStyleProperty from "./SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/StyleVector4Property.d.ts b/build/types/core/properties/style-properties/StyleVector4Property.d.ts
new file mode 100644
index 00000000..948468b9
--- /dev/null
+++ b/build/types/core/properties/style-properties/StyleVector4Property.d.ts
@@ -0,0 +1,76 @@
+export default class StyleVector4Property extends SubStyleProperty {
+    constructor(propertyId: any, defaultValue: any);
+    /**
+     *
+     * @type {Vector4}
+     * @private
+     */
+
+    /**
+     * @override
+     * @type {Vector4}
+     * @protected
+     */
+
+    /**
+     * @override
+     * @return {Vector4}
+     */
+    override get value(): Vector4;
+    /**
+     * @override
+     */
+    override computeOutputValue(element: any): void;
+    /**
+     *
+     * @param {Number} v
+     */
+    set top(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get top(): number;
+    /**
+     *
+     * @param {Number} v
+     */
+    set right(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get right(): number;
+    /**
+     *
+     * @param {Number} v
+     */
+    set bottom(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get bottom(): number;
+    /**
+     *
+     * @param {Number} v
+     */
+    set left(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get left(): number;
+    dispose(): void;
+
+
+    /**
+     *
+     * @param {Vector4} vector4
+     * @param {Vector4|Array.<Number>|Number|String} value
+     * @protected
+     */
+
+}
+import SubStyleProperty from "./SubStyleProperty";
+import { Vector4 } from "three/src/math/Vector4";
diff --git a/build/types/core/properties/style-properties/SubStyleProperty.d.ts b/build/types/core/properties/style-properties/SubStyleProperty.d.ts
new file mode 100644
index 00000000..557ecf45
--- /dev/null
+++ b/build/types/core/properties/style-properties/SubStyleProperty.d.ts
@@ -0,0 +1,68 @@
+export default class SubStyleProperty extends BaseProperty {
+    /**
+     *
+     * @param {string} propertyId
+     * @param {boolean} [primitive=true]
+     * @param {any} defaultValue
+     */
+    constructor(propertyId: string, defaultValue: any, primitive?: boolean);
+    /**
+     * @type {any}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {boolean}
+     * @protected
+     */
+
+    /**
+     * The input value that won't be 'inherit'
+     * @type {any}
+     * @protected
+     */
+
+    /**
+     *
+     * @type {any}
+     * @internal
+     */
+
+    /**
+     *
+     * @param {MeshUIBaseElement} element
+     * @param {Object.<string,any> } out
+     */
+    update(element: MeshUIBaseElement, out: {
+        [x: string]: any;
+    }): void;
+    /**
+     *
+     * @param {MeshUIBaseElement} element
+     */
+    computeOutputValue(element: MeshUIBaseElement): void;
+    /**
+     *
+     * @param {MeshUIBaseElement} element
+     */
+
+    /**
+     *
+     * @param {any} value
+     */
+    set inline(arg: any);
+    /**
+     *
+     * @return {any}
+     */
+    get inline(): any;
+    /**
+     *
+     * @param {any} value
+     * @return {boolean}
+     */
+    isValidValue(value: any): boolean;
+}
+import BaseProperty from "../BaseProperty";
+import MeshUIBaseElement from "../../elements/MeshUIBaseElement";
diff --git a/build/types/core/properties/style-properties/background/BackgroundColorProperty.d.ts b/build/types/core/properties/style-properties/background/BackgroundColorProperty.d.ts
new file mode 100644
index 00000000..706f700e
--- /dev/null
+++ b/build/types/core/properties/style-properties/background/BackgroundColorProperty.d.ts
@@ -0,0 +1,10 @@
+export default class BackgroundColorProperty extends StyleColorProperty {
+    constructor(defaultValue: any);
+
+    /**
+     *
+     * @param {MeshUIBaseElement} element
+     */
+    computeOutputValue(element: MeshUIBaseElement): void;
+}
+import StyleColorProperty from "../StyleColorProperty";
diff --git a/build/types/core/properties/style-properties/background/BackgroundColorPropertyInline.d.ts b/build/types/core/properties/style-properties/background/BackgroundColorPropertyInline.d.ts
new file mode 100644
index 00000000..a3a13e4b
--- /dev/null
+++ b/build/types/core/properties/style-properties/background/BackgroundColorPropertyInline.d.ts
@@ -0,0 +1,10 @@
+export default class BackgroundColorPropertyInline extends StyleColorProperty {
+    constructor(defaultValue: any);
+
+    /**
+     *
+     * @param {MeshUIBaseElement} element
+     */
+    computeOutputValue(element: MeshUIBaseElement): void;
+}
+import StyleColorProperty from "../StyleColorProperty";
diff --git a/build/types/core/properties/style-properties/background/BackgroundImage.d.ts b/build/types/core/properties/style-properties/background/BackgroundImage.d.ts
new file mode 100644
index 00000000..42690f61
--- /dev/null
+++ b/build/types/core/properties/style-properties/background/BackgroundImage.d.ts
@@ -0,0 +1,23 @@
+export default class BackgroundImage extends SubStyleProperty {
+    constructor(defaultValue: any);
+    /**
+     *
+     * @type {Vector2}
+     * @internal
+     */
+
+    /**
+     * @override
+     * @return {any|Texture|null}
+     */
+    override get value(): any;
+    output(out: any): void;
+    computeOutputValue(element: any): void;
+    /**
+     *
+     * @param element
+     */
+    process(element: any): void;
+}
+import SubStyleProperty from "../SubStyleProperty";
+import { Vector2 } from "three/src/math/Vector2";
diff --git a/build/types/core/properties/style-properties/background/BackgroundSize.d.ts b/build/types/core/properties/style-properties/background/BackgroundSize.d.ts
new file mode 100644
index 00000000..0de030de
--- /dev/null
+++ b/build/types/core/properties/style-properties/background/BackgroundSize.d.ts
@@ -0,0 +1,8 @@
+/**
+ * @property {"cover"|"contain"|"stretch"} value
+ */
+export default class BackgroundSize extends SubStyleProperty {
+    constructor(defaultValue: any);
+    output: (out: any) => void;
+}
+import SubStyleProperty from "../SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/border/BorderRadius.d.ts b/build/types/core/properties/style-properties/border/BorderRadius.d.ts
new file mode 100644
index 00000000..5e111ae7
--- /dev/null
+++ b/build/types/core/properties/style-properties/border/BorderRadius.d.ts
@@ -0,0 +1,122 @@
+export default class BorderRadius extends StyleVector4Property {
+    /**
+     *
+     * @param {Vector4} defaultValue
+     */
+    constructor(defaultValue: Vector4);
+    /**
+     *
+     * @type {Vector4}
+     * @private
+     */
+
+    /**
+     *
+     * @type {boolean}
+     * @private
+     */
+
+    /**
+     *
+     * @type {Vector2}
+     * @private
+     */
+
+    /**
+     *
+     * @type {Vector2}
+     * @private
+     */
+
+    /**
+     *
+     * @type {Vector2}
+     * @private
+     */
+
+    /**
+     *
+     * @type {Vector2}
+     * @private
+     */
+
+    /**
+     *
+     * @type {Array.<BorderRadiusMediator>}
+     * @private
+     */
+
+
+    /**
+     *
+     * @param {string} units
+     */
+    set units(arg: string);
+    /**
+     *
+     * @returns {string}
+     */
+    get units(): string;
+    /**
+     *
+     * @param {boolean} v
+     */
+    set mediation(arg: boolean);
+    /**
+     *
+     * @returns {boolean}
+     */
+    get mediation(): boolean;
+    /**
+     *
+     * @override
+     */
+    override process(element: any): void;
+    /**
+     *
+     * @override
+     */
+    override render(element: any): void;
+    /**
+     *
+     * @param {Number} v
+     */
+    set topLeft(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get topLeft(): number;
+    /**
+     *
+     * @param {Number} v
+     */
+    set topRight(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get topRight(): number;
+    /**
+     *
+     * @param {Number} v
+     */
+    set bottomRight(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get bottomRight(): number;
+    /**
+     *
+     * @param {Number} v
+     */
+    set bottomLeft(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get bottomLeft(): number;
+}
+import StyleVector4Property from "../StyleVector4Property";
+import { Vector4 } from "three/src/math/Vector4";
diff --git a/build/types/core/properties/style-properties/border/BorderWidth.d.ts b/build/types/core/properties/style-properties/border/BorderWidth.d.ts
new file mode 100644
index 00000000..3844c042
--- /dev/null
+++ b/build/types/core/properties/style-properties/border/BorderWidth.d.ts
@@ -0,0 +1,31 @@
+export default class BorderWidth extends StyleVector4Property {
+    /**
+     *
+     * @param defaultValue
+     */
+    constructor(defaultValue: any);
+
+    output: (out: any) => void;
+
+    /**
+     *
+     * @param {string} units
+     */
+    set units(arg: string);
+    /**
+     *
+     * @returns {string}
+     */
+    get units(): string;
+
+    /**
+     *
+     * @override
+     */
+    override process(element: any): void;
+    /**
+     * @override
+     */
+    override render(element: any): void;
+}
+import StyleVector4Property from "../StyleVector4Property";
diff --git a/build/types/core/properties/style-properties/bounds/BoxSizing.d.ts b/build/types/core/properties/style-properties/bounds/BoxSizing.d.ts
new file mode 100644
index 00000000..1cb8debd
--- /dev/null
+++ b/build/types/core/properties/style-properties/bounds/BoxSizing.d.ts
@@ -0,0 +1,5 @@
+export default class BoxSizing extends SubStyleProperty {
+    constructor(defaultValue: any);
+    computeOutputValue(element: any): void;
+}
+import SubStyleProperty from "../SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/bounds/HeightProperty.d.ts b/build/types/core/properties/style-properties/bounds/HeightProperty.d.ts
new file mode 100644
index 00000000..5a918891
--- /dev/null
+++ b/build/types/core/properties/style-properties/bounds/HeightProperty.d.ts
@@ -0,0 +1,4 @@
+export default class HeightProperty extends StyleSideProperty {
+    constructor();
+}
+import StyleSideProperty from "./StyleSideProperty";
diff --git a/build/types/core/properties/style-properties/bounds/MarginProperty.d.ts b/build/types/core/properties/style-properties/bounds/MarginProperty.d.ts
new file mode 100644
index 00000000..f4451600
--- /dev/null
+++ b/build/types/core/properties/style-properties/bounds/MarginProperty.d.ts
@@ -0,0 +1,4 @@
+export default class MarginProperty extends StyleVector4Property {
+    constructor();
+}
+import StyleVector4Property from "../StyleVector4Property";
diff --git a/build/types/core/properties/style-properties/bounds/PaddingProperty.d.ts b/build/types/core/properties/style-properties/bounds/PaddingProperty.d.ts
new file mode 100644
index 00000000..e25888ba
--- /dev/null
+++ b/build/types/core/properties/style-properties/bounds/PaddingProperty.d.ts
@@ -0,0 +1,4 @@
+export default class PaddingProperty extends StyleVector4Property {
+    constructor();
+}
+import StyleVector4Property from "../StyleVector4Property";
diff --git a/build/types/core/properties/style-properties/bounds/StyleSideProperty.d.ts b/build/types/core/properties/style-properties/bounds/StyleSideProperty.d.ts
new file mode 100644
index 00000000..e25e559c
--- /dev/null
+++ b/build/types/core/properties/style-properties/bounds/StyleSideProperty.d.ts
@@ -0,0 +1,32 @@
+export default class StyleSideProperty extends SubStyleProperty {
+    /**
+     *
+     * @param {string} propertyId
+     * @param {number} defaultValue
+     */
+    constructor(propertyId: string, defaultValue?: number);
+    /**
+     *
+     * @type {boolean}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {boolean}
+     * @internal
+     */
+
+
+
+    update(element: any, out: any): void;
+    computeOutputValue(element: any): void;
+    getInheritedInput(element: any): any;
+    getDefaultValue(): number;
+    /**
+     *
+     * @return {number}
+     */
+    get value(): number;
+}
+import SubStyleProperty from "../SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/bounds/WidthProperty.d.ts b/build/types/core/properties/style-properties/bounds/WidthProperty.d.ts
new file mode 100644
index 00000000..6ba2b0a6
--- /dev/null
+++ b/build/types/core/properties/style-properties/bounds/WidthProperty.d.ts
@@ -0,0 +1,4 @@
+export default class WidthProperty extends StyleSideProperty {
+    constructor();
+}
+import StyleSideProperty from "./StyleSideProperty";
diff --git a/build/types/core/properties/style-properties/flex/AlignItemsProperty.d.ts b/build/types/core/properties/style-properties/flex/AlignItemsProperty.d.ts
new file mode 100644
index 00000000..2955035a
--- /dev/null
+++ b/build/types/core/properties/style-properties/flex/AlignItemsProperty.d.ts
@@ -0,0 +1,4 @@
+export default class AlignItemsProperty extends SubStyleProperty {
+    constructor();
+}
+import SubStyleProperty from "../SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/flex/AlignItemsPropertyBox.d.ts b/build/types/core/properties/style-properties/flex/AlignItemsPropertyBox.d.ts
new file mode 100644
index 00000000..b895df94
--- /dev/null
+++ b/build/types/core/properties/style-properties/flex/AlignItemsPropertyBox.d.ts
@@ -0,0 +1,20 @@
+export default class AlignItemsPropertyBox extends AlignItemsProperty {
+    /**
+     *
+     * @type {(element:MeshUIBaseElement, (child:MeshUIBaseElement, parentOffset:number )=> number ) =>  void  }
+     * @private
+     */
+
+    /**
+     *
+     * @type {(child:MeshUIBaseElement, parentOffset:number )=> number}
+     * @private
+     */
+
+    /**
+     *
+     * @param element
+     */
+    process(element: any): void;
+}
+import AlignItemsProperty from "./AlignItemsProperty";
diff --git a/build/types/core/properties/style-properties/flex/FlexDirectionProperty.d.ts b/build/types/core/properties/style-properties/flex/FlexDirectionProperty.d.ts
new file mode 100644
index 00000000..005da891
--- /dev/null
+++ b/build/types/core/properties/style-properties/flex/FlexDirectionProperty.d.ts
@@ -0,0 +1,4 @@
+export default class FlexDirectionProperty extends SubStyleProperty {
+    constructor();
+}
+import SubStyleProperty from "../SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/flex/FlexDirectionPropertyBox.d.ts b/build/types/core/properties/style-properties/flex/FlexDirectionPropertyBox.d.ts
new file mode 100644
index 00000000..ceb29874
--- /dev/null
+++ b/build/types/core/properties/style-properties/flex/FlexDirectionPropertyBox.d.ts
@@ -0,0 +1,23 @@
+export default class FlexDirectionPropertyBox extends FlexDirectionProperty {
+    /**
+     *
+     * @type {number}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {number}
+     * @internal
+     */
+
+    /**
+     *
+     * @param { (element:MeshUIBaseElement) => void} element
+     * @private
+     */
+
+    computeOutputValue(element: any): void;
+    process(element: any): void;
+}
+import FlexDirectionProperty from "./FlexDirectionProperty";
diff --git a/build/types/core/properties/style-properties/flex/FlexDirectionPropertyText.d.ts b/build/types/core/properties/style-properties/flex/FlexDirectionPropertyText.d.ts
new file mode 100644
index 00000000..eaa6cd97
--- /dev/null
+++ b/build/types/core/properties/style-properties/flex/FlexDirectionPropertyText.d.ts
@@ -0,0 +1,6 @@
+export default class FlexDirectionPropertyText extends FlexDirectionProperty {
+
+
+    computeOutputValue(element: any): void;
+}
+import FlexDirectionProperty from "./FlexDirectionProperty";
diff --git a/build/types/core/properties/style-properties/flex/JustifyContentProperty.d.ts b/build/types/core/properties/style-properties/flex/JustifyContentProperty.d.ts
new file mode 100644
index 00000000..9bac3b0d
--- /dev/null
+++ b/build/types/core/properties/style-properties/flex/JustifyContentProperty.d.ts
@@ -0,0 +1,4 @@
+export default class JustifyContentProperty extends SubStyleProperty {
+    constructor();
+}
+import SubStyleProperty from "../SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/flex/JustifyContentPropertyBox.d.ts b/build/types/core/properties/style-properties/flex/JustifyContentPropertyBox.d.ts
new file mode 100644
index 00000000..009d2d19
--- /dev/null
+++ b/build/types/core/properties/style-properties/flex/JustifyContentPropertyBox.d.ts
@@ -0,0 +1,24 @@
+export default class JustifyContentPropertyBox extends JustifyContentProperty {
+    constructor(defaultValue: any);
+    /**
+     *
+     * @type {(axisOffset:number) => number}
+     * @private
+     */
+
+    /**
+     *
+     * @type {(element:MeshUIBaseElement, availableSpace:number, reverse:number) => Array.<number> }
+     * @private
+     */
+
+    /**
+     *
+     * @type {(element:MeshUIBaseElement) => void}
+     * @private
+     */
+
+    computeOutputValue(element: any): void;
+    process(element: any): void;
+}
+import JustifyContentProperty from "./JustifyContentProperty";
diff --git a/build/types/core/properties/style-properties/flex/OrderProperty.d.ts b/build/types/core/properties/style-properties/flex/OrderProperty.d.ts
new file mode 100644
index 00000000..1301fc7d
--- /dev/null
+++ b/build/types/core/properties/style-properties/flex/OrderProperty.d.ts
@@ -0,0 +1,8 @@
+export default class OrderProperty extends SubStyleProperty {
+    constructor();
+
+
+    computeOutputValue(element: any): void;
+    process(element: any): void;
+}
+import SubStyleProperty from "../SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/font/ColorProperty.d.ts b/build/types/core/properties/style-properties/font/ColorProperty.d.ts
new file mode 100644
index 00000000..7413672f
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/ColorProperty.d.ts
@@ -0,0 +1,9 @@
+export default class ColorProperty extends StyleColorProperty {
+    constructor();
+    /**
+     *
+     * @param {MeshUIBaseElement} element
+     */
+    computeOutputValue(element: MeshUIBaseElement): void;
+}
+import StyleColorProperty from "../StyleColorProperty";
diff --git a/build/types/core/properties/style-properties/font/FontFamilyProperty.d.ts b/build/types/core/properties/style-properties/font/FontFamilyProperty.d.ts
new file mode 100644
index 00000000..99da2a07
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/FontFamilyProperty.d.ts
@@ -0,0 +1,15 @@
+export default class FontFamilyProperty extends SubStyleProperty {
+    constructor();
+    /**
+     *
+     * @param element
+     */
+    computeOutputValue(element: any): void;
+    /**
+     * @override
+     * @return {any|FontFamily|null}
+     */
+    override get value(): any;
+    getInheritedInput(element: any): any;
+}
+import SubStyleProperty from "../SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/font/FontFamilyPropertyInline.d.ts b/build/types/core/properties/style-properties/font/FontFamilyPropertyInline.d.ts
new file mode 100644
index 00000000..c9d38769
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/FontFamilyPropertyInline.d.ts
@@ -0,0 +1,4 @@
+export default class FontFamilyPropertyInline extends FontFamilyProperty {
+
+}
+import FontFamilyProperty from "./FontFamilyProperty";
diff --git a/build/types/core/properties/style-properties/font/FontKerningProperty.d.ts b/build/types/core/properties/style-properties/font/FontKerningProperty.d.ts
new file mode 100644
index 00000000..ab255061
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/FontKerningProperty.d.ts
@@ -0,0 +1,7 @@
+export default class FontKerningProperty extends SubStyleProperty {
+    constructor();
+
+}
+import SubStyleProperty from "../SubStyleProperty";
+
+export {};
diff --git a/build/types/core/properties/style-properties/font/FontKerningPropertyInline.d.ts b/build/types/core/properties/style-properties/font/FontKerningPropertyInline.d.ts
new file mode 100644
index 00000000..d72f3f48
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/FontKerningPropertyInline.d.ts
@@ -0,0 +1,6 @@
+export default class FontKerningPropertyInline extends FontKerningProperty {
+    computeOutputValue: (element: any) => void;
+
+    process(element: any): void;
+}
+import FontKerningProperty from "./FontKerningProperty";
diff --git a/build/types/core/properties/style-properties/font/FontKerningPropertyText.d.ts b/build/types/core/properties/style-properties/font/FontKerningPropertyText.d.ts
new file mode 100644
index 00000000..8d006792
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/FontKerningPropertyText.d.ts
@@ -0,0 +1,5 @@
+export default class FontKerningPropertyText extends FontKerningProperty {
+    computeOutputValue: (element: any) => void;
+
+}
+import FontKerningProperty from "./FontKerningProperty";
diff --git a/build/types/core/properties/style-properties/font/FontSizeProperty.d.ts b/build/types/core/properties/style-properties/font/FontSizeProperty.d.ts
new file mode 100644
index 00000000..12801879
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/FontSizeProperty.d.ts
@@ -0,0 +1,4 @@
+export default class FontSizeProperty extends SubStyleProperty {
+    constructor();
+}
+import SubStyleProperty from "../SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/font/FontSizePropertyInline.d.ts b/build/types/core/properties/style-properties/font/FontSizePropertyInline.d.ts
new file mode 100644
index 00000000..7478c1c8
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/FontSizePropertyInline.d.ts
@@ -0,0 +1,11 @@
+export default class FontSizePropertyInline extends SubStyleProperty {
+    constructor();
+    computeOutputValue(element: any): void;
+    process(element: any): void;
+    /**
+     *
+     * @return {number}
+     */
+    get value(): number;
+}
+import SubStyleProperty from "../SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/font/FontStyleProperty.d.ts b/build/types/core/properties/style-properties/font/FontStyleProperty.d.ts
new file mode 100644
index 00000000..f1c59af0
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/FontStyleProperty.d.ts
@@ -0,0 +1,7 @@
+export default class FontStyleProperty extends SubStyleProperty {
+    constructor(defaultValue: any);
+
+}
+import SubStyleProperty from "../SubStyleProperty";
+
+export {};
diff --git a/build/types/core/properties/style-properties/font/FontStylePropertyInline.d.ts b/build/types/core/properties/style-properties/font/FontStylePropertyInline.d.ts
new file mode 100644
index 00000000..cdd911c0
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/FontStylePropertyInline.d.ts
@@ -0,0 +1,4 @@
+export default class FontStylePropertyInline extends FontStyleProperty {
+    constructor();
+}
+import FontStyleProperty from "./FontStyleProperty";
diff --git a/build/types/core/properties/style-properties/font/FontWeightProperty.d.ts b/build/types/core/properties/style-properties/font/FontWeightProperty.d.ts
new file mode 100644
index 00000000..fbc99373
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/FontWeightProperty.d.ts
@@ -0,0 +1,7 @@
+export default class FontWeightProperty extends SubStyleProperty {
+    constructor();
+
+}
+import SubStyleProperty from "../SubStyleProperty";
+
+export {};
diff --git a/build/types/core/properties/style-properties/font/FontWeightPropertyInline.d.ts b/build/types/core/properties/style-properties/font/FontWeightPropertyInline.d.ts
new file mode 100644
index 00000000..5f4abd85
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/FontWeightPropertyInline.d.ts
@@ -0,0 +1,4 @@
+export default class FontWeightPropertyInline extends FontWeightProperty {
+    computeOutputValue(element: any): void;
+}
+import FontWeightProperty from "./FontWeightProperty";
diff --git a/build/types/core/properties/style-properties/font/LetterSpacingProperty.d.ts b/build/types/core/properties/style-properties/font/LetterSpacingProperty.d.ts
new file mode 100644
index 00000000..f52f2597
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/LetterSpacingProperty.d.ts
@@ -0,0 +1,4 @@
+export default class LetterSpacingProperty extends SubStyleProperty {
+    constructor();
+}
+import SubStyleProperty from "../SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/font/LetterSpacingPropertyInline.d.ts b/build/types/core/properties/style-properties/font/LetterSpacingPropertyInline.d.ts
new file mode 100644
index 00000000..20d67ebd
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/LetterSpacingPropertyInline.d.ts
@@ -0,0 +1,6 @@
+export default class LetterSpacingPropertyInline extends LetterSpacingProperty {
+
+    computeOutputValue: (element: any) => void;
+
+}
+import LetterSpacingProperty from "./LetterSpacingProperty";
diff --git a/build/types/core/properties/style-properties/font/LineHeightProperty.d.ts b/build/types/core/properties/style-properties/font/LineHeightProperty.d.ts
new file mode 100644
index 00000000..866c72c0
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/LineHeightProperty.d.ts
@@ -0,0 +1,7 @@
+export default class LineHeightProperty extends SubStyleProperty {
+    /**
+     *
+     */
+    constructor();
+}
+import SubStyleProperty from "../SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/font/LineHeightPropertyInline.d.ts b/build/types/core/properties/style-properties/font/LineHeightPropertyInline.d.ts
new file mode 100644
index 00000000..7fa7fcbd
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/LineHeightPropertyInline.d.ts
@@ -0,0 +1,3 @@
+export default class LineHeightPropertyInline extends LineHeightProperty {
+}
+import LineHeightProperty from "./LineHeightProperty";
diff --git a/build/types/core/properties/style-properties/font/TextAlignProperty.d.ts b/build/types/core/properties/style-properties/font/TextAlignProperty.d.ts
new file mode 100644
index 00000000..d04894f3
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/TextAlignProperty.d.ts
@@ -0,0 +1,4 @@
+export default class TextAlignProperty extends SubStyleProperty {
+    constructor();
+}
+import SubStyleProperty from "../SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/font/TextAlignPropertyInline.d.ts b/build/types/core/properties/style-properties/font/TextAlignPropertyInline.d.ts
new file mode 100644
index 00000000..6892e013
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/TextAlignPropertyInline.d.ts
@@ -0,0 +1,4 @@
+export default class TextAlignPropertyInline extends TextAlignProperty {
+    computeOutputValue(element: any): void;
+}
+import TextAlignProperty from "./TextAlignProperty";
diff --git a/build/types/core/properties/style-properties/font/TextAlignPropertyText.d.ts b/build/types/core/properties/style-properties/font/TextAlignPropertyText.d.ts
new file mode 100644
index 00000000..4d9939a0
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/TextAlignPropertyText.d.ts
@@ -0,0 +1,5 @@
+export default class TextAlignPropertyText extends TextAlignProperty {
+    computeOutputValue(element: any): void;
+    process(element: any): void;
+}
+import TextAlignProperty from "./TextAlignProperty";
diff --git a/build/types/core/properties/style-properties/font/WhiteSpaceProperty.d.ts b/build/types/core/properties/style-properties/font/WhiteSpaceProperty.d.ts
new file mode 100644
index 00000000..2a315287
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/WhiteSpaceProperty.d.ts
@@ -0,0 +1,4 @@
+export default class WhiteSpaceProperty extends SubStyleProperty {
+    constructor();
+}
+import SubStyleProperty from "../SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/font/WhiteSpacePropertyInline.d.ts b/build/types/core/properties/style-properties/font/WhiteSpacePropertyInline.d.ts
new file mode 100644
index 00000000..a7438556
--- /dev/null
+++ b/build/types/core/properties/style-properties/font/WhiteSpacePropertyInline.d.ts
@@ -0,0 +1,58 @@
+/**
+ * @typedef  StringCollapserStrategy
+ * @type {(textContent:{string}) => string}
+ */
+/**
+ * @typedef  InlineCollapserStrategy
+ * @type {(line:{Line}) => number }
+ */
+/**
+ * @typedef InlineWrapperStrategy
+ * @type {(inlines:{Array}, i:{number}, lastInlineOffset:{number}, options:Object<string,any>) => boolean}
+ */
+export default class WhiteSpacePropertyInline extends WhiteSpaceProperty {
+    computeOutputValue: (element: any) => void;
+
+    /**
+     *
+     * @type {StringCollapserStrategy}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {InlineCollapserStrategy}
+     * @internal
+     */
+
+    /**
+     *
+     * @type {InlineWrapperStrategy}
+     * @internal
+     */
+
+    /**
+     *
+     * @param element
+     * @private
+     */
+
+
+    process(element: any): void;
+}
+export type StringCollapserStrategy = (textContent: {
+    string;
+}) => string;
+export type InlineCollapserStrategy = (line: {
+    Line;
+}) => number;
+export type InlineWrapperStrategy = (inlines: {
+    Array;
+}, i: {
+    number;
+}, lastInlineOffset: {
+    number;
+}, options: {
+    [x: string]: any;
+}) => boolean;
+import WhiteSpaceProperty from "./WhiteSpaceProperty";
diff --git a/build/types/core/properties/style-properties/visibility/Display.d.ts b/build/types/core/properties/style-properties/visibility/Display.d.ts
new file mode 100644
index 00000000..2cf7b54c
--- /dev/null
+++ b/build/types/core/properties/style-properties/visibility/Display.d.ts
@@ -0,0 +1,6 @@
+export default class Display extends SubStyleProperty {
+    constructor(defaultValue: any);
+
+    computeOutputValue(element: any): void;
+}
+import SubStyleProperty from "../SubStyleProperty";
diff --git a/build/types/core/properties/style-properties/visibility/Overflow.d.ts b/build/types/core/properties/style-properties/visibility/Overflow.d.ts
new file mode 100644
index 00000000..75b6053f
--- /dev/null
+++ b/build/types/core/properties/style-properties/visibility/Overflow.d.ts
@@ -0,0 +1,25 @@
+export default class Overflow extends SubStyleProperty {
+    constructor(defaultValue: any);
+
+    /**
+     *
+     * @type {Array.<Plane>|null}
+     * @internal
+     */
+
+
+    /**
+     * Update of overflow is a bit different, as parent may trigger changes on it
+     * @override
+     */
+    override update(element: any, out: any): void;
+    output(out: any): void;
+    computeOutputValue(element: any): void;
+    render(element: any): void;
+
+
+}
+import SubStyleProperty from "../SubStyleProperty";
+
+import { Plane } from "three/src/math/Plane";
+export {};
diff --git a/build/types/elements/basic/BlockElement.d.ts b/build/types/elements/basic/BlockElement.d.ts
new file mode 100644
index 00000000..312daf07
--- /dev/null
+++ b/build/types/elements/basic/BlockElement.d.ts
@@ -0,0 +1,8 @@
+export default class BlockElement extends BoxElement {
+    /**
+     *
+     * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+     */
+    constructor(values?: import('./../../core/elements/MeshUIBaseElement').Options);
+}
+import BoxElement from "./BoxElement";
diff --git a/build/types/elements/basic/BoxElement.d.ts b/build/types/elements/basic/BoxElement.d.ts
new file mode 100644
index 00000000..d1c0f8f2
--- /dev/null
+++ b/build/types/elements/basic/BoxElement.d.ts
@@ -0,0 +1,14 @@
+export default class BoxElement extends MeshUIBaseElement {
+    /**
+     *
+     * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+     * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+     */
+    static definePropertiesValues(properties: import('./../../core/elements/MeshUIBaseElement').Properties, values: import('./../../core/elements/MeshUIBaseElement').Options): void;
+    /**
+     *
+     * @param {MeshUIBaseElement} element
+     */
+    static init(element: MeshUIBaseElement): void;
+}
+import MeshUIBaseElement from "../../core/elements/MeshUIBaseElement";
diff --git a/build/types/elements/basic/InlineBlockElement.d.ts b/build/types/elements/basic/InlineBlockElement.d.ts
new file mode 100644
index 00000000..03d3e4c5
--- /dev/null
+++ b/build/types/elements/basic/InlineBlockElement.d.ts
@@ -0,0 +1,26 @@
+export default class InlineBlockElement extends MeshUIBaseElement {
+    /**
+     *
+     * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+     * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+     */
+    static definePropertiesValues(properties: import('./../../core/elements/MeshUIBaseElement').Properties, values: import('./../../core/elements/MeshUIBaseElement').Options): void;
+    /**
+     *
+     * @param {MeshUIBaseElement} element
+     */
+    static init(element: MeshUIBaseElement): void;
+    /**
+     *
+     * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+     */
+    constructor(values?: import('./../../core/elements/MeshUIBaseElement').Options);
+    /**
+     *
+     * @override
+     * @param {...Object3D} object
+     * @return {this}
+     */
+    override add(...args: Object3D[]): this;
+}
+import MeshUIBaseElement from "../../core/elements/MeshUIBaseElement";
diff --git a/build/types/elements/basic/InlineElement.d.ts b/build/types/elements/basic/InlineElement.d.ts
new file mode 100644
index 00000000..d0c7fa12
--- /dev/null
+++ b/build/types/elements/basic/InlineElement.d.ts
@@ -0,0 +1,31 @@
+export default class InlineElement extends MeshUIBaseElement {
+    /**
+     *
+     * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+     * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+     */
+    static definePropertiesValues(properties: import('./../../core/elements/MeshUIBaseElement').Properties, values: import('./../../core/elements/MeshUIBaseElement').Options): void;
+    /**
+     *
+     * @param {MeshUIBaseElement} element
+     */
+    static init(element: MeshUIBaseElement): void;
+    /**
+     *
+     * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+     */
+    constructor(values?: import('./../../core/elements/MeshUIBaseElement').Options);
+    /**
+     * A Text Element can only contains inline elements
+     * @override
+     * @param {...Object3D} object
+     * @return {this}
+     */
+    override add(...args: Object3D<import("three").Event>[]): this;
+    set textContent(arg: any);
+    get textContent(): any;
+    set invertAlpha(arg: any);
+    get invertAlpha(): any;
+}
+import MeshUIBaseElement from "../../core/elements/MeshUIBaseElement";
+import { Object3D } from "three/src/core/Object3D";
diff --git a/build/types/elements/basic/TextElement.d.ts b/build/types/elements/basic/TextElement.d.ts
new file mode 100644
index 00000000..3d29b1d9
--- /dev/null
+++ b/build/types/elements/basic/TextElement.d.ts
@@ -0,0 +1,21 @@
+export default class TextElement extends BoxElement {
+    /**
+     *
+     * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+     */
+    constructor(values?: import('./../../core/elements/MeshUIBaseElement').Options);
+    /**
+     * A Text Element can only contains inline elements
+     * @override
+     * @param {...Object3D} object
+     * @return {this}
+     */
+    override add(...args: Object3D<import("three").Event>[]): this;
+    set textContent(arg: string);
+    get textContent(): string;
+    set invertAlpha(arg: any);
+    get invertAlpha(): any;
+    get lines(): any;
+}
+import BoxElement from "./BoxElement";
+import { Object3D } from "three/src/core/Object3D";
diff --git a/build/types/elements/html/properties/StyleComputedPropertyWrapper.d.ts b/build/types/elements/html/properties/StyleComputedPropertyWrapper.d.ts
new file mode 100644
index 00000000..d33f7ad7
--- /dev/null
+++ b/build/types/elements/html/properties/StyleComputedPropertyWrapper.d.ts
@@ -0,0 +1,542 @@
+/**
+ * Wrapper of properties to fit html naming and multiple inputs : computed & computed(css)
+ */
+export default class StyleComputedPropertyWrapper {
+    /**
+     *
+     * @param {MeshUIBaseElement} element
+     */
+    constructor(element: MeshUIBaseElement);
+    /**
+     *
+     * @type {MeshUIBaseElement}
+     * @private
+     */
+
+    set(values: any): void;
+    /***********************************************************************************************************************
+     * computed GETTERS - SETTERS
+     **********************************************************************************************************************/
+    /** Box Properties ---------------------------------------------------------*/
+    /**
+     *
+     * @param {"border-box"|"content-box"} value
+     */
+    set boxSizing(arg: "border-box" | "content-box");
+    /**
+     *
+     * @return {"border-box"|"content-box"}
+     */
+    get boxSizing(): "border-box" | "content-box";
+    /**
+     *
+     * @param {number} v
+     */
+    set width(arg: any);
+    /**
+     *
+     * @return {*}
+     */
+    get width(): any;
+    /**
+     *
+     * @param {number} v
+     */
+    set height(arg: any);
+    /**
+     *
+     * @return {*}
+     */
+    get height(): any;
+    /**
+     *
+     * @param {Vector4|Array.<number>|number|string} v
+     */
+    set padding(arg: Vector4);
+    /**
+     *
+     * @return {Vector4}
+     */
+    get padding(): Vector4;
+    /**
+     *
+     * @param {number} v
+     */
+    set paddingTop(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get paddingTop(): number;
+    /**
+     *
+     * @param {number} v
+     */
+    set paddingRight(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get paddingRight(): number;
+    /**
+     *
+     * @param {number} v
+     */
+    set paddingBottom(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get paddingBottom(): number;
+    /**
+     *
+     * @param {number} v
+     */
+    set paddingLeft(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get paddingLeft(): number;
+    /**
+     *
+     * @param {Vector4|Array.<number>|number|string} v
+     */
+    set margin(arg: Vector4);
+    /**
+     *
+     * @return {Vector4}
+     */
+    get margin(): Vector4;
+    /**
+     *
+     * @param {number} v
+     */
+    set marginTop(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get marginTop(): number;
+    /**
+     *
+     * @param {number} v
+     */
+    set marginRight(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get marginRight(): number;
+    /**
+     *
+     * @param {number} v
+     */
+    set marginBottom(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get marginBottom(): number;
+    /**
+     *
+     * @param {number} v
+     */
+    set marginLeft(arg: number);
+    /** Display Properties -----------------------------------------------------*/
+    /**
+     *
+     * @param {"flex"|"none"} value
+     */
+    set display(arg: "none" | "flex");
+    /**
+     *
+     * @return {"flex"|"none"}
+     */
+    get display(): "none" | "flex";
+    /**
+     *
+     * @param {"visible"|"hidden"} v
+     */
+    set overflow(arg: "hidden" | "visible");
+    /**
+     *
+     * @return {"visible"|"hidden"}
+     */
+    get overflow(): "hidden" | "visible";
+    /** Position Properties ----------------------------------------------------*/
+    /**
+     *
+     * @param {"static"|"absolute"} v
+     */
+    set position(arg: "absolute" | "static");
+    /**
+     *
+     * @return {"static"|"absolute"}
+     */
+    get position(): "absolute" | "static";
+    /** Flex Properties --------------------------------------------------------*/
+    /**
+     *
+     * @param {"column"|"column-reverse"|"row"|"row-reverse"} value
+     */
+    set flexDirection(arg: "column" | "row" | "row-reverse" | "column-reverse");
+    /**
+     *
+     * @return {"column"|"column-reverse"|"row"|"row-reverse"}
+     */
+    get flexDirection(): "column" | "row" | "row-reverse" | "column-reverse";
+    /**
+     *
+     * @param {"flex-start"|"center"|"flex-end"|"space-around"|"space-between"|"space-evenly"} value
+     */
+    set justifyContent(arg: "center" | "space-between" | "space-around" | "space-evenly" | "flex-start" | "flex-end");
+    /**
+     *
+     * @return {"flex-start"|"center"|"flex-end"|"space-around"|"space-between"|"space-evenly"}
+     */
+    get justifyContent(): "center" | "space-between" | "space-around" | "space-evenly" | "flex-start" | "flex-end";
+    /**
+     *
+     * @param {"start"|"center"|"end"|"stretch"} value
+     */
+    set alignItems(arg: "center" | "end" | "start" | "stretch");
+    /**
+     *
+     * @return {"start"|"center"|"end"|"stretch"}
+     */
+    get alignItems(): "center" | "end" | "start" | "stretch";
+    /**
+     *
+     * @param {number} v
+     */
+    set order(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get order(): number;
+    /** Background Properties --------------------------------------------------*/
+    /**
+     *
+     * @param {Color|number|string} v
+     */
+    set backgroundColor(arg: string | number | Color);
+    /**
+     *
+     * @return {Color|number|string}
+     */
+    get backgroundColor(): string | number | Color;
+    set backgroundOpacity(arg: any);
+    get backgroundOpacity(): any;
+    /**
+     *
+     * @param {Texture|string} v
+     */
+    set backgroundImage(arg: any);
+    /**
+     *
+     * @return {Texture|string}
+     */
+    get backgroundImage(): any;
+    /**
+     *
+     * @param {"cover"|"contain"|"stretch"} v
+     */
+    set backgroundSize(arg: "contain" | "cover" | "stretch");
+    /**
+     *
+     * @return {"cover"|"contain"|"stretch"}
+     */
+    get backgroundSize(): "contain" | "cover" | "stretch";
+    /** Text Properties --------------------------------------------------------*/
+    /**
+     *
+     * @param {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"} v
+     */
+    set whiteSpace(arg: "normal" | "pre" | "pre-line" | "nowrap" | "pre-wrap");
+    /**
+     *
+     * @return {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"}
+     */
+    get whiteSpace(): "normal" | "pre" | "pre-line" | "nowrap" | "pre-wrap";
+    /**
+     *
+     * @param {Color|number|string} v
+     */
+    set color(arg: string | number | Color);
+    /**
+     *
+     * @return {Color|number|string}
+     */
+    get color(): string | number | Color;
+    /**
+     *
+     * @param {number} v
+     */
+    set opacity(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get opacity(): number;
+    /**
+     *
+     * @param {"normal"|"italic"} v
+     */
+    set fontStyle(arg: "normal" | "italic");
+    /**
+     *
+     * @return {"normal"|"italic"}
+     */
+    get fontStyle(): "normal" | "italic";
+    /**
+     *
+     * @param {100|200|300|400|500|600|700|800|900|"light"|"normal"|"bold"|"bolder"}  v
+     */
+    set fontWeight(arg: "bold" | "normal" | 100 | "light" | "bolder" | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900);
+    /**
+     *
+     * @return {100|200|300|400|500|600|700|800|900|"light"|"normal"|"bold"|"bolder"}
+     */
+    get fontWeight(): "bold" | "normal" | 100 | "light" | "bolder" | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+    /**
+     *
+     * @param {"normal"|"none"} v
+     */
+    set fontKerning(arg: "normal" | "none");
+    /**
+     *
+     * @return {"normal"|"none"}
+     */
+    get fontKerning(): "normal" | "none";
+    /**
+     *
+     * @param {number} v
+     */
+    set letterSpacing(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get letterSpacing(): number;
+    /**
+     *
+     * @param {number} v
+     */
+    set lineHeight(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get lineHeight(): number;
+    /**
+     *
+     * @param {"left"| "right"|"center"|"justify"|"justify-left"|"justify-right"|"justify-center"} v
+     */
+    set textAlign(arg: "center" | "left" | "right" | "justify" | "justify-left" | "justify-right" | "justify-center");
+    /**
+     *
+     * @return {"left"| "right"|"center"|"justify"|"justify-left"|"justify-right"|"justify-center"}
+     */
+    get textAlign(): "center" | "left" | "right" | "justify" | "justify-left" | "justify-right" | "justify-center";
+    /** Border Properties ----------------------------------------------------------------------------------------------*/
+    /**
+     * Set the units of borderRadius
+     * @param {string|"rem"} v
+     */
+    set borderRadiusUnits(arg: string);
+    /**
+     * Get the units of borderRadius
+     * @returns {string}
+     */
+    get borderRadiusUnits(): string;
+    /**
+     *
+     * @param {Vector4|Array.<Number>|Number|string} v
+     */
+    set borderRadius(arg: Vector4);
+    /**
+     *
+     * @returns {Vector4}
+     */
+    get borderRadius(): Vector4;
+    /**
+     * Set the top left radius only
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderTopLeftRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderTopLeftRadius(): number;
+    /**
+     * Set the top right radius only
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderTopRightRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderTopRightRadius(): number;
+    /**
+     * Set the bottom right radius only
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderBottomRightRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderBottomRightRadius(): number;
+    /**
+     * Set the bottom left radius only
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderBottomLeftRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderBottomLeftRadius(): number;
+    /**
+     * Set the top left and top right radiuses
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderTopRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderTopRadius(): number;
+    /**
+     * Set the top right and bottom right radiuses
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderRightRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderRightRadius(): number;
+    /**
+     * Set the top left and bottom left radiuses
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderLeftRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderLeftRadius(): number;
+    /**
+     * Set the bottom left and bottom right radiuses
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderBottomRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderBottomRadius(): number;
+    /**
+     * Set the units of borderWidth
+     * @param {string|"rem"} v
+     */
+    set borderWidthUnits(arg: string);
+    /**
+     * Get the units of borderWidth
+     * @returns {string}
+     */
+    get borderWidthUnits(): string;
+    /**
+     *
+     * @param {Vector4|Array.<Number>|Number|string} v
+     */
+    set borderWidth(arg: Vector4);
+    /**
+     *
+     * @returns {Vector4}
+     */
+    get borderWidth(): Vector4;
+    /**
+     * Set the width of the top side border only
+     * @param {Number} v in units of `borderWidthUnits`
+     */
+    set borderTopWidth(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderTopWidth(): number;
+    /**
+     * Set the width of the right side border only
+     * @param {Number} v in units of `borderWidthUnits`
+     */
+    set borderRightWidth(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderRightWidth(): number;
+    /**
+     * Set the width of the bottom side border only
+     * @param {Number} v in units of `borderWidthUnits`
+     */
+    set borderBottomWidth(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderBottomWidth(): number;
+    /**
+     * Set the width of the left side border only
+     * @param {Number} v in units of `borderWidthUnits`
+     */
+    set borderLeftWidth(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderLeftWidth(): number;
+    /**
+     *
+     * @param {Color|Number|string} v
+     */
+    set borderColor(arg: Color);
+    /**
+     *
+     * @returns {Color}
+     */
+    get borderColor(): Color;
+    /**
+     *
+     * @param v
+     */
+    set borderOpacity(arg: any);
+    /**
+     *
+     * @return {*}
+     */
+    get borderOpacity(): any;
+    /**
+     *
+     * @param value
+     */
+    set computed(arg: {
+        [x: string]: any;
+    });
+    /**
+     *
+     * @return {Object.<string,any>}
+     */
+    get computed(): {
+        [x: string]: any;
+    };
+    dispose(): void;
+}
+import { Vector4 } from "three/src/math/Vector4";
+import { Color } from "three/src/math/Color";
+import MeshUIBaseElement from "./../../../core/elements/MeshUIBaseElement";
diff --git a/build/types/elements/html/properties/StylePropertyWrapper.d.ts b/build/types/elements/html/properties/StylePropertyWrapper.d.ts
new file mode 100644
index 00000000..6d3e6be7
--- /dev/null
+++ b/build/types/elements/html/properties/StylePropertyWrapper.d.ts
@@ -0,0 +1,541 @@
+/**
+ * Wrapper of properties to fit html naming and multiple inputs : inline & computed(css)
+ */
+export default class StylePropertyWrapper {
+    /**
+     *
+     * @param {MeshUIBaseElement} element
+     */
+    constructor(element: MeshUIBaseElement);
+    /**
+     *
+     * @type {MeshUIBaseElement}
+     * @private
+     */
+
+    /***********************************************************************************************************************
+     * INLINE GETTERS - SETTERS
+     **********************************************************************************************************************/
+    /** Box Properties ---------------------------------------------------------*/
+    /**
+     *
+     * @param {"border-box"|"content-box"} value
+     */
+    set boxSizing(arg: "border-box" | "content-box");
+    /**
+     *
+     * @return {"border-box"|"content-box"}
+     */
+    get boxSizing(): "border-box" | "content-box";
+    /**
+     *
+     * @param {number} v
+     */
+    set width(arg: any);
+    /**
+     *
+     * @return {*}
+     */
+    get width(): any;
+    /**
+     *
+     * @param {number} v
+     */
+    set height(arg: any);
+    /**
+     *
+     * @return {*}
+     */
+    get height(): any;
+    /**
+     *
+     * @param {Vector4|Array.<number>|number|string} v
+     */
+    set padding(arg: Vector4);
+    /**
+     *
+     * @return {Vector4}
+     */
+    get padding(): Vector4;
+    /**
+     *
+     * @param {number} v
+     */
+    set paddingTop(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get paddingTop(): number;
+    /**
+     *
+     * @param {number} v
+     */
+    set paddingRight(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get paddingRight(): number;
+    /**
+     *
+     * @param {number} v
+     */
+    set paddingBottom(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get paddingBottom(): number;
+    /**
+     *
+     * @param {number} v
+     */
+    set paddingLeft(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get paddingLeft(): number;
+    /**
+     *
+     * @param {Vector4|Array.<number>|number|string} v
+     */
+    set margin(arg: Vector4);
+    /**
+     *
+     * @return {Vector4}
+     */
+    get margin(): Vector4;
+    /**
+     *
+     * @param {number} v
+     */
+    set marginTop(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get marginTop(): number;
+    /**
+     *
+     * @param {number} v
+     */
+    set marginRight(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get marginRight(): number;
+    /**
+     *
+     * @param {number} v
+     */
+    set marginBottom(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get marginBottom(): number;
+    /**
+     *
+     * @param {number} v
+     */
+    set marginLeft(arg: number);
+    /** Display Properties -----------------------------------------------------*/
+    /**
+     *
+     * @param {"flex"|"none"} value
+     */
+    set display(arg: "none" | "flex");
+    /**
+     *
+     * @return {"flex"|"none"}
+     */
+    get display(): "none" | "flex";
+    /**
+     *
+     * @param {"visible"|"hidden"} v
+     */
+    set overflow(arg: "hidden" | "visible");
+    /**
+     *
+     * @return {"visible"|"hidden"}
+     */
+    get overflow(): "hidden" | "visible";
+    /** Position Properties ----------------------------------------------------*/
+    /**
+     *
+     * @param {"static"|"absolute"} v
+     */
+    set position(arg: "absolute" | "static");
+    /**
+     *
+     * @return {"static"|"absolute"}
+     */
+    get position(): "absolute" | "static";
+    /** Flex Properties --------------------------------------------------------*/
+    /**
+     *
+     * @param {"column"|"column-reverse"|"row"|"row-reverse"} value
+     */
+    set flexDirection(arg: "column" | "row" | "row-reverse" | "column-reverse");
+    /**
+     *
+     * @return {"column"|"column-reverse"|"row"|"row-reverse"}
+     */
+    get flexDirection(): "column" | "row" | "row-reverse" | "column-reverse";
+    /**
+     *
+     * @param {"flex-start"|"center"|"flex-end"|"space-around"|"space-between"|"space-evenly"} value
+     */
+    set justifyContent(arg: "center" | "space-between" | "space-around" | "space-evenly" | "flex-start" | "flex-end");
+    /**
+     *
+     * @return {"flex-start"|"center"|"flex-end"|"space-around"|"space-between"|"space-evenly"}
+     */
+    get justifyContent(): "center" | "space-between" | "space-around" | "space-evenly" | "flex-start" | "flex-end";
+    /**
+     *
+     * @param {"start"|"center"|"end"|"stretch"} value
+     */
+    set alignItems(arg: "center" | "end" | "start" | "stretch");
+    /**
+     *
+     * @return {"start"|"center"|"end"|"stretch"}
+     */
+    get alignItems(): "center" | "end" | "start" | "stretch";
+    /**
+     *
+     * @param {number} v
+     */
+    set order(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get order(): number;
+    /** Background Properties --------------------------------------------------*/
+    /**
+     *
+     * @param {Color|number|string} v
+     */
+    set backgroundColor(arg: string | number | Color);
+    /**
+     *
+     * @return {Color|number|string}
+     */
+    get backgroundColor(): string | number | Color;
+    set backgroundOpacity(arg: any);
+    get backgroundOpacity(): any;
+    /**
+     *
+     * @param {Texture|string} v
+     */
+    set backgroundImage(arg: any);
+    /**
+     *
+     * @return {Texture|string}
+     */
+    get backgroundImage(): any;
+    /**
+     *
+     * @param {"cover"|"contain"|"stretch"} v
+     */
+    set backgroundSize(arg: "contain" | "cover" | "stretch");
+    /**
+     *
+     * @return {"cover"|"contain"|"stretch"}
+     */
+    get backgroundSize(): "contain" | "cover" | "stretch";
+    /** Text Properties --------------------------------------------------------*/
+    /**
+     *
+     * @param {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"} v
+     */
+    set whiteSpace(arg: "normal" | "pre" | "pre-line" | "nowrap" | "pre-wrap");
+    /**
+     *
+     * @return {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"}
+     */
+    get whiteSpace(): "normal" | "pre" | "pre-line" | "nowrap" | "pre-wrap";
+    /**
+     *
+     * @param {Color|number|string} v
+     */
+    set color(arg: string | number | Color);
+    /**
+     *
+     * @return {Color|number|string}
+     */
+    get color(): string | number | Color;
+    /**
+     *
+     * @param {number} v
+     */
+    set opacity(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get opacity(): number;
+    /**
+     *
+     * @param {"normal"|"italic"} v
+     */
+    set fontStyle(arg: "normal" | "italic");
+    /**
+     *
+     * @return {"normal"|"italic"}
+     */
+    get fontStyle(): "normal" | "italic";
+    /**
+     *
+     * @param {100|200|300|400|500|600|700|800|900|"light"|"normal"|"bold"|"bolder"}  v
+     */
+    set fontWeight(arg: "bold" | "normal" | 100 | "light" | "bolder" | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900);
+    /**
+     *
+     * @return {100|200|300|400|500|600|700|800|900|"light"|"normal"|"bold"|"bolder"}
+     */
+    get fontWeight(): "bold" | "normal" | 100 | "light" | "bolder" | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+    /**
+     *
+     * @param {"normal"|"none"} v
+     */
+    set fontKerning(arg: "normal" | "none");
+    /**
+     *
+     * @return {"normal"|"none"}
+     */
+    get fontKerning(): "normal" | "none";
+    /**
+     *
+     * @param {number} v
+     */
+    set letterSpacing(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get letterSpacing(): number;
+    /**
+     *
+     * @param {number} v
+     */
+    set lineHeight(arg: number);
+    /**
+     *
+     * @return {number}
+     */
+    get lineHeight(): number;
+    /**
+     *
+     * @param {"left"| "right"|"center"|"justify"|"justify-left"|"justify-right"|"justify-center"} v
+     */
+    set textAlign(arg: "center" | "left" | "right" | "justify" | "justify-left" | "justify-right" | "justify-center");
+    /**
+     *
+     * @return {"left"| "right"|"center"|"justify"|"justify-left"|"justify-right"|"justify-center"}
+     */
+    get textAlign(): "center" | "left" | "right" | "justify" | "justify-left" | "justify-right" | "justify-center";
+    /** Border Properties ----------------------------------------------------------------------------------------------*/
+    /**
+     * Set the units of borderRadius
+     * @param {string|"rem"} v
+     */
+    set borderRadiusUnits(arg: string);
+    /**
+     * Get the units of borderRadius
+     * @returns {string}
+     */
+    get borderRadiusUnits(): string;
+    /**
+     *
+     * @param {Vector4|Array.<Number>|Number|string} v
+     */
+    set borderRadius(arg: Vector4);
+    /**
+     *
+     * @returns {Vector4}
+     */
+    get borderRadius(): Vector4;
+    /**
+     * Set the top left radius only
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderTopLeftRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderTopLeftRadius(): number;
+    /**
+     * Set the top right radius only
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderTopRightRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderTopRightRadius(): number;
+    /**
+     * Set the bottom right radius only
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderBottomRightRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderBottomRightRadius(): number;
+    /**
+     * Set the bottom left radius only
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderBottomLeftRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderBottomLeftRadius(): number;
+    /**
+     * Set the top left and top right radiuses
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderTopRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderTopRadius(): number;
+    /**
+     * Set the top right and bottom right radiuses
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderRightRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderRightRadius(): number;
+    /**
+     * Set the top left and bottom left radiuses
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderLeftRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderLeftRadius(): number;
+    /**
+     * Set the bottom left and bottom right radiuses
+     * @param {Number} v in units of `borderRadiusUnits`
+     */
+    set borderBottomRadius(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderBottomRadius(): number;
+    /**
+     * Set the units of borderWidth
+     * @param {string|"rem"} v
+     */
+    set borderWidthUnits(arg: string);
+    /**
+     * Get the units of borderWidth
+     * @returns {string}
+     */
+    get borderWidthUnits(): string;
+    /**
+     *
+     * @param {Vector4|Array.<Number>|Number|string} v
+     */
+    set borderWidth(arg: Vector4);
+    /**
+     *
+     * @returns {Vector4}
+     */
+    get borderWidth(): Vector4;
+    /**
+     * Set the width of the top side border only
+     * @param {Number} v in units of `borderWidthUnits`
+     */
+    set borderTopWidth(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderTopWidth(): number;
+    /**
+     * Set the width of the right side border only
+     * @param {Number} v in units of `borderWidthUnits`
+     */
+    set borderRightWidth(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderRightWidth(): number;
+    /**
+     * Set the width of the bottom side border only
+     * @param {Number} v in units of `borderWidthUnits`
+     */
+    set borderBottomWidth(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderBottomWidth(): number;
+    /**
+     * Set the width of the left side border only
+     * @param {Number} v in units of `borderWidthUnits`
+     */
+    set borderLeftWidth(arg: number);
+    /**
+     *
+     * @returns {number}
+     */
+    get borderLeftWidth(): number;
+    /**
+     *
+     * @param {Color|Number|string} v
+     */
+    set borderColor(arg: Color);
+    /**
+     *
+     * @returns {Color}
+     */
+    get borderColor(): Color;
+    /**
+     *
+     * @param v
+     */
+    set borderOpacity(arg: any);
+    /**
+     *
+     * @return {*}
+     */
+    get borderOpacity(): any;
+    /**
+     *
+     * @param value
+     */
+    set computed(arg: {
+        [x: string]: any;
+    });
+    /**
+     *
+     * @return {Object.<string,any>}
+     */
+    get computed(): {
+        [x: string]: any;
+    };
+    dispose(): void;
+}
+import { Vector4 } from "three/src/math/Vector4";
+import { Color } from "three/src/math/Color";
+import MeshUIBaseElement from "../../../core/elements/MeshUIBaseElement";
diff --git a/build/types/font/FontFamily.d.ts b/build/types/font/FontFamily.d.ts
index 29e57977..e4ca141b 100644
--- a/build/types/font/FontFamily.d.ts
+++ b/build/types/font/FontFamily.d.ts
@@ -9,19 +9,19 @@ export default class FontFamily extends EventDispatcher<import("three").Event> {
      * @type {string}
      * @private
      */
-    private _name;
+
     /**
      *
      * @type {Array.<FontVariant>}
      * @private
      */
-    private _variants;
+
     /**
      *
      * @type {boolean}
      * @private
      */
-    private _isReady;
+
     get isReady(): boolean;
     /**
      *
@@ -50,7 +50,7 @@ export default class FontFamily extends EventDispatcher<import("three").Event> {
      * @return {string}
      */
     get name(): string;
-    _checkReadiness: () => void;
+
 }
 import { EventDispatcher } from "three/src/core/EventDispatcher";
 import { Texture } from "three/src/textures/Texture";
diff --git a/build/types/font/FontVariant.d.ts b/build/types/font/FontVariant.d.ts
index cc4f04c2..eda35da2 100644
--- a/build/types/font/FontVariant.d.ts
+++ b/build/types/font/FontVariant.d.ts
@@ -1,25 +1,29 @@
+export default FontVariant;
+export type KerningPairs = {
+    [x: string]: number;
+};
 /**
  * @abstract
  */
-export default class FontVariant extends EventDispatcher<import("three").Event> {
+declare class FontVariant extends EventDispatcher<import("three").Event> {
     /**
      *
      * @param {string} weight
      * @param {string} style
      */
     constructor(weight: string, style: string);
-    /** @private */ private _isReady;
-    /** @protected */ protected _weight: string;
-    /** @protected */ protected _style: string;
-    /** @protected */ protected _size: number;
-    /** @protected */ protected _lineHeight: number;
-    /** @protected */ protected _lineBase: number;
+
+
+
+
+
+
     /**
      *
      * @type {TypographicFont}
      * @protected
      */
-    protected _font: TypographicFont;
+
     /**
      *
      * @returns {TypographicFont}
@@ -63,17 +67,25 @@ export default class FontVariant extends EventDispatcher<import("three").Event>
     /**
      *
      * @param {string} character
-     * @returns {MSDFTypographicGlyph}
+     * @returns {TypographicGlyph}
      */
-    getTypographicGlyph(character: string): MSDFTypographicGlyph;
+    getTypographicGlyph(character: string): TypographicGlyph;
+    /**
+     * @abstract
+     * @protected
+     * @param {string} missingChar
+     * @returns {string|null}
+     */
+
     /**
      * Convert an InlineCharacter to a geometry
      *
      * @abstract
      * @param {InlineGlyph} inline
+     * @param {MeshUIBaseElement} element
      * @returns {BufferGeometry|Array.<BufferGeometry>}
      */
-    getGeometricGlyph(inline: InlineGlyph, segments?: number): BufferGeometry | Array<BufferGeometry>;
+    getGeometricGlyph(inline: InlineGlyph, element: MeshUIBaseElement): BufferGeometry | Array<BufferGeometry>;
     /**
      * Obtain the kerning amount of a glyphPair
      * @param {string} glyphPair
@@ -93,18 +105,25 @@ export default class FontVariant extends EventDispatcher<import("three").Event>
      *
      * @private
      */
-    private _checkReadiness;
+
+    /**
+     * @abstract
+     * @param element
+     * @internal
+     */
+
     /**
      *
      * @abstract
      * @returns {boolean}
      * @protected
      */
-    protected _readyCondition(): boolean;
+
 }
 import { EventDispatcher } from "three/src/core/EventDispatcher";
 import TypographicFont from "./TypographicFont";
 import { Texture } from "three/src/textures/Texture";
-import MSDFTypographicGlyph from "./msdf/MSDFTypographicGlyph";
+import TypographicGlyph from "./TypographicGlyph";
 import InlineGlyph from "./InlineGlyph";
+import MeshUIBaseElement from "./../core/elements/MeshUIBaseElement";
 import { BufferGeometry } from "three/src/core/BufferGeometry";
diff --git a/build/types/font/InlineGlyph.d.ts b/build/types/font/InlineGlyph.d.ts
index 8c086e3b..88ce639e 100644
--- a/build/types/font/InlineGlyph.d.ts
+++ b/build/types/font/InlineGlyph.d.ts
@@ -4,7 +4,7 @@ export default class InlineGlyph extends Inline {
      * @param {TypographicGlyph} characterDesc
      */
     constructor(characterDesc: TypographicGlyph);
-    /** @protected */ protected _typographic: TypographicGlyph;
+
     /**
      *
      * @returns {TypographicGlyph}
@@ -16,5 +16,5 @@ export default class InlineGlyph extends Inline {
      */
     get char(): string;
 }
-import Inline from "../components/core/Inline";
+import Inline from "../core/elements/glyphs/Inline";
 import TypographicGlyph from "./TypographicGlyph";
diff --git a/build/types/font/TypographicFont.d.ts b/build/types/font/TypographicFont.d.ts
index 0f8d916a..d0a3a32f 100644
--- a/build/types/font/TypographicFont.d.ts
+++ b/build/types/font/TypographicFont.d.ts
@@ -1,9 +1,9 @@
 export default class TypographicFont {
-    /** @protected */ protected _size: number;
-    /** @protected */ protected _lineHeight: number;
-    /** @protected */ protected _lineBase: number;
-    /** @protected */ protected _name: string;
-    /** @protected */ protected _charset: string;
+
+
+
+
+
     /**
      *
      * @returns {number}
diff --git a/build/types/font/TypographicGlyph.d.ts b/build/types/font/TypographicGlyph.d.ts
index f19fcd3b..011e2662 100644
--- a/build/types/font/TypographicGlyph.d.ts
+++ b/build/types/font/TypographicGlyph.d.ts
@@ -8,18 +8,18 @@ export default class TypographicGlyph {
      * @param {TypographicFont} typographicFont
      */
     constructor(typographicFont: TypographicFont);
-    /** @protected */ protected _char: string;
-    /** @protected */ protected _width: number;
-    /** @protected */ protected _heigth: number;
-    /** @protected */ protected _xadvance: number;
-    /** @protected */ protected _xoffset: number;
-    /** @protected */ protected _yoffset: number;
+
+
+
+
+
+
     /**
      *
      * @type {TypographicFont}
      * @protected
      */
-    protected _font: TypographicFont;
+
     /**
      *
      * @returns {TypographicFont}
@@ -60,6 +60,13 @@ export default class TypographicGlyph {
      * @returns {number}
      */
     get yoffset(): number;
+    /**
+     *
+     * @abstract
+     * @param {string} otherChar
+     * @returns {TypographicGlyph}
+     */
+    clone(otherChar: string): TypographicGlyph;
     /**
      *
      * @abstract
diff --git a/build/types/font/msdf/MSDFFontVariant.d.ts b/build/types/font/msdf/MSDFFontVariant.d.ts
index 525a72e2..22cddaf2 100644
--- a/build/types/font/msdf/MSDFFontVariant.d.ts
+++ b/build/types/font/msdf/MSDFFontVariant.d.ts
@@ -3,8 +3,8 @@
  */
 export default class MSDFFontVariant extends FontVariant {
     constructor(weight: any, style: any, json: any, texture: any);
-    _unitRange: Vector2;
-    _defaultMaterialClass: typeof MSDFFontMaterial;
+
+
     get texture(): any;
     get unitRange(): Vector2;
     /**
@@ -12,46 +12,53 @@ export default class MSDFFontVariant extends FontVariant {
      * @param {MSDFJson} json
      * @private
      */
-    private _buildData;
-    _kernings: {
-        [x: string]: number;
-    };
-    _chars: {};
-    _distanceRange: number;
+
+    /**
+     *
+     * @type {import('../FontVariant').KerningPairs}
+     * @private
+     */
+
+
+
     /**
      *
      * @param texture
      * @private
      */
-    private _buildTexture;
+
     /**
      *
-     * @param {MSDFInlineGlyph} inline
+     * @override
+     * @param {import('./../InlineGlyph').default|import('./MSDFInlineGlyph').default} inline
+     * @param {import('./../../core/elements/MeshUIBaseElement').default} element
      * @returns {MSDFGeometricGlyph}
      */
-    getGeometricGlyph(inline: MSDFInlineGlyph, segments?: number): MSDFGeometricGlyph;
+    override getGeometricGlyph(inline: import('./../InlineGlyph').default | import('./MSDFInlineGlyph').default, element: import('./../../core/elements/MeshUIBaseElement').default): MSDFGeometricGlyph;
     /**
      * Ensure that each font variant has its kerning dictionary
      * @see src/font/msdf/FontVariantMSDF.js for an implementation
      *
      * @param {MSDFJson} json
-     *
-     * @returns {Object.<string, number>}
+     * @returns {import('../FontVariant').KerningPairs}
      * @private
      */
-    private _buildKerningPairs;
+
     /**
      *
      * @param {MSDFJson} json
      * @private
      */
-    private _buildCharacters;
+
     /**
      *
      * @param {MSDFJson} json
+     * @param char
+     * @param scaleX
+     * @param scaleY
      * @private
      */
-    private _buildCharacterWhite;
+
 }
 export type MSDFJson = {
     info: MSDFJsonInfo;
@@ -200,6 +207,14 @@ export type MSDFJsonChar = {
      * The texture channel where the character image is found (1 = blue, 2 = green, 4 = red, 8 = alpha, 15 = all channels).
      */
     chnl: number;
+    /**
+     * /
+     *
+     *
+     *
+     * /**
+     */
+    uv?: any;
 };
 export type MSDFJsonKerning = {
     /**
@@ -218,5 +233,4 @@ export type MSDFJsonKerning = {
 import FontVariant from "../FontVariant";
 import { Vector2 } from "three/src/math/Vector2";
 import MSDFFontMaterial from "./materials/MSDFFontMaterial";
-import MSDFInlineGlyph from "./MSDFInlineGlyph";
 import MSDFGeometricGlyph from "./MSDFGeometricGlyph";
diff --git a/build/types/font/msdf/MSDFGeometricGlyph.d.ts b/build/types/font/msdf/MSDFGeometricGlyph.d.ts
index ffcc5df6..cfd413e7 100644
--- a/build/types/font/msdf/MSDFGeometricGlyph.d.ts
+++ b/build/types/font/msdf/MSDFGeometricGlyph.d.ts
@@ -2,20 +2,21 @@ export default class MSDFGeometricGlyph extends PlaneBufferGeometry {
     /**
      *
      * @param {MSDFInlineGlyph} inline
+     * @param {MeshUIBaseElement} element
      */
-    constructor(inline: MSDFInlineGlyph, segments?: number);
+    constructor(inline: MSDFInlineGlyph, element: MeshUIBaseElement);
     /**
      * Compute the right UVs that will map the MSDF texture so that the passed character
      * will appear centered in full size
      * @param {MSDFInlineGlyph} inline
      * @private
      */
-    private _mapUVs;
+
     /**
      * Set all UVs to 0, so that none of the glyphs on the texture will appear
      * @private
      * */
-    private _nullifyUVs;
+
     /**
      *
      * @TODO: Apply pivot properties when splitText isset
@@ -23,7 +24,8 @@ export default class MSDFGeometricGlyph extends PlaneBufferGeometry {
      * @param {MSDFInlineGlyph} inline
      * @private
      */
-    private _transformGeometry;
+
 }
 import { PlaneBufferGeometry } from "three/src/geometries/PlaneGeometry";
 import MSDFInlineGlyph from "./MSDFInlineGlyph";
+import MeshUIBaseElement from "./../../core/elements/MeshUIBaseElement";
diff --git a/build/types/font/msdf/MSDFTypographicFont.d.ts b/build/types/font/msdf/MSDFTypographicFont.d.ts
index c24ca815..87230d7b 100644
--- a/build/types/font/msdf/MSDFTypographicFont.d.ts
+++ b/build/types/font/msdf/MSDFTypographicFont.d.ts
@@ -4,8 +4,8 @@ export default class MSDFTypographicFont extends TypographicFont {
      * @param {import('./MSDFFontVariant').MSDFJson} json
      */
     constructor(json: import('./MSDFFontVariant').MSDFJson);
-    _textureWidth: number;
-    _textureHeight: number;
+
+
     /**
      *
      * @returns {number}
diff --git a/build/types/font/msdf/MSDFTypographicGlyph.d.ts b/build/types/font/msdf/MSDFTypographicGlyph.d.ts
index dbd5973f..75bdad09 100644
--- a/build/types/font/msdf/MSDFTypographicGlyph.d.ts
+++ b/build/types/font/msdf/MSDFTypographicGlyph.d.ts
@@ -1,15 +1,13 @@
+/**
+
+ */
 export default class MSDFTypographicGlyph extends TypographicGlyph {
     /**
      * @param {MSDFTypographicFont} fontDescription
      * @param {import('./MSDFFontVariant').MSDFJsonChar} characterData
      */
     constructor(fontDescription: MSDFTypographicFont, characterData: import('./MSDFFontVariant').MSDFJsonChar);
-    _uv: {
-        left: number;
-        right: number;
-        top: number;
-        bottom: number;
-    };
+
     /**
      *
      * @returns {{left: number, right: number, top: number, bottom: number}|null}
@@ -20,6 +18,12 @@ export default class MSDFTypographicGlyph extends TypographicGlyph {
         top: number;
         bottom: number;
     };
+    /**
+     * @override
+     * @param {string} otherChar
+     * @returns {MSDFTypographicGlyph}
+     */
+    override clone(otherChar: string): MSDFTypographicGlyph;
     /**
      * @override
      * @returns {MSDFInlineGlyph}
diff --git a/build/types/font/msdf/materials/MSDFFontMaterial.d.ts b/build/types/font/msdf/materials/MSDFFontMaterial.d.ts
index 9134141d..ac8f2fb7 100644
--- a/build/types/font/msdf/materials/MSDFFontMaterial.d.ts
+++ b/build/types/font/msdf/materials/MSDFFontMaterial.d.ts
@@ -1,4 +1,4 @@
-export const ALPHA_TEST: 0.02;
+
 /**
  * This material implements the msdf rendering shader
  */
diff --git a/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl.d.ts b/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl.d.ts
index 8c99ab7f..0e4b98a5 100644
--- a/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl.d.ts
+++ b/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl.d.ts
@@ -1,2 +1,6 @@
-declare var _default: "\n\tfloat alpha;\n#ifdef NO_RGSS\n\n\talpha = tap( vUvG );\n\n#else\n\n\t// shader-based supersampling based on https://bgolus.medium.com/sharper-mipmapping-using-shader-based-supersampling-ed7aadb47bec\n\t// per pixel partial derivatives\n\tvec2 dx = dFdx(vUvG);\n\tvec2 dy = dFdy(vUvG);\n\t// rotated grid uv offsets\n\tvec2 uvOffsets = vec2(0.125, 0.375);\n\tvec2 offsetUV = vec2(0.0, 0.0);\n\t// supersampled using 2x2 rotated grid\n\talpha = 0.0;\n\toffsetUV.xy = vUvG + uvOffsets.x * dx + uvOffsets.y * dy;\n\talpha += tap(offsetUV);\n\toffsetUV.xy = vUvG - uvOffsets.x * dx - uvOffsets.y * dy;\n\talpha += tap(offsetUV);\n\toffsetUV.xy = vUvG + uvOffsets.y * dx - uvOffsets.x * dy;\n\talpha += tap(offsetUV);\n\toffsetUV.xy = vUvG - uvOffsets.y * dx + uvOffsets.x * dy;\n\talpha += tap(offsetUV);\n\talpha *= 0.25;\n\n#endif\n\n\talpha = clamp( alpha, 0.0, 1.0 );\n\n#ifdef INVERT_ALPHA\n\n\talpha = 1.0 - alpha;\n\n#endif\n\n\tdiffuseColor.a *= alpha;\n";
-export default _default;
+export default program;
+/**
+ *
+ * @type {string}
+ */
+declare const program: string;
diff --git a/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl.d.ts b/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl.d.ts
index 3dc042ea..0e4b98a5 100644
--- a/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl.d.ts
+++ b/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl.d.ts
@@ -1,2 +1,6 @@
-declare var _default: "\nvarying vec2 vUvG;\nuniform sampler2D glyphMap;\nuniform vec2 unitRange;\n// functions from the original msdf repo:\n// https://github.com/Chlumsky/msdfgen#using-a-multi-channel-distance-field\nfloat median(float r, float g, float b) {\n\treturn max(min(r, g), min(max(r, g), b));\n}\nfloat screenPxRange() {\n\n\t// precomputed unitRange as recommended by Chlumsky\n\t// vec2 unitRange = vec2(pxRange)/vec2(textureSize(glyphMap, 0));\n\tvec2 screenTexSize = vec2(1.0)/fwidth(vUvG);\n\treturn max(0.5*dot(unitRange, screenTexSize), 1.0);\n}\nfloat tap(vec2 offsetUV) {\n\tvec3 msd = texture( glyphMap, offsetUV ).rgb;\n\tfloat sd = median(msd.r, msd.g, msd.b);\n\tfloat screenPxDistance = screenPxRange() * (sd - 0.5);\n\tfloat alpha = clamp(screenPxDistance + 0.5, 0.0, 1.0);\n\treturn alpha;\n}\n";
-export default _default;
+export default program;
+/**
+ *
+ * @type {string}
+ */
+declare const program: string;
diff --git a/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl.d.ts b/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl.d.ts
index 3eb0f79b..0e4b98a5 100644
--- a/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl.d.ts
+++ b/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl.d.ts
@@ -1,2 +1,6 @@
-declare var _default: "\nattribute vec2 uvG;\nvarying vec2 vUvG;\n";
-export default _default;
+export default program;
+/**
+ *
+ * @type {string}
+ */
+declare const program: string;
diff --git a/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl.d.ts b/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl.d.ts
index 700d8aaa..0e4b98a5 100644
--- a/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl.d.ts
+++ b/build/types/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl.d.ts
@@ -1,2 +1,6 @@
-declare var _default: "\nvUvG = uvG;\n";
-export default _default;
+export default program;
+/**
+ *
+ * @type {string}
+ */
+declare const program: string;
diff --git a/build/types/font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl.d.ts b/build/types/font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl.d.ts
index 66da036f..0e4b98a5 100644
--- a/build/types/font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl.d.ts
+++ b/build/types/font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl.d.ts
@@ -1,2 +1,6 @@
-declare var _default: "\ngl_Position.z -= 0.00001;\n";
-export default _default;
+export default program;
+/**
+ *
+ * @type {string}
+ */
+declare const program: string;
diff --git a/build/types/frame/Frame.d.ts b/build/types/frame/Frame.d.ts
index d3821359..5c3b6a2d 100644
--- a/build/types/frame/Frame.d.ts
+++ b/build/types/frame/Frame.d.ts
@@ -2,6 +2,11 @@
  * Returns a basic plane mesh.
  */
 export default class Frame extends Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]> {
-    constructor(material: any);
+    /**
+     *
+     * @param {MeshUIBaseElement} element
+     */
+    constructor(element: MeshUIBaseElement);
 }
 import { Mesh } from "three/src/objects/Mesh";
+import MeshUIBaseElement from "../core/elements/MeshUIBaseElement";
diff --git a/build/types/frame/renderers/ShaderChunk/frame-background.fragment.glsl.d.ts b/build/types/frame/renderers/ShaderChunk/frame-background.fragment.glsl.d.ts
index 9ad34d87..0e4b98a5 100644
--- a/build/types/frame/renderers/ShaderChunk/frame-background.fragment.glsl.d.ts
+++ b/build/types/frame/renderers/ShaderChunk/frame-background.fragment.glsl.d.ts
@@ -1,2 +1,6 @@
-declare var _default: "\n#ifdef USE_MAP\n\n\tvec4 textureSample = sampleTexture();\n\tdiffuseColor *= textureSample;\n\n#endif\n";
-export default _default;
+export default program;
+/**
+ *
+ * @type {string}
+ */
+declare const program: string;
diff --git a/build/types/frame/renderers/ShaderChunk/frame-background.pars.fragment.glsl.d.ts b/build/types/frame/renderers/ShaderChunk/frame-background.pars.fragment.glsl.d.ts
index 41f526ff..0e4b98a5 100644
--- a/build/types/frame/renderers/ShaderChunk/frame-background.pars.fragment.glsl.d.ts
+++ b/build/types/frame/renderers/ShaderChunk/frame-background.pars.fragment.glsl.d.ts
@@ -1,2 +1,6 @@
-declare var _default: "\n\n#ifdef USE_MAP\n\nvec4 sampleTexture() {\n\n\tvec2 uv = vUv;\n\n\t// default stretch\n\t#if BACKGROUND_MAPPING != 0\n\n\tfloat textureRatio = textureSize.x / textureSize.y;\n\tfloat panelRatio = frameSize.x / frameSize.y;\n\tfloat ratio = panelRatio / textureRatio;\n\tfloat ratio2 = textureRatio / panelRatio;\n\n\t\t// contain\n\t\t#if BACKGROUND_MAPPING == 1\n\t\tif ( textureRatio < panelRatio ) { // repeat on X\n\t\t\tfloat newX = uv.x * ratio;\n\t\t\tnewX += 0.5 - 0.5 * ratio;\n\t\t\tuv.x = newX;\n\t\t} else { // repeat on Y\n\t\t\tfloat newY = uv.y * ratio2;\n\t\t\tnewY += 0.5 - 0.5 * ratio2;\n\t\t\tuv.y = newY;\n\t\t}\n\t\t#else\n\t\t// cover\n\t\tif ( textureRatio < panelRatio ) { // stretch on Y\n\t\t\tfloat newY = uv.y * ratio2;\n\t\t\tnewY += 0.5 - 0.5 * ratio2;\n\t\t\tuv.y = newY;\n\t\t} else { // stretch on X\n\t\t\tfloat newX = uv.x * ratio;\n\t\t\tnewX += 0.5 - 0.5 * ratio;\n\t\t\tuv.x = newX;\n\t\t}\n\n\t\t#endif\n\n\t#endif\n\n\treturn texture2D( map, uv );\n\n}\n#endif\n";
-export default _default;
+export default program;
+/**
+ *
+ * @type {string}
+ */
+declare const program: string;
diff --git a/build/types/frame/renderers/ShaderChunk/frame-border.fragment.glsl.d.ts b/build/types/frame/renderers/ShaderChunk/frame-border.fragment.glsl.d.ts
index 80e4ded8..0e4b98a5 100644
--- a/build/types/frame/renderers/ShaderChunk/frame-border.fragment.glsl.d.ts
+++ b/build/types/frame/renderers/ShaderChunk/frame-border.fragment.glsl.d.ts
@@ -1,2 +1,6 @@
-declare var _default: "\n\nfloat edgeDist = getEdgeDist();\nfloat change = fwidth( edgeDist );\n\nfloat alpha = smoothstep( change, 0.0, edgeDist );\ndiffuseColor.a *= alpha;\n\n// if the length square is not zerp\nif( borderWidth.x * borderWidth.x + borderWidth.y * borderWidth.y + borderWidth.z * borderWidth.z + borderWidth.w * borderWidth.w  > 0.0 )\n{\n\n\tvec4 borderColor = vec4( borderColor, borderOpacity * alpha );\n\tfloat stp = smoothstep( edgeDist + change, edgeDist, borderWidth.x * -1.0 );\n\n\t// @TODO: Implement border width sequence : top,right,bottom,left\n\t// if( vUvB.x <= borderWidth.w || vUvB.x >= 1.0 - borderWidth.y || vUvB.y >= 1.0 - borderWidth.x || vUvB.y <= borderWidth.z )\n\t// {\n\n\t//\t// would be nicer with smoothstep\n\t//\tdiffuseColor.rgb = borderColor.rgb;\n\n\t//}\n\n\tdiffuseColor = mix( diffuseColor, borderColor, stp );\n\n}\n";
-export default _default;
+export default program;
+/**
+ *
+ * @type {string}
+ */
+declare const program: string;
diff --git a/build/types/frame/renderers/ShaderChunk/frame-border.pars.fragment.glsl.d.ts b/build/types/frame/renderers/ShaderChunk/frame-border.pars.fragment.glsl.d.ts
index b674b1f5..0e4b98a5 100644
--- a/build/types/frame/renderers/ShaderChunk/frame-border.pars.fragment.glsl.d.ts
+++ b/build/types/frame/renderers/ShaderChunk/frame-border.pars.fragment.glsl.d.ts
@@ -1,2 +1,6 @@
-declare var _default: "\n\n// borders sequences are : x:TOP, y:RIGHT, z:BOTTOM, w:LEFT\nuniform vec4 borderWidth;\nuniform vec3 borderColor;\nuniform float borderOpacity;\nuniform vec4 borderRadius;\n\nvarying vec2 vUvB;\n\n// Borders\nfloat getEdgeDist() {\n\n\t// This allows to go the uv position in a [-1, 1] referencial system\n\tvec2 ndc = vec2( vUvB.x * 2.0 - 1.0, vUvB.y * 2.0 - 1.0 );\n\n\t//\n\tvec2 planeSpaceCoord = vec2( frameSize.x * 0.5 * ndc.x, frameSize.y * 0.5 * ndc.y );\n\tvec2 corner = frameSize * 0.5;\n\tvec2 offsetCorner = corner - abs( planeSpaceCoord );\n\n\tfloat innerRadDist = min( offsetCorner.x, offsetCorner.y ) * -1.0;\n\n\tif (vUvB.x < 0.5 && vUvB.y >= 0.5) {\n\t\tfloat roundedDist = length( max( abs( planeSpaceCoord ) - frameSize * 0.5 + borderRadius.x, 0.0 ) ) - borderRadius.x;\n\t\tfloat s = step( innerRadDist * -1.0, borderRadius.x );\n\t\treturn mix( innerRadDist, roundedDist, s );\n\t}\n\tif (vUvB.x >= 0.5 && vUvB.y >= 0.5) {\n\t\tfloat roundedDist = length( max( abs( planeSpaceCoord ) - frameSize * 0.5 + borderRadius.y, 0.0 ) ) - borderRadius.y;\n\t\tfloat s = step( innerRadDist * -1.0, borderRadius.y );\n\t\treturn mix( innerRadDist, roundedDist, s );\n\t}\n\tif (vUvB.x >= 0.5 && vUvB.y < 0.5) {\n\t\tfloat roundedDist = length( max( abs( planeSpaceCoord ) - frameSize * 0.5 + borderRadius.z, 0.0 ) ) - borderRadius.z;\n\t\tfloat s = step( innerRadDist * -1.0, borderRadius.z );\n\t\treturn mix( innerRadDist, roundedDist, s );\n\t}\n\tif (vUvB.x < 0.5 && vUvB.y < 0.5) {\n\t\tfloat roundedDist = length( max( abs( planeSpaceCoord ) - frameSize * 0.5 + borderRadius.w, 0.0 ) ) - borderRadius.w;\n\t\tfloat s = step( innerRadDist * -1.0, borderRadius.w );\n\t\treturn mix( innerRadDist, roundedDist, s );\n\t}\n}\n\n";
-export default _default;
+export default program;
+/**
+ *
+ * @type {string}
+ */
+declare const program: string;
diff --git a/build/types/frame/renderers/ShaderChunk/frame-border.pars.vertex.glsl.d.ts b/build/types/frame/renderers/ShaderChunk/frame-border.pars.vertex.glsl.d.ts
index 7fba8812..0e4b98a5 100644
--- a/build/types/frame/renderers/ShaderChunk/frame-border.pars.vertex.glsl.d.ts
+++ b/build/types/frame/renderers/ShaderChunk/frame-border.pars.vertex.glsl.d.ts
@@ -1,2 +1,6 @@
-declare var _default: "\n\n// FrameBorder vertex pars\nattribute vec2 uvB;\nvarying vec2 vUvB;\n\n";
-export default _default;
+export default program;
+/**
+ *
+ * @type {string}
+ */
+declare const program: string;
diff --git a/build/types/frame/renderers/ShaderChunk/frame-border.vertex.glsl.d.ts b/build/types/frame/renderers/ShaderChunk/frame-border.vertex.glsl.d.ts
index 92f11599..0e4b98a5 100644
--- a/build/types/frame/renderers/ShaderChunk/frame-border.vertex.glsl.d.ts
+++ b/build/types/frame/renderers/ShaderChunk/frame-border.vertex.glsl.d.ts
@@ -1,2 +1,6 @@
-declare var _default: "\n\n\t// FrameBorder vertex shader\n\tvUvB = uvB;\n\n";
-export default _default;
+export default program;
+/**
+ *
+ * @type {string}
+ */
+declare const program: string;
diff --git a/build/types/frame/renderers/ShaderChunk/frame-common.pars.fragment.glsl.d.ts b/build/types/frame/renderers/ShaderChunk/frame-common.pars.fragment.glsl.d.ts
index 8551ae59..0e4b98a5 100644
--- a/build/types/frame/renderers/ShaderChunk/frame-common.pars.fragment.glsl.d.ts
+++ b/build/types/frame/renderers/ShaderChunk/frame-common.pars.fragment.glsl.d.ts
@@ -1,2 +1,6 @@
-declare var _default: "\n\n// To be removed - required for both border and background\nuniform vec2 frameSize;\nuniform vec2 textureSize;\n\n";
-export default _default;
+export default program;
+/**
+ *
+ * @type {string}
+ */
+declare const program: string;
diff --git a/build/types/renderers/shaders/ShaderChunkUI.d.ts b/build/types/renderers/shaders/ShaderChunkUI.d.ts
index 8aaf1144..0fc112be 100644
--- a/build/types/renderers/shaders/ShaderChunkUI.d.ts
+++ b/build/types/renderers/shaders/ShaderChunkUI.d.ts
@@ -1,17 +1,31 @@
 export namespace ShaderChunkUI {
-    export { msdfAlphaglyphParsVertexGlsl as msdf_alphaglyph_pars_vertex };
-    export { msdfAlphaglyphVertexGlsl as msdf_alphaglyph_vertex };
-    export { msdfOffsetglyphVertexGlsl as msdf_offset_vertex };
-    export { msdfAlphaglyphParsFragmentGlsl as msdf_alphaglyph_pars_fragment };
-    export { msdfAlphaglyphFragmentGlsl as msdf_alphaglyph_fragment };
-    export { frameBorderParsVertexGlsl as frame_border_pars_vertex };
-    export { frameBorderVertexGlsl as frame_border_vertex };
-    export { frameCommonParsFragmentGlsl as frame_common_pars };
-    export { frameBorderParsFragmentGlsl as frame_border_pars_fragment };
-    export { frameBorderFragmentGlsl as frame_border_fragment };
-    export { frameBackgroundParsFragmentGlsl as frame_background_pars_fragment };
-    export { frameBackgroundFragmentGlsl as frame_background_fragment };
+    export { msdfAlphaglyphParsVertexGlsl };
+    export { msdfAlphaglyphVertexGlsl };
+    export { msdfOffsetglyphVertexGlsl };
+    export { msdfAlphaglyphParsFragmentGlsl };
+    export { msdfAlphaglyphFragmentGlsl };
+    export { frameBorderParsVertexGlsl };
+    export { frameBorderVertexGlsl };
+    export { frameCommonParsFragmentGlsl };
+    export { frameBorderParsFragmentGlsl };
+    export { frameBorderFragmentGlsl };
+    export { frameBackgroundParsFragmentGlsl };
+    export { frameBackgroundFragmentGlsl };
 }
+export type ChunksUI = {
+
+
+
+
+
+
+
+
+
+
+
+
+};
 import msdfAlphaglyphParsVertexGlsl from "../../font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl";
 import msdfAlphaglyphVertexGlsl from "../../font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl";
 import msdfOffsetglyphVertexGlsl from "../../font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl";
diff --git a/build/types/three-mesh-ui.d.ts b/build/types/three-mesh-ui.d.ts
index 74e4ade2..94bf26a1 100644
--- a/build/types/three-mesh-ui.d.ts
+++ b/build/types/three-mesh-ui.d.ts
@@ -1,34 +1,33 @@
 export default ThreeMeshUI;
-import Block from "./components/Block.js";
-import Text from "./components/Text.js";
-import InlineBlock from "./components/InlineBlock.js";
-import Keyboard from "./components/Keyboard.js";
+import BlockElement from "./elements/basic/BlockElement";
+import TextElement from "./elements/basic/TextElement";
+import InlineElement from "./elements/basic/InlineElement";
+import InlineBlockElement from "./elements/basic/InlineBlockElement";
 import FontLibrary from "./font/FontLibrary.js";
-import * as FontStyle from "./utils/font/FontStyle";
-import * as FontWeight from "./utils/font/FontWeight";
 export function update(): void;
-import * as TextAlign from "./utils/inline-layout/TextAlign";
-import * as Whitespace from "./utils/inline-layout/Whitespace";
-import * as JustifyContent from "./utils/block-layout/JustifyContent";
-import * as AlignItems from "./utils/block-layout/AlignItems";
-import * as ContentDirection from "./utils/block-layout/ContentDirection";
 import { ShaderChunkUI } from "./renderers/shaders/ShaderChunkUI";
 import MSDFFontMaterialUtils from "./font/msdf/utils/MSDFFontMaterialUtils";
+import TypographicFont from "./font/TypographicFont";
+import TypographicGlyph from "./font/TypographicGlyph";
+import InlineGlyph from "./font/InlineGlyph";
+import MeshUIBaseElement from "./core/elements/MeshUIBaseElement";
+import * as DefaultValues from "./core/DefaultValues";
+import InheritableProperty from "./core/properties/InheritableProperty";
+import BaseProperty from "./core/properties/BaseProperty";
+import * as MaterialTransformers from "./utils/mediator/transformers/MaterialTransformers";
+import Behavior from "./utils/Behavior";
+import FontVariant from "./font/FontVariant";
 declare namespace ThreeMeshUI {
-    export { Block };
-    export { Text };
-    export { InlineBlock };
-    export { Keyboard };
+    export { BlockElement as Block };
+    export { TextElement as Text };
+    export { InlineElement as Inline };
+    export { InlineBlockElement as InlineBlock };
+    export { MeshUIBaseElement };
     export { FontLibrary };
-    export { FontStyle };
-    export { FontWeight };
     export { update };
-    export { TextAlign };
-    export { Whitespace };
-    export { JustifyContent };
-    export { AlignItems };
-    export { ContentDirection };
     export { MSDFFontMaterialUtils };
     export { ShaderChunkUI };
+    export { Behavior };
+    export { FontVariant };
 }
-export { Block, Text, InlineBlock, Keyboard, FontLibrary, FontStyle, FontWeight, TextAlign, Whitespace, JustifyContent, AlignItems, ContentDirection, ShaderChunkUI, MSDFFontMaterialUtils };
+export { BlockElement as Block, TextElement as Text, InlineElement as Inline, InlineBlockElement as InlineBlock, FontLibrary, ShaderChunkUI, MSDFFontMaterialUtils, TypographicFont, TypographicGlyph, InlineGlyph, MeshUIBaseElement, DefaultValues, InheritableProperty, BaseProperty, MaterialTransformers, Behavior, FontVariant };
diff --git a/build/types/utils/Behavior.d.ts b/build/types/utils/Behavior.d.ts
new file mode 100644
index 00000000..23f450b4
--- /dev/null
+++ b/build/types/utils/Behavior.d.ts
@@ -0,0 +1,31 @@
+export default class Behavior {
+    /**
+     *
+     * @param {MeshUIBaseElement} subject
+     */
+    constructor(subject: MeshUIBaseElement);
+    /**
+     *
+     * @type {MeshUIBaseElement}
+     * @protected
+     */
+
+    /**
+     * @abstract
+     */
+    attach(): void;
+    /**
+     * @abstract
+     * @returns {void}
+     */
+    act(): void;
+    /**
+     * @abstract
+     */
+    detach(): void;
+    /**
+     *
+     */
+    clear(): void;
+}
+import MeshUIBaseElement from "../core/elements/MeshUIBaseElement";
diff --git a/build/types/utils/Defaults.d.ts b/build/types/utils/Defaults.d.ts
deleted file mode 100644
index 775fbc50..00000000
--- a/build/types/utils/Defaults.d.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-declare namespace _default {
-    export const container: any;
-    export const fontFamily: any;
-    export const fontSize: number;
-    export const fontKerning: string;
-    export { fontStyle };
-    export { fontWeight };
-    export const bestFit: string;
-    export const offset: number;
-    export const interLine: number;
-    export const breakOn: string;
-    export { whiteSpace };
-    export { contentDirection };
-    export { alignItems };
-    export { justifyContent };
-    export const fontTexture: any;
-    export { textAlign };
-    export const fontColor: Color;
-    export const fontOpacity: number;
-    export const fontPXRange: number;
-    export const fontSupersampling: boolean;
-    export const borderRadius: Vector4;
-    export const borderWidth: Vector4;
-    export const borderColor: Color;
-    export const borderOpacity: number;
-    export const backgroundSize: string;
-    export const backgroundColor: Color;
-    export const backgroundWhiteColor: Color;
-    export const backgroundOpacity: number;
-    export const backgroundOpaqueOpacity: number;
-    export const backgroundTexture: any;
-    export const hiddenOverflow: boolean;
-    export const letterSpacing: number;
-}
-export default _default;
-import { NORMAL as fontStyle } from "./font/FontStyle";
-import { NORMAL as fontWeight } from "./font/FontWeight";
-import { PRE_LINE as whiteSpace } from "./inline-layout/Whitespace";
-import { COLUMN as contentDirection } from "./block-layout/ContentDirection";
-import { CENTER as alignItems } from "./block-layout/AlignItems";
-import { START as justifyContent } from "./block-layout/JustifyContent";
-import { CENTER as textAlign } from "./inline-layout/TextAlign";
-import { Color } from "three/src/math/Color";
-import { Vector4 } from "three/src/math/Vector4";
diff --git a/build/types/utils/Keymaps.d.ts b/build/types/utils/Keymaps.d.ts
deleted file mode 100644
index 8cc28e59..00000000
--- a/build/types/utils/Keymaps.d.ts
+++ /dev/null
@@ -1,227 +0,0 @@
-declare namespace _default {
-    const fr: (({
-        width: number;
-        command: string;
-        chars: {
-            icon: string;
-        }[];
-    } | {
-        width: number;
-        chars: {
-            lowerCase: string;
-            upperCase: string;
-        }[];
-        command?: undefined;
-    })[] | ({
-        width: number;
-        command: string;
-        chars: {
-            lowerCase: string;
-        }[];
-    } | {
-        width: number;
-        chars: {
-            lowerCase: string;
-        }[];
-        command?: undefined;
-    } | {
-        width: number;
-        command: string;
-        chars: {
-            icon: string;
-        }[];
-    })[])[][];
-    const eng: (({
-        width: number;
-        command: string;
-        chars: {
-            icon: string;
-        }[];
-    } | {
-        width: number;
-        chars: {
-            lowerCase: string;
-            upperCase: string;
-        }[];
-        command?: undefined;
-    })[] | ({
-        width: number;
-        command: string;
-        chars: {
-            lowerCase: string;
-        }[];
-    } | {
-        width: number;
-        chars: {
-            lowerCase: string;
-        }[];
-        command?: undefined;
-    } | {
-        width: number;
-        command: string;
-        chars: {
-            icon: string;
-        }[];
-    })[])[][];
-    const ru: (({
-        width: number;
-        command: string;
-        chars: {
-            icon: string;
-        }[];
-    } | {
-        width: number;
-        chars: {
-            lowerCase: string;
-            upperCase: string;
-        }[];
-        command?: undefined;
-    })[] | ({
-        width: number;
-        command: string;
-        chars: {
-            lowerCase: string;
-        }[];
-    } | {
-        width: number;
-        command: string;
-        chars: {
-            icon: string;
-        }[];
-    } | {
-        width: number;
-        chars: {
-            lowerCase: string;
-        }[];
-        command?: undefined;
-    })[])[][];
-    const de: (({
-        width: number;
-        command: string;
-        chars: {
-            icon: string;
-        }[];
-    } | {
-        width: number;
-        chars: {
-            lowerCase: string;
-            upperCase: string;
-        }[];
-        command?: undefined;
-    })[] | ({
-        width: number;
-        command: string;
-        chars: {
-            lowerCase: string;
-        }[];
-    } | {
-        width: number;
-        chars: {
-            lowerCase: string;
-        }[];
-        command?: undefined;
-    } | {
-        width: number;
-        command: string;
-        chars: {
-            icon: string;
-        }[];
-    })[])[][];
-    const es: (({
-        width: number;
-        command: string;
-        chars: {
-            icon: string;
-        }[];
-    } | {
-        width: number;
-        chars: {
-            lowerCase: string;
-            upperCase: string;
-        }[];
-        command?: undefined;
-    })[] | ({
-        width: number;
-        command: string;
-        chars: {
-            lowerCase: string;
-        }[];
-    } | {
-        width: number;
-        chars: {
-            lowerCase: string;
-        }[];
-        command?: undefined;
-    } | {
-        width: number;
-        command: string;
-        chars: {
-            icon: string;
-        }[];
-    })[])[][];
-    const el: (({
-        width: number;
-        command: string;
-        chars: {
-            icon: string;
-        }[];
-    } | {
-        width: number;
-        chars: {
-            lowerCase: string;
-            upperCase: string;
-        }[];
-        command?: undefined;
-    })[] | ({
-        width: number;
-        command: string;
-        chars: {
-            lowerCase: string;
-        }[];
-    } | {
-        width: number;
-        command: string;
-        chars: {
-            icon: string;
-        }[];
-    } | {
-        width: number;
-        chars: {
-            lowerCase: string;
-        }[];
-        command?: undefined;
-    })[])[][];
-    const nord: (({
-        width: number;
-        command: string;
-        chars: {
-            icon: string;
-        }[];
-    } | {
-        width: number;
-        chars: {
-            lowerCase: string;
-            upperCase: string;
-        }[];
-        command?: undefined;
-    })[] | ({
-        width: number;
-        command: string;
-        chars: {
-            lowerCase: string;
-        }[];
-    } | {
-        width: number;
-        chars: {
-            lowerCase: string;
-        }[];
-        command?: undefined;
-    } | {
-        width: number;
-        command: string;
-        chars: {
-            icon: string;
-        }[];
-    })[])[][];
-}
-export default _default;
diff --git a/build/types/utils/NumberUtils.d.ts b/build/types/utils/NumberUtils.d.ts
new file mode 100644
index 00000000..42db585f
--- /dev/null
+++ b/build/types/utils/NumberUtils.d.ts
@@ -0,0 +1,2 @@
+export function numberEquals(numA: any, numB: any, precision?: number): boolean;
+export function numberPrecise(unprecisedNumber: any, precision?: number): number;
diff --git a/build/types/utils/Units.d.ts b/build/types/utils/Units.d.ts
new file mode 100644
index 00000000..9602f21d
--- /dev/null
+++ b/build/types/utils/Units.d.ts
@@ -0,0 +1,7 @@
+
+export const CENTIMETERS: "cm";
+export const MILLIMETERS: "mm";
+export const INCHES: "in";
+export const UV: "em";
+export const PERCENT: "%";
+export function validateUnits(requestedUnits: string): string;
diff --git a/build/types/utils/block-layout/AlignItems.d.ts b/build/types/utils/block-layout/AlignItems.d.ts
deleted file mode 100644
index 636ad100..00000000
--- a/build/types/utils/block-layout/AlignItems.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export function alignItems(boxComponent: any, DIRECTION: any): void;
-/**
- * @deprecated
- * // @TODO: Be remove upon 7.x.x
- * @param alignment
- */
-export function warnAboutDeprecatedAlignItems(alignment: any): void;
-export const START: "start";
-export const CENTER: "center";
-export const END: "end";
-export const STRETCH: "stretch";
diff --git a/build/types/utils/block-layout/ContentDirection.d.ts b/build/types/utils/block-layout/ContentDirection.d.ts
deleted file mode 100644
index 090f920d..00000000
--- a/build/types/utils/block-layout/ContentDirection.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export function contentDirection(container: any, DIRECTION: any, startPos: any, REVERSE: any): void;
-export const ROW: "row";
-export const ROW_REVERSE: "row-reverse";
-export const COLUMN: "column";
-export const COLUMN_REVERSE: "column-reverse";
diff --git a/build/types/utils/block-layout/JustifyContent.d.ts b/build/types/utils/block-layout/JustifyContent.d.ts
deleted file mode 100644
index 2eef2f67..00000000
--- a/build/types/utils/block-layout/JustifyContent.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function justifyContent(boxComponent: any, direction: any, startPos: any, REVERSE: any): void;
-export const START: "start";
-export const CENTER: "center";
-export const END: "end";
-export const SPACE_AROUND: "space-around";
-export const SPACE_BETWEEN: "space-between";
-export const SPACE_EVENLY: "space-evenly";
diff --git a/build/types/utils/font/FontStyle.d.ts b/build/types/utils/font/FontStyle.d.ts
deleted file mode 100644
index ab3a0bf6..00000000
--- a/build/types/utils/font/FontStyle.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Get the oblique style with custom angle
- * @param angleInDegree
- */
-export function obliqueCustomAngle(angleInDegree: any): string;
-export const NORMAL: "normal";
-export const ITALIC: "italic";
-export const OBLIQUE: "oblique";
diff --git a/build/types/utils/font/FontWeight.d.ts b/build/types/utils/font/FontWeight.d.ts
deleted file mode 100644
index 23e2a336..00000000
--- a/build/types/utils/font/FontWeight.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const LIGHTER: "100";
-export const _100: "100";
-export const _200: "200";
-export const _300: "300";
-export const NORMAL: "400";
-export const _400: "400";
-export const _500: "500";
-export const _600: "600";
-export const BOLD: "700";
-export const _700: "700";
-export const _800: "800";
-export const BOLDER: "900";
-export const _900: "900";
diff --git a/build/types/utils/inline-layout/InlineJustification.d.ts b/build/types/utils/inline-layout/InlineJustification.d.ts
deleted file mode 100644
index 7b83c44e..00000000
--- a/build/types/utils/inline-layout/InlineJustification.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function justifyInlines(lines: any, JUSTIFICATION: any, INNER_HEIGHT: any): void;
diff --git a/build/types/utils/inline-layout/TextAlign.d.ts b/build/types/utils/inline-layout/TextAlign.d.ts
deleted file mode 100644
index 4b8a1acf..00000000
--- a/build/types/utils/inline-layout/TextAlign.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- *
- * @param {Array.<Array.<InlineGlyph>>} lines
- * @param ALIGNMENT
- * @param INNER_WIDTH
- */
-export function textAlign(lines: Array<Array<InlineGlyph>>, ALIGNMENT: any, INNER_WIDTH: any): void;
-export const LEFT: "left";
-export const RIGHT: "right";
-export const CENTER: "center";
-export const JUSTIFY: "justify";
-export const JUSTIFY_LEFT: "justify-left";
-export const JUSTIFY_RIGHT: "justify-right";
-export const JUSTIFY_CENTER: "justify-center";
-import InlineGlyph from "../../font/InlineGlyph";
diff --git a/build/types/utils/inline-layout/Whitespace.d.ts b/build/types/utils/inline-layout/Whitespace.d.ts
deleted file mode 100644
index d79a1715..00000000
--- a/build/types/utils/inline-layout/Whitespace.d.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Check the validity of a whitespace
- * @param value
- * @returns {string}
- */
-export function isValid(value: any): string;
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace#whitespace_helper_functions
- *
- * Throughout, whitespace is defined as one of the characters
- *  "\t" TAB \u0009
- *  "\n" LF  \u000A
- *  "\r" CR  \u000D
- *  " "  SPC \u0020
- *
- * This does not use Javascript's "\s" because that includes non-breaking
- * spaces (and also some other characters).
- **/
-export const WHITE_CHARS: {
-    '\t': string;
-    '\n': string;
-    '\r': string;
-    ' ': string;
-};
-export const NORMAL: "normal";
-export const NOWRAP: "nowrap";
-export const PRE: "pre";
-export const PRE_LINE: "pre-line";
-export const PRE_WRAP: "pre-wrap";
-export function collapseWhitespaceOnString(textContent: any, whiteSpace: any): any;
-export function newlineBreakability(whiteSpace: any): string | null;
-export function shouldBreak(inlines: any, i: any, lastInlineOffset: any, options: any): boolean;
-export function collapseWhitespaceOnInlines(line: any, whiteSpace: ('normal' | 'pre-wrap' | 'pre-line')): any;
diff --git a/build/types/utils/mediator/Mediator.d.ts b/build/types/utils/mediator/Mediator.d.ts
index 0efc438a..bf007d76 100644
--- a/build/types/utils/mediator/Mediator.d.ts
+++ b/build/types/utils/mediator/Mediator.d.ts
@@ -16,7 +16,7 @@ export default class Mediator {
      * @param {MeshUIComponent} subject
      * @param {any} target
      * @param {Object.<(string|number), any>} options
-     * @param {Object.<{subjectProperty:string, trans?:(target:any, targetProperty:string, value:any) => void}>} mediationDefinitions
+     * @param {Object.<{subjectProperty:string, t?:(target:any, targetProperty:string, value:any) => void}>} mediationDefinitions
      * @param {any} [secondTarget=null]
      */
     static mediate(subject: MeshUIComponent, target: any, options: any, mediationDefinitions: any, secondTarget?: any): void;
@@ -30,7 +30,7 @@ export default class Mediator {
      * @type {MediationDefinition}
      * @private
      */
-    private _definition;
+
     /**
      *
      * @param {MediationDefinition} value
@@ -38,15 +38,16 @@ export default class Mediator {
     set definition(arg: any);
     /**
      *
-     * @param {MeshUIComponent} subject
+     * @param {MeshUIBaseElement} subject
      * @param {any} target
      * @param {Object.<(string|number), any>} options
      * @param {any} [secondTarget=null]
      */
-    mediate(subject: MeshUIComponent, target: any, options: any, secondTarget?: any): void;
+    mediate(subject: MeshUIBaseElement, target: any, options: any, secondTarget?: any): void;
 }
 /**
  * An option function to transform value from subject to target
  */
 export type MediationTransformer = (target: any, targetProperty: string, value: any) => void;
 export type MediationDefinition = any;
+import MeshUIBaseElement from "../../core/elements/MeshUIBaseElement";
diff --git a/build/types/utils/mediator/transformers/CommonTransformers.d.ts b/build/types/utils/mediator/transformers/CommonTransformers.d.ts
index 71e1b166..86c37317 100644
--- a/build/types/utils/mediator/transformers/CommonTransformers.d.ts
+++ b/build/types/utils/mediator/transformers/CommonTransformers.d.ts
@@ -3,3 +3,4 @@
  * @type {import('../Mediator').MediationTransformer}
  */
 export const directTransfer: import('../Mediator').MediationTransformer;
+export function directTransferNotNull(target: any, targetProperty: any, value: any): void;
diff --git a/build/types/utils/mediator/transformers/MaterialTransformers.d.ts b/build/types/utils/mediator/transformers/MaterialTransformers.d.ts
index 59724ad4..c209f991 100644
--- a/build/types/utils/mediator/transformers/MaterialTransformers.d.ts
+++ b/build/types/utils/mediator/transformers/MaterialTransformers.d.ts
@@ -15,6 +15,8 @@ export const toPreprocessorTriggerTransformer: import('../Mediator').MediationTr
 export const asPreprocessorValueTransformer: import('../Mediator').MediationTransformer;
 /**
  * Transform a value as a uniform or userData value
+ * Non primitive values are bounds
  * @type {import('../Mediator').MediationTransformer}
  */
 export const uniformOrUserDataTransformer: import('../Mediator').MediationTransformer;
+export function toUserDataTransformer(material: any, property: any, value: any): void;
diff --git a/build/types/utils/mix.d.ts b/build/types/utils/mix.d.ts
deleted file mode 100644
index 6df98ef2..00000000
--- a/build/types/utils/mix.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * A function for applying multiple mixins more tersely (less verbose)
- * @param {Function[]} mixins - All args to this function should be mixins that take a class and return a class.
- */
-export function mix(...mixins: Function[]): any;
-export namespace mix {
-    function withBase(Base: any): typeof mix;
-}
diff --git a/config/scripts/tsc-strip-internals.js b/config/scripts/tsc-strip-internals.js
new file mode 100644
index 00000000..ed563f6f
--- /dev/null
+++ b/config/scripts/tsc-strip-internals.js
@@ -0,0 +1,17 @@
+
+const glob = require('glob');
+const fs = require('fs');
+
+const regex = /^.*_.*$/gm;
+
+console.log( __dirname );
+const declarations = glob.sync( './build/types/**/*.d.ts' );
+
+console.log( declarations );
+
+for ( const declarationFile of declarations ) {
+
+	const rawContent = fs.readFileSync( declarationFile, 'utf-8' );
+	fs.writeFileSync( declarationFile, rawContent.replace(regex,'') );
+
+}
diff --git a/examples/_html/index.html b/examples/_html/index.html
index 0f197027..ad8c23b0 100644
--- a/examples/_html/index.html
+++ b/examples/_html/index.html
@@ -68,6 +68,9 @@
 			background-color: var(--dark-colour);
 			color: #ffffff;
 		}
+		li.selected-view sup {
+			color: #ffffff;
+		}
 
 		ul {
 			margin-top: 10px;
diff --git a/examples/_setup/CameraOrthographic.js b/examples/_setup/CameraOrthographic.js
new file mode 100644
index 00000000..b807ad73
--- /dev/null
+++ b/examples/_setup/CameraOrthographic.js
@@ -0,0 +1,35 @@
+import { OrthographicCamera } from 'three';
+
+let camera;
+
+export const exampleCameraOrthographic = function () {
+
+	const WIDTH = window.innerWidth;
+	const HEIGHT = window.innerHeight;
+
+	// use of orthgraphic camera to increase matching
+	camera = new OrthographicCamera( WIDTH / -2, WIDTH / 2, HEIGHT / 2, HEIGHT / -2, 1, 1000 );
+	camera.position.set( 0, 0, 0 );
+
+	camera.zoom = 400;
+	camera.updateProjectionMatrix();
+
+	window.camera = camera;
+
+	return {camera};
+
+}
+
+export const exampleCameraOrthographicResize = function () {
+
+	const W = window.innerWidth;
+	const H = window.innerHeight;
+
+	camera.left = W / -2;
+	camera.right = W / 2;
+	camera.top = H / 2;
+	camera.bottom = -H / 2;
+
+	camera.updateProjectionMatrix();
+
+}
diff --git a/examples/_setup/CameraPerspective.js b/examples/_setup/CameraPerspective.js
new file mode 100644
index 00000000..14ffa3e2
--- /dev/null
+++ b/examples/_setup/CameraPerspective.js
@@ -0,0 +1,19 @@
+import { PerspectiveCamera } from 'three';
+
+let camera;
+
+export const exampleCameraPerspective = function () {
+
+	camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
+	camera.position.set( 0, 1.6, 1.5 );
+
+	return {camera};
+
+}
+
+export const exampleCameraPerspectiveResize = function () {
+
+	camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+
+}
diff --git a/examples/_setup/Html.js b/examples/_setup/Html.js
new file mode 100644
index 00000000..978144e8
--- /dev/null
+++ b/examples/_setup/Html.js
@@ -0,0 +1,15 @@
+/**
+ *
+ * @param {string} cssContent
+ * @param {string} [media="three-mesh-ui"]
+ * @internal
+ */
+export function _injectCSS( cssContent, media = 'three-mesh-ui' ){
+
+	const style = document.createElement('style');
+	style.setAttribute('media',media);
+	style.textContent = cssContent;
+
+	document.head.appendChild( style );
+
+}
diff --git a/examples/_setup/RobotoFont.js b/examples/_setup/RobotoFont.js
index 8db763b4..db33b4f0 100644
--- a/examples/_setup/RobotoFont.js
+++ b/examples/_setup/RobotoFont.js
@@ -1,14 +1,12 @@
 import { FontLibrary } from 'three-mesh-ui';
-import * as FontWeight from '../../src/utils/font/FontWeight';
-import * as FontStyle from '../../src/utils/font/FontStyle';
 import ROBOTO_ADJUSTMENT from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/adjustment';
 
 export const ROBOTO_FAMILY = "Roboto";
 
-export const exampleFontRegister = function ( weight = FontWeight.NORMAL, style = FontStyle.NORMAL ) {
+export const exampleFontRegister = function ( weight = '400', style = 'normal' ) {
 
 	let filename = 'regular';
-	if( weight !== FontWeight.NORMAL || style !== FontStyle.NORMAL ){
+	if( weight !== '400' || style !== 'normal' ){
 
 		switch ( weight+style ){
 			case "400italic":
@@ -36,25 +34,16 @@ export const exampleFontRegister = function ( weight = FontWeight.NORMAL, style
 
 }
 
-export const exampleFontPreloadAll = function ( callback ) {
+export const exampleFontPreloadRoboto = function ( callback ) {
 
 	FontLibrary.prepare(
 
-		FontLibrary
-			.addFontFamily(ROBOTO_FAMILY)
-			.addVariant(FontWeight.NORMAL, FontStyle.NORMAL, "./assets/fonts/msdf/roboto/regular.json", "./assets/fonts/msdf/roboto/regular.png" )
-			.addVariant(FontWeight.BOLD, FontStyle.ITALIC, "./assets/fonts/msdf/roboto/bold-italic.json", "./assets/fonts/msdf/roboto/bold-italic.png" )
-			.addVariant(FontWeight.BOLD, FontStyle.NORMAL, "./assets/fonts/msdf/roboto/bold.json", "./assets/fonts/msdf/roboto/bold.png" )
-			.addVariant(FontWeight.NORMAL, FontStyle.ITALIC, "./assets/fonts/msdf/roboto/italic.json", "./assets/fonts/msdf/roboto/italic.png" )
+		registerRobotoAndVariants(),
 
 	).then( () => {
 
 		// Adjusting font variants to correct some glitchs
-		const FF = FontLibrary.getFontFamily(ROBOTO_FAMILY);
-		FF.getVariant('700','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
-		FF.getVariant('700','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
-		FF.getVariant('400','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
-		FF.getVariant('400','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+		adjustRobotoAndVariants();
 
 		callback();
 
@@ -63,3 +52,24 @@ export const exampleFontPreloadAll = function ( callback ) {
 	return FontLibrary.getFontFamily( ROBOTO_FAMILY );
 
 }
+
+export const registerRobotoAndVariants = function() {
+
+	return FontLibrary
+		.addFontFamily(ROBOTO_FAMILY)
+		.addVariant("normal", "normal", "./assets/fonts/msdf/roboto/regular.json", "./assets/fonts/msdf/roboto/regular.png" )
+		.addVariant("bold", "italic", "./assets/fonts/msdf/roboto/bold-italic.json", "./assets/fonts/msdf/roboto/bold-italic.png" )
+		.addVariant("bold", "normal", "./assets/fonts/msdf/roboto/bold.json", "./assets/fonts/msdf/roboto/bold.png" )
+		.addVariant("normal", "italic", "./assets/fonts/msdf/roboto/italic.json", "./assets/fonts/msdf/roboto/italic.png" )
+
+}
+
+export const adjustRobotoAndVariants = function () {
+
+	const FF = FontLibrary.getFontFamily(ROBOTO_FAMILY);
+	FF.getVariant('bold','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	FF.getVariant('bold','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	FF.getVariant('normal','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	FF.getVariant('normal','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+
+}
diff --git a/examples/_setup/RoomVR.js b/examples/_setup/RoomVR.js
new file mode 100644
index 00000000..d54bf054
--- /dev/null
+++ b/examples/_setup/RoomVR.js
@@ -0,0 +1,17 @@
+import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
+import { LineBasicMaterial, LineSegments } from 'three';
+
+let roomVR;
+
+export const exampleRoomVR = function ( scene ) {
+
+	roomVR = new LineSegments(
+		new BoxLineGeometry( 6, 6, 6, 12, 12, 12 ).translate( 0, 3, 0 ),
+		new LineBasicMaterial( { color: 0x808080 } )
+	);
+
+	scene.add( roomVR );
+
+	return {roomVR};
+
+}
diff --git a/examples/_setup/RulersVR.js b/examples/_setup/RulersVR.js
new file mode 100644
index 00000000..14104d07
--- /dev/null
+++ b/examples/_setup/RulersVR.js
@@ -0,0 +1,24 @@
+import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
+import { LineBasicMaterial, LineSegments } from 'three';
+
+let ruler,rulerHalf;
+
+export const exampleRulers = function ( scene ) {
+
+	// ROOM
+	ruler = new LineSegments(
+		new BoxLineGeometry( 6, 6, 6, 60, 60, 60 ).translate( 0, 0, 0.01 ),
+		new LineBasicMaterial( { color: 0xdd99dd, transparent:true, opacity: 0.5 } )
+	);
+
+	rulerHalf = new LineSegments(
+		new BoxLineGeometry( 6, 6, 6, 12, 12, 12 ).translate( 0, 0, 0.01 ),
+		new LineBasicMaterial( { linewidth:1, color: 0xffffff, transparent:true, opacity:0.5} )
+	);
+
+	scene.add( ruler );
+	scene.add( rulerHalf );
+
+	return {ruler, rulerHalf};
+
+}
diff --git a/examples/_setup/ThreeSetup.js b/examples/_setup/ThreeSetup.js
index 5e7981d7..2885ecba 100644
--- a/examples/_setup/ThreeSetup.js
+++ b/examples/_setup/ThreeSetup.js
@@ -1,17 +1,19 @@
-
 import Stats from 'three/examples/jsm/libs/stats.module';
-import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
 import * as ThreeMeshUI from 'three-mesh-ui';
-import { Color, LineBasicMaterial, LineSegments, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from 'three';
+import { Color, Scene, Vector3, WebGLRenderer } from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
 
 const _updater = [];
+const _resizer = [];
+
+let scene, renderer, controls, stats;
+let _camera;
 
-let scene, camera, renderer, controls, stats, room;
+export const exampleThreeSetup = function ( camera ) {
 
-export const exampleThreeSetup = function () {
+	_camera = camera;
 
 	const WIDTH = window.innerWidth;
 	const HEIGHT = window.innerHeight;
@@ -19,8 +21,6 @@ export const exampleThreeSetup = function () {
 	scene = new Scene();
 	scene.background = new Color( 0x505050 );
 
-	camera = new PerspectiveCamera( 60, WIDTH / HEIGHT, 0.1, 100 );
-
 	renderer = new WebGLRenderer({
 		antialias: true
 	});
@@ -35,34 +35,50 @@ export const exampleThreeSetup = function () {
 	document.body.appendChild( stats.dom );
 
 	controls = new OrbitControls( camera, renderer.domElement );
-	camera.position.set( 0, 1.6, 1.5 );
 	controls.target = new Vector3( 0, 1, -1.8 );
 	controls.update();
 
-	// ROOM
+	controls.addEventListener( 'change', ()=>{
+		exampleRender();
+	} );
+
+	window.addEventListener('resize', onWindowResize );
 
-	room = new LineSegments(
-		new BoxLineGeometry( 6, 6, 6, 32, 32, 32 ).translate( 0, 3, 0 ),
-		new LineBasicMaterial( { color: 0x808080 } )
-	);
+	renderer.setAnimationLoop( exampleRender );
 
-	scene.add( room );
+	return {scene, renderer, controls, stats};
 
-	window.addEventListener('resize', onWindowResize );
+}
 
-	renderer.setAnimationLoop( loop );
+export const controlsUpdate = function() {
 
-	return {scene, camera, renderer, controls, stats, room};
+	controls.update();
+	requestAnimationFrame( controlsUpdate );
 
 }
 
+
 export const exampleAddUpdate = function ( fct ) {
 
 	_updater.push( fct );
 
 }
 
-function loop(){
+export const exampleManualRender = function () {
+
+	requestAnimationFrame( exampleRender );
+
+}
+
+export const exampleManualRenderThreeOnly = function( ) {
+
+	renderer.render( scene, _camera );
+
+}
+
+export const exampleRender = function (){
+
+	// console.log( "RENDER ---------------------------------- ");
 
 	for ( let i = 0; i < _updater.length; i++ ) {
 		_updater[ i ]();
@@ -73,15 +89,31 @@ function loop(){
 	// to improve performance
 	ThreeMeshUI.update();
 
-	controls.update();
-	renderer.render( scene, camera );
+	// controls.update();
+	renderer.render( scene, _camera );
 	stats.update()
 
 }
 
+export const exampleNoRenderLoop = function () {
+	renderer.setAnimationLoop( ()=>{ } );
+}
+
+export const exampleAddResizer = function ( fct ) {
+
+	_resizer.push( fct );
+
+}
+
 // handles resizing the renderer when the viewport is resized
 function onWindowResize() {
-	camera.aspect = window.innerWidth / window.innerHeight;
-	camera.updateProjectionMatrix();
+
 	renderer.setSize( window.innerWidth, window.innerHeight );
+
+	for ( let i = 0; i < _resizer.length; i++ ) {
+		_resizer[ i ]();
+	}
+
 }
+
+
diff --git a/examples/_setup/gui/controllers/CustomController.js b/examples/_setup/gui/controllers/CustomController.js
new file mode 100644
index 00000000..34ec06cb
--- /dev/null
+++ b/examples/_setup/gui/controllers/CustomController.js
@@ -0,0 +1,181 @@
+import { Controller, GUI } from 'lil-gui'
+
+/**
+ * Extend this class to define a custom controller.
+ * @template T
+ */
+export default class CustomController extends Controller {
+
+	/**
+	 * Register a custom controller. Adds its method to the GUI and inject its
+	 * stylesheet into the page.
+	 * @param {Function} CustomClass
+	 */
+	static register( CustomClass ) {
+
+		_injectStyles( CustomClass.$style );
+
+		GUI.prototype[ 'add' + CustomClass.$id ] = function() {
+			return new CustomClass( this, ...arguments );
+		};
+
+	}
+
+	constructor( parent, object, property, ...args ) {
+
+		super( parent, object, property, 'custom' );
+
+		// Used to scope styles to this controller
+		this.domElement.classList.add( this.constructor.$id );
+
+		this.$constructor( ...args );
+
+		// Used for reset().
+		this._initialValue = this.save();
+
+		// Elements that need the "disable" attribute are collected here.
+		this._toDisable = [];
+
+		// Makes form elements disable-able and gives them aria labels.
+		this._prepareFormElements();
+
+		this.updateDisplay();
+
+	}
+
+	/**
+	 * The value targeted by this controller.
+	 * @returns {T}
+	 */
+	get $value() {
+		return this.getValue();
+	}
+
+	/**
+	 * Assigning this property will update the display and fire change events.
+	 */
+	set $value( value ) {
+		this.setValue( value );
+	}
+
+	/**
+	 * Called on controller creation. Receives all the parameters after
+	 * gui.addXXX( object, property, ...
+	 * @param {...any} args
+	 */
+	// eslint-disable-next-line no-unused-vars
+	$constructor( ...args ) {}
+
+	/**
+	 * Should update the controller's widget to reflect the current value.
+	 */
+	$updateDisplay() {}
+
+	/**
+	 * Should return a copy of `this.$value`. You don't need to implement this method
+	 * if you're targeting primitive values.
+	 * @returns {T}
+	 */
+	$save() {
+		return this.getValue();
+	}
+
+	/**
+	 * Should copy all relevant properties from `target` to `this.$value`. You don't
+	 * need to implement this method if you're targeting primitive values.
+	 * @param {T} source
+	 */
+	$load( source ) {
+		this.setValue( source );
+	}
+
+	/**
+	 * Call this method after modifying a property of `this.$value`.
+	 */
+	$onChange() {
+		this._callOnChange();
+		this.updateDisplay();
+	}
+
+	/**
+	 * Call this method after your controller loses focus.
+	 */
+	$onFinishChange() {
+		this._callOnFinishChange();
+	}
+
+	_prepareFormElements() {
+
+		const SELECTORS = [
+			'*[tabindex]',
+			'input',
+			'label',
+			'select',
+			'textarea',
+			'button',
+			'fieldset',
+			'legend',
+			'datalist',
+			'output',
+			'option',
+			'optgroup'
+		];
+
+		const elements = this.$widget.querySelectorAll( SELECTORS.join( ',' ) );
+
+		Array.from( elements ).forEach( el => {
+
+			this._toDisable.push( el );
+
+			if ( !el.hasAttribute( 'aria-label' ) && !el.hasAttribute( 'aria-labelledby' ) ) {
+				el.setAttribute( 'aria-labelledby', this.$name.id );
+			}
+
+		} );
+
+	}
+
+	disable( disabled ) {
+		super.disable( disabled );
+		this._toDisable.forEach( el => el.toggleAttribute( 'disabled', disabled ) );
+		return this;
+	}
+
+	updateDisplay() {
+		this.$updateDisplay();
+		return this;
+	}
+
+	save() {
+		return this.$save();
+	}
+
+	load( saved ) {
+		this.$load( saved );
+		this.$onChange();
+		this.$onFinishChange();
+		return this;
+	}
+
+	reset() {
+		return this.load( this._initialValue );
+	}
+
+}
+
+/**
+ * Pasted from lil-gui module
+ *
+ * @param cssContent
+ * @private
+ */
+function _injectStyles( cssContent ) {
+	const injected = document.createElement( 'style' );
+	injected.innerHTML = cssContent;
+	const before = document.querySelector( 'head link[rel=stylesheet], head style' );
+	if ( before ) {
+		document.head.insertBefore( injected, before );
+	} else {
+		document.head.appendChild( injected );
+	}
+}
diff --git a/examples/_setup/gui/controllers/D4Controller.js b/examples/_setup/gui/controllers/D4Controller.js
new file mode 100644
index 00000000..ec1edd89
--- /dev/null
+++ b/examples/_setup/gui/controllers/D4Controller.js
@@ -0,0 +1,265 @@
+import CustomController from 'three-mesh-ui/examples/_setup/gui/controllers/CustomController';
+import { NumberController } from 'lil-gui';
+
+export default class D4Controller extends CustomController {
+
+	// $constructor is called on creation.
+	// It receives all the parameters after gui.addMultiline( object, property, ... )
+	$constructor( min , max, step, mode = '1D' ) {
+
+		this._min = min;
+		this._max = max;
+		this._step = step;
+
+
+		this._mode = mode;
+		this.$modeSelector = this._buildSelector();
+
+		this.$widget.appendChild( this.$modeSelector );
+
+		this.$fullWidget = document.createElement('div');
+		this.$fullWidget.classList.add('widget--full');
+
+		this.domElement.appendChild(this.$fullWidget );
+		this.domElement.classList.add( 'number', 'hasSlider' );
+
+		//create subwidgets :
+		this._bindedOnChange = this._callOnChange.bind( this );
+		this.$widget4D = this._buildWidget4D();
+		this.$fullWidget.appendChild( this.$widget4D );
+
+
+		this.$setWidgetsMode();
+
+	}
+
+	$setWidgetsMode () {
+
+		switch ( this._mode ) {
+			case '1D':
+				this._y.disable(true);
+				this._z.disable(true);
+				this._w.disable(true);
+				break;
+
+			case '2D':
+				this._y.enable(true);
+				this._z.disable(true);
+				this._w.disable(true);
+				break;
+
+			case '4D':
+			default:
+				this._y.enable(true);
+				this._z.enable(true);
+				this._w.enable(true);
+		}
+
+
+	}
+
+	// $updateDisplay should update the controller to reflect the current value.
+	$updateDisplay() {
+		// this.textarea.value = this.$value;
+	}
+
+	_buildSelector() {
+
+		const selectorContainer = document.createElement('div');
+		selectorContainer.classList.add('mode-selector');
+
+		const options = ['1D','2D','4D'];
+		for ( let i = 0; i < options.length; i++ ) {
+			const option = options[ i ];
+
+			const id = this.$name.id+'-mode--'+option;
+
+			const input = document.createElement('input');
+			input.type = 'radio';
+			input.name = this.$name.id+'-mode';
+			input.value = option;
+
+			if( option === this._mode ) {
+				input.checked = true;
+			}
+
+			input.setAttribute('id', id);
+
+			const label = document.createElement('label');
+			label.textContent = option;
+			label.setAttribute('for', id );
+
+			const inputContainer = document.createElement('div');
+			inputContainer.classList.add('form-item');
+
+			inputContainer.appendChild( input);
+			inputContainer.appendChild( label );
+
+			selectorContainer.appendChild( inputContainer );
+
+			input.addEventListener('change', () => {
+				this._mode = input.value;
+				this.$setWidgetsMode();
+			} );
+		}
+
+		return selectorContainer;
+
+	}
+
+	_buildWidget4D(){
+
+
+		const subObject = this.object[this.property];
+		const widgetContainer = document.createElement('div');
+		widgetContainer.classList.add('widget--4D')
+
+		this._x = new NumberController(this.parent, subObject, 'x', this._min, this._max, this._step ).name('top');
+		this._x.domElement.classList.add('hasSlider');
+		this._x._callOnChange = () => {
+
+			switch ( this._mode ) {
+
+				case '1D':
+					subObject.y = subObject.z = subObject.w = subObject.x;
+					this._y.updateDisplay();
+					this._z.updateDisplay();
+					this._w.updateDisplay();
+					break;
+
+				case '2D':
+					subObject.z = subObject.x;
+					this._z.updateDisplay();
+					break;
+
+				case '4D':
+				default:
+
+			}
+
+			this._bindedOnChange();
+		}
+		widgetContainer.appendChild( this._x.domElement );
+
+		this._y = new NumberController(this.parent, subObject, 'y', this._min, this._max, this._step ).name('right');
+		this._y.domElement.classList.add('hasSlider');
+		this._y._callOnChange = () => {
+
+			if( this._mode === '2D') {
+				subObject.w = subObject.y;
+				this._w.updateDisplay();
+			}
+
+			this._bindedOnChange();
+		}
+		widgetContainer.appendChild( this._y.domElement );
+
+		this._z = new NumberController(this.parent, subObject, 'z', this._min, this._max, this._step ).name('bottom');
+		this._z.domElement.classList.add('hasSlider');
+		this._z._callOnChange = this._bindedOnChange;
+		widgetContainer.appendChild( this._z.domElement );
+
+		this._w = new NumberController(this.parent, subObject, 'w', this._min, this._max, this._step ).name('left');
+		this._w.domElement.classList.add('hasSlider');
+		this._w._callOnChange = this._bindedOnChange;
+		widgetContainer.appendChild( this._w.domElement );
+
+		return widgetContainer;
+
+	}
+
+}
+
+// Provide a name for your controller by defining an $id string (UpperCamelCased).
+// Custom controllers give the GUI a method called "add" + $id.
+// That's where addMultiline comes from. It's also used to scope your controller's styles.
+
+D4Controller.$id = 'D4';
+
+// Provide a stylesheet for your controller by defining a $style string.
+// Prefix your selectors with ".lil-gui .controller.$id" to keep them in scope.
+// See Styling Custom Controllers for a guide on custom controller CSS.
+
+D4Controller.$style = `
+	.lil-gui .controller.D4{
+		flex-wrap: wrap;
+		align-items: start;
+	}
+
+	.lil-gui .controller.D4 textarea {
+
+	/* Apply built-in vars. */
+
+	background: var(--widget-color);
+	color: var(--string-color);
+
+	font-family: var(--font-family);
+	font-size: var(--input-font-size);
+
+	padding: var(--spacing);
+	min-height: var(--widget-height);
+	border-radius: var(--widget-border-radius);
+
+	/* Override browser defaults. */
+
+	width: 100%;
+	border: 0;
+	outline: none;
+	resize: vertical;
+
+}
+
+.lil-gui .controller.D4 .widget {
+	display: flex;
+	flex-direction: column;
+
+	max-width: calc( 100% - var(--name-width) );
+}
+
+.lil-gui .controller.D4 .mode-selector {
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	line-height: var(--widget-height);
+}
+
+.lil-gui .controller.D4 .mode-selector .form-item * {
+	vertical-align: middle;
+}
+
+.lil-gui .controller.D4 .mode-selector .form-item label {
+	margin-top: 3px;
+	display: inline-block;
+}
+
+.lil-gui .controller.D4 .mode-selector input[type="radio"] {
+	height: 11px;
+	width: unset;
+	margin: 0;
+	min-width: unset;
+}
+
+.lil-gui .controller.D4 .mode-selector input[type="radio"]:hover {
+	cursor: pointer;
+}
+
+.lil-gui .controller.Multiline textarea:hover {
+	background: var(--hover-color);
+}
+
+.lil-gui .controller.Multiline textarea:focus {
+	background: var(--focus-color);
+}
+
+.lil-gui .controller.D4 .widget--full{
+	border: none;
+	margin-left: var(--folder-indent);
+	border-left: 2px solid var(--widget-color);
+}
+
+.lil-gui .controller.D4 .widget--full .widget {
+	flex-direction: row;
+}
+
+`;
diff --git a/examples/_setup/gui/controllers/FontLoaderController.js b/examples/_setup/gui/controllers/FontLoaderController.js
new file mode 100644
index 00000000..aad87834
--- /dev/null
+++ b/examples/_setup/gui/controllers/FontLoaderController.js
@@ -0,0 +1,128 @@
+import CustomController from 'three-mesh-ui/examples/_setup/gui/controllers/CustomController';
+
+export default class FontLoaderController extends CustomController {
+
+
+	/* eslint-disable no-unused-vars */
+	$constructor( args ) { /* eslint-enable no-unused-vars */
+
+		this.name('MSDF Font upload');
+
+		this.$fullWidget = document.createElement('div');
+		this.$fullWidget.classList.add('widget--full');
+
+
+		this.$jsonFile = document.createElement('input');
+		this.$jsonFile.type = 'file';
+		this.$jsonFile.accept = '.json';
+
+		this.$pngFile = document.createElement('input');
+		this.$pngFile.type = 'file';
+		this.$pngFile.accept = '.png';
+
+		this.$fullWidget.appendChild( this.$jsonFile );
+		this.$fullWidget.appendChild( this.$pngFile );
+
+
+		this.$button = document.createElement('button');
+		this.$button.textContent = 'Import';
+		this.$button.type = 'submit';
+		this.$button.addEventListener( 'click', this._import.bind(this) );
+
+		this.$fullWidget.appendChild( this.$button );
+
+		this.domElement.appendChild(this.$fullWidget );
+
+	}
+
+	_import(){
+
+		// If there's no file, do nothing
+		if (!this.$jsonFile.value.length) return;
+
+		// Create a new FileReader() object
+		const reader = new FileReader();
+
+		// Setup the callback event to run when the file is read
+		reader.onload = this._loadedJson.bind(this);
+
+		// Read the file
+		reader.readAsText(this.$jsonFile.files[0]);
+
+	}
+
+	_loadedJson( event ) {
+
+		this._jsonData = JSON.parse(event.target.result)
+
+		this._loadPng();
+
+	}
+
+	_loadPng() {
+
+
+		if (this.$pngFile.files && this.$pngFile.files[0]) {
+			const img = document.createElement('img');
+
+			img.onload = () => {
+				URL.revokeObjectURL(img.src);  // no longer needed, free memory
+
+				this._pngData = img;
+
+				this._onChange({ json:this._jsonData, img: img } );
+
+			}
+
+			img.src = URL.createObjectURL(this.$pngFile.files[0]); // set src to blob url
+		}
+
+	}
+
+	get $value() {
+		return { json: this._jsonData, img: this._pngData };
+	}
+
+	// $updateDisplay should update the controller to reflect the current value.
+	$updateDisplay() {
+		// this.textarea.value = this.$value;
+	}
+
+
+
+}
+
+// Provide a name for your controller by defining an $id string (UpperCamelCased).
+// Custom controllers give the GUI a method called "add" + $id.
+// That's where addMultiline comes from. It's also used to scope your controller's styles.
+
+FontLoaderController.$id = 'FontLoader';
+
+// Provide a stylesheet for your controller by defining a $style string.
+// Prefix your selectors with ".lil-gui .controller.$id" to keep them in scope.
+// See Styling Custom Controllers for a guide on custom controller CSS.
+
+FontLoaderController.$style = `
+	.lil-gui .controller.FontLoader{
+		flex-wrap: wrap;
+		align-items: start;
+	}
+
+.lil-gui .controller.FontLoader .widget {
+	max-width:10%;
+}
+
+
+.lil-gui .controller.FontLoader .widget--full{
+	flex-direction: column;
+	border: none;
+	margin-left: var(--folder-indent);
+	padding-left: var(--folder-indent);
+	border-left: 2px solid var(--widget-color);
+}
+
+.lil-gui .controller.FontLoader .widget--full button[type="submit"]{
+	margin-top: 2px;
+}
+
+`;
diff --git a/examples/_setup/gui/exampleGUI.js b/examples/_setup/gui/exampleGUI.js
new file mode 100644
index 00000000..826b21ab
--- /dev/null
+++ b/examples/_setup/gui/exampleGUI.js
@@ -0,0 +1,36 @@
+import GUI from 'lil-gui';
+import CustomController from 'three-mesh-ui/examples/_setup/gui/controllers/CustomController';
+import D4Controller from 'three-mesh-ui/examples/_setup/gui/controllers/D4Controller';
+import FontLoaderController from 'three-mesh-ui/examples/_setup/gui/controllers/FontLoaderController';
+
+export default function (  ) {
+
+	const existingCss = document.head.querySelector('style[data-target="three-mesh-ui-gui"]');
+	if( !existingCss ) {
+		const guiCss = document.createElement('style');
+		guiCss.textContent = `
+	.lil-gui {
+		--font-family: "Courier new";
+		--font-size: 12px;
+		--background-color: #f6f6f6;
+		--text-color: #3d3d3d;
+		--title-background-color: #efefef;
+		--title-text-color: #3d3d3d;
+		--widget-color: #eaeaea;
+		--hover-color: #f0f0f0;
+		--focus-color: #fafafa;
+		--number-color: #07aacf;
+		--string-color: #8da300;
+		--folder-indent: 10px;
+	}
+`;
+		document.head.appendChild( guiCss );
+	}
+
+	// adds custom three-mesh-ui controllers
+	CustomController.register( D4Controller );
+	CustomController.register( FontLoaderController );
+
+	return new GUI();
+
+}
diff --git a/examples/api__align_items.js b/examples/api__align_items.js
index dcd1ec01..833a77d6 100644
--- a/examples/api__align_items.js
+++ b/examples/api__align_items.js
@@ -78,7 +78,7 @@ function init() {
 
 //
 
-function makeTextPanelColumn( index, contentDirection ) {
+function makeTextPanelColumn( index, flexDirection ) {
 
 
 	const group = new Object3D();
@@ -94,7 +94,7 @@ function makeTextPanelColumn( index, contentDirection ) {
 	} );
 
 	const titleText = new ThreeMeshUI.Text( {
-		content: contentDirection,
+		textContent: flexDirection,
 		fontSize: 0.075
 	} );
 
@@ -107,8 +107,8 @@ function makeTextPanelColumn( index, contentDirection ) {
 		height: 1,
 		padding: 0.01,
 		justifyContent: "space-evenly",
-		alignItems: contentDirection,
-		contentDirection: 'column',
+		alignItems: flexDirection,
+		flexDirection: 'column',
 		fontFamily: FontJSON,
 		fontTexture: FontImage
 	} );
@@ -131,7 +131,7 @@ function makeTextPanelColumn( index, contentDirection ) {
 
 
 		const text = new ThreeMeshUI.Text( {
-			content: letters[ i ]
+			textContent: letters[ i ]
 		} );
 
 		blockText.add( text );
@@ -148,7 +148,7 @@ function makeTextPanelColumn( index, contentDirection ) {
 
 }
 
-function makeTextPanelRow( index, contentDirection ) {
+function makeTextPanelRow( index, flexDirection ) {
 
 
 	const group = new Object3D();
@@ -165,7 +165,7 @@ function makeTextPanelRow( index, contentDirection ) {
 	} );
 
 	const titleText = new ThreeMeshUI.Text( {
-		content: `.set({justifyContent: "${contentDirection}"})`,
+		textContent: `.set({justifyContent: "${flexDirection}"})`,
 		fontSize: 0.075
 	} );
 
@@ -178,8 +178,8 @@ function makeTextPanelRow( index, contentDirection ) {
 		height: 0.3,
 		padding: 0.01,
 		justifyContent: "space-evenly",
-		alignItems: contentDirection,
-		contentDirection: 'row',
+		alignItems: flexDirection,
+		flexDirection: 'row',
 		fontFamily: FontJSON,
 		fontTexture: FontImage
 	} );
@@ -202,7 +202,7 @@ function makeTextPanelRow( index, contentDirection ) {
 
 
 		const text = new ThreeMeshUI.Text( {
-			content: letters[ i ]
+			textContent: letters[ i ]
 		} );
 
 		blockText.add( text );
diff --git a/examples/api__antialiasing.js b/examples/api__antialiasing.js
index 21d91c0c..5d1f06cd 100644
--- a/examples/api__antialiasing.js
+++ b/examples/api__antialiasing.js
@@ -1,3 +1,7 @@
+// xfg:title FontSmooth
+// xfg:category learn
+// xfg:type MSDF Only
+
 import * as THREE from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -50,8 +54,9 @@ function init() {
 
 	// attempt to have a pixel-perfect match to the reference MSDF implementation
 
-	makeTextPanel( 0.6, 0, 0, 0, true );
-	makeTextPanel( -0.6, 0, 0, 0, false );
+	const no = makeTextPanel( 0.6, 0, 0, 0, 'antialiased' );
+	window.no = no;
+	makeTextPanel( -0.6, 0, 0, 0, 'none' );
 
 	//
 
@@ -64,13 +69,13 @@ function init() {
 function makeTextPanel( x, rotX, rotY, rotZ, supersample ) {
 
 	const textContent = `
-  fontSupersampling: ${supersample}
+  fontSmooth: '${supersample}'
 
   Three-mesh-ui uses rotated-grid-super-sampling (RGSS) to smooth out the rendering of small characters on low res displays.
 
   This is especially important in VR. However you can improve performance slightly by disabling it, especially if you only render big texts.`;
 
-	const container = new ThreeMeshUI.Block( {
+	const container = new ThreeMeshUI.Text( {
 		width: 1,
 		height: 0.9,
 		padding: 0.05,
@@ -79,23 +84,25 @@ function makeTextPanel( x, rotX, rotY, rotZ, supersample ) {
 		alignItems: 'start',
 		fontFamily: FontJSON,
 		fontTexture: FontImage,
-		fontColor: new THREE.Color( 0xffffff ),
+		color: new THREE.Color( 0xffffff ),
 		backgroundOpacity: 1,
 		backgroundColor: new THREE.Color( 0x000000 ),
-		fontSupersampling: supersample,
+		fontSmooth: supersample,
+		fontSize: 0.045,
+		textContent
 	} );
 
 	scene.add( container );
 	container.position.set( x, 1.5, -4 );
 	container.rotation.set( rotX, rotY, rotZ );
 
-	container.add(
-		new ThreeMeshUI.Text( {
-			content: textContent,
-			fontKerning: 'normal',
-			fontSize: 0.045,
-		} )
-	);
+	// container.add(
+	// 	new ThreeMeshUI.Text( {
+	// 		content: textContent,
+	// 		fontKerning: 'normal',
+	// 		fontSize: 0.045,
+	// 	} )
+	// );
 
 	return container;
 
diff --git a/examples/api__background_size.js b/examples/api__background_size.js
index 57440281..19d56722 100644
--- a/examples/api__background_size.js
+++ b/examples/api__background_size.js
@@ -1,3 +1,6 @@
+// xfg:title BackgroundSize
+// xfg:category learn
+
 import * as THREE from 'three';
 import { TextureLoader } from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
@@ -10,7 +13,6 @@ import ThreeMeshUI from 'three-mesh-ui';
 import UVImage from 'three-mesh-ui/examples/assets/uv_grid.jpg';
 import FontJSON from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.json';
 import FontImage from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.png';
-import FrameBasicMaterial from 'three-mesh-ui/examples/materials/frame/FrameBasicMaterial';
 
 const WIDTH = window.innerWidth;
 const HEIGHT = window.innerHeight;
@@ -70,7 +72,7 @@ function makePanels() {
 	const container = new ThreeMeshUI.Block( {
 		height: 1.6,
 		width: 2,
-		contentDirection: 'row',
+		flexDirection: 'row',
 		justifyContent: 'center',
 		backgroundOpacity: 0
 	} );
@@ -123,7 +125,7 @@ function makePanels() {
 	setTimeout( () => {
 		for ( let i = 0; i < imageBlocks.length; i++ ) {
 			const imageBlock = imageBlocks[ i ];
-			imageBlock.set({backgroundTexture:snakeTexture});
+			imageBlock.set({backgroundImage:snakeTexture});
 		}
 	}, 3000 );
 
@@ -137,7 +139,10 @@ function makeSection( texture, backgroundSize, text1, text2 ) {
 		height: 1.6,
 		width: 0.6,
 		margin: 0.05,
-		backgroundOpacity: 0
+		backgroundOpacity: 0,
+		flexDirection: 'column',
+		justifyContent: 'start',
+		alignItems: 'center'
 	} );
 
 	const imageHBlock = new ThreeMeshUI.Block( {
@@ -145,7 +150,7 @@ function makeSection( texture, backgroundSize, text1, text2 ) {
 		width: 0.6,
 		borderRadius: 0.05,
 		margin: 0.05,
-		backgroundTexture: texture,
+		backgroundImage: texture,
 		backgroundOpacity: 1,
 		backgroundColor: new THREE.Color(0xffffff),
 		backgroundSize
@@ -156,35 +161,38 @@ function makeSection( texture, backgroundSize, text1, text2 ) {
 		height: 0.9,
 		width: 0.6,
 		borderRadius: 0.05,
-		backgroundTexture: texture,
+		backgroundImage: texture,
 		backgroundOpacity: 1,
 		backgroundColor: new THREE.Color(0xffffff),
 		backgroundSize
 	} );
 
-	imageBlock.material = new FrameBasicMaterial();
+	window.block = imageBlock;
+
 	imageBlocks.push( imageHBlock, imageBlock );
 
 	const textBlock = new ThreeMeshUI.Block( {
-		height: 0.45,
-		width: 0.6,
+		height: 'auto',
+		width: 0.5,
 		margin: 0.05,
 		padding: 0.03,
+		borderRadius : 0.025,
 		justifyContent: 'center',
 		fontFamily: FontJSON,
 		fontTexture: FontImage,
-		backgroundOpacity: 0.7,
+		backgroundColor: 0x000000,
+		backgroundOpacity: 0.3,
 		fontSize: 0.04
 	} );
 
 	textBlock.add(
 		new ThreeMeshUI.Text( {
-			content: text1 + '\n',
-			fontColor: new THREE.Color( 0x96ffba )
+			textContent: text1 + '\n',
+			color: new THREE.Color( 0x96ffba )
 		} ),
 
 		new ThreeMeshUI.Text( {
-			content: text2
+			textContent: text2
 		} )
 	);
 
diff --git a/examples/api__border.js b/examples/api__border.js
index 47899e6a..4e6b8cf6 100644
--- a/examples/api__border.js
+++ b/examples/api__border.js
@@ -1,3 +1,6 @@
+// xfg:title Borders
+// xfg:category learn
+
 import * as THREE from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -63,13 +66,14 @@ function init() {
 function makeTextPanel() {
 
 	panel = new ThreeMeshUI.Block( {
-		width: 3,
+		width: 1,
 		height: 0.8,
 		fontSize: 0.055,
 		justifyContent: 'center',
 		textAlign: 'center',
 		fontFamily: FontJSON,
-		fontTexture: FontImage
+		fontTexture: FontImage,
+		backgroundColor : 0x000000,
 	} );
 
 	panel.position.set( 0, 1, -1.8 );
@@ -80,7 +84,7 @@ function makeTextPanel() {
 
 	panel.add(
 		new ThreeMeshUI.Text( {
-			content: `Block.borderRadius\n\nBlock.borderWidth\n\nBlock.borderColor\n\nBlock.borderOpacity`,
+			textContent: `Block.borderRadius\n\nBlock.borderWidth\n\nBlock.borderColor\n\nBlock.borderOpacity`,
 		} )
 	);
 
@@ -105,7 +109,7 @@ function loop() {
 		borderWidth: 0.05 - 0.06 * Math.sin( Date.now() / 500 ),
 		borderColor: new THREE.Color( 0.5 + 0.5 * Math.sin( Date.now() / 500 ), 0.5, 1 ),
 		borderOpacity: 1,
-		width: 2 + ( Math.sin( Date.now() / 500 ) ),
+		// width: 2 + ( Math.sin( Date.now() / 500 ) ),
 	} );
 
 	// console.log( panel.frame.material.uniforms.frameSize.value );
diff --git a/examples/api__content_direction.js b/examples/api__content_direction.js
index 55cd0229..0dc1bb1f 100644
--- a/examples/api__content_direction.js
+++ b/examples/api__content_direction.js
@@ -1,3 +1,6 @@
+// xfg:title FlexDirection
+// xfg:category learn
+
 import * as THREE from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -50,16 +53,16 @@ function init() {
 	scene.add( room );
 
 	// TEXT PANEL
-	const contentDirections = [
+	const flexDirections = [
 		'row',						// 'row' or ThreeMeshUI.ContentDirection.ROW,
 		'row-reverse',		// 'row-reverse' or ThreeMeshUI.ContentDirection.ROW_REVERSE,
 		'column',					// 'column' or ThreeMeshUI.ContentDirection.COLUMN,
 		'column-reverse'	// 'column-reverse' or ThreeMeshUI.ContentDirection.COLUMN_REVERSE,
 	];
 
-	for ( let i = 0; i < contentDirections.length; i++ ) {
-		const contentDirection = contentDirections[ i ];
-		makeTextPanel( i, contentDirection );
+	for ( let i = 0; i < flexDirections.length; i++ ) {
+		const flexDirection = flexDirections[ i ];
+		makeTextPanel( i, flexDirection );
 	}
 
 
@@ -71,7 +74,7 @@ function init() {
 
 //
 
-function makeTextPanel( index, contentDirection ) {
+function makeTextPanel( index, flexDirection ) {
 
 
 	const group = new Object3D();
@@ -87,7 +90,7 @@ function makeTextPanel( index, contentDirection ) {
 	} );
 
 	const titleText = new ThreeMeshUI.Text( {
-		content: '.set({contentDirection: "' + contentDirection + '"})',
+		textContent: '.set({flexDirection: "' + flexDirection + '"})',
 		fontSize: 0.075
 	} );
 
@@ -101,7 +104,7 @@ function makeTextPanel( index, contentDirection ) {
 		padding: 0.05,
 		justifyContent: 'center',
 		alignItems: 'center',
-		contentDirection: contentDirection,
+		flexDirection: flexDirection,
 		fontFamily: FontJSON,
 		fontTexture: FontImage
 	} );
@@ -125,7 +128,7 @@ function makeTextPanel( index, contentDirection ) {
 
 
 		const text = new ThreeMeshUI.Text( {
-			content: letters[ i ]
+			textContent: letters[ i ]
 		} );
 
 		blockText.add( text );
diff --git a/examples/api__font_kerning.js b/examples/api__font_kerning.js
index d7749987..530f1ab9 100644
--- a/examples/api__font_kerning.js
+++ b/examples/api__font_kerning.js
@@ -1,3 +1,6 @@
+// xfg:title FontKerning
+// xfg:category learn
+
 import * as THREE from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -87,7 +90,7 @@ function makeTextPanel() {
 	} );
 
 	infoBox.add( new ThreeMeshUI.Text( {
-		content: '.fontKerning adds spaces between pairs of characters that are defined in font files.\n',
+		textContent: '.fontKerning adds spaces between pairs of characters that are defined in font files.\n',
 	} ) );
 
 	container.add( infoBox );
@@ -103,11 +106,9 @@ function makeKernedContainer( kerning ) {
 		width: 1.8,
 		height: 0.12,
 		padding: 0.05,
-		contentDirection: "row",
+		flexDirection: "row",
 		justifyContent: 'center',
 		textAlign: 'left',
-		fontFamily: FontJSON,
-		fontTexture: FontImage,
 		backgroundOpacity: 0
 	} );
 
@@ -122,7 +123,7 @@ function makeKernedContainer( kerning ) {
 	} );
 
 	const title = new ThreeMeshUI.Text( {
-		content: `.set({fontKerning: "${kerning}"})`,
+		textContent: `.set({fontKerning: "${kerning}"})`,
 		fontSize: 0.055
 	} );
 
@@ -139,7 +140,7 @@ function makeKernedContainer( kerning ) {
 
 	textBox.add(
 		new ThreeMeshUI.Text( {
-			content: '"LYON F. to ATLANTA GA. Via ALTOONA PA."',
+			textContent: '"LYON F. to ATLANTA GA. Via ALTOONA PA."',
 			fontKerning: kerning,
 		} )
 	);
diff --git a/examples/api__hidden_overflow.js b/examples/api__hidden_overflow.js
index eb6a2c37..8316adf1 100644
--- a/examples/api__hidden_overflow.js
+++ b/examples/api__hidden_overflow.js
@@ -1,3 +1,6 @@
+// xfg:title Overflow
+// xfg:category learn
+
 import * as THREE from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -65,7 +68,7 @@ function init() {
 
 function makeTextPanel() {
 
-	const title = new ThreeMeshUI.Block( {
+	const title = new ThreeMeshUI.Text( {
 		height: 0.2,
 		width: 1.2,
 		fontSize: 0.09,
@@ -73,11 +76,14 @@ function makeTextPanel() {
 		fontFamily: FontJSON,
 		fontTexture: FontImage,
 		backgroundColor: new THREE.Color( 'blue' ),
-		backgroundOpacity: 0.2
+		backgroundOpacity: 0.2,
+		renderOrder: 150
 	} ).add(
-		new ThreeMeshUI.Text( { content: 'hiddenOverflow attribute :' } )
+		new ThreeMeshUI.Inline( { textContent: 'hiddenOverflow attribute :' } )
 	);
 
+	window.title = title;
+
 	title.position.set( 0, 1.8, -2 );
 	scene.add( title );
 
@@ -86,12 +92,13 @@ function makeTextPanel() {
 	// forget to enable local clipping with renderer.localClippingEnabled = true;
 
 	container = new ThreeMeshUI.Block( {
-		height: 0.6,
-		width: 0.9,
-		boxSizing: 'content-box',
+		height: 1,
+		width: 1,
+		boxSizing: 'border-box',
 		// padding: '0 0.1 0.2 0',
-		padding: '0.05 0.1 0.2 0.025',
-		// padding: 0.1,
+		// padding: '0.05 0.1 0.2 0.025',
+		padding: '0.1 0.2 0.1 0.1',
+		borderRadius: 0.05,
 		// padding: 0.09,
 		justifyContent: 'center',
 		borderOpacity: 1,
@@ -99,21 +106,22 @@ function makeTextPanel() {
 		borderColor: new THREE.Color(0xff99ff),
 		backgroundOpacity: 1,
 		backgroundColor: new THREE.Color(0xffffff),
-		backgroundTexture : new TextureLoader().load("./assets/uv_grid.jpg"),
-		backgroundSize: 'stretch'
-	} );
-
-	container.setupState( {
-		state: 'hidden-on',
-		attributes: { hiddenOverflow: true }
-	} );
-
-	container.setupState( {
-		state: 'hidden-off',
-		attributes: { hiddenOverflow: false }
+		backgroundImage : new TextureLoader().load("./assets/uv_grid.jpg"),
+		backgroundSize: 'stretch',
+		overflow: 'hidden'
 	} );
 
-	container.setState( 'hidden-on' );
+	// container.setupState( {
+	// 	state: 'hidden-on',
+	// 	attributes: { hiddenOverflow: true }
+	// } );
+	//
+	// container.setupState( {
+	// 	state: 'hidden-off',
+	// 	attributes: { hiddenOverflow: false }
+	// } );
+	//
+	// container.setState( 'hidden-on' );
 
 	container.position.set( 0, 1, -1.8 );
 	// container.rotation.x = -0.55;
@@ -122,41 +130,56 @@ function makeTextPanel() {
 	//
 
 	textContainer = new ThreeMeshUI.Block( {
-		width: 1,
-		height: 1,
-		offset: 0.001,
+		width: 1.3,
+		height: 1.3,
+		offset: 0.025,
 		// padding: 0.09,
 		backgroundColor: new THREE.Color( 'blue' ),
-		backgroundOpacity: 0.2,
+		backgroundOpacity: 0.5,
 		justifyContent: 'center'
 	} );
 
+	window.textContainer = textContainer;
+
 	container.add( textContainer );
 
 	//
 
 	const text = new ThreeMeshUI.Text( {
-		content: 'hiddenOverflow '.repeat( 28 ),
+		textContent: 'hiddenOverflow '.repeat( 28 ),
 		fontSize: 0.054,
 		fontFamily: FontJSON,
 		fontTexture: FontImage
 	} );
 
+	window.text = text;
+
 	textContainer.add( text );
 
 	new BoxLayoutBehavior( container );
 
 	setInterval( () => {
 
-		if ( container.currentState === 'hidden-on' ) {
+		// console.log( container.get('overflow') );
+		if( container.get('overflow') === 'hidden' ) {
 
-			container.setState( 'hidden-off' );
+			container.set({ overflow:'visible'});
 
 		} else {
 
-			container.setState( 'hidden-on' );
+			container.set({ overflow: 'hidden'});
 
 		}
+		// if ( container.get('overflow'))
+		// if ( container.currentState === 'hidden-on' ) {
+		//
+		// 	container.setState( 'hidden-off' );
+		//
+		// } else {
+		//
+		// 	container.setState( 'hidden-on' );
+		//
+		// }
 
 	}, 1500 );
 
@@ -187,6 +210,8 @@ function loop() {
 	textContainer.position.x = x * 0.6;
 	textContainer.position.y = y * 0.6;
 
+	container._overflow._needsUpdate = true;
+
 	// Don't forget, ThreeMeshUI must be updated manually.
 	// This has been introduced in version 3.0.0 in order
 	// to improve performance
diff --git a/examples/api__invert_alpha.js b/examples/api__invert_alpha.js
index b505ac24..87d2b43a 100644
--- a/examples/api__invert_alpha.js
+++ b/examples/api__invert_alpha.js
@@ -1,14 +1,16 @@
+// xfg:title InvertAlpha
+// xfg:type MSDF Only
+// xfg:category learn
+
 import * as THREE from 'three';
+import { Color } from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
 
 import ThreeMeshUI, { FontLibrary } from 'three-mesh-ui';
-
-import { Color } from 'three';
-import * as FontWeight from '../src/utils/font/FontWeight';
-import * as FontStyle from '../src/utils/font/FontStyle';
 import ROBOTO_ADJUSTMENT from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/adjustment';
+import MSDFNormalMaterial from 'three-mesh-ui/examples/materials/msdf/MSDFNormalMaterial';
 
 const WIDTH = window.innerWidth;
 const HEIGHT = window.innerHeight;
@@ -27,10 +29,10 @@ function preloadFonts() {
 
 		FontLibrary
 			.addFontFamily("Roboto")
-				.addVariant(FontWeight.NORMAL, FontStyle.NORMAL, "./assets/fonts/msdf/roboto/regular.json", "./assets/fonts/msdf/roboto/regular.png" )
-				.addVariant(FontWeight.BOLD, FontStyle.ITALIC, "./assets/fonts/msdf/roboto/bold-italic.json", "./assets/fonts/msdf/roboto/bold-italic.png" )
-				.addVariant(FontWeight.BOLD, FontStyle.NORMAL, "./assets/fonts/msdf/roboto/bold.json", "./assets/fonts/msdf/roboto/bold.png" )
-				.addVariant(FontWeight.NORMAL, FontStyle.ITALIC, "./assets/fonts/msdf/roboto/italic.json", "./assets/fonts/msdf/roboto/italic.png" )
+				.addVariant("normal", "normal", "./assets/fonts/msdf/roboto/regular.json", "./assets/fonts/msdf/roboto/regular.png" )
+				.addVariant("bold", "italic", "./assets/fonts/msdf/roboto/bold-italic.json", "./assets/fonts/msdf/roboto/bold-italic.png" )
+				.addVariant("bold", "normal", "./assets/fonts/msdf/roboto/bold.json", "./assets/fonts/msdf/roboto/bold.png" )
+				.addVariant("normal", "italic", "./assets/fonts/msdf/roboto/italic.json", "./assets/fonts/msdf/roboto/italic.png" )
 
 	).then( init );
 
@@ -44,10 +46,10 @@ function init() {
 	// adjust fonts
 	// @see TODO:adjustDocumentation
 	const FF = FontLibrary.getFontFamily("Roboto");
-	FF.getVariant('700','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
-	FF.getVariant('700','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
-	FF.getVariant('400','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
-	FF.getVariant('400','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	FF.getVariant('bold','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	FF.getVariant('bold','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	FF.getVariant('normal','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	FF.getVariant('normal','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
 
 	// Build three
 
@@ -83,6 +85,8 @@ function init() {
 
 	//
 
+	ThreeMeshUI.update();
+
 	renderer.setAnimationLoop( loop );
 
 }
@@ -107,7 +111,7 @@ function makeTextPanel() {
 
 	//
 
-	const infoBox = new ThreeMeshUI.Block( {
+	const infoBox = new ThreeMeshUI.Text( {
 		width: 2,
 		height: 0.175,
 		margin: 0.01,
@@ -115,24 +119,27 @@ function makeTextPanel() {
 		textAlign: 'center',
 	} );
 
-	infoBox.add( new ThreeMeshUI.Text( {
-		content: '.invertAlpha ',
-		fontWeight: '700',
+	infoBox.add( new ThreeMeshUI.Inline( {
+		textContent: '.invertAlpha ',
+		fontWeight: 'bold',
 	} ) );
 
-	infoBox.add( new ThreeMeshUI.Text( {
-		content: '(* works on msdf font variants)',
+	infoBox.add( new ThreeMeshUI.Inline( {
+		textContent: 'msdf only',
 		fontStyle: 'italic',
-		fontSize: 0.035
+		fontWeight: 'bold',
+		verticalAlign: 'super',
+		fontMaterial: new MSDFNormalMaterial(),
+		fontSize: '0.5em'
 	} ) );
 
-	infoBox.add( new ThreeMeshUI.Text( {
-		content: ' inverts the alpha of the glyph.\n',
-		fontWeight: '700',
+	infoBox.add( new ThreeMeshUI.Inline( {
+		textContent: ' inverts the alpha of the glyph.\n',
+		fontWeight: 'bold',
 	} ) );
 
-	infoBox.add( new ThreeMeshUI.Text( {
-		content: 'The rendering will be a boxed char, with transparent inner.\n',
+	infoBox.add( new ThreeMeshUI.Inline( {
+		textContent: 'The rendering will be a boxed char, with transparent inner.\n',
 		letterSpacing: 0.05
 	} ) );
 
@@ -149,7 +156,7 @@ function makeKernedContainer( kerning ) {
 		width: 1.8,
 		height: 0.126,
 		padding: 0.05,
-		contentDirection: "row",
+		flexDirection: "row",
 		justifyContent: 'center',
 		textAlign: 'left',
 		fontFamily: "Roboto",
@@ -163,11 +170,12 @@ function makeKernedContainer( kerning ) {
 		padding: 0.025,
 		justifyContent: 'center',
 		backgroundColor: new Color( 0xff9900 ),
+		backgroundOpacity : 0.7,
 		textAlign: 'left'
 	} );
 
 	const title = new ThreeMeshUI.Text( {
-		content: `.set({invertAlpha: "${kerning}"})`,
+		textContent: `.set({invertAlpha: "${kerning}"})`,
 		fontSize: 0.055
 	} );
 
@@ -181,12 +189,12 @@ function makeKernedContainer( kerning ) {
 		justifyContent: 'center',
 		backgroundOpacity: 0,
 		fontSize: 0.08,
-		fontWeight: '700'
+		fontWeight: 'bold'
 	} );
 
 	textBox.add(
 		new ThreeMeshUI.Text( {
-			content: '.invertAlpha works on msdf texts',
+			textContent: '.invertAlpha works on msdf texts',
 			letterSpacing: 0.05,
 			invertAlpha: kerning,
 		} )
@@ -217,7 +225,7 @@ function loop() {
 	// Don't forget, ThreeMeshUI must be updated manually.
 	// This has been introduced in version 3.0.0 in order
 	// to improve performance
-	ThreeMeshUI.update();
+	// ThreeMeshUI.update();
 
 	controls.update();
 	renderer.render( scene, camera );
diff --git a/examples/api__justify_content.js b/examples/api__justify_content.js
index 805f006e..e780568c 100644
--- a/examples/api__justify_content.js
+++ b/examples/api__justify_content.js
@@ -1,3 +1,6 @@
+// xfg:title JustifyContent
+// xfg:category learn
+
 import * as THREE from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -60,9 +63,9 @@ function init() {
 	];
 
 	for ( let i = 0; i < justifications.length; i++ ) {
-		const contentDirection = justifications[ i ];
-		makeTextPanelColumn( i, contentDirection );
-		makeTextPanelRow( i, contentDirection );
+		const flexDirection = justifications[ i ];
+		makeTextPanelColumn( i, flexDirection );
+		makeTextPanelRow( i, flexDirection );
 	}
 
 	//
@@ -73,7 +76,7 @@ function init() {
 
 //
 
-function makeTextPanelColumn( index, contentDirection ) {
+function makeTextPanelColumn( index, flexDirection ) {
 
 
 	const group = new Object3D();
@@ -89,7 +92,7 @@ function makeTextPanelColumn( index, contentDirection ) {
 	} );
 
 	const titleText = new ThreeMeshUI.Text( {
-		content: contentDirection,
+		textContent: flexDirection,
 		fontSize: 0.075
 	} );
 
@@ -101,9 +104,9 @@ function makeTextPanelColumn( index, contentDirection ) {
 		width: 0.7,
 		height: 1,
 		padding: 0.05,
-		justifyContent: contentDirection,
+		justifyContent: flexDirection,
 		alignItems: 'center',
-		contentDirection: 'column',
+		flexDirection: 'column',
 		fontFamily: FontJSON,
 		fontTexture: FontImage
 	} );
@@ -113,7 +116,7 @@ function makeTextPanelColumn( index, contentDirection ) {
 
 	for ( let i = 0; i < letters.length; i ++ ) {
 
-		const blockText = new ThreeMeshUI.Block( {
+		const blockText = new ThreeMeshUI.Text( {
 			width: 0.125,
 			height: 0.125,
 			margin: 0.01,
@@ -121,16 +124,11 @@ function makeTextPanelColumn( index, contentDirection ) {
 			backgroundColor: new THREE.Color(colors[i]),
 			justifyContent: 'center',
 			alignItems: 'center',
-			offset:0.001
-		} );
-
-
-
-		const text = new ThreeMeshUI.Text( {
-			content: letters[ i ]
+			textAlign: 'center',
+			offset:0.001,
+			textContent: letters[ i ]
 		} );
 
-		blockText.add( text );
 		container.add( blockText );
 
 	}
@@ -144,7 +142,7 @@ function makeTextPanelColumn( index, contentDirection ) {
 
 }
 
-function makeTextPanelRow( index, contentDirection ) {
+function makeTextPanelRow( index, flexDirection ) {
 
 
 	const group = new Object3D();
@@ -161,7 +159,7 @@ function makeTextPanelRow( index, contentDirection ) {
 	} );
 
 	const titleText = new ThreeMeshUI.Text( {
-		content: `.set({justifyContent: "${contentDirection}"})`,
+		textContent: `.set({justifyContent: "${flexDirection}"})`,
 		fontSize: 0.075
 	} );
 
@@ -173,9 +171,9 @@ function makeTextPanelRow( index, contentDirection ) {
 		width: 3,
 		height: 0.2,
 		padding: 0.05,
-		justifyContent: contentDirection,
+		justifyContent: flexDirection,
 		alignItems: 'center',
-		contentDirection: 'row',
+		flexDirection: 'row',
 		fontFamily: FontJSON,
 		fontTexture: FontImage
 	} );
@@ -185,7 +183,7 @@ function makeTextPanelRow( index, contentDirection ) {
 
 	for ( let i = 0; i < letters.length; i ++ ) {
 
-		const blockText = new ThreeMeshUI.Block( {
+		const blockText = new ThreeMeshUI.Text( {
 			width: 0.125,
 			height: 0.125,
 			margin: 0.01,
@@ -193,16 +191,11 @@ function makeTextPanelRow( index, contentDirection ) {
 			backgroundColor: new THREE.Color(colors[i]),
 			justifyContent: 'center',
 			alignItems: 'center',
-			offset:0.001
-		} );
-
-
-
-		const text = new ThreeMeshUI.Text( {
-			content: letters[ i ]
+			textAlign: 'center',
+			offset:0.001,
+			textContent: letters[ i ]
 		} );
 
-		blockText.add( text );
 		container.add( blockText );
 
 	}
diff --git a/examples/api__letter_spacing.js b/examples/api__letter_spacing.js
index c3e30a7e..8bac8324 100644
--- a/examples/api__letter_spacing.js
+++ b/examples/api__letter_spacing.js
@@ -1,3 +1,6 @@
+// xfg:title LetterSpacing
+// xfg:category learn
+
 import * as THREE from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -12,13 +15,14 @@ import { Color } from 'three';
 const WIDTH = window.innerWidth;
 const HEIGHT = window.innerHeight;
 
-let scene, camera, renderer, controls, animatedText;
+let scene, camera, renderer, controls, animatedTextBox;
 
 window.addEventListener( 'load', init );
 window.addEventListener( 'resize', onWindowResize );
 
 //
 
+
 function init() {
 
 	scene = new THREE.Scene();
@@ -81,82 +85,74 @@ function makeTextPanel() {
 		const letterSpace = i / 10;
 		const opacity = letterSpace === 0 ? 1 : 0.5;
 
-		const titleBox = new ThreeMeshUI.Block( {
-			width: 1,
+		const titleBox = new ThreeMeshUI.Text( {
+			width: 'auto',
 			height: 0.1,
-			margin: 0.01,
-			padding: 0.025,
-			justifyContent: 'center',
+			margin: '0.1 0.1 0 0',
+			padding: '0.025 0.075',
+			alignItems: 'center',
 			backgroundColor: new Color( 0xff9900 ),
 			backgroundOpacity: opacity,
-			textAlign: 'left'
-		} );
-
-		const title = new ThreeMeshUI.Text( {
-			content: `.set({letterSpacing: ${letterSpace}})`,
+			textAlign: 'left',
+			textContent: `.set({letterSpacing: ${letterSpace}})`,
 			fontSize: 0.055,
+			borderRadius : '0.15 0.15 0 0'
 		} );
 
-		titleBox.add( title );
-
-		const textBox = new ThreeMeshUI.Block( {
-			width: 3,
+		const textBox = new ThreeMeshUI.Text( {
 			height: 0.1,
-			margin: 0.01,
-			justifyContent: 'center',
-			backgroundOpacity: opacity,
-		} );
-
-		const text = new ThreeMeshUI.Text( {
-			content: '.letterSpacing adds a constant space between each characters.',
+			alignItems: 'center',
+			fontOpacity: opacity,
+			textContent: '.letterSpacing adds a constant space between each characters.',
 			fontSize: 0.055,
-			letterSpacing: letterSpace
+			letterSpacing: letterSpace,
+			backgroundColor : 0xffffff,
+			backgroundOpacity: 0,
+			borderColor : 0xff9900,
+			borderWidth : 0.01,
+			borderOpacity: opacity,
+			borderRadius : '0 0.025 0.025 0.025'
 		} );
 
-		textBox.add( text );
-
 		container.add( titleBox );
 		container.add( textBox );
 	}
 
 
 	// Then add an animated one
-	const animatedTitleBox = new ThreeMeshUI.Block( {
-		width: 1,
+	const animatedTitleBox = new ThreeMeshUI.Text( {
+		width: 'auto',
 		height: 0.1,
-		margin: 0.01,
-		padding: 0.025,
-		justifyContent: 'center',
+		margin: '0.1 0.1 0 0',
+		padding: '0.025 0.075',
+		alignItems: 'center',
 		backgroundColor: new Color( 0xff9900 ),
 		backgroundOpacity: 0.5,
-		textAlign: 'left'
-	} );
-
-	const animatedTitle = new ThreeMeshUI.Text( {
-		content: `animated letterSpacing`,
+		textAlign: 'left',
+		textContent: `animated letterSpacing`,
 		fontSize: 0.055,
+		borderRadius : '0.15 0.15 0 0'
 	} );
 
-	animatedTitleBox.add( animatedTitle );
-
-	const animatedTextBox = new ThreeMeshUI.Block( {
+	animatedTextBox = new ThreeMeshUI.Text( {
 		width: 3,
 		height: 0.1,
-		margin: 0.01,
-		justifyContent: 'center',
-		backgroundOpacity: 0.5
-	} );
-
-	animatedText = new ThreeMeshUI.Text( {
-		content: '.letterSpacing adds a constant space between each characters.',
+		alignItems: 'center',
+		fontOpacity: 1,
+		textContent: '.letterSpacing adds a constant space between each characters.',
 		fontSize: 0.055,
+		backgroundColor : 0xffffff,
+		backgroundOpacity: 0,
+		borderColor : 0xff9900,
+		borderWidth : 0.01,
+		borderOpacity: 0.5,
+		borderRadius : '0 0.025 0.025 0.025'
 	} );
 
-	animatedTextBox.add( animatedText );
-
 	container.add( animatedTitleBox );
 	container.add( animatedTextBox );
 
+	// ThreeMeshUI.update();
 
 }
 
@@ -171,6 +167,7 @@ function onWindowResize() {
 }
 
 //
+let letterSpacing = 0;
 let letterSpacingSpeed = 0.005;
 
 function loop( ) {
@@ -187,21 +184,20 @@ function loop( ) {
 	// console.log( animatedText )
 
 	// update letterSpacing
-	let lspace = animatedText.getLetterSpacing();
-	lspace += letterSpacingSpeed;
+	letterSpacing += letterSpacingSpeed;
 
-	if ( lspace < -0.6 ) {
+	if ( letterSpacing < -0.6 ) {
 
-		lspace = -0.6;
+		letterSpacing = -0.6;
 		letterSpacingSpeed *= -1;
 
-	} else if ( lspace > 0.4 ) {
+	} else if ( letterSpacing > 0.4 ) {
 
-		lspace = 0.4;
+		letterSpacing = 0.4;
 		letterSpacingSpeed *= - 1;
 
 	}
 
-	animatedText.set({letterSpacing: lspace});
+	animatedTextBox.set({letterSpacing});
 
 }
diff --git a/examples/api__manual_positioning.js b/examples/api__manual_positioning.js
index c9bfd458..b704c470 100644
--- a/examples/api__manual_positioning.js
+++ b/examples/api__manual_positioning.js
@@ -1,3 +1,6 @@
+// xfg:title Manual Positioning
+// xfg:category learn
+
 import * as THREE from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -90,11 +93,13 @@ function makeTextPanel() {
 		backgroundOpacity: 0.5,
 		justifyContent: 'end',
 		alignItems: 'end',
-		fontColor: new THREE.Color( 0x333333 ),
+		color: new THREE.Color( 0x333333 ),
 		fontFamily: FontJSON,
 		fontTexture: FontImage
 	} );
 
+	window.rootBlock = outerContainer;
+
 	outerContainer.position.set( 0, 1, -1.8 );
 	outerContainer.rotation.x = -0.55;
 	scene.add( outerContainer );
@@ -126,7 +131,7 @@ function makeAbsoluteBlock( string, x, y ) {
 		backgroundOpacity: 0.2
 	} );
 
-	text.add( new ThreeMeshUI.Text( { content: string } ) );
+	text.add( new ThreeMeshUI.Text( { textContent: string } ) );
 
 	text.autoLayout = false;
 	text.position.set( x, y, 0 );
diff --git a/examples/api__order.js b/examples/api__order.js
new file mode 100644
index 00000000..2fda293d
--- /dev/null
+++ b/examples/api__order.js
@@ -0,0 +1,148 @@
+// xfg:title Order
+// xfg:category learn
+// xfg:description Define the position order of a child in a flex parent
+
+import * as THREE from 'three';
+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
+
+import ThreeMeshUI from 'three-mesh-ui';
+
+import FontJSON from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.json';
+import FontImage from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.png';
+
+const WIDTH = window.innerWidth;
+const HEIGHT = window.innerHeight;
+
+let scene, camera, renderer, controls, orderedChild;
+
+window.addEventListener( 'load', init );
+window.addEventListener( 'resize', onWindowResize );
+
+//
+
+function init() {
+	scene = new THREE.Scene();
+	scene.background = new THREE.Color( 0x505050 );
+
+	camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 0.1, 100 );
+
+	renderer = new THREE.WebGLRenderer( { antialias: true } );
+	renderer.setPixelRatio( window.devicePixelRatio );
+	renderer.setSize( WIDTH, HEIGHT );
+	renderer.xr.enabled = true;
+	document.body.appendChild( VRButton.createButton( renderer ) );
+	document.body.appendChild( renderer.domElement );
+
+	controls = new OrbitControls( camera, renderer.domElement );
+	camera.position.set( 0, 1.6, 0 );
+	controls.target = new THREE.Vector3( 0, 1, -1.8 );
+	controls.update();
+
+	// ROOM
+
+	const room = new THREE.LineSegments(
+		new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
+		new THREE.LineBasicMaterial( { color: 0x808080 } )
+	);
+
+	scene.add( room );
+
+	// TEXT PANEL
+
+	makeTextPanel();
+
+	//
+
+	renderer.setAnimationLoop( loop );
+}
+
+//
+
+function makeTextPanel() {
+
+	const rootBlock = new ThreeMeshUI.Block( {
+		name: 'rootBlock',
+		width: 2,
+		height: 2,
+		padding: 0.1,
+		fontFamily: FontJSON,
+		fontTexture: FontImage,
+		color: new THREE.Color( 0xffffff ),
+
+		backgroundColor: 0x000000,
+		backgroundOpacity: 0.25,
+
+		flexDirection: 'column',
+		justifyContent: 'center',
+		alignItems : 'stretch',
+	} );
+
+	rootBlock.position.set( 0, 1, -1.8 );
+	rootBlock.rotation.x = -0.55;
+
+	window.rootBlock = rootBlock;
+
+	scene.add( rootBlock );
+
+
+	const innerBlock = new ThreeMeshUI.Block({
+		name: "innerBlock",
+		padding: 0.25,
+		flexDirection: 'row',
+		justifyContent: 'space-evenly',
+		backgroundColor: 0xff9900,
+	})
+
+	rootBlock.add( innerBlock );
+
+	const letters = "ABCDE";
+	for ( let i = 0; i < 4; i++ ) {
+		const item = new ThreeMeshUI.Text({
+			width: 0.2,
+			height: 0.2,
+			textContent: letters[i],
+			textAlign: 'center',
+			alignItems: 'center',
+			margin: 0.025,
+			backgroundColor : i === 2 ? 0x00ff99 : 0x0099ff,
+			backgroundOpacity : 1
+		})
+
+		if( i === 2 ) {
+
+			orderedChild = item;
+
+		}
+
+		innerBlock.add( item );
+	}
+
+
+	setInterval( ()=>{
+		orderedChild.set({order: -1 + Math.floor(Math.random()*3 )});
+	}, 2500);
+
+}
+
+//
+
+function onWindowResize() {
+	camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+	renderer.setSize( window.innerWidth, window.innerHeight );
+}
+
+//
+
+function loop() {
+
+	// Don't forget, ThreeMeshUI must be updated manually.
+	// This has been introduced in version 3.0.0 in order
+	// to improve performance
+	ThreeMeshUI.update();
+
+	controls.update();
+	renderer.render( scene, camera );
+}
diff --git a/examples/api__text_align.js b/examples/api__text_align.js
index 5cf076c9..71d99b89 100644
--- a/examples/api__text_align.js
+++ b/examples/api__text_align.js
@@ -1,3 +1,6 @@
+// xfg:title TextAlign
+// xfg:category learn
+
 import * as THREE from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -90,7 +93,7 @@ function makeTextPanel( index, textAlign, last = false ) {
 	} );
 
 	const titleText = new ThreeMeshUI.Text( {
-		content: '.set({textAlign: "' + textAlign + '"})',
+		textContent: '.set({textAlign: "' + textAlign + '"})',
 		fontSize: 0.075
 	} );
 
@@ -118,7 +121,7 @@ function makeTextPanel( index, textAlign, last = false ) {
 
 	container.add(
 		new ThreeMeshUI.Text( {
-			content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+			textContent: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
 			fontSize: 0.055
 		} )
 	);
diff --git a/examples/api__whitespace.js b/examples/api__whitespace.js
index 32f35c17..4875d6a3 100644
--- a/examples/api__whitespace.js
+++ b/examples/api__whitespace.js
@@ -1,3 +1,6 @@
+// xfg:title WhiteSpace
+// xfg:category learn
+
 import * as THREE from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -89,7 +92,7 @@ function makeTextPanel( index, whitespace, last = false) {
 	} );
 
 	const titleText = new ThreeMeshUI.Text( {
-			content: '.set({whiteSpace: "'+whitespace+'"})',
+			textContent: '.set({whiteSpace: "'+whitespace+'"})',
 			fontSize: 0.075
 		} );
 
@@ -118,7 +121,7 @@ function makeTextPanel( index, whitespace, last = false) {
 
 	container.add(
 		new ThreeMeshUI.Text( {
-			content: `But ere she from the church-door stepped
+			textContent: `But ere she from the church-door stepped
      She smiled and told us why:
 'It was a wicked woman's curse,'
      Quoth she, 'and what care I?'
diff --git a/examples/assets/fonts/msdf/roboto/regular.ttf b/examples/assets/fonts/msdf/roboto/regular.ttf
new file mode 100644
index 00000000..3d6861b4
Binary files /dev/null and b/examples/assets/fonts/msdf/roboto/regular.ttf differ
diff --git a/examples/assets/fonts/msdf/rye/regular.json b/examples/assets/fonts/msdf/rye/regular.json
new file mode 100644
index 00000000..2debba2f
--- /dev/null
+++ b/examples/assets/fonts/msdf/rye/regular.json
@@ -0,0 +1 @@
+{"pages":["Rye-Regular.png"],"chars":[{"id":87,"index":77,"char":"W","width":51,"height":37,"xoffset":-3,"yoffset":11,"xadvance":44,"chnl":15,"x":0,"y":0,"page":0},{"id":64,"index":54,"char":"@","width":51,"height":44,"xoffset":-1,"yoffset":11,"xadvance":50,"chnl":15,"x":52,"y":0,"page":0},{"id":106,"index":96,"char":"j","width":23,"height":49,"xoffset":-8,"yoffset":8,"xadvance":15,"chnl":15,"x":0,"y":38,"page":0},{"id":37,"index":27,"char":"%","width":47,"height":37,"xoffset":0,"yoffset":11,"xadvance":47,"chnl":15,"x":104,"y":0,"page":0},{"id":103,"index":93,"char":"g","width":31,"height":45,"xoffset":-1,"yoffset":13,"xadvance":25,"chnl":15,"x":152,"y":0,"page":0},{"id":109,"index":99,"char":"m","width":45,"height":29,"xoffset":-1,"yoffset":19,"xadvance":42,"chnl":15,"x":104,"y":38,"page":0},{"id":77,"index":67,"char":"M","width":44,"height":36,"xoffset":-1,"yoffset":11,"xadvance":43,"chnl":15,"x":24,"y":45,"page":0},{"id":119,"index":109,"char":"w","width":44,"height":29,"xoffset":-3,"yoffset":19,"xadvance":38,"chnl":15,"x":184,"y":0,"page":0},{"id":81,"index":71,"char":"Q","width":38,"height":43,"xoffset":-1,"yoffset":11,"xadvance":32,"chnl":15,"x":229,"y":0,"page":0},{"id":47,"index":37,"char":"/","width":18,"height":42,"xoffset":-1,"yoffset":10,"xadvance":17,"chnl":15,"x":69,"y":45,"page":0},{"id":123,"index":113,"char":"{","width":15,"height":42,"xoffset":0,"yoffset":10,"xadvance":14,"chnl":15,"x":88,"y":45,"page":0},{"id":125,"index":115,"char":"}","width":15,"height":42,"xoffset":0,"yoffset":10,"xadvance":14,"chnl":15,"x":184,"y":30,"page":0},{"id":91,"index":81,"char":"[","width":18,"height":42,"xoffset":0,"yoffset":10,"xadvance":16,"chnl":15,"x":200,"y":30,"page":0},{"id":93,"index":83,"char":"]","width":18,"height":42,"xoffset":-2,"yoffset":10,"xadvance":16,"chnl":15,"x":150,"y":46,"page":0},{"id":40,"index":30,"char":"(","width":18,"height":42,"xoffset":0,"yoffset":10,"xadvance":16,"chnl":15,"x":24,"y":82,"page":0},{"id":41,"index":31,"char":")","width":18,"height":42,"xoffset":-1,"yoffset":10,"xadvance":16,"chnl":15,"x":0,"y":88,"page":0},{"id":92,"index":82,"char":"\\","width":18,"height":42,"xoffset":-1,"yoffset":10,"xadvance":17,"chnl":15,"x":43,"y":82,"page":0},{"id":102,"index":92,"char":"f","width":25,"height":40,"xoffset":-1,"yoffset":7,"xadvance":18,"chnl":15,"x":104,"y":68,"page":0},{"id":105,"index":95,"char":"i","width":17,"height":39,"xoffset":-1,"yoffset":8,"xadvance":15,"chnl":15,"x":130,"y":68,"page":0},{"id":112,"index":102,"char":"p","width":31,"height":39,"xoffset":-1,"yoffset":19,"xadvance":28,"chnl":15,"x":62,"y":88,"page":0},{"id":113,"index":103,"char":"q","width":30,"height":39,"xoffset":-1,"yoffset":19,"xadvance":27,"chnl":15,"x":19,"y":125,"page":0},{"id":33,"index":23,"char":"!","width":18,"height":39,"xoffset":0,"yoffset":8,"xadvance":17,"chnl":15,"x":0,"y":131,"page":0},{"id":63,"index":53,"char":"?","width":28,"height":39,"xoffset":-3,"yoffset":9,"xadvance":24,"chnl":15,"x":268,"y":0,"page":0},{"id":55,"index":45,"char":"7","width":27,"height":38,"xoffset":0,"yoffset":9,"xadvance":26,"chnl":15,"x":297,"y":0,"page":0},{"id":65,"index":55,"char":"A","width":37,"height":36,"xoffset":-3,"yoffset":11,"xadvance":30,"chnl":15,"x":325,"y":0,"page":0},{"id":66,"index":56,"char":"B","width":34,"height":37,"xoffset":0,"yoffset":11,"xadvance":31,"chnl":15,"x":363,"y":0,"page":0},{"id":67,"index":57,"char":"C","width":31,"height":37,"xoffset":-1,"yoffset":11,"xadvance":27,"chnl":15,"x":325,"y":37,"page":0},{"id":68,"index":58,"char":"D","width":35,"height":37,"xoffset":0,"yoffset":11,"xadvance":33,"chnl":15,"x":268,"y":40,"page":0},{"id":69,"index":59,"char":"E","width":31,"height":37,"xoffset":0,"yoffset":11,"xadvance":30,"chnl":15,"x":219,"y":44,"page":0},{"id":70,"index":60,"char":"F","width":30,"height":37,"xoffset":0,"yoffset":11,"xadvance":28,"chnl":15,"x":169,"y":73,"page":0},{"id":71,"index":61,"char":"G","width":33,"height":37,"xoffset":-1,"yoffset":11,"xadvance":30,"chnl":15,"x":130,"y":108,"page":0},{"id":76,"index":66,"char":"L","width":30,"height":37,"xoffset":0,"yoffset":11,"xadvance":28,"chnl":15,"x":94,"y":109,"page":0},{"id":79,"index":69,"char":"O","width":34,"height":37,"xoffset":-1,"yoffset":11,"xadvance":32,"chnl":15,"x":50,"y":128,"page":0},{"id":83,"index":73,"char":"S","width":26,"height":37,"xoffset":0,"yoffset":10,"xadvance":26,"chnl":15,"x":19,"y":165,"page":0},{"id":84,"index":74,"char":"T","width":34,"height":37,"xoffset":-1,"yoffset":10,"xadvance":31,"chnl":15,"x":398,"y":0,"page":0},{"id":86,"index":76,"char":"V","width":36,"height":37,"xoffset":-3,"yoffset":11,"xadvance":29,"chnl":15,"x":433,"y":0,"page":0},{"id":90,"index":80,"char":"Z","width":32,"height":37,"xoffset":-1,"yoffset":11,"xadvance":29,"chnl":15,"x":470,"y":0,"page":0},{"id":98,"index":88,"char":"b","width":31,"height":37,"xoffset":-1,"yoffset":10,"xadvance":28,"chnl":15,"x":357,"y":38,"page":0},{"id":100,"index":90,"char":"d","width":30,"height":37,"xoffset":-1,"yoffset":10,"xadvance":28,"chnl":15,"x":304,"y":75,"page":0},{"id":104,"index":94,"char":"h","width":31,"height":37,"xoffset":-1,"yoffset":10,"xadvance":29,"chnl":15,"x":251,"y":78,"page":0},{"id":107,"index":97,"char":"k","width":32,"height":37,"xoffset":-1,"yoffset":10,"xadvance":28,"chnl":15,"x":200,"y":82,"page":0},{"id":108,"index":98,"char":"l","width":17,"height":37,"xoffset":-1,"yoffset":10,"xadvance":15,"chnl":15,"x":233,"y":82,"page":0},{"id":121,"index":111,"char":"y","width":31,"height":37,"xoffset":-3,"yoffset":19,"xadvance":25,"chnl":15,"x":164,"y":111,"page":0},{"id":50,"index":40,"char":"2","width":27,"height":37,"xoffset":1,"yoffset":11,"xadvance":27,"chnl":15,"x":125,"y":146,"page":0},{"id":51,"index":41,"char":"3","width":28,"height":37,"xoffset":0,"yoffset":11,"xadvance":26,"chnl":15,"x":85,"y":147,"page":0},{"id":53,"index":43,"char":"5","width":28,"height":37,"xoffset":0,"yoffset":11,"xadvance":26,"chnl":15,"x":46,"y":166,"page":0},{"id":54,"index":44,"char":"6","width":33,"height":37,"xoffset":-1,"yoffset":10,"xadvance":30,"chnl":15,"x":0,"y":203,"page":0},{"id":57,"index":47,"char":"9","width":32,"height":37,"xoffset":-1,"yoffset":11,"xadvance":30,"chnl":15,"x":389,"y":38,"page":0},{"id":72,"index":62,"char":"H","width":36,"height":36,"xoffset":0,"yoffset":11,"xadvance":35,"chnl":15,"x":422,"y":38,"page":0},{"id":73,"index":63,"char":"I","width":19,"height":36,"xoffset":0,"yoffset":11,"xadvance":18,"chnl":15,"x":283,"y":78,"page":0},{"id":74,"index":64,"char":"J","width":28,"height":36,"xoffset":-2,"yoffset":11,"xadvance":25,"chnl":15,"x":459,"y":38,"page":0},{"id":75,"index":65,"char":"K","width":35,"height":36,"xoffset":0,"yoffset":11,"xadvance":32,"chnl":15,"x":422,"y":75,"page":0},{"id":78,"index":68,"char":"N","width":35,"height":36,"xoffset":-1,"yoffset":11,"xadvance":34,"chnl":15,"x":458,"y":75,"page":0},{"id":80,"index":70,"char":"P","width":32,"height":36,"xoffset":0,"yoffset":11,"xadvance":29,"chnl":15,"x":335,"y":76,"page":0},{"id":82,"index":72,"char":"R","width":35,"height":36,"xoffset":0,"yoffset":11,"xadvance":32,"chnl":15,"x":368,"y":76,"page":0},{"id":85,"index":75,"char":"U","width":34,"height":36,"xoffset":-1,"yoffset":11,"xadvance":32,"chnl":15,"x":404,"y":112,"page":0},{"id":88,"index":78,"char":"X","width":35,"height":36,"xoffset":-3,"yoffset":11,"xadvance":28,"chnl":15,"x":439,"y":112,"page":0},{"id":89,"index":79,"char":"Y","width":35,"height":36,"xoffset":-3,"yoffset":11,"xadvance":28,"chnl":15,"x":475,"y":112,"page":0},{"id":116,"index":106,"char":"t","width":23,"height":36,"xoffset":-2,"yoffset":11,"xadvance":18,"chnl":15,"x":488,"y":38,"page":0},{"id":48,"index":38,"char":"0","width":32,"height":36,"xoffset":-1,"yoffset":11,"xadvance":30,"chnl":15,"x":303,"y":113,"page":0},{"id":49,"index":39,"char":"1","width":19,"height":36,"xoffset":1,"yoffset":11,"xadvance":19,"chnl":15,"x":283,"y":115,"page":0},{"id":52,"index":42,"char":"4","width":32,"height":36,"xoffset":-2,"yoffset":11,"xadvance":29,"chnl":15,"x":336,"y":113,"page":0},{"id":56,"index":46,"char":"8","width":32,"height":36,"xoffset":-2,"yoffset":11,"xadvance":29,"chnl":15,"x":369,"y":113,"page":0},{"id":38,"index":28,"char":"&","width":33,"height":36,"xoffset":1,"yoffset":11,"xadvance":35,"chnl":15,"x":196,"y":120,"page":0},{"id":35,"index":25,"char":"#","width":28,"height":36,"xoffset":0,"yoffset":11,"xadvance":29,"chnl":15,"x":251,"y":116,"page":0},{"id":59,"index":49,"char":";","width":15,"height":32,"xoffset":0,"yoffset":23,"xadvance":14,"chnl":15,"x":251,"y":44,"page":0},{"id":110,"index":100,"char":"n","width":31,"height":29,"xoffset":-1,"yoffset":19,"xadvance":28,"chnl":15,"x":153,"y":149,"page":0},{"id":117,"index":107,"char":"u","width":31,"height":29,"xoffset":-1,"yoffset":19,"xadvance":28,"chnl":15,"x":402,"y":149,"page":0},{"id":111,"index":101,"char":"o","width":30,"height":29,"xoffset":-1,"yoffset":19,"xadvance":28,"chnl":15,"x":434,"y":149,"page":0},{"id":115,"index":105,"char":"s","width":23,"height":30,"xoffset":0,"yoffset":18,"xadvance":22,"chnl":15,"x":465,"y":149,"page":0},{"id":118,"index":108,"char":"v","width":30,"height":29,"xoffset":-3,"yoffset":19,"xadvance":25,"chnl":15,"x":303,"y":150,"page":0},{"id":120,"index":110,"char":"x","width":30,"height":28,"xoffset":-2,"yoffset":19,"xadvance":25,"chnl":15,"x":334,"y":150,"page":0},{"id":97,"index":87,"char":"a","width":29,"height":29,"xoffset":-2,"yoffset":19,"xadvance":26,"chnl":15,"x":365,"y":150,"page":0},{"id":99,"index":89,"char":"c","width":26,"height":29,"xoffset":-1,"yoffset":19,"xadvance":23,"chnl":15,"x":334,"y":179,"page":0},{"id":101,"index":91,"char":"e","width":27,"height":29,"xoffset":-1,"yoffset":19,"xadvance":25,"chnl":15,"x":395,"y":179,"page":0},{"id":114,"index":104,"char":"r","width":26,"height":29,"xoffset":-1,"yoffset":19,"xadvance":23,"chnl":15,"x":361,"y":180,"page":0},{"id":122,"index":112,"char":"z","width":27,"height":29,"xoffset":-1,"yoffset":19,"xadvance":25,"chnl":15,"x":423,"y":179,"page":0},{"id":58,"index":48,"char":":","width":15,"height":25,"xoffset":0,"yoffset":23,"xadvance":14,"chnl":15,"x":404,"y":76,"page":0},{"id":34,"index":24,"char":"\"","width":24,"height":19,"xoffset":-1,"yoffset":11,"xadvance":22,"chnl":15,"x":451,"y":180,"page":0},{"id":43,"index":33,"char":"+","width":21,"height":22,"xoffset":0,"yoffset":22,"xadvance":22,"chnl":15,"x":280,"y":152,"page":0},{"id":42,"index":32,"char":"*","width":21,"height":20,"xoffset":0,"yoffset":10,"xadvance":20,"chnl":15,"x":489,"y":149,"page":0},{"id":39,"index":29,"char":"'","width":14,"height":19,"xoffset":-1,"yoffset":11,"xadvance":12,"chnl":15,"x":169,"y":46,"page":0},{"id":45,"index":35,"char":"-","width":16,"height":7,"xoffset":1,"yoffset":29,"xadvance":18,"chnl":15,"x":200,"y":73,"page":0},{"id":46,"index":36,"char":".","width":15,"height":12,"xoffset":0,"yoffset":36,"xadvance":14,"chnl":15,"x":0,"y":171,"page":0},{"id":32,"index":22,"char":" ","width":0,"height":0,"xoffset":-2,"yoffset":43,"xadvance":10,"chnl":15,"x":297,"y":39,"page":0}],"info":{"face":"Rye-Regular","size":42,"bold":0,"italic":0,"charset":["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"," ","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","0","1","2","3","4","5","6","7","8","9","!","?",":",";",".","/","*","-","+","'","\"","{","}","[","]","(",")","\\","&","%","#","@"],"unicode":1,"stretchH":100,"smooth":1,"aa":1,"padding":[2,2,2,2],"spacing":[0,0]},"common":{"lineHeight":53,"base":43,"scaleW":512,"scaleH":512,"pages":1,"packed":0,"alphaChnl":0,"redChnl":0,"greenChnl":0,"blueChnl":0},"distanceField":{"fieldType":"msdf","distanceRange":4},"kernings":[]}
\ No newline at end of file
diff --git a/examples/assets/fonts/msdf/rye/regular.png b/examples/assets/fonts/msdf/rye/regular.png
new file mode 100644
index 00000000..9d1d56f3
Binary files /dev/null and b/examples/assets/fonts/msdf/rye/regular.png differ
diff --git a/examples/assets/landscape.jpg b/examples/assets/landscape.jpg
new file mode 100644
index 00000000..5ff055b0
Binary files /dev/null and b/examples/assets/landscape.jpg differ
diff --git a/examples/behaviors/geometries/BoundsUVBehavior.js b/examples/behaviors/geometries/BoundsUVBehavior.js
index 4a1d2e1e..6754335e 100644
--- a/examples/behaviors/geometries/BoundsUVBehavior.js
+++ b/examples/behaviors/geometries/BoundsUVBehavior.js
@@ -1,12 +1,12 @@
 import { Vector3 } from 'three';
-import Behavior from '../../../src/utils/Behavior';
+import { Behavior } from 'three-mesh-ui';
 
 export default class BoundsUVBehavior extends Behavior {
 
 	/**
 	 *
-	 * @param {MeshUIComponent} subject
-	 * @param {Array.<MeshUIComponent|Mesh|Object3D>|MeshUIComponent|Mesh|Object3D} targets
+	 * @param {MeshUIBaseElement} subject
+	 * @param {Array.<MeshUIBaseElement|Mesh|Object3D>|MeshUIBaseElement|Mesh|Object3D} targets
 	 * @param {"uv","uv2","uvG"} uvSet
 	 */
 	constructor( subject, targets, uvSet = 'uv' ) {
@@ -23,38 +23,40 @@ export default class BoundsUVBehavior extends Behavior {
 
 		this._uvSet = uvSet;
 
+		this._actor = this.act.bind( this );
+
 	}
 
 	attach() {
 
-		this._subject.addAfterUpdate( this.act );
+		this._subject.addAfterUpdate( this._actor );
 
 	}
 
 	detach() {
 
-		this._subject.removeAfterUpdate( this.act );
+		this._subject.removeAfterUpdate( this._actor );
 
 	}
 
-	act = () => {
+	/**
+	 * @returns {void}
+	 */
+	act() {
 
-		if ( this._subject.children.length > 0 ) {
+		if ( this._subject._backgroundMesh ) {
 
-			/**
-			 * @Type {Mesh}
-			 */
-			const firstChild = this._subject.children[ 0 ];
+			const referenceMesh = this._subject._backgroundMesh;
 
 			// be sure that box is computed before acquiring it
 			// @NOTES : `text.children[0]` can currently work because `mergedGeometries`
-			firstChild.geometry.computeBoundingBox();
+			referenceMesh.geometry.computeBoundingBox();
 
 			// this will return a THREE.Box3
-			const bBox = firstChild.geometry.boundingBox;
+			const bBox = referenceMesh.geometry.boundingBox;
 
 			// compute the current bounding box with the world matrix
-			bBox.applyMatrix4( firstChild.matrixWorld );
+			bBox.applyMatrix4( referenceMesh.matrixWorld );
 
 			// Using the subject THREE.Box3, we can compute
 			// the width and the height of the whole geometry
@@ -66,28 +68,36 @@ export default class BoundsUVBehavior extends Behavior {
 			// Apply those uv for each targets
 			for ( let i = 0; i < this._targets.length; i++ ) {
 
-				let target = this._targets[ i ];
-				if ( target.children && target.children.length ) {
+				const target = this._targets[ i ];
+				let subTargets = [];
+				if( target.isUI && target.isText ) {
+					subTargets = [...target._children._inlines.filter( ie => ie._fontMesh ).map( ie => ie._fontMesh)];
+				}else{
+					subTargets = [target];
+				}
 
-					target = target.children[ 0 ];
+				for ( let j = 0; j < subTargets.length; j++ ) {
+					const subTarget = subTargets[ j ];
 
-				}
+					if ( subTarget.type !== 'Mesh' ) continue;
+
+					const positionAttribute = subTarget.geometry.getAttribute( 'position' );
+					const uvAttribute = subTarget.geometry.getAttribute( this._uvSet );
 
-				if ( target.type !== 'Mesh' ) continue;
+					const vertex = new Vector3();
+					for ( let i = 0; i < positionAttribute.count; i++ ) {
 
-				const positionAttribute = target.geometry.getAttribute( 'position' );
-				const uvAttribute = target.geometry.getAttribute( this._uvSet );
+						vertex.fromBufferAttribute( positionAttribute, i );
 
-				const vertex = new Vector3();
-				for ( let i = 0; i < positionAttribute.count; i++ ) {
+						uvAttribute.setXY( i, ( vertex.x / geometryW ) + 0.5, ( vertex.y / geometryH ) + 0.5 );
 
-					vertex.fromBufferAttribute( positionAttribute, i );
+					}
 
-					uvAttribute.setXY( i, ( vertex.x / geometryW ) + 0.5, ( vertex.y / geometryH ) + 0.5 );
+					uvAttribute.needsUpdate = true;
 
 				}
 
-				uvAttribute.needsUpdate = true;
+
 
 			}
 
diff --git a/examples/behaviors/helpers/BoxAnchorsBehavior.js b/examples/behaviors/helpers/BoxAnchorsBehavior.js
index 3d7810cd..4b44cdb1 100644
--- a/examples/behaviors/helpers/BoxAnchorsBehavior.js
+++ b/examples/behaviors/helpers/BoxAnchorsBehavior.js
@@ -1,69 +1,107 @@
-import Behavior from '../../../src/utils/Behavior';
 import { Mesh, MeshBasicMaterial, PlaneGeometry } from 'three';
+import { Behavior } from 'three-mesh-ui';
 
+/**
+ * Sample of Behavior that relies on AfterUpdate calls
+ */
 export default class BoxAnchorsBehavior extends Behavior{
 
+
 	constructor( subject ) {
 
 		super( subject );
 
+		// This behavior requires additional objects and materials
 		const anchorGeometry = new PlaneGeometry(0.05, 0.05);
 		const anchorMaterial = new MeshBasicMaterial({color:0xff9900});
 
+		// create meshes
 		this.anchorTL = new Mesh( anchorGeometry, anchorMaterial );
 		this.anchorTC = new Mesh( anchorGeometry, anchorMaterial );
 		this.anchorTR = new Mesh( anchorGeometry, anchorMaterial );
 		this.anchorCL = new Mesh( anchorGeometry, anchorMaterial );
-		this.anchorC = new Mesh( anchorGeometry, anchorMaterial );
+		this.anchorC  = new Mesh( anchorGeometry, anchorMaterial );
 		this.anchorCR = new Mesh( anchorGeometry, anchorMaterial );
 		this.anchorBL = new Mesh( anchorGeometry, anchorMaterial );
 		this.anchorBC = new Mesh( anchorGeometry, anchorMaterial );
 		this.anchorBR = new Mesh( anchorGeometry, anchorMaterial );
 
+		// place meshes
+		this.anchorTL.position.z = this.anchorTC.position.z = this.anchorTR.position.z =
+		this.anchorCL.position.z = this.anchorC.position.z = this.anchorCR.position.z =
+		this.anchorBL.position.z = this.anchorBC.position.z = this.anchorBR.position.z = 0.005;
+
+		// store an _actor binded function
+		this._actor = this.act.bind( this );
+
 	}
 
+	/**
+	 * When attaching this behavior what should happen?
+	 */
 	attach() {
 
+		// Lets add all our additional meshes as subject children
 		this._subject.add(
 			this.anchorTL, this.anchorTC, this.anchorTR,
 			this.anchorCL, this.anchorC, this.anchorCR,
 			this.anchorBL, this.anchorBC, this.anchorBR,
 		);
 
-		this._subject.addAfterUpdate( this.act )
+		// register an afterUpdate call on the subject. After update call will run this._action binded function.
+		this._subject.addAfterUpdate( this._actor )
 
+		// optionally, this as soon as attached, this behavior won't wait the first afterUpdate call
+		// and chose manually act one first time.
 		this.act();
 
 	}
 
+	/**
+	 * When detaching this behavior what should happen?
+	 */
 	detach() {
 
+		// Lets remove all our additional meshes as subject children
 		this._subject.remove(
 			this.anchorTL, this.anchorTC, this.anchorTR,
 			this.anchorCL, this.anchorC, this.anchorCR,
 			this.anchorBL, this.anchorBC, this.anchorBR,
 		);
 
-		this._subject.removeAfterUpdate( this.act );
+		// remove the afterUpdate call we registered in attach()
+		this._subject.removeAfterUpdate( this._actor );
 
 	}
 
-	act = () => {
+	/**
+	 * When this behavior acts, what should happen?
+	 */
+	act () {
+
+		// Job: It should correctly place each visual anchors at their right position.
+		// Prerequisite? The bounds of the the subject!
+
+		// Let retrieve the bounds property of the subject.
+		const bounds = this._subject._bounds;
 
-		const left = this._subject.centerX - this._subject.innerWidth / 2;
-		const right = this._subject.centerX + this._subject.innerWidth / 2;
-		const top = this._subject.centerY + this._subject.innerHeight / 2;
-		const bottom = this._subject.centerY - this._subject.innerHeight / 2;
+		// Thanks to the bounds. we can acquire more values
+		// Use those to compute left,right,top and bottom position
+		const left = bounds._centerX - bounds._innerWidth / 2;
+		const right = bounds._centerX + bounds._innerWidth / 2;
+		const top = bounds._centerY + bounds._innerHeight / 2;
+		const bottom = bounds._centerY - bounds._innerHeight / 2;
 
+		// Then place each anchors thanks to the computed bounds values.
 		this.anchorTL.position.x = this.anchorCL.position.x = this.anchorBL.position.x = left;
 		this.anchorTR.position.x = this.anchorCR.position.x = this.anchorBR.position.x = right;
 
 		this.anchorTL.position.y = this.anchorTC.position.y = this.anchorTR.position.y = top;
 		this.anchorBL.position.y = this.anchorBC.position.y = this.anchorBR.position.y = bottom;
 
-		this.anchorC.position.set( this._subject.centerX, this._subject.centerY );
-		this.anchorTC.position.x = this.anchorBC.position.x = this._subject.centerX;
-		this.anchorCL.position.y = this.anchorCR.position.y = this._subject.centerY;
+		this.anchorC.position.set( bounds._centerX, bounds._centerY , this.anchorC.position.z );
+		this.anchorTC.position.x = this.anchorBC.position.x = bounds._centerX;
+		this.anchorCL.position.y = this.anchorCR.position.y = bounds._centerY;
 
 	}
 
diff --git a/examples/behaviors/helpers/BoxLayoutBehavior.js b/examples/behaviors/helpers/BoxLayoutBehavior.js
index 944466c1..629acfec 100644
--- a/examples/behaviors/helpers/BoxLayoutBehavior.js
+++ b/examples/behaviors/helpers/BoxLayoutBehavior.js
@@ -1,33 +1,59 @@
-import { Mesh, MeshBasicMaterial, PlaneBufferGeometry, Texture, Vector4 } from 'three';
-import Behavior from '../../../src/utils/Behavior';
+import { BufferAttribute, Mesh, MeshBasicMaterial, PlaneGeometry, RepeatWrapping, Texture, TextureLoader, Vector4 } from 'three';
+import { Behavior } from 'three-mesh-ui';
+
 
 export default class BoxLayoutBehavior extends Behavior{
 
 	/**
 	 *
-	 * @param {MeshUIComponent} subject
+	 * @param {MeshUIBaseElement} subject
+	 * @param {Function|null}onTextureLoadedCallback
+	 *
 	 */
-	constructor( subject ) {
+	constructor( subject, onTextureLoadedCallback = null ) {
 
 		super( subject );
 
+		const geometry = new PlaneGeometry( 1, 1 );
+
+		// Add additional uv for borders computations by copying initial uv
+		const uvB = new BufferAttribute( new Float32Array( geometry.getAttribute('uv').array ), 2);
+		geometry.setAttribute('uvB', uvB ).name = 'uvB';
+
 		/**
 		 *
 		 * @type {Mesh<PlaneGeometry, BoxLayoutMaterial>}
 		 * @private
 		 */
 		this._overlay = new Mesh(
-			new PlaneBufferGeometry(1,1),
-			new BoxLayoutMaterial({map:new Texture(),opacity:0.8, transparent:true}) );
+			geometry,
+			new BoxLayoutMaterial({map:new Texture(),opacity:1, transparent:true}) );
+
+		new TextureLoader().load( "https://threejs.org/examples/textures/uv_grid_opengl.jpg", (texture) => {
+
+			this._texture = texture;
+			this._texture.matrixAutoUpdate = true;
+			this._texture.wrapS = this._texture.wrapT = RepeatWrapping;
+			this._overlay.material.map = this._texture;
+
+			this.act();
+
+			if( onTextureLoadedCallback ) {
+				onTextureLoadedCallback( texture );
+			}
+
+		});
 
 		this._overlay.position.z = 0.0001;
 
+		this._actor = this.act.bind( this );
+
 	}
 
 	attach() {
 
 		this._subject.add (this._overlay);
-		this._subject.addAfterUpdate( this.act );
+		this._subject.addAfterUpdate( this._actor );
 		this.act();
 
 	}
@@ -35,18 +61,20 @@ export default class BoxLayoutBehavior extends Behavior{
 	detach() {
 
 		this._subject.remove( this._overlay );
-		this._subject.removeAfterUpdate( this.act );
+		this._subject.removeAfterUpdate( this._actor );
 
 	}
 
-	act = () => {
+	act () {
 
-		const margin = this._subject._margin;
-		const border = this._subject._borderWidth;
-		const padding = this._subject._padding;
+		const margin = this._subject._margin._value;
+		const border = this._subject._borderWidth._value;
+		const padding = this._subject._padding._value;
 
-		const offsetWidth = this._subject.getOffsetWidth() + margin.w + margin.y;
-		const offsetHeight = this._subject.getOffsetHeight() + margin.x + margin.z;
+		const offsetWidth = this._subject._bounds._offsetWidth + margin.w + margin.y;
+		const offsetHeight = this._subject._bounds._offsetHeight + margin.x + margin.z;
+
+		if( offsetWidth === 0 || offsetHeight === 0 ) return;
 
 		this._overlay.scale.set( offsetWidth, offsetHeight, 1);
 
@@ -75,6 +103,19 @@ export default class BoxLayoutBehavior extends Behavior{
 			( margin.w + border.w + padding.w ) / offsetWidth
 		);
 
+
+		if( !this._texture ) return;
+
+		this._texture.repeat.set(
+			offsetWidth,
+			offsetHeight
+		);
+
+		this._texture.offset.set(
+			1 - ( margin.w + border.w + padding.w ),
+			- ( margin.z + border.z + padding.z )
+		);
+
 	}
 
 	clear() {
@@ -84,6 +125,10 @@ export default class BoxLayoutBehavior extends Behavior{
 
 	}
 
+	set color( v ) {
+		this._overlay.material.color.set( v );
+	}
+
 }
 
 class BoxLayoutMaterial extends MeshBasicMaterial{
@@ -101,6 +146,16 @@ class BoxLayoutMaterial extends MeshBasicMaterial{
 			shader.uniforms.padding = this.userData.padding;
 			shader.uniforms.border = this.userData.border;
 
+			shader.vertexShader = shader.vertexShader.replace(
+				'#include <uv_pars_vertex>',
+				'#include <uv_pars_vertex>\n' + paddingColorParsVertex
+			);
+
+			shader.vertexShader = shader.vertexShader.replace(
+				'#include <uv_vertex>',
+				'#include <uv_vertex>\n' + paddingColorVertex
+			)
+
 			shader.fragmentShader = shader.fragmentShader.replace(
 				'#include <uv_pars_fragment>',
 				'#include <uv_pars_fragment>\n' + paddingColorParsFragment
@@ -117,7 +172,19 @@ class BoxLayoutMaterial extends MeshBasicMaterial{
 
 }
 
+// const pars vertex
+const paddingColorParsVertex = /* glsl */`
+attribute vec2 uvB;
+varying vec2 vUvB;
+`
+
+const paddingColorVertex = /* glsl */`
+vUvB = uvB;
+`
+
 const paddingColorParsFragment = /* glsl */`
+varying vec2 vUvB;
+
 uniform vec4 margin;
 uniform vec4 border;
 uniform vec4 padding;
@@ -125,17 +192,24 @@ uniform vec4 padding;
 
 
 const paddingColorFragment = /* glsl */`
-if( vUv.x < padding.w || vUv.x > padding.y || vUv.y > padding.x || vUv.y < padding.z ) {
+if( vUvB.x < padding.w || vUvB.x > padding.y || vUvB.y > padding.x || vUvB.y < padding.z ) {
 	diffuseColor = vec4( 0.76, 0.815, 0.545, opacity );
 }else{
-	diffuseColor.a = 0.02;
+
+	// greyscale
+	// float biggerColorComponent = diffuseColor.x;
+	// biggerColorComponent = max( biggerColorComponent, diffuseColor.y );
+	// biggerColorComponent = max( biggerColorComponent, diffuseColor.z );
+	// diffuseColor.xyz = vec3( biggerColorComponent );
+
+	diffuseColor.a = 1.;
 }
 
-if( vUv.x < border.w || vUv.x > border.y || vUv.y > border.x || vUv.y < border.z ) {
+if( vUvB.x < border.w || vUvB.x > border.y || vUvB.y > border.x || vUvB.y < border.z ) {
 	diffuseColor = vec4( 0.992, 0.86, 0.588, opacity );
 }
 
-if( vUv.x < margin.w || vUv.x > margin.y || vUv.y > margin.x || vUv.y < margin.z ) {
+if( vUvB.x < margin.w || vUvB.x > margin.y || vUvB.y > margin.x || vUvB.y < margin.z ) {
 	diffuseColor = vec4( 0.98, 0.8, 0.592, opacity );
 }
 
diff --git a/examples/behaviors/helpers/TypographicLayoutBehavior.js b/examples/behaviors/helpers/TypographicLayoutBehavior.js
new file mode 100644
index 00000000..bd455e7d
--- /dev/null
+++ b/examples/behaviors/helpers/TypographicLayoutBehavior.js
@@ -0,0 +1,122 @@
+import { Mesh, MeshBasicMaterial, PlaneGeometry } from 'three';
+import { Behavior } from 'three-mesh-ui';
+
+/**
+ * Sample of Behavior that relies on AfterUpdate calls
+ */
+export default class TypographicLayoutBehavior extends Behavior{
+
+
+	constructor( subject, backgroundColor = 0x9e9e9e, lineColor = 0xff0099 ) {
+
+		super( subject );
+
+		this.lineMat = new MeshBasicMaterial( { color: backgroundColor, opacity: 1 } );
+		this.baseMat = new MeshBasicMaterial( { color: lineColor, opacity: 1 } );
+		this.medianMat = new MeshBasicMaterial( { color: lineColor } );
+
+		this.lines = [];
+
+		// This behavior requires additional objects and materials
+
+		// store an _actor binded function
+		this._actor = this.act.bind( this );
+
+	}
+
+	/**
+	 * When attaching this behavior what should happen?
+	 */
+	attach() {
+
+		// register an afterUpdate call on the subject. After update call will run this._action binded function.
+		this._subject.addAfterUpdate( this._actor )
+
+		// optionally, this as soon as attached, this behavior won't wait the first afterUpdate call
+		// and chose manually act one first time.
+		if( this._subject.lines )	this.act();
+
+	}
+
+	/**
+	 * When detaching this behavior what should happen?
+	 */
+	detach() {
+
+		// remove the afterUpdate call we registered in attach()
+		this._subject.removeAfterUpdate( this._actor );
+
+
+
+	}
+
+	/**
+	 * When this behavior acts, what should happen?
+	 */
+	act () {
+
+		// remove all lines previously added
+		for ( let i = 0; i < this.lines.length; i++ ) {
+			const lineMesh = this.lines[ i ];
+			this._subject.remove( lineMesh );
+		}
+
+		this.lines = [];
+
+
+
+		// retrieve all lines sent by InlineManager for the textBlock
+		for ( let i = 0; i < this._subject.lines.length; i++ ) {
+
+			const line = this._subject.lines[ i ];
+
+			if ( !line[ 0 ] ) continue;
+
+			const lineHeight = line.lineHeight;
+			const lineBase = line.lineBase;
+
+			const deltaLine = lineHeight - lineBase;
+
+			// TextBackground
+			const lineGeo = new PlaneGeometry( line.width, lineHeight );
+			const lineMesh = new Mesh( lineGeo, this.lineMat );
+			lineMesh.name = 'DevLineMesh';
+
+			lineMesh.position.x = line.x + line.width/2;
+			lineMesh.position.y = line.y - line.lineHeight/2;
+
+			this.lines.push( lineMesh );
+			this._subject.add( lineMesh );
+
+			// baseline
+			const baselineMesh = new Mesh( new PlaneGeometry( line.width, 0.002 ), this.baseMat );
+			baselineMesh.position.x = lineMesh.position.x;
+			// baselineMesh.position.y = line.y -  // Baseline
+			baselineMesh.position.y = lineMesh.position.y - lineBase/2 + 0.002;
+
+			this.lines.push( baselineMesh );
+			this._subject.add( baselineMesh );
+
+
+			// Median
+			const medianMesh = new Mesh( new PlaneGeometry( line.width, 0.002 ),this.medianMat );
+
+			medianMesh.position.x = lineMesh.position.x;
+			medianMesh.position.y =  lineMesh.position.y + deltaLine/2 - 0.002; // Baseline
+
+			this.lines.push( medianMesh );
+			this._subject.add( medianMesh );
+
+			baselineMesh.position.z = medianMesh.position.z = this._subject.children[0].position.z + 0.006;
+
+
+		}
+
+
+	}
+
+	_clear(){
+
+	}
+
+}
diff --git a/examples/behaviors/input/KeyboardsSynchronizerBehavior.js b/examples/behaviors/input/KeyboardsSynchronizerBehavior.js
new file mode 100644
index 00000000..fb5a150c
--- /dev/null
+++ b/examples/behaviors/input/KeyboardsSynchronizerBehavior.js
@@ -0,0 +1,77 @@
+import { Behavior } from 'three-mesh-ui';
+
+/**
+ * Job : Reports the PhysicalKeyboard touches on the virtualKeyboard
+ */
+export default class KeyboardsSynchronizerBehavior extends Behavior {
+
+	constructor( subject ) {
+
+		super( subject );
+
+	}
+
+	act() {}
+
+	attach() {
+		window.document.addEventListener( 'keydown', this._onKeyDown );
+		window.document.addEventListener( 'keyup', this._onKeyUp );
+	}
+
+	detach() {
+		window.document.removeEventListener( 'keydown', this._onKeyDown );
+		window.document.removeEventListener( 'keyup', this._onKeyUp );
+	}
+
+	_onKeyDown = ( event ) => {
+
+		let lowerKey = event.key.toLowerCase();
+
+		if ( lowerKey === ' ' ) lowerKey = 'space';
+		if ( lowerKey === 'delete' ) lowerKey = 'backspace';
+		switch ( lowerKey ) {
+
+			case 'space':
+			case 'backspace':
+			case 'capslock':
+			case 'enter':
+				const iconKey = this._subject.getObjectByName( lowerKey );
+				if ( iconKey && iconKey.isUI ) iconKey.activatePseudoState( 'active' );
+
+				break;
+			default:
+				const object = this._subject.getObjectByName( event.key );
+				if ( object && object.isUI ) object.activatePseudoState( 'active' );
+		}
+
+	};
+
+	_onKeyUp = ( event ) => {
+
+		let lowerKey = event.key.toLowerCase();
+
+		if ( lowerKey === ' ' ) lowerKey = 'space';
+		if ( lowerKey === 'delete' ) lowerKey = 'backspace';
+
+		switch ( lowerKey ) {
+			case 'capslock':
+				const capsLock = this._subject.getObjectByName( lowerKey );
+				if ( capsLock && capsLock.isUI ) {
+					capsLock.togglePseudoState( 'checked' );
+					capsLock.deactivatePseudoState( 'active' );
+				}
+				break;
+			case 'backspace':
+			case 'space':
+			case 'enter':
+				const iconKey = this._subject.getObjectByName( lowerKey );
+				if ( iconKey && iconKey.isUI ) iconKey.deactivatePseudoState( 'active' );
+				break;
+			default:
+				const object = this._subject.getObjectByName( event.key );
+				if ( object && object.isUI ) object.deactivatePseudoState( 'active' );
+		}
+
+	}
+
+}
diff --git a/examples/behaviors/input/PhysicalKeyboardFeederBehavior.js b/examples/behaviors/input/PhysicalKeyboardFeederBehavior.js
new file mode 100644
index 00000000..c3f1333d
--- /dev/null
+++ b/examples/behaviors/input/PhysicalKeyboardFeederBehavior.js
@@ -0,0 +1,52 @@
+import { Behavior } from 'three-mesh-ui';
+
+export default class PhysicalKeyboardFeederBehavior extends Behavior {
+
+	constructor( subject ) {
+
+		super( subject );
+
+	}
+
+	act() { }
+
+	attach() {
+		window.document.addEventListener( 'keyup', this._onKeyboardEvent );
+	}
+
+	detach() {
+		window.document.removeEventListener( 'keyup', this._onKeyboardEvent );
+	}
+
+	_onKeyboardEvent = ( event ) => {
+
+		switch ( event.key.toLowerCase() ) {
+
+			case 'enter' :
+				this._subject.set( { textContent: this._subject.textContent + '\n' } );
+				break;
+
+			case 'space' :
+				this._subject.set( { textContent: this._subject.textContent + ' ' } );
+				break;
+
+			case 'delete':
+			case 'backspace' :
+				const text = this._subject;
+				if ( !text.textContent.length ) break;
+				text.set( { textContent: text.textContent.substring( 0, text.textContent.length - 1 ) || '' } );
+				break;
+
+			default:
+
+				let key = event.key;
+				key = key.replace( 'numpad', '' );
+				if ( key.length === 1 ) {
+
+					this._subject.set( { textContent: this._subject.textContent + key } );
+
+				}
+		}
+
+	}
+}
diff --git a/examples/behaviors/size/BestFitBehavior.js b/examples/behaviors/size/BestFitBehavior.js
index 0f2c2dd0..f7b375f7 100644
--- a/examples/behaviors/size/BestFitBehavior.js
+++ b/examples/behaviors/size/BestFitBehavior.js
@@ -1,229 +1,94 @@
-import Behavior from '../../../src/utils/Behavior';
+import TextLayouterBestFit from './properties/TextLayouterBestFit';
+import { Behavior } from 'three-mesh-ui';
 
+/**
+ * Sample of Behavior that relies on AlteredProperties
+ */
 export default class BestFitBehavior extends Behavior {
 
 	constructor( subject, mode = 'auto') {
 
 		super( subject );
-		this.mode = mode;
-
-		this._subject.calculateHeight = _calculateHeight.bind( this._subject);
-
-	}
-
-	set mode( value ) {
-
-		let algo = _calculateAutoFit;
-		switch ( value ) {
-			case 'grow':
-				algo = _calculateGrowFit;
-				break;
-			case 'shrink':
-				algo = _calculateShrinkFit;
-				break;
-		}
-
-		this._mode = value;
-
-		this._algo = algo.bind( this._subject );
 
-	}
-
-	get mode() {
+		// Internally, three-mesh-ui Text will have a property called 'layouter' accessible through 'myText._layouter'
+		// This behavior will swap the default 'layouter' property of a text, with a custom one TextLayouterBestFit
+		this._overriddenTextLayouter = new TextLayouterBestFit(  );
+		this._overriddenTextLayouter._mode = this.mode;
+		// it will also store what was the property prior alteration,
+		// in order to restore it uppon detach().
+		this._previousLayouter = null;
 
-		return this._mode;
+		this.mode = mode;
 
 	}
 
+	/**
+	 * What should happen when attaching this behavior?
+	 */
 	attach() {
 
-		this._subject.parseParams = () => {
-			if ( this._subject.childrenInlines.length === 0 ) return;
+		if( !this._previousLayouter ) {
+			// replace the default layouter property, with our custom one
+			// and store the previously working property in order to be able to restore it later
+			this._previousLayouter = this._subject.replaceProperty( 'layouter', this._overriddenTextLayouter );
 
-			this._algo();
 		}
 
-		this._subject.update( true, true, false );
-
 	}
 
+	/**
+	 * What should happend when detaching this behavior?
+	 */
 	detach() {
 
-		this._subject.childrenTexts.forEach( child => {
+		// If we alread swap properties
+		if( this._previousLayouter ) {
 
-			child._fitFontSize = undefined;
+			// we can re-swap it again. Replacing our custom one, with default one.
+			this._subject.replaceProperty( 'layouter', this._previousLayouter );
+			this._previousLayouter = null;
 
-		} );
-
-		this._subject.update( true, true, false );
+		}
 
 	}
 
+	/**
+	 *
+	 */
 	act() {
 		// acts doesn't need anything here
+		// as properties are parts of three-mesh-ui main update loop
+		// but we should analyse the TextLayouterBestFit source code to understand what happen.
 	}
 
 	clear() {
 
-		delete this._subject.calculateHeight;
-
 	}
 
-}
-
-function _calculateHeight( fontMultiplier ) {
-
-	this.childrenInlines.forEach( inlineComponent => {
-
-		if ( inlineComponent.isInlineBlock ) return;
-
-		// Set font size and recalculate dimensions
-		inlineComponent._fitFontSize = inlineComponent.getFontSize() * fontMultiplier;
-		inlineComponent.calculateInlines( inlineComponent._fitFontSize );
-
-	} );
-
-	const lines = this.computeLines();
-
-	return lines.height;
-}
-
-function _calculateGrowFit() {
-
-	const INNER_HEIGHT = this.innerHeight;
-
-	//Iterative method to find a fontSize of text children that text will fit into container
-	let iterations = 1;
-	const heightTolerance = 0.075;
-	const firstText = this.childrenInlines.find( inlineComponent => inlineComponent.isText );
-
-	let minFontMultiplier = 1;
-	let maxFontMultiplier = 2;
-	let fontMultiplier = firstText._fitFontSize ? firstText._fitFontSize / firstText.getFontSize() : 1;
-	let textHeight;
-
-	do {
-
-		textHeight = this.calculateHeight( fontMultiplier );
-
-		if ( textHeight > INNER_HEIGHT ) {
-
-			if ( fontMultiplier <= minFontMultiplier ) { // can't shrink text
-
-				this.childrenInlines.forEach( inlineComponent => {
-
-					if ( inlineComponent.isInlineBlock ) return;
-
-					// ensure fontSize does not shrink
-					inlineComponent._fitFontSize = inlineComponent.getFontSize();
-
-				} );
-
-				break;
-
-			}
-
-			maxFontMultiplier = fontMultiplier;
-			fontMultiplier -= ( maxFontMultiplier - minFontMultiplier ) / 2;
-
-		} else {
-
-			if ( Math.abs( INNER_HEIGHT - textHeight ) < heightTolerance ) break;
-
-			if ( Math.abs( fontMultiplier - maxFontMultiplier ) < 5e-10 ) maxFontMultiplier *= 2;
-
-			minFontMultiplier = fontMultiplier;
-			fontMultiplier += ( maxFontMultiplier - minFontMultiplier ) / 2;
-
-		}
-
-	} while ( ++iterations <= 10 );
-
-}
-
-function _calculateShrinkFit() {
-
-	const INNER_HEIGHT = this.innerHeight;
-
-	// Iterative method to find a fontSize of text children that text will fit into container
-	let iterations = 1;
-	const heightTolerance = 0.075;
-	const firstText = this.childrenInlines.find( inlineComponent => inlineComponent.isText );
-
-	let minFontMultiplier = 0;
-	let maxFontMultiplier = 1;
-	let fontMultiplier = firstText._fitFontSize ? firstText._fitFontSize / firstText.getFontSize() : 1;
-	let textHeight;
-
-	do {
-
-		textHeight = this.calculateHeight( fontMultiplier );
-
-		if ( textHeight > INNER_HEIGHT ) {
-
-			maxFontMultiplier = fontMultiplier;
-			fontMultiplier -= ( maxFontMultiplier - minFontMultiplier ) / 2;
-
-		} else {
-
-			if ( fontMultiplier >= maxFontMultiplier ) { // can't grow text
-
-				this.childrenInlines.forEach( inlineComponent => {
-
-					if ( inlineComponent.isInlineBlock ) return;
-
-					// ensure fontSize does not grow
-					inlineComponent._fitFontSize = inlineComponent.getFontSize();
-
-				} );
-
-				break;
-
-			}
-
-			if ( Math.abs( INNER_HEIGHT - textHeight ) < heightTolerance ) break;
-
-			minFontMultiplier = fontMultiplier;
-			fontMultiplier += ( maxFontMultiplier - minFontMultiplier ) / 2;
-
-		}
-
-	} while ( ++iterations <= 10 );
-}
-
-function _calculateAutoFit()  {
-
-	const INNER_HEIGHT = this.innerHeight;
-
-	//Iterative method to find a fontSize of text children that text will fit into container
-	let iterations = 1;
-	const heightTolerance = 0.075;
-	const firstText = this.childrenInlines.find( inlineComponent => inlineComponent.isText );
-
-	let minFontMultiplier = 0;
-	let maxFontMultiplier = 2;
-	let fontMultiplier = firstText._fitFontSize ? firstText._fitFontSize / firstText.getFontSize() : 1;
-	let textHeight;
-
-	do {
-
-		textHeight = this.calculateHeight( fontMultiplier );
+	/**
+	 * Setting the mode on this behavior
+	 * @param value
+	 */
+	set mode( value ) {
 
-		if ( textHeight > INNER_HEIGHT ) {
+		this._mode = value;
 
-			maxFontMultiplier = fontMultiplier;
-			fontMultiplier -= ( maxFontMultiplier - minFontMultiplier ) / 2;
+		// would also update the mode on the altered property
+		this._overriddenTextLayouter._mode = this._mode;
 
-		} else {
+		// force the property to be updated next frame
+		this._overriddenTextLayouter._needsUpdate = true;
 
-			if ( Math.abs( INNER_HEIGHT - textHeight ) < heightTolerance ) break;
+	}
 
-			if ( Math.abs( fontMultiplier - maxFontMultiplier ) < 5e-10 ) maxFontMultiplier *= 2;
+	/**
+	 *
+	 * @returns {*}
+	 */
+	get mode() {
 
-			minFontMultiplier = fontMultiplier;
-			fontMultiplier += ( maxFontMultiplier - minFontMultiplier ) / 2;
+		return this._mode;
 
-		}
+	}
 
-	} while ( ++iterations <= 10 );
 }
diff --git a/examples/behaviors/size/properties/TextLayouterBestFit.js b/examples/behaviors/size/properties/TextLayouterBestFit.js
new file mode 100644
index 00000000..83d0358a
--- /dev/null
+++ b/examples/behaviors/size/properties/TextLayouterBestFit.js
@@ -0,0 +1,237 @@
+import TextLayouter from '../../../../src/core/properties/TextLayouter';
+
+/**
+ * Inheritance is TextLayouterBestFit < TextLayouter < BaseProperty
+ * You should have minimal knowledge of BaseProperty
+ */
+export default class TextLayouterBestFit extends TextLayouter {
+
+	constructor() {
+
+		super();
+
+		this._fontMultiplier = 1;
+
+		this._mode = 'auto';
+
+		this._algo = null;
+
+		this._superLayouter = super.process;
+	}
+
+	/* eslint-disable no-unused-vars */
+	update( element, out ) {  /* eslint-enable no-unused-vars */
+
+		switch ( this._mode ) {
+
+			case 'auto':
+			case 'both':
+				this._algo = _calculateAutoFit.bind(this);
+				break;
+
+			case 'shrink' :
+				this._algo = _calculateShrinkFit.bind(this);
+				break;
+
+			case 'grow' :
+				this._algo = _calculateGrowFit.bind(this);
+				break;
+
+			case 'none' :
+					this._algo = this._superLayouter;
+				break;
+
+			default:
+				throw new Error( "ThreeMeshUI::BestFitBehavior has no valid mode");
+		}
+
+		this._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		this._algo( element );
+
+	}
+
+	/**
+	 * Override the resetInline protected method.
+	 * Instead of always resetting with defined fontSize.value
+	 * We will alter it with our custom _fontMultiplier value
+	 *
+	 * @override
+	 * @protected
+	 * @param inlineElement
+	 *
+	 */
+	_resetInlines( inlineElement ) {
+
+		// apply fontScale
+		inlineElement._fontSize._value = inlineElement._fontSize._inheritedInput * this._fontMultiplier;
+
+		super._resetInlines( inlineElement );
+	}
+
+}
+
+function _calculateGrowFit( textElement ) {
+
+	const INNER_HEIGHT = textElement._bounds._innerHeight;
+
+	//Iterative method to find a fontSize of text children that text will fit into container
+	let iterations = 1;
+	const heightTolerance = 0.075;
+
+	let minFontMultiplier = 1;
+	let maxFontMultiplier = 2;
+
+	let fontMultiplier = 1;
+
+	let textHeight;
+
+	do {
+
+		this._fontMultiplier = fontMultiplier;
+
+		// this is the default TextLayouter.process() being called, we didn't had to rewrite all of this
+		this._superLayouter( textElement );
+
+		textHeight = this._value.height;
+
+		if ( textHeight > INNER_HEIGHT ) {
+
+			if ( fontMultiplier <= minFontMultiplier ) { // can't shrink text
+
+				// this.childrenInlines.forEach( inlineComponent => {
+				//
+				// 	if ( inlineComponent.isInlineBlock ) return;
+				//
+				// 	// ensure fontSize does not shrink
+				// 	inlineComponent._fitFontSize = inlineComponent.getFontSize();
+				//
+				// } );
+
+				break;
+
+			}
+
+			maxFontMultiplier = fontMultiplier;
+			fontMultiplier -= ( maxFontMultiplier - minFontMultiplier ) / 2;
+
+		} else {
+
+			if ( Math.abs( INNER_HEIGHT - textHeight ) < heightTolerance ) break;
+
+			if ( Math.abs( fontMultiplier - maxFontMultiplier ) < 5e-10 ) maxFontMultiplier *= 2;
+
+			minFontMultiplier = fontMultiplier;
+			fontMultiplier += ( maxFontMultiplier - minFontMultiplier ) / 2;
+
+		}
+
+	} while ( ++iterations <= 10 );
+
+}
+
+/**
+ * Same for shrink
+ * @param textElement
+ * @private
+ */
+function _calculateShrinkFit( textElement ) {
+
+	const INNER_HEIGHT = textElement._bounds._innerHeight;
+
+	// Iterative method to find a fontSize of text children that text will fit into container
+	let iterations = 1;
+	const heightTolerance = 0.075;
+
+	let minFontMultiplier = 0;
+	let maxFontMultiplier = 1;
+	let fontMultiplier = 1;
+	let textHeight;
+
+	do {
+
+		this._fontMultiplier = fontMultiplier;
+		this._superLayouter( textElement );
+
+		textHeight = this._value.height;
+
+		if ( textHeight > INNER_HEIGHT ) {
+
+			maxFontMultiplier = fontMultiplier;
+			fontMultiplier -= ( maxFontMultiplier - minFontMultiplier ) / 2;
+
+		} else {
+
+			if ( fontMultiplier >= maxFontMultiplier ) { // can't grow text
+
+				// this.childrenInlines.forEach( inlineComponent => {
+				//
+				// 	if ( inlineComponent.isInlineBlock ) return;
+				//
+				// 	// ensure fontSize does not grow
+				// 	inlineComponent._fitFontSize = inlineComponent.getFontSize();
+				//
+				// } );
+
+				break;
+
+			}
+
+			if ( Math.abs( INNER_HEIGHT - textHeight ) < heightTolerance ) break;
+
+			minFontMultiplier = fontMultiplier;
+			fontMultiplier += ( maxFontMultiplier - minFontMultiplier ) / 2;
+
+		}
+
+	} while ( ++iterations <= 10 );
+}
+
+/**
+ * Same for shrink & grow
+ * @param textElement
+ * @private
+ */
+function _calculateAutoFit( textElement )  {
+
+	const INNER_HEIGHT = textElement._bounds._innerHeight;
+
+	//Iterative method to find a fontSize of text children that text will fit into container
+	let iterations = 1;
+	const heightTolerance = 0.075;
+
+	let minFontMultiplier = 0;
+	let maxFontMultiplier = 2;
+	let fontMultiplier = 1;
+	let textHeight;
+
+	do {
+
+		this._fontMultiplier = fontMultiplier;
+		this._superLayouter( textElement );
+
+		textHeight = this._value.height;
+
+		if ( textHeight > INNER_HEIGHT ) {
+
+			maxFontMultiplier = fontMultiplier;
+			fontMultiplier -= ( maxFontMultiplier - minFontMultiplier ) / 2;
+
+		} else {
+
+			if ( Math.abs( INNER_HEIGHT - textHeight ) < heightTolerance ) break;
+
+			if ( Math.abs( fontMultiplier - maxFontMultiplier ) < 5e-10 ) maxFontMultiplier *= 2;
+
+			minFontMultiplier = fontMultiplier;
+			fontMultiplier += ( maxFontMultiplier - minFontMultiplier ) / 2;
+
+		}
+
+	} while ( ++iterations <= 10 );
+}
+
diff --git a/examples/behaviors/states/SimpleStateBehavior.js b/examples/behaviors/states/SimpleStateBehavior.js
new file mode 100644
index 00000000..330375de
--- /dev/null
+++ b/examples/behaviors/states/SimpleStateBehavior.js
@@ -0,0 +1,150 @@
+import { Behavior } from 'three-mesh-ui';
+
+export default class SimpleStateBehavior extends Behavior{
+
+
+	constructor(subject, states = {}) {
+
+		super(subject);
+
+		// build a simple style set
+		subject._simpleState__activeStates = [];
+		subject._simpleState__normalStyles = {};
+		subject._simpleState__states = states;
+		subject._simpleState__statesProperties = {};
+
+		for ( const statesKey in states ) {
+			for ( const styleProperty in states[ statesKey ] ) {
+
+				if( !subject._simpleState__statesProperties[styleProperty] ){
+					subject._simpleState__statesProperties[styleProperty] = [];
+				}
+				subject._simpleState__statesProperties[styleProperty].push(statesKey);
+			}
+		}
+
+		for ( const component of subject._components ) {
+			if( subject._simpleState__statesProperties[component.id] ) {
+
+				subject._simpleState__normalStyles[component.id] = component.inline ? component.inline : component._value;
+			}
+		}
+
+		subject.__overridedSet = subject.set;
+		subject.set = this.storeSet.bind(subject);
+		subject.renderStates = this.renderStates.bind(subject);
+		subject.setupState = this.setupState.bind(subject);
+
+		subject.setState = this.setState.bind(subject);
+		subject.activatePseudoState = this.activatePseudoState.bind(subject);
+		subject.deactivatePseudoState = this.deactivatePseudoState.bind(subject);
+		subject.togglePseudoState = this.togglePseudoState.bind(subject);
+
+	}
+	act() {
+
+	}
+
+	attach() {
+
+
+	}
+
+	detach() {
+
+	}
+
+	setupState( state, options ){
+
+		this._simpleState__states[state] = options;
+
+		const newOptions = [];
+
+			for ( const styleProperty in options ) {
+
+				if( !this._simpleState__statesProperties[styleProperty] ){
+					this._simpleState__statesProperties[styleProperty] = [];
+					newOptions.push(styleProperty);
+				}
+				this._simpleState__statesProperties[styleProperty].push(state);
+			}
+
+
+		for ( const component of this._components ) {
+			if( newOptions.indexOf(component.id) > -1 ) {
+				this._simpleState__normalStyles[component.id] = component.inline ? component.inline : component._value;
+			}
+		}
+
+	}
+
+	renderStates(  ){
+
+		let stateValues = {...this._simpleState__normalStyles};
+
+		for ( const state in this._simpleState__states ) {
+			if( this._simpleState__activeStates.indexOf(state) > -1 ){
+				stateValues = {...stateValues, ...this._simpleState__states[state]}
+			}
+		}
+
+		this.set( stateValues, false);
+	}
+
+	/**
+	 * @internal will replace default set method
+	 * @param options
+	 * @param store
+	 */
+	storeSet( options, store = true){
+
+		if( store ) {
+			for ( const optionsKey in options ) {
+				if( this._simpleState__statesProperties[optionsKey] ) {
+					this._simpleState__normalStyles[ optionsKey ] = options[ optionsKey ];
+				}
+			}
+		}
+
+		this.__overridedSet(options);
+	}
+
+	activatePseudoState ( state ) {
+
+		if( this._simpleState__activeStates.indexOf(state) === -1) {
+			this._simpleState__activeStates.push( state );
+			this.renderStates();
+		}
+	}
+
+	deactivatePseudoState ( state ) {
+		let index = this._simpleState__activeStates.indexOf(state);
+		if( index > -1 ){
+			this._simpleState__activeStates.splice( index,1);
+			this.renderStates();
+		}
+	}
+
+	togglePseudoState ( state ) {
+
+		let index = this._simpleState__activeStates.indexOf(state);
+		if( index > -1 ){
+			this._simpleState__activeStates.splice( index,1);
+		}else{
+			this._simpleState__activeStates.push(state);
+		}
+
+		this.renderStates();
+
+	}
+
+	setState( states ){
+		if( Array.isArray(states) ){
+			this._simpleState__activeStates = states;
+		}else{
+			this._simpleState__activeStates = [ states ];
+		}
+
+		this.renderStates();
+	}
+}
diff --git a/examples/utils/VRControl.js b/examples/controls/VRControl.js
similarity index 61%
rename from examples/utils/VRControl.js
rename to examples/controls/VRControl.js
index aecb93f6..7e0c6020 100644
--- a/examples/utils/VRControl.js
+++ b/examples/controls/VRControl.js
@@ -1,9 +1,9 @@
-/*
-	Job: creating the VR controllers and their pointers
-*/
 
-import * as THREE from 'three';
+/*
+ Job: creating the VR controllers and their pointers
+ */
 import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
+import { BoxGeometry, CanvasTexture, Matrix4, Mesh, MeshBasicMaterial, Sprite, SpriteMaterial } from 'three';
 
 export default function VRControl( renderer ) {
 
@@ -16,86 +16,66 @@ export default function VRControl( renderer ) {
 	// Lines helpers
 	//////////////////
 
-	const material = new THREE.MeshBasicMaterial( {
+	const material = new MeshBasicMaterial( {
 		color: 0xffffff,
-		alphaMap: new THREE.CanvasTexture( generateRayTexture() ),
+		alphaMap: new CanvasTexture( generateRayTexture() ),
 		transparent: true
-	} );
+	});
 
-	const geometry = new THREE.BoxBufferGeometry( 0.004, 0.004, 0.35 );
+	const geometry = new BoxGeometry( 0.004, 0.004, 0.35 );
 
 	geometry.translate( 0, 0, -0.15 );
 
 	const uvAttribute = geometry.attributes.uv;
 
-	for ( let i = 0; i < uvAttribute.count; i++ ) {
+	// @TODO: This could be simplified and optimized
+	for ( let i = 0; i < uvAttribute.count; i ++ ) {
 
 		let u = uvAttribute.getX( i );
 		let v = uvAttribute.getY( i );
 
-		[ u, v ] = ( () => {
-
+		[ u, v ] = (()=> {
 			switch ( i ) {
-
-				case 0 :
-					return [ 1, 1 ];
-				case 1 :
-					return [ 0, 0 ];
-				case 2 :
-					return [ 1, 1 ];
-				case 3 :
-					return [ 0, 0 ];
-				case 4 :
-					return [ 0, 0 ];
-				case 5 :
-					return [ 1, 1 ];
-				case 6 :
-					return [ 0, 0 ];
-				case 7 :
-					return [ 1, 1 ];
-				case 8 :
-					return [ 0, 0 ];
-				case 9 :
-					return [ 0, 0 ];
-				case 10 :
-					return [ 1, 1 ];
-				case 11 :
-					return [ 1, 1 ];
-				case 12 :
-					return [ 1, 1 ];
-				case 13 :
-					return [ 1, 1 ];
-				case 14 :
-					return [ 0, 0 ];
-				case 15 :
-					return [ 0, 0 ];
-				default :
-					return [ 0, 0 ];
-
+				case 0 : return [ 1, 1 ]
+				case 1 : return [ 0, 0 ]
+				case 2 : return [ 1, 1 ]
+				case 3 : return [ 0, 0 ]
+				case 4 : return [ 0, 0 ]
+				case 5 : return [ 1, 1 ]
+				case 6 : return [ 0, 0 ]
+				case 7 : return [ 1, 1 ]
+				case 8 : return [ 0, 0 ]
+				case 9 : return [ 0, 0 ]
+				case 10 : return [ 1, 1 ]
+				case 11 : return [ 1, 1 ]
+				case 12 : return [ 1, 1 ]
+				case 13 : return [ 1, 1 ]
+				case 14 : return [ 0, 0 ]
+				case 15 : return [ 0, 0 ]
+				default : return [ 0, 0 ]
 			}
-
-		} )();
+		})();
 
 		uvAttribute.setXY( i, u, v );
 
 	}
 
-	const linesHelper = new THREE.Mesh( geometry, material );
+	const linesHelper = new Mesh( geometry, material );
 	linesHelper.renderOrder = Infinity;
 
 	/////////////////
 	// Point helper
 	/////////////////
 
-	const spriteMaterial = new THREE.SpriteMaterial( {
-		map: new THREE.CanvasTexture( generatePointerTexture() ),
+	const spriteMaterial = new SpriteMaterial({
+		map: new CanvasTexture( generatePointerTexture() ),
 		sizeAttenuation: false,
 		depthTest: false
-	} );
+	});
 
-	const pointer = new THREE.Sprite( spriteMaterial );
+	const pointer = new Sprite( spriteMaterial );
 
-	pointer.scale.set( 0.015, 0.015, 1 );
+	pointer.scale.set(0.015, 0.015, 1)
 	pointer.renderOrder = Infinity;
 
 	////////////////
@@ -105,8 +85,8 @@ export default function VRControl( renderer ) {
 	const controller1 = renderer.xr.getController( 0 );
 	const controller2 = renderer.xr.getController( 1 );
 
-	controller1.name = 'controller-right';
-	controller2.name = 'controller-left';
+	controller1.name = "controller-right";
+	controller2.name = "controller-left";
 
 	const controllerGrip1 = renderer.xr.getControllerGrip( 0 );
 	const controllerGrip2 = renderer.xr.getControllerGrip( 1 );
@@ -117,7 +97,7 @@ export default function VRControl( renderer ) {
 	if ( controllerGrip1 ) controllerGrips.push( controllerGrip1 );
 	if ( controllerGrip2 ) controllerGrips.push( controllerGrip2 );
 
-	controllers.forEach( ( controller ) => {
+	controllers.forEach( (controller)=> {
 
 		const ray = linesHelper.clone();
 		const point = pointer.clone();
@@ -126,19 +106,17 @@ export default function VRControl( renderer ) {
 		controller.ray = ray;
 		controller.point = point;
 
-	} );
-
-	controllerGrips.forEach( ( controllerGrip ) => {
+	});
 
+	controllerGrips.forEach( (controllerGrip)=> {
 		controllerGrip.add( controllerModelFactory.createControllerModel( controllerGrip ) );
-
-	} );
+	});
 
 	//////////////
 	// Functions
 	//////////////
 
-	const dummyMatrix = new THREE.Matrix4();
+	const dummyMatrix = new Matrix4();
 
 	// Set the passed ray to match the given controller pointing direction
 
@@ -151,7 +129,7 @@ export default function VRControl( renderer ) {
 		dummyMatrix.identity().extractRotation( controller.matrixWorld );
 
 		ray.origin.setFromMatrixPosition( controller.matrixWorld );
-		ray.direction.set( 0, 0, -1 ).applyMatrix4( dummyMatrix );
+		ray.direction.set( 0, 0, - 1 ).applyMatrix4( dummyMatrix );
 
 	}
 
@@ -185,20 +163,24 @@ export default function VRControl( renderer ) {
 
 // Generate the texture needed to make the intersection ray fade away
 
+/**
+ *
+ * @returns {HTMLCanvasElement}
+ */
 function generateRayTexture() {
 
 	const canvas = document.createElement( 'canvas' );
 	canvas.width = 64;
 	canvas.height = 64;
 
-	const ctx = canvas.getContext( '2d' );
+	const ctx = canvas.getContext("2d");
 
-	const gradient = ctx.createLinearGradient( 0, 0, 64, 0 );
-	gradient.addColorStop( 0, 'black' );
-	gradient.addColorStop( 1, 'white' );
+	const gradient = ctx.createLinearGradient(0, 0, 64, 0);
+	gradient.addColorStop(0, "black");
+	gradient.addColorStop(1, "white");
 
 	ctx.fillStyle = gradient;
-	ctx.fillRect( 0, 0, 64, 64 );
+	ctx.fillRect(0, 0, 64, 64);
 
 	return canvas;
 
@@ -206,19 +188,23 @@ function generateRayTexture() {
 
 // Generate the texture of the point helper sprite
 
+/**
+ *
+ * @returns {HTMLCanvasElement}
+ */
 function generatePointerTexture() {
 
 	const canvas = document.createElement( 'canvas' );
 	canvas.width = 64;
 	canvas.height = 64;
 
-	const ctx = canvas.getContext( '2d' );
+	const ctx = canvas.getContext("2d");
 
 	ctx.beginPath();
-	ctx.arc( 32, 32, 29, 0, 2 * Math.PI );
+	ctx.arc(32, 32, 29, 0, 2 * Math.PI);
 	ctx.lineWidth = 5;
 	ctx.stroke();
-	ctx.fillStyle = 'white';
+	ctx.fillStyle = "white";
 	ctx.fill();
 
 	return canvas;
diff --git a/examples/dev__baseline.js b/examples/dev__baseline.js
index af3b4bb7..68a32e8b 100644
--- a/examples/dev__baseline.js
+++ b/examples/dev__baseline.js
@@ -1,17 +1,15 @@
 /* global lil */
 
+// import FontJSON from './assets/Roboto-msdf.json';
+// import FontImage from './assets/Roboto-msdf.png';
 import * as THREE from 'three';
+import { Mesh, MeshBasicMaterial, PlaneGeometry } from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
 import ThreeMeshUI, { FontLibrary } from 'three-mesh-ui';
-
-// import FontJSON from './assets/Roboto-msdf.json';
-// import FontImage from './assets/Roboto-msdf.png';
-
-
-import { Mesh, MeshBasicMaterial, PlaneBufferGeometry } from 'three';
+import TypographicLayoutBehavior from 'three-mesh-ui/examples/behaviors/helpers/TypographicLayoutBehavior';
 
 // Add lil-gui
 const script = document.createElement( 'script' );
@@ -22,17 +20,18 @@ document.body.appendChild( script );
 const WIDTH = window.innerWidth;
 const HEIGHT = window.innerHeight;
 
-let scene, camera, renderer, controls, text, container;
+let scene, camera, renderer, controls, text;
 
 window.addEventListener( 'load', () => {
 
 	FontLibrary.prepare(
 		FontLibrary
 			.addFontFamily( 'Roboto' )
-			.addVariant( '400', 'normal', './assets/fonts/msdf/roboto/regular.json', './assets/fonts/msdf/roboto/regular.png' ),
+			.addVariant( 'normal', 'normal', './assets/fonts/msdf/roboto/regular.json?fixed=true', './assets/fonts/msdf/roboto/regular.png?fixed=true' ),
+
 		FontLibrary
 			.addFontFamily( 'Roboto-unfixed' )
-			.addVariant( '400', 'normal', './assets/fonts/msdf/roboto/regular.json', './assets/fonts/msdf/roboto/regular.png' )
+			.addVariant( 'normal', 'normal', './assets/fonts/msdf/roboto/regular.json', './assets/fonts/msdf/roboto/regular.png' )
 	).then( () => {
 		init();
 	} );
@@ -78,11 +77,21 @@ function init() {
 
 	// TEXT PANEL
 
-	container = makeUI();
-	scene.add( container );
+	const rootBlock = new ThreeMeshUI.Block({
+		alignItems: 'center',
+		padding: 0.05,
+		borderRadius: 0.01,
+		backgroundColor : 0x000000,
+		backgroundOpacity : 0.8
+	})
+
+	rootBlock.position.set( 0, 0.930, -1.8 );
 
-	const cont2 = makeUI(false);
-	scene.add( cont2 );
+	scene.add( rootBlock );
+
+	rootBlock.add( makeUI() );
+
+	rootBlock.add( makeUI(false) );
 	//
 
 	renderer.setAnimationLoop( loop );
@@ -96,44 +105,19 @@ function init() {
  * @return {Block}
  */
 function makeUI(fixed = true ) {
-	const container = new ThreeMeshUI.Block( {
-		height: 0.55,
-		width: 0.85,
-		justifyContent: 'center',
-		alignItems: 'center',
-		fontFamily: fixed ? 'Roboto' : 'Roboto-unfixed',
-		backgroundOpacity: fixed ? 1.0 : 0
-	} );
-
-	container.position.set( 0, fixed ? 1.0 : 0.930, -1.8 );
 
-	//
-
-	const textBlock = new ThreeMeshUI.Block( {
-		height: 0.4,
+	const textBlock = new ThreeMeshUI.Text( {
 		width: 0.73,
-		margin: 0.05,
-		textAlign: 'right',
+		textAlign: 'left',
 		justifyContent: 'center',
-		padding: 0.03,
-		interLine: 0.08,
-		letterSpacing: 0,
-		backgroundOpacity:0,
-	} );
-
-	container.add( textBlock );
-
-
-	// const textContent = FontLibrary.getFontFamily("Roboto").getVariant('400',"normal").typographic.charset;
-	const textContent = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
-	const _text = new ThreeMeshUI.Text( {
 		fontSize: 0.06,
-		content: textContent,
+		fontFamily: fixed ? 'Roboto' : 'Roboto-unfixed',
+		textContent : 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
 	} );
 
 	if( fixed ){
 
-		text = _text;
+		text = textBlock;
 
 	}
 
@@ -141,53 +125,9 @@ function makeUI(fixed = true ) {
 	// Lines properties. Lines are planes manually added behind each text lines
 	// in order to perceive and validate line width
 
-	const lineMat = new MeshBasicMaterial( { color: fixed ? 0x0099FF : 0xcacaca, opacity: 0.5 } );
-	let lines = [];
-
-	_text.addAfterUpdate( function () {
-
-
-		// only process when texts are not empty
-		if ( _text.children.length == 0 ) return;
-
-		// remove all lines previously added
-		for ( let i = 0; i < lines.length; i++ ) {
-			const line = lines[ i ];
-			container.remove( line );
-		}
-		lines = [];
-
-		// retrieve all lines sent by InlineManager for the textBlock
-		for ( let i = 0; i < textBlock.lines.length; i++ ) {
-
-			const lineProperty = textBlock.lines[ i ];
+	new TypographicLayoutBehavior( text ).attach();
 
-			if ( !lineProperty[ 0 ] ) continue;
-
-			// ( I was unable to quickly match lineHeight )
-			// lineHeight doesn't fit
-			// const lineHeight = lineProperty.lineHeight / 4;
-			const lineHeight = lineProperty.lineHeight;
-			const lineBase = lineProperty.lineBase;
-
-			// create a mesh for each line
-			const lineGeo = new PlaneBufferGeometry( lineProperty.width, lineBase );
-			const lineMesh = new Mesh( lineGeo, lineMat );
-
-			lineMesh.position.x = lineProperty[ 0 ].offsetX + ( lineProperty.width / 2 );
-			lineMesh.position.y = lineProperty[ 0 ].offsetY + ( lineHeight / 2.89 );
-
-			lineMesh.position.z = 0.018;
-
-			lines.push( lineMesh );
-			container.add( lineMesh );
-		}
-
-	});
-
-	textBlock.add( _text );
-
-	return container;
+	return textBlock;
 
 }
 
@@ -197,13 +137,15 @@ function buildGUI() {
 
 	const alterations = {};
 
+	console.log(text.textContent, text._textContent );
+
 	const letters = {};
-	for ( let i = 0; i < text.content.length; i++ ) {
-		const letter = text.content[ i ];
+	for ( let i = 0; i < text.textContent.length; i++ ) {
+		const letter = text.textContent[ i ];
 		letters[ letter ] = letter;
 	}
 
-	const fontVariant = FontLibrary.getFontFamily( 'Roboto' ).getVariant( '400', 'normal' );
+	const fontVariant = FontLibrary.getFontFamily( 'Roboto' ).getVariant( 'normal', 'normal' );
 	let charDesc = fontVariant.getTypographicGlyph( 'a' );
 	const p = {
 		letter: 'a',
@@ -223,8 +165,8 @@ function buildGUI() {
 		alterations[ p.letter ] = v;
 
 		charDesc._yoffset = v;
-		text.update( true, true, true );
-		container.update( true, true, true );
+
+		text._layouter._needsProcess = true;
 
 	} );
 
diff --git a/examples/dev__border_units.js b/examples/dev__border_units.js
index 5cfc1a6c..b5147474 100644
--- a/examples/dev__border_units.js
+++ b/examples/dev__border_units.js
@@ -1,13 +1,11 @@
 import * as THREE from 'three';
+import { TextureLoader } from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
 
-import ThreeMeshUI from 'three-mesh-ui';
+import ThreeMeshUI, { DefaultValues } from 'three-mesh-ui';
 import Stats from 'three/examples/jsm/libs/stats.module';
-import * as FontWeight from '../src/utils/font/FontWeight';
-import * as FontStyle from '../src/utils/font/FontStyle';
-import { TextureLoader } from 'three';
 
 const WIDTH = window.innerWidth;
 const HEIGHT = window.innerHeight;
@@ -60,23 +58,24 @@ function init() {
 	// Fonts
 	ThreeMeshUI.FontLibrary
 		.addFontFamily("Roboto")
-		.addVariant( FontWeight.NORMAL, FontStyle.NORMAL,"./assets/fonts/msdf/roboto/regular.json","./assets/fonts/msdf/roboto/regular.png" );
+		.addVariant( "normal", "normal","./assets/fonts/msdf/roboto/regular.json","./assets/fonts/msdf/roboto/regular.png" );
 
 	const uvTexture = new TextureLoader().load("./assets/uv_grid.jpg");
 
 	// TEXT PANEL
 	rootBlock = new ThreeMeshUI.Block({
 		width:3.25,
-		contentDirection: 'column',
+		flexDirection: 'column',
 		justifyContent: 'center',
-		alignItems: 'center'
+		alignItems: 'center',
+		backgroundOpacity: 0,
 	});
 
 	const titleBlock = new ThreeMeshUI.Block({width:3.10,height:0.25});
 	const title = new ThreeMeshUI.Text({
 		fontFamily: 'Roboto',
 		fontSize: 0.055,
-		content: 'Border - Units and radiuses'
+		textContent: 'Border - Units and radiuses'
 	})
 
 	titleBlock.add( title );
@@ -84,26 +83,25 @@ function init() {
 
 	rootBlock.position.set(0,1,-2);
 
-	columnContainer = new ThreeMeshUI.Block({width:3.25,contentDirection:'row', alignItems:'start', justifyContent: 'space-between'});
+	columnContainer = new ThreeMeshUI.Block({width:3.25,flexDirection:'row', alignItems:'start', justifyContent: 'space-between'});
 
 	rootBlock.add(columnContainer)
 
 	const b1 = createColumn('WorldUnits = rem');
 	for ( let i = 0; i < b1.blocks.length; i++ ) {
 		const block = b1.blocks[ i ];
-		block._borderRadiusComponent.units = 'rem';
-		block.set({borderRadius: 0.1});
-		block.set({backgroundTexture: uvTexture, backgroundSize:'stretch',backgroundColor:new THREE.Color(0xFFFFFF)});
+		block._borderRadius.units = 'rem';
+		block.set({borderRadius: 0.1, backgroundOpacity: 1});
+		block.set({backgroundImage: uvTexture, backgroundSize:'stretch',backgroundColor:new THREE.Color(0xFFFFFF)});
 	}
 	columnContainer.add(b1);
 
 	const b2 = createColumn('UV = em');
 	for ( let i = 0; i < b2.blocks.length; i++ ) {
 		const block = b2.blocks[ i ];
-		block._borderRadiusComponent.units = 'em';
-		// block.set({borderTopLeftRadius: 0.5})
-		block.set({borderRadius: 0.1});
-		block.set({backgroundTexture: uvTexture, backgroundSize:'stretch',backgroundColor:new THREE.Color(0xFFFFFF)});
+		block._borderRadius.units = 'em';
+		block.set({borderRadius: 0.1, backgroundOpacity: 1});
+		block.set({backgroundImage: uvTexture, backgroundSize:'stretch',backgroundColor:new THREE.Color(0xFFFFFF)});
 	}
 
 
@@ -112,8 +110,8 @@ function init() {
 	const b3 = createColumn('Percent');
 	for ( let i = 0; i < b3.blocks.length; i++ ) {
 		const block = b3.blocks[ i ];
-		block._borderRadiusComponent.units = '%';
-		block.set({borderRadius: 10})
+		block._borderRadius.units = '%';
+		block.set({borderRadius: 10, backgroundOpacity: 1})
 	}
 	columnContainer.add(b3);
 
@@ -124,13 +122,13 @@ function init() {
 
 function createColumn(text){
 
-	const column = new ThreeMeshUI.Block({width:1, contentDirection: 'column', alignItems:'center', justifyContent: 'start'});
+	const column = new ThreeMeshUI.Block({width:1, flexDirection: 'column', alignItems:'center', justifyContent: 'start'});
 
 	const titleBlock = new ThreeMeshUI.Block({width:1,height:0.25});
 	const title = new ThreeMeshUI.Text({
 		fontFamily: 'Roboto',
 		fontSize: 0.035,
-		content: text
+		textContent: text
 	})
 
 	titleBlock.add( title );
diff --git a/examples/dev__border_width.js b/examples/dev__border_width.js
index e16c950d..a30993c4 100644
--- a/examples/dev__border_width.js
+++ b/examples/dev__border_width.js
@@ -1,13 +1,11 @@
 import * as THREE from 'three';
+import { Color, TextureLoader } from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
 
 import ThreeMeshUI from 'three-mesh-ui';
 import Stats from 'three/examples/jsm/libs/stats.module';
-import * as FontWeight from '../src/utils/font/FontWeight';
-import * as FontStyle from '../src/utils/font/FontStyle';
-import { Color, TextureLoader } from 'three';
 
 const WIDTH = window.innerWidth;
 const HEIGHT = window.innerHeight;
@@ -60,14 +58,14 @@ function init() {
 	// Fonts
 	ThreeMeshUI.FontLibrary
 		.addFontFamily("Roboto")
-		.addVariant( FontWeight.NORMAL, FontStyle.NORMAL,"./assets/fonts/msdf/roboto/regular.json","./assets/fonts/msdf/roboto/regular.png" );
+		.addVariant( "normal", "normal","./assets/fonts/msdf/roboto/regular.json","./assets/fonts/msdf/roboto/regular.png" );
 
 	const uvTexture = new TextureLoader().load("./assets/uv_grid.jpg");
 
 	// TEXT PANEL
 	rootBlock = new ThreeMeshUI.Block({
 		width:3.25,
-		contentDirection: 'column',
+		flexDirection: 'column',
 		justifyContent: 'center',
 		alignItems: 'center'
 	});
@@ -76,7 +74,7 @@ function init() {
 	const title = new ThreeMeshUI.Text({
 		fontFamily: 'Roboto',
 		fontSize: 0.055,
-		content: 'Border - Units and radiuses'
+		textContent: 'Border - Units and radiuses'
 	})
 
 	titleBlock.add( title );
@@ -84,25 +82,25 @@ function init() {
 
 	rootBlock.position.set(0,1,-2);
 
-	columnContainer = new ThreeMeshUI.Block({width:3.25,contentDirection:'row', alignItems:'start', justifyContent: 'space-between'});
+	columnContainer = new ThreeMeshUI.Block({width:3.25,flexDirection:'row', alignItems:'start', justifyContent: 'space-between'});
 
 	rootBlock.add(columnContainer)
 
 	const b1 = createColumn('WorldUnits = rem');
 	for ( let i = 0; i < b1.blocks.length; i++ ) {
 		const block = b1.blocks[ i ];
-		block._borderWidthComponent.units = 'rem';
+		block._borderWidth.units = 'rem';
 		block.set({borderWidth: 0.1,borderOpacity:0.6, borderColor:new Color(0xff99ff)});
-		block.set({backgroundTexture: uvTexture, backgroundSize:'stretch',backgroundColor:new THREE.Color(0xFFFFFF)});
+		block.set({backgroundImage: uvTexture, backgroundSize:'stretch',backgroundColor:new THREE.Color(0xFFFFFF)});
 	}
 	columnContainer.add(b1);
 
 	const b2 = createColumn('UV = em');
 	for ( let i = 0; i < b2.blocks.length; i++ ) {
 		const block = b2.blocks[ i ];
-		block._borderWidthComponent.units = 'em';
+		block._borderWidth.units = 'em';
 		block.set({borderWidth: 0.1,borderOpacity:0.6, borderColor:new Color(0xff99ff)});
-		block.set({backgroundTexture: uvTexture, backgroundSize:'stretch',backgroundColor:new THREE.Color(0xFFFFFF)});
+		block.set({backgroundImage: uvTexture, backgroundSize:'stretch',backgroundColor:new THREE.Color(0xFFFFFF)});
 	}
 
 
@@ -111,8 +109,8 @@ function init() {
 	const b3 = createColumn('Percent');
 	for ( let i = 0; i < b3.blocks.length; i++ ) {
 		const block = b3.blocks[ i ];
-		block._borderWidthComponent.units = '%';
-		block.set({borderWidth: 10,borderOpacity:0.6, borderColor:new Color(0xff99ff)})
+		block._borderWidth.units = '%';
+		block.set({borderWidth: 0.1,borderOpacity:0.6, borderColor:new Color(0xff99ff)})
 	}
 	columnContainer.add(b3);
 
@@ -123,13 +121,13 @@ function init() {
 
 function createColumn(text){
 
-	const column = new ThreeMeshUI.Block({width:1, contentDirection: 'column', alignItems:'center', justifyContent: 'start'});
+	const column = new ThreeMeshUI.Block({width:1, flexDirection: 'column', alignItems:'center', justifyContent: 'start'});
 
 	const titleBlock = new ThreeMeshUI.Block({width:1,height:0.25});
 	const title = new ThreeMeshUI.Text({
 		fontFamily: 'Roboto',
 		fontSize: 0.035,
-		content: text
+		textContent: text
 	})
 
 	titleBlock.add( title );
diff --git a/examples/dev__frames.js b/examples/dev__frames.js
index f37d19bf..a377dddb 100644
--- a/examples/dev__frames.js
+++ b/examples/dev__frames.js
@@ -1,24 +1,94 @@
 import * as THREE from 'three';
-import { Color, DoubleSide, Mesh, MeshStandardMaterial, PlaneBufferGeometry, PointLight, SpotLight, SpotLightHelper } from 'three';
+import { Color, DoubleSide, Mesh, MeshStandardMaterial, PlaneGeometry, PointLight, SpotLight, SpotLightHelper } from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
 
-import ThreeMeshUI from 'three-mesh-ui';
+import ThreeMeshUI, { FontLibrary } from 'three-mesh-ui';
 
-import FontJSON from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.json';
-import FontImage from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.png';
 import Stats from 'three/examples/jsm/libs/stats.module';
 import FrameDepthMaterial from '../src/frame/materials/FrameDepthMaterial';
 import FramePhysicalMaterial from 'three-mesh-ui/examples/materials/frame/FramePhysicalMaterial';
 import FrameBasicMaterial from 'three-mesh-ui/examples/materials/frame/FrameBasicMaterial';
+import MSDFNormalMaterial from 'three-mesh-ui/examples/materials/msdf/MSDFNormalMaterial';
+import ROBOTO_ADJUSTMENT from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/adjustment';
 
 const WIDTH = window.innerWidth;
 const HEIGHT = window.innerHeight;
 
-let scene, camera, renderer, controls, panel, panelScale, lightHelper, stats, topLeft, topMiddleRight, topRight;
+let scene, camera, renderer, controls, panel, panelScale, lightHelper, stats, topLeft, topMiddleRight, topRight, bottomMiddle;
+
+// Using `ThreeMeshUI.FontLibrary.prepare( fontFamily, [...fontFamily] )
+// We can ensure any fontFamily passed in that function and theirs variants are properly loaded and setup
+FontLibrary.prepare(
+
+	FontLibrary
+		// Registering a fontFamily called "Roboto", the name is up to us.
+		.addFontFamily("Roboto")
+		// On the fontFamily added, lets add a variant
+		// a font variant usually requires 4 parameters
+		.addVariant(
+			// The weight of the variant '100'|'200'|'300'|'400'|'600'|'700'|'800'|'900'
+			//														LIGHTER					NORMAL			BOLD				BOLDER
+			'normal',
+
+			// The style of the variant 'normal'|'italic'|'oblique'|'oblique(x deg)'
+			"normal",
+
+			// The json definition of the msdf font 'urlToLoad'|loadedObject
+			"./assets/fonts/msdf/roboto/regular.json",
+
+			// The texture of the msdf font 'urlToLoad'|Texture
+			"./assets/fonts/msdf/roboto/regular.png"
+		)
+
+		// Registering additional variants
+		.addVariant("bold", "italic", "./assets/fonts/msdf/roboto/bold-italic.json", "./assets/fonts/msdf/roboto/bold-italic.png" )
+		.addVariant("bold", "normal", "./assets/fonts/msdf/roboto/bold.json", "./assets/fonts/msdf/roboto/bold.png" )
+		.addVariant("normal", "italic", "./assets/fonts/msdf/roboto/italic.json", "./assets/fonts/msdf/roboto/italic.png" )
+
+// FontLibrary.prepare() returns a Promise, we can therefore add a callback to be executed when all files are loaded
+).then( () => {
+
+	// Once font are registered, we can get the font family
+	const RobotoFamily = FontLibrary.getFontFamily("Roboto");
+
+	// And then retrieve a fontVariant defined in this Family
+	const RobotoRegular = RobotoFamily.getVariant('normal','normal');
+
+	// Having font variant allows us to perform some modifications
+	// 1. Adjustments
+	// If you look closely the `Getting started - Basic Setup` you may have noticed that :
+	// 		- the `h` character is slightly below the baseline
+	// This can be adjusted per fontVariant
+	RobotoRegular.adjustTypographicGlyphs( {
+		// 'h' character must change some of its properties defined in the json
+		h: {
+			// the yoffset property should be 2 (instead of 4 in the json)
+			yoffset: 2
+		}
+	} );
+	// Once adjusted, any three-mesh-ui Text using this font variant will use the adjusted properties
+
+	// 1. Material
+	// Instead of assigning custom materials to Text one by one
+	// We can assign a Material(class) to a font variant (Here the bold one)
+	RobotoFamily.getVariant('bold','normal').fontMaterial = MSDFNormalMaterial;
+	// Once set, any three-mesh-ui Text using this font variant will use the defined material
+
+	// We may encounter the following lines in other examples,
+	// they are adjusting font variants to display a nice baseline
+	RobotoFamily.getVariant('bold','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	RobotoFamily.getVariant('bold','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	RobotoFamily.getVariant('bold','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+
+	// Now that the font are loaded and adjusted,
+
+	init();
+
+
+});
 
-window.addEventListener( 'load', init );
 window.addEventListener( 'resize', onWindowResize );
 
 //
@@ -63,7 +133,7 @@ function init() {
 	// LIGHTS
 
 	const floor = new Mesh(
-		new PlaneBufferGeometry(6,6,5,5),
+		new PlaneGeometry(6,6,5,5),
 		new MeshStandardMaterial( {color:0xffffff} )
 	);
 	floor.rotation.x = - Math.PI / 2;
@@ -102,18 +172,19 @@ function init() {
 	// TEXT PANEL
 
 	const container = makeTextPanel();
-	window.container = container;
-	container.frame.visible = false;
+	window.rootBlock = container;
+	// container.frame.visible = false;
 
 	const top = makeRow();
 	container.add( top );
-	top.frame.visible = false;
+
+	// // top.frame.visible = false;
 	topLeft = makeBoxForBorder('borderTopLeft');
-	topLeft.set({borderTopLeftRadius:0.1, borderWidth:0.05, borderColor: new Color(0xff0000)});
+	topLeft.set({borderRadius:'0.1 0 0 0', borderWidth:0.05, borderColor: new Color(0xff0000)});
 	const topMiddleLeft = makeBoxForBorder('TopMiddleLeft?');
 	topMiddleLeft.set({borderRadius:'0.05 0.25', borderLeftWidth:0.1})
 	const topMiddle = makeBoxForBorder('borderTop');
-	topMiddle.set({borderTopRadius: 0.05})
+	topMiddle.set({borderRadius: '0.05 0.05 0 0'})
 	topMiddleRight = makeBoxForBorder('TopMiddleRight?');
 	topMiddleRight.set({borderRadius: [0.25, 0.05], borderColor: new Color(0xff9900), borderWidth: 0.02});
 	topRight = makeBoxForBorder('BorderTopRight');
@@ -122,29 +193,35 @@ function init() {
 	//
 
 	const middle = makeRow();
-	middle.frame.visible = false;
 	container.add( middle );
+
+
 	const middleLeft = makeBoxForBorder('borderMiddleLeft');
-	middleLeft.set({borderLeftRadius:0.1});
+	middleLeft.set({borderRadius:"0.05 0 0 0.05"});
 	const middleMiddleLeft = makeBoxForBorder('MiddleMiddleLeft?');
-	middleMiddleLeft.set({height: 0.2 ,borderTopRightRadius: 1, borderBottomRightRadius:0.05, borderTopLeftRadius: 0.05});
+	middleMiddleLeft.set({height: 0.2 , borderRadius: '0.05 1 0.05 0'});
 	const middleMiddle = makeBoxForBorder('borderMiddle');
 	panel = middleMiddle;
 	const middleMiddleRight = makeBoxForBorder('MiddleMiddleRight?');
-	middleMiddleRight.set({borderRightRadius:0.5, borderWidth:'0 0 0 0.05', borderColor: new Color(0x99ff00)});
+	middleMiddleRight.set({borderRadius: "0 0.5 0.5 0", borderWidth:'0 0 0 0.05', borderColor: new Color(0x99ff00)});
 	const middleRight = makeBoxForBorder('BorderMiddleRight');
-	middleRight.set({borderRadiusRight:0.3});
+	middleRight.set({borderRadius: "0 0.3 0.3 0"});
 	middle.add( middleLeft, middleMiddleLeft, middleMiddle, middleMiddleRight, middleRight)
 
 	const bottom = makeRow();
-	bottom.frame.visible = false;
 	container.add( bottom );
+
+
+
 	const bottomLeft = makeBoxForBorder('borderBottomLeft');
-	bottomLeft.set({borderBottomLeftRadius:0.1});
+
+	bottomLeft.set({flexDirection:"row"})
+
+	bottomLeft.set({borderRadius: '0 0 0 0.1'});
 	const bottomMiddleLeft = makeBoxForBorder('BottomMiddleLeft?');
-	bottomMiddleLeft.backgroundColor = new Color(0xffffff);
-	bottomMiddleLeft.set({borderRadius:'0.2 0.1'})
-	bottomMiddleLeft.material = new FramePhysicalMaterial({
+	// bottomMiddleLeft.backgroundColor = new Color(0xffffff);
+	bottomMiddleLeft.set({borderRadius:'0.2 0.1', backgroundColor: 0xffffff, backgroundOpacity:1});
+	bottomMiddleLeft.backgroundMaterial = new FramePhysicalMaterial({
 		side:DoubleSide,
 		transmission: 1,
 		opacity: 1,
@@ -154,18 +231,18 @@ function init() {
 		thickness: 0.1,
 		specularIntensity: 1,
 		envMapIntensity: 1});
-	const bottomMiddle = makeBoxForBorder('borderBottom');
-	bottomMiddle.set({borderBottomRadius:0.1})
+	bottomMiddle = makeBoxForBorder('borderBottom');
+	bottomMiddle.set({borderRadius:'0 0 0.1 0.1'})
 	const bottomMiddleRight = makeBoxForBorder('BottomMiddleRight?');
 	bottomMiddleRight.set({borderRadius:0.5,
-		borderBottomWidth:0.05,borderColor:new Color(0xff9900)})
-	bottomMiddleRight.material = new FrameBasicMaterial({side:DoubleSide});
+		borderWidth:'0 0 0.05 0',borderColor:new Color(0xff9900)});
+	bottomMiddleRight.backgroundMaterial = new FrameBasicMaterial({side:DoubleSide});
 	panelScale = bottomMiddleRight;
 	const bottomRight = makeBoxForBorder('BorderBottomRight');
-	bottomRight.set({borderWidth:'0.1 0.2 0.3 0.05', borderRadius:0.5, borderColor: new Color(0x99ffff)});
+	bottomRight.set({borderWidth:'0.1 0.2 0.1 0.05', borderRadius:0.5, borderColor: new Color(0x99ffff)});
 
 	bottom.add( bottomLeft, bottomMiddleLeft, bottomMiddle, bottomMiddleRight, bottomRight)
-	console.log( bottom.frame.customDepthMaterial );
+	// console.log( bottom.frame.customDepthMaterial );
 
 
 	renderer.setAnimationLoop( loop );
@@ -177,58 +254,72 @@ function init() {
 function makeTextPanel() {
 
 	const panel = new ThreeMeshUI.Block( {
-		width: 3.1,
-		height: 1.8,
+		width: 3.25,
+		height: 3,
 		fontSize: 0.045,
+		flexDirection: 'column',
+		alignItems: 'center',
 		textAlign: 'center',
 		justifyContent: 'space-evenly',
-		backgroundOpacity: 0,
-		fontFamily: FontJSON,
-		fontTexture: FontImage
+		// backgroundOpacity: 0.5,
+		// backgroundColor: 0xff9900,
+		fontFamily: "Roboto",
 	} );
 
 	panel.position.set( 0, 1, -1.8 );
 	panel.rotation.x = -0.55;
+	panel.backgroundCastShadow = true;
 	scene.add( panel );
 
 	return panel;
 
 }
 
-function makeBoxForBorder( text ) {
+function makeRow() {
+
+	return new ThreeMeshUI.Block({
+
+		// height: 0.9,
+		// margin: 0.05,
+		flexDirection: 'row',
+		justifyContent: 'center',
+		alignItems: 'center',
+		backgroundOpacity: 0.25,
+	});
+
+}
+
+
+function makeBoxForBorder( text, visible = true ) {
 
 	const panel = new ThreeMeshUI.Block( {
 		width: 0.5,
 		height: 0.5,
+		margin: 0.05,
 		justifyContent: 'center',
 		textAlign: 'center',
-		side: DoubleSide,
-		castShadow: true,
-		customDepthMaterial : new FrameDepthMaterial()
+		boxSizing: 'border-box',
+		visible,
+		backgroundColor: 0x000000,
+		backgroundOpacity : 0.5,
 	} );
 
+	panel.backgroundSide = DoubleSide;
+	panel.backgroundCastShadow = true;
+	panel.backgroundCustomDepthMaterial = new FrameDepthMaterial();
+
 	//
 	panel.add(
-		// new ThreeMeshUI.Text( {
-		// 	content: text,
-		// } )
+		new ThreeMeshUI.Text( {
+			textContent: text,
+			backgroundColor: 'yellow'
+		} )
 	);
 
 	return panel;
 
 }
 
-function makeRow() {
-
-	return new ThreeMeshUI.Block({
-		width:3.1,
-		height:0.5,
-		contentDirection: 'row',
-		justifyContent: 'space-evenly',
-		backgroundOpacity: 0
-	});
-
-}
 
 // handles resizing the renderer when the viewport is resized
 
@@ -252,11 +343,11 @@ function loop() {
 		borderOpacity: 1
 	} );
 
-	topMiddleRight.set({ borderWidth: Math.abs( 0.25 * Math.sin( Date.now() / 500 ) ) })
+	topMiddleRight.set({ borderWidth: Math.abs( 0.15 * Math.sin( Date.now() / 500 ) ) })
 
-	topLeft.set({borderRadiusTopLeft: Math.abs( 0.5 * Math.sin( Date.now() / 500 ) )  })
+	topLeft.set({borderRadius: [Math.abs( 0.5 * Math.sin( Date.now() / 500 ) ),0,0,0]  })
 
-	const size = 0.25 + Math.abs(0.25 * Math.sin( Date.now() / 500 ) );
+	const size = 0.15 + Math.abs(0.35 * Math.sin( Date.now() / 500 ) );
 	panelScale.set( {width: size, height: size});
 
 	lightHelper.update();
@@ -264,6 +355,7 @@ function loop() {
 	// Don't forget, ThreeMeshUI must be updated manually.
 	// This has been introduced in version 3.0.0 in order
 	// to improve performance
+	// ThreeMeshUI.update();
 	ThreeMeshUI.update();
 
 	controls.update();
diff --git a/examples/dev__justification.js b/examples/dev__justification.js
index 8ac84096..6054d2d7 100644
--- a/examples/dev__justification.js
+++ b/examples/dev__justification.js
@@ -5,10 +5,9 @@ import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.j
 
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 
-import ThreeMeshUI from 'three-mesh-ui';
-
-import FontJSON from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.json';
-import FontImage from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.png';
+import ThreeMeshUI, { FontLibrary } from 'three-mesh-ui';
+import MSDFNormalMaterial from 'three-mesh-ui/examples/materials/msdf/MSDFNormalMaterial';
+import ROBOTO_ADJUSTMENT from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/adjustment';
 
 const WIDTH = window.innerWidth;
 const HEIGHT = window.innerHeight;
@@ -30,7 +29,77 @@ const justificationLegend = [
 
 let scene, camera, renderer, controls, stats;
 
-window.addEventListener( 'load', init );
+// Using `ThreeMeshUI.FontLibrary.prepare( fontFamily, [...fontFamily] )
+// We can ensure any fontFamily passed in that function and theirs variants are properly loaded and setup
+FontLibrary.prepare(
+
+	FontLibrary
+		// Registering a fontFamily called "Roboto", the name is up to us.
+		.addFontFamily("Roboto")
+		// On the fontFamily added, lets add a variant
+		// a font variant usually requires 4 parameters
+		.addVariant(
+			// The weight of the variant '100'|'200'|'300'|'400'|'600'|'700'|'800'|'900'
+			//														LIGHTER					NORMAL			BOLD				BOLDER
+			"normal",
+
+			// The style of the variant 'normal'|'italic'|'oblique'|'oblique(x deg)'
+			"normal",
+
+			// The json definition of the msdf font 'urlToLoad'|loadedObject
+			"./assets/fonts/msdf/roboto/regular.json",
+
+			// The texture of the msdf font 'urlToLoad'|Texture
+			"./assets/fonts/msdf/roboto/regular.png"
+		)
+
+		// Registering additional variants
+		.addVariant("bold", "italic", "./assets/fonts/msdf/roboto/bold-italic.json", "./assets/fonts/msdf/roboto/bold-italic.png" )
+		.addVariant("bold", "normal", "./assets/fonts/msdf/roboto/bold.json", "./assets/fonts/msdf/roboto/bold.png" )
+		.addVariant("normal", "italic", "./assets/fonts/msdf/roboto/italic.json", "./assets/fonts/msdf/roboto/italic.png" )
+
+// FontLibrary.prepare() returns a Promise, we can therefore add a callback to be executed when all files are loaded
+).then( () => {
+
+	// Once font are registered, we can get the font family
+	const RobotoFamily = FontLibrary.getFontFamily("Roboto");
+
+	// And then retrieve a fontVariant defined in this Family
+	const RobotoRegular = RobotoFamily.getVariant('normal','normal');
+
+	// Having font variant allows us to perform some modifications
+	// 1. Adjustments
+	// If you look closely the `Getting started - Basic Setup` you may have noticed that :
+	// 		- the `h` character is slightly below the baseline
+	// This can be adjusted per fontVariant
+	RobotoRegular.adjustTypographicGlyphs( {
+		// 'h' character must change some of its properties defined in the json
+		h: {
+			// the yoffset property should be 2 (instead of 4 in the json)
+			yoffset: 2
+		}
+	} );
+	// Once adjusted, any three-mesh-ui Text using this font variant will use the adjusted properties
+
+	// 1. Material
+	// Instead of assigning custom materials to Text one by one
+	// We can assign a Material(class) to a font variant (Here the bold one)
+	RobotoFamily.getVariant('bold','normal').fontMaterial = MSDFNormalMaterial;
+	// Once set, any three-mesh-ui Text using this font variant will use the defined material
+
+	// We may encounter the following lines in other examples,
+	// they are adjusting font variants to display a nice baseline
+	RobotoFamily.getVariant('bold','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	RobotoFamily.getVariant('bold','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	RobotoFamily.getVariant('bold','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+
+	// Now that the font are loaded and adjusted,
+
+	init();
+
+
+});
+
 window.addEventListener( 'resize', onWindowResize );
 
 //
@@ -72,6 +141,9 @@ function init() {
 
 	makeTitlePanel();
 	justifyInRow = makeTextPanel( 'column' );
+
+	window.rootBlock = justifyInRow;
+
 	justifyInColumn = makeTextPanel( 'row' );
 
 	justifyInRow.position.x = -0.75;
@@ -86,18 +158,17 @@ function init() {
 
 }
 
-function makeTextPanel( contentDirection ) {
+function makeTextPanel( flexDirection ) {
 
 	container = new ThreeMeshUI.Block( {
 		height: DIM_HIGH + 0.2,
 		width: DIM_HIGH + 0.2,
-		contentDirection: contentDirection,
+		flexDirection: flexDirection,
 		justifyContent: 'center',
 		backgroundOpacity: 1,
 		backgroundColor: new THREE.Color( 'grey' ),
-		hiddenOverflow: true,
-		fontFamily: FontJSON,
-		fontTexture: FontImage
+		overflow: 'hidden',
+		fontFamily: "Roboto"
 	} );
 
 	container.position.set( 0, 1, -1.8 );
@@ -108,7 +179,7 @@ function makeTextPanel( contentDirection ) {
 
 		const color = new THREE.Color( justificationLegend[ i ].color );
 		const id = justificationLegend[ i ].id;
-		const panel = buildJustifiedPanel( id, color, contentDirection === 'column' ? 'row' : 'column' );
+		const panel = buildJustifiedPanel( id, color, flexDirection === 'column' ? 'row' : 'column' );
 
 		container.add( panel );
 	}
@@ -116,41 +187,55 @@ function makeTextPanel( contentDirection ) {
 	return container;
 }
 
-function buildJustifiedPanel( id, color, contentDirection ) {
+function buildJustifiedPanel( id, color, flexDirection ) {
 
 	const panel = new ThreeMeshUI.Block( {
-		width: contentDirection === 'row' ? DIM_HIGH : DIM_LOW,
-		height: contentDirection === 'row' ? DIM_LOW : DIM_HIGH,
-		contentDirection: contentDirection,
+		width: flexDirection === 'row' ? DIM_HIGH : DIM_LOW,
+		height: flexDirection === 'row' ? DIM_LOW : DIM_HIGH,
+		flexDirection: flexDirection,
 		justifyContent: id,
-		backgroundOpacity: 0.5,
-		padding: 0.02,
+		backgroundOpacity: 0.3,
+		backgroundColor: 0xff9900,
+		padding: 0.01,
 		margin: 0.01,
 		offset:0.0001
 	} );
 	container.add( panel );
 
-	// const letters = 'ABCDEF';
+	const letters = 'ABCDEF';
+
 
+	const step = 0xFFFFFF / 5;
 	for ( let i = 0; i < 5; i ++ ) {
 
 		const blockText = new ThreeMeshUI.Block( {
-			width: 0.125,
-			height: 0.125,
 			margin: 0.01,
-			borderRadius: 0.02,
+			borderRadius: 0.05,
 			backgroundColor: color,
+			backgroundOpacity: 0.9,
 			justifyContent: 'center',
 			alignItems: 'center',
+			borderWidth: '0 0 0.01 0',
+			borderColor: Math.floor( step * (5-i) ),
 			offset:0.001,
 			visible: i !== 2,
 		} );
+
+		if( i === 0 ) {
+			blockText.set({ width:0.125, height:0.125 });
+		}
+
 		panel.add( blockText );
 
-		// const text = new ThreeMeshUI.Text( {
-		// 	content: letters[ i ]
-		// } );
-		// blockText.add( text );
+		const text = new ThreeMeshUI.Text( {
+			textAlign: 'center',
+			alignItems : 'center',
+			lineHeight: 1,
+			width: 0.125,
+			height: 0.125,
+			textContent: letters[ i ],
+		} );
+		blockText.add( text );
 
 	}
 
@@ -159,17 +244,16 @@ function buildJustifiedPanel( id, color, contentDirection ) {
 
 function makeTitlePanel(){
 
-	const panel = new ThreeMeshUI.Block( {
+	const panel = new ThreeMeshUI.Text( {
 		width: DIM_HIGH * 1.85,
 		height: 0.15,
 		padding: 0.05,
-		contentDirection: 'row',
+		flexDirection: 'row',
 		justifyContent: 'center',
-		textAlign: 'justify',
+		textAlign: 'center',
 		backgroundOpacity: 0.6,
 		fontSize: 0.1,
-		fontFamily: FontJSON,
-		fontTexture: FontImage
+		fontFamily: "Roboto"
 	} );
 
 	for ( let i = 0; i < justificationLegend.length; i ++ ) {
@@ -178,9 +262,9 @@ function makeTitlePanel(){
 		const id = justificationLegend[ i ].id;
 
 		panel.add(
-			new ThreeMeshUI.Text( {
-				content: id + " ",
-				fontColor: color
+			new ThreeMeshUI.Inline( {
+				textContent: id + " ",
+				color: color
 			} )
 		);
 
@@ -210,11 +294,11 @@ setInterval( () => {
 	isInverted = ! isInverted;
 
 	for ( let i = 1; i < justifyInRow.children.length; i ++ ) {
-		justifyInRow.children[ i ].set( { contentDirection:isInverted ? 'row-reverse' : 'row' } );
+		justifyInRow.children[ i ].set( { flexDirection:isInverted ? 'row-reverse' : 'row' } );
 	}
 
 	for ( let i = 1; i < justifyInColumn.children.length; i ++ ) {
-		justifyInColumn.children[ i ].set( { contentDirection:isInverted ? 'column-reverse' : 'column' } );
+		justifyInColumn.children[ i ].set( { flexDirection:isInverted ? 'column-reverse' : 'column' } );
 	}
 
 }, 2500 );
diff --git a/examples/dev__padding.js b/examples/dev__padding.js
index 294ca025..ae0e550e 100644
--- a/examples/dev__padding.js
+++ b/examples/dev__padding.js
@@ -4,7 +4,6 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
 
 import ThreeMeshUI from 'three-mesh-ui';
-import { TextureLoader } from 'three';
 import BoxLayoutBehavior from 'three-mesh-ui/examples/behaviors/helpers/BoxLayoutBehavior';
 
 const WIDTH = window.innerWidth;
@@ -80,39 +79,51 @@ function step1BuildThreeJSElements() {
 //
 function step2BuildThreeMeshUIElements() {
 
+	const container = new ThreeMeshUI.Block({
+		width: 8,
+		flexDirection: 'row',
+		justifyContent: 'space-evenly',
+		alignItems: 'center'
+	});
+
+	container.position.set( 0 , 1 , -2);
+	scene.add( container );
+
 	// If we are going to display ThreeMeshUI Text elements
 	// It is important to know that a Text MUST have a Block as parent
 	// Using three-mesh-ui, we would usually have one or more rootBlock elements
 	const rootBlock = new ThreeMeshUI.Block( {
-
+		boxSizing: 'border-box',
 		// A Block must define its "box-sizing" properties
 		width: 1,
 		height: 1,
+		// margin: 0.05,
 		// padding: '0 0.225 0 0',
 		// padding: '0.25 0 0 0.1',
 		// padding: '0 0 0.1 0.1',
-		padding: '0.1 0.2 0.1 0',
+		// padding: '0.1 0.2 0.1 0',
+		padding: '0 0 0.1 0.5',
 		// padding: 0.1,
 		// padding: '0.1 .2 .2 0.1',
 
 		// A Block can define its "layout" properties
-		// contentDirection: 'row-reverse',
-		contentDirection: 'row',
+		// flexDirection: 'row-reverse',
+		flexDirection: 'row',
 		justifyContent: 'start',
 		alignItems: 'start',
 		textAlign: 'justify',
 
 		backgroundColor: new THREE.Color(0xffffff),
-		backgroundTexture : new TextureLoader().load("./assets/uv_grid.jpg"),
+		// backgroundTexture : new TextureLoader().load("./assets/uv_grid.jpg"),
 
 		// borderWidth: 0.1,
-		borderWidth: '0 0.2 .05 0.1',
+		// borderWidth: '0 0.2 .05 0.1',
 		borderColor: new THREE.Color(0x000000),
 
 		// A Block can also define "text" properties that will propagate to any of its Text children
 		fontSize: 0.055,
-		fontFamily: '/assets/fonts/msdf/roboto/regular.json',
-		fontTexture: '/assets/fonts/msdf/roboto/regular.png',
+		fontFamily: './assets/fonts/msdf/roboto/regular.json',
+		fontTexture: './assets/fonts/msdf/roboto/regular.png',
 		// @Note: setting fontFamily
 		// This looks very easy, but this isn't the best way for handling fonts
 		// However it is perfect for a first glance on how to get started with three-mesh-ui
@@ -122,25 +133,20 @@ function step2BuildThreeMeshUIElements() {
 
 	// three-mesh-ui root elements must be added on threejs display stack
 	// In the scene, or in another Object3D of our choice
-	scene.add( rootBlock );
-
-	// three-mesh-ui Block are Object3D agreemented with three-mesh-ui capabilities
-	// so you can use any existing Object3D methods and properties
-	rootBlock.position.set( -0.5, 1, -1.8 );
-	// rootBlock.rotation.x = -0.55;
+	container.add( rootBlock );
 
 	// Now that we have a three-mesh-ui Block, we can add three-mesh-ui Text's in it
 	rootBlock.add(
 
 		// new ThreeMeshUI.Text( {
-		// 	// three-mesh-ui Text should defined their content to display
+		// 	// three-mesh-ui Text should defined their flexDirection to display
 		// 	content: 'this is a text made of small words ',
 		//
 		// 	// if a Text is going to use the exact same Text properties as defined in its parent
 		// 	// there is no need to set those properties again
 		// 	// fontSize: 0.055,
-		// 	// fontFamily: '/assets/fonts/msdf/roboto/regular.json',
-		// 	// fontTexture: '/assets/fonts/msdf/roboto/regular.png',
+		// 	// fontFamily: './assets/fonts/msdf/roboto/regular.json',
+		// 	// fontTexture: './assets/fonts/msdf/roboto/regular.png',
 		//
 		// } ),
 
@@ -185,119 +191,122 @@ function step2BuildThreeMeshUIElements() {
 
 	const settings = [
 		//top left -- column
-		{contentDirection:'column', justifyContent: 'start', alignItems: 'start'},
-		{contentDirection:'column-reverse', justifyContent: 'end', alignItems: 'start'},
-					// {contentDirection:'column', justifyContent: 'space-between', alignItems: 'start'},
-					// {contentDirection:'column-reverse', justifyContent: 'space-between', alignItems: 'start'},
-					// {contentDirection:'column', justifyContent: 'space-around', alignItems: 'start'},
-					// {contentDirection:'column-reverse', justifyContent: 'space-around', alignItems: 'start'},
-					// {contentDirection:'column', justifyContent: 'space-evenly', alignItems: 'start'},
-					// {contentDirection:'column-reverse', justifyContent: 'space-evenly', alignItems: 'start'},
+		{flexDirection:'column', justifyContent: 'start', alignItems: 'start'},
+		{flexDirection:'column-reverse', justifyContent: 'end', alignItems: 'start'},
+					// {flexDirection:'column', justifyContent: 'space-between', alignItems: 'start'},
+					// {flexDirection:'column-reverse', justifyContent: 'space-between', alignItems: 'start'},
+					// {flexDirection:'column', justifyContent: 'space-around', alignItems: 'start'},
+					// {flexDirection:'column-reverse', justifyContent: 'space-around', alignItems: 'start'},
+					// {flexDirection:'column', justifyContent: 'space-evenly', alignItems: 'start'},
+					// {flexDirection:'column-reverse', justifyContent: 'space-evenly', alignItems: 'start'},
 		//top left -- row
-		{contentDirection:'row', justifyContent: 'start', alignItems: 'start'},
-		{contentDirection:'row-reverse', justifyContent: 'end', alignItems: 'start'},
-					// {contentDirection:'row', justifyContent: 'space-between', alignItems: 'start'},
-					// {contentDirection:'row-reverse', justifyContent: 'space-between', alignItems: 'start'},
-					// {contentDirection:'row', justifyContent: 'space-around', alignItems: 'start'},
-					// {contentDirection:'row-reverse', justifyContent: 'space-around', alignItems: 'start'},
-					// {contentDirection:'row', justifyContent: 'space-evenly', alignItems: 'start'},
-					// {contentDirection:'row-reverse', justifyContent: 'space-evenly', alignItems: 'start'},
+		{flexDirection:'row', justifyContent: 'start', alignItems: 'start'},
+		{flexDirection:'row-reverse', justifyContent: 'end', alignItems: 'start'},
+					// {flexDirection:'row', justifyContent: 'space-between', alignItems: 'start'},
+					// {flexDirection:'row-reverse', justifyContent: 'space-between', alignItems: 'start'},
+					// {flexDirection:'row', justifyContent: 'space-around', alignItems: 'start'},
+					// {flexDirection:'row-reverse', justifyContent: 'space-around', alignItems: 'start'},
+					// {flexDirection:'row', justifyContent: 'space-evenly', alignItems: 'start'},
+					// {flexDirection:'row-reverse', justifyContent: 'space-evenly', alignItems: 'start'},
 		// top center
-		{contentDirection:'column', justifyContent: 'start', alignItems: 'center'},
-		{contentDirection:'column-reverse', justifyContent: 'end', alignItems: 'center'},
-					// {contentDirection:'column', justifyContent: 'space-between', alignItems: 'center'},
-					// {contentDirection:'column-reverse', justifyContent: 'space-between', alignItems: 'center'},
-					// {contentDirection:'column', justifyContent: 'space-around', alignItems: 'center'},
-					// {contentDirection:'column-reverse', justifyContent: 'space-around', alignItems: 'center'},
-					// {contentDirection:'column', justifyContent: 'space-evenly', alignItems: 'center'},
-					// {contentDirection:'column-reverse', justifyContent: 'space-evenly', alignItems: 'center'},
+		{flexDirection:'column', justifyContent: 'start', alignItems: 'center'},
+		{flexDirection:'column-reverse', justifyContent: 'end', alignItems: 'center'},
+					// {flexDirection:'column', justifyContent: 'space-between', alignItems: 'center'},
+					// {flexDirection:'column-reverse', justifyContent: 'space-between', alignItems: 'center'},
+					// {flexDirection:'column', justifyContent: 'space-around', alignItems: 'center'},
+					// {flexDirection:'column-reverse', justifyContent: 'space-around', alignItems: 'center'},
+					// {flexDirection:'column', justifyContent: 'space-evenly', alignItems: 'center'},
+					// {flexDirection:'column-reverse', justifyContent: 'space-evenly', alignItems: 'center'},
 		// top center -- row
-		{contentDirection:'row', justifyContent: 'center', alignItems: 'start'},
-		{contentDirection:'row-reverse', justifyContent: 'center', alignItems: 'start'},
-					// {contentDirection:'row', justifyContent: 'space-between', alignItems: 'center'},
-					// {contentDirection:'row-reverse', justifyContent: 'space-between', alignItems: 'center'},
-					// {contentDirection:'row', justifyContent: 'space-around', alignItems: 'center'},
-					// {contentDirection:'row-reverse', justifyContent: 'space-around', alignItems: 'center'},
-					// {contentDirection:'row', justifyContent: 'space-evenly', alignItems: 'center'},
-					// {contentDirection:'row-reverse', justifyContent: 'space-evenly', alignItems: 'center'},
+		{flexDirection:'row', justifyContent: 'center', alignItems: 'start'},
+		{flexDirection:'row-reverse', justifyContent: 'center', alignItems: 'start'},
+					// {flexDirection:'row', justifyContent: 'space-between', alignItems: 'center'},
+					// {flexDirection:'row-reverse', justifyContent: 'space-between', alignItems: 'center'},
+					// {flexDirection:'row', justifyContent: 'space-around', alignItems: 'center'},
+					// {flexDirection:'row-reverse', justifyContent: 'space-around', alignItems: 'center'},
+					// {flexDirection:'row', justifyContent: 'space-evenly', alignItems: 'center'},
+					// {flexDirection:'row-reverse', justifyContent: 'space-evenly', alignItems: 'center'},
 		// top right
-		{contentDirection:'column', justifyContent: 'start', alignItems: 'end'},
-		{contentDirection:'column-reverse', justifyContent: 'end', alignItems: 'end'},
+		{flexDirection:'column', justifyContent: 'start', alignItems: 'end'},
+		{flexDirection:'column-reverse', justifyContent: 'end', alignItems: 'end'},
 		// top right -- row
-		{contentDirection:'row', justifyContent: 'end', alignItems: 'start'},
-		{contentDirection:'row-reverse', justifyContent: 'start', alignItems: 'start'},
+		{flexDirection:'row', justifyContent: 'end', alignItems: 'start'},
+		{flexDirection:'row-reverse', justifyContent: 'start', alignItems: 'start'},
 
 		// middle right
-		{contentDirection:'column', justifyContent: 'center', alignItems: 'end'},
-		{contentDirection:'column-reverse', justifyContent: 'center', alignItems: 'end'},
+		{flexDirection:'column', justifyContent: 'center', alignItems: 'end'},
+		{flexDirection:'column-reverse', justifyContent: 'center', alignItems: 'end'},
 		// middle right -- row
-		{contentDirection:'row', justifyContent: 'end', alignItems: 'center'},
-		{contentDirection:'row-reverse', justifyContent: 'start', alignItems: 'center'},
+		{flexDirection:'row', justifyContent: 'end', alignItems: 'center'},
+		{flexDirection:'row-reverse', justifyContent: 'start', alignItems: 'center'},
 
 		// bottom right
-		{contentDirection:'column', justifyContent: 'end', alignItems: 'end'},
-		{contentDirection:'column-reverse', justifyContent: 'start', alignItems: 'end'},
+		{flexDirection:'column', justifyContent: 'end', alignItems: 'end'},
+		{flexDirection:'column-reverse', justifyContent: 'start', alignItems: 'end'},
 		// bottom right -- row
-		{contentDirection:'row', justifyContent: 'end', alignItems: 'end'},
-		{contentDirection:'row-reverse', justifyContent: 'start', alignItems: 'end'},
+		{flexDirection:'row', justifyContent: 'end', alignItems: 'end'},
+		{flexDirection:'row-reverse', justifyContent: 'start', alignItems: 'end'},
 
 		// bottom center
-		{contentDirection:'column', justifyContent: 'end', alignItems: 'center'},
-		{contentDirection:'column-reverse', justifyContent: 'start', alignItems: 'center'},
+		{flexDirection:'column', justifyContent: 'end', alignItems: 'center'},
+		{flexDirection:'column-reverse', justifyContent: 'start', alignItems: 'center'},
 		// bottom center -- row
-		{contentDirection:'row', justifyContent: 'center', alignItems: 'end'},
-		{contentDirection:'row-reverse', justifyContent: 'center', alignItems: 'end'},
+		{flexDirection:'row', justifyContent: 'center', alignItems: 'end'},
+		{flexDirection:'row-reverse', justifyContent: 'center', alignItems: 'end'},
 
 		//bottom left
-		{contentDirection:'column', justifyContent: 'end', alignItems: 'start'},
-		{contentDirection:'column-reverse', justifyContent: 'start', alignItems: 'start'},
+		{flexDirection:'column', justifyContent: 'end', alignItems: 'start'},
+		{flexDirection:'column-reverse', justifyContent: 'start', alignItems: 'start'},
 		//bottom left -- row
-		{contentDirection:'row', justifyContent: 'start', alignItems: 'end'},
-		{contentDirection:'row-reverse', justifyContent: 'end', alignItems: 'end'},
+		{flexDirection:'row', justifyContent: 'start', alignItems: 'end'},
+		{flexDirection:'row-reverse', justifyContent: 'end', alignItems: 'end'},
 
 		// middle left
-		{contentDirection:'column', justifyContent: 'center', alignItems: 'start'},
-		{contentDirection:'column-reverse', justifyContent: 'center', alignItems: 'start'},
+		{flexDirection:'column', justifyContent: 'center', alignItems: 'start'},
+		{flexDirection:'column-reverse', justifyContent: 'center', alignItems: 'start'},
 		// middle left -- row
-		{contentDirection:'row', justifyContent: 'start', alignItems: 'center'},
-		{contentDirection:'row-reverse', justifyContent: 'end', alignItems: 'center'},
+		{flexDirection:'row', justifyContent: 'start', alignItems: 'center'},
+		{flexDirection:'row-reverse', justifyContent: 'end', alignItems: 'center'},
 
 		// middle center
-		{contentDirection:'column', justifyContent: 'center', alignItems: 'center'},
-		{contentDirection:'column-reverse', justifyContent: 'center', alignItems: 'center'},
+		{flexDirection:'column', justifyContent: 'center', alignItems: 'center'},
+		{flexDirection:'column-reverse', justifyContent: 'center', alignItems: 'center'},
 		// middle center -- row
-		{contentDirection:'row', justifyContent: 'center', alignItems: 'center'},
-		{contentDirection:'row-reverse', justifyContent: 'center', alignItems: 'center'},
+		{flexDirection:'row', justifyContent: 'center', alignItems: 'center'},
+		{flexDirection:'row-reverse', justifyContent: 'center', alignItems: 'center'},
 	]
 
 
 
 	const rootBlock2 = new ThreeMeshUI.Block( {
 
+		boxSizing: 'border-box',
+
 		// A Block must define its "box-sizing" properties
 		width: 1,
 		height: 1,
+		margin: 0.05,
 		// padding: '0 0.225 0 0',
 		// padding: '0.25 0 0 0.1',
 		padding: '0.2 0.25 0.1 0.1',
 		// padding: '0.1 0.2 0.3 0.4',
 
 		// A Block can define its "layout" properties
-		contentDirection: 'row',
-		// contentDirection: 'column-reverse',
+		flexDirection: 'row',
+		// flexDirection: 'column-reverse',
 		justifyContent: 'start',
 		alignItems: 'start',
 		// textAlign: 'justify-left',
 		textAlign: 'right',
 
 		backgroundColor: new THREE.Color(0xffffff),
-		backgroundTexture : new TextureLoader().load("./assets/uv_grid.jpg"),
+		// backgroundTexture : new TextureLoader().load("./assets/uv_grid.jpg"),
 
 		borderWidth: '0.1 0.05 0.05 0.1',
 		// A Block can also define "text" properties that will propagate to any of its Text children
 		fontSize: 0.055,
-		fontFamily: '/assets/fonts/msdf/roboto/regular.json',
-		fontTexture: '/assets/fonts/msdf/roboto/regular.png',
+		fontFamily: './assets/fonts/msdf/roboto/regular.json',
+		fontTexture: './assets/fonts/msdf/roboto/regular.png',
 		// @Note: setting fontFamily
 		// This looks very easy, but this isn't the best way for handling fonts
 		// However it is perfect for a first glance on how to get started with three-mesh-ui
@@ -307,12 +316,7 @@ function step2BuildThreeMeshUIElements() {
 
 	// three-mesh-ui root elements must be added on threejs display stack
 	// In the scene, or in another Object3D of our choice
-	scene.add( rootBlock2 );
-
-	// three-mesh-ui Block are Object3D agreemented with three-mesh-ui capabilities
-	// so you can use any existing Object3D methods and properties
-	rootBlock2.position.set( 1.05 - 0.5, 1, -1.8 );
-	// rootBlock2.rotation.x = -0.55;
+	container.add( rootBlock2 );
 
 
 	// Now that we have a three-mesh-ui Block, we can add three-mesh-ui Text's in it
@@ -320,13 +324,13 @@ function step2BuildThreeMeshUIElements() {
 
 		new ThreeMeshUI.Text( {
 			// three-mesh-ui Text should defined their content to display
-			content: 'this is a text made of small words '.repeat(2),
+			textContent: 'this is a text made of small words '.repeat(2),
 
 			// if a Text is going to use the exact same Text properties as defined in its parent
 			// there is no need to set those properties again
 			// fontSize: 0.055,
-			// fontFamily: '/assets/fonts/msdf/roboto/regular.json',
-			// fontTexture: '/assets/fonts/msdf/roboto/regular.png',
+			// fontFamily: './assets/fonts/msdf/roboto/regular.json',
+			// fontTexture: './assets/fonts/msdf/roboto/regular.png',
 
 		} ),
 
@@ -343,30 +347,32 @@ function step2BuildThreeMeshUIElements() {
 		// A Block must define its "box-sizing" properties
 		width: 1,
 		height: 1,
+		// margin: 0.05,
 		// padding: '0 0.225 0 0',
 		// padding: '0.25 0 0 0.1',
 		// padding: '0 0 0.1 0.1',
-		padding: '0.1 0.2 0.3 0.4',
+		// padding: '0.1 0.2 0.3 0.4',
+		padding: '0.1 0 0.1 0.5',
 
 		// A Block can define its "layout" properties
-		// contentDirection: 'column',
-		contentDirection: 'column-reverse',
-		// contentDirection: 'row',
-		// contentDirection: 'row-reverse',
+		// flexDirection: 'column',
+		flexDirection: 'column-reverse',
+		// flexDirection: 'row',
+		// flexDirection: 'row-reverse',
 		justifyContent: 'start',
 		alignItems: 'end',
 		textAlign: 'justify',
 		boxSizing: 'content-box',
 
-		borderWidth: '0.1 0 0.1 0.05',
+		// borderWidth: '0.1 0 0.1 0.05',
 		backgroundColor: new THREE.Color(0xffffff),
-		backgroundTexture : new TextureLoader().load("./assets/uv_grid.jpg"),
+		// backgroundTexture : new TextureLoader().load("./assets/uv_grid.jpg"),
 		backgroundSize: 'stretch',
 
 		// A Block can also define "text" properties that will propagate to any of its Text children
 		fontSize: 0.055,
-		fontFamily: '/assets/fonts/msdf/roboto/regular.json',
-		fontTexture: '/assets/fonts/msdf/roboto/regular.png',
+		fontFamily: './assets/fonts/msdf/roboto/regular.json',
+		fontTexture: './assets/fonts/msdf/roboto/regular.png',
 		// @Note: setting fontFamily
 		// This looks very easy, but this isn't the best way for handling fonts
 		// However it is perfect for a first glance on how to get started with three-mesh-ui
@@ -376,12 +382,7 @@ function step2BuildThreeMeshUIElements() {
 
 	// three-mesh-ui root elements must be added on threejs display stack
 	// In the scene, or in another Object3D of our choice
-	scene.add( rootBlock3 );
-
-	// three-mesh-ui Block are Object3D agreemented with three-mesh-ui capabilities
-	// so you can use any existing Object3D methods and properties
-	rootBlock3.position.set( -1.35 - 0.5, 0.9, -1.8 );
-	// rootBlock3.rotation.x = -0.55;
+	container.add( rootBlock3 );
 
 	const childWithMargin = new ThreeMeshUI.Block( {
 			// three-mesh-ui Text should defined their content to display
@@ -428,7 +429,7 @@ function step2BuildThreeMeshUIElements() {
 	);
 
 	new BoxLayoutBehavior( rootBlock3 ).attach();
-	new BoxLayoutBehavior( childWithMargin ).attach();
+	// new BoxLayoutBehavior( childWithMargin ).attach();
 
 
 
@@ -438,14 +439,15 @@ function step2BuildThreeMeshUIElements() {
 		// A Block must define its "box-sizing" properties
 		width: 1,
 		height: 1,
+		margin: 0.05,
 		// padding: '0 0.225 0 0',
 		// padding: '0.25 0 0 0.1',
 		padding: '0.4 0.25 0.1 0.1',
 		// padding: '0.1 0.2 0.3 0.4',
 
 		// A Block can define its "layout" properties
-		contentDirection: 'row',
-		// contentDirection: 'column-reverse',
+		flexDirection: 'row',
+		// flexDirection: 'column-reverse',
 		justifyContent: 'start',
 		alignItems: 'start',
 		// textAlign: 'justify-left',
@@ -454,12 +456,12 @@ function step2BuildThreeMeshUIElements() {
 
 		borderWidth: '0.1 0 0.05 0.1',
 		backgroundColor: new THREE.Color(0xffffff),
-		backgroundTexture : new TextureLoader().load("./assets/uv_grid.jpg"),
+		// backgroundTexture : new TextureLoader().load("./assets/uv_grid.jpg"),
 
 		// A Block can also define "text" properties that will propagate to any of its Text children
 		fontSize: 0.055,
-		fontFamily: '/assets/fonts/msdf/roboto/regular.json',
-		fontTexture: '/assets/fonts/msdf/roboto/regular.png',
+		fontFamily: './assets/fonts/msdf/roboto/regular.json',
+		fontTexture: './assets/fonts/msdf/roboto/regular.png',
 		// @Note: setting fontFamily
 		// This looks very easy, but this isn't the best way for handling fonts
 		// However it is perfect for a first glance on how to get started with three-mesh-ui
@@ -469,12 +471,7 @@ function step2BuildThreeMeshUIElements() {
 
 	// three-mesh-ui root elements must be added on threejs display stack
 	// In the scene, or in another Object3D of our choice
-	scene.add( rootBlock4 );
-
-	// three-mesh-ui Block are Object3D agreemented with three-mesh-ui capabilities
-	// so you can use any existing Object3D methods and properties
-	rootBlock4.position.set( 2.28 - 0.5, 1.15, -1.8 );
-	// rootBlock4.rotation.x = -0.55;
+	container.add( rootBlock4 );
 
 
 	// Now that we have a three-mesh-ui Block, we can add three-mesh-ui Text's in it
@@ -482,13 +479,13 @@ function step2BuildThreeMeshUIElements() {
 
 		new ThreeMeshUI.Text( {
 			// three-mesh-ui Text should defined their content to display
-			content: 'this is a text made of small words '.repeat(2),
+			textContent: 'this is a text made of small words '.repeat(2),
 
 			// if a Text is going to use the exact same Text properties as defined in its parent
 			// there is no need to set those properties again
 			// fontSize: 0.055,
-			// fontFamily: '/assets/fonts/msdf/roboto/regular.json',
-			// fontTexture: '/assets/fonts/msdf/roboto/regular.png',
+			// fontFamily: './assets/fonts/msdf/roboto/regular.json',
+			// fontTexture: './assets/fonts/msdf/roboto/regular.png',
 
 		} ),
 
diff --git a/examples/dev__test_preparation.js b/examples/dev__test_preparation.js
index 6d9372d6..b870a0ca 100644
--- a/examples/dev__test_preparation.js
+++ b/examples/dev__test_preparation.js
@@ -85,7 +85,7 @@ function step2BuildThreeMeshUIElements() {
 
 	// const padding = '0.1 0 0.3 0';
 	const padding = '0.1 0.5 0.2 0.2';
-	const contentDirection = 'row';
+	const flexDirection = 'row';
 	const justifyContent = 'center';
 	const alignItems = 'center';
 
@@ -98,12 +98,12 @@ function step2BuildThreeMeshUIElements() {
 		boxSizing: 'border-box',
 
 
-		contentDirection,
+		flexDirection,
 		justifyContent,
 		alignItems,
 
 		backgroundColor: new THREE.Color(0xffffff),
-		backgroundTexture : new TextureLoader().load("./assets/uv_grid.jpg"),
+		backgroundImage : new TextureLoader().load("./assets/uv_grid.jpg"),
 
 		// borderWidth: 0.1,
 		// borderWidth: '0 0.2 .05 0.2',
@@ -111,8 +111,8 @@ function step2BuildThreeMeshUIElements() {
 
 		// A Block can also define "text" properties that will propagate to any of its Text children
 		fontSize: 0.055,
-		fontFamily: '/assets/fonts/msdf/roboto/regular.json',
-		fontTexture: '/assets/fonts/msdf/roboto/regular.png',
+		fontFamily: './assets/fonts/msdf/roboto/regular.json',
+		fontTexture: './assets/fonts/msdf/roboto/regular.png',
 
 
 	} );
@@ -153,12 +153,6 @@ function step2BuildThreeMeshUIElements() {
 	new BoxLayoutBehavior( rootBlock ).attach();
 	new BoxAnchorsBehavior( rootBlock ).attach();
 
-	rootBlock.addAfterUpdate( () => {
-
-		console.log( child1.position.x , child1.position.y )
-
-	});
-
 	const rootBlock2 = new ThreeMeshUI.Block( {
 
 		// A Block must define its "box-sizing" properties
@@ -168,13 +162,13 @@ function step2BuildThreeMeshUIElements() {
 		boxSizing: 'content-box',
 
 		// A Block can define its "layout" properties
-		// contentDirection: 'row-reverse',
-		contentDirection,
+		// flexDirection: 'row-reverse',
+		flexDirection,
 		justifyContent,
 		alignItems,
 
 		backgroundColor: new THREE.Color(0xffffff),
-		backgroundTexture : new TextureLoader().load("./assets/uv_grid.jpg"),
+		backgroundImage : new TextureLoader().load("./assets/uv_grid.jpg"),
 		backgroundSize: 'stretch',
 
 		// borderWidth: 0.1,
@@ -183,13 +177,13 @@ function step2BuildThreeMeshUIElements() {
 
 		// A Block can also define "text" properties that will propagate to any of its Text children
 		fontSize: 0.055,
-		fontFamily: '/assets/fonts/msdf/roboto/regular.json',
-		fontTexture: '/assets/fonts/msdf/roboto/regular.png',
+		fontFamily: './assets/fonts/msdf/roboto/regular.json',
+		fontTexture: './assets/fonts/msdf/roboto/regular.png',
 
 
 	} );
 
-	rootBlock2.material = new FrameBasicMaterial({});
+	rootBlock2.backgroundMaterial = new FrameBasicMaterial({});
 
 
 	scene.add( rootBlock2 );
@@ -236,16 +230,14 @@ function step2BuildThreeMeshUIElements() {
 
 	rootBlock2.addAfterUpdate( () => {
 
-		console.log( child11.position.x, child11.position.y );
-
-		rootBlock2.frame.material.map.matrixAutoUpdate = true;
+		rootBlock2.backgroundMaterial.map.matrixAutoUpdate = true;
 
-		rootBlock2.frame.material.map.offset.set(
+		rootBlock2.backgroundMaterial.map.offset.set(
 			-rootBlock2._padding.w,
 			-rootBlock2._padding.z
 		);
 
-		rootBlock2.frame.material.map.repeat.set(
+		rootBlock2.backgroundMaterial.map.repeat.set(
 			rootBlock2.offsetWidth / rootBlock2.innerWidth,
 			rootBlock2.offsetHeight / rootBlock2.innerHeight
 		);
diff --git a/examples/dev__whitespace.js b/examples/dev__whitespace.js
index 42bdf97d..d5cdb1d7 100644
--- a/examples/dev__whitespace.js
+++ b/examples/dev__whitespace.js
@@ -1,17 +1,17 @@
+// xfg:title WhiteSpace
+// xfg:category develop
+
 /* Import everything we need from Three.js */
 
 import * as THREE from 'three';
+import { Mesh, MeshBasicMaterial, PlaneGeometry } from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
 import ThreeMeshUI, { FontLibrary, MSDFFontMaterialUtils, ShaderChunkUI } from 'three-mesh-ui';
-
-
-import { Mesh, MeshBasicMaterial, PlaneBufferGeometry } from 'three';
-import * as FontWeight from '../src/utils/font/FontWeight';
-import * as FontStyle from '../src/utils/font/FontStyle';
 import ROBOTO_ADJUSTMENT from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/adjustment';
+import TypographicLayoutBehavior from 'three-mesh-ui/examples/behaviors/helpers/TypographicLayoutBehavior';
 
 const WIDTH = window.innerWidth;
 const HEIGHT = window.innerHeight;
@@ -21,22 +21,20 @@ let scene, camera, renderer, controls;
 window.addEventListener( 'load', preloadFonts );
 window.addEventListener( 'resize', onWindowResize );
 
-function preloadFonts(){
+function preloadFonts() {
 	FontLibrary.prepare(
-
 		FontLibrary
-			.addFontFamily("Roboto")
-			.addVariant(FontWeight.NORMAL, FontStyle.NORMAL, "./assets/fonts/msdf/roboto/regular.json", "./assets/fonts/msdf/roboto/regular.png" )
-
+			.addFontFamily( 'Roboto' )
+			.addVariant( 'normal', 'normal', './assets/fonts/msdf/roboto/regular.json', './assets/fonts/msdf/roboto/regular.png' )
 	).then( () => {
 
 		// Adjusting font variants
-		const FF = FontLibrary.getFontFamily("Roboto");
-		FF.getVariant('400','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+		const FF = FontLibrary.getFontFamily( 'Roboto' );
+		FF.getVariant( 'normal', 'normal' ).adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
 
 		init();
 
-	});
+	} );
 
 
 }
@@ -88,8 +86,7 @@ function init() {
 
 function makeUI() {
 	const container = new ThreeMeshUI.Block( {
-		height: 1.5,
-		width: 0.55,
+		width: 0.78,
 		justifyContent: 'center',
 		alignItems: 'center',
 		backgroundOpacity: 0,
@@ -101,16 +98,16 @@ function makeUI() {
 
 	//
 
-	const textBlock = new ThreeMeshUI.Block( {
-		height: 0.4,
-		width: 0.73,
+	const textBlock = new ThreeMeshUI.Text( {
 		margin: 0.05,
 		textAlign: 'right',
 		justifyContent: 'center',
-		padding: 0.025,
-		interLine: 0.01,
+		color: 'red',
+		// backgroundColor: 0x000000,
+		// backgroundOpacity: 0.15,
 		letterSpacing: 0,
-		breakOn: "- \n"
+		// breakOn: "- \n",
+		fontMaterial: new FontMaterialDebugger()
 	} );
 
 	container.add( textBlock );
@@ -118,106 +115,20 @@ function makeUI() {
 	//
 
 	container.set( {
-		fontFamily: "Roboto"
+		fontFamily: 'Roboto'
 	} );
 
 	const textContent = 'The spiny bush viper is known for its extremely keeled dorsal scales.';
 	// const textContent = 'The spiny bush viper is';
-	const text = new ThreeMeshUI.Text( {
+	const text = new ThreeMeshUI.Inline( {
 		fontSize: 0.06,
 		fontOpacity: 0.75,
-		content: textContent,
+		textContent,
 	} );
 
-	const text2 = new ThreeMeshUI.Text( {
-		fontSize: 0.015,
-		fontOpacity: 0.75,
-		content: 'The spiny bush viper is known for its extremely keeled dorsal scales.',
-	} );
-
-	text.material = new FontMaterialDebugger();
-
-	// Lines properties. Lines are planes manually added behind each text lines
-	// in order to perceive and validate line width
-
-	const lineMat = new MeshBasicMaterial( { color: 0x696969, opacity: 0.5 } );
-	const baseMat = new MeshBasicMaterial( { color: 0xff00ff } );
-	const medianMat = new MeshBasicMaterial( { color: 0x99ff00 } );
-	let lines = [];
-
-	text.addAfterUpdate( function () {
-
-		// remove all lines previously added
-		for ( let i = 0; i < lines.length; i++ ) {
-			const lineMesh = lines[ i ];
-			text.remove( lineMesh );
-		}
-		lines = [];
-
-		console.log(textBlock.lines);
-
-		// retrieve all lines sent by InlineManager for the textBlock
-		for ( let i = 0; i < textBlock.lines.length; i++ ) {
-
-			const line = textBlock.lines[ i ];
-
-			if ( !line[ 0 ] ) continue;
-
-			const lineHeight = line.lineHeight;
-			const lineBase = line.lineBase;
-
-			const deltaLine = lineHeight - lineBase;
-
-			// TextBackground
-			const lineGeo = new PlaneBufferGeometry( line.width, lineHeight );
-			const lineMesh = new Mesh( lineGeo, lineMat );
-
-			lineMesh.position.x = line[ 0 ].offsetX + ( line.width / 2 );
-			lineMesh.position.y = line.y + lineHeight/2 - deltaLine/4; // Background
-
-
-			lines.push( lineMesh );
-			text.add( lineMesh );
-
-			// baseline
-			const baselineMesh = new Mesh( new PlaneBufferGeometry( line.width, 0.001 ), baseMat );
-			baselineMesh.position.x = line[ 0 ].offsetX + ( line.width / 2 );
-			baselineMesh.position.y = line.y + lineBase/2 - (lineHeight-lineBase) + 0.0005; // Baseline
-
-			lines.push( baselineMesh );
-			text.add( baselineMesh );
-
-
-			// Median
-			const medianMesh = new Mesh( new PlaneBufferGeometry( line.width, 0.001 ), medianMat );
-
-			medianMesh.position.x = line[ 0 ].offsetX + ( line.width / 2 );
-
-			const delta = baselineMesh.position.y - lineMesh.position.y;
-
-
-			medianMesh.position.y =  lineMesh.position.y - delta - 0.0005; // Baseline
-			lines.push( medianMesh );
-			text.add( medianMesh );
-
-			baselineMesh.position.z = medianMesh.position.z = text.children[0].position.z + 0.006;
-
-
-		}
-
-
-		//
-		// const heightMesh = new Mesh( new PlaneBufferGeometry( 0.5, textBlock.lines.height ),
-		// 	new MeshBasicMaterial({color:0xff0000}));
-		//
-		// lines.push( heightMesh );
-		// text.add( heightMesh );
-
-
-
-	});
+	new TypographicLayoutBehavior( textBlock, 0x9e9e9e, 0x000000 ).attach();
 
-	textBlock.add( text , text2 );
+	textBlock.add( text );
 
 
 	//build html overlay for comparison and selection
@@ -410,15 +321,15 @@ class FontMaterialDebugger extends MeshBasicMaterial {
 
 			shader.fragmentShader = shader.fragmentShader.replace(
 				'#include <uv_pars_fragment>',
-				'#include <uv_pars_fragment>\n' + ShaderChunkUI.msdf_alphaglyph_pars_fragment
+				'#include <uv_pars_fragment>\n' + ShaderChunkUI.msdfAlphaglyphParsFragmentGlsl
 			);
 
 			// fragment chunks
 			shader.fragmentShader = shader.fragmentShader.replace(
 				'#include <alphamap_fragment>',
-				ShaderChunkUI.msdf_alphaglyph_fragment + `
+				ShaderChunkUI.msdfAlphaglyphFragmentGlsl + `
 				if( diffuseColor.a <= 0.02 ) {
-					diffuseColor = vec4(0.,0.,0.,0.75);
+					diffuseColor = vec4(1.-diffuseColor.x,1.-diffuseColor.y,1.-diffuseColor.z,0.75);
 				}
 				#include <alphamap_fragment>
 `
diff --git a/examples/elements/keyboard/KeyboardElement.js b/examples/elements/keyboard/KeyboardElement.js
new file mode 100644
index 00000000..6a1a5dc0
--- /dev/null
+++ b/examples/elements/keyboard/KeyboardElement.js
@@ -0,0 +1,430 @@
+import { TextureLoader } from 'three';
+import { Block, Text, InlineBlock, Inline } from 'three-mesh-ui';
+import KeyboardListener from 'three-mesh-ui/examples/elements/keyboard/KeyboardListener';
+
+//
+
+const textureLoader = new TextureLoader();
+
+//
+
+/**
+ * Job: high-level component that returns a keyboard
+ * @property {InteractiveListener} interactiveListener
+ * @property {Array.<MeshUIBaseElement>} interactiveObjects
+ * @method {()=>{void}} setNextCharset
+ */
+export default class KeyboardElement extends Block {
+
+	constructor( options = {} ) {
+
+		// DEFAULTS
+		KeyboardElement.ensureOptions( options );
+
+		super();
+
+		KeyboardElement.make( this, options );
+
+	}
+
+	/**
+	 *
+	 * @returns {BlockElement}
+	 * @private
+	 */
+	_buildPanel( ) {
+
+		const panelBlock = new Block( {} );
+		panelBlock.charset = 0;
+
+		return panelBlock;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+
+	/**
+	 *
+	 * @param char
+	 * @param keyDefinition
+	 * @returns {MeshUIBaseElement}
+	 * @private
+	 */
+	_buildKey( char, keyDefinition ) {
+
+		return new Text( { name: char } );
+
+	}
+
+	/**
+	 *
+	 * @param char
+	 * @param keyDefinition
+	 * @returns {MeshUIBaseElement}
+	 * @private
+	 */
+	_buildBlock( ) {
+
+		return new Block( {} );
+
+	}
+
+	/**
+	 *
+	 * @param char
+	 * @param keyDefinition
+	 * @returns {InlineElement}
+	 * @private
+	 */
+	_buildKeyInline( char, keyDefinition ) {
+
+		return new Inline( { name: char } );
+
+	}
+
+	/**
+	 *
+	 * @param char
+	 * @param keyDefinition
+	 * @returns {InlineBlockElement}
+	 * @private
+	 */
+	_buildKeyInlineBlock( char, keyDefinition ) {
+
+		return new InlineBlock( { name: char } );
+
+	} /* eslint-enable no-unused-vars */
+
+
+	static ensureOptions ( options ) {
+
+		if ( !options.width ) options.width = 1;
+		if ( !options.height ) options.height = 0.4;
+		if ( !options.margin ) options.margin = 0.003;
+		if ( !options.padding ) options.padding = 0.01;
+
+	}
+
+
+	static make( element, options ) {
+
+
+		element.currentPanel = 0;
+		element.isLowerCase = true;
+
+		/**
+		 *
+		 * @type {{locales:Array.<string>,charsetCount:{number},keys:Array}|null}
+		 * @private
+		 */
+		element._layout = null;
+
+		//////////
+		// KEYMAP
+		//////////
+
+
+		// if more than on layouts are available
+		if( options.autoDetectLayout && options.availableLayouts && options.availableLayouts.length > 0 ) {
+
+			const userLocale = navigator.language;
+			let selectedLayout = null;
+			if( userLocale ) {
+
+				selectedLayout = options.availableLayouts.find( layout => layout.locales.indexOf(userLocale) !== -1 );
+
+			}
+
+			element._layout = selectedLayout;
+
+		}
+
+		if( !element._layout ) element._layout = options.layout;
+
+		element.charsetCount = element._layout.charsetCount;
+
+		////////////////////
+		// BLOCKS CREATION
+		////////////////////
+
+		// PANELS
+
+		element.keys = [];
+
+		({ panels:element.panels, keys:element.keys } = KeyboardElement.build( element, element._layout, options ) );
+
+		element.add( element.panels[ 0 ] );
+
+		element._interactiveListener = new KeyboardListener( element );
+
+
+		Object.defineProperty( element, 'interactiveListener', {
+			get() {
+				return element._interactiveListener;
+			},
+		});
+
+
+		// be sure only listener trigger actions on keys
+		for ( const key of element.keys ) {
+			key._clicked = _emptyClicked;
+		}
+
+		Object.defineProperty( element, 'interactiveObjects', {
+			get() {
+				return element.keys;
+			},
+		});
+
+		element.setNextPanel = KeyboardElement._setNextPanel.bind( element );
+		element.setNextCharset = KeyboardElement._setNextCharset.bind( element );
+		element.toggleCase = KeyboardElement._toggleCase.bind( element );
+
+
+	}
+
+	/**
+	 *
+	 * @param element
+	 * @param layout
+	 * @param options
+	 * @returns {{panels: *[], keys: *[]}}
+	 */
+	static build( element, layout, options ) {
+
+		const builtPanels = [];
+		const builtKeys = [];
+
+
+		for ( let i = 0; i < layout.keys.length; i++ ) {
+			const panelLines = layout.keys[ i ];
+
+			const lineHeight = ( options.height / panelLines.length ) - ( options.margin * 2 );
+
+			// build panels
+			const panel = element._buildPanel();
+
+			panel.set( {
+				boxSizing: 'border-box',
+				width: options.width + ( options.padding * 2 ),
+				height: options.height + ( options.padding * 2 ),
+				offset: 0.001,
+				padding: options.padding,
+				fontFamily: options.fontFamily,
+				fontTexture: options.fontTexture,
+				backgroundColor: options.backgroundColor,
+				backgroundOpacity: options.backgroundOpacity,
+				borderRadius: options.borderRadius ? options.borderRadius : 0,
+			} );
+
+			panel.charset = 0;
+			builtPanels.push( panel );
+
+			// build lines
+			for ( let j = 0; j < panelLines.length; j++ ) {
+				const keys = panelLines[j];
+
+				const lineBlock = element._buildBlock();
+				lineBlock.set( {
+					width: options.width,
+					height: lineHeight,
+					margin: options.margin,
+					flexDirection: 'row',
+					justifyContent: 'center',
+				} );
+
+				panel.add( lineBlock );
+
+				for ( let k = 0; k < keys.length; k++ ) {
+
+					const keyDefinition = keys[k];
+					const char = keyDefinition.chars[ panel.charset ].lowerCase || keyDefinition.chars[ panel.charset ].icon || 'und';
+
+					const key = element._buildKey( char, keyDefinition );
+
+					let keyOps = {};
+					if( options.keyOptions ){
+						if( options.keyOptions instanceof Function){
+							keyOps = options.keyOptions( key );
+						}else{
+							keyOps = options.keyOptions;
+						}
+					}
+
+					key.set({
+						boxSizing : 'border-box',
+						width: ( options.width * keyDefinition.width ) - ( options.margin * 2 ),
+						height: lineHeight,
+						margin: options.margin,
+						alignItems: 'center',
+						textAlign: 'center',
+						backgroundColor : 0x000000,
+						backgroundOpacity: 0.8,
+						// offset: 0,
+						...keyOps
+					});
+
+					builtKeys.push( key );
+					lineBlock.add( key );
+
+					key.type = 'Key';
+					key.info = keyDefinition;
+					key.info.input = char;
+					key.panel = panel;
+
+					let inlineKey = null;
+					if (
+						( char === 'enter' && options.enterTexture ) ||
+						( char === 'capslock' && options.shiftTexture ) ||
+						( char === 'backspace' && options.backspaceTexture ) ) {
+
+						const url = ( () => {
+
+							switch ( char ) {
+
+								case 'backspace':
+									return options.backspaceTexture;
+								case 'enter':
+									return options.enterTexture;
+								case 'capslock':
+									return options.shiftTexture;
+								default:
+									console.warn( 'There is no icon image for this key' );
+
+							}
+
+						} )();
+
+						textureLoader.load( url, ( texture ) => {
+
+							inlineKey = element._buildKeyInlineBlock( char, keyDefinition );
+							inlineKey.raycast = _emptyRaycast;
+							inlineKey.set( {
+								width: lineHeight * 0.65,
+								height: lineHeight * 0.65,
+								backgroundSize: 'contain',
+								backgroundImage: texture,
+								backgroundColor : 0xffffff,
+							} );
+							key.add( inlineKey );
+
+						} );
+
+					} else {
+
+						inlineKey = element._buildKeyInline( char, keyDefinition );
+						inlineKey.raycast = _emptyRaycast;
+						inlineKey.set({textContent:char});
+						key.add( inlineKey );
+
+					}
+
+				}
+
+			}
+
+		}
+
+		return {panels:builtPanels,keys:builtKeys};
+
+	}
+
+	/**
+	 * Used to switch to an entirely different panel of this keyboard,
+	 * with potentially a completely different layout
+	 * @internal
+	 */
+	static _setNextPanel() {
+
+		this.panels.forEach( ( panel ) => {
+
+			this.remove( panel );
+
+		} );
+
+		this.currentPanel = ( this.currentPanel + 1 ) % ( this.panels.length );
+
+		this.add( this.panels[ this.currentPanel ] );
+
+	}
+
+	/**
+	 * Used to change the keys charset. Some layout support this,
+	 * like the Russian or Greek keyboard, to be able to switch to
+	 * English layout when necessary
+	 * @internal
+	 */
+	static _setNextCharset() {
+
+		this.panels[ this.currentPanel ].charset = ( this.panels[ this.currentPanel ].charset + 1 ) % this.charsetCount;
+
+		this.keys.forEach( ( key ) => {
+
+			// Here we sort the keys, we only keep the ones that are part of the current panel.
+
+			const isInCurrentPanel = this.panels[ this.currentPanel ].getObjectById( key.id );
+
+			if ( !isInCurrentPanel ) return;
+
+			//
+
+			const char = key.info.chars[ key.panel.charset ] || key.info.chars[ 0 ];
+
+			let newContent = this.isLowerCase || !char.upperCase ? char.lowerCase : char.upperCase;
+			if( !newContent ) {
+				newContent = char.icon;
+			}
+
+			if ( !key._children._inlines.length ) return;
+
+			const textComponent = key._children._inlines[0];
+
+			if( textComponent.isInlineBlock ) return;
+
+			key.info.input = newContent;
+
+			textComponent.set( { textContent: newContent } );
+
+		} );
+
+	}
+
+	/**
+	 * Toggle case for characters that support it.
+	 * @internal
+	 * */
+	static _toggleCase() {
+
+		this.isLowerCase = !this.isLowerCase;
+
+		this.keys.forEach( ( key ) => {
+
+			const char = key.info.chars[ key.panel.charset ] || key.info.chars[ 0 ];
+
+			let newContent = this.isLowerCase || !char.upperCase ? char.lowerCase : char.upperCase;
+			if( !newContent ) {
+				newContent = char.icon;
+			}
+
+			if ( !key._children._inlines.length ) return;
+
+			const inlineElement = key._children._inlines[0];
+
+			if( inlineElement.isInlineBlock ) return;
+
+			key.info.input = newContent;
+
+			inlineElement.set( {
+				textContent: newContent
+			} );
+
+		} );
+
+	}
+
+}
+
+function _emptyRaycast() {}
+function _emptyClicked() {}
+
diff --git a/examples/elements/keyboard/KeyboardListener.js b/examples/elements/keyboard/KeyboardListener.js
new file mode 100644
index 00000000..66085a19
--- /dev/null
+++ b/examples/elements/keyboard/KeyboardListener.js
@@ -0,0 +1,100 @@
+import InteractiveListener from 'three-mesh-ui/examples/interactive/InteractiveListener';
+
+export default class KeyboardListener extends InteractiveListener {
+
+	constructor( keyboardElement ) {
+
+		super();
+
+		this._keyboard = keyboardElement;
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @private
+		 */
+		this._texts = [];
+
+	}
+
+	bindText( text ) {
+		this._texts.push( text );
+	}
+
+	unbindText( text ) {
+		const index = this._texts.indexOf( text );
+		if( index !== -1 ){
+
+			this._texts.splice( index, 1 );
+
+		}
+	}
+
+	clicked( element ) {
+
+		if( this._keyboard.keys.indexOf( element) !== -1 ) {
+
+			if ( element.info.command ) {
+
+				switch ( element.info.command ) {
+
+					// switch between panels
+					case 'switch' :
+						this._keyboard.setNextPanel();
+						break;
+
+					// switch between panel charsets (eg: russian/english)
+					case 'switch-set' :
+						this._keyboard.setNextCharset();
+						break;
+
+					case 'enter' :
+						for ( let i = 0; i < this._texts.length; i++ ) {
+							const text = this._texts[ i ];
+							text.set( { textContent: text.textContent + '\n' } );
+						}
+						break;
+
+					case 'space' :
+						for ( let i = 0; i < this._texts.length; i++ ) {
+							const text = this._texts[ i ];
+							text.set( { textContent: text.textContent + ' ' } );
+						}
+						break;
+
+					case 'backspace' :
+						for ( let i = 0; i < this._texts.length; i++ ) {
+							const text = this._texts[ i ];
+							if ( !text.textContent.length ) continue;
+							text.set( { textContent: text.textContent.substring( 0, text.textContent.length - 1 ) || '' } );
+						}
+
+						break;
+
+					case 'capslock' :
+						element.togglePseudoState('checked');
+						this._keyboard.toggleCase();
+						break;
+
+				}
+
+				// print a glyph, if any
+			} else if ( element.info.input ) {
+
+				for ( let i = 0; i < this._texts.length; i++ ) {
+					const text = this._texts[ i ];
+					text.set( { textContent: text.textContent + element.info.input } );
+				}
+
+			}
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	hoveredElementHasChanged( element ) {   /* eslint-enable no-unused-vars */ }
+
+	/* eslint-disable no-unused-vars */
+	selectedElementHasChanged( element ) {   /* eslint-enable no-unused-vars */ }
+}
diff --git a/examples/elements/keyboard/keyboard-layouts/AzertyFrench.js b/examples/elements/keyboard/keyboard-layouts/AzertyFrench.js
new file mode 100644
index 00000000..dadf897b
--- /dev/null
+++ b/examples/elements/keyboard/keyboard-layouts/AzertyFrench.js
@@ -0,0 +1,111 @@
+/**
+
+Contains key maps for the Keyboard component.
+Most languages need a specific keyboard. Therefore, Keyboard takes a language attribute
+and if not passed tries to detect the language. If not found, it uses the basic QZERTY layout.
+
+ */
+export default {
+	locales: ['fr', 'fr-FR', 'fr-CH','fr-CA','fr-BE'],
+	charsetCount: 1,
+	keys:
+		[
+			[
+				[
+					{ width: 0.1, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'p', upperCase: 'P' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'm', upperCase: 'M' } ] }
+				],
+
+				[
+					{ width: 0.2, command: 'capslock', chars: [ { icon: 'capslock' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
+					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
+				],
+
+				[
+					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
+					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
+					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
+				]
+
+			],
+
+			// panel cyffers
+			[
+				[
+					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
+					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
+				],
+
+				[
+					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
+					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
+					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
+				]
+			]
+		],
+
+};
diff --git a/examples/elements/keyboard/keyboard-layouts/QwertyEnglish.js b/examples/elements/keyboard/keyboard-layouts/QwertyEnglish.js
new file mode 100644
index 00000000..d788b3db
--- /dev/null
+++ b/examples/elements/keyboard/keyboard-layouts/QwertyEnglish.js
@@ -0,0 +1,110 @@
+/**
+
+Contains key maps for the Keyboard component.
+Most languages need a specific keyboard. Therefore, Keyboard takes a language attribute
+and if not passed tries to detect the language. If not found, it uses the basic QZERTY layout.
+
+ */
+export default {
+	locales: [ 'en', 'en-GB', 'en-US' ],
+	charsetCount: 1,
+	keys:
+		[
+			[
+				[
+					{ width: 0.1, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'p', upperCase: 'P' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'l', upperCase: 'L' } ] }
+				],
+
+				[
+					{ width: 0.15, command: 'capslock', chars: [ { icon: 'capslock' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
+					{ width: 0.15, command: 'backspace', chars: [ { icon: 'backspace' } ] }
+				],
+
+				[
+					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
+					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
+					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
+				]
+
+			],
+
+			[
+				[
+					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
+					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
+				],
+
+				[
+					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
+					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
+					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
+				]
+			]
+		],
+
+};
diff --git a/examples/elements/keyboard/keyboard-layouts/QwertyGreek.js b/examples/elements/keyboard/keyboard-layouts/QwertyGreek.js
new file mode 100644
index 00000000..6e760b45
--- /dev/null
+++ b/examples/elements/keyboard/keyboard-layouts/QwertyGreek.js
@@ -0,0 +1,110 @@
+/**
+
+Contains key maps for the Keyboard component.
+Most languages need a specific keyboard. Therefore, Keyboard takes a language attribute
+and if not passed tries to detect the language. If not found, it uses the basic QZERTY layout.
+
+ */
+export default {
+
+	locales: ['el'],
+	charsetCount: 2,
+	keys:
+		[
+			[
+				[
+					{ width: 0.1, chars: [ { lowerCase: ';', upperCase: ':' }, { lowerCase: 'q', upperCase: 'Q' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'ς', upperCase: 'ς' }, { lowerCase: 'w', upperCase: 'W' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'ε', upperCase: 'Ε' }, { lowerCase: 'e', upperCase: 'E' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'ρ', upperCase: 'Ρ' }, { lowerCase: 'r', upperCase: 'R' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'τ', upperCase: 'Τ' }, { lowerCase: 't', upperCase: 'T' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'υ', upperCase: 'Υ' }, { lowerCase: 'y', upperCase: 'Y' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'θ', upperCase: 'Θ' }, { lowerCase: 'u', upperCase: 'U' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'ι', upperCase: 'Ι' }, { lowerCase: 'i', upperCase: 'I' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'ο', upperCase: 'Ο' }, { lowerCase: 'o', upperCase: 'O' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'π', upperCase: 'Π' }, { lowerCase: 'p', upperCase: 'P' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: 'α', upperCase: 'Α' }, { lowerCase: 'a', upperCase: 'A' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'σ', upperCase: 'Σ' }, { lowerCase: 's', upperCase: 'S' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'δ', upperCase: 'Δ' }, { lowerCase: 'd', upperCase: 'D' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'φ', upperCase: 'Φ' }, { lowerCase: 'f', upperCase: 'F' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'γ', upperCase: 'Γ' }, { lowerCase: 'g', upperCase: 'G' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'η', upperCase: 'Η' }, { lowerCase: 'h', upperCase: 'H' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'ξ', upperCase: 'Ξ' }, { lowerCase: 'j', upperCase: 'J' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'κ', upperCase: 'Κ' }, { lowerCase: 'k', upperCase: 'K' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'λ', upperCase: 'Λ' }, { lowerCase: 'l', upperCase: 'L' } ] }
+				],
+
+				[
+					{ width: 0.15, command: 'capslock', chars: [ { icon: 'capslock' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'ζ', upperCase: 'Ζ' }, { lowerCase: 'z', upperCase: 'Z' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'χ', upperCase: 'Χ' }, { lowerCase: 'x', upperCase: 'X' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'ψ', upperCase: 'Ψ' }, { lowerCase: 'c', upperCase: 'C' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'ω', upperCase: 'Ω' }, { lowerCase: 'v', upperCase: 'V' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'β', upperCase: 'Β' }, { lowerCase: 'b', upperCase: 'B' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'ν', upperCase: 'Ν' }, { lowerCase: 'n', upperCase: 'N' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'μ', upperCase: 'Μ' }, { lowerCase: 'm', upperCase: 'M' } ] },
+					{ width: 0.15, command: 'backspace', chars: [ { icon: 'backspace' } ] }
+				],
+
+				[
+					{ width: 0.15, command: 'switch-set', chars: [ { lowerCase: 'eng' } ] },
+					{ width: 0.15, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
+					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
+					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
+				]
+			],
+
+			[
+				[
+					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
+					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
+				],
+
+				[
+					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
+					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
+					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
+				]
+			]
+		],
+
+};
diff --git a/examples/elements/keyboard/keyboard-layouts/QwertyNordic.js b/examples/elements/keyboard/keyboard-layouts/QwertyNordic.js
new file mode 100644
index 00000000..7360b172
--- /dev/null
+++ b/examples/elements/keyboard/keyboard-layouts/QwertyNordic.js
@@ -0,0 +1,114 @@
+/**
+
+Contains key maps for the Keyboard component.
+Most languages need a specific keyboard. Therefore, Keyboard takes a language attribute
+and if not passed tries to detect the language. If not found, it uses the basic QZERTY layout.
+
+ */
+export default {
+
+	locales: ['sv', 'fi', 'no', 'dk', 'nord'],
+	charsetCount: 1,
+	keys:
+		[
+			[
+				[
+					{ width: 1 / 11, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'p', upperCase: 'P' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'å', upperCase: 'Å' } ] }
+				],
+
+				[
+					{ width: 1 / 11, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'æ', upperCase: 'Æ' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'ø', upperCase: 'Ø' } ] }
+				],
+
+				[
+					{ width: 2 / 11, command: 'capslock', chars: [ { icon: 'capslock' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
+					{ width: 2 / 11, command: 'backspace', chars: [ { icon: 'backspace' } ] }
+				],
+
+				[
+					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
+					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
+					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
+				]
+
+			],
+
+			[
+				[
+					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
+					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
+				],
+
+				[
+					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
+					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
+					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
+				]
+			]
+		]
+
+};
diff --git a/examples/elements/keyboard/keyboard-layouts/QwertyRussian.js b/examples/elements/keyboard/keyboard-layouts/QwertyRussian.js
new file mode 100644
index 00000000..c2268c68
--- /dev/null
+++ b/examples/elements/keyboard/keyboard-layouts/QwertyRussian.js
@@ -0,0 +1,114 @@
+/**
+
+Contains key maps for the Keyboard component.
+Most languages need a specific keyboard. Therefore, Keyboard takes a language attribute
+and if not passed tries to detect the language. If not found, it uses the basic QZERTY layout.
+
+ */
+export default {
+	locales : ['ru'],
+	charsetCount: 2,
+	keys:
+		[
+			[
+				[
+					{ width: 1 / 12, chars: [ { lowerCase: 'й', upperCase: 'Й' }, { lowerCase: 'q', upperCase: 'Q' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'ц', upperCase: 'Ц' }, { lowerCase: 'w', upperCase: 'W' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'у', upperCase: 'У' }, { lowerCase: 'e', upperCase: 'E' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'к', upperCase: 'К' }, { lowerCase: 'r', upperCase: 'R' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'е', upperCase: 'Е' }, { lowerCase: 't', upperCase: 'T' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'н', upperCase: 'Н' }, { lowerCase: 'y', upperCase: 'Y' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'г', upperCase: 'Г' }, { lowerCase: 'u', upperCase: 'U' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'ш', upperCase: 'Ш' }, { lowerCase: 'i', upperCase: 'I' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'щ', upperCase: 'Щ' }, { lowerCase: 'o', upperCase: 'O' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'з', upperCase: 'З' }, { lowerCase: 'p', upperCase: 'P' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'х', upperCase: 'Х' }, { lowerCase: '{', upperCase: '[' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'ъ', upperCase: 'Ъ' }, { lowerCase: '}', upperCase: ']' } ] }
+				],
+
+				[
+					{ width: 1 / 12, chars: [ { lowerCase: 'ф', upperCase: 'Ф' }, { lowerCase: 'a', upperCase: 'A' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'ы', upperCase: 'Ы' }, { lowerCase: 's', upperCase: 'S' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'в', upperCase: 'В' }, { lowerCase: 'd', upperCase: 'D' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'а', upperCase: 'А' }, { lowerCase: 'f', upperCase: 'F' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'п', upperCase: 'П' }, { lowerCase: 'g', upperCase: 'G' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'р', upperCase: 'Р' }, { lowerCase: 'h', upperCase: 'H' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'о', upperCase: 'О' }, { lowerCase: 'j', upperCase: 'J' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'л', upperCase: 'Л' }, { lowerCase: 'k', upperCase: 'K' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'д', upperCase: 'Д' }, { lowerCase: 'l', upperCase: 'L' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'ж', upperCase: 'Ж' }, { lowerCase: ':', upperCase: ';' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'э', upperCase: 'Э' }, { lowerCase: '"', upperCase: '\'' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'ё', upperCase: 'Ё' }, { lowerCase: '|', upperCase: '\\' } ] }
+				],
+
+				[
+					{ width: 1.5 / 12, command: 'capslock', chars: [ { icon: 'capslock' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'я', upperCase: 'Я' }, { lowerCase: 'z', upperCase: 'Z' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'ч', upperCase: 'Ч' }, { lowerCase: 'x', upperCase: 'X' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'с', upperCase: 'С' }, { lowerCase: 'c', upperCase: 'C' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'м', upperCase: 'М' }, { lowerCase: 'v', upperCase: 'V' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'и', upperCase: 'И' }, { lowerCase: 'b', upperCase: 'B' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'т', upperCase: 'Т' }, { lowerCase: 'n', upperCase: 'N' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'ь', upperCase: 'Ь' }, { lowerCase: 'm', upperCase: 'M' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'б', upperCase: 'Б' }, { lowerCase: ',', upperCase: '' } ] },
+					{ width: 1 / 12, chars: [ { lowerCase: 'ю', upperCase: 'Ю' }, { lowerCase: '.', upperCase: '' } ] },
+					{ width: 1.5 / 12, command: 'backspace', chars: [ { icon: 'backspace' } ] }
+				],
+
+				[
+					{ width: 0.15, command: 'switch-set', chars: [ { lowerCase: 'eng' } ] },
+					{ width: 0.15, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
+					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
+					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
+				]
+			],
+
+			[
+				[
+					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
+					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
+				],
+
+				[
+					{ width: 0.3, command: 'switch', chars: [ { lowerCase: 'АБВ' } ] },
+					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
+					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
+				]
+			]
+		],
+};
diff --git a/examples/elements/keyboard/keyboard-layouts/QwertySpanish.js b/examples/elements/keyboard/keyboard-layouts/QwertySpanish.js
new file mode 100644
index 00000000..6286ac3e
--- /dev/null
+++ b/examples/elements/keyboard/keyboard-layouts/QwertySpanish.js
@@ -0,0 +1,110 @@
+/**
+
+Contains key maps for the Keyboard component.
+Most languages need a specific keyboard. Therefore, Keyboard takes a language attribute
+and if not passed tries to detect the language. If not found, it uses the basic QZERTY layout.
+
+ */
+export default {
+	locales: ['es' ,'es-419' ,'es-AR' ,'es-CL' ,'es-CO' ,'es-ES' ,'es-CR' ,'es-US' ,'es-HN' ,'es-MX' ,'es-PE' ,'es-UY' ,'es-VE'],
+	charsetCount: 1,
+	keys:
+		[
+			[
+				[
+					{ width: 0.1, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'p', upperCase: 'P' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'ñ', upperCase: 'Ñ' } ] }
+				],
+
+				[
+					{ width: 0.15, command: 'capslock', chars: [ { icon: 'capslock' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
+					{ width: 0.1, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
+					{ width: 0.15, command: 'backspace', chars: [ { icon: 'backspace' } ] }
+				],
+
+				[
+					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
+					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
+					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
+				]
+			],
+
+			[
+				[
+					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
+					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
+				],
+
+				[
+					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
+					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
+					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
+				]
+			]
+		],
+
+};
diff --git a/examples/elements/keyboard/keyboard-layouts/QwertzDeutsch.js b/examples/elements/keyboard/keyboard-layouts/QwertzDeutsch.js
new file mode 100644
index 00000000..559a79a4
--- /dev/null
+++ b/examples/elements/keyboard/keyboard-layouts/QwertzDeutsch.js
@@ -0,0 +1,112 @@
+/**
+
+Contains key maps for the Keyboard component.
+Most languages need a specific keyboard. Therefore, Keyboard takes a language attribute
+and if not passed tries to detect the language. If not found, it uses the basic QZERTY layout.
+
+ */
+export default {
+
+	locales: ['de','de-DE','de-AT','de-LI','de-CH'],
+	charsetCount: 1,
+	keys:
+		[
+			[
+				[
+					{ width: 1 / 11, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'p', upperCase: 'P' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'ü', upperCase: 'Ü' } ] }
+				],
+
+				[
+					{ width: 1 / 11, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'ö', upperCase: 'Ö' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'ä', upperCase: 'Ä' } ] }
+				],
+
+				[
+					{ width: 2 / 11, command: 'capslock', chars: [ { icon: 'capslock' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
+					{ width: 1 / 11, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
+					{ width: 2 / 11, command: 'backspace', chars: [ { icon: 'backspace' } ] }
+				],
+
+				[
+					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
+					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
+					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
+				]
+			],
+
+			[
+				[
+					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
+				],
+
+				[
+					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
+					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
+				],
+
+				[
+					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
+					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
+					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
+					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
+					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
+				]
+			]
+		],
+};
diff --git a/examples/ex__arrows.js b/examples/ex__arrows.js
new file mode 100644
index 00000000..1c12a587
--- /dev/null
+++ b/examples/ex__arrows.js
@@ -0,0 +1,267 @@
+//xfg:title Arrows
+
+import * as THREE from 'three';
+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
+
+import ThreeMeshUI from 'three-mesh-ui';
+import Arrows from 'three-mesh-ui/examples/utils/Arrows';
+import { Object3D } from 'three';
+
+const WIDTH = window.innerWidth;
+const HEIGHT = window.innerHeight;
+
+let scene, camera, cameraP, renderer, controls;
+let vrCam;
+
+window.addEventListener('load', step1BuildThreeJSElements );
+
+/***********************************************************************************************************************
+ * THREE-MESH-UI - BASIC SETUP
+ * ---------------------------
+ *
+ * This tutorial is made of 3 steps, split by functions:
+ *    - step1BuildThreeJSElements()
+ *    - step2BuildThreeMeshUIElements()
+ *    - step3AnimationLoop()
+ *
+ * Be sure to read all of their comments, in the proper order before going for another tutorial.
+ **********************************************************************************************************************/
+
+
+// three-mesh-ui requires working threejs setup
+// We usually build the threejs stuff prior three-mesh-ui
+function step1BuildThreeJSElements() {
+
+	scene = new THREE.Scene();
+	scene.background = new THREE.Color( 0x505050 );
+
+	cameraP = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 0.1, 100 );
+
+	camera = new Object3D();
+	camera.add( cameraP );
+
+
+	renderer = new THREE.WebGLRenderer( {
+		antialias: true
+	} );
+	renderer.setPixelRatio( window.devicePixelRatio );
+	renderer.setSize( WIDTH, HEIGHT );
+	renderer.xr.enabled = true;
+	document.body.appendChild( VRButton.createButton( renderer ) );
+	document.body.appendChild( renderer.domElement );
+
+	controls = new OrbitControls( cameraP, renderer.domElement );
+	camera.position.set( 0, 1.6, 0 );
+	controls.target = new THREE.Vector3( 0, 1, -1.8 );
+	controls.update();
+
+
+
+	renderer.xr.addEventListener('sessionstart', ()=>{
+		console.log("SEWSSIONB XR")
+
+		console.log( renderer.xr );
+		console.log( );
+
+		vrCam = renderer.xr.getCamera(null);
+		console.log( vrCam );
+	})
+	// ROOM
+
+	const room = new THREE.LineSegments(
+		new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
+		new THREE.LineBasicMaterial( { color: 0x808080 } )
+	);
+
+	scene.add( room );
+
+
+	// Now that we have the threejs stuff up and running, we can build our three-mesh-ui stuff
+	// Let's read that function
+	step2BuildThreeMeshUIElements();
+
+	// three-mesh-ui requires to be updated prior each threejs render, let's go see what is in step3AnimationLoop()
+	renderer.setAnimationLoop( step3AnimationLoop );
+
+
+	window.addEventListener( 'resize', onWindowResize );
+}
+
+//
+function step2BuildThreeMeshUIElements() {
+
+	// If we are going to display ThreeMeshUI Text elements
+	// It is important to know that a Text MUST have a Block as parent
+	// Using three-mesh-ui, we would usually have one or more rootBlock elements
+	const rootBlock = new ThreeMeshUI.Block( {
+
+		name: 'rootBlock',
+		// A Block must define its "box-sizing" properties
+		width: 1.2,
+		padding: 0.05,
+		boxSizing: 'border-box',
+
+		// A Block can define its "layout" properties
+		flexDirection: 'column',
+		justifyContent: 'center',
+		textAlign: 'left',
+
+		borderRadius: 0.015,
+
+		color: 0xffffff,
+		backgroundColor : 0x000000,
+		backgroundOpacity : 0.5,
+
+		// A Block can also define "text" properties that will propagate to any of its Text children
+		fontSize: 0.055,
+
+		fontFamily: './assets/fonts/msdf/roboto/regular.json',
+		fontTexture: './assets/fonts/msdf/roboto/regular.png',
+		// @Note: setting fontFamily
+		// This looks very easy, but this isn't the best way for handling fonts
+		// However it is perfect for a first glance on how to get started with three-mesh-ui
+		// Be sure you next step will be `Getting started - Preload fonts`
+
+	} );
+
+	rootBlock.add( new ThreeMeshUI.Text({textContent:'Hellow'}))
+
+
+	// three-mesh-ui root elements must be added on threejs display stack
+	// In the scene, or in another Object3D of our choice
+	scene.add( rootBlock );
+
+	// three-mesh-ui Block are Object3D agreemented with three-mesh-ui capabilities
+	// so you can use any existing Object3D methods and properties
+	rootBlock.position.set( 0, 1, -1.8 );
+	rootBlock.rotation.x = -0.55;
+
+
+
+	const blockText = new ThreeMeshUI.Text({ textContent: "Block arrows" });
+
+
+
+	const arrowLeft = new ThreeMeshUI.Block({width:0.1,height:0.1} );
+	const arrowRight = new ThreeMeshUI.Block({width:0.1,height:0.1, } );
+	const arrowTop = new ThreeMeshUI.Block({width:0.1,height:0.1,marginLeft: 0.05} );
+	const arrowBottom = new ThreeMeshUI.Block({width:0.1,height:0.1, marginLeft: 0.05} );
+
+
+
+	Arrows( arrowLeft, 0.04, "left", 0xffffff );
+	Arrows( arrowRight, 0.04, "right", 0xffffff );
+	Arrows( arrowTop, 0.04, "top", 0xffffff );
+	Arrows( arrowBottom, 0.04, "bottom", 0xffffff );
+
+
+	const blockArrows = new ThreeMeshUI.Block({flexDirection:'row', margin: '0.05 0'});
+
+
+	blockArrows.add(
+
+		arrowLeft , arrowRight, arrowTop, arrowBottom
+
+	);
+
+	rootBlock.add( blockText, blockArrows)
+
+	const blockInlineText = new ThreeMeshUI.Text({ textContent: "Inline arrows"});
+
+
+
+	const arrowInlineLeft = new ThreeMeshUI.InlineBlock({width:'50%', height:'50%', backgroundOpacity:1, opacity:1, color: 0xff0099,backgroundColor:0xff9900} );
+	const arrowInlineRight = new ThreeMeshUI.InlineBlock({width:'50%', height:'50%',} );
+	const arrowInlineTop = new ThreeMeshUI.InlineBlock({width:'50%', height:'50%', marginLeft: 0.025} );
+	const arrowInlineBottom = new ThreeMeshUI.InlineBlock({width:'50%', height:'50%', marginLeft: 0.025} );
+
+
+
+	Arrows( arrowInlineLeft, 0.008, "left", 0xffffff );
+	Arrows( arrowInlineRight, 0.008, "right", 0xffffff );
+	Arrows( arrowInlineTop, 0.008, "top", 0xffffff );
+	Arrows( arrowInlineBottom, 0.008, "bottom", 0xffffff );
+
+
+	const inlineArrows = new ThreeMeshUI.Text();
+
+
+	inlineArrows.add(
+
+		arrowInlineLeft, arrowInlineRight, arrowInlineTop, arrowInlineBottom
+
+	);
+
+	rootBlock.add( blockInlineText, inlineArrows)
+
+
+	const but = new ThreeMeshUI.Text();
+	const arrow1 = new ThreeMeshUI.InlineBlock({width:'50%',height:'50%', order: -2});
+	const arrow2 = new ThreeMeshUI.InlineBlock({width:'50%',height:'50%', order: -1, marginRight: 0.025});
+	Arrows( arrow1, 0.014, 'right', 0x00ff99 );
+	Arrows( arrow2, 0.014, 'right', 0x00ff99 );
+
+	const arrow3 = new ThreeMeshUI.InlineBlock({width:'50%',height:'50%', marginLeft:0.025});
+	const arrow4 = new ThreeMeshUI.InlineBlock({width:'50%',height:'50%'});
+	Arrows( arrow3, 0.014, 'left', 0x00ff99 );
+	Arrows( arrow4, 0.014, 'left', 0x00ff99 );
+
+	but.add( new ThreeMeshUI.Inline({textContent:"re-ordered"}), arrow1, arrow2, arrow3, arrow4 );
+
+	rootBlock.add( but );
+
+
+	// but2
+
+	const but2 = new ThreeMeshUI.Text();
+	const arrow21 = new ThreeMeshUI.InlineBlock({width:'50%',height:'50%', order: -2});
+	const arrow22 = new ThreeMeshUI.InlineBlock({width:'50%',height:'50%', order: -1, marginRight: 0.025});
+	Arrows( arrow21, 0.014, 'left', 0x00ff99 );
+	Arrows( arrow22, 0.014, 'left', 0x00ff99 );
+
+	const arrow23 = new ThreeMeshUI.InlineBlock({width:'50%',height:'50%', marginLeft:0.025});
+	const arrow24 = new ThreeMeshUI.InlineBlock({width:'50%',height:'50%'});
+	Arrows( arrow23, 0.014, 'right', 0x00ff99 );
+	Arrows( arrow24, 0.014, 'right', 0x00ff99 );
+	// const arrow2 = arrow1.clone()
+
+
+	but2.add( new ThreeMeshUI.Inline({textContent:"re-ordered"}), arrow21, arrow22, arrow23, arrow24 );
+
+	rootBlock.add( but2 );
+
+}
+
+// In order to see things, we need to render them, usually on each frame
+function step3AnimationLoop() {
+
+	// Don't forget, ThreeMeshUI must be updated manually.
+	// This has been introduced in version 3.0.0 in order
+	// to improve performance
+	ThreeMeshUI.update();
+
+	// camera.position.x = Math.random()*3;
+	//
+	// if( vrCam ) {
+	// 	renderer.xr.updateCamera(cameraP);
+	// }
+
+	controls.update();
+	renderer.render( scene, cameraP );
+
+}
+
+
+// handles resizing the renderer when the viewport is resized
+// common threejs stuff
+function onWindowResize() {
+
+	camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+	renderer.setSize( window.innerWidth, window.innerHeight );
+
+}
+
+
diff --git a/examples/ex__baseline.js b/examples/ex__baseline.js
new file mode 100644
index 00000000..32d0464a
--- /dev/null
+++ b/examples/ex__baseline.js
@@ -0,0 +1,324 @@
+// xfg:title Baseline
+// xfg:type tool
+// xfg:copyright Rye font author is Nicole Fally
+
+import { Block, Text } from 'three-mesh-ui';
+
+let text;
+//
+
+function example(){
+
+
+	text = new Text( {
+		width: 2.4,
+		textAlign: 'center',
+		alignItems: 'start',
+		fontSize: 0.18,
+		textContent : 'abcdefghijklmnopqrstuvwxyz'
+	} );
+
+	text.position.z = -2;
+	text.position.y = 1.41
+
+	text.add( new Inline({textContent: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", fontSize:0.2}) )
+	text.add( new Inline({textContent: "LMNOPQRSTUVWXYZ", fontSize:0.15}) )
+
+	scene.add( text );
+
+	new TypographicLayoutBehavior( text ).attach();
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/***********************************************************************************************************************
+ * Above this comment, you could find the contextual setup of this example.
+ * Not really related to the example itself : Creating three renderer, scene, lights, etc...
+ **********************************************************************************************************************/
+
+import { exampleAddResizer, exampleManualRender, exampleNoRenderLoop, exampleRender, exampleThreeSetup } from 'three-mesh-ui/examples/_setup/ThreeSetup';
+import { adjustRobotoAndVariants, registerRobotoAndVariants } from 'three-mesh-ui/examples/_setup/RobotoFont';
+import { exampleCameraOrthographic, exampleCameraOrthographicResize } from 'three-mesh-ui/examples/_setup/CameraOrthographic';
+import exampleGUI from 'three-mesh-ui/examples/_setup/gui/exampleGUI';
+import { DefaultValues, FontLibrary, Inline } from 'three-mesh-ui';
+import { Mesh, MeshBasicMaterial, PlaneGeometry, Texture } from 'three';
+import TypographicLayoutBehavior from 'three-mesh-ui/examples/behaviors/helpers/TypographicLayoutBehavior';
+/* eslint-disable no-unused-vars */
+
+// building three setup
+const { camera } = exampleCameraOrthographic();
+exampleAddResizer( exampleCameraOrthographicResize );
+
+const { scene, controls } = exampleThreeSetup( camera );
+controls.enableRotate = false;
+controls.enableZoom = false;
+exampleNoRenderLoop();
+exampleAddResizer( exampleRender );
+
+let fontFamily, fontVariant;
+FontLibrary.prepare(
+	registerRobotoAndVariants(),
+	FontLibrary.addFontFamily('imported')
+		.addVariant(
+			'normal',
+			'normal',
+			'./assets/fonts/msdf/rye/regular.json',
+			'./assets/fonts/msdf/rye/regular.png')
+).then( () => {
+
+	fontFamily = FontLibrary.getFontFamily('imported');
+	fontVariant = fontFamily.getVariant('normal', 'normal');
+
+
+	// preload fonts and run example() after
+	DefaultValues.set({fontFamily});
+
+	adjustRobotoAndVariants();
+	example();
+	additionalUI();
+	exampleRender();
+	baselineGUI();
+})
+
+
+let infoBlock;
+function additionalUI(){
+
+	infoBlock = new Block({
+		name: 'info-block',
+		width:  2.4,
+		padding: 0.05,
+		height: 'auto',
+		flexDirection: 'column',
+		alignItems: 'center',
+		backgroundColor: 0x000000,
+		backgroundOpacity : 0.75,
+		borderRadius : 0.025,
+		fontFamily: "Roboto",
+	});
+
+	infoBlock.position.z = -2
+	infoBlock.position.y = 0.4;
+	scene.add( infoBlock );
+
+	const borderTitle = new Text({
+		textContent: `Adjusting glyphs`,
+		fontWeight: 'bold',
+		fontSize: 0.08,
+		lineHeight:1.5});
+
+	const borderContent = new Text({
+		name: 'border-content',
+		textAlign: "left",
+	}).add(
+		new Inline({textContent:`If you look closely, you would notice that some glyphs of the "rye" font are not correctly placed.\nThat's the case for `}),
+		new Inline({textContent:`g, j, p, q, y and Q `, fontWeight: 'bold'}),
+		new Inline({textContent:`glyphs.`}),
+		new Inline({textContent:`\n\nUse the provided GUI to select one faulty glyph, and then adjust its yoffset property. Repeat that operation for each faulty glyphs in your charset.`}),
+		new Inline({textContent:` Once completed, you can export those adjustments.`}),
+
+		new Inline({textContent:`\n\nYou can import your own msdf font.`, fontStyle: 'italic'})
+	);
+
+
+	infoBlock.add(  borderTitle, borderContent);
+
+}
+
+let charDesc, alterations, letterController,yoffsetController;
+const p = {};
+
+
+/**
+ * Build the gui of this tool
+ */
+function baselineGUI() {
+
+	const gui = exampleGUI();
+
+	// alterations would be exportable adjustments
+	alterations = {};
+
+	// Convert the textContent into an object
+	let letters = {};
+	for ( let i = 0; i < text.textContent.length; i++ ) {
+		const letter = text.textContent[ i ];
+		letters[ letter ] = letter;
+	}
+
+	// retrive the glyphDescriptor
+	charDesc = fontVariant.getTypographicGlyph( 'a' );
+
+	// Feed gui params
+	p.zoom = camera.zoom;
+	p.letter = 'a';
+	p.yoffset = charDesc.yoffset;
+	p.lineHeight = text._lineHeight._value;
+	p.textAlign = text._textAlign._value;
+	p.textContent = text._textContent._value;
+	p.export = () => {
+		console.log( `{MSDFVariant}.adjustTypographicGlyphs ( ${JSON.stringify(alterations, null, 2 )} );` );
+		navigator.clipboard.writeText( `{MSDFVariant}.adjustTypographicGlyphs ( ${JSON.stringify(alterations, null, 2 )} );` );
+		/* eslint-disable no-alert */
+		alert('Adjustments have been copied in your clipboard and in the console.')
+		/* eslint-enable no-alert */
+	}
+
+	gui.add( p, 'zoom', 100, 800, 10).onChange( z => {
+		camera.zoom = z;
+		camera.updateProjectionMatrix();
+		exampleRender();
+	})
+
+	gui.add( p, 'lineHeight', 1,3,0.01).onChange( v => {
+		text.set({lineHeight:v});
+		exampleRender();
+	});
+
+	gui.add( p, 'textAlign', ['left','center','right']).onChange( v => {
+		text.set({textAlign:v});
+		exampleRender();
+	})
+
+	gui.add( p, 'textContent').onChange( textContent => {
+		text.set({textContent});
+
+		// Rebuild the letter and then the letterController options
+		if( textContent !== "" ){
+
+			p.letter = textContent[0];
+
+			letters = {};
+			for ( let i = 0; i < text.textContent.length; i++ ) {
+				const letter = text.textContent[ i ];
+				letters[ letter ] = letter;
+			}
+
+			letterController._values = Array.isArray( letters ) ? letters : Object.values( letters );
+			letterController._names = Array.isArray( letters ) ? letters : Object.keys( letters );
+
+
+			while( letterController.$select.children.length ) {
+				letterController.$select.removeChild( letterController.$select.firstElementChild );
+			}
+
+			letterController._names.forEach( name => {
+				const $option = document.createElement( 'option' );
+				$option.innerHTML = name;
+				letterController.$select.appendChild( $option );
+			} );
+
+			letterController.updateDisplay();
+
+			_resetOffset();
+
+		}
+
+		exampleRender();
+	})
+
+	// Font - Folder + custom controller
+	const fontFolder = gui.addFolder('Import your font').close();
+
+	fontFolder.addFontLoader({fake:""},"fake").onChange( x => {
+
+		// Create a new FontFamily
+		const ff = FontLibrary.addFontFamily( "import"+Math.random(), );
+		// Add a new variant
+		ff.addVariant('400', 'normal', x.json, new Texture(x.img), true );
+		fontVariant = ff.getVariant('normal','normal');
+
+		// Set the fontFamily on the text
+		text.set({fontFamily:ff});
+
+		_resetOffset();
+
+		exampleManualRender();
+
+	});
+
+
+	const folder = gui.addFolder('Glyphs Adjustments')
+
+	letterController = folder.add( p, 'letter', letters ).name('Glyph').onChange( v => {
+
+		_resetOffset();
+
+	});
+
+	yoffsetController = folder.add( p, 'yoffset', -30, 30, 0.01 ).onChange( v => {
+
+		alterations[ p.letter ] = {yoffset:v};
+
+		charDesc._yoffset = v;
+
+		text._renderer._needsRender = true;
+
+		exampleRender();
+
+	} );
+
+	folder.add( p, 'export');
+
+}
+
+/**
+ * Reset yOffset value and controller
+ * @private
+ */
+function _resetOffset(){
+
+	charDesc = fontVariant.getTypographicGlyph( p.letter );
+	p.yoffset = charDesc.yoffset;
+	yoffsetController.updateDisplay();
+
+}
diff --git a/examples/ex__best_fit.js b/examples/ex__best_fit.js
index f8d7fd7d..b166814a 100644
--- a/examples/ex__best_fit.js
+++ b/examples/ex__best_fit.js
@@ -1,3 +1,7 @@
+// xfg:title Best fit
+// xfg:category learn
+// xfg:type Behavior
+
 import * as THREE from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -10,7 +14,6 @@ import FontImage from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.p
 
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 import BestFitBehavior from 'three-mesh-ui/examples/behaviors/size/BestFitBehavior';
-import BoxLayoutBehavior from 'three-mesh-ui/examples/behaviors/helpers/BoxLayoutBehavior';
 
 /*
 
@@ -101,7 +104,7 @@ function makeTextPanel() {
 		borderWidth: 0.02,
 		borderOpacity: 1,
 		borderColor: new THREE.Color( 'orange' ),
-		fontColor: new THREE.Color( 0x333333 ),
+		color: new THREE.Color( 0x333333 ),
 		fontFamily: FontJSON,
 		fontTexture: FontImage,
 		width: 4,
@@ -113,7 +116,7 @@ function makeTextPanel() {
 	scene.add( warningContainer );
 
 	const warningTextBlock = new ThreeMeshUI.Text( {
-		content: '* Warning - The Best Fit functionality is computationally expensive and therefore should not be used if you intend to update the container size every frame. ' +
+		textContent: '* Warning - The Best Fit functionality is computationally expensive and therefore should not be used if you intend to update the container size every frame. ' +
 			'If you do need to update the container while using this functionality, it may be wise to only do so at intervals.',
 		fontSize: 0.075
 	} );
@@ -146,7 +149,7 @@ function makeTextPanel() {
 			backgroundColor: new THREE.Color( 0xd9d9d9 ),
 			backgroundOpacity: 1,
 			borderRadius: 0.05,
-			fontColor: new THREE.Color( 0x111111 ),
+			color: new THREE.Color( 0x111111 ),
 			fontFamily: FontJSON,
 			fontTexture: FontImage,
 			width: 1.1,
@@ -158,7 +161,7 @@ function makeTextPanel() {
 		scene.add( titleContainer );
 
 		const titleTextBlock = new ThreeMeshUI.Text( {
-			content: HEADER_TEXT[ i ],
+			textContent: HEADER_TEXT[ i ],
 			fontSize: 0.075
 		} );
 
@@ -169,35 +172,33 @@ function makeTextPanel() {
 			backgroundColor: new THREE.Color( 0xd9d9d9 ),
 			backgroundOpacity: 0.5,
 			borderRadius: 0.05,
-			borderWidth: 0.01,
+			borderWidth: 0.02,
 			borderOpacity: 1,
 			borderColor: new THREE.Color( 0x333333 ),
 			justifyContent: 'end',
 			alignItems: 'center',
-			fontColor: new THREE.Color( 0x111111 ),
+			color: new THREE.Color( 0x111111 ),
 			fontFamily: FontJSON,
 			fontTexture: FontImage,
-			width: 1.1,
-			height: 0.95
+			width: 1,
+			height: 1
 		} );
 
 		outerContainer.position.set( -1.725 + 1.15 * i, 1, -1.8 );
 		outerContainer.rotation.x = -0.55;
 		scene.add( outerContainer );
 
-		new BoxLayoutBehavior( outerContainer ).attach();
-
 		//
 
-		const innerContainer = new ThreeMeshUI.Block( {
-			width: 0.98, // width - padding - border
+		const innerContainer = new ThreeMeshUI.Text( {
+			// width: 0.96, // width - padding - border
 			height: 0.7,
 			padding: 0.05,
+			margin: 0.01,
 			backgroundColor: new THREE.Color( 0xffffff ),
 			backgroundOpacity: 0.5,
-			offset: 0.001
-			// 7.x.x : bestFit as been moved as behavior
-			// bestFit: bestFit
+			offset: 0.001,
+			textAlign: 'justify-left'
 		} );
 
 		// 7.x.x : Add a behavior on Block that need to process bestFit
@@ -206,15 +207,15 @@ function makeTextPanel() {
 		outerContainer.add( innerContainer );
 		innerContainers.push( innerContainer );
 
-		const firstTextBlock = new ThreeMeshUI.Text( {
-			content: TEXT1[ i ],
+		const firstTextBlock = new ThreeMeshUI.Inline( {
+			textContent: TEXT1[ i ],
 			fontSize: 0.085
 		} );
 
 		innerContainer.add( firstTextBlock );
 
-		const secondTextBlock = new ThreeMeshUI.Text( {
-			content: TEXT2[ i ],
+		const secondTextBlock = new ThreeMeshUI.Inline( {
+			textContent: ' '+TEXT2[ i ],
 			fontSize: 0.066
 		} );
 
diff --git a/examples/ex__bounds_uv.js b/examples/ex__bounds_uv.js
index 403777e0..8f925b85 100644
--- a/examples/ex__bounds_uv.js
+++ b/examples/ex__bounds_uv.js
@@ -1,11 +1,14 @@
+// xfg:title Bounds UV
+// xfg:category learn
+// xfg:type Behavior
+
 import * as THREE from 'three';
 import { RepeatWrapping, TextureLoader, Vector2 } from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
 
-import * as ThreeMeshUI from 'three-mesh-ui';
-import { FontLibrary } from 'three-mesh-ui';
+import ThreeMeshUI from 'three-mesh-ui';
 // import SnakeImage from './assets/spiny_bush_viper.jpg';
 import SnakeImage from './assets/uv_grid.jpg';
 import SmokeImage from './assets/smoke-tileable.png';
@@ -13,8 +16,6 @@ import SmokeImage from './assets/smoke-tileable.png';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 import BoundsUVBehavior from 'three-mesh-ui/examples/behaviors/geometries/BoundsUVBehavior';
 import ExampleBoundsUVMaterial from 'three-mesh-ui/examples/materials/msdf/ExampleBoundsUVMaterial';
-import * as FontWeight from '../src/utils/font/FontWeight';
-import * as FontStyle from '../src/utils/font/FontStyle';
 import ROBOTO_ADJUSTMENT from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/adjustment';
 
 
@@ -32,14 +33,14 @@ window.addEventListener('resize', onWindowResize );
 //
 function preloadFonts() {
 
-	FontLibrary.prepare(
+	ThreeMeshUI.FontLibrary.prepare(
 
-		FontLibrary
+		ThreeMeshUI.FontLibrary
 			.addFontFamily("Roboto")
-			.addVariant(FontWeight.NORMAL, FontStyle.NORMAL, "./assets/fonts/msdf/roboto/regular.json", "./assets/fonts/msdf/roboto/regular.png" )
-			.addVariant(FontWeight.BOLD, FontStyle.ITALIC, "./assets/fonts/msdf/roboto/bold-italic.json", "./assets/fonts/msdf/roboto/bold-italic.png" )
-			.addVariant(FontWeight.BOLD, FontStyle.NORMAL, "./assets/fonts/msdf/roboto/bold.json", "./assets/fonts/msdf/roboto/bold.png" )
-			.addVariant(FontWeight.NORMAL, FontStyle.ITALIC, "./assets/fonts/msdf/roboto/italic.json", "./assets/fonts/msdf/roboto/italic.png" )
+			.addVariant("normal", "normal", "./assets/fonts/msdf/roboto/regular.json", "./assets/fonts/msdf/roboto/regular.png" )
+			.addVariant("bold", "italic", "./assets/fonts/msdf/roboto/bold-italic.json", "./assets/fonts/msdf/roboto/bold-italic.png" )
+			.addVariant("bold", "normal", "./assets/fonts/msdf/roboto/bold.json", "./assets/fonts/msdf/roboto/bold.png" )
+			.addVariant("normal", "italic", "./assets/fonts/msdf/roboto/italic.json", "./assets/fonts/msdf/roboto/italic.png" )
 
 	).then( init );
 
@@ -48,14 +49,14 @@ function preloadFonts() {
 function init() {
 
 	// Adjusting font variants
-	const FF = FontLibrary.getFontFamily("Roboto");
+	const FF = ThreeMeshUI.FontLibrary.getFontFamily("Roboto");
 
 	// adjust fonts
 	// @see TODO:adjustDocumentation
-	FF.getVariant('700','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
-	FF.getVariant('700','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
-	FF.getVariant('400','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
-	FF.getVariant('400','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	FF.getVariant('bold','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	FF.getVariant('bold','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	FF.getVariant('normal','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	FF.getVariant('normal','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
 
 
 	scene = new THREE.Scene();
@@ -116,13 +117,16 @@ function makeTextPanel() {
 	boundingContainer = new ThreeMeshUI.Block({
 		width: 0.75,
 		height: 0.2,
-		backgroundColor: new THREE.Color(0xff0000),
+		backgroundColor: 0xff0000,
 		backgroundOpacity: 0.25
 	});
+
 	scene.add( boundingContainer );
+
 	boundingContainer.position.set( 0, 1, -2 );
 	boundingContainer.rotation.x = -0.55;
 
+	window.boundingContainer = boundingContainer;
 
 	outerContainer = new ThreeMeshUI.Block({
 		width: 3.2,
@@ -131,7 +135,7 @@ function makeTextPanel() {
 		backgroundOpacity: 0,
 		justifyContent: 'center',
 		alignItems: 'center',
-		contentDirection: 'column',
+		flexDirection: 'column',
 	});
 
 	outerContainer.position.set( 0, 1, -1.8 );
@@ -139,24 +143,24 @@ function makeTextPanel() {
 	scene.add( outerContainer );
 
 	//
-	const infoContainer = new ThreeMeshUI.Block({
+	const infoContainer = new ThreeMeshUI.Text({
 		width: 1.5,
 		height: 0.2,
-		contentDirection: 'column',
+		flexDirection: 'column',
 		justifyContent: 'center',
 		alignItems: 'center',
 		backgroundSize: 'stretch',
 		fontFamily: "Roboto",
-		fontColor: new THREE.Color(0xffffff)
+		color: 0xffffff
 	});
 	outerContainer.add( infoContainer );
 
-	infoContainer.add( new ThreeMeshUI.Text({
-		content:"BoundsUVBehavior obtains the UV from another geometry\n",
+	infoContainer.add( new ThreeMeshUI.Inline({
+		textContent:"BoundsUVBehavior obtains the UV from another geometry\n",
 		fontWeight: '700',
 	}),
-		new ThreeMeshUI.Text({
-			content:"This example uses a custom material to show the whole glyph box",
+		new ThreeMeshUI.Inline({
+			textContent:"This example uses a custom material to show the whole glyph box",
 			fontWeight: '400',
 			fontSize: 0.04
 		}));
@@ -164,7 +168,7 @@ function makeTextPanel() {
 	const effectContainer = new ThreeMeshUI.Block({
 		width:3,
 		height: 1.15,
-		contentDirection: 'row',
+		flexDirection: 'row',
 		backgroundOpacity: 0
 	})
 	outerContainer.add( effectContainer );
@@ -184,55 +188,55 @@ function buildEffectContainer( title, subtitle, bindedTo) {
 		backgroundOpacity: 0,
 		fontSize: 0.25,
 		justifyContent: "center",
+		flexDirection: 'column'
 	});
 	outerContainer.add( effectContainer );
 
-	const titleContainer = new ThreeMeshUI.Block({
+	const titleContainer = new ThreeMeshUI.Text({
 		width: 0.9,
 		height: 0.15,
 		justifyContent: 'center',
-		interLine: -0.01
 	});
 	effectContainer.add( titleContainer );
 
-	titleContainer.add( new ThreeMeshUI.Text({
-		content: title+"\n",
-		fontWeight: '700',
-		fontColor: new THREE.Color(0xffffff),
+	titleContainer.add( new ThreeMeshUI.Inline({
+		textContent: title+"\n",
+		fontWeight: 'bold',
+		color: 0xffffff,
 		fontSize: 0.055
 	}),
-		new ThreeMeshUI.Text({
-			content: subtitle,
-			fontWeight: '400',
-			fontColor: new THREE.Color(0xffffff),
+		new ThreeMeshUI.Inline({
+			textContent: subtitle,
+			fontWeight: 'normal',
+			color: 0xffffff,
 			fontSize: 0.035
 		}));
 
 
 	const defaultText = new ThreeMeshUI.Text({
-		content:"map",
-		fontColor: new THREE.Color(0xffffff)
+		textContent:"map",
+		color: new THREE.Color(0xffffff)
 	});
-	defaultText.material = new ExampleBoundsUVMaterial({map:snakeTexture});
+	defaultText.fontMaterial = new ExampleBoundsUVMaterial({map:snakeTexture});
 
 	let textBlock = new ThreeMeshUI.Block({width:0.75,height:0.3, backgroundOpacity:0});
 	textBlock.add( defaultText );
 	effectContainer.add( textBlock );
 
 	const alphaText = new ThreeMeshUI.Text({
-		content:"alpha",
-		fontColor: new THREE.Color(0xFFFFFF)
+		textContent:"alpha",
+		color: new THREE.Color(0xFFFFFF)
 	});
-	alphaText.material = new ExampleBoundsUVMaterial({alphaMap:smokeTexture});
+	alphaText.fontMaterial = new ExampleBoundsUVMaterial({alphaMap:smokeTexture});
 	textBlock = new ThreeMeshUI.Block({width:0.75,height:0.3, backgroundOpacity:0});
 	textBlock.add( alphaText );
 	effectContainer.add( textBlock );
 
 	const bothText = new ThreeMeshUI.Text({
-		content: "Both",
-		fontColor: new THREE.Color(0xffffff)
+		textContent: "Both",
+		color: new THREE.Color(0xffffff)
 	});
-	bothText.material = new ExampleBoundsUVMaterial({
+	bothText.fontMaterial = new ExampleBoundsUVMaterial({
 		map: snakeTexture,
 		alphaMap:smokeTexture
 	});
@@ -279,7 +283,8 @@ function loop() {
 	//
 	// }
 
-	let height = boundingContainer.height;
+	let height = boundingContainer.get('height');
+
 	height += speed;
 
 	if( height >= 0.6 ) {
diff --git a/examples/ex__copy_htm.js b/examples/ex__copy_htm.js
new file mode 100644
index 00000000..4df5420c
--- /dev/null
+++ b/examples/ex__copy_htm.js
@@ -0,0 +1,228 @@
+// xfg:title Copy HTM
+// xfg:category extend
+
+import * as THREE from 'three';
+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
+
+import ThreeMeshUI, { FontLibrary } from 'three-mesh-ui';
+
+import FontJSON from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.json';
+import FontImage from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.png';
+import Stats from 'three/examples/jsm/libs/stats.module';
+import * as HyperThreeMesh from 'three-mesh-ui/examples/hyperthreemesh/HyperThreeMesh';
+import MSDFNormalMaterial from 'three-mesh-ui/examples/materials/msdf/MSDFNormalMaterial';
+import ROBOTO_ADJUSTMENT from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/adjustment';
+
+const WIDTH = window.innerWidth;
+const HEIGHT = window.innerHeight;
+
+let scene, camera, renderer, controls;
+
+const vrStyleSheet = document.createElement('style');
+vrStyleSheet.setAttribute('media','three-mesh-ui');
+vrStyleSheet.textContent = `
+
+:root{
+	font-family: Roboto;
+	font-style: normal;
+	color: #636363;
+}
+
+h1{
+	font-size : 0.12rem;
+	background-color : rgba(255,0,0,0.9);
+	color: #0099FF;
+	font-style: italic;
+	font-weight: bold;
+	/* padding-right: 0.15rem; */
+	border-radius: 0rem 1rem 0 0;
+	border-color: rgba(255,255,255,0.9);
+	border-width: 0.025rem;
+	border-bottom-width: 0;
+	box-sizing: border-box;
+	text-align: left;
+}
+
+p {
+	background-color : rgba(0,0,0,0.9);
+	width: 100%;
+	border-radius: 0 0 0.05rem 0.05rem;
+	border-width: 0.025rem;
+	border-color: rgba(255,255,255,0.9);
+	border-top: 0;
+}
+
+strong{
+	font-weight: bold;
+}
+
+em{
+	font-style: italic;
+}
+
+small{
+	font-size: 0.8em;
+}
+
+sub{
+	font-size: 0.5em;
+	vertical-align: sub;
+}
+
+sup{
+	font-size: 0.5em;
+	vertical-align: super;
+}
+
+ol li{
+	color: gold;
+	font-style: italic;
+	border-bottom: 0.01rem solid blue;
+}
+ul li{
+	color: white;
+	border-bottom: 0.005rem solid grey;
+}
+
+`;
+document.head.appendChild( vrStyleSheet );
+
+FontLibrary.prepare(
+
+	FontLibrary
+		.addFontFamily("Roboto")
+		.addVariant("normal","normal","./assets/fonts/msdf/roboto/regular.json","./assets/fonts/msdf/roboto/regular.png" )
+
+		// Registering additional variants
+		.addVariant("bold", "italic", "./assets/fonts/msdf/roboto/bold-italic.json", "./assets/fonts/msdf/roboto/bold-italic.png" )
+		.addVariant("bold", "normal", "./assets/fonts/msdf/roboto/bold.json", "./assets/fonts/msdf/roboto/bold.png" )
+		.addVariant("normal", "italic", "./assets/fonts/msdf/roboto/italic.json", "./assets/fonts/msdf/roboto/italic.png" )
+
+// FontLibrary.prepare() returns a Promise, we can therefore add a callback to be executed when all files are loaded
+).then( () => {
+
+	// Once font are registered, we can get the font family
+	const RobotoFamily = FontLibrary.getFontFamily("Roboto");
+
+	RobotoFamily.getVariant('normal','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	RobotoFamily.getVariant('bold','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	RobotoFamily.getVariant('bold','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	RobotoFamily.getVariant('normal','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+
+	// Add some twist to show not htmlMesh
+	RobotoFamily.getVariant('bold','normal').fontMaterial = MSDFNormalMaterial;
+
+	init();
+
+});
+
+
+let container, stats;
+//
+
+function init() {
+
+  scene = new THREE.Scene();
+  scene.background = new THREE.Color(0x505050);
+
+  camera = new THREE.PerspectiveCamera(60, WIDTH / HEIGHT, 0.1, 100);
+
+  renderer = new THREE.WebGLRenderer({ antialias: true });
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(WIDTH, HEIGHT);
+  renderer.xr.enabled = true;
+  document.body.appendChild(VRButton.createButton(renderer));
+  document.body.appendChild(renderer.domElement);
+
+	stats = new Stats();
+	document.body.appendChild( stats.dom );
+
+  controls = new OrbitControls(camera, renderer.domElement);
+  camera.position.set(0, 1.6, 0);
+  controls.target = new THREE.Vector3(0, 1, -1.8);
+  controls.update();
+
+  // ROOM
+
+  const room = new THREE.LineSegments(
+    new BoxLineGeometry(6, 6, 6, 10, 10, 10).translate(0, 3, 0),
+    new THREE.LineBasicMaterial({ color: 0x808080 })
+  );
+
+  scene.add(room);
+
+  // TEXT PANEL
+
+  makeTextPanel();
+
+  //
+
+  renderer.setAnimationLoop(loop);
+
+	window.addEventListener("resize", onWindowResize);
+}
+
+//
+
+function makeTextPanel() {
+
+	const htmlElement = document.createElement("div");
+	htmlElement.innerHTML = `
+	<header class="bob" data-s="s">
+	<h1>three-mesh-ui<sup> v7.1.x</sup><sub>v7.1.x</sub><small>small</small></h1>
+	<p>Should look <small>similar</small> than <em>window.document</em> but with <strong>Three-mesh-ui</strong></p>
+	<ul>
+	<li>Bounlour les nounous.</li>
+	<li>Comment allez vous?</li>
+</ul>
+<ol>
+	<li>Bounlour les nounous.</li>
+	<li>Comment allez vous?</li>
+	<li>Bounlour les nounous.</li>
+	<li>Comment allez vous?</li>
+	<li>Bounlour les nounous.</li>
+	<li>Comment allez vous?</li>
+	<li>Bounlour les nounous.</li>
+	<li>Comment allez vous?</li>
+</ol>
+	</header>
+	<section class="sec" data-r="row" _target="blank">
+	<img src="https://preview.redd.it/hjeayslbw1ta1.jpg?width=640&crop=smart&auto=webp&v=enabled&s=b68ae364a1668641a650a59ba5c333969180e80d">
+
+</section>
+	`
+
+  container = HyperThreeMesh.copy( htmlElement );
+
+  container.position.set(0, 1, -1.8);
+
+	scene.add(container);
+
+	HyperThreeMesh.loadSheets( "three-mesh-ui", true );
+
+}
+
+//
+
+function onWindowResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+//
+
+function loop() {
+  // Don't forget, ThreeMeshUI must be updated manually.
+  // This has been introduced in version 3.0.0 in order
+  // to improve performance
+  ThreeMeshUI.update();
+	HyperThreeMesh.update();
+
+  controls.update();
+  renderer.render(scene, camera);
+
+	stats.update();
+}
diff --git a/examples/ex__font_svg.js b/examples/ex__font_svg.js
index d5b91593..d2773bc1 100644
--- a/examples/ex__font_svg.js
+++ b/examples/ex__font_svg.js
@@ -24,10 +24,10 @@ FontLibrary.prepare(
 
 				// This is where you can register font variant with you custom type implementation
 				// @see three-mesh-ui/examples/font/svg/SVGFontVariant.js which is the implementation
-				.addCustomImplementationVariant( new SVGFontVariant ( '400', 'normal', './assets/fonts/svg/flux/regular.svg' ) )
-				.addCustomImplementationVariant( new SVGFontVariant ( '400', 'italic', './assets/fonts/svg/flux/italic.svg' ) )
-				.addCustomImplementationVariant( new SVGFontVariant ( '700', 'normal', './assets/fonts/svg/flux/bold.svg' ) )
-				.addCustomImplementationVariant( new SVGFontVariant ( '700', 'italic', './assets/fonts/svg/flux/bold-italic.svg' ) )
+				.addCustomImplementationVariant( new SVGFontVariant ( 'normal', 'normal', './assets/fonts/svg/flux/regular.svg' ) )
+				.addCustomImplementationVariant( new SVGFontVariant ( 'normal', 'italic', './assets/fonts/svg/flux/italic.svg' ) )
+				.addCustomImplementationVariant( new SVGFontVariant ( 'bold', 'normal', './assets/fonts/svg/flux/bold.svg' ) )
+				.addCustomImplementationVariant( new SVGFontVariant ( 'bold', 'italic', './assets/fonts/svg/flux/bold-italic.svg' ) )
 
 // FontLibrary.prepare() returns a Promise, we can therefore add a callback to be executed when all files are loaded
 ).then( () => {
@@ -38,7 +38,7 @@ FontLibrary.prepare(
 	// 1. Material
 	// Instead of assigning custom materials to Text one by one
 	// We can assign a Material(class) to a font variant (Here the bold one)
-	FluxFamily.getVariant('700','normal').fontMaterial = MeshNormalMaterial;
+	FluxFamily.getVariant('bold','normal').fontMaterial = MeshNormalMaterial;
 	// Once set, any three-mesh-ui Text using this font variant will use the defined material
 
 	// Now that the font are loaded and adjusted,
@@ -102,14 +102,10 @@ function step1BuildThreeJSElements() {
 //
 function step2BuildThreeMeshUIElements() {
 
-	// Retrieve font families defined
-	const RobotoFamily = FontLibrary.getFontFamily("Roboto");
-
 	// A rootBlock element
 	const rootBlock = new ThreeMeshUI.Block( {
 		// box sizing properties
 		width: 1.85,
-		height: 0.82,
 		padding: 0.05,
 
 		// layout properties
@@ -117,6 +113,11 @@ function step2BuildThreeMeshUIElements() {
 		textAlign: 'left',
 
 		fontKerning: 'none',
+		backgroundColor: 0x000000,
+		backgroundOpacity : 0.25,
+
+		// lineHeight:0,
+		borderRadius: 0.025,
 
 		// text properties
 		fontSize: 0.05,
@@ -131,62 +132,93 @@ function step2BuildThreeMeshUIElements() {
 
 	// Lets build a first text that would be in bold, and use a MSDFNormalMaterial
 	const text1 = new ThreeMeshUI.Text( {
-			content: 'Extending font types (SVG)',
-			fontWeight: '700',
-			fontSize: 0.08
+			width: 'auto',
+			justifyContent: 'center',
+			textContent: 'Extending font types (SVG)',
+			fontWeight: 'bold',
+			fontSize: 0.08,
+			marginBottom: 0.025,
+			backgroundColor: 0x000000,
+			backgroundOpacity: 0.3,
+			padding: '0.05 0.15 0.05 0.05',
+			borderRadius: 0.025,
+			borderColor: 0xffffff,
+			borderWidth: 0.01,
 		} );
 
+
+
 	// as text1 explicitely requires the font variant `fontWeight:'700'`
 	// and that we have set that font variant to use the MSDFNormalMaterial
 	// there is no more need to manually set its material to MSDFNormalMaterial
 	// text1.material = new MSDFNormalMaterial({});
 
+	window.rootBlock = rootBlock;
 
 	rootBlock.add(
 
 		text1,
 
 		new ThreeMeshUI.Text( {
-			content: '\nIn this examples, 4 variants of the "FluxArchitect" font in svg format are registered.',
+			width: '100%',
+			textContent: 'In this examples, 4 variants of the "FluxArchitect" font in svg format are registered.',
+			marginBottom: 0.025,
 		} ),
 
-		new ThreeMeshUI.Text( {
-			content: '\n\nRegular',
-		} ),
+		new ThreeMeshUI.Text({}).add(
+			new ThreeMeshUI.Inline( {
+				textContent: '\n\nRegular',
+			} ),
 
-		new ThreeMeshUI.Text( {
-			content: ' Bold',
-			fontWeight: '700',
-		} ),
+			new ThreeMeshUI.Inline( {
+				textContent: ' Bold',
+				margin: '0 0.05',
+				fontWeight: 'bold',
+			} ),
 
-		new ThreeMeshUI.Text( {
-			content: ' Italic',
-			fontStyle: 'italic',
-		} ),
+			new ThreeMeshUI.Inline( {
+				textContent: ' Italic',
+				fontStyle: 'italic',
+			} ),
+
+			new ThreeMeshUI.Inline( {
+				textContent: ' Bold+Italic',
+				fontWeight: 'bold',
+				fontStyle: 'italic',
+			} ),
+		),
 
-		new ThreeMeshUI.Text( {
-			content: ' Bold+Italic',
-			fontWeight: '700',
-			fontStyle: 'italic',
-		} ),
 
-		new ThreeMeshUI.Text( {
-			content: '\n\nThe registered bold variant in this example, will automatically set the material of a Text to use',
-		} ),
 
 		new ThreeMeshUI.Text( {
-			content: ' MeshNormalMaterial.',
-			fontWeight: '700',
-		} ),
+			textContent: 'The registered bold variant in this example, will automatically set the material of a Text to use',
+			margin: '0.025 0',
+			textAlign: 'justify-left',
+		} ).add( new ThreeMeshUI.Inline( {
+			textContent: ' MeshNormalMaterial.',
+			fontWeight: 'bold',
+		} ), ),
+
+
 
 		new ThreeMeshUI.Text( {
-			content: '\n\n* Some font type implementation, such as this one, will allow to have 3D glyphs and additional parameters such as depth, ...',
+			width: '100%',
+			textContent: '* Some font type implementation, such as this one, will allow to have 3D glyphs and additional parameters such as depth, ...',
 			fontSize: 0.035,
-			fontColor: new THREE.Color(0x00ff99)
+			color: new THREE.Color(0x00ff99)
 		} )
 
 	);
 
+	// If we want to have to ability to control fontDepth from parent, to children,
+	// we need to register them here
+	SVGFontVariant.appendProperties( rootBlock, ...rootBlock.children );
+	SVGFontVariant.appendProperties( text1, ...rootBlock.children );
+
+	// now we can control parent value, cascading to inherited children
+	text1.set({fontDepth:0.02});
+	rootBlock.set({fontDepth:0.006});
+
 }
 
 //
diff --git a/examples/ex__frame_materials.js b/examples/ex__frame_materials.js
index ffbe2dab..eebe1aed 100644
--- a/examples/ex__frame_materials.js
+++ b/examples/ex__frame_materials.js
@@ -1,3 +1,6 @@
+// xfg:title Background Materials
+// xfg:category extend
+
 import * as THREE from 'three';
 import * as ThreeMeshUI from 'three-mesh-ui';
 
@@ -8,12 +11,11 @@ function example() {
 		width: 3.2,
 		height: 3.2,
 		backgroundOpacity: 0,
-		interLine:-0.05,
-		contentDirection: 'row',
+		flexDirection: 'row',
 		justifyContent: 'center',
 		alignItems: 'center',
 		fontFamily: RobotoFontFamily,
-		fontWeight: ThreeMeshUI.FontWeight.BOLD,
+		fontWeight: "700",
 		fontSize: 0.25,
 	});
 
@@ -29,19 +31,19 @@ function example() {
 	const defaults = new ThreeMeshUI.Block(COLUMN).add( fillDefault, borderDefault, fullDefault );
 
 	const fillStandard = new ThreeMeshUI.Block(FILL_BLOCK);
-	fillStandard.material = new FrameStandardMaterial({});
+	fillStandard.backgroundMaterial = new FrameStandardMaterial({});
 	const borderStandard = new ThreeMeshUI.Block(BORDER_BLOCK);
-	borderStandard.material = new FrameStandardMaterial({});
+	borderStandard.backgroundMaterial = new FrameStandardMaterial({});
 	const fullStandard = new ThreeMeshUI.Block(FULL_BLOCK);
-	fullStandard.material = new FrameStandardMaterial({});
+	fullStandard.backgroundMaterial = new FrameStandardMaterial({});
 	const standards = new ThreeMeshUI.Block(COLUMN).add( fillStandard, borderStandard, fullStandard );
 
 	const fillPhysical = new ThreeMeshUI.Block({...FILL_BLOCK, ...PHYSICAL_OVERRIDE} );
-	fillPhysical.material = new FramePhysicalMaterial(PHYSICAL_MATERIAL_OPTIONS);
+	fillPhysical.backgroundMaterial = new FramePhysicalMaterial(PHYSICAL_MATERIAL_OPTIONS);
 	const borderPhysical = new ThreeMeshUI.Block({...BORDER_BLOCK, ...PHYSICAL_OVERRIDE});
-	borderPhysical.material = new FramePhysicalMaterial(PHYSICAL_MATERIAL_OPTIONS);
+	borderPhysical.backgroundMaterial = new FramePhysicalMaterial(PHYSICAL_MATERIAL_OPTIONS);
 	const fullPhysical = new ThreeMeshUI.Block({...FULL_BLOCK, ...PHYSICAL_OVERRIDE});
-	fullPhysical.material = new FramePhysicalMaterial(PHYSICAL_MATERIAL_OPTIONS);
+	fullPhysical.backgroundMaterial = new FramePhysicalMaterial(PHYSICAL_MATERIAL_OPTIONS);
 	const physicals = new ThreeMeshUI.Block(COLUMN).add( fillPhysical, borderPhysical, fullPhysical );
 
 
@@ -57,8 +59,8 @@ const BACKGROUND_COLOR = new THREE.Color( 0xff9900 );
 const BORDER_COLOR = new THREE.Color( 0xff9900 );
 const WHITE_COLOR = new THREE.Color( 0xffffff );
 
-const COLUMN = { width:0.45, height: 0.45, margin: 0.02, contentDirection: 'column', justifyContent: "center", backgroundOpacity: 0 };
-const FILL_BLOCK = { width: 0.45, height: 0.45, margin:0.02, borderRadius:0.05,backgroundColor:BACKGROUND_COLOR, borderColor: BORDER_COLOR };
+const COLUMN = { width:0.45, height: 0.45, margin: 0.02, flexDirection: 'column', justifyContent: "center", backgroundOpacity: 0 };
+const FILL_BLOCK = { boxSizing: 'border-box', width: 0.45, height: 0.45, margin:0.02, borderRadius:0.05,backgroundColor:BACKGROUND_COLOR, borderColor: BORDER_COLOR };
 const BORDER_BLOCK = { ...FILL_BLOCK, backgroundOpacity:0, borderWidth:0.05 };
 const FULL_BLOCK = { ...FILL_BLOCK, borderWidth: 0.05 };
 const PHYSICAL_MATERIAL_OPTIONS = {
@@ -110,14 +112,20 @@ const PHYSICAL_OVERRIDE = {borderColor: WHITE_COLOR, backgroundColor: WHITE_COLO
 import { exampleAddUpdate, exampleThreeSetup } from 'three-mesh-ui/examples/_setup/ThreeSetup';
 import { exampleThreePointLight, rollPointLightUpdate } from 'three-mesh-ui/examples/_setup/ThreePointLight';
 import { exampleThreeCube, rollCubeUpdate } from 'three-mesh-ui/examples/_setup/ThreeCube';
-import { exampleFontPreloadAll } from 'three-mesh-ui/examples/_setup/RobotoFont';
+import { exampleFontPreloadRoboto } from 'three-mesh-ui/examples/_setup/RobotoFont';
 import FrameStandardMaterial from 'three-mesh-ui/examples/materials/frame/FrameStandardMaterial';
 import FramePhysicalMaterial from 'three-mesh-ui/examples/materials/frame/FramePhysicalMaterial';
+import { exampleCameraPerspective } from 'three-mesh-ui/examples/_setup/CameraPerspective';
+import { exampleRoomVR } from 'three-mesh-ui/examples/_setup/RoomVR';
 
 /* eslint-disable no-unused-vars */
 
 // building three setup
-const { scene, camera, renderer, controls, stats } = exampleThreeSetup();
+const { camera } = exampleCameraPerspective();
+const { scene, renderer, controls, stats } = exampleThreeSetup( camera );
+
+
+const { roomVR } = exampleRoomVR( scene );
 
 // building pointLight
 const {pointLightContainer, pointLight, pointLightHelper} = exampleThreePointLight(scene);
@@ -130,5 +138,5 @@ const cube = exampleThreeCube( scene );
 exampleAddUpdate( rollCubeUpdate );
 
 // preload fonts and run example() after
-const RobotoFontFamily = exampleFontPreloadAll( example );
+const RobotoFontFamily = exampleFontPreloadRoboto( example );
 
diff --git a/examples/ex__inline_block.js b/examples/ex__inline_block.js
index 1c3ae44d..27d0eac3 100644
--- a/examples/ex__inline_block.js
+++ b/examples/ex__inline_block.js
@@ -1,3 +1,6 @@
+// xfg:title InlineBlocks
+// xfg:category practice
+
 import * as THREE from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -61,7 +64,7 @@ function init() {
 
 function makeTextPanel() {
 
-	container = new ThreeMeshUI.Block( {
+	container = new ThreeMeshUI.Text( {
 		width: 2.2,
 		height: 0.95,
 		padding: 0.05,
@@ -70,7 +73,6 @@ function makeTextPanel() {
 		fontFamily: FontJSON,
 		fontTexture: FontImage,
 		fontSize: 0.05,
-		interLine: 0.05,
 		letterSpacing : 0
 	} );
 
@@ -82,47 +84,54 @@ function makeTextPanel() {
 
 	const loader = new THREE.TextureLoader();
 
+
+
 	loader.load( ThreeIcon, ( texture ) => {
 
+		window.icon1 = new ThreeMeshUI.InlineBlock( {
+			height: 0.2,
+			width: 0.4,
+			backgroundImage: texture,
+			backgroundOpacity: 0.75,
+			backgroundColor: 0xffffff,
+		} );
+
+
 		container.add(
-			new ThreeMeshUI.Text( {
+			new ThreeMeshUI.Inline( {
 				fontSize: 0.09,
-				content: 'three-mesh-ui supports inline blocks\n'
+				textContent: 'three-mesh-ui supports inline blocks\n'
 			} ),
 
-			new ThreeMeshUI.Text( {
+			new ThreeMeshUI.Inline( {
 				fontSize: 0.07,
-				content: 'Here is a first InlineBlock ',
-				fontColor: new THREE.Color( 0xffc654 )
+				textContent: 'Here is a first InlineBlock ',
+				color: new THREE.Color( 0xffc654 )
 			} ),
 
-			new ThreeMeshUI.InlineBlock( {
-				height: 0.2,
-				width: 0.4,
-				backgroundTexture: texture
-			} ),
+			window.icon1,
 
-			new ThreeMeshUI.Text( {
+			new ThreeMeshUI.Inline( {
 				fontSize: 0.07,
-				content: ' and this is a second ',
-				fontColor: new THREE.Color( 0xffc654 )
+				textContent: '\nand this is a second ',
+				color: new THREE.Color( 0xffc654 )
 			} ),
 
 			new ThreeMeshUI.InlineBlock( {
 				height: 0.2,
 				width: 0.4,
-				backgroundTexture: texture,
+				backgroundImage: texture,
 				backgroundColor: new THREE.Color( 0x00ff00 ),
 				backgroundOpacity: 0.3
 			} ),
 
-			new ThreeMeshUI.Text( {
+			new ThreeMeshUI.Inline( {
 				fontSize: 0.07,
-				content: ' with modified color and opacity.',
-				fontColor: new THREE.Color( 0xffc654 )
+				textContent: ' with modified color and opacity.',
+				color: new THREE.Color( 0xffc654 )
 			} ),
 
-			new ThreeMeshUI.Text( { content: `\nIt works like a Block component, but can be positioned among inline components like text. Perfect for icons and emojis.` } )
+			new ThreeMeshUI.Inline( { textContent: `\nIt works like a Block component, but can be positioned among inline components like text. Perfect for icons and emojis.` } )
 		);
 
 	} );
diff --git a/examples/ex__interactive_button.js b/examples/ex__interactive_button.js
index 4f5b694e..92187d9d 100644
--- a/examples/ex__interactive_button.js
+++ b/examples/ex__interactive_button.js
@@ -1,57 +1,86 @@
+// xfg:title 			Interactive Button HTM
+// xfg:category		extend
+// xfg:group			hypermesh
+
 import * as THREE from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
 import ThreeMeshUI from 'three-mesh-ui';
-import VRControl from './utils/VRControl.js';
+import * as HyperThreeMesh from 'three-mesh-ui/examples/hyperthreemesh/HyperThreeMesh';
 import ShadowedLight from './utils/ShadowedLight.js';
 
 import FontJSON from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.json';
 import FontImage from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.png';
+import InteractiveRaycaster from 'three-mesh-ui/examples/interactive/InteractiveRaycaster';
+import { _injectCSS } from 'three-mesh-ui/examples/_setup/Html';
+import InteractiveCursor from 'three-mesh-ui/examples/interactive/listeners/InteractiveCursor';
+import VRControl from 'three-mesh-ui/examples/controls/VRControl';
 
-let scene, camera, renderer, controls, vrControl;
+let scene, camera, renderer, controls, vrControl, interactiveRaycaster;
 let meshContainer, meshes, currentMesh;
 const objsToTest = [];
 
-window.addEventListener( 'load', init );
-window.addEventListener( 'resize', onWindowResize );
+_injectCSS( `
+
+:root{
+
+	background-color : rgba(0,0,0,0.75);
+	padding: 0.05rem 0.125rem;
+	border-radius: 0.2rem 0.02rem 0.2rem 0.02rem;
+
+}
+
+button{
+
+	width : auto;
+	padding: 0.02rem 0.15rem;
+	margin: 0.01rem;
+
+	text-align: center;
+	background-color: rgba(255,255,255,0.5);
+	border-radius : 0.08rem;
+	rx: 0.005rem;
+	border-bottom-width : 0.01rem;
+	border-bottom-color : rgba(64,64,64,.5);
+	border-top-width : 0;
+
+}
+
+button:hover {
+
+	background-color: rgba(255,255,255,0.7);
+	rx : 0.025rem;
 
-// compute mouse position in normalized device coordinates
-// (-1 to +1) for both directions.
-// Used to raycasting against the interactive elements
+}
 
-const raycaster = new THREE.Raycaster();
+button:disabled {
 
-const mouse = new THREE.Vector2();
-mouse.x = mouse.y = null;
+	background-color: rgba(255,255,255,0.3);
+	color: rgba( 255,255,255,0.5);
 
-let selectState = false;
+}
 
-window.addEventListener( 'pointermove', ( event ) => {
-	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-	mouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;
-} );
+button:disabled:hover {
 
-window.addEventListener( 'pointerdown', () => {
-	selectState = true;
-} );
+	rx : 0.015rem;
 
-window.addEventListener( 'pointerup', () => {
-	selectState = false;
-} );
+}
 
-window.addEventListener( 'touchstart', ( event ) => {
-	selectState = true;
-	mouse.x = ( event.touches[ 0 ].clientX / window.innerWidth ) * 2 - 1;
-	mouse.y = -( event.touches[ 0 ].clientY / window.innerHeight ) * 2 + 1;
-} );
+button:active {
 
-window.addEventListener( 'touchend', () => {
-	selectState = false;
-	mouse.x = null;
-	mouse.y = null;
-} );
+	rx : 0.01rem;
+	border-top : rgba(103,103,103,0.8) 0.005rem solid;
+	border-bottom-width : 0.005rem;
+	border-bottom-color : #000;
+	background-color: rgba(128,128,128,0.8);
+}
+
+`)
+
+window.addEventListener( 'load', init );
+window.addEventListener( 'resize', onWindowResize );
 
 //
 
@@ -115,20 +144,15 @@ function init() {
 	// Controllers
 	////////////////
 
-	vrControl = VRControl( renderer, camera, scene );
+	vrControl = VRControl( renderer );
 
 	scene.add( vrControl.controllerGrips[ 0 ], vrControl.controllers[ 0 ] );
 
-	vrControl.controllers[ 0 ].addEventListener( 'selectstart', () => {
+	interactiveRaycaster = new InteractiveRaycaster( camera, scene, renderer, vrControl );
+	interactiveRaycaster.start();
 
-		selectState = true;
-
-	} );
-	vrControl.controllers[ 0 ].addEventListener( 'selectend', () => {
-
-		selectState = false;
-
-	} );
+	const interactiveCursor = new InteractiveCursor( renderer.domElement, 'pointer' );
+	interactiveRaycaster.addListener( interactiveCursor );
 
 	////////////////////
 	// Primitive Meshes
@@ -141,17 +165,17 @@ function init() {
 	//
 
 	const sphere = new THREE.Mesh(
-		new THREE.IcosahedronBufferGeometry( 0.3, 1 ),
+		new THREE.IcosahedronGeometry( 0.3, 1 ),
 		new THREE.MeshStandardMaterial( { color: 0x3de364, flatShading: true } )
 	);
 
 	const box = new THREE.Mesh(
-		new THREE.BoxBufferGeometry( 0.45, 0.45, 0.45 ),
+		new THREE.BoxGeometry( 0.45, 0.45, 0.45 ),
 		new THREE.MeshStandardMaterial( { color: 0x643de3, flatShading: true } )
 	);
 
 	const cone = new THREE.Mesh(
-		new THREE.ConeBufferGeometry( 0.28, 0.5, 10 ),
+		new THREE.ConeGeometry( 0.28, 0.5, 10 ),
 		new THREE.MeshStandardMaterial( { color: 0xe33d4e, flatShading: true } )
 	);
 
@@ -174,6 +198,8 @@ function init() {
 
 	//
 
+	HyperThreeMesh.loadSheets();
+
 	renderer.setAnimationLoop( loop );
 
 }
@@ -184,7 +210,7 @@ function showMesh( id ) {
 
 	meshes.forEach( ( mesh, i ) => {
 
-		mesh.visible = i === id ? true : false;
+		mesh.visible = i === id;
 
 	} );
 
@@ -196,118 +222,70 @@ function showMesh( id ) {
 
 function makePanel() {
 
-	// Container block, in which we put the two buttons.
-	// We don't define width and height, it will be set automatically from the children's dimensions
-	// Note that we set contentDirection: "row-reverse", in order to orient the buttons horizontally
 
-	const container = new ThreeMeshUI.Block( {
-		justifyContent: 'center',
-		contentDirection: 'row-reverse',
+	const container = HyperThreeMesh.createElement( 'div' )
+	container.style.borderRadius = 0.11;
+	container.style.justifyContent = "center";
+	container.style.flexDirection = 'row-reverse';
+	container.style.padding = '0.02 0.05';
+
+	// or go by standard way
+	container.set( {
 		fontFamily: FontJSON,
 		fontTexture: FontImage,
 		fontSize: 0.07,
-		padding: 0.02,
-		borderRadius: 0.11
 	} );
 
 	container.position.set( 0, 0.6, -1.2 );
 	container.rotation.x = -0.55;
 	scene.add( container );
 
-	// BUTTONS
-
-	// We start by creating objects containing options that we will use with the two buttons,
-	// in order to write less code.
-
-	const buttonOptions = {
-		width: 0.4,
-		height: 0.15,
-		justifyContent: 'center',
-		offset: 0.05,
-		margin: 0.02,
-		borderRadius: 0.075
-	};
-
-	// Options for component.setupState().
-	// It must contain a 'state' parameter, which you will refer to with component.setState( 'name-of-the-state' ).
-
-	const hoveredStateAttributes = {
-		state: 'hovered',
-		attributes: {
-			offset: 0.035,
-			backgroundColor: new THREE.Color( 0x999999 ),
-			backgroundOpacity: 1,
-			fontColor: new THREE.Color( 0xffffff )
-		},
-	};
-
-	const idleStateAttributes = {
-		state: 'idle',
-		attributes: {
-			offset: 0.035,
-			backgroundColor: new THREE.Color( 0x666666 ),
-			backgroundOpacity: 0.3,
-			fontColor: new THREE.Color( 0xffffff )
-		},
-	};
-
-	// Buttons creation, with the options objects passed in parameters.
-
-	const buttonNext = new ThreeMeshUI.Block( buttonOptions );
-	const buttonPrevious = new ThreeMeshUI.Block( buttonOptions );
-
-	// Add text to buttons
-
-	buttonNext.add(
-		new ThreeMeshUI.Text( { content: 'next' } )
-	);
+	const buttonNext = HyperThreeMesh.createElement('button');
+	buttonNext.set({width: 'auto', name: 'next'});
+	buttonNext.name = 'nextBtn';
+	// buttonNext.textContent = "next";
 
-	buttonPrevious.add(
-		new ThreeMeshUI.Text( { content: 'previous' } )
-	);
+	const inl = HyperThreeMesh.createElement('span');
+	inl.textContent = "next";
+	buttonNext.add( inl );
 
-	// Create states for the buttons.
-	// In the loop, we will call component.setState( 'state-name' ) when mouse hover or click
+	buttonNext.addEventListener( 'click' , (event) => {
 
-	const selectedAttributes = {
-		offset: 0.02,
-		backgroundColor: new THREE.Color( 0x777777 ),
-		fontColor: new THREE.Color( 0x222222 )
-	};
+		console.log( event.target.name );
 
-	buttonNext.setupState( {
-		state: 'selected',
-		attributes: selectedAttributes,
-		onSet: () => {
+		console.log( "catched event on buttonNext", event );
 
-			currentMesh = ( currentMesh + 1 ) % 3;
-			showMesh( currentMesh );
+		currentMesh = ( currentMesh + 1 ) % 3;
+		showMesh( currentMesh );
 
-		}
-	} );
-	buttonNext.setupState( hoveredStateAttributes );
-	buttonNext.setupState( idleStateAttributes );
+	});
 
-	//
+	const disabledButton = HyperThreeMesh.createElement('button');
+	disabledButton.set({width: 'auto', name: 'next'});
+	disabledButton.disabled = true;
+	disabledButton.textContent = 'Disabled'
 
-	buttonPrevious.setupState( {
-		state: 'selected',
-		attributes: selectedAttributes,
-		onSet: () => {
+	console.log( disabledButton.copyAttributes() );
 
-			currentMesh -= 1;
-			if ( currentMesh < 0 ) currentMesh = 2;
-			showMesh( currentMesh );
 
-		}
-	} );
-	buttonPrevious.setupState( hoveredStateAttributes );
-	buttonPrevious.setupState( idleStateAttributes );
+	const buttonPrevious = HyperThreeMesh.createElement('button');
+	buttonPrevious.set({width: 'auto', name: 'prev'});
+	buttonPrevious.textContent = "previous";
 
-	//
+	buttonPrevious.addEventListener( 'click' , (event) => {
+
+		console.log( "catched event on buttonPrevious", event );
+
+		currentMesh -= 1;
+		if ( currentMesh < 0 ) currentMesh = 2;
+		showMesh( currentMesh );
+
+	});
+
+	container.add( buttonNext, disabledButton, buttonPrevious );
+
+	interactiveRaycaster.addObject( buttonNext, disabledButton, buttonPrevious );
 
-	container.add( buttonNext, buttonPrevious );
-	objsToTest.push( buttonNext, buttonPrevious );
 
 }
 
@@ -329,97 +307,15 @@ function loop() {
 	// This has been introduced in version 3.0.0 in order
 	// to improve performance
 	ThreeMeshUI.update();
-
 	controls.update();
+	interactiveRaycaster.update();
+	HyperThreeMesh.update();
+
 
 	meshContainer.rotation.z += 0.01;
 	meshContainer.rotation.y += 0.01;
 
 	renderer.render( scene, camera );
 
-	updateButtons();
-
 }
 
-// Called in the loop, get intersection with either the mouse or the VR controllers,
-// then update the buttons states according to result
-
-function updateButtons() {
-
-	// Find closest intersecting object
-
-	let intersect;
-
-	if ( renderer.xr.isPresenting ) {
-
-		vrControl.setFromController( 0, raycaster.ray );
-
-		intersect = raycast();
-
-		// Position the little white dot at the end of the controller pointing ray
-		if ( intersect ) vrControl.setPointerAt( 0, intersect.point );
-
-	} else if ( mouse.x !== null && mouse.y !== null ) {
-
-		raycaster.setFromCamera( mouse, camera );
-
-		intersect = raycast();
-
-	}
-
-	// Update targeted button state (if any)
-
-	if ( intersect && intersect.object.isUI ) {
-
-		if ( selectState ) {
-
-			// Component.setState internally call component.set with the options you defined in component.setupState
-			intersect.object.setState( 'selected' );
-
-		} else {
-
-			// Component.setState internally call component.set with the options you defined in component.setupState
-			intersect.object.setState( 'hovered' );
-
-		}
-
-	}
-
-	// Update non-targeted buttons state
-
-	objsToTest.forEach( ( obj ) => {
-
-		if ( ( !intersect || obj !== intersect.object ) && obj.isUI ) {
-
-			// Component.setState internally call component.set with the options you defined in component.setupState
-			obj.setState( 'idle' );
-
-		}
-
-	} );
-
-}
-
-//
-
-function raycast() {
-
-	return objsToTest.reduce( ( closestIntersection, obj ) => {
-
-		const intersection = raycaster.intersectObject( obj, true );
-
-		if ( !intersection[ 0 ] ) return closestIntersection;
-
-		if ( !closestIntersection || intersection[ 0 ].distance < closestIntersection.distance ) {
-
-			intersection[ 0 ].object = obj;
-
-			return intersection[ 0 ];
-
-		}
-
-		return closestIntersection;
-
-	}, null );
-
-}
diff --git a/examples/ex__keyboard.js b/examples/ex__keyboard.js
index 91333f8a..442c417a 100644
--- a/examples/ex__keyboard.js
+++ b/examples/ex__keyboard.js
@@ -1,3 +1,7 @@
+// xfg:title 			Keyboard
+// xfg:category		practice
+// xfg:group			interactive
+
 /*
 
 This example is an advanced demo.
@@ -14,7 +18,6 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
 
 import ThreeMeshUI from 'three-mesh-ui';
-import VRControl from './utils/VRControl.js';
 import ShadowedLight from './utils/ShadowedLight.js';
 
 import FontJSON from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.json';
@@ -23,6 +26,22 @@ import FontImage from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.p
 import Backspace from 'three-mesh-ui/examples/assets/backspace.png';
 import Enter from 'three-mesh-ui/examples/assets/enter.png';
 import Shift from 'three-mesh-ui/examples/assets/shift.png';
+import Stats from 'three/examples/jsm/libs/stats.module';
+import InteractiveRaycaster from 'three-mesh-ui/examples/interactive/InteractiveRaycaster';
+import InteractiveCursor from 'three-mesh-ui/examples/interactive/listeners/InteractiveCursor';
+import KeyboardElement from 'three-mesh-ui/examples/elements/keyboard/KeyboardElement';
+import QwertyEnglish from 'three-mesh-ui/examples/elements/keyboard/keyboard-layouts/QwertyEnglish';
+import AzertyFrench from 'three-mesh-ui/examples/elements/keyboard/keyboard-layouts/AzertyFrench';
+import QwertzDeutsch from 'three-mesh-ui/examples/elements/keyboard/keyboard-layouts/QwertzDeutsch';
+import QwertyGreek from 'three-mesh-ui/examples/elements/keyboard/keyboard-layouts/QwertyGreek';
+import QwertyNordic from 'three-mesh-ui/examples/elements/keyboard/keyboard-layouts/QwertyNordic';
+import QwertyRussian from 'three-mesh-ui/examples/elements/keyboard/keyboard-layouts/QwertyRussian';
+import QwertySpanish from 'three-mesh-ui/examples/elements/keyboard/keyboard-layouts/QwertySpanish';
+import VRControl from 'three-mesh-ui/examples/controls/VRControl';
+import PhysicalKeyboardFeederBehavior from 'three-mesh-ui/examples/behaviors/input/PhysicalKeyboardFeederBehavior';
+import KeyboardsSynchronizerBehavior from 'three-mesh-ui/examples/behaviors/input/KeyboardsSynchronizerBehavior';
+import InteractiveTooltip from 'three-mesh-ui/examples/interactive/listeners/InteractiveTooltip';
+import SimpleStateBehavior from 'three-mesh-ui/examples/behaviors/states/SimpleStateBehavior';
 
 let scene,
 	camera,
@@ -31,12 +50,12 @@ let scene,
 	vrControl,
 	keyboard,
 	userText,
-	currentLayoutButton,
 	intersectionRoom,
-	layoutOptions;
-// stats;
-
-const objsToTest = [];
+	layoutOptions,
+	interactiveRaycaster,
+	interactiveCursor,
+	stats,
+	keyboardSync;
 
 // Colors
 
@@ -50,55 +69,6 @@ const colors = {
 
 //
 
-const raycaster = new THREE.Raycaster();
-
-// compute mouse position in normalized device coordinates
-// (-1 to +1) for both directions.
-// Used to raycasting against the interactive elements
-
-const mouse = new THREE.Vector2();
-mouse.x = mouse.y = null;
-
-let selectState = false;
-let touchState = false;
-
-window.addEventListener( 'pointermove', ( event ) => {
-
-	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-	mouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;
-
-} );
-
-window.addEventListener( 'pointerdown', () => {
-
-	selectState = true;
-
-} );
-
-window.addEventListener( 'pointerup', () => {
-
-	selectState = false;
-
-} );
-
-window.addEventListener( 'touchstart', ( event ) => {
-
-	touchState = true;
-	mouse.x = ( event.touches[ 0 ].clientX / window.innerWidth ) * 2 - 1;
-	mouse.y = -( event.touches[ 0 ].clientY / window.innerHeight ) * 2 + 1;
-
-} );
-
-window.addEventListener( 'touchend', () => {
-
-	touchState = false;
-	mouse.x = null;
-	mouse.y = null;
-
-} );
-
-//
-
 window.addEventListener( 'load', init );
 window.addEventListener( 'resize', onWindowResize );
 
@@ -124,12 +94,12 @@ function init() {
 
 	// STATS
 
-	/*
+
 	stats = new Stats();
 	stats.dom.style.left = 'auto';
 	stats.dom.style.right = '0px';
 	document.body.appendChild( stats.dom );
-	*/
+
 
 	// LIGHT
 
@@ -152,20 +122,18 @@ function init() {
 
 	//
 
-	vrControl = VRControl( renderer, camera, scene );
-
+	vrControl = new VRControl( renderer );
 	scene.add( vrControl.controllerGrips[ 0 ], vrControl.controllers[ 0 ] );
 
-	vrControl.controllers[ 0 ].addEventListener( 'selectstart', () => {
+	interactiveRaycaster = new InteractiveRaycaster( camera, scene, renderer, vrControl );
 
-		selectState = true;
+	interactiveCursor = new InteractiveCursor( renderer.domElement );
+	interactiveRaycaster.addListener( interactiveCursor );
 
-	} );
-	vrControl.controllers[ 0 ].addEventListener( 'selectend', () => {
+	const interactiveTooltip = new InteractiveTooltip( renderer.domElement );
+	interactiveRaycaster.addListener( interactiveTooltip );
 
-		selectState = false;
-
-	} );
+	interactiveRaycaster.start();
 
 	// ROOM
 
@@ -177,14 +145,13 @@ function init() {
 	intersectionRoom = new THREE.Mesh(
 		new THREE.BoxGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
 		new THREE.MeshBasicMaterial( {
-			side: THREE.BackSide,
+			side : THREE.BackSide,
 			transparent: true,
 			opacity: 0
 		} )
 	);
 
 	scene.add( room, intersectionRoom );
-	objsToTest.push( intersectionRoom );
 
 	// USER INTERFACE
 
@@ -213,7 +180,8 @@ function makeUI() {
 		fontFamily: FontJSON,
 		fontTexture: FontImage,
 		width: 1,
-		height: 0.35,
+		height: 0.32,
+		padding: 0.02,
 		backgroundColor: new THREE.Color( colors.panelBack ),
 		backgroundOpacity: 1
 	} );
@@ -223,27 +191,29 @@ function makeUI() {
 
 	//
 
-	const title = new ThreeMeshUI.Block( {
+	const title = new ThreeMeshUI.Text( {
 		width: 1,
 		height: 0.1,
 		justifyContent: 'center',
 		fontSize: 0.045,
-		backgroundOpacity: 0
-	} ).add(
-		new ThreeMeshUI.Text( { content: 'Type some text on the keyboard' } )
-	);
-
-	userText = new ThreeMeshUI.Text( { content: '' } );
+		textContent: 'Type some text on the keyboard'
+	} )
 
-	const textField = new ThreeMeshUI.Block( {
+	userText = new ThreeMeshUI.Text( {
 		width: 1,
-		height: 0.4,
+		// height: 0.4,
 		fontSize: 0.033,
 		padding: 0.02,
-		backgroundOpacity: 0
-	} ).add( userText );
+		boxSizing: 'border-box',
+		textContent: "",
+		textAlign: 'center'
+	} );
+
+	// add keyboard input to userText
+	const feeder = new PhysicalKeyboardFeederBehavior( userText );
+	feeder.attach();
 
-	textPanel.add( title, textField );
+	textPanel.add( title, userText );
 
 	////////////////////////
 	// LAYOUT OPTIONS PANEL
@@ -252,91 +222,68 @@ function makeUI() {
 	// BUTTONS
 
 	let layoutButtons = [
-		[ 'English', 'eng' ],
-		[ 'Nordic', 'nord' ],
-		[ 'German', 'de' ],
-		[ 'Spanish', 'es' ],
-		[ 'French', 'fr' ],
-		[ 'Russian', 'ru' ],
-		[ 'Greek', 'el' ]
+		[ 'English', QwertyEnglish ],
+		[ 'Nordic', QwertyNordic ],
+		[ 'German', QwertzDeutsch ],
+		[ 'Spanish', QwertySpanish ],
+		[ 'French', AzertyFrench ],
+		[ 'Russian', QwertyRussian ],
+		[ 'Greek', QwertyGreek ]
 	];
 
 	layoutButtons = layoutButtons.map( ( options ) => {
 
-		const button = new ThreeMeshUI.Block( {
-			height: 0.06,
-			width: 0.2,
+		const button = new ThreeMeshUI.Text( {
+
+			name: 'switch keyboard layout to '+options[ 0 ],
+			// height: 0.06,
+			width: 'auto',
+			padding : '0.01 0.05',
 			margin: 0.012,
 			justifyContent: 'center',
-			backgroundColor: new THREE.Color( colors.button ),
-			backgroundOpacity: 1
-		} ).add(
-			new ThreeMeshUI.Text( {
-				offset: 0,
-				fontSize: 0.035,
-				content: options[ 0 ]
-			} )
-		);
-
-		button.setupState( {
-			state: 'idle',
-			attributes: {
-				offset: 0.02,
-				backgroundColor: new THREE.Color( colors.button ),
-				backgroundOpacity: 1
-			}
+			// backgroundColor: new THREE.Color( colors.button ),
+			backgroundColor: colors.button ,
+			offset: 0.01,
+			backgroundOpacity: 1,
+			fontSize: 0.035,
+			textContent: options[ 0 ]
 		} );
 
-		button.setupState( {
-			state: 'hovered',
-			attributes: {
+		new SimpleStateBehavior( button, {
+			hover: {
 				offset: 0.02,
-				backgroundColor: new THREE.Color( colors.hovered ),
-				backgroundOpacity: 1
-			}
-		} );
-
-		button.setupState( {
-			state: 'selected',
-			attributes: {
-				offset: 0.01,
-				backgroundColor: new THREE.Color( colors.selected ),
-				backgroundOpacity: 1
+				backgroundColor: colors.hovered,
 			},
-			onSet: () => {
-
-				// enable intersection checking for the previous layout button,
-				// then disable it for the current button
-
-				if ( currentLayoutButton ) objsToTest.push( currentLayoutButton );
-
-				if ( keyboard ) {
+			checked: {
+				backgroundColor: colors.selected,
+			},
+		});
 
-					clear( keyboard );
 
-					keyboard.panels.forEach( panel => clear( panel ) );
+		button.addEventListener( 'click' , () => {
 
-				}
+			if ( keyboard ) {
 
-				currentLayoutButton = button;
+				interactiveRaycaster.removeObject( keyboard );
+				keyboard.clear();
 
-				makeKeyboard( options[ 1 ] );
+				keyboardSync.detach();
+				keyboardSync = null;
 
 			}
 
-		} );
-
-		objsToTest.push( button );
-
-		// Set English button as selected from the start
+			for ( let i = 0; i < layoutButtons.length; i++ ) {
+				const layoutButton = layoutButtons[ i ];
+				layoutButton.deactivatePseudoState('checked');
+			}
 
-		if ( options[ 1 ] === 'eng' ) {
+			button.activatePseudoState('checked');
 
-			button.setState( 'selected' );
+			makeKeyboard( options[ 1 ] );
 
-			currentLayoutButton = button;
+		});
 
-		}
+		interactiveRaycaster.addObject( button );
 
 		return button;
 
@@ -347,30 +294,25 @@ function makeUI() {
 	layoutOptions = new ThreeMeshUI.Block( {
 		fontFamily: FontJSON,
 		fontTexture: FontImage,
-		height: 0.25,
+		padding: 0.02,
 		width: 1,
-		offset: 0,
+		// offset: 0,
 		backgroundColor: new THREE.Color( colors.panelBack ),
 		backgroundOpacity: 1
 	} ).add(
-		new ThreeMeshUI.Block( {
-			height: 0.1,
-			width: 0.6,
-			offset: 0,
+		new ThreeMeshUI.Text( {
+			// offset: 0,
 			justifyContent: 'center',
-			backgroundOpacity: 0
-		} ).add(
-			new ThreeMeshUI.Text( {
-				fontSize: 0.04,
-				content: 'Select a keyboard layout :'
-			} )
-		),
+			backgroundOpacity: 0,
+			fontSize: 0.04,
+			textContent: 'Select a keyboard layout :'
+		} ),
 
 		new ThreeMeshUI.Block( {
 			height: 0.075,
 			width: 1,
-			offset: 0,
-			contentDirection: 'row',
+			// offset: 0,
+			flexDirection: 'row',
 			justifyContent: 'center',
 			backgroundOpacity: 0
 		} ).add(
@@ -383,8 +325,8 @@ function makeUI() {
 		new ThreeMeshUI.Block( {
 			height: 0.075,
 			width: 1,
-			offset: 0,
-			contentDirection: 'row',
+			// offset: 0,
+			flexDirection: 'row',
 			justifyContent: 'center',
 			backgroundOpacity: 0
 		} ).add(
@@ -396,7 +338,9 @@ function makeUI() {
 
 	layoutOptions.position.set( 0, 0.2, 0 );
 	container.add( layoutOptions );
-	objsToTest.push( layoutOptions );
+
+	// Set English button as selected from the start
+	makeKeyboard();
 
 }
 
@@ -416,10 +360,16 @@ mouse and touch interaction, and VR controllers pointing rays.
 
 */
 
-function makeKeyboard( language ) {
+function makeKeyboard( layout = null ) {
+
+	keyboard = new KeyboardElement( {
+		// the default layout to display
+		layout : layout ? layout : QwertyEnglish,
+		// can detect automatically which layout to use
+		autoDetectLayout : !layout,
+		// between this list of keyboard layouts
+		availableLayouts : [QwertyEnglish,AzertyFrench,QwertzDeutsch, QwertyGreek, QwertyNordic, QwertyRussian],
 
-	keyboard = new ThreeMeshUI.Keyboard( {
-		language: language,
 		fontFamily: FontJSON,
 		fontTexture: FontImage,
 		fontSize: 0.035, // fontSize will propagate to the keys blocks
@@ -427,96 +377,48 @@ function makeKeyboard( language ) {
 		backgroundOpacity: 1,
 		backspaceTexture: Backspace,
 		shiftTexture: Shift,
-		enterTexture: Enter
+		enterTexture: Enter,
+		keyOptions : {
+			color: 0xffffff,
+			backgroundColor: colors.button,
+			backgroundOpacity:1,
+			borderRadius: 0.01,
+			offset: 0.0085
+		}
 	} );
 
 	keyboard.position.set( 0, 0.88, -1 );
 	keyboard.rotation.x = -0.55;
-	scene.add( keyboard );
-
-	//
-
-	keyboard.keys.forEach( ( key ) => {
-
-		objsToTest.push( key );
-
-		key.setupState( {
-			state: 'idle',
-			attributes: {
-				offset: 0,
-				backgroundColor: new THREE.Color( colors.button ),
-				backgroundOpacity: 1
-			}
-		} );
-
-		key.setupState( {
-			state: 'hovered',
-			attributes: {
-				offset: 0,
-				backgroundColor: new THREE.Color( colors.hovered ),
-				backgroundOpacity: 1
-			}
-		} );
-
-		key.setupState( {
-			state: 'selected',
-			attributes: {
-				offset: -0.009,
-				backgroundColor: new THREE.Color( colors.selected ),
-				backgroundOpacity: 1
-			},
-			// triggered when the user clicked on a keyboard's key
-			onSet: () => {
-
-				// if the key have a command (eg: 'backspace', 'switch', 'enter'...)
-				// special actions are taken
-				if ( key.info.command ) {
-
-					switch ( key.info.command ) {
-
-						// switch between panels
-						case 'switch' :
-							keyboard.setNextPanel();
-							break;
-
-						// switch between panel charsets (eg: russian/english)
-						case 'switch-set' :
-							keyboard.setNextCharset();
-							break;
 
-						case 'enter' :
-							userText.set( { content: userText.content + '\n' } );
-							break;
+	keyboard.interactiveListener.bindText( userText )
 
-						case 'space' :
-							userText.set( { content: userText.content + ' ' } );
-							break;
-
-						case 'backspace' :
-							if ( !userText.content.length ) break;
-							userText.set( {
-								content: userText.content.substring( 0, userText.content.length - 1 ) || ''
-							} );
-							break;
-
-						case 'shift' :
-							keyboard.toggleCase();
-							break;
+	scene.add( keyboard );
 
-					}
+	interactiveRaycaster.addObject( keyboard );
 
-					// print a glyph, if any
-				} else if ( key.info.input ) {
+	// Report physicalKeyboard even to virtual keyboard
+	keyboardSync = new KeyboardsSynchronizerBehavior( keyboard );
+	keyboardSync.attach();
 
-					userText.set( { content: userText.content + key.info.input } );
 
-				}
+	// styles for keys
+	keyboard.keys.forEach( ( key ) => {
 
+		new SimpleStateBehavior(key,{
+			hover: {
+				backgroundColor: colors.hovered,
+				backgroundOpacity: 1,
+			},
+			checked:{
+				backgroundColor: 0x00ff99
+			},
+			active: {
+				offset: 0.0025,
+				backgroundColor: colors.hovered,
 			}
-		} );
-
-	} );
+		});
 
+	});
 }
 
 //
@@ -533,141 +435,17 @@ function onWindowResize() {
 
 function loop() {
 
-	updateButtons();
-
 	// Don't forget, ThreeMeshUI must be updated manually.
 	// This has been introduced in version 3.0.0 in order
 	// to improve performance
 	ThreeMeshUI.update();
-
 	controls.update();
-	// stats.update();
-	renderer.render( scene, camera );
-
-}
-
-/*
-
-Called in the loop, get intersection with either the mouse or the VR controllers,
-then update the buttons states according to result.
+	interactiveRaycaster.update();
 
-As written above, three-mesh-ui provides only and strictly user interfaces, with tools to manage
-UI state (component.setupState and component.setState).
+	stats.update();
 
-Interacting with this UI must be done manually by the user, given the wide range of
-possibilities in this regard.
-
-*/
 
-function updateButtons() {
-
-	// Find closest intersecting object
-
-	let intersect;
-
-	if ( renderer.xr.isPresenting ) {
-
-		vrControl.setFromController( 0, raycaster.ray );
-
-		intersect = raycast();
-
-		if ( intersect ) console.log( intersect.point );
-
-		// Position the little white dot at the end of the controller pointing ray
-		if ( intersect ) vrControl.setPointerAt( 0, intersect.point );
-
-	} else if ( mouse.x !== null && mouse.y !== null ) {
-
-		raycaster.setFromCamera( mouse, camera );
-
-		intersect = raycast();
-
-	}
-
-	// Update targeted button state (if any)
-
-	if ( intersect && intersect.object.isUI ) {
-
-		if ( ( selectState && intersect.object.currentState === 'hovered' ) || touchState ) {
-
-			// Component.setState internally call component.set with the options you defined in component.setupState
-			if ( intersect.object.states[ 'selected' ] ) intersect.object.setState( 'selected' );
-
-		} else if ( !selectState && !touchState ) {
-
-			// Component.setState internally call component.set with the options you defined in component.setupState
-			if ( intersect.object.states[ 'hovered' ] ) intersect.object.setState( 'hovered' );
-
-		}
 
-	}
-
-	// Update non-targeted buttons state
-
-	objsToTest.forEach( ( obj ) => {
-
-		if ( ( !intersect || obj !== intersect.object ) && obj.isUI ) {
-
-			// Component.setState internally call component.set with the options you defined in component.setupState
-			if ( obj.states[ 'idle' ] ) obj.setState( 'idle' );
-
-		}
-
-	} );
-
-}
-
-//
-
-function raycast() {
-
-	return objsToTest.reduce( ( closestIntersection, obj ) => {
-
-		// keys in panels that are hidden are not tested
-		if ( !layoutOptions.getObjectById( obj.id ) &&
-			!keyboard.getObjectById( obj.id ) &&
-			intersectionRoom !== obj
-		) {
-
-			return closestIntersection;
-
-		}
-
-		const intersection = raycaster.intersectObject( obj, true );
-
-		// if intersection is an empty array, we skip
-		if ( !intersection[ 0 ] ) return closestIntersection;
-
-		// if this intersection is closer than any previous intersection, we keep it
-		if ( !closestIntersection || intersection[ 0 ].distance < closestIntersection.distance ) {
-
-			// Make sure to return the UI object, and not one of its children (text, frame...)
-			intersection[ 0 ].object = obj;
-
-			return intersection[ 0 ];
-
-		}
-
-		return closestIntersection;
-
-	}, null );
-
-}
-
-// Remove this ui component cleanly
-
-function clear( uiComponent ) {
-
-	scene.remove( uiComponent );
-
-	// We must call this method when removing a component,
-	// to make sure it's removed from the update registry.
-	uiComponent.clear();
-
-	uiComponent.traverse( ( child ) => {
-
-		if ( objsToTest.includes( child ) ) objsToTest.splice( objsToTest.indexOf( child ), 1 );
-
-	} );
+	renderer.render( scene, camera );
 
 }
diff --git a/examples/ex__keyboard_htm.js b/examples/ex__keyboard_htm.js
new file mode 100644
index 00000000..8720aa76
--- /dev/null
+++ b/examples/ex__keyboard_htm.js
@@ -0,0 +1,462 @@
+// xfg:title 			Keyboard HTM
+// xfg:category		extend
+// xfg:group			hypermesh
+
+/*
+
+ This example is an advanced demo.
+
+ For a better first step into this library, you should :
+ - check the tutorial at https://github.com/felixmariotto/three-mesh-ui/wiki/Getting-started
+ - consult more simple examples at https://three-mesh-ui.herokuapp.com/#basic_setup
+
+ */
+
+import * as THREE from 'three';
+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
+
+import ThreeMeshUI from 'three-mesh-ui';
+import ShadowedLight from './utils/ShadowedLight.js';
+
+import FontJSON from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.json';
+import FontImage from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.png';
+
+import Backspace from 'three-mesh-ui/examples/assets/backspace.png';
+import Enter from 'three-mesh-ui/examples/assets/enter.png';
+import Shift from 'three-mesh-ui/examples/assets/shift.png';
+import Stats from 'three/examples/jsm/libs/stats.module';
+import InteractiveRaycaster from 'three-mesh-ui/examples/interactive/InteractiveRaycaster';
+import InteractiveCursor from 'three-mesh-ui/examples/interactive/listeners/InteractiveCursor';
+import QwertyEnglish from 'three-mesh-ui/examples/elements/keyboard/keyboard-layouts/QwertyEnglish';
+import AzertyFrench from 'three-mesh-ui/examples/elements/keyboard/keyboard-layouts/AzertyFrench';
+import QwertzDeutsch from 'three-mesh-ui/examples/elements/keyboard/keyboard-layouts/QwertzDeutsch';
+import QwertyGreek from 'three-mesh-ui/examples/elements/keyboard/keyboard-layouts/QwertyGreek';
+import QwertyNordic from 'three-mesh-ui/examples/elements/keyboard/keyboard-layouts/QwertyNordic';
+import QwertyRussian from 'three-mesh-ui/examples/elements/keyboard/keyboard-layouts/QwertyRussian';
+import QwertySpanish from 'three-mesh-ui/examples/elements/keyboard/keyboard-layouts/QwertySpanish';
+import VRControl from 'three-mesh-ui/examples/controls/VRControl';
+import * as HyperThreeMesh from 'three-mesh-ui/examples/hyperthreemesh/HyperThreeMesh';
+import { _injectCSS } from 'three-mesh-ui/examples/_setup/Html';
+import PhysicalKeyboardFeederBehavior from 'three-mesh-ui/examples/behaviors/input/PhysicalKeyboardFeederBehavior';
+import KeyboardsSynchronizerBehavior from 'three-mesh-ui/examples/behaviors/input/KeyboardsSynchronizerBehavior';
+
+let scene,
+	camera,
+	renderer,
+	controls,
+	vrControl,
+	keyboard,
+	userText,
+	intersectionRoom,
+	layoutOptions,
+	interactiveRaycaster,
+	interactiveCursor,
+	stats,
+	keyboardSync;
+
+// Colors
+
+const colors = {
+	keyboardBack: 0x858585,
+	panelBack: 0x262626,
+	button: 0x363636,
+	hovered: 0x1c1c1c,
+	selected: 0x109c5d
+};
+
+//
+_injectCSS( `
+
+.layout-selector{
+	background-color: rgba(0,0,0,0.8);
+}
+.layout-selector:checked{
+	background-color: rgba(0,256,128,0.8);
+}
+
+keyboard panel{
+	border-radius : 0.0125rem;
+}
+
+keyboard key {
+	border-radius: 0.01rem;
+	background-color: rgba(0,0,0,0.9);
+	rx: 0.005rem;
+}
+keyboard key icon{
+	background-color: rgba(255,255,255,0.5);
+}
+
+keyboard key:hover {
+	background-color : rgba(32,32,32,0.5);
+	rx: 0.0085rem;
+}
+
+keyboard key:checked {
+	background-color : rgba(0,255,128,0.5);
+}
+
+keyboard key:checked:hover {
+	background-color : rgba(0,255,128,0.7);
+}
+
+keyboard key:active {
+	background-color : rgba(16,16,16,0.5);
+	rx: 0.0025rem;
+}
+
+keyboard key:active icon {
+	background-color : rgba(255,255,255,0.99);
+}
+
+keyboard key:checked icon {
+	background-color : rgba(255,255,255,0.99);
+}
+
+
+
+`)
+
+window.addEventListener( 'load', init );
+window.addEventListener( 'resize', onWindowResize );
+
+//////////////////
+// THREE.JS INIT
+//////////////////
+
+function init() {
+
+	scene = new THREE.Scene();
+	scene.background = new THREE.Color( 0x505050 );
+
+	camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
+
+	renderer = new THREE.WebGLRenderer( { antialias: true } );
+	renderer.setPixelRatio( window.devicePixelRatio );
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	renderer.outputEncoding = THREE.sRGBEncoding;
+	renderer.xr.enabled = true;
+	document.body.appendChild( VRButton.createButton( renderer ) );
+	document.body.appendChild( renderer.domElement );
+	renderer.shadowMap.enabled = true;
+
+	// STATS
+
+
+	stats = new Stats();
+	stats.dom.style.left = 'auto';
+	stats.dom.style.right = '0px';
+	document.body.appendChild( stats.dom );
+
+
+	// LIGHT
+
+	const light = ShadowedLight( {
+		z: 10,
+		width: 6,
+		bias: -0.0001
+	} );
+
+	const hemLight = new THREE.HemisphereLight( 0x808080, 0x606060 );
+
+	scene.add( light, hemLight );
+
+	// CONTROLLERS
+
+	controls = new OrbitControls( camera, renderer.domElement );
+	camera.position.set( 0, 1.6, 0 );
+	controls.target = new THREE.Vector3( 0, 1.2, -1 );
+	controls.update();
+
+	//
+
+	vrControl = new VRControl( renderer );
+	scene.add( vrControl.controllerGrips[ 0 ], vrControl.controllers[ 0 ] );
+
+	interactiveRaycaster = new InteractiveRaycaster( camera, scene, renderer, vrControl );
+
+	interactiveCursor = new InteractiveCursor( renderer.domElement );
+	interactiveRaycaster.addListener( interactiveCursor );
+
+	interactiveRaycaster.start();
+
+	// ROOM
+
+	const room = new THREE.LineSegments(
+		new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
+		new THREE.LineBasicMaterial( { color: 0x808080 } )
+	);
+
+	intersectionRoom = new THREE.Mesh(
+		new THREE.BoxGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
+		new THREE.MeshBasicMaterial( {
+			side : THREE.BackSide,
+			transparent: true,
+			opacity: 0
+		} )
+	);
+
+	scene.add( room, intersectionRoom );
+	// objsToTest.push( intersectionRoom );
+
+	// USER INTERFACE
+
+	makeUI();
+
+	// LOOP
+
+	renderer.setAnimationLoop( loop );
+
+	HyperThreeMesh.loadSheets();
+
+}
+
+//
+
+function makeUI() {
+
+	const container = new THREE.Group();
+	container.position.set( 0, 1.4, -1.2 );
+	container.rotation.x = -0.15;
+	scene.add( container );
+
+	//////////////
+	// TEXT PANEL
+	//////////////
+
+	const textPanel = HyperThreeMesh.createElement( 'div', {
+		fontFamily: FontJSON,
+		fontTexture: FontImage,
+		width: 1,
+		height: 0.32,
+		padding: 0.02,
+		backgroundColor: new THREE.Color( colors.panelBack ),
+		backgroundOpacity: 1
+	} );
+
+	textPanel.position.set( 0, -0.15, 0 );
+	container.add( textPanel );
+
+	//
+
+	const title = HyperThreeMesh.createElement( 'h3', {
+		width: 1,
+		height: 0.1,
+		justifyContent: 'center',
+		fontSize: 0.045,
+		textContent: 'Type some text on the keyboard'
+	} )
+
+	userText = HyperThreeMesh.createElement( 'p', {
+		width: 1,
+		// height: 0.4,
+		fontSize: 0.033,
+		padding: 0.02,
+		backgroundOpacity: 0,
+		textContent: ""
+	} );
+
+	const feeder = new PhysicalKeyboardFeederBehavior( userText );
+	feeder.attach();
+
+	textPanel.add( title, userText );
+
+	////////////////////////
+	// LAYOUT OPTIONS PANEL
+	////////////////////////
+
+	// BUTTONS
+
+	let layoutButtons = [
+		[ 'English', QwertyEnglish ],
+		[ 'Nordic', QwertyNordic ],
+		[ 'German', QwertzDeutsch ],
+		[ 'Spanish', QwertySpanish ],
+		[ 'French', AzertyFrench ],
+		[ 'Russian', QwertyRussian ],
+		[ 'Greek', QwertyGreek ]
+	];
+
+	layoutButtons = layoutButtons.map( ( options ) => {
+
+		const button = HyperThreeMesh.createElement( 'button', {
+			// height: 0.06,
+			width: 'auto',
+			padding : '0.01 0.05',
+			margin: 0.012,
+			justifyContent: 'center',
+			backgroundColor: new THREE.Color( colors.button ),
+			backgroundOpacity: 1,
+			fontSize: 0.035,
+			textContent: options[ 0 ]
+		} );
+		button.classList.add( 'layout-selector');
+
+
+		button.addEventListener( 'click' , () => {
+
+			if ( keyboard ) {
+
+				interactiveRaycaster.removeObject( keyboard );
+				keyboard.clear();
+
+				keyboardSync.detach();
+				keyboardSync = null;
+
+			}
+
+			const selectedButtons = HyperThreeMesh.querySelectorAll('.layout-selector:checked');
+			for ( let i = 0; i < selectedButtons.length; i++ ) {
+				const selectedButton = selectedButtons[ i ];
+				selectedButton.deactivatePseudoState('checked');
+			}
+
+			button.activatePseudoState('checked');
+			makeKeyboard( options[ 1 ] );
+
+		});
+
+		interactiveRaycaster.addObject( button );
+
+		return button;
+
+	} );
+
+	// CONTAINER
+
+	layoutOptions = HyperThreeMesh.createElement('div', {
+		fontFamily: FontJSON,
+		fontTexture: FontImage,
+		padding: 0.02,
+		width: 1,
+		// offset: 0,
+		backgroundColor: new THREE.Color( colors.panelBack ),
+		backgroundOpacity: 1
+	} ).add(
+		HyperThreeMesh.createElement( 'p', {
+			// offset: 0,
+			justifyContent: 'center',
+			backgroundOpacity: 0,
+			fontSize: 0.04,
+			textContent: 'Select a keyboard layout :'
+		} ),
+
+		HyperThreeMesh.createElement('div', {
+			height: 0.075,
+			width: 1,
+			// offset: 0,
+			flexDirection: 'row',
+			justifyContent: 'center',
+			backgroundOpacity: 0
+		} ).add(
+			layoutButtons[ 0 ],
+			layoutButtons[ 1 ],
+			layoutButtons[ 2 ],
+			layoutButtons[ 3 ]
+		),
+
+		HyperThreeMesh.createElement( 'div', {
+			height: 0.075,
+			width: 1,
+			// offset: 0,
+			flexDirection: 'row',
+			justifyContent: 'center',
+			backgroundOpacity: 0
+		} ).add(
+			layoutButtons[ 4 ],
+			layoutButtons[ 5 ],
+			layoutButtons[ 6 ]
+		)
+	);
+
+	layoutOptions.position.set( 0, 0.2, 0 );
+	container.add( layoutOptions );
+
+	// Set English button as selected from the start
+	makeKeyboard();
+
+}
+
+/*
+
+Create a keyboard UI with three-mesh-ui, and assign states to each keys.
+Three-mesh-ui strictly provides user interfaces, with tools to manage
+UI state (component.setupState and component.setState).
+
+It does not handle interacting with the UI. The reason for that is simple :
+with webXR, the number of way a mesh can be interacted had no limit. Therefore,
+this is left to the user. three-mesh-ui components are THREE.Object3Ds, so
+you might want to refer to three.js documentation to know how to interact with objects.
+
+If you want to get started quickly, just copy and paste this example, it manages
+mouse and touch interaction, and VR controllers pointing rays.
+
+*/
+
+function makeKeyboard( layout = null ) {
+
+	keyboard = HyperThreeMesh.createElement( 'keyboard', {
+		// the default layout to display
+		layout : layout ? layout : QwertyEnglish,
+		// can detect automatically which layout to use
+		autoDetectLayout : !layout,
+		// between this list of keyboard layouts
+		availableLayouts : [QwertyEnglish,AzertyFrench,QwertzDeutsch, QwertyGreek, QwertyNordic, QwertyRussian],
+
+		fontFamily: FontJSON,
+		fontTexture: FontImage,
+		fontSize: 0.035, // fontSize will propagate to the keys blocks
+		backgroundColor: new THREE.Color( colors.keyboardBack ),
+		backgroundOpacity: 1,
+		backspaceTexture: Backspace,
+		shiftTexture: Shift,
+		enterTexture: Enter
+	} );
+
+	keyboard.position.set( 0, 0.88, -1 );
+	keyboard.rotation.x = -0.55;
+
+	keyboard.interactiveListener.bindText( userText )
+
+	scene.add( keyboard );
+
+	window.keyboard = keyboard;
+
+	interactiveRaycaster.addObject( keyboard );
+
+	keyboardSync = new KeyboardsSynchronizerBehavior( keyboard );
+	keyboardSync.attach();
+
+}
+
+//
+
+function onWindowResize() {
+
+	camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+	renderer.setSize( window.innerWidth, window.innerHeight );
+
+}
+
+//
+
+function loop() {
+
+	// Don't forget, ThreeMeshUI must be updated manually.
+	// This has been introduced in version 3.0.0 in order
+	// to improve performance
+	ThreeMeshUI.update();
+	HyperThreeMesh.update();
+	controls.update();
+	interactiveRaycaster.update();
+
+	stats.update();
+
+
+
+	renderer.render( scene, camera );
+
+}
diff --git a/examples/ex__msdf_crumple.js b/examples/ex__msdf_crumple.js
index 5f8bfee7..942f41e6 100644
--- a/examples/ex__msdf_crumple.js
+++ b/examples/ex__msdf_crumple.js
@@ -1,13 +1,13 @@
+// xfg:title MSDF-Geometry alteration
+// xfg:category extend
+
 import * as THREE from 'three';
-import { AmbientLight, Color, DoubleSide, Mesh, MeshStandardMaterial, PlaneBufferGeometry, SpotLight, SpotLightHelper } from 'three';
+import { AmbientLight, DoubleSide, Mesh, MeshStandardMaterial, PlaneGeometry, SpotLight, SpotLightHelper } from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
 
 import ThreeMeshUI, { FontLibrary } from 'three-mesh-ui';
-
-import * as FontWeight from '../src/utils/font/FontWeight';
-import * as FontStyle from '../src/utils/font/FontStyle';
 import ROBOTO_ADJUSTMENT from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/adjustment';
 import MSDFToonMaterial from 'three-mesh-ui/examples/materials/msdf/MSDFToonMaterial';
 import MSDFDepthMaterial from '../src/font/msdf/materials/MSDFDepthMaterial';
@@ -31,15 +31,15 @@ async function preload() {
 
 		FontLibrary
 			.addFontFamily("Roboto")
-			.addVariant(FontWeight.NORMAL, FontStyle.NORMAL, "./assets/fonts/msdf/roboto/regular.json", "./assets/fonts/msdf/roboto/regular.png" )
-			.addVariant(FontWeight.BOLD, FontStyle.ITALIC, "./assets/fonts/msdf/roboto/bold-italic.json", "./assets/fonts/msdf/roboto/bold-italic.png" )
-			.addVariant(FontWeight.BOLD, FontStyle.NORMAL, "./assets/fonts/msdf/roboto/bold.json", "./assets/fonts/msdf/roboto/bold.png" )
-			.addVariant(FontWeight.NORMAL, FontStyle.ITALIC, "./assets/fonts/msdf/roboto/italic.json", "./assets/fonts/msdf/roboto/italic.png" ),
+			.addVariant("400", "normal", "./assets/fonts/msdf/roboto/regular.json", "./assets/fonts/msdf/roboto/regular.png" )
+			.addVariant("700", "italic", "./assets/fonts/msdf/roboto/bold-italic.json", "./assets/fonts/msdf/roboto/bold-italic.png" )
+			.addVariant("700", "normal", "./assets/fonts/msdf/roboto/bold.json", "./assets/fonts/msdf/roboto/bold.png" )
+			.addVariant("400", "italic", "./assets/fonts/msdf/roboto/italic.json", "./assets/fonts/msdf/roboto/italic.png" ),
 
 
 		FontLibrary
 				.addFontFamily("RobotoAltered")
-					.addVariant(FontWeight.BOLD, FontStyle.NORMAL, "./assets/fonts/msdf/roboto/bold.json", "./assets/fonts/msdf/roboto/bold.png" )
+					.addVariant("700", "normal", "./assets/fonts/msdf/roboto/bold.json", "./assets/fonts/msdf/roboto/bold.png" )
 
 	);
 
@@ -53,14 +53,14 @@ async function preload() {
 	const defaultGeometry = boldVariant.getGeometricGlyph;
 
 	// And let's re define what will happend when running its factory method
-	boldVariant.getGeometricGlyph = function ( inline, segments = 1 ) {
+	boldVariant.getGeometricGlyph = function ( inline, element ) {
 
 		// let's get the default geometry
-		const characterGeometry = defaultGeometry( inline, segments );
+		const characterGeometry = defaultGeometry( inline, element );
 
 		// and now alter it
 		const frequency = 0.85; // Decrease this value to reduce the amount of vertices to be moved
-		const amplitudeMax = 0.15; // Decrease or increase this value to set the move offset maximum
+		const amplitudeMax = 0.25; // Decrease or increase this value to set the move offset maximum
 
 
 		// loop through each vertices
@@ -86,7 +86,7 @@ async function preload() {
 	}
 
 	// And why not setting the default material of this variant to-*TOon
-	boldVariant.fontMaterial = MSDFToonMaterial;
+	// boldVariant.fontMaterial = MSDFToonMaterial;
 
 
 	// adjust fonts
@@ -141,8 +141,8 @@ function init() {
 	spotLight.castShadow = true;
 
 	//Set up shadow properties for the light
-	spotLight.shadow.mapSize.width = 1024; // default
-	spotLight.shadow.mapSize.height = 1024; // default
+	spotLight.shadow.mapSize.width = 2048; // default
+	spotLight.shadow.mapSize.height = 2048; // default
 	spotLight.shadow.camera.near = 0.5; // default
 	spotLight.shadow.camera.far = 500; // default
 
@@ -164,7 +164,7 @@ function init() {
 	scene.add( room );
 
 	const wall = new Mesh(
-		new PlaneBufferGeometry(6,6,5,5),
+		new PlaneGeometry(6,6,5,5),
 		new MeshStandardMaterial( {color:0xffffff} )
 	);
 	wall.position.y = 3;
@@ -197,24 +197,28 @@ function makeTextPanel() {
 		backgroundOpacity: 0,
 	} );
 
-	container.frame.visible = false;
+	window.rootBlock = container;
+	// container.frame.visible = false;
 
 	container.position.set( 0, 2, -1.8 );
 	scene.add( container );
 
 	//
 	const text1 = new ThreeMeshUI.Text( {
-			content: 'Geometry',
+			textContent: 'Geometry',
 			fontWeight: '700',
-			fontColor: new Color(0x00ff99),
+			color: 0x00ff99,
 			fontSize: 0.7,
 			segments: 4,
 			letterSpacing: -0.08,
-			castShadow: true,
-			customDepthMaterial: new MSDFDepthMaterial({}),
-			side: DoubleSide
+			fontCastShadow: true,
+			fontMaterial : new MSDFToonMaterial({}),
+			fontCustomDepthMaterial: new MSDFDepthMaterial({}),
+			fontSide: DoubleSide
 		} );
 
+	window.textBlock = text1;
+
 	container.add(
 
 		text1,
@@ -237,39 +241,39 @@ function makeTextPanel() {
 
 	//
 
-	const infoBox = new ThreeMeshUI.Block( {
+	const infoBox = new ThreeMeshUI.Text( {
 		width: 2,
-		height: 0.175,
-		margin: 0.01,
+		margin: '0.2 0.01 0.01 0.01',
 		padding: 0.025,
 		textAlign: 'center',
-		side: DoubleSide,
-		castShadow: true
+		backgroundColor: 0x000000,
 	} );
 
 
-	infoBox.add( new ThreeMeshUI.Text( {
-		content: 'This example shows how to alter glyph ................... from',
+	infoBox.add( new ThreeMeshUI.Inline( {
+		textContent: 'This example shows how to alter glyph ................... from',
 		fontWeight: '700',
 	} ) );
 
-	infoBox.add( new ThreeMeshUI.Text( {
-		content: ' FontVariant.\n',
+	infoBox.add( new ThreeMeshUI.Inline( {
+		textContent: ' FontVariant.\n',
 		fontWeight: '700',
 		fontStyle: 'italic',
 	} ) );
 
-	infoBox.add( new ThreeMeshUI.Text( {
-		content: 'It also shows ',
+	infoBox.add( new ThreeMeshUI.Inline( {
+		textContent: 'It also shows ',
 		fontStyle: 'italic',
 		letterSpacing: 0.05
 	} ) );
 
-	infoBox.add( new ThreeMeshUI.Text( {
-		content: 'MSDFToonMaterial',
+	infoBox.add( new ThreeMeshUI.Inline( {
+		textContent: 'MSDFToonMaterial',
 		fontStyle: 'italic',
 		fontWeight: '700',
-		letterSpacing: 0.05
+		letterSpacing: 0.05,
+		color: 0x00ff99,
+		fontMaterial: new MSDFToonMaterial({})
 	} ) );
 
 	container2.add( infoBox );
@@ -289,16 +293,17 @@ function onWindowResize() {
 
 //
 
+// let speed = 0.005;
 let speed = 0.005;
 function loop() {
 
 	spotLight.target.position.x += speed;
 	spotLight.position.x += speed;
-	if( spotLight.target.position.x <= -1 ){
+	if( spotLight.target.position.x <= -1 ) {
 		spotLight.target.position.x = -1;
 		spotLight.position.x = -1;
 		speed*=-1;
-	}else if( spotLight.target.position.x >= 1 ){
+	} else if( spotLight.target.position.x >= 1 ) {
 		spotLight.target.position.x = 1;
 		spotLight.position.x = 1;
 		speed*=-1;
diff --git a/examples/ex__msdf_materials.js b/examples/ex__msdf_materials.js
index a3264fbd..b87b2b3e 100644
--- a/examples/ex__msdf_materials.js
+++ b/examples/ex__msdf_materials.js
@@ -1,5 +1,8 @@
+// xfg:title MSDF-Font Materials
+// xfg:category extend
+
 import * as THREE from 'three';
-import * as ThreeMeshUI from 'three-mesh-ui';
+import ThreeMeshUI from 'three-mesh-ui';
 
 import MSDFStandardMaterial from 'three-mesh-ui/examples/materials/msdf/MSDFStandardMaterial';
 import MSDFPhysicalMaterial from 'three-mesh-ui/examples/materials/msdf/MSDFPhysicalMaterial';
@@ -7,7 +10,7 @@ import MSDFLambertMaterial from 'three-mesh-ui/examples/materials/msdf/MSDFLambe
 import MSDFVertexMaterialExample from 'three-mesh-ui/examples/materials/msdf/MSDFVertexMaterialExample';
 
 
-const fontColor = new THREE.Color(0xff9900);
+const color = new THREE.Color(0xff9900);
 // this will be updated on each frame
 let vertexMaterial;
 
@@ -18,14 +21,13 @@ function example() {
 	const container = new ThreeMeshUI.Block({
 		width: 3.2,
 		height: 0.2,
-		backgroundOpacity: 0,
-		interLine:-0.05,
 		justifyContent: 'center',
 		alignItems: 'center',
-		fontColor,
+		color: color,
 		fontFamily: RobotoFontFamily,
-		fontWeight: ThreeMeshUI.FontWeight.BOLD,
+		fontWeight: "bold",
 		fontSize: 0.25,
+		lineHeight: 0.9
 	});
 
 	container.position.set( 0, 1.25, -0.8 );
@@ -36,20 +38,20 @@ function example() {
 
 
 	// default material provided by three-mesh-ui
-	const defaultText = new ThreeMeshUI.Text({content:"FontMaterial(default)\n"});
+	const defaultText = new ThreeMeshUI.Text({textContent:"FontMaterial(default)"});
 
 	// StandardMaterial from three-mesh-ui/examples/materials/mdsf/
-	const standardText = new ThreeMeshUI.Text({content:"MSDFStandardMaterial\n"});
-	standardText.material = new MSDFStandardMaterial({ /* material options */ });
+	const standardText = new ThreeMeshUI.Text({textContent:"MSDFStandardMaterial"});
+	standardText.fontMaterial = new MSDFStandardMaterial({ /* material options */ });
 
 	// LambertMaterial from three-mesh-ui/examples/materials/mdsf/
-	const lambertText = new ThreeMeshUI.Text({content:"MSDFLambertMaterial\n"});
-	lambertText.material = new MSDFLambertMaterial({ /* material options */ });
+	const lambertText = new ThreeMeshUI.Text({textContent:"MSDFLambertMaterial"});
+	lambertText.fontMaterial = new MSDFLambertMaterial({ /* material options */ });
 
 
 	// PhysicalMaterial from three-mesh-ui/examples/materials/mdsf/
-	const physicalText = new ThreeMeshUI.Text({content:"MSDFPhysicalMaterial\n",fontColor: new THREE.Color(0xffffff)});
-	physicalText.material = new MSDFPhysicalMaterial({
+	const physicalText = new ThreeMeshUI.Text({textContent:"MSDFPhysicalMaterial",color: new THREE.Color(0xffffff)});
+	physicalText.fontMaterial = new MSDFPhysicalMaterial({
 		color: 0xffffff,
 		transmission: 1,
 		opacity: 1,
@@ -61,27 +63,27 @@ function example() {
 
 	// WireframeProperty - When using three materials, you can then access to their properties such as wireframe
 	// Note that segments are increased to 12 instead of 1(default) - Showing more wireframe edges
-	const wireText = new ThreeMeshUI.Text({content:"WireframeProperty\n", segments:12});
-	wireText.material = new MSDFStandardMaterial({wireframe:true});
+	const wireText = new ThreeMeshUI.Text({textContent:"WireframeProperty", segments:12});
+	wireText.fontMaterial = new MSDFStandardMaterial({wireframe:true});
 
 	// VertexShader example from three-mesh-ui/examples/materials/mdsf/
 	// Note that segments are increased to 12 instead of 1(default) - Smoothing triangles deformations
-	const vertexText = new ThreeMeshUI.Text({content:"VertexShaderExample\n", segments:12});
-	vertexText.material = new MSDFVertexMaterialExample();
+	const vertexText = new ThreeMeshUI.Text({textContent:"VertexShaderExample", segments:12});
+	vertexText.fontMaterial = new MSDFVertexMaterialExample();
 	// set the vertexMaterial in this case, to access it during render update
-	vertexMaterial = vertexText.material;
+	vertexMaterial = vertexText.fontMaterial;
 
 	// Mixed Material - three-mesh-ui provides a way to provide a compatibility
 	// Preventing you to create a Material class such as showed above
-	const mixedText = new ThreeMeshUI.Text({content:"Mixed class .from()", fontSize:0.2});
+	const mixedText = new ThreeMeshUI.Text({textContent:"Mixed class .from()", fontSize:0.2});
 
 	// Pass a three material class to MSDFFontMaterialUtils.from()
 	const customMaterialClass = ThreeMeshUI.MSDFFontMaterialUtils.from(THREE.MeshStandardMaterial);
 	// It returns a mixined class that might be compatible to MSDF material (within limitation)
-	mixedText.material = new customMaterialClass();
+	mixedText.fontMaterial = new customMaterialClass();
 
 	// And we can now use onBeforeCompile to customize its shader
-	mixedText.material.onBeforeCompile = ( shader) => {
+	mixedText.fontMaterial.onBeforeCompile = ( shader) => {
 		console.log( "this is the shader you can customize", shader);
 		console.log( "it already has the msdf chunks applyied on it");
 	}
@@ -158,15 +160,23 @@ function vertexShaderUpdate() {
  * Not really related to the example itself : Creating three renderer, scene, lights, etc...
  **********************************************************************************************************************/
 
-import { exampleAddUpdate, exampleThreeSetup } from 'three-mesh-ui/examples/_setup/ThreeSetup';
+import { exampleAddResizer, exampleAddUpdate, exampleThreeSetup } from 'three-mesh-ui/examples/_setup/ThreeSetup';
 import { exampleThreePointLight, rollPointLightUpdate } from 'three-mesh-ui/examples/_setup/ThreePointLight';
 import { exampleThreeCube, rollCubeUpdate } from 'three-mesh-ui/examples/_setup/ThreeCube';
-import { exampleFontPreloadAll } from 'three-mesh-ui/examples/_setup/RobotoFont';
+import { exampleFontPreloadRoboto } from 'three-mesh-ui/examples/_setup/RobotoFont';
+import { exampleRoomVR } from 'three-mesh-ui/examples/_setup/RoomVR';
+import { exampleCameraPerspective, exampleCameraPerspectiveResize } from 'three-mesh-ui/examples/_setup/CameraPerspective';
 
 /* eslint-disable no-unused-vars */
 
 // building three setup
-const { scene, camera, renderer, controls, stats } = exampleThreeSetup();
+const { camera } = exampleCameraPerspective();
+exampleAddResizer( exampleCameraPerspectiveResize );
+
+
+const { scene, renderer, controls, stats } = exampleThreeSetup( camera );
+
+const { roomVR } = exampleRoomVR( scene );
 
 // building pointLight
 const {pointLightContainer, pointLight, pointLightHelper} = exampleThreePointLight(scene);
@@ -179,5 +189,5 @@ const cube = exampleThreeCube( scene );
 exampleAddUpdate( rollCubeUpdate );
 
 // preload fonts and run example() after
-const RobotoFontFamily = exampleFontPreloadAll( example );
+const RobotoFontFamily = exampleFontPreloadRoboto( example );
 
diff --git a/examples/ex__msdf_shadows.js b/examples/ex__msdf_shadows.js
index 86b7be0d..5b347313 100644
--- a/examples/ex__msdf_shadows.js
+++ b/examples/ex__msdf_shadows.js
@@ -1,5 +1,8 @@
+// xfg:title MSDF-Font shadows
+// xfg:category practice
+
 import * as THREE from 'three';
-import { DoubleSide, Mesh, MeshStandardMaterial, PlaneBufferGeometry, PointLight, SpotLight, SpotLightHelper } from 'three';
+import { DoubleSide, Mesh, MeshStandardMaterial, PlaneGeometry, PointLight, SpotLight, SpotLightHelper } from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
@@ -74,7 +77,7 @@ function init() {
 	scene.add( room );
 
 	const floor = new Mesh(
-		new PlaneBufferGeometry(6,6,5,5),
+		new PlaneGeometry(6,6,5,5),
 		new MeshStandardMaterial( {color:0xffffff} )
 	);
 	floor.rotation.x = - Math.PI / 2;
@@ -129,10 +132,9 @@ function makeTextPanel() {
 		padding: 0.05,
 		backgroundColor: new THREE.Color( 0x121212 ),
 		backgroundOpacity: 0,
-		interLine:0,
 		justifyContent: 'center',
 		alignItems: 'center',
-		// fontColor: new THREE.Color( 0xFF9900 ),
+		// color: new THREE.Color( 0xFF9900 ),
 		fontFamily: FontJSON,
 		fontTexture: FontImage,
 		fontSize: 0.25,
@@ -147,16 +149,16 @@ function makeTextPanel() {
 	// outerContainer.frame.visible = false;
 
 
-	const defaultText = new ThreeMeshUI.Text({content:"FontMaterial(default)\n", fontColor: new THREE.Color(0x0099ff), castShadow:true, side:DoubleSide});
-	const defaultTextInverted = new ThreeMeshUI.Text({content:"FontMaterial(default)\n", fontColor: new THREE.Color(0x0099ff), castShadow:true, side:DoubleSide});
+	const defaultText = new ThreeMeshUI.Text({textContent:"FontMaterial(default)", color: new THREE.Color(0x0099ff), fontCastShadow:true, fontSide:DoubleSide});
+	const defaultTextInverted = new ThreeMeshUI.Text({textContent:"FontMaterial(default)", color: new THREE.Color(0x0099ff), fontCastShadow:true, fontSide:DoubleSide});
 
-	const standardText = new ThreeMeshUI.Text({content:"MSDFStandardMaterial\n", fontColor: new THREE.Color(0x0099ff).convertSRGBToLinear(), castShadow:true, side:DoubleSide});
-	standardText.material = new MSDFStandardMaterial({});
-	standardText.customDepthMaterial =  new MSDFDepthMaterial({});
+	const standardText = new ThreeMeshUI.Text({textContent:"MSDFStandardMaterial", color: new THREE.Color(0x0099ff).convertSRGBToLinear(), fontCastShadow:true, fontSide:DoubleSide});
+	standardText.fontMaterial = new MSDFStandardMaterial({});
+	standardText.fontCustomDepthMaterial =  new MSDFDepthMaterial({});
 
-	const standardTextInverted = new ThreeMeshUI.Text({content:"MSDFStandardMaterial\n", fontColor: new THREE.Color(0x99ff00).convertSRGBToLinear(), invertAlpha: true, castShadow:true, side:DoubleSide});
-	standardTextInverted.material = new MSDFStandardMaterial({});
-	standardTextInverted.customDepthMaterial =  new MSDFDepthMaterial({});
+	const standardTextInverted = new ThreeMeshUI.Text({textContent:"MSDFStandardMaterial", color: new THREE.Color(0x99ff00).convertSRGBToLinear(), invertAlpha: true, fontCastShadow:true, fontSide:DoubleSide});
+	standardTextInverted.fontMaterial = new MSDFStandardMaterial({});
+	standardTextInverted.fontCustomDepthMaterial =  new MSDFDepthMaterial({});
 
 	outerContainer.add( defaultText, defaultTextInverted, standardText, standardTextInverted );
 
diff --git a/examples/ex__msdf_text.js b/examples/ex__msdf_text.js
index e8b6c4fb..f723c92a 100644
--- a/examples/ex__msdf_text.js
+++ b/examples/ex__msdf_text.js
@@ -3,24 +3,122 @@ import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
 
-import ThreeMeshUI from 'three-mesh-ui';
+import ThreeMeshUI, { MSDFFontMaterialUtils, ShaderChunkUI } from 'three-mesh-ui';
 
 import FontJSON from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.json';
 import FontImage from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.png';
+import * as HyperThreeMesh from 'three-mesh-ui/examples/hyperthreemesh/HyperThreeMesh';
+
+import VRControl from 'three-mesh-ui/examples/controls/VRControl';
+import InteractiveRaycaster from 'three-mesh-ui/examples/interactive/InteractiveRaycaster';
+import InteractiveCursor from 'three-mesh-ui/examples/interactive/listeners/InteractiveCursor';
+
+_injectCSS( `
+button[type="radio"]{
+
+}
+
+button[type="radio"] ascent {
+
+	width: 75%;
+	height: 75%;
+	border-radius:50rem;
+	border-color: #FFFFFF;
+	background-color: rgba(0,0,0,0.05);
+
+}
+
+button[type="radio"]:disabled {
+
+	color: rgba( 255,255,255,0.5);
+
+}
+
+button[type="radio"]:disabled ascent {
+
+	border-color: rgba( 128,128,128,0.5);
+
+}
+
+button[type="radio"]:disabled:hover ascent {
+
+	rx : 0.015rem;
+
+}
+
+button[type="radio"]:active ascent {
+
+	rx : 0.01rem;
+
+}
+
+button[type="radio"]:checked ascent {
+
+	background-color : rgba(0,225,128,.85);
+
+}
+
+button[type="radio"]:checked:hover ascent {
+
+	background-color : rgba(0,225,128,.99);
+
+}
+
+button[type="toggle"]{
+
+	border-radius: 0.02rem;
+
+}
+
+button[type="toggle"] ascent {
+
+	width: 75%;
+	height: 75%;
+	background-color : rgba(0,0,0,0.05);
+	border-width: 0.008rem;
+	border-color: rgba(255,255,255,.9);
+
+}
+
+button[type="toggle"]:disabled {
+
+	color: rgba( 255,255,255,0.5);
+
+}
+
+button[type="toggle"]:disabled ascent {
+
+	border-color: rgba( 128,128,128,0.5);
+
+}
+
+
+button[type="toggle"]:checked ascent {
+
+	background-color : rgba(0,225,128,.85);
+
+}
+
+button[type="toggle"]:checked:hover ascent {
+
+background-color : rgba(0,225,128,.99);
+
+}
+
+`)
+
 
 const WIDTH = window.innerWidth;
 const HEIGHT = window.innerHeight;
 
-let scene, camera, renderer, controls;
+let scene, camera, renderer, controls, interactiveRaycaster, text;
 
 //
 
-window.addEventListener( 'load', init );
-window.addEventListener( 'resize', onWindowResize );
 
 //
 
-function init() {
+function example() {
 
 	scene = new THREE.Scene();
 	scene.background = new THREE.Color( 0x505050 );
@@ -48,27 +146,48 @@ function init() {
 
 	scene.add( room );
 
+	////////////////
+	// Controllers
+	////////////////
+
+	const vrControl = VRControl( renderer );
+
+	scene.add( vrControl.controllerGrips[ 0 ], vrControl.controllers[ 0 ] );
+
+	interactiveRaycaster = new InteractiveRaycaster( camera, scene, renderer, vrControl );
+	interactiveRaycaster.start();
+
+	const interactiveCursor = new InteractiveCursor( renderer.domElement, 'pointer' );
+	interactiveRaycaster.addListener( interactiveCursor );
+
+
 	// TEXT PANEL
 
 	makeTextPanel();
 
 	//
 
+	HyperThreeMesh.loadSheets();
+
 	renderer.setAnimationLoop( loop );
 
+	window.addEventListener( 'resize', onWindowResize );
+
+
 }
 
 //
 
 function makeTextPanel() {
 
-	const container = new ThreeMeshUI.Block( {
+	const container = new HyperThreeMesh.createElement( 'div', {
 		padding: 0.05,
 		textType: 'MSDF',
 		fontFamily: FontJSON,
 		fontTexture: FontImage,
-		fontColor: new THREE.Color( 0xabf7bf ),
-		fontOpacity: 0.9 // 0 is invisible, 1 is opaque
+		flexDirection: 'row',
+		height: 1.7
+
 	} );
 
 	container.position.set( 0, 1, -1.8 );
@@ -77,50 +196,197 @@ function makeTextPanel() {
 
 	//
 
-	const bigTextContainer = new ThreeMeshUI.Block( {
+	const bigTextContainer = HyperThreeMesh.createElement( 'p', {
 		padding: 0.03,
+		width: 1.2,
 		margin: 0.03,
-		width: 1.5,
-		height: 1.2,
 		justifyContent: 'center',
 		textAlign: 'justify-left',
-		backgroundOpacity: 0,
-		fontSize: 0.033
+		fontSize: 0.033,
+		color: 0xabf7bf,
+		// color: 0xffffff,
+		backgroundColor: 0x000000,
+		backgroundOpacity: 0.5,
+		fontOpacity: 0.9 // 0 is invisible, 1 is opaque
 	} );
 
 	bigTextContainer.add(
-		new ThreeMeshUI.Text( {
-			content: `"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."\n\n`,
+		HyperThreeMesh.createElement( 'span', {
+			textContent: `"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."`,
 
 		} ),
-		new ThreeMeshUI.Text( {
-			content: `"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"\n\n`,
+		HyperThreeMesh.createElement( 'span', {
+			textContent: `"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"`,
 
 		} ),
-		new ThreeMeshUI.Text( {
-			content: `At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."`,
+		HyperThreeMesh.createElement( 'span', {
+			textContent: `At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."`,
 		} )
 	);
 
-	//
+	text = bigTextContainer;
 
-	const titleContainer = new ThreeMeshUI.Block( {
-		width: 0.9,
-		height: 0.25,
-		padding: 0.04,
+	const textOptions = makeFontOptions();
+	const bgOptions = makeBackOptions();
+
+
+	container.add( textOptions, bigTextContainer, bgOptions );
+
+}
+
+function makeFontOptions() {
+
+	const textOptions = new HyperThreeMesh.createElement( 'div', {
+		padding: 0.03,
+		width: 0.55,
 		margin: 0.03,
-		backgroundOpacity: 0
-	} ).add(
-		new ThreeMeshUI.Text( {
-			content: 'Do you need to render a big text ?',
-			fontSize: 0.07
-		} )
+		flexDirection: 'column',
+		justifyContent: 'center',
+		textAlign: 'justify-left',
+		fontSize: 0.055,
+		lineHeight: 1.5,
+		color: 0xffffff,
+		backgroundColor: 0x000000,
+		backgroundOpacity: 0.5,
+		fontOpacity: 1 // 0 is invisible, 1 is opaque
+	} );
+
+	const fontTitle = HyperThreeMesh.createElement('h1',{
+		textContent:'Font options',
+		width: 'auto', marginBottom: 0.025,
+		fontSize:0.07, lineHeight:1, borderColor: 0xffffff, borderBottomWidth:0.008, backgroundColor: 0x000000, backgroundOpacity: 0.001});
+
+	const fontSmooth = HyperThreeMesh.createElement('toggle', {group:'fontSmooth', value:'antialiased', textContent:'fontSmooth'});
+	const letterSpacing = HyperThreeMesh.createElement('toggle', {group:'letterSpacing', value:0.075, textContent:'letterSpaced'});
+
+	const fontColor1 = HyperThreeMesh.createElement('radio', {group:'fontOpacity',value:1,textContent:'Opacity 1.0', marginTop: 0.025});
+	const fontColor075 = HyperThreeMesh.createElement('radio', {group:'fontOpacity',value:0.75,textContent:'Opacity 0.75'});
+	const fontColor05 = HyperThreeMesh.createElement('radio', {group:'fontOpacity',value:0.5,textContent:'Opacity 0.5'});
+
+	const fontColorBright = HyperThreeMesh.createElement('radio', {group:'color',value:0xffffff,textContent:"Bright", marginTop: 0.025});
+	const fontColorGreen = HyperThreeMesh.createElement('radio', {group:'color',value:0x00ff00,textContent:"Green"});
+	const fontColorLightGreen = HyperThreeMesh.createElement('radio', {group:'color',value:0xabf7bf,textContent:"Light green"});
+
+	const matDef = HyperThreeMesh.createElement( 'radio', {group:'material', value:"default", textContent: "Default material", marginTop: 0.025});
+	const matBas = HyperThreeMesh.createElement( 'radio', {group:'material', value:"basic", textContent: "Basic material"});
+	const matPla = HyperThreeMesh.createElement( 'radio', {group:'material', value:"plain", textContent: "Plain material"});
+	const matDeb = HyperThreeMesh.createElement( 'radio', {group:'material', value:"debug", textContent: "Debug material"});
+
+
+	textOptions.add(
+		fontTitle,
+		fontSmooth,
+		letterSpacing,
+		fontColor1, fontColor075, fontColor05 ,
+		fontColorBright, fontColorGreen, fontColorLightGreen,
+		matDef, matBas, matPla, matDeb,
 	);
 
-	//
+	interactiveRaycaster.addObject(
+		fontSmooth,
+		letterSpacing,
+		fontColor1, fontColor075, fontColor05 ,
+		fontColorBright, fontColorGreen, fontColorLightGreen,
+		matDef, matBas, matPla, matDeb,
+	)
+
+	const materialDefault = new MSDFFontMaterial({});
+	const materialBasic = new MSDFBasicMaterial({});
+	const materialDebug = new FontMaterialDebugger({});
+	const materialPlain = new FontMaterialPlain({});
+
+
+	for ( const obj of textOptions.children ) {
+		obj.addEventListener('change', (event)=>{
+
+			const option = event.target;
+
+			switch ( option._group._name ) {
+
+				case 'fontSmooth':
+					text.set({fontSmooth: option.checked ? 'none' : 'antialiased'});
+					break;
+
+				case 'letterSpacing':
+					text.set({letterSpacing: option.checked ? option.value : 0});
+					break;
+
+				case 'material':
+					if( option.value === 'default') {
+						text.fontMaterial = materialDefault;
+					}else if( option.value === 'basic' ) {
+						text.fontMaterial = materialBasic;
+					}
+					else if( option.value === 'plain' ) {
+						text.fontMaterial = materialPlain;
+					}
+					else {
+						text.fontMaterial = materialDebug;
+					}
+					break;
+
+				default:
+					text.set({[option._group._name]:option.value})
+			}
+
+		})
+	}
+
+	return textOptions;
+}
+
+function makeBackOptions() {
+
+	const backOptions = new HyperThreeMesh.createElement( 'div', {
+		padding: 0.03,
+		width: 0.55,
+		margin: 0.03,
+		flexDirection: 'column',
+		justifyContent: 'center',
+		textAlign: 'justify-left',
+		fontSize: 0.055,
+		lineHeight: 1.5,
+		color: 0xffffff,
+		backgroundColor: 0x000000,
+		backgroundOpacity: 0.5,
+		fontOpacity: 1 // 0 is invisible, 1 is opaque
+	} );
+
+	const fontTitle = HyperThreeMesh.createElement('h1',{
+		textContent:'BG options',
+		width: 'auto', marginBottom: 0.025,
+		fontSize:0.07, lineHeight:1, borderColor: 0xffffff, borderBottomWidth:0.008, backgroundColor: 0x000000, backgroundOpacity: 0.001});
+
+	const fontColor1 = HyperThreeMesh.createElement('radio', {group:'backgroundOpacity',value:1,textContent:'Opacity 1.0', marginTop: 0.025});
+	const fontColor075 = HyperThreeMesh.createElement('radio', {group:'backgroundOpacity',value:0.75,textContent:'Opacity 0.75'});
+	const fontColor05 = HyperThreeMesh.createElement('radio', {group:'backgroundOpacity',value:0.5,textContent:'Opacity 0.5'});
+	const fontColor0 = HyperThreeMesh.createElement('radio', {group:'backgroundOpacity',value:0,textContent:'Opacity 0'});
+
+	backOptions.add(
+		fontTitle,
+		fontColor1, fontColor075, fontColor05, fontColor0
+	);
+
+	interactiveRaycaster.addObject(
+		fontColor1, fontColor075, fontColor05, fontColor0
+	)
+
 
-	container.add( titleContainer, bigTextContainer );
+	for ( const obj of backOptions.children ) {
+		obj.addEventListener('change', (event)=>{
 
+			const option = event.target;
+
+			switch ( option._group._name ) {
+
+				default:
+					text.set({[option._group._name]:option.value})
+			}
+
+		})
+	}
+
+	return backOptions;
 }
 
 //
@@ -142,7 +408,139 @@ function loop() {
 	// to improve performance
 	ThreeMeshUI.update();
 
+	HyperThreeMesh.update();
+
+	interactiveRaycaster.update();
+
 	controls.update();
 	renderer.render( scene, camera );
 
 }
+
+import { exampleFontPreloadRoboto } from 'three-mesh-ui/examples/_setup/RobotoFont';
+import { _injectCSS } from 'three-mesh-ui/examples/_setup/Html';
+import MSDFFontMaterial from '../src/font/msdf/materials/MSDFFontMaterial';
+import MSDFBasicMaterial from 'three-mesh-ui/examples/materials/msdf/MSDFBasicMaterial';
+import { MeshBasicMaterial } from 'three';
+exampleFontPreloadRoboto( example );
+
+class FontMaterialDebugger extends MeshBasicMaterial {
+
+	/**
+	 * This static method is mandatory for extending ThreeMeshUI.MSDFFontMaterial
+	 * It will provide a transfer description for properties from ThreeMeshUI.Text to THREE.Material
+	 * @see {MSDFFontMaterialUtils.mediation}
+	 * @override
+	 * @returns {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+	 */
+	static get mediation() {
+
+		return MSDFFontMaterialUtils.mediation;
+
+	}
+
+
+	constructor( options = {} ) {
+
+		// be sure transparent and alphaTest are set
+		MSDFFontMaterialUtils.ensureMaterialOptions( options );
+
+		// build this material
+		super( options );
+
+		// ensure this material support webgl preprocessors
+		MSDFFontMaterialUtils.ensureDefines( this );
+
+		// ensure this material has the proper userData properties (api for uniforms)
+		MSDFFontMaterialUtils.ensureUserData( this, options );
+
+		// override the shaders
+		this.onBeforeCompile = shader => {
+
+			// links this material userDatas with its uniforms
+			MSDFFontMaterialUtils.bindUniformsWithUserData( shader, this );
+
+			// default vertex shader
+			MSDFFontMaterialUtils.injectVertexShaderChunks( shader );
+
+			shader.fragmentShader = shader.fragmentShader.replace(
+				'#include <uv_pars_fragment>',
+				'#include <uv_pars_fragment>\n' + ShaderChunkUI.msdfAlphaglyphParsFragmentGlsl
+			);
+
+			// fragment chunks
+			shader.fragmentShader = shader.fragmentShader.replace(
+				'#include <alphamap_fragment>',
+				ShaderChunkUI.msdfAlphaglyphFragmentGlsl + `
+				if( diffuseColor.a <= 0.02 ) {
+					diffuseColor = vec4(1.-diffuseColor.x,1.-diffuseColor.y,1.-diffuseColor.z,0.75);
+				}
+				#include <alphamap_fragment>
+`
+			);
+
+		};
+
+	}
+
+}
+
+
+class FontMaterialPlain extends MeshBasicMaterial {
+
+	/**
+	 * This static method is mandatory for extending ThreeMeshUI.MSDFFontMaterial
+	 * It will provide a transfer description for properties from ThreeMeshUI.Text to THREE.Material
+	 * @see {MSDFFontMaterialUtils.mediation}
+	 * @override
+	 * @returns {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+	 */
+	static get mediation() {
+
+		return MSDFFontMaterialUtils.mediation;
+
+	}
+
+
+	constructor( options = {} ) {
+
+		// be sure transparent and alphaTest are set
+		MSDFFontMaterialUtils.ensureMaterialOptions( options );
+
+		// build this material
+		super( options );
+
+		// ensure this material support webgl preprocessors
+		MSDFFontMaterialUtils.ensureDefines( this );
+
+		// ensure this material has the proper userData properties (api for uniforms)
+		MSDFFontMaterialUtils.ensureUserData( this, options );
+
+		// override the shaders
+		this.onBeforeCompile = shader => {
+
+			// links this material userDatas with its uniforms
+			MSDFFontMaterialUtils.bindUniformsWithUserData( shader, this );
+
+			// default vertex shader
+			MSDFFontMaterialUtils.injectVertexShaderChunks( shader );
+
+			shader.fragmentShader = shader.fragmentShader.replace(
+				'#include <uv_pars_fragment>',
+				'#include <uv_pars_fragment>\n' + ShaderChunkUI.msdfAlphaglyphParsFragmentGlsl
+			);
+
+			// fragment chunks
+			shader.fragmentShader = shader.fragmentShader.replace(
+				'#include <alphamap_fragment>',
+				ShaderChunkUI.msdfAlphaglyphFragmentGlsl + `
+				diffuseColor.a = opacity;
+				#include <alphamap_fragment>
+`
+			);
+
+		};
+
+	}
+
+}
diff --git a/examples/ex__onafterupdate.js b/examples/ex__onafterupdate.js
index 1cced57f..13d67db5 100644
--- a/examples/ex__onafterupdate.js
+++ b/examples/ex__onafterupdate.js
@@ -69,34 +69,36 @@ function makeTextPanel() {
 	const container = new ThreeMeshUI.Block( {
 		width: 1.2,
 		height: 0.5,
+		padding: 0.05,
 		justifyContent: 'center',
 		fontFamily: FontJSON,
-		fontTexture: FontImage
+		fontTexture: FontImage,
+		backgroundColor: 0x000000,
 	} );
 
 	container.position.set( 0, 1, -1.8 );
 	container.rotation.x = -0.55;
 	scene.add( container );
 
-	// onAfterUpdate can be set on any component ( Text, Block... ),
-	// and get called after any update to the component.
-
-	container.addAfterUpdate( function () {
-		container.frame.layers.set( count % 2 );
-	});
-
 	//
 
 	const text = new ThreeMeshUI.Text( {
-		content: 'onAfterUpdate get called after any update.\n\n',
+		textContent: 'onAfterUpdate get called after any update.\n\n',
 		fontSize: 0.055
 	} );
 
 	const counter = new ThreeMeshUI.Text( {
-		content: '0',
+		textContent: '0',
 		fontSize: 0.08
 	} );
 
+	// onAfterUpdate can be set on any component ( Text, Block... ),
+	// and get called after any update to the component.
+
+	counter.addAfterUpdate( function () {
+		container._backgroundMesh.layers.set( count % 2 );
+	});
+
 	container.add( text, counter );
 
 	// triggers updates to the component to test onAfterUpdate
@@ -104,7 +106,7 @@ function makeTextPanel() {
 	setInterval( () => {
 
 		count++;
-		counter.set( { content: String( count ) } );
+		counter.set( { textContent: String( count ) } );
 
 	}, 500 );
 
diff --git a/examples/ex__states_htm.js b/examples/ex__states_htm.js
new file mode 100644
index 00000000..0803c584
--- /dev/null
+++ b/examples/ex__states_htm.js
@@ -0,0 +1,316 @@
+// xfg:title States HTM
+// xfg:category extend
+
+import * as THREE from 'three';
+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
+
+import ThreeMeshUI from 'three-mesh-ui';
+
+import FontJSON from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.json';
+import FontImage from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.png';
+import Stats from 'three/examples/jsm/libs/stats.module';
+import * as HyperThreeMesh from 'three-mesh-ui/examples/hyperthreemesh/HyperThreeMesh';
+
+const WIDTH = window.innerWidth;
+const HEIGHT = window.innerHeight;
+
+let scene, camera, renderer, controls;
+
+const vrStyleSheet = document.createElement('style');
+vrStyleSheet.setAttribute('media','three-mesh-ui');
+vrStyleSheet.textContent = `
+
+:root{
+	width: auto;
+	padding: 0.2rem;
+	background-color: rgba( 0, 0, 0, 0 );
+	borderRadius: 0.01rem;
+	align-items: center;
+	flex-direction : row;
+	justify-content: center;
+}
+
+.item-container{
+	width: auto;
+	padding: 0.05rem;
+	flex-direction: column;
+	background-color : rgba(0,0,0,0);
+}
+
+.item {
+	width: 0.6rem;
+	height: 0.5rem;
+	margin: 0.02rem;
+	text-align: center;
+	align-items: center;
+	background-color: rgba(0,0,0,0);
+	flex-direction: column;
+}
+
+.item__title {
+	width: 0.6rem;
+	height: 0.08rem;
+	justify-content: center;
+	text-align: center;
+	height: 0.075;
+	background-color: rgba(128,128,128,0.2);
+}
+
+.item__inner-container {
+	flex-direction: row;
+	justify-content: space-evenly;
+	width: 0.55rem;
+	height: 0.4rem;
+	background-color: rgba(0,0,0,0);
+}
+
+.color-block{
+	width: 0.25rem;
+	height: 0.35rem;
+}
+
+.legend {
+	padding: 0.05rem;
+	margin: 0.05rem;
+	flex-direction: column;
+	background-color: rgba(0,0,0,0.25);
+	justify-content: space-between;
+	align-items: center;
+}
+
+.legend .bp-content {
+	height : 0.085rem;
+	justify-content: center;
+	align-items: center;
+	margin: 0.0125rem;
+	background-color: rgba(48,48,48,0.5);
+	color: rgba(150,150,150,1);
+	border-radius : 0.01rem;
+	padding-left : 0.02rem;
+}
+
+
+.legend .info-text{
+	margin-top: 0.05rem;
+	text-align: justify;
+  justify-content: end;
+  background-color: rgba( 0,0,0,0 );
+	font-size: 0.032rem;
+}
+
+
+
+
+@media ( max-width: 767px ){
+
+	:root{ width: 1rem; }
+
+	.bp-content.bp--0{ background-color: rgba(0,255,32,0.8); color: rgba(255,255,255,1) }
+
+	.item-container{ padding:0; }
+	.item{ width: 0.38rem; height: 0.38rem; flex-direction: column; box-sizing:content-box; padding: 0.045rem; background-color : rgba(0,0,0,0.25); }
+	.item__inner-container{ flex-direction: column; height: 0.25rem; }
+	.item__title { width: 0.35rem; }
+	.color-block { width: 0.35rem; height: 0.1rem; }
+
+}
+
+@media ( min-width: 768px ){
+
+	.item-container{ padding:0.1rem; }
+	.bp-content.bp--1{ background-color: rgba(0,255,32,0.8); color: rgba(255,255,255,1); }
+
+}
+
+@media ( min-width: 1024px ){
+
+	.bp-content.bp--2{ background-color: rgba(0,255,32,0.8); color: rgba(255,255,255,1); }
+
+	.item-container {	flex-direction: row; padding:0.15rem; }
+
+	.item { flex-direction: column-reverse; width: 0.37rem; }
+	.item__title { width: 0.35rem; }
+	.item__inner-container{ width: 0.3rem; }
+	.color-block { width: 0.13rem; height: 0.3rem; }
+
+}
+
+@media ( min-width: 1200px ){
+
+	.bp-content.bp--3{ background-color: rgba(0,255,32,0.8); color: rgba(255,255,255,1); }
+
+	.item { width: 0.6rem; height: 0.5rem; }
+
+	.item__title { width: 0.6rem; height: 0.08rem; }
+
+	.item__inner-container { width: 0.55rem; height: 0.4rem; }
+
+	.color-block{ width: 0.25rem; height: 0.35rem; }
+}
+
+@media ( min-width: 1600px ){
+
+	.bp-content.bp--4{ background-color: rgba(0,255,32,0.8); color: rgba(255,255,255,1); }
+
+	.item { width: 0.75rem; }
+
+}
+
+
+
+`;
+document.head.appendChild( vrStyleSheet );
+
+window.addEventListener("load", init);
+window.addEventListener("resize", onWindowResize);
+
+let container, stats;
+//
+
+function init() {
+
+  scene = new THREE.Scene();
+  scene.background = new THREE.Color(0x505050);
+
+  camera = new THREE.PerspectiveCamera(60, WIDTH / HEIGHT, 0.1, 100);
+
+  renderer = new THREE.WebGLRenderer({ antialias: true });
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(WIDTH, HEIGHT);
+  renderer.xr.enabled = true;
+  document.body.appendChild(VRButton.createButton(renderer));
+  document.body.appendChild(renderer.domElement);
+
+	stats = new Stats();
+	document.body.appendChild( stats.dom );
+
+  controls = new OrbitControls(camera, renderer.domElement);
+  camera.position.set(0, 1.6, 0);
+  controls.target = new THREE.Vector3(0, 1, -1.8);
+  controls.update();
+
+  // ROOM
+
+  const room = new THREE.LineSegments(
+    new BoxLineGeometry(6, 6, 6, 10, 10, 10).translate(0, 3, 0),
+    new THREE.LineBasicMaterial({ color: 0x808080 })
+  );
+
+  scene.add(room);
+
+  // TEXT PANEL
+
+  makeTextPanel();
+
+  //
+
+  renderer.setAnimationLoop(loop);
+}
+
+//
+
+function makeTextPanel() {
+  container = HyperThreeMesh.createElement('div', {
+		name: "rootBlock",
+    padding: 0.025,
+    fontFamily: FontJSON,
+    fontTexture: FontImage,
+    fontColor: new THREE.Color(0xffffff),
+  });
+
+  container.position.set(0, 1, -1.8);
+  // Three-mesh-ui element directly placed in scene, will have the pseudo class :root
+	scene.add(container);
+
+  //
+
+  const itemContainer = HyperThreeMesh.createElement('div', {
+		name: 'i-cont',
+		textAlign: "left",
+		backgroundOpacity: 1
+	});
+
+	itemContainer.classList.add( 'item-container' );
+
+
+	for ( let i = 0; i < 3; i++ ) {
+		const item = HyperThreeMesh.createElement('div', {height: 0.5, width: 0.5});
+		item.classList.add( 'item' );
+
+		const itemTitle = HyperThreeMesh.createElement('h1',{content:'Item '+(i+1)});
+		itemTitle.classList.add('item__title');
+
+		const innerContainer = HyperThreeMesh.createElement('div',{height: 0.5, width: 0.5,});
+		innerContainer.classList.add('item__inner-container');
+
+		const block1 = HyperThreeMesh.createElement('div',{height: 0.1,
+			width: 0.1,backgroundColor:new THREE.Color(0x00ff99), backgroundOpacity:1});
+			block1.classList.add('color-block');
+		const block2 = HyperThreeMesh.createElement('div',{height: 0.1,
+			width: 0.1,backgroundColor:new THREE.Color(0x0099ff), backgroundOpacity:1});
+		block2.classList.add('color-block');
+
+		item.add( itemTitle, innerContainer );
+
+		innerContainer.add( block1, block2 );
+
+		itemContainer.add( item );
+
+	}
+
+	container.add( itemContainer );
+
+	// legend
+
+	const legend = HyperThreeMesh.createElement('div',{backgroundColor:new THREE.Color(0x00ff99)});
+	legend.classList.add('legend');
+
+	const legendTitleBlock = HyperThreeMesh.createElement('p',{height: 0.1, width: 0.65, justifyContent:'center', textContent:'ACTIVE BREAKPOINTS :', textAlign: 'center'});
+	legend.add( legendTitleBlock );
+
+	const bps = ['max-width: 767px','min-width:768px','min-width:1024px','min-width:1280px', 'min-width:1600px'];
+	for ( let i = 0; i < bps.length; i++ ) {
+
+		const bpBlock = HyperThreeMesh.createElement('button',{height: 0.5, width: 0.5,textContent:bps[i]});
+		bpBlock.classList.add('bp-content', 'bp--'+i);
+		legend.add( bpBlock );
+
+	}
+
+
+	const infoText = HyperThreeMesh.createElement('p',{height: 'auto', width: 0.6,content:"All the responsiveness in this POC comes FROM css side. You can also use the devTool:source to edit the innerText of the three-mesh-ui." });
+	infoText.classList.add( 'info-text' );
+
+	legend.add( infoText );
+
+	container.add( legend );
+
+	HyperThreeMesh.loadSheets( "three-mesh-ui", true );
+
+
+}
+
+//
+
+function onWindowResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+//
+
+function loop() {
+  // Don't forget, ThreeMeshUI must be updated manually.
+  // This has been introduced in version 3.0.0 in order
+  // to improve performance
+  ThreeMeshUI.update();
+	HyperThreeMesh.update();
+
+  controls.update();
+  renderer.render(scene, camera);
+
+	stats.update();
+}
diff --git a/examples/ex__toggle_button_htm.js b/examples/ex__toggle_button_htm.js
new file mode 100644
index 00000000..d1975090
--- /dev/null
+++ b/examples/ex__toggle_button_htm.js
@@ -0,0 +1,321 @@
+// xfg:title 			ToggleButton HTM
+// xfg:category		extend
+// xfg:group			hypermesh
+
+import * as THREE from 'three';
+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+import ThreeMeshUI from 'three-mesh-ui';
+import * as HyperThreeMesh from 'three-mesh-ui/examples/hyperthreemesh/HyperThreeMesh';
+import ShadowedLight from './utils/ShadowedLight.js';
+
+import FontJSON from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.json';
+import FontImage from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.png';
+import InteractiveRaycaster from 'three-mesh-ui/examples/interactive/InteractiveRaycaster';
+import { _injectCSS } from 'three-mesh-ui/examples/_setup/Html';
+import InteractiveCursor from 'three-mesh-ui/examples/interactive/listeners/InteractiveCursor';
+import VRControl from 'three-mesh-ui/examples/controls/VRControl';
+
+let scene, camera, renderer, controls, vrControl, interactiveRaycaster;
+let meshContainer, sphere, box, cone;
+const objsToTest = [];
+
+_injectCSS( `
+
+:root{
+
+	background-color : rgba(0,0,0,0.75);
+	padding: 0.05rem 0.125rem;
+	border-radius: 0.2rem 0.02rem 0.2rem 0.02rem;
+	align-items: start;
+
+}
+
+button[type="toggle"]{
+
+	font-size: 0.055rem;
+
+	width : 0.5rem;
+	margin: 0.01rem;
+
+	border-radius: 0.02rem;
+
+	text-align: left;
+	rx: 0.005rem;
+
+}
+
+button[type="toggle"] ascent {
+
+	rx : 0;
+	background-color : rgba(0,0,0,0.05);
+	border-width: 0.01rem;
+	border-color: rgba(255,255,255,.9);
+
+}
+
+button[type="toggle"]:hover ascent{
+
+	rx : 0.025rem;
+
+}
+
+button[type="toggle"]:disabled {
+
+	color: rgba( 255,255,255,0.5);
+
+}
+
+button[type="toggle"]:disabled ascent {
+
+	border-color: rgba( 128,128,128,0.5);
+
+}
+
+button[type="toggle"]:disabled:hover ascent {
+
+	rx : 0.015rem;
+
+}
+
+button[type="toggle"]:active ascent {
+
+	rx : 0.01rem;
+
+}
+
+button[type="toggle"]:checked ascent {
+
+	background-color : rgba(0,225,128,.85);
+
+}
+
+button[type="toggle"]:checked:hover ascent {
+
+background-color : rgba(0,225,128,.99);
+
+}
+
+`)
+
+window.addEventListener( 'load', init );
+window.addEventListener( 'resize', onWindowResize );
+
+//
+
+function init() {
+
+	////////////////////////
+	//  Basic Three Setup
+	////////////////////////
+
+	scene = new THREE.Scene();
+	scene.background = new THREE.Color( 0x505050 );
+
+	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+
+	renderer = new THREE.WebGLRenderer( { antialias: true } );
+	renderer.setPixelRatio( window.devicePixelRatio );
+	renderer.setSize( window.innerWidth, window.innerHeight );
+	renderer.outputEncoding = THREE.sRGBEncoding;
+	renderer.xr.enabled = true;
+	document.body.appendChild( VRButton.createButton( renderer ) );
+	document.body.appendChild( renderer.domElement );
+
+	// Orbit controls for no-vr
+
+	controls = new OrbitControls( camera, renderer.domElement );
+	camera.position.set( 0, 1.6, 0 );
+	controls.target = new THREE.Vector3( 0, 1, -1.8 );
+
+	/////////
+	// Room
+	/////////
+
+	const room = new THREE.LineSegments(
+		new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
+		new THREE.LineBasicMaterial( { color: 0x808080 } )
+	);
+
+	const roomMesh = new THREE.Mesh(
+		new THREE.BoxGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
+		new THREE.MeshBasicMaterial( { side: THREE.BackSide } )
+	);
+
+	scene.add( room );
+	objsToTest.push( roomMesh );
+
+	//////////
+	// Light
+	//////////
+
+	const light = ShadowedLight( {
+		z: 10,
+		width: 6,
+		bias: -0.0001,
+		intensity: 1.8
+	} );
+
+	// const hemLight = new THREE.HemisphereLight( 0x808080, 0x606060 );
+
+	// scene.add( light, hemLight );
+	scene.add( light );
+
+	////////////////
+	// Controllers
+	////////////////
+
+	vrControl = VRControl( renderer );
+
+	scene.add( vrControl.controllerGrips[ 0 ], vrControl.controllers[ 0 ] );
+
+	interactiveRaycaster = new InteractiveRaycaster( camera, scene, renderer, vrControl );
+	interactiveRaycaster.start();
+
+	const interactiveCursor = new InteractiveCursor( renderer.domElement, 'pointer' );
+	interactiveRaycaster.addListener( interactiveCursor );
+
+	////////////////////
+	// Primitive Meshes
+	////////////////////
+
+	meshContainer = new THREE.Group();
+	meshContainer.position.set( -0.5, 1.25, -1.2 );
+	scene.add( meshContainer );
+
+	//
+
+	sphere = new THREE.Mesh(
+		new THREE.IcosahedronGeometry( 0.3, 1 ),
+		new THREE.MeshStandardMaterial( { color: 0x3de364 } )
+	);
+
+	box = new THREE.Mesh(
+		new THREE.BoxGeometry( 0.45, 0.45, 0.45 ),
+		new THREE.MeshStandardMaterial( { color: 0x643de3 } )
+	);
+
+	cone = new THREE.Mesh(
+		new THREE.ConeGeometry( 0.22, 0.5, 10 ).translate(0,0.425,0),
+		new THREE.MeshStandardMaterial( { color: 0xe33d4e } )
+	);
+
+	//
+
+	sphere.visible = box.visible = cone.visible = false;
+
+	meshContainer.add( sphere, box, cone );
+
+	//////////
+	// Panel
+	//////////
+
+	makePanel();
+
+	//
+
+	HyperThreeMesh.loadSheets();
+
+	renderer.setAnimationLoop( loop );
+
+}
+
+///////////////////
+// UI contruction
+///////////////////
+
+function makePanel() {
+
+
+	const container = HyperThreeMesh.createElement( 'div' )
+	container.style.borderRadius = 0.11;
+	container.style.justifyContent = "center";
+	container.style.flexDirection = 'column';
+	container.style.padding = '0.02 0.05';
+
+	// or go by standard way
+	container.set( {
+		fontFamily: FontJSON,
+		fontTexture: FontImage,
+		fontSize: 0.07,
+	} );
+
+	container.position.set( 0.5, 1.25, -1.2 );
+	container.rotation.x = -0.55;
+	scene.add( container );
+
+	/**
+	 *
+	 * @type {HTMButtonToggle}
+	 */
+	const buttonSphere = HyperThreeMesh.createElement('toggle', {name:"sphere",textContent:"Show sphere"});
+
+	buttonSphere.addEventListener( 'change', () => {
+		sphere.visible = buttonSphere.checked;
+	});
+
+	const disabledButton = HyperThreeMesh.createElement('toggle');
+	disabledButton.set({name: 'disabled'});
+	disabledButton.disabled = true;
+	disabledButton.textContent = 'Disabled toggle'
+
+	const buttonIcosahedron = HyperThreeMesh.createElement('toggle',{name:'Icosahedron',textContent:"Show Icosahedron"});
+	buttonIcosahedron.addEventListener( 'change', (event) => {
+		cone.visible = event.target.checked;
+	});
+
+	const buttonBox = HyperThreeMesh.createElement('toggle',{name:'Icosahedron',textContent:"Show box"});
+	buttonBox.addEventListener( 'change', () => {
+		box.visible = buttonBox.checked;
+	});
+
+	const buttonFlat = HyperThreeMesh.createElement('toggle',{name:'flat',textContent:"Flatshading"});
+	buttonFlat.addEventListener( 'change', ( event ) => {
+		sphere.material.flatShading = box.material.flatShading = cone.material.flatShading = event.target.checked;
+		sphere.material.needsUpdate = box.material.needsUpdate = cone.material.needsUpdate = true;
+	})
+
+	const buttonWire = HyperThreeMesh.createElement('toggle',{name:'wire',textContent:"Wireframe"});
+	buttonWire.addEventListener( 'change', (event) => {
+		sphere.material.wireframe = box.material.wireframe = cone.material.wireframe = event.target.checked;
+	});
+
+	container.add( buttonSphere, disabledButton, buttonIcosahedron, buttonBox, buttonFlat, buttonWire );
+
+	interactiveRaycaster.addObject( buttonSphere, disabledButton, buttonIcosahedron, buttonBox, buttonFlat, buttonWire );
+
+
+}
+
+// Handle resizing the viewport
+
+function onWindowResize() {
+
+	camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+	renderer.setSize( window.innerWidth, window.innerHeight );
+
+}
+
+//
+
+function loop() {
+
+	// Don't forget, ThreeMeshUI must be updated manually.
+	// This has been introduced in version 3.0.0 in order
+	// to improve performance
+	ThreeMeshUI.update();
+	controls.update();
+	interactiveRaycaster.update();
+	HyperThreeMesh.update();
+
+
+	meshContainer.rotation.z += 0.01;
+	meshContainer.rotation.y += 0.01;
+
+	renderer.render( scene, camera );
+
+}
+
diff --git a/examples/font/svg/SVGFontVariant.js b/examples/font/svg/SVGFontVariant.js
index 140b57ef..6a14e9d6 100644
--- a/examples/font/svg/SVGFontVariant.js
+++ b/examples/font/svg/SVGFontVariant.js
@@ -1,8 +1,9 @@
 import { FileLoader, MeshBasicMaterial } from 'three';
-import { FontVariant } from 'three-mesh-ui';
+import { DefaultValues, FontVariant } from 'three-mesh-ui';
 import SVGTypographicGlyph from './SVGTypographicGlyph';
 import SVGTypographicFont from './SVGTypographicFont';
 import SVGGeometricGlyph from './SVGGeometricGlyph';
+import DepthProperty from 'three-mesh-ui/examples/font/svg/properties/DepthProperty';
 
 export default class SVGFontVariant extends FontVariant {
 
@@ -20,6 +21,8 @@ export default class SVGFontVariant extends FontVariant {
 
 		}
 
+		DefaultValues.set({fontDepth:0.01});
+
 		// Default material is standard three material
 		this._defaultMaterialClass = MeshBasicMaterial;
 
@@ -70,11 +73,12 @@ export default class SVGFontVariant extends FontVariant {
 	/**
 	 *
 	 * @param {SVGInlineGlyph} inline
+	 * @param {MeshUIBaseElement} element
 	 * @returns {SVGGeometricGlyph}
 	 */
-	getGeometricGlyph( inline, segments = 1 ) {
+	getGeometricGlyph( inline, element = 1 ) {
 
-		return new SVGGeometricGlyph( inline, segments );
+		return new SVGGeometricGlyph( inline, element );
 
 	}
 
@@ -145,7 +149,6 @@ export default class SVGFontVariant extends FontVariant {
 
 			if( unicode.charCodeAt(0) === 160 ) continue;
 
-			console.log( "CAHRCODE  ",unicode.charCodeAt( 0 ), '-'+unicode+'-' );
 			friendlyChars[ unicode ] = new SVGTypographicGlyph( this._font, charOBJ );
 
 		}
@@ -166,6 +169,32 @@ export default class SVGFontVariant extends FontVariant {
 			});
 	}
 
+	/**
+	 *
+	 * @param element
+	 * @private
+	 */
+	_alterElementProperties( element ) {
+
+		SVGFontVariant.appendProperties( element );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static appendProperties( element ) {  /* eslint-enable no-unused-vars */
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+			const el = arguments[ i ];
+			if( el.isUI && el._fontDepth === undefined ) {
+				el.appendProperty( 'fontDepth', new DepthProperty() );
+			}
+		}
+
+	}
 }
 
 /***********************************************************************************************************************
@@ -184,9 +213,6 @@ function _loadSvg( fontVariant, svgUrl ) {
 
 	new FileLoader().setResponseType( 'document' ).setMimeType("text/xml").load( svgUrl, ( response ) => {
 
-		// check what response is
-		var i = 2;
-
 		const firstElement = response.firstElementChild;
 		if( firstElement && firstElement.tagName.toLowerCase() === 'svg') {
 
@@ -202,8 +228,8 @@ function _loadSvg( fontVariant, svgUrl ) {
 
 
 
-	} , ( progressEvent) => { console.log( progressEvent)}, (event) => {
-		console.log( event );
+	} , null , (event) => {
+		console.error( event );
 	});
 
 }
diff --git a/examples/font/svg/SVGGeometricGlyph.js b/examples/font/svg/SVGGeometricGlyph.js
index 4d6d97a6..d322afaf 100644
--- a/examples/font/svg/SVGGeometricGlyph.js
+++ b/examples/font/svg/SVGGeometricGlyph.js
@@ -1,35 +1,41 @@
-import { ExtrudeBufferGeometry } from 'three';
+import { ExtrudeGeometry } from 'three';
 
 // This implementation arbitrary choose to use ExtrudedGeometry, but it will also work with ShapeGeometry
-export default class SVGGeometricGlyph extends ExtrudeBufferGeometry {
+export default class SVGGeometricGlyph extends ExtrudeGeometry {
 
 	/**
 	 *
 	 * @param {SVGInlineGlyph} inline
+	 * @param {MeshUIBaseElement} element
 	 */
-	constructor( inline ) {
+	constructor( inline, element ) {
+
+
 
-		// @TODO: Retrieve segments properties
-		const segments = 1;
 
-		// default w & h segments
-		let wS = 1, hS=1;
 
 		// If charOBJ, try to distribute segments proportionally
 		const typographicFontSize = inline.typographic.font.size;
 		const divisor = inline.typographic.font.divisor;
 
-		wS = Math.ceil((inline.typographic.width / typographicFontSize) * segments);
-		hS = Math.ceil((inline.typographic.height / typographicFontSize) * segments);
+		/* eslint-disable no-unused-vars */
+		// default w & h segments
+		// @TODO: Retrieve segments properties
+		const segments = element.segments;
+		let wS = 1, hS = 1;
+		wS = Math.ceil( ( inline.typographic.width / typographicFontSize ) * segments );
+		hS = Math.ceil( ( inline.typographic.height / typographicFontSize ) * segments );  /* eslint-enable no-unused-vars */
 
-		super( inline.shape, {depth:.01} );
+		const depth = element._fontDepth.value;
+		super( inline.shape, {depth:1} );
 
 		this.name = "SVGGeometryGlyph("+inline.typographic.char+")";
 
-			this._transformGeometry( inline );
-			this.scale( 1/divisor * inline.fontFactor , 1/divisor * inline.fontFactor, 0.025 );
+			this._transformGeometry( inline, depth );
+
+			this.scale( 1/divisor * inline.fontFactor , 1/divisor * inline.fontFactor, depth );
 
-			this.translate( 0, inline.fontSize / 2, 0 );
+			// this.translate( 0, 0, 0 );
 
 	}
 
@@ -41,15 +47,15 @@ export default class SVGGeometricGlyph extends ExtrudeBufferGeometry {
 	 * @param {MSDFInlineGlyph} inline
 	 * @private
 	 */
-	_transformGeometry( inline ) {
+	_transformGeometry( inline, depth ) {
 
 		//
 
 		// @TODO : Evaluate this as being a property. It can wait until splitGeometry
 		this.translate(
 			inline.width / 2,
-			( inline.height / 2 ) - inline.anchor,
-			0
+			inline.height / 2,
+			-depth/2
 		);
 
 	}
diff --git a/examples/font/svg/SVGInlineGlyph.js b/examples/font/svg/SVGInlineGlyph.js
index 0879c6e8..01784e96 100644
--- a/examples/font/svg/SVGInlineGlyph.js
+++ b/examples/font/svg/SVGInlineGlyph.js
@@ -21,4 +21,10 @@ export default class SVGInlineGlyph extends InlineGlyph{
 	 */
 	get shape() { return this.typographic.shape; }
 
+	get anchor() {
+
+		return this.yoffset + this.height/2;
+
+	}
+
 }
diff --git a/examples/font/svg/SVGTypographicGlyph.js b/examples/font/svg/SVGTypographicGlyph.js
index e7b330ae..45207628 100644
--- a/examples/font/svg/SVGTypographicGlyph.js
+++ b/examples/font/svg/SVGTypographicGlyph.js
@@ -43,6 +43,8 @@ export default class SVGTypographicGlyph extends TypographicGlyph {
 
 			}
 
+			this._yoffset = this.height/2;
+
 			const paths = _transformSVGPath( svgElement.getAttribute('d') );
 			// this._shapePath = paths.toShapes( ShapeUtils.isClockWise( paths.subPaths[0].getPoints()));
 			this._shapePath = SVGLoader.createShapes( paths );
@@ -392,6 +394,6 @@ function _transformSVGPath( pathStr ) {
 
 	return path;
 
-};
+}
 
 
diff --git a/examples/font/svg/properties/DepthProperty.js b/examples/font/svg/properties/DepthProperty.js
new file mode 100644
index 00000000..e0daa411
--- /dev/null
+++ b/examples/font/svg/properties/DepthProperty.js
@@ -0,0 +1,16 @@
+import { InheritableProperty } from 'three-mesh-ui';
+
+export default class DepthProperty extends InheritableProperty {
+
+	constructor() {
+		super( 'fontDepth', 'inherit', true );
+	}
+
+	update( element, out ) {
+		super.update( element, out );
+
+		if( element.isInline ) element._parent._value._renderer._needsRender = true;
+
+	}
+
+}
diff --git a/examples/hyperthreemesh/HyperThreeMesh.js b/examples/hyperthreemesh/HyperThreeMesh.js
new file mode 100644
index 00000000..5ee779f3
--- /dev/null
+++ b/examples/hyperthreemesh/HyperThreeMesh.js
@@ -0,0 +1,680 @@
+import CSSQuery from './core/utils/css/CSSQuery';
+import CSSRuleVR from './core/utils/css/CSSRuleVR';
+import CSSMediaQuery from './core/utils/css/CSSMediaQuery';
+import UpdateManager from '../../src/components/core/UpdateManager';
+import HTMTextElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMTextElement';
+import HTMInlineElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMInlineElement';
+import HTMBlockElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMBlockElement';
+import KeyboardHTM from 'three-mesh-ui/examples/hyperthreemesh/KeyboardHTM';
+import HTMInlineBlockElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMInlineBlockElement';
+import HTMButton from 'three-mesh-ui/examples/hyperthreemesh/elements/HTMButton';
+import HTMButtonToggle from 'three-mesh-ui/examples/hyperthreemesh/elements/HTMButtonToggle';
+import HTMButtonRadio from 'three-mesh-ui/examples/hyperthreemesh/elements/HTMButtonRadio';
+import HTMListItem from 'three-mesh-ui/examples/hyperthreemesh/elements/HTMListItem';
+import HTMList from 'three-mesh-ui/examples/hyperthreemesh/elements/HTMList';
+import HTMImage from 'three-mesh-ui/examples/hyperthreemesh/elements/HTMImage';
+
+
+/**
+ * querySelectorAll is an entrypoint, logic are deviate to internal _querySelectorAll
+ * @param {string|CSSQuery} query
+ * @param {MeshUIBaseElement|Array.<MeshUIBaseElement>} [context]
+ * @return {Array.<MeshUIBaseElement>}
+ */
+function querySelectorAll( query, context = null ) {
+
+	if( !( query instanceof CSSQuery ) ) {
+		query = CSSQuery.build( query );
+	}
+
+	// if no lookup context is provided, use any root MeshUIComponent
+	if ( !context ) {
+		context = UpdateManager.elements;
+	}
+
+	// Be sure the provided lookup context is an Array
+	if ( !Array.isArray( context ) ) {
+		context = [ context ];
+	}
+
+
+	let results = [];
+	// Run the internal logic on any context
+	for ( let i = 0; i < context.length; i++ ) {
+
+		results = results.concat( _querySelectorAll( context[ i ], query ) );
+
+	}
+
+	// The same MeshUIComponent could be found multiple times, be sure they are only output once
+	for ( let i = results.length - 1; i >= 0; i-- ) {
+
+		const firstIndexOf = results.indexOf( results[ i ] );
+		if ( firstIndexOf !== i ) {
+
+			results.splice( i, 1 );
+
+		}
+
+	}
+
+	return results;
+
+}
+
+/**
+ * Internal logic for querySelectorAll
+ * @param {MeshUIBaseElement} target
+ * @param {CSSQuery} query
+ * @param {boolean} [recursive=true] Traverse all children to process query
+ * @return {Array.<MeshUIBaseElement>}
+ * @private
+ */
+function _querySelectorAll( target, query, recursive = true ) {
+
+	let results = [];
+
+	// propagate the query selection to any children
+	if ( recursive ) {
+
+		for ( let i = 0; i < target._children._uis.length; i++ ) {
+
+			results = results.concat( _querySelectorAll( target._children._uis[ i ], query ) );
+
+		}
+
+	}
+
+	// check that the target match the first query segment of the list
+	// ie: "div.foo" in "div.foo span.bar > p"
+	if ( query[ 0 ].match( target ) ) {
+
+		// push the target as result if there is no more segments in the query
+		if ( query.length === 1 ) {
+			results.push( target );
+			return results;
+		}
+
+		// Or check children and sibling to complete further segments
+		const subQuery = query.slice( 1 );
+
+		// check which css combinator to apply
+		if ( subQuery && subQuery !== '' ) {
+
+			// Descendant combinator, looks in any children, recursively
+			if ( !subQuery[ 0 ].combinator || subQuery[ 0 ].combinator === '' ) {
+				for ( let i = 0; i < target._children._uis.length; i++ ) {
+
+					results = results.concat( _querySelectorAll( target._children._uis[ i ], subQuery ) );
+				}
+
+			}
+			// direct child combinator, only look in direct children, not recursively
+			else if ( subQuery[ 0 ].combinator === '>' ) {
+
+				for ( let i = 0; i < target._children._uis.length; i++ ) {
+
+					results = results.concat( _querySelectorAll( target._children._uis[ i ], subQuery, false ) );
+
+				}
+			}
+
+			// siblings combinator
+			else if ( target._parent._value && ( subQuery[ 0 ].combinator === '~' || subQuery[ 0 ].combinator === '+' ) ) {
+
+				const parentUI = target._parent._value;
+
+				// retrieve the childIndex of the current target
+				const currentIndex = parentUI._children._uis.indexOf( target );
+
+				// build the siblings list to check
+				let adjacentSiblings;
+
+				// General sibling, next query segments apply on any further children
+				if ( subQuery[ 0 ].combinator === '~' ) {
+					adjacentSiblings = parentUI._children._uis.slice( currentIndex + 1 );
+				} else {
+					// adjacent sibling, next query segment apply only to next sibling
+					adjacentSiblings = parentUI._children._uis.slice( currentIndex + 1, currentIndex + 2 );
+				}
+
+				// Looks to siblings, not recursively
+				for ( let i = 0; i < adjacentSiblings.length; i++ ) {
+
+					results = results.concat( _querySelectorAll( adjacentSiblings[ i ], subQuery, false ) );
+
+				}
+
+			} else {
+
+				throw new Error( `UIDocument::querySelectorAll() - The provided css combinator('${subQuery[ 0 ].combinator}') is not implemented` );
+
+			}
+
+		}
+
+	}
+
+	return results;
+
+}
+
+/**
+ *
+ * @type {Array.<CSSRuleVR>}
+ * @private
+ */
+let _rules = [];
+let _conditions = [];
+let _observers = [];
+let _media = 'three-mesh-ui';
+/**
+ * WIP
+ * @deprecated until achieved
+ * @param media
+ * @param listenForChanges
+ */
+function loadSheets( media = 'three-mesh-ui', listenForChanges = false ) {
+
+	_media = media;
+
+	// If it should be reactive and a document isset
+	if( listenForChanges && document ){
+
+		// Starts be removing any previously set MutationObservers
+		for ( let i = 0; i < _observers.length; i++ ) {
+			let previousMutationObserver = _observers[ i ];
+			previousMutationObserver.disconnect();
+			previousMutationObserver = null;
+		}
+
+		_observers = [];
+
+		_addMutationObserverOnContainer( document.documentElement );
+
+		const sheets = document.querySelectorAll(`link[media="${media}"],style[media="${media}"]`);
+		for ( let i = 0; i < sheets.length; i++ ) {
+
+			_addMutationObserverOnStyleSheet( sheets[ i ] );
+
+		}
+	}
+
+
+
+	// reset elements
+	// @TODO: Dispose conditions
+	_rules = [];
+	_conditions = [];
+
+	if ( document && document.styleSheets ) {
+
+		for ( const styleSheet of document.styleSheets ) {
+			if ( styleSheet.media.mediaText === media ) {
+
+				const { rules, conditions } = _importSheet( styleSheet.cssRules );
+
+				_rules = _rules.concat( rules );
+				_conditions = _conditions.concat( conditions );
+
+			}
+
+		}
+
+		for ( let j = 0; j < _rules.length; j++ ) {
+			_rules[ j ].order = j;
+		}
+
+		_rules.sort( _sortXSSRules );
+
+		for ( const condition of _conditions ) {
+			condition.init( () => { _needsUpdate = true; } );
+		}
+
+	}
+
+	_applyRules();
+
+}
+
+/**
+ *
+ * @param {Array.<MutationRecord>} mutations
+ * @private
+ */
+function _addOrRemoveStylesheetMutation( mutations ){
+	let reload = false;
+	mutations.forEach(function(mutation) {
+
+		for (let i = 0; i < mutation.addedNodes.length; i++){
+			if( _matchVRStyleSheet(mutation.addedNodes[i]) ){
+				reload = true;
+			}
+
+		}
+
+		for ( let i = 0; i < mutation.removedNodes.length; i++ ) {
+
+			if( _matchVRStyleSheet(mutation.removedNodes[ i ]) ){
+				reload = true;
+			}
+
+		}
+
+	})
+
+	if( reload ){
+		loadSheets( true );
+	}
+}
+
+function _matchVRStyleSheet( element ) {
+
+	return element.tagName === 'LINK' || element.tagName === 'STYLE' && element.getAttribute('media') === _media;
+
+}
+
+function _addMutationObserverOnContainer( container ){
+
+	const observer = new MutationObserver( _addOrRemoveStylesheetMutation );
+
+	observer.observe( container, { childList: true, subtree: true });
+	_observers.push( observer );
+}
+
+/**
+ *
+ * @param cssStyleSheet
+ * @private
+ */
+function _addMutationObserverOnStyleSheet( cssStyleSheet ){
+
+
+	// observe the stylesheet itself for content changes
+	/* eslint-disable no-unused-vars */
+	const observer = new MutationObserver(function(mutations) {
+		loadSheets(_media, true);
+	});
+	/* eslint-enable no-unused-vars */
+
+	// Pass in the target node, as well as the observer options.
+	observer.observe( cssStyleSheet, {
+		attributes:    true,
+		childList:     true,
+		subtree: true,
+		characterData: true,
+		characterDataOldValue: true
+	});
+
+	_observers.push( observer );
+
+}
+
+/**
+ * When an element has changed its identity
+ * 		- ID
+ * 		- ClassList
+ * 		- Attributes & values
+ *
+ * Try to apply any css rules to it and its children
+ * @param {MeshUIComponent} element
+ */
+export function elementChangeIdentity( element ){
+
+	_checkAndApplyCSSRules(element);
+
+	element.traverse( (child) => {
+
+		if( child.isUI ) {
+
+			_checkAndApplyCSSRules(child);
+
+		}
+
+	})
+
+}
+
+/**
+ *
+ * @param {MeshUIComponent} forElement
+ * @private
+ */
+function _checkAndApplyCSSRules( forElement ){
+
+	// to bundle of styles property to set
+	let computedStyles = {};
+	let found = false;
+
+	// Loop through each enabled rules
+	for ( const rule of _rules ) {
+
+		if( !rule.enabled ) continue;
+
+		// If the element match the rule
+		if( rule.query.match( forElement ) ) {
+
+			// append the rules styles properties
+			// computedStyles = {...computedStyles,...rule.styles};
+			computedStyles = {...computedStyles };
+			found = true;
+
+		}
+
+	}
+
+	// If at least one rule has matched
+	if( found ) {
+
+		// Set computed styles
+		forElement.set( computedStyles );
+
+	}
+
+}
+
+
+export function computeStyle( element ){
+	const elements = [];
+	if( element.parentUI ){
+		elements.push( element.parentUI );
+	}
+
+	element.traverse( (child) => {
+		if( child.isUI ) elements.push( child );
+	})
+
+	for ( const elem of elements ) {
+
+		let computedStyles = {};
+		let found = false;
+		for ( const rule of _rules ) {
+
+			if( !rule.enabled ) continue;
+
+			if( rule.query.match(elem) ) {
+				computedStyles = {...computedStyles,...rule.styles};
+				found = true;
+			}
+
+		}
+
+		if( found ) {
+			elem.set( computedStyles );
+		}
+	}
+
+}
+
+
+export function _applyRules(){
+
+	for ( const rule of _rules ) {
+
+		if( !rule.enabled ) continue;
+
+		const targets = querySelectorAll( rule.query );
+
+		for ( const target of targets ) {
+
+			target.set( rule.styles );
+
+		}
+	}
+}
+
+/**
+ * Sort the rules by specificity and order
+ * Making it sure any overrides is justified
+ *
+ * @param {CSSRuleVR} a
+ * @param {CSSRuleVR} b
+ * @returns {number}
+ * @private
+ */
+function  _sortXSSRules( a, b ){
+
+	if( a.specificity < b.specificity ){
+		return -1;
+	}
+
+	if( a.specificity > b.specificity ){
+		return 1;
+	}
+
+	if( a.order < b.order ){
+		return -1;
+	}
+
+	if( a.order > b.order ){
+		return 1;
+	}
+
+	return 0;
+
+}
+
+/**
+ * @Todo : Try to reduce as much as possible this table by updating meshUIComponent properties to match
+ * 				 as much as possible css valid properties
+ *
+ * @type {Object.<string,string>}
+ * @private
+ */
+const _lookUpTable = {
+	rx: 'offset',
+	offsetDistance: 'offset'
+}
+
+/**
+ *
+ * @param rulesList
+ * @param {string|null} [condition=null]
+ * @returns {{rules: *[], conditions: *[]}}
+ * @private
+ */
+function _importSheet( rulesList, condition = null ) {
+
+	let rules = [];
+	let mediaQ = null;
+	let conditions = [];
+
+	if( condition && condition !== '' ) {
+
+		mediaQ = new CSSMediaQuery(condition);
+		conditions.push( mediaQ );
+
+	}
+
+	for ( let i = 0; i < rulesList.length; i++ ) {
+
+		const rule = rulesList[ i ];
+
+		if ( rule.selectorText ) {
+
+
+			const newRule = new CSSRuleVR( rule.selectorText, rule.style, _lookUpTable );
+			rules.push( newRule );
+
+			if( mediaQ ){
+				mediaQ.addRule( newRule );
+			}
+
+		} else if ( rule.conditionText ) {
+
+			let newCondition = condition;
+			if( !newCondition || newCondition === '' ){
+				newCondition = rule.conditionText;
+			}else{
+				newCondition += ` and ${rule.conditionText}`;
+			}
+
+			const { rules : addRules, conditions : addConditions } = _importSheet( rule.cssRules , newCondition)
+
+			rules = rules.concat( addRules );
+			conditions = conditions.concat( addConditions );
+
+		}
+
+	}
+
+
+	return { rules, conditions };
+
+}
+
+/**
+ *
+ * @param tag
+ * @param options
+ * @returns {HTMBaseElement}
+ */
+function createElement( tag, options = {} ){
+
+	if( !options.tagName ) options.tagName = tag;
+	switch ( tag.toLowerCase().replace(/\d/g, "") ) {
+
+		case "img":
+			return new HTMImage(options);
+		case "p":
+		case "label":
+		case "h":
+				return new HTMTextElement(options);
+
+		case "ol":
+		case "ul":
+			return new HTMList(options);
+
+		case "li":
+			return new HTMListItem(options)
+
+		case "button":
+			return new HTMButton(options);
+
+		case "toggle":
+			options.tagName = 'button';
+			return new HTMButtonToggle(options);
+
+		case "radio":
+			options.tagName = 'button';
+			return new HTMButtonRadio(options);
+
+		case "div":
+		case "footer":
+		case "header":
+		case "section":
+			return new HTMBlockElement(options);
+
+		case "sup":
+		case "sub":
+			options.fontSize = '0.5em';
+			// falls through
+		case "text":
+		case "span":
+		case "em":
+		case "strong":
+		case "small":
+		case "link":
+		case "a":
+			return new HTMInlineElement(options);
+
+		case "icon":
+			return new HTMInlineBlockElement(options);
+
+		case "keyboard":
+			return new KeyboardHTM( options );
+
+		default:
+			throw new Error(`HyperTextMesh::createElement() - The provided tagname (${tag})  is not implemented`);
+
+	}
+
+}
+
+/**
+ *
+ * @deprecated wip
+ * @param {HTMLElement} htmlElement
+ * @returns {HTMBaseElement}
+ */
+function copy( htmlElement ){
+
+
+
+	if( htmlElement.nodeType === 3 ) htmlElement.tagName = 'text';
+
+	const copied = createElement( htmlElement.tagName);
+
+	if ( htmlElement.nodeType === 3 ) {
+		copied.textContent = htmlElement.data;
+		return copied;
+	}
+
+	// paste attributes
+	const attributes = htmlElement.attributes;
+	for ( let i = 0; i < attributes.length; i++ ) {
+		const attribute = attributes[ i ];
+		copied.setAttribute( attribute.name, attribute.value);
+	}
+
+	// set classes
+	const iterator = htmlElement.classList.values();
+
+	for (const value of iterator) {
+		copied.classList.add( value );
+	}
+
+	if( (copied.isText || copied.isInline) && htmlElement.children.length === 0 ){
+		copied.textContent = htmlElement.textContent;
+	} else {
+
+		for ( let i = 0; i < htmlElement.childNodes.length; i++ ) {
+
+			const childNode = htmlElement.childNodes[i];
+
+			if( childNode.nodeType !== 3 && childNode.nodeType !== 1 ) continue;
+
+			// Text node
+			if( childNode.nodeType === 3 && childNode.data === "\n\t") continue;
+
+			// console.log( childNode );
+			// console.log( childNode.childNodes );
+
+			if( childNode.nodeType === 3 && !copied.isText ) {
+
+				console.warn("Text node can only be added in Text or Inline elements",)
+				console.warn( `Text (${JSON.stringify(childNode.data)}) in ${htmlElement} (${copied.copyAttributes()})` );
+				continue;
+			}
+
+			const child = copy( childNode );
+
+			copied.add( child );
+
+		}
+
+	}
+
+
+
+
+	return copied;
+
+}
+
+
+let _needsUpdate = true;
+function requestUpdate() {
+	_needsUpdate = true;
+}
+
+function update() {
+	if( _needsUpdate ) {
+		_applyRules();
+		_needsUpdate = false;
+	}
+}
+
+export { loadSheets };
+
+export { createElement, requestUpdate, update, copy, querySelectorAll };
diff --git a/examples/hyperthreemesh/KeyboardHTM.js b/examples/hyperthreemesh/KeyboardHTM.js
new file mode 100644
index 00000000..b67dee33
--- /dev/null
+++ b/examples/hyperthreemesh/KeyboardHTM.js
@@ -0,0 +1,99 @@
+import KeyboardElement from 'three-mesh-ui/examples/elements/keyboard/KeyboardElement';
+import * as HyperThreeMesh from 'three-mesh-ui/examples/hyperthreemesh/HyperThreeMesh';
+import HTMBlockElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMBlockElement';
+
+export default class KeyboardHTM extends HTMBlockElement {
+
+	constructor( options ) {
+
+		KeyboardElement.ensureOptions( options );
+
+		super({tagName:'keyboard'});
+
+		KeyboardElement.make( this, options );
+
+		// parse all keys
+		const iconsInputs = ['enter','shift','backspace'];
+		for ( let i = 0; i < this.keys.length; i++ ) {
+			const key = this.keys[ i ];
+
+			if( iconsInputs.indexOf( key.info.input ) !== -1 ){
+				key.setAttribute( 'type', 'icon');
+			}else{
+				key.setAttribute( 'type', 'char');
+			}
+
+		}
+
+	}
+
+
+	/**
+	 *
+	 * @returns {HTMBlockElement}
+	 * @private
+	 */
+	_buildPanel( ) {
+
+		const panelBlock = new HyperThreeMesh.createElement('div',{tagName:'panel'});
+		panelBlock.charset = 0;
+
+		return panelBlock;
+
+	}
+
+	/**
+	 *
+	 * @returns {HTMBlockElement}
+	 * @private
+	 */
+	_buildBlock( ) {
+
+		return HyperThreeMesh.createElement( 'div');
+
+	}
+
+	/* eslint-disable no-unused-vars */
+
+	/**
+	 *
+	 * @param char
+	 * @param keyDefinition
+	 * @returns {HTMBaseElement}
+	 * @private
+	 */
+	_buildKey( char, keyDefinition ) {
+
+		const key = HyperThreeMesh.createElement( 'button', { tagName:"key", name: char } );
+		key.setAttribute('input', char)
+		return key;
+
+	}
+
+	/**
+	 *
+	 * @param char
+	 * @param keyDefinition
+	 * @returns {HTMBaseElement}
+	 * @private
+	 */
+	_buildKeyInline( char, keyDefinition ) {
+
+		return HyperThreeMesh.createElement( 'span', { tagName:"anonymous-span", name: char } );
+
+	}
+
+	/**
+	 *
+	 * @param char
+	 * @param keyDefinition
+	 * @returns {HTMBaseElement}
+	 * @private
+	 */
+	_buildKeyInlineBlock( char, keyDefinition ) {
+
+		return HyperThreeMesh.createElement( 'icon', { name: char } );
+
+	} /* eslint-enable no-unused-vars */
+
+}
diff --git a/examples/hyperthreemesh/core/Group.js b/examples/hyperthreemesh/core/Group.js
new file mode 100644
index 00000000..40d75c8d
--- /dev/null
+++ b/examples/hyperthreemesh/core/Group.js
@@ -0,0 +1,56 @@
+const _groups = {};
+
+export class Group {
+
+	constructor( groupName ) {
+
+		this._name = groupName;
+
+		this._elements = [];
+
+		_groups[groupName] = this;
+
+	}
+
+	/**
+	 *
+	 * @param elementHTM
+	 */
+	add( elementHTM) {
+		if ( this._elements.indexOf( elementHTM ) === -1 ) {
+			this._elements.push( elementHTM );
+		}
+	}
+
+	/**
+	 *
+	 * @param elementHTM
+	 */
+	remove ( elementHTM) {
+		const index = this._elements.indexOf( elementHTM );
+		if( index !== -1 ) {
+			this._elements.splice( index, 1 );
+		}
+	}
+
+}
+
+/**
+ *
+ * @param {string} groupName
+ * @param {boolean} orCreate
+ * @returns {Group|null}
+ */
+export function getGroupByName( groupName, orCreate = false ) {
+
+	const group = _groups[groupName];
+
+	if( !group && orCreate ) {
+
+		return new Group( groupName );
+
+	}
+
+	return _groups[groupName];
+
+}
diff --git a/examples/hyperthreemesh/core/elements/HTMBaseElement.js b/examples/hyperthreemesh/core/elements/HTMBaseElement.js
new file mode 100644
index 00000000..8663548c
--- /dev/null
+++ b/examples/hyperthreemesh/core/elements/HTMBaseElement.js
@@ -0,0 +1,305 @@
+import { MeshUIBaseElement } from 'three-mesh-ui';
+import TokenList from 'three-mesh-ui/examples/hyperthreemesh/core/utils/TokenList';
+import NamedMap from 'three-mesh-ui/examples/hyperthreemesh/core/utils/NamedMap';
+import CSSQuerySegment from 'three-mesh-ui/examples/hyperthreemesh/core/utils/css/CSSQuerySegment';
+import * as HyperThreeMesh from 'three-mesh-ui/examples/hyperthreemesh/HyperThreeMesh';
+import StylePropertyWrapper from '../../../../src/elements/html/properties/StylePropertyWrapper';
+import StyleComputedPropertyWrapper from '../../../../src/elements/html/properties/StyleComputedPropertyWrapper';
+
+/**
+ * @extends {MeshUIBaseElement}
+ */
+export default class HTMBaseElement extends MeshUIBaseElement {
+
+	/**
+	 *
+	 * @param {Object.<string,Class>} [properties=null]
+	 * @param {Object.<string,any>} [values=null]
+	 */
+	constructor( properties, values) {
+
+		const tagName = values.tagName;
+		delete values.tagName;
+
+		if( !tagName ) throw new Error( "HyperThreeMesh::Element - Requires a tagName property.")
+
+		super( properties, values );
+
+		// @TODO: Rebuild css properties
+
+		// HTML Interface ----------------------------------------------------------
+
+		/**
+		 *
+		 * @type {string|null}
+		 * @protected
+		 */
+		this._elementID = null;
+
+		/**
+		 *
+		 * @type {TokenList}
+		 * @private
+		 */
+		this._classList = new TokenList( HyperThreeMesh.requestUpdate );
+
+		/**
+		 *
+		 * @type {TokenList}
+		 * @private
+		 */
+		this._pseudoClassList = new TokenList( HyperThreeMesh.requestUpdate );
+
+		/**
+		 *
+		 * @type {NamedMap}
+		 * @private
+		 */
+		this._attributes = new NamedMap( HyperThreeMesh.requestUpdate );
+
+		/**
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		this._tagName = tagName;
+
+		this._styles = new StylePropertyWrapper( this );
+		this._computedStyles = new StyleComputedPropertyWrapper( this );
+
+	}
+
+	/**
+	 *
+	 * @param v
+	 */
+	set elementID(v) {
+		this._elementID = v;
+
+		//@todo : rebuild styles
+		HyperThreeMesh.requestUpdate();
+	}
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get elementID() { return this._elementID; }
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get tagName() { return this._tagName; }
+
+	/**
+	 *
+	 * @returns {NamedMap}
+	 */
+	get attributes() { return this._attributes; }
+
+	/**
+	 *
+	 * @returns {StylePropertyWrapper}
+	 */
+	get style() { return this._styles }
+
+	/**
+	 *
+	 * @returns {StyleComputedPropertyWrapper}
+	 */
+	get computedStyle() { return this._computedStyles; }
+	/**
+	 *
+	 * @param {string} attributeName
+	 * @param {string|null} [value=null]
+	 */
+	setAttribute( attributeName, value= null ) {
+
+		this._attributes.set( attributeName, value );
+
+	}
+
+	/**
+	 *
+	 * @param {string} attributeName
+	 * @returns {string}
+	 */
+	getAttribute( attributeName ) {
+
+		return this._attributes.get( attributeName );
+
+	}
+
+	/**
+	 *
+	 * @param {string} attributeName
+	 * @returns {boolean}
+	 */
+	hasAttribute( attributeName ) {
+
+		return this._attributes.has( attributeName );
+
+	}
+
+	/**
+	 *
+	 * @param {string} attributeName
+	 */
+	removeAttribute( attributeName ) {
+
+		this._attributes.remove( attributeName );
+
+	}
+	/**
+	 *
+	 * @returns {TokenList}
+	 */
+	get classList() { return this._classList; }
+
+	/**
+	 *
+	 * @returns {TokenList}
+	 */
+	get pseudoClassList() { return this._pseudoClassList; }
+
+	/**
+	 * ie: `div#id[type="menu"]:disabled`
+	 * @returns {string}
+	 */
+	copyAttributes() {
+
+		let output = this._tagName.toLowerCase();
+
+		if ( this._elementID ) {
+
+			output += `#${this._elementID}`;
+
+		}
+
+		output += this._classList.toString( '.' );
+		output += this._attributes.toString();
+		output += this._pseudoClassList.toString( ':' );
+
+		return output;
+
+	}
+
+	/**
+	 *	ie : `div#id[type="menu"]:disabled`
+	 * @param {CSSQuerySegment|string} querySegment
+	 */
+	pasteAttributes( querySegment ) {
+
+		// Be sure to work with a querySegment
+		if ( !( querySegment instanceof CSSQuerySegment ) ) {
+
+			querySegment = new CSSQuerySegment( querySegment );
+
+		}
+
+		// reset existing attributes
+		this._elementID = null;
+		this._classList.clear();
+		this._pseudoClassList.clear();
+		this._attributes.clear();
+
+		// loop through each conditions of the query segment
+		for ( let i = 0; i < querySegment.conditions.length; i++ ) {
+
+			const condition = querySegment.conditions[ i ];
+
+			switch ( condition.type ) {
+
+				case 'tag':
+					if ( this._tagName === '' ) {
+						this._tagName = condition.value;
+					}
+					continue;
+
+				case 'id':
+					this._elementID = condition.value;
+					continue;
+
+				case 'class':
+					for ( let j = 0; j < condition.value.length; j++ ) {
+						this._classList.add( condition.value[ j ] );
+					}
+					continue;
+
+				case 'pseudoClass':
+					for ( let j = 0; j < condition.value.length; j++ ) {
+						this._pseudoClassList.add( condition.value[ j ] );
+					}
+					continue;
+
+				case 'attribute':
+					for ( let j = 0; j < condition.value.length; j++ ) {
+						const attrComponent = condition.value[ j ];
+						this._attributes.set( attrComponent.name, attrComponent.value );
+					}
+
+			}
+
+		}
+
+		// @TODO : Should rebuild computed styles
+
+		return this;
+
+	}
+
+	/**
+	 * @override
+	 * @param state
+	 */
+	activatePseudoState ( state ) {
+
+		if ( state === 'hover' || state === 'disabled' || !this.hasAttribute( 'disabled' ) ) {
+			this._pseudoClassList.add( state );
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @param state
+	 */
+	deactivatePseudoState ( state ) {
+		this._pseudoClassList.remove( state );
+	}
+
+	togglePseudoState ( state ) {
+		this._pseudoClassList.toggle( state );
+	}
+
+	hasPseudoState( state ) {
+		return this._pseudoClassList.contains( state );
+	}
+
+	/**
+	 * Query select in children only
+	 * @param {String} query
+	 * @returns {Array<MeshUIBaseElement>}
+	 */
+	querySelectorAll( query ) {
+
+		return HyperThreeMesh.querySelectorAll( query, this );
+
+	}
+
+	clear() {
+
+		this._styles.dispose();
+		this._styles = null;
+
+		this._computedStyles.dispose();
+		this._computedStyles = null;
+
+		return super.clear();
+
+	}
+
+
+
+}
diff --git a/examples/hyperthreemesh/core/elements/HTMBlockElement.js b/examples/hyperthreemesh/core/elements/HTMBlockElement.js
new file mode 100644
index 00000000..6c275f4a
--- /dev/null
+++ b/examples/hyperthreemesh/core/elements/HTMBlockElement.js
@@ -0,0 +1,58 @@
+import HTMBoxElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMBoxElement';
+import BlockElement from '../../../../src/elements/basic/BlockElement';
+
+/**
+ * @extends {MeshUIBaseElement}
+ */
+export default class HTMBlockElement extends HTMBoxElement {
+
+	/**
+	 *
+	 * @param {Object.<string,any>} [values={}]
+	 * @param {Object.<string,any>} [properties={}]
+	 */
+	constructor( values= {}, properties={}) {
+
+		BlockElement.definePropertiesValues( properties, values );
+		super( properties, values );
+		BlockElement.init( this );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * A Block Element can only contains box elements
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) {
+		/* eslint-enable no-unused-vars */
+
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			const argument = arguments[ i ];
+
+			if ( !argument.isUI || argument.isBox ) {
+
+				validChildren.push( argument );
+
+			} else {
+
+				console.warn( 'Block element can only contain Box elements.', argument );
+
+			}
+
+		}
+
+		return super.add( ...validChildren );
+
+	}
+
+}
diff --git a/examples/hyperthreemesh/core/elements/HTMBoxElement.js b/examples/hyperthreemesh/core/elements/HTMBoxElement.js
new file mode 100644
index 00000000..409ecc99
--- /dev/null
+++ b/examples/hyperthreemesh/core/elements/HTMBoxElement.js
@@ -0,0 +1,48 @@
+import HTMBaseElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMBaseElement';
+import BoxElement from '../../../../src/elements/basic/BoxElement';
+import { Vector3 } from 'three';
+
+/**
+ * @extends {MeshUIBaseElement}
+ */
+export default class HTMBoxElement extends HTMBaseElement {
+
+	/**
+	 *
+	 * @param {Object.<string,Class>} [properties={}]
+	 * @param {Object.<string,any>} [values={}]
+	 */
+	constructor( properties= {}, values= {}) {
+
+
+		BoxElement.definePropertiesValues( properties, values );
+		super( properties, values );
+		BoxElement.init( this );
+
+	}
+
+	/**
+	 * When the backgroundMesh has been set, bind properties
+	 * @override
+	 */
+	bindBackgroundMeshProperties () {
+
+		// bind the background scale with bounds
+		this._bounds._size = this._backgroundMesh.scale;
+		this._bounds._needsProcess = true;
+
+	}
+
+	/**
+	 * When the backgroundMesh has been unset, unbind properties
+	 * @override
+	 */
+	unbindBackgroundMeshProperties () {
+
+		// detach bounds size
+		this._bounds._size = new Vector3(1,1,1);
+		this._bounds._needsProcess = true;
+
+	}
+
+}
diff --git a/examples/hyperthreemesh/core/elements/HTMInlineBlockElement.js b/examples/hyperthreemesh/core/elements/HTMInlineBlockElement.js
new file mode 100644
index 00000000..0c7c1636
--- /dev/null
+++ b/examples/hyperthreemesh/core/elements/HTMInlineBlockElement.js
@@ -0,0 +1,94 @@
+import HTMBaseElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMBaseElement';
+import { Vector3 } from 'three';
+import { InlineBlock } from 'three-mesh-ui';
+
+/**
+ * @extends {MeshUIBaseElement}
+ */
+export default class HTMInlineBlockElement extends HTMBaseElement {
+
+	/**
+	 *
+	 * @param {Object.<string,any>} [values={}]
+	 */
+	constructor( values = {}) {
+
+		const properties = {};
+		InlineBlock.definePropertiesValues( properties, values );
+		super( properties, values );
+		InlineBlock.init( this );
+
+	}
+
+	clear() {
+
+		// remove cross reference
+		for ( const inline of this._inlines._value ) {
+			inline.clear();
+		}
+
+		return super.clear();
+	}
+
+	/**
+	 * When the backgroundMesh has been set, bind properties
+	 * @override
+	 */
+	bindBackgroundMeshProperties () {
+
+		// bind the background scale with bounds
+		this._bounds._size = this._backgroundMesh.scale;
+		this._bounds._needsUpdate = true;
+
+	}
+
+	/**
+	 * When the backgroundMesh has been unset, unbind properties
+	 * @override
+	 */
+	unbindBackgroundMeshProperties () {
+
+		// detach bounds size
+		this._bounds._size = new Vector3(1,1,1);
+		this._bounds._needsUpdate = true;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) { /* eslint-enable no-unused-vars */
+
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			const argument = arguments[ i ];
+
+			if ( !argument.isUI ) {
+
+				validChildren.push( argument );
+
+				argument.position.z = 0.005;
+
+			} else {
+
+				console.warn( 'ThreeMeshUI::InlineBlockElement cannot contains UI Elements.', argument );
+
+			}
+
+		}
+
+		return super.add( ...validChildren );
+
+	}
+
+}
diff --git a/examples/hyperthreemesh/core/elements/HTMInlineElement.js b/examples/hyperthreemesh/core/elements/HTMInlineElement.js
new file mode 100644
index 00000000..0177f0d6
--- /dev/null
+++ b/examples/hyperthreemesh/core/elements/HTMInlineElement.js
@@ -0,0 +1,83 @@
+import HTMBaseElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMBaseElement';
+import InlineElement from '../../../../src/elements/basic/InlineElement';
+
+/**
+ * @extends {MeshUIBaseElement}
+ */
+export default class HTMInlineElement extends HTMBaseElement {
+
+	/**
+	 *
+	 * @param {Object.<string,any>} [values={}]
+	 */
+	constructor( values = {}) {
+
+		const properties = {};
+		InlineElement.definePropertiesValues( properties, values );
+		super( properties, values );
+		InlineElement.init( this );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * A Text Element can only contains inline elements
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) { /* eslint-enable no-unused-vars */
+
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			const argument = arguments[ i ];
+
+			if ( !argument.isUI || argument.isInline ) {
+
+				validChildren.push( argument );
+
+				argument.position.z = 0.005;
+
+			} else {
+
+				console.warn( 'Block element can only contain Box elements.', argument );
+
+			}
+
+		}
+
+		return super.add( ...validChildren );
+
+	}
+
+	_rebuildParentUI = () => {
+
+		super._rebuildParentUI();
+
+		this._layouter._needsUpdate = true;
+
+	}
+
+	set textContent( value ) {
+
+		this._textContent.value = value;
+
+	}
+
+	get textContent () { return this._textContent._value; }
+
+	set invertAlpha( value ) {
+
+		this._invertAlpha.value = value;
+
+	}
+
+	get invertAlpha () { return this._invertAlpha._value; }
+
+}
diff --git a/examples/hyperthreemesh/core/elements/HTMTextElement.js b/examples/hyperthreemesh/core/elements/HTMTextElement.js
new file mode 100644
index 00000000..ebfc706f
--- /dev/null
+++ b/examples/hyperthreemesh/core/elements/HTMTextElement.js
@@ -0,0 +1,108 @@
+import HTMBoxElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMBoxElement';
+import TextElement from '../../../../src/elements/basic/TextElement';
+import HTMInlineElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMInlineElement';
+
+/**
+ * @extends {MeshUIBaseElement}
+ */
+export default class HTMTextElement extends HTMBoxElement {
+
+	/**
+	 *
+	 * @param {Object.<string,any>} [values={}]
+	 * @param {Object.<string,any>} [properties={}]
+	 */
+	constructor( values= {}, properties = {}) {
+
+		TextElement.definePropertiesValues( properties, values );
+		super( properties, values );
+		TextElement.init( this );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * A Text Element can only contains inline elements
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) { /* eslint-enable no-unused-vars */
+
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
+		let updateLayout = false;
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			const argument = arguments[ i ];
+
+			if ( !argument.isUI || argument.isInline ) {
+
+				if( argument.isInline ) {
+					updateLayout = true;
+				}
+
+				validChildren.push( argument );
+
+			} else {
+
+				console.warn( 'Text element can only contain Inline elements.', argument );
+
+			}
+
+		}
+
+		if( validChildren.length > 0 ) {
+
+			super.add( ...validChildren )
+
+		}
+
+		if( updateLayout ) this._layouter._needsProcess = true;
+
+
+		return this;
+
+	}
+
+
+	set textContent ( value ) {
+
+		for ( let i = this.children.length - 1 ; i >= 0; i-- ) {
+			const child = this.children[ i ];
+			if( child.isUI ) {
+
+				this.remove( child );
+				child.clear();
+
+			}
+
+		}
+
+		if( value ) {
+
+			this.add( new HTMInlineElement({tagName:'anonymous-span',textContent:value}));
+
+		}
+
+	}
+
+	get textContent ( ) {
+		return super.textContent;
+	}
+
+	set invertAlpha( value ) {
+
+		this._invertAlpha.value = value;
+
+	}
+
+	get invertAlpha () { return this._invertAlpha._value; }
+
+	get lines() { return this._layouter._value; }
+
+}
diff --git a/examples/hyperthreemesh/core/properties/ListStyleProperty.js b/examples/hyperthreemesh/core/properties/ListStyleProperty.js
new file mode 100644
index 00000000..cec30a8c
--- /dev/null
+++ b/examples/hyperthreemesh/core/properties/ListStyleProperty.js
@@ -0,0 +1,27 @@
+import SubStyleProperty from 'three-mesh-ui/src/core/properties/style-properties/SubStyleProperty';
+
+export default class ListStyleProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'listStyle', 'inherit', true );
+
+	}
+
+	isValidValue( value ) {
+
+		return _validValues.indexOf( value ) !== -1;
+
+	}
+
+	getDefaultValue() {
+
+		return 'square';
+
+	}
+
+}
+
+const _validValues = ['square','disc','circle', 'decimal', 'lower-roman'];
+
+
diff --git a/examples/hyperthreemesh/core/properties/ListStylePropertyInlineBlock.js b/examples/hyperthreemesh/core/properties/ListStylePropertyInlineBlock.js
new file mode 100644
index 00000000..0dc00114
--- /dev/null
+++ b/examples/hyperthreemesh/core/properties/ListStylePropertyInlineBlock.js
@@ -0,0 +1,91 @@
+import ListStyleProperty from 'three-mesh-ui/examples/hyperthreemesh/core/properties/ListStyleProperty';
+
+export default class ListStylePropertyInlineBlock extends ListStyleProperty {
+
+	constructor() {
+
+		super();
+
+		this._input = 'inherit';
+		this._allowsInherit = false;
+
+		this.computeOutputValue = this._computeFromInherited;
+
+	}
+
+	_computeFromInherited( element ) {
+
+		super._computeFromInherited( element );
+
+		switch ( this._value ){
+
+			case 'square':
+				element.visible = true;
+				element._textCounterPart.visible = false;
+				element._borderRadius.inline = 0;
+				break;
+
+
+			case 'circle':
+				element._borderWidth.inline = 0.004;
+				element._backgroundOpacity.inline = 0;
+			// falls through
+			case 'disc':
+				element.visible = true;
+				element._textCounterPart.visible = false;
+				element._borderRadius.inline = 100;
+				break;
+
+			case 'decimal':
+				element.visible = false;
+				element._textCounterPart.visible = true;
+				break;
+
+			case 'lower-roman':
+				element.visible = false;
+				element._textCounterPart.visible = true;
+				element._textCounterPart.textContent = _romanNumber(element._listIndex).toLowerCase()+".";
+				break;
+
+			case 'upper-roman':
+				element.visible = false;
+				element._textCounterPart.visible = true;
+				element._textCounterPart.textContent = _romanNumber(element._listIndex)+".";
+				break;
+
+		}
+
+		element._fontSize._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+}
+
+function _romanNumber(num) {
+	var roman = {
+		M: 1000,
+		CM: 900,
+		D: 500,
+		CD: 400,
+		C: 100,
+		XC: 90,
+		L: 50,
+		XL: 40,
+		X: 10,
+		IX: 9,
+		V: 5,
+		IV: 4,
+		I: 1
+	};
+	var str = '';
+
+	for (var i of Object.keys(roman)) {
+		var q = Math.floor(num / roman[i]);
+		num -= q * roman[i];
+		str += i.repeat(q);
+	}
+
+	return str;
+}
+
diff --git a/examples/hyperthreemesh/core/properties/hierarchy/ChildrenList.js b/examples/hyperthreemesh/core/properties/hierarchy/ChildrenList.js
new file mode 100644
index 00000000..953aa71b
--- /dev/null
+++ b/examples/hyperthreemesh/core/properties/hierarchy/ChildrenList.js
@@ -0,0 +1,30 @@
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import HTMListItem from 'three-mesh-ui/examples/hyperthreemesh/elements/HTMListItem';
+import ChildrenBox from 'three-mesh-ui/src/core/properties/hierarchy/ChildrenBox';
+/* eslint-enable no-unused-vars */
+
+export default class ChildrenList extends ChildrenBox {
+
+	constructor() {
+
+		super( 'children', null, false );
+
+	}
+
+
+
+	_compute( element ) {
+
+		super._compute( element );
+
+		const lis = this._uis.filter( element => element instanceof HTMListItem );
+		for ( let i = 0; i < lis.length; i++ ) {
+			lis[ i ]._listStyleElementBlock._listIndex = (i+1);
+			lis[ i ]._listStyleElementBlock._listStyle._needsUpdate = true;
+		}
+
+	}
+
+}
diff --git a/examples/hyperthreemesh/core/utils/NamedMap.js b/examples/hyperthreemesh/core/utils/NamedMap.js
new file mode 100644
index 00000000..f0d166a0
--- /dev/null
+++ b/examples/hyperthreemesh/core/utils/NamedMap.js
@@ -0,0 +1,168 @@
+export default class NamedMap {
+
+	/**
+	 *
+	 * @param callback
+	 * @param entries
+	 */
+	constructor( callback, entries = {} ) {
+
+		this._callback = callback;
+
+		this._map = new Map();
+
+		//
+		for ( const entryName in entries ) {
+			this.set( entryName, entries[ entryName ] );
+		}
+
+	}
+
+	clear(){
+
+		this._map.clear();
+
+	}
+
+	/**
+	 *
+	 * @param {string} name
+	 * @param {string|null} [value=null]
+	 */
+	set( name, value = null ) {
+
+		// undefined value is remove
+		if( value === undefined ) {
+
+			this.remove( name );
+
+		}
+
+		this._map.set( name, value );
+		this._callback();
+	}
+
+	/**
+	 *
+	 * @param name
+	 * @returns {string}
+	 */
+	get( name ) {
+
+		return this._map.get( name );
+
+	}
+
+	/**
+	 *
+	 * @param name
+	 * @return {boolean}
+	 */
+	remove( name ) {
+
+		const removed = this._map.delete( name );
+		this._callback();
+		return removed;
+
+	}
+
+	/**
+	 *
+	 * @param name
+	 * @returns {boolean}
+	 */
+	has( name ) {
+
+		return this._map.has( name );
+
+	}
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	toString(){
+
+		let output = "";
+
+		const entries = this._map.entries();
+		for (const [key, value] of entries ) {
+
+			if( value ){
+
+				output += `[${key}="${value}"]`;
+
+			}else{
+
+				output += `[${key}]`;
+
+			}
+
+		}
+
+		return output;
+	}
+
+	match = ( attributeCondition ) => {
+
+		const name = attributeCondition.name;
+		const value = attributeCondition.value;
+		const operator = attributeCondition.operator;
+
+		// @TODO : Attribute matching case sensitive?
+
+		let v;
+		switch ( operator ) {
+
+			// equals
+			case '=':
+				v = this._map.get( name );
+				return v && v === value;
+
+			// Starts with
+			case "^=":
+				v = this._map.get( name );
+				return v && v.startsWith( value );
+
+			// Contains
+			case "*=":
+				v = this._map.get( name );
+				return v && v.includes( value );
+
+			// Ends with
+			case "$=":
+				v = this._map.get( name );
+				return v && v.endsWith( value );
+
+			case '!==':
+				return this._map.has( name );
+
+			default:
+				console.warn(`NamedMap::match() - The provided operator '${operator}' is not implemented`)
+		}
+
+	}
+
+	matchEvery = ( attributeConditions ) => {
+
+		return attributeConditions.every( this.match );
+
+	}
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		this._callback = false;
+
+		this._map.clear();
+		this._map = null;
+
+		this._map = null;
+
+	}
+
+
+
+}
diff --git a/examples/hyperthreemesh/core/utils/TokenList.js b/examples/hyperthreemesh/core/utils/TokenList.js
new file mode 100644
index 00000000..e3bb9fd5
--- /dev/null
+++ b/examples/hyperthreemesh/core/utils/TokenList.js
@@ -0,0 +1,139 @@
+/**
+ *
+ */
+export default class TokenList {
+
+	/**
+	 *
+	 * @param {function} callback
+	 * @param {...string} tokens
+	 */
+	constructor( callback, ...tokens) {
+
+		this._callback = callback;
+		this._tokens = [...tokens];
+
+	}
+
+	clear(){
+
+		this._tokens = [];
+		this._callback();
+
+	}
+
+	/**
+	 * Check if a token isset on this list
+	 * @param {string} token
+	 * @returns {boolean}
+	 */
+	contains = ( token ) => {
+
+		return this._tokens.indexOf( token ) !== -1;
+
+	}
+
+	/**
+	 * Check if all provided tokens isset on this list
+	 * @param {...string} tokens
+	 * @returns {boolean}
+	 */
+	containsAll = ( ...tokens ) => {
+
+		return tokens.every( this.contains );
+
+	}
+
+	/**
+	 *
+	 * @param {Array.<string>}tokens
+	 * @returns {*}
+	 */
+	containsEvery = ( tokens ) => {
+
+		return tokens.every( this.contains );
+
+	}
+
+	/**
+	 * Adds or remove a token according of its current presence
+	 * @param {string} token
+	 */
+	toggle( token ) {
+
+		if( this.contains( token) ){
+			this.remove( token );
+		}else{
+			this.add( token );
+		}
+
+	}
+
+	/**
+	 * Add tokens
+	 * @param {...string} tokens
+	 */
+	add( ...tokens ){
+
+		for ( const token of tokens ) {
+
+			if( !this.contains( token) ){
+
+				this._tokens.push( token );
+				this._callback();
+
+			}
+
+		}
+
+	}
+
+	/**
+	 * remove tokens
+	 * @param {...string} tokens
+	 */
+	remove( ...tokens ){
+
+		for ( const token of tokens ) {
+
+			const tokenIndex = this._tokens.indexOf( token );
+			if ( tokenIndex !== -1 ) {
+
+				this._tokens.splice( tokenIndex, 1 );
+				this._callback();
+
+			}
+
+		}
+
+	}
+
+	/**
+	 * Convert a token list to a string
+	 * @param {string} delimiter
+	 * @returns {string}
+	 */
+	toString( delimiter ) {
+
+		if( this._tokens.length ){
+			return delimiter + this._tokens.join(delimiter)
+		}
+
+		return "";
+
+	}
+
+	/**
+	 * Clean any recommended values
+	 */
+	dispose() {
+
+		this.containsEvery = null;
+		this.containsAll = null;
+
+		this._callback = null;
+		this._tokens = null;
+
+	}
+
+}
diff --git a/examples/hyperthreemesh/core/utils/css/CSSCondition.js b/examples/hyperthreemesh/core/utils/css/CSSCondition.js
new file mode 100644
index 00000000..a372a5a0
--- /dev/null
+++ b/examples/hyperthreemesh/core/utils/css/CSSCondition.js
@@ -0,0 +1,39 @@
+export default class CSSCondition {
+
+	/**
+	 *
+	 * @param {string} type
+	 * @param {string|null} [value=null]
+	 */
+	constructor( type, value = null ) {
+
+		/**
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		this._type = type;
+
+		/**
+		 *
+		 * @type {string|null}
+		 * @private
+		 */
+		this._value = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get type() { return this._type; }
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get value() { return this._value; }
+
+
+}
diff --git a/examples/hyperthreemesh/core/utils/css/CSSConditionAttribute.js b/examples/hyperthreemesh/core/utils/css/CSSConditionAttribute.js
new file mode 100644
index 00000000..f1ef4569
--- /dev/null
+++ b/examples/hyperthreemesh/core/utils/css/CSSConditionAttribute.js
@@ -0,0 +1,84 @@
+import CSSCondition from './CSSCondition';
+import { CSS_ATTRIBUTE_COMPONENTS_MATCH_REGEX } from './CSSRegex';
+
+export default class CSSConditionAttribute extends CSSCondition {
+
+	/**
+	 *
+	 * @param {Array.<string>} attributesMatches
+	 */
+	constructor( attributesMatches ) {
+
+		super("attribute");
+
+		/**
+		 *
+		 * @type {Array.<AttributeCondition>}
+		 * @private
+		 */
+		this._value = [];
+
+
+		for ( let i = 0; i < attributesMatches.length; i++ ) {
+
+			this._value.push( new AttributeCondition(attributesMatches[ i ]) );
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @returns {Array.<AttributeCondition>}
+	 */
+	get value(){ return this._value; }
+
+}
+
+class AttributeCondition {
+
+	/**
+	 * Parse attribute query string to isolates its components
+	 *
+	 * 	ie: `[disabled]` 				=> {name:'disabled',value:null,operator:'!=='}
+	 * 			`[src="http://"]` 	=> {name:'src',value:"http://",operator:'='}
+	 * 			`[src$="http://"]` 	=> {name:'src',value:"http://",operator:'$='}
+	 *
+	 * @param {string} queryString
+	 */
+	constructor( queryString ) {
+
+		// remove brackets
+		queryString = queryString.substring(1, queryString.length - 1);
+
+		// split string to attributes components
+		const components = queryString.match(CSS_ATTRIBUTE_COMPONENTS_MATCH_REGEX);
+
+		this.name = components[1];
+		this.operator = components[3] || "!==";
+		this.value = components[4] ? _cleanAttributeValue( components[4] ) : undefined
+
+	}
+
+}
+
+/**
+ * Check that attribute value isn't delimited by quotes
+ * @param {string} value
+ * @returns {string}
+ * @private
+ */
+function _cleanAttributeValue ( value ){
+
+	// If the first character is the last character
+	// And first is single or double quotes (css quotes)
+	if( value[0] === value[value.length-1] && (value[0]==='"' || value[0]==="'")){
+
+		// remove the quotes
+		value = value.substring(1,value.length-1);
+
+	}
+
+	return value;
+
+}
diff --git a/examples/hyperthreemesh/core/utils/css/CSSConditionToken.js b/examples/hyperthreemesh/core/utils/css/CSSConditionToken.js
new file mode 100644
index 00000000..704adba6
--- /dev/null
+++ b/examples/hyperthreemesh/core/utils/css/CSSConditionToken.js
@@ -0,0 +1,37 @@
+import CSSCondition from './CSSCondition';
+
+export default class CSSConditionToken extends CSSCondition {
+
+	/**
+	 *
+	 * @param {string} type
+	 * @param {Array.<string>} tokenMatches
+	 */
+	constructor( type, tokenMatches) {
+
+		super(type);
+
+		/**
+		 *
+		 * @type {Array.<string>}
+		 * @private
+		 */
+		this._value = [];
+
+		for ( let i = 0; i < tokenMatches.length; i++ ) {
+
+			// do not take first char into account
+			this._value.push( tokenMatches[ i ].substring(1) );
+
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @returns {Array.<string>}
+	 */
+	get value(){ return this._value; }
+
+
+}
diff --git a/examples/hyperthreemesh/core/utils/css/CSSMediaQuery.js b/examples/hyperthreemesh/core/utils/css/CSSMediaQuery.js
new file mode 100644
index 00000000..e32ffdb6
--- /dev/null
+++ b/examples/hyperthreemesh/core/utils/css/CSSMediaQuery.js
@@ -0,0 +1,102 @@
+/**
+ * JOB: Listen for media query changes, and active or deactivate rules
+ */
+export default class CSSMediaQuery {
+
+	/**
+	 *
+	 * @param {string} condition The media query as string ie:`(orientation: portrait) and screen`
+	 */
+	constructor( condition ) {
+
+		/**
+		 *
+		 * @private
+		 */
+		this._condition = condition;
+
+		/**
+		 *
+		 * @type {Array.<CSSRuleVR>}
+		 * @private
+		 */
+		this._rules = [];
+
+		/**
+		 *
+		 * @type {MediaQueryList}
+		 * @private
+		 */
+		this._matchMediaQuery = window.matchMedia( condition );
+
+	}
+
+	/**
+	 *
+	 * @param {CSSRuleVR} rule
+	 */
+	addRule( rule ) {
+		this._rules.push( rule );
+	}
+
+	/**
+	 *
+	 * @param callback
+	 */
+	init( callback ){
+
+		this._callback = callback;
+
+		this._matchMediaQuery.addEventListener( 'change', this.handleMatchMediaChanges );
+
+		if ( !this._matchMediaQuery.matches ) {
+
+			this.disableRules();
+
+		}
+
+	}
+
+	/**
+	 *
+	 */
+	enableRules() {
+		for ( const rule of this._rules ) {
+			rule.enabled = true;
+		}
+	}
+
+	/**
+	 *
+	 */
+	disableRules() {
+		for ( const rule of this._rules ) {
+			rule.enabled = false;
+		}
+	}
+
+	/**
+	 *
+	 * @param {MediaQueryListEvent} e
+	 */
+	handleMatchMediaChanges = ( e ) => {
+
+		// If the condition match
+		if (e.matches) {
+
+			// enable all rules behind this media query
+			this.enableRules();
+
+		} else {
+
+			// or disable all rules behing this media query
+			this.disableRules();
+
+		}
+
+		// apply rules
+		this._callback();
+
+	}
+
+}
diff --git a/examples/hyperthreemesh/core/utils/css/CSSQuery.js b/examples/hyperthreemesh/core/utils/css/CSSQuery.js
new file mode 100644
index 00000000..51d7a953
--- /dev/null
+++ b/examples/hyperthreemesh/core/utils/css/CSSQuery.js
@@ -0,0 +1,183 @@
+import { CSS_COMBINATORS_MATCH_REGEX, STRING_SEGMENTS_REGEX } from './CSSRegex';
+import CSSQuerySegment from './CSSQuerySegment';
+
+
+export default class CSSQuery extends Array {
+
+	/**
+	 *
+	 * @param {CSSQuerySegment} items
+	 */
+	constructor( ...items ){
+		super( ...items );
+	}
+
+
+	/**
+	 *
+	 * @param {MeshUIComponent} tmElement
+	 * @returns {boolean}
+	 */
+	match( tmElement ) {
+
+		//check that last segment could be this element
+
+		/**
+		 * @type {CSSQuerySegment}
+		 */
+		const lastQuery = this[this.length-1];
+
+		// if the last segment query doesn't match the element, it doesn't match
+		if( !lastQuery.match(tmElement) ) return false;
+
+		// so, the last segment matched, now try to match any previous segment with element parents
+		// if it was only one segment, the element matched the query
+		if( this.length === 1 ) return true;
+
+		const parentsList = [];
+
+		let childElement = tmElement;
+		while ( childElement.parentUI ){
+			parentsList.push( childElement.parentUI );
+			childElement = childElement.parentUI;
+		}
+
+		// if no parent and more segments to check
+		if( parentsList.length === 0 ) return false;
+
+
+
+		/**
+		 *
+		 * @type {MeshUIComponent}
+		 */
+		let lastMatchedElement = tmElement;
+
+		/**
+		 *
+		 * @type {MeshUIComponent}
+		 */
+		let elementToMatch = null;
+
+		// check previous segments
+		for ( let i = this.length - 2; i >= 0; i-- ) {
+
+			const querySegment = this[ i ];
+
+			if( parentsList.length === 0) return false;
+
+			elementToMatch = parentsList.shift();
+
+			if ( !lastQuery.combinator || lastQuery.combinator === '' ) {
+
+				while ( !querySegment.match( elementToMatch ) ){
+
+					// if no more parent to check
+					if( parentsList.length === 0 ) return false;
+
+					// if the number of parent is less than the required segment to check
+					if( parentsList.length < i+1 ) return false;
+
+					elementToMatch = parentsList.shift();
+
+				}
+
+				lastMatchedElement = elementToMatch;
+
+
+				// look in any parents
+			}
+			else if (lastQuery.combinator === '>' ) {
+
+				// only look in first parent
+				if( !querySegment.match( elementToMatch) ) return false;
+				lastMatchedElement = elementToMatch;
+
+			}
+
+			// siblings combinator
+			else if (  lastQuery.combinator === '~' || lastQuery.combinator === '+' ) {
+
+				// retrieve the childIndex of the current target
+				const currentIndex = elementToMatch.childrenUIs.indexOf( lastMatchedElement );
+
+				// build the siblings list to check
+				let adjacentSiblings;
+
+				// General sibling, next query segments apply on any further children
+				if ( lastQuery.combinator === '~' ) {
+					adjacentSiblings = elementToMatch.childrenUIs.slice( currentIndex + 1 );
+				} else {
+					// adjacent sibling, next query segment apply only to next sibling
+					adjacentSiblings = elementToMatch.childrenUIs.slice( currentIndex + 1, currentIndex + 2 );
+				}
+
+				// Looks to siblings, not recursively
+				for ( let i = 0; i < adjacentSiblings.length; i++ ) {
+
+					if( querySegment.match( adjacentSiblings[i]) ) {
+
+						lastMatchedElement = elementToMatch;
+						break;
+
+					}
+
+				}
+
+			}
+
+		}
+
+		return true;
+	}
+
+	/**
+	 * Build a CSSQuery from a queryString
+	 * @param {string} queryString
+	 * @returns {CSSQuery}
+	 */
+	static build( queryString ) {
+
+		// Match all strings segments to be ignored
+		const stringSegmentsMatch = queryString.matchAll( STRING_SEGMENTS_REGEX );
+
+		// Replace all string segments by "_" without loosing the length of the queryString
+		// this will allow to ignore specials chars contained in string segments
+		const queryStringAsArray = queryString.split("");
+		for ( const stringSegmentMatch of stringSegmentsMatch ) {
+
+			for ( let i = 0; i < stringSegmentMatch[1].length; i++ ) {
+				queryStringAsArray[(stringSegmentMatch.index+i)] = "_";
+			}
+
+		}
+
+		const queryLevelsMatches = queryStringAsArray.join("").matchAll(CSS_COMBINATORS_MATCH_REGEX);
+		if( !queryLevelsMatches ) return [];
+
+		// Retrieve all index where query levels starts
+		const indexes = []
+		for ( const match of queryLevelsMatches ) {
+
+			indexes.push( match.index );
+
+		}
+
+		// complete indexes
+		indexes.push( queryString.length );
+
+		// Now all levels can be retrieve on the provided string from computed indexes
+		const query = new CSSQuery();
+
+		for ( let i = 0; i < indexes.length-1; i++ ) {
+
+			query.push( new CSSQuerySegment( queryString.substring(indexes[i],indexes[i+1]) ) );
+
+		}
+
+		return query;
+
+	}
+
+
+}
diff --git a/examples/hyperthreemesh/core/utils/css/CSSQuerySegment.js b/examples/hyperthreemesh/core/utils/css/CSSQuerySegment.js
new file mode 100644
index 00000000..a9d9d5f8
--- /dev/null
+++ b/examples/hyperthreemesh/core/utils/css/CSSQuerySegment.js
@@ -0,0 +1,152 @@
+import { CSS_ATTRIBUTES_MATCH_REGEX, CSS_CLASSES_MATCH_REGEX, CSS_COMBINATORS_REPLACE_REGEX, CSS_ID_MATCH_REGEX, CSS_PSEUDO_CLASS_MATCH_REGEX, CSS_TAGNAME_MATCH_REGEX } from './CSSRegex';
+import CSSConditionAttribute from './CSSConditionAttribute';
+import CSSCondition from './CSSCondition';
+import CSSConditionToken from './CSSConditionToken';
+
+export default class CSSQuerySegment {
+
+	/**
+	 *
+	 * @param {string} queryString
+	 */
+	constructor( queryString ) {
+
+		// find the css combinator of the segment
+		const combinator = queryString.match( CSS_COMBINATORS_REPLACE_REGEX );
+
+		/**
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		this._query = queryString;
+
+		/**
+		 *
+		 * @type {string|null}
+		 * @private
+		 */
+		this._combinator = combinator ? combinator[ 0 ].trim() : null;
+
+		/**
+		 *
+		 * @type {Array<CSSCondition|CSSConditionToken|CSSConditionAttribute>}
+		 * @private
+		 */
+		this._conditions = _buildConditions(
+			// css combinator should not be processed as condition
+			queryString.replace( CSS_COMBINATORS_REPLACE_REGEX, '' )
+		);
+
+	}
+
+	/**
+	 *
+	 * @returns {Array<CSSCondition|CSSConditionToken|CSSConditionAttribute>}
+	 */
+	get conditions() { return this._conditions; }
+
+	/**
+	 *
+	 * @returns {string|null}
+	 */
+	get combinator(){ return this._combinator; }
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get query() { return this._query; }
+
+	/**
+	 *
+	 * @param {MeshUIComponent} target
+	 * @returns {boolean}
+	 */
+	match( target ) {
+
+		return this._conditions.every( ( condition ) => {
+
+			switch ( condition.type ) {
+
+				case "id":
+					return target.elementID === condition.value;
+
+				case "class":
+					return target.classList.containsEvery( condition.value );
+
+				case "pseudoClass":
+					return target.pseudoClassList.containsEvery( condition.value );
+
+				case "tag":
+					return target.tagName.toLowerCase() === condition.value;
+
+				case "attribute":
+					return target.attributes.matchEvery( condition.value );
+
+				default:
+					console.warn(`CSSQuerySegment::match() - '${condition.type}' is not implemented!`);
+					return true;
+			}
+
+		})
+
+	}
+
+}
+
+/**
+ * Convert a querySegment to conditions list
+ * @param {string} queryString
+ * @return {Array.<CSSCondition|CSSConditionToken|CSSConditionAttribute>}
+ * @private
+ */
+function _buildConditions( queryString ) {
+
+	const conditions = [];
+
+	// Starts by processing attributes query
+	const attributesMatches = queryString.match( CSS_ATTRIBUTES_MATCH_REGEX );
+	if ( attributesMatches ) {
+
+		conditions.push( new CSSConditionAttribute( attributesMatches ) );
+
+	}
+
+	// update the query string to remove attributes which may contains noise for other regexes
+	queryString = queryString.replace( CSS_ATTRIBUTES_MATCH_REGEX, '' );
+
+	const idMatches = queryString.match( CSS_ID_MATCH_REGEX );
+	if ( idMatches ) {
+
+		conditions.push( new CSSCondition( 'id', idMatches[ 2 ] ) );
+
+	}
+
+	const classMatches = queryString.match( CSS_CLASSES_MATCH_REGEX );
+	if ( classMatches ) {
+
+		conditions.push( new CSSConditionToken( 'class', classMatches ) );
+
+	}
+
+	const pseudoClassMatches = queryString.match( CSS_PSEUDO_CLASS_MATCH_REGEX );
+	if ( pseudoClassMatches ) {
+
+		conditions.push( new CSSConditionToken( 'pseudoClass', pseudoClassMatches ) );
+
+	}
+
+	const requestedTagName = queryString
+		.replace( CSS_COMBINATORS_REPLACE_REGEX, '' )
+		.match( CSS_TAGNAME_MATCH_REGEX, '' );
+
+	if ( requestedTagName && requestedTagName[ 0 ] ) {
+
+		conditions.push( new CSSCondition( 'tag', requestedTagName[ 0 ] ) );
+
+	}
+
+	return conditions;
+
+}
diff --git a/examples/hyperthreemesh/core/utils/css/CSSRegex.js b/examples/hyperthreemesh/core/utils/css/CSSRegex.js
new file mode 100644
index 00000000..8423d9fe
--- /dev/null
+++ b/examples/hyperthreemesh/core/utils/css/CSSRegex.js
@@ -0,0 +1,62 @@
+/* eslint-disable no-useless-escape */
+
+/**
+ * This regex can isolate string parts of css queries
+ * 		ie: `.my-class[data-foo="foobar is a string segment"]`
+ *
+ * @type RegExp
+ */
+export const STRING_SEGMENTS_REGEX = /((?:")([^"]*)(?:"))/g;
+
+/**
+ * This regex can split a CSS Combinator and the following query segment
+ * @see https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators
+ *
+ * @type RegExp
+ */
+export const CSS_COMBINATORS_MATCH_REGEX = /([ >~+]*)([^+>~ ]+)/g;
+
+/**
+ * This regex isolates css combinators
+ * @type RegExp
+ */
+export const CSS_COMBINATORS_REPLACE_REGEX = /^[ >~+]+/;
+
+/**
+ * This regex isolates css id
+ * @type RegExp
+ * */
+export const CSS_ID_MATCH_REGEX = /(#)([\w_-]+)/;
+
+/**
+ * This regex isolates classes.
+ * This must be ran after any string segments has been removed (attributes)
+ * @type RegExp
+ */
+export const CSS_CLASSES_MATCH_REGEX = /(\.)([\w_-]+)/g;
+
+/**
+ * This regex isolates pseudo-classes
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
+ * @type RegExp
+ */
+export const CSS_PSEUDO_CLASS_MATCH_REGEX = /(:)([A-z0-9\-_]*)/g;
+
+/**
+ * This regex isolates tagname in css queries
+ * @type RegExp
+ */
+export const CSS_TAGNAME_MATCH_REGEX = /^[^#\.:\[]*/g;
+
+/**
+ * This regex isolates attributes
+ * @type {RegExp}
+ */
+export const CSS_ATTRIBUTES_MATCH_REGEX = /(\[([^\]]*)\])/g;
+
+/**
+ * This regex split isolated attributes into its components
+ * @type {RegExp}
+ */
+export const CSS_ATTRIBUTE_COMPONENTS_MATCH_REGEX = /([^*~$^=]+)(([*~$^]?=)(.*))?/;
+/* eslint-enable no-useless-escape */
diff --git a/examples/hyperthreemesh/core/utils/css/CSSRuleVR.js b/examples/hyperthreemesh/core/utils/css/CSSRuleVR.js
new file mode 100644
index 00000000..c2e80b33
--- /dev/null
+++ b/examples/hyperthreemesh/core/utils/css/CSSRuleVR.js
@@ -0,0 +1,189 @@
+import CSSQuery from './CSSQuery';
+import CSSSpecificity from './CSSSpecificity';
+import { Color } from 'three';
+
+export default class CSSRuleVR {
+
+	/**
+	 *
+	 * @param {string} queryString
+	 * @param {Object.<string, string>} styles
+	 * @param {Object.<string, string>} [lookupTable=null]
+	 */
+	constructor( queryString, styles, lookupTable = null ) {
+
+		/**
+		 *
+		 * @type {CSSQuery}
+		 * @private
+		 */
+		this._query = CSSQuery.build( queryString );
+
+		/**
+		 *
+		 * @type {number}
+		 * @private
+		 */
+		this._specificity = CSSSpecificity( this._query );
+
+		/**
+		 *
+		 * @type {number}
+		 * @private
+		 */
+		this._order = 0;
+
+		this._styles = {};
+
+		// Build styles
+		// @TODO: Could use a lookup table for property and/or value conversion
+		for ( let k = 0; k < styles.length; k++ ) {
+			const styleProperty = styles[ k ];
+
+			let value = styles[styleProperty];
+
+			if( value.match(/rem|px|em/g) ) {
+
+				if( styleProperty.startsWith('font')){
+					console.error( styleProperty, value)
+				}
+
+				if( value.match(/[\d\s]em/g) && styleProperty.startsWith('font') ){
+					// allow
+					console.error( "allowed", value, styleProperty)
+
+				}else{
+					value = parseFloat( value.replace( /rem|px|em/g, '' ) );
+				}
+
+			}
+
+			if( styleProperty.indexOf('color') !== -1 ) {
+
+				// if the value comes with packed alpha
+				if( value.indexOf('rgba') === 0 || value.indexOf('hsla') === 0 ) {
+
+					// extract rgba components
+					/* eslint-disable no-useless-escape */
+					const colorComponents = value.match(/([\d\.]+)/g);
+					/* eslint-enable no-useless-escape */
+
+					// To apply alpha too
+					if( colorComponents.length === 4 ) {
+
+						let alphaProperty = styleProperty.replace('color', 'opacity');
+						if( alphaProperty === 'opacity' ) {
+							alphaProperty = 'fontOpacity';
+						}
+
+						// If it is not previously defined
+						if( !styles[alphaProperty] || styles[alphaProperty] === "" ){
+							this._styles[_camelize(alphaProperty)] = parseFloat( colorComponents[3] );
+						}
+
+					}
+
+					value = new Color( `rgb(${colorComponents[0]},${colorComponents[1]},${colorComponents[2]})` );
+
+				} else {
+
+					value = new Color( value );
+
+						// rgb, hsl, style or hex uses alpha 1
+						let alphaProperty = styleProperty.replace('color', 'opacity');
+						if( alphaProperty === 'opacity' ) {
+							alphaProperty = 'fontOpacity';
+						}
+
+						// If it is not previously defined
+						if( !styles[alphaProperty] || styles[alphaProperty] === "" ){
+							this._styles[_camelize(alphaProperty)] = 1.0;
+						}
+
+
+
+
+				}
+
+			}
+
+			// try to update the property according to lookup table
+			let property = _camelize(styleProperty);
+			if( lookupTable && lookupTable[property] ) {
+
+				property = lookupTable[property];
+
+			}
+
+			this._styles[property] = value;
+
+		}
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		this._enabled = true;
+
+	}
+
+	/**
+	 *
+	 * @returns {boolean}
+	 */
+	get enabled() { return this._enabled; }
+
+	/**
+	 *
+	 * @param v
+	 */
+	set enabled( v ) {
+		this._enabled = v;
+	}
+
+	/**
+	 *
+	 * @returns {CSSQuery}
+	 */
+	get query(){ return this._query; }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get specificity() { return this._specificity; }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get order() { return this._order; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set order( v ) {
+
+		this._order = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {Object.<string,any>}
+	 */
+	get styles() { return this._styles; }
+
+}
+
+/**
+ *
+ * @param {string} s
+ * @returns {string}
+ * @private
+ */
+function _camelize( s ) {
+	return s.replace( /-./g, x => x[ 1 ].toUpperCase() );
+}
diff --git a/examples/hyperthreemesh/core/utils/css/CSSSpecificity.js b/examples/hyperthreemesh/core/utils/css/CSSSpecificity.js
new file mode 100644
index 00000000..10e5318c
--- /dev/null
+++ b/examples/hyperthreemesh/core/utils/css/CSSSpecificity.js
@@ -0,0 +1,45 @@
+import CSSQuery from './CSSQuery';
+
+/**
+ * Compute the specificity of a CSSQuery
+ * @param {CSSQuery|string} query
+ * @returns {number}
+ */
+export default function ( query ) {
+
+	// Ensure we have a query object
+	if( !(query instanceof CSSQuery) ){
+		query = CSSQuery.build( query );
+	}
+
+	let specificity = 0;
+
+	for ( let i = 0; i < query.length; i++ ) {
+		const querySegment = query[ i ];
+
+		for ( let j = 0; j < querySegment.conditions.length; j++ ) {
+			const condition = querySegment.conditions[j];
+
+			switch ( condition.type ) {
+				case 'id':
+					specificity += 10000;
+					break;
+
+				case 'class':
+				case 'pseudoClass':
+				case 'attribute':
+					specificity += condition.value.length * 100;
+					break;
+
+				default:
+					specificity += 1;
+
+			}
+
+		}
+
+	}
+
+	return specificity;
+
+}
diff --git a/examples/hyperthreemesh/elements/HTMButton.js b/examples/hyperthreemesh/elements/HTMButton.js
new file mode 100644
index 00000000..6c927720
--- /dev/null
+++ b/examples/hyperthreemesh/elements/HTMButton.js
@@ -0,0 +1,62 @@
+import HTMTextElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMTextElement';
+
+export default class HTMButton extends HTMTextElement{
+
+	constructor( values = {} ) {
+
+		const value = values.value ? values.value : '';
+
+
+		super( values );
+
+		this.setAttribute('value', value);
+
+	}
+
+	/*********************************************************************************************************************
+	 * PROVIDES AN API OVER `attributes`
+	 ********************************************************************************************************************/
+
+	/**
+	 *
+	 * @param {string|any} v
+	 */
+	set value( v ) {
+
+		this.setAttribute('value', v );
+
+	}
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get value() {
+
+		return this.getAttribute( 'value' );
+
+	}
+
+	set disabled( v ) {
+
+		if( v ) {
+
+			this.setAttribute( 'disabled', null );
+			this.activatePseudoState( 'disabled' );
+
+		} else {
+
+			this.removeAttribute('disabled' );
+			this.deactivatePseudoState( 'disabled' )
+
+		}
+
+	}
+
+	get disabled() {
+
+		return this.hasAttribute('disabled')
+
+	}
+
+}
diff --git a/examples/hyperthreemesh/elements/HTMButtonRadio.js b/examples/hyperthreemesh/elements/HTMButtonRadio.js
new file mode 100644
index 00000000..cc0b4b21
--- /dev/null
+++ b/examples/hyperthreemesh/elements/HTMButtonRadio.js
@@ -0,0 +1,39 @@
+import HTMButtonToggle from 'three-mesh-ui/examples/hyperthreemesh/elements/HTMButtonToggle';
+
+export default class HTMButtonRadio extends HTMButtonToggle {
+
+	constructor( values = {} ) {
+		super( values );
+
+		this.attributes.set('type','radio');
+	}
+
+
+	_clicked( intersect ) {
+
+		if( this.hasAttribute('checked') ) return;
+
+		for ( const element of this._group._elements ) {
+
+			if( element.hasAttribute('checked') ){
+
+				element.removeAttribute('checked');
+				element.deactivatePseudoState('checked');
+
+			}
+
+		}
+
+		this.setAttribute('checked', null);
+		this.activatePseudoState('checked');
+
+		this.dispatchEvent( {type:'change', value:this.getAttribute('value')});
+
+		// and dispatch click
+		intersect.type = 'click';
+		this.dispatchEvent( intersect );
+
+	}
+
+
+}
diff --git a/examples/hyperthreemesh/elements/HTMButtonToggle.js b/examples/hyperthreemesh/elements/HTMButtonToggle.js
new file mode 100644
index 00000000..9f3a47b1
--- /dev/null
+++ b/examples/hyperthreemesh/elements/HTMButtonToggle.js
@@ -0,0 +1,114 @@
+import HTMButton from 'three-mesh-ui/examples/hyperthreemesh/elements/HTMButton';
+import { getGroupByName } from 'three-mesh-ui/examples/hyperthreemesh/core/Group';
+import HTMInlineBlockElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMInlineBlockElement';
+import HTMInlineElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMInlineElement';
+
+export default class HTMButtonToggle extends HTMButton {
+
+	constructor( values = {} ) {
+
+		const group = values.group ? values.group : 'default';
+
+		let textContent = null;
+		if( values.textContent ) {
+			textContent = values.textContent;
+			delete values.textContent;
+		}
+
+		let value = null;
+		if( values.value !== undefined ) {
+			value = values.value;
+			delete values.value;
+		}
+
+		super( values );
+
+		this.setAttribute( 'type', 'toggle');
+		this.setAttribute( 'value', value);
+
+		this._group = getGroupByName( group, true );
+
+		this._group.add( this );
+
+		//
+		this._ascent = new HTMInlineBlockElement( {
+			tagName:'ascent',
+			borderRadius:0.015,
+			borderWidth:0.008,
+			borderColor:0xff0099,
+			backgroundColor:0x000000,
+			margin: 0.01,});
+
+		this._label = new HTMInlineElement({tagName:'label'});
+
+		this.add( this._ascent, this._label );
+
+		if( textContent ) {
+			this.textContent = textContent;
+		}
+
+	}
+
+
+	clear() {
+
+		this._group.remove( this );
+
+		return super.clear();
+
+	}
+
+	/*********************************************************************************************************************
+	 * Raycast Implementations
+	 ********************************************************************************************************************/
+
+	_clicked( intersect ) {
+
+		if( this.hasAttribute('checked') ) {
+			this.removeAttribute('checked');
+			this.deactivatePseudoState('checked');
+		}else{
+			this.setAttribute('checked', null);
+			this.activatePseudoState('checked');
+		}
+
+		this.dispatchEvent( {type:'change', value:this.getAttribute('value')});
+
+		intersect.type = 'click';
+		this.dispatchEvent( intersect );
+
+	}
+
+
+	/*********************************************************************************************************************
+	 * PROVIDES AN API OVER `attributes` ?
+	 ********************************************************************************************************************/
+
+	set checked( v ) {
+
+		this.setAttribute( 'checked', null );
+
+	}
+
+	get checked( ) {
+
+		return this.hasAttribute('checked');
+
+	}
+
+	set textContent( v ) {
+
+		this._label.textContent = v;
+
+	}
+
+	get textContent() {
+
+		return this._label.textContent;
+
+	}
+
+	get label() { return this._label; }
+
+
+}
diff --git a/examples/hyperthreemesh/elements/HTMImage.js b/examples/hyperthreemesh/elements/HTMImage.js
new file mode 100644
index 00000000..f0abc153
--- /dev/null
+++ b/examples/hyperthreemesh/elements/HTMImage.js
@@ -0,0 +1,31 @@
+import HTMBlockElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMBlockElement';
+import { TextureLoader } from 'three';
+
+export default class HTMImage extends HTMBlockElement{
+
+	constructor( values = {}, properties = {} ) {
+
+		if( values.backgroundOpacity === undefined ) values.backgroundOpacity = 1;
+		if( values.backgroundColor === undefined ) values.backgroundColor = 0xffffff;
+		if( !values.backgroundSize ) values.backgroundSize = 'stretch';
+
+		values.width = 1;
+		values.height = 1;
+
+		super(values, properties);
+
+	}
+
+	setAttribute( attributeName, value= null ) {
+
+		this._attributes.set( attributeName, value );
+
+		if( attributeName === 'src' ){
+			new TextureLoader().load(value, (texture)=>{
+				this._backgroundImage.inline = texture;
+			})
+		}
+
+	}
+
+}
diff --git a/examples/hyperthreemesh/elements/HTMList.js b/examples/hyperthreemesh/elements/HTMList.js
new file mode 100644
index 00000000..c2616fbf
--- /dev/null
+++ b/examples/hyperthreemesh/elements/HTMList.js
@@ -0,0 +1,40 @@
+import HTMBlockElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMBlockElement';
+import ListStyleProperty from 'three-mesh-ui/examples/hyperthreemesh/core/properties/ListStyleProperty';
+import ChildrenBox from 'three-mesh-ui/src/core/properties/hierarchy/ChildrenBox';
+import ChildrenList from 'three-mesh-ui/examples/hyperthreemesh/core/properties/hierarchy/ChildrenList';
+
+export default class HTMList extends HTMBlockElement{
+
+	constructor( values = {}, properties = {} ) {
+
+		// let listStyle = values.tagName.toLowerCase() === 'ol' ? 'decimal' : 'disc';
+		let listStyle = values.tagName.toLowerCase() === 'ol' ? 'lower-roman' : 'disc';
+
+		console.log( listStyle )
+
+		if( values.listStyle ) {
+			listStyle = values.listStyle;
+			delete values.listStyle;
+		}
+
+		// if( values.margin === undefined ) values.margin = '0.5em';
+		if( values.width === undefined) values.width = '100%';
+
+		if( !properties.children ) properties.children = ChildrenList;
+
+		super(values, properties);
+
+		this.appendProperty( "listStyle", new ListStyleProperty() )
+
+		this.listStyle = listStyle;
+	}
+
+	set listStyle( value ){
+		this._listStyle.inline = value;
+	}
+
+	get listStyle(){
+		return this._listStyle.inline;
+	}
+
+}
diff --git a/examples/hyperthreemesh/elements/HTMListItem.js b/examples/hyperthreemesh/elements/HTMListItem.js
new file mode 100644
index 00000000..29a8f642
--- /dev/null
+++ b/examples/hyperthreemesh/elements/HTMListItem.js
@@ -0,0 +1,76 @@
+import HTMTextElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMTextElement';
+import HTMInlineElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMInlineElement';
+import ListStyleProperty from 'three-mesh-ui/examples/hyperthreemesh/core/properties/ListStyleProperty';
+import ListStylePropertyInlineBlock from 'three-mesh-ui/examples/hyperthreemesh/core/properties/ListStylePropertyInlineBlock';
+import HTMInlineBlockElement from 'three-mesh-ui/examples/hyperthreemesh/core/elements/HTMInlineBlockElement';
+import InlineElement from 'three-mesh-ui/src/elements/basic/InlineElement';
+
+export default class HTMListItem extends HTMTextElement{
+
+	constructor( values = {} ) {
+
+		super(values);
+
+		this.appendProperty( "listStyle", new ListStyleProperty() );
+
+		// @TODO: A morpheable inline-block to inline-text would be better than this
+		this._listStyleElementBlock = new HTMInlineBlockElement({
+			width:'50%',
+			height:'50%',
+			margin: '0.5em',
+			tagName:"::",
+		});
+
+		this._listStyleElementText = new HTMInlineElement({
+			tagName: "::",
+			margin: '0.5em',
+			textContent : ""
+		});
+
+		this._listStyleElementBlock._textCounterPart = this._listStyleElementText;
+
+		this._listStyleElementBlock.appendProperty( "listStyle", new ListStylePropertyInlineBlock() );
+
+		this.add( this._listStyleElementBlock );
+		this.add( this._listStyleElementText );
+
+	}
+
+	/*********************************************************************************************************************
+	 * PROVIDES AN API OVER `textContent` for listStyle
+	 ********************************************************************************************************************/
+
+	set textContent ( value ) {
+
+		for ( let i = this.children.length - 1 ; i >= 0; i-- ) {
+			const child = this.children[ i ];
+			if( child.isUI && child !== this._listStyleElementBlock && child !== this._listStyleElementText ) {
+
+				this.remove( child );
+				child.clear();
+
+			}
+
+		}
+
+		if( value ) {
+
+			this.add( new HTMInlineElement({tagName:'anonymous-span',textContent:value}));
+
+		}
+
+	}
+
+	get textContent ( ) {
+		return super.textContent;
+	}
+
+	set listStyle( value ){
+		this._listStyle.inline = value;
+	}
+
+	get listStyle(){
+		return this._listStyle.inline;
+	}
+
+}
diff --git a/examples/interactive/InteractiveListener.js b/examples/interactive/InteractiveListener.js
new file mode 100644
index 00000000..857129d0
--- /dev/null
+++ b/examples/interactive/InteractiveListener.js
@@ -0,0 +1,38 @@
+/**
+ * @abstract
+ */
+export default class InteractiveListener {
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @abstract
+	 * @param {MeshUIBaseElement|Object3D|null} element
+	 * @returns {void}
+	 */
+	hoveredElementHasChanged( element ) {  /* eslint-enable no-unused-vars */
+		throw new Error( "Abstract method need to be implemented.")
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @abstract
+	 * @param {MeshUIBaseElement|Object3D|null} element
+	 * @returns {void}
+	 */
+	selectedElementHasChanged( element ) { /* eslint-enable no-unused-vars */
+		throw new Error( 'Abstract method need to be implemented.' );
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @abstract
+	 * @param {MeshUIBaseElement|Object3D|null} element
+	 */
+	clicked( element ) {  /* eslint-enable no-unused-vars */
+		throw new Error( 'Abstract method need to be implemented.' )
+	}
+
+}
diff --git a/examples/interactive/InteractiveRaycaster.js b/examples/interactive/InteractiveRaycaster.js
new file mode 100644
index 00000000..5b01f0fb
--- /dev/null
+++ b/examples/interactive/InteractiveRaycaster.js
@@ -0,0 +1,462 @@
+import { Raycaster, Vector2 } from 'three';
+
+/* eslint-disable no-unused-vars */
+const CLICK = { type: 'click' };
+/* eslint-enable no-unused-vars */
+const HOVER = { type: 'hover' };
+
+export default class InteractiveRaycaster {
+
+	/**
+	 *
+	 * @param {THREE.Camera} camera
+	 * @param {THREE.Scene} scene
+	 * @param {THREE.WebGLRenderer} renderer
+	 * @param {VRControl} vrControl
+	 */
+	constructor( camera, scene, renderer, vrControl = null ) {
+
+		this._camera = camera;
+		this._scene = scene;
+		this._renderer = renderer;
+
+		/**
+		 *
+		 * @type {VRControl}
+		 * @private
+		 */
+		this._vrControl = vrControl;
+
+		/**
+		 *
+		 * @type {Raycaster}
+		 * @private
+		 */
+		this._raycaster = new Raycaster();
+
+		/**
+		 *
+		 * @type {Array.<InteractiveListener>}
+		 * @private
+		 */
+		this._listeners = [];
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @private
+		 */
+		this._objectsToTest = [];
+
+		/**
+		 *
+		 * @type {Window|Document|HTMLElement}
+		 * @private
+		 */
+		this._target = null;
+
+		/**
+		 *
+		 * @type {Vector2|null}
+		 * @private
+		 */
+		this._mouse = null;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		this._selectState = false;
+
+		/**
+		 *
+		 * @type {null|MeshUIBaseElement}
+		 * @private
+		 */
+		this._lastHoveredElement = null;
+
+		/**
+		 *
+		 * @type {null|MeshUIBaseElement}
+		 * @private
+		 */
+		this._lastSelectedElement = null;
+	}
+
+	/**
+	 *
+	 * @param {InteractiveListener} interactiveListener
+	 */
+	addListener( interactiveListener ) {
+
+		if ( this._listeners.indexOf( interactiveListener ) === -1 ) {
+
+			this._listeners.push( interactiveListener );
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @param {InteractiveListener} interactiveListener
+	 */
+	removeListener( interactiveListener ) {
+
+		const index = this._listeners.indexOf( interactiveListener );
+		if ( index !== -1 ) {
+
+			this._listeners.splice( index, 1 );
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @param {Window|Document|HTMLElement} target
+	 */
+	start( target = null ) {
+
+		if ( this._target ) throw new Error( 'InteractiveRaycaster::start() - is already started. Aborted.' );
+
+		target = !target ? window : target;
+
+		this._target = target;
+
+		this._mouse = new Vector2();
+		this._mouse.x = this._mouse.y = null;
+
+		// compute mouse position in normalized device coordinates
+		// (-1 to +1) for both directions.
+		// Used to raycasting against the interactive elements
+
+		target.addEventListener( 'pointermove', this._pointerMove );
+		target.addEventListener( 'pointerdown', this._selectStart );
+		target.addEventListener( 'pointerup', this._selectEnd );
+
+
+		target.addEventListener( 'touchstart', this._touchMove );
+
+		// According to latest documentation, pointerEvent is now widely supported.
+		// and if we keep this line, on mobile the "select" operation is called twice
+		// as a pointerup event is also generated by mobile browsers
+		// target.addEventListener( 'touchend', this._touchEnd );
+
+		if ( this._vrControl ) {
+
+			this._vrControl.controllers[ 0 ].addEventListener( 'selectstart', this._selectStart );
+			this._vrControl.controllers[ 0 ].addEventListener( 'selectend', this._selectEnd );
+
+		}
+
+	}
+
+	_selectStart = () => {
+
+		this._selectState = true;
+
+	};
+
+	_selectEnd = () => {
+
+		this._click( );
+
+		this._selectState = false;
+
+	};
+
+	_pointerMove = ( event ) => {
+
+		this._mouse.x = ( event.clientX / this._target.innerWidth ) * 2 - 1;
+		this._mouse.y = -( event.clientY / this._target.innerHeight ) * 2 + 1;
+
+	};
+
+	_touchMove = ( event ) => {
+
+		this._selectStart();
+
+		this._mouse.x = ( event.touches[ 0 ].clientX / this._target.innerWidth ) * 2 - 1;
+		this._mouse.y = -( event.touches[ 0 ].clientY / this._target.innerHeight ) * 2 + 1;
+
+	};
+
+	// /* eslint-disable no-unused-vars */
+	// /**
+	//  *
+	//  * @param event
+	//  * @private
+	//  */
+	// _touchEnd = ( event ) => {  /* eslint-enable no-unused-vars */
+	//
+	// 	this._selectEnd();
+	//
+	// 	this._mouse.x = null;
+	// 	this._mouse.y = null;
+	//
+	// };
+
+	_setHoveredElement( object ) {
+
+		if ( this._lastHoveredElement ) {
+
+			if ( this._lastHoveredElement.isUI ) {
+
+				this._lastHoveredElement.deactivatePseudoState( 'hover' );
+
+			}
+
+		}
+
+		this._lastHoveredElement = object;
+
+		if ( this._lastHoveredElement !== null ) {
+
+			if ( this._lastHoveredElement.isUI ) {
+
+				this._lastHoveredElement.activatePseudoState( 'hover' );
+				this._lastHoveredElement.dispatchEvent( HOVER );
+
+			}
+
+		}
+
+		// tell each listeners
+		for ( let i = 0; i < this._listeners.length; i++ ) {
+
+			this._listeners[ i ].hoveredElementHasChanged( this._lastHoveredElement );
+
+		}
+
+	}
+
+	_setSelectedElement( object ) {
+
+		if ( this._lastSelectedElement ) {
+
+			if ( this._lastSelectedElement.isUI ) {
+
+				this._lastSelectedElement.deactivatePseudoState( 'active' );
+
+			}
+
+		}
+
+		this._lastSelectedElement = object;
+
+		if ( this._lastSelectedElement !== null ) {
+
+			if ( this._lastSelectedElement.isUI ) {
+
+				this._lastSelectedElement.activatePseudoState( 'active' );
+
+			}
+
+		}
+
+		// tell each listeners
+		for ( let i = 0; i < this._listeners.length; i++ ) {
+
+			this._listeners[ i ].selectedElementHasChanged( this._lastSelectedElement );
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @override
+	 * @private
+	 */
+	_click() {  /* eslint-enable no-unused-vars */
+
+		if ( this._lastSelectedElement ) {
+
+			// this._lastSelectedElement.dispatchEvent( CLICK );
+			this._lastSelectedElement._clicked( this._lastIntersectObject );
+
+			// tell each listeners
+			for ( let i = 0; i < this._listeners.length; i++ ) {
+
+				this._listeners[ i ].clicked( this._lastSelectedElement );
+
+			}
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {Object3D|MeshUIBaseElement} object
+	 */
+	addObject( object ) {  /* eslint-enable no-unused-vars */
+
+			for ( let i = 0; i < arguments.length; i++ ) {
+
+				const obj = arguments[i];
+
+				if( obj.interactiveListener ) {
+
+					this.addListener( obj.interactiveListener );
+
+				}
+
+				let objs;
+				if( obj.interactiveObjects ) {
+					objs = obj.interactiveObjects;
+
+				} else {
+
+					objs = [ obj ];
+				}
+
+				for ( let j = 0; j < objs.length; j++ ) {
+
+					const obj2 = objs[j]
+					if( !obj2._clicked ) {
+						obj2._clicked = this._elementClicked;
+					}
+
+					this._objectsToTest.push( obj2 );
+				}
+
+
+			}
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {Object3D|MeshUIBaseElement} object
+	 */
+	removeObject( object ) {  /* eslint-enable no-unused-vars */
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			const obj = arguments[i];
+
+			if( obj.interactiveListener ) this.removeListener( obj.interactiveListener );
+
+			let objs = [obj];
+			if( obj.interactiveObjects ) objs = [...obj.interactiveObjects];
+
+
+			for ( let j = 0; j < objs.length; j++ ) {
+
+				const objElement = objs[ j ];
+				const index = this._objectsToTest.indexOf( objElement );
+
+				if( index !== -1 ) this._objectsToTest.splice( index, 1 );
+
+			}
+
+		}
+
+	}
+
+	/**
+	 *
+	 */
+	update() {
+
+		// Find closest intersecting object
+		let intersect;
+
+		if ( this._renderer.xr.isPresenting && this._vrControl ) {
+
+			this._vrControl.setFromController( 0, this._raycaster.ray );
+
+			intersect = this._raycast();
+
+			// Position the little white dot at the end of the controller pointing ray
+			if ( intersect ) this._vrControl.setPointerAt( 0, intersect.point );
+
+		} else if ( this._mouse.x !== null && this._mouse.y !== null ) {
+
+			this._raycaster.setFromCamera( this._mouse, this._camera );
+
+			intersect = this._raycast();
+
+		}
+
+		if ( intersect ) {
+
+			const intersectObject = intersect.object;
+			this._lastIntersectObject = intersect;
+
+			if ( this._lastHoveredElement !== intersectObject ) {
+				this._setHoveredElement( intersectObject );
+			}
+
+			if ( this._selectState ) {
+
+				if ( this._lastSelectedElement !== intersectObject ) {
+					this._setSelectedElement( intersectObject );
+				}
+
+			} else if ( this._lastSelectedElement !== null ) {
+
+				this._setSelectedElement( null );
+
+			}
+
+		} else {
+
+			if ( this._lastSelectedElement !== null ) this._setSelectedElement( null );
+			if ( this._lastHoveredElement !== null ) this._setHoveredElement( null );
+
+		}
+
+	}
+
+	set camera( camera ) {
+		this._camera = camera;
+	}
+
+	get camera() {
+		return this._camera;
+	}
+
+
+	_raycast() {
+
+		return this._objectsToTest.reduce( ( closestIntersection, obj ) => {
+
+			if( !this._scene.getObjectById( obj.id ) ) return closestIntersection;
+
+			const intersection = this._raycaster.intersectObject( obj, true );
+
+			if ( !intersection[ 0 ] ) return closestIntersection;
+
+			if ( !closestIntersection || intersection[ 0 ].distance < closestIntersection.distance ) {
+
+				intersection[ 0 ].object = obj;
+
+				return intersection[ 0 ];
+
+			}
+
+			return closestIntersection;
+
+
+		}, null );
+
+
+	}
+
+	_elementClicked( intersect ) {
+
+		delete intersect.object;
+
+		intersect.type = 'click';
+		this.dispatchEvent( intersect );
+
+	}
+
+
+}
diff --git a/examples/interactive/listeners/InteractiveCursor.js b/examples/interactive/listeners/InteractiveCursor.js
new file mode 100644
index 00000000..c72b0642
--- /dev/null
+++ b/examples/interactive/listeners/InteractiveCursor.js
@@ -0,0 +1,56 @@
+import InteractiveListener from 'three-mesh-ui/examples/interactive/InteractiveListener';
+
+export default class InteractiveCursor extends InteractiveListener{
+
+
+	/**
+	 *
+	 * @param {HTMLElement|Document} htmlElement
+	 * @param {string} cursor
+	 */
+	constructor( htmlElement, cursor = 'crosshair' ) {
+
+		super();
+
+		this._cursor = cursor;
+
+		this._htmlElement = htmlElement;
+
+		this._lastValue = 'inherit';
+
+	}
+
+	/**
+	 * @override
+	 * @param {MeshUIBaseElement|Object3D|null} element
+	 */
+	hoveredElementHasChanged ( element ) {
+
+		if( element !== null && this._lastValue === 'inherit') {
+
+			this._htmlElement.style.cursor = this._cursor;
+			this._lastValue = this._cursor;
+
+		} else if( element === null && this._lastValue !== 'inherit' ) {
+
+			this._htmlElement.style.cursor = 'inherit';
+			this._lastValue = 'inherit';
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement|Object3D|null} element
+	 */
+	selectedElementHasChanged( element ) {  /* eslint-enable no-unused-vars */ }
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement|Object3D|null} element
+	 */
+	clicked( element ) { /* eslint-enable no-unused-vars */ }
+}
diff --git a/examples/interactive/listeners/InteractiveTooltip.js b/examples/interactive/listeners/InteractiveTooltip.js
new file mode 100644
index 00000000..13dbc9a7
--- /dev/null
+++ b/examples/interactive/listeners/InteractiveTooltip.js
@@ -0,0 +1,50 @@
+import InteractiveListener from 'three-mesh-ui/examples/interactive/InteractiveListener';
+
+/**
+ * Job : Display html tooltip over an element when interactive object are hovered
+ */
+export default class InteractiveTooltip extends InteractiveListener{
+
+	constructor( domElement ) {
+		super();
+
+		this._domElement = domElement;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * What happen when interactive object are clicked?
+	 * @param element
+	 */
+	clicked( element ) { /* nothing in this case */ }  /* eslint-enable no-unused-vars */
+
+	/**
+	 * What happend when the current hovered changes?
+	 * @param element
+	 */
+	hoveredElementHasChanged( element ) {
+
+		// if we are currently hovering an element
+		if( element ) {
+
+			// grab its name, and feed it as title attribute to display tooltips
+			this._domElement.setAttribute('title', element.name);
+
+		} else {
+
+			// no element hovered? remove the attribute
+			this._domElement.removeAttribute('title');
+
+		}
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * What happen when the current selected changes?
+	 * @param element
+	 */
+	selectedElementHasChanged( element ) { /* nothing in this case */ }  /* eslint-enable no-unused-vars */
+}
diff --git a/examples/materials/msdf/ExampleBoundsUVMaterial.js b/examples/materials/msdf/ExampleBoundsUVMaterial.js
index fc537cb4..ab114ab4 100644
--- a/examples/materials/msdf/ExampleBoundsUVMaterial.js
+++ b/examples/materials/msdf/ExampleBoundsUVMaterial.js
@@ -44,13 +44,16 @@ export default class ExampleBoundsUVMaterial extends MeshBasicMaterial{
 
 			shader.fragmentShader = shader.fragmentShader.replace(
 				'#include <uv_pars_fragment>',
-				'#include <uv_pars_fragment>\n' + ShaderChunkUI.msdf_alphaglyph_pars_fragment
+				'#include <uv_pars_fragment>\n' + ShaderChunkUI.msdfAlphaglyphParsFragmentGlsl
 			)
 
-			// fragment chunks
+			// fragment chunks override
+			// Also slightly display background of the glyph
 			shader.fragmentShader = shader.fragmentShader.replace(
 				'#include <alphamap_fragment>',
-				ShaderChunkUI.msdf_alphaglyph_fragment + `
+				ShaderChunkUI.msdfAlphaglyphFragmentGlsl + `
+
+				// still display a bit the outer of glyph
 				if( diffuseColor.a <= 0.02 ) {
 					diffuseColor.a = 0.25;
 				}
diff --git a/examples/materials/msdf/MSDFNormalMaterial.js b/examples/materials/msdf/MSDFNormalMaterial.js
index 3344e3b5..100bbd6b 100644
--- a/examples/materials/msdf/MSDFNormalMaterial.js
+++ b/examples/materials/msdf/MSDFNormalMaterial.js
@@ -1,5 +1,6 @@
 import { MeshNormalMaterial } from 'three';
 import * as ThreeMeshUI from 'three-mesh-ui';
+import { ShaderChunkUI } from 'three-mesh-ui';
 
 /**
  * Example of enabling MeshNormalMaterial to render ThreeMeshUI MSDF Texts
@@ -47,7 +48,8 @@ export default class MSDFNormalMaterial extends MeshNormalMaterial{
 				`#include <normalmap_pars_fragment>
 vec4 diffuseColor;
 uniform float alphaTest;
-${ThreeMeshUI.ShaderChunkUI.msdf_alphaglyph_pars_fragment}`
+
+${ShaderChunkUI.msdfAlphaglyphParsFragmentGlsl}`
 			);
 
 			// fragment
@@ -55,7 +57,7 @@ ${ThreeMeshUI.ShaderChunkUI.msdf_alphaglyph_pars_fragment}`
 				'#include <normal_fragment_maps>',
 				`#include <normal_fragment_maps>
 diffuseColor = vec4( packNormalToRGB( normal ), opacity );
-${ThreeMeshUI.ShaderChunkUI.msdf_alphaglyph_fragment}`
+${ShaderChunkUI.msdfAlphaglyphFragmentGlsl}`
 			);
 
 			// output
diff --git a/examples/materials/msdf/MSDFToonMaterial.js b/examples/materials/msdf/MSDFToonMaterial.js
index e064a1a1..804273dd 100644
--- a/examples/materials/msdf/MSDFToonMaterial.js
+++ b/examples/materials/msdf/MSDFToonMaterial.js
@@ -30,6 +30,7 @@ export default class MSDFToonMaterial extends MeshToonMaterial {
 
 			// Use the webgl2 format, unless format is defined
 			const format = options.format ? options.format : RedFormat;
+			// const format = options.format ? options.format : LuminanceFormat;
 
 			const granularity = options.tones ? options.tones : 8;
 
diff --git a/examples/materials/msdf/MSDFVertexMaterialExample.js b/examples/materials/msdf/MSDFVertexMaterialExample.js
index 470ac7aa..62a2e6fc 100644
--- a/examples/materials/msdf/MSDFVertexMaterialExample.js
+++ b/examples/materials/msdf/MSDFVertexMaterialExample.js
@@ -56,19 +56,19 @@ export default class MSDFVertexMaterialExample extends MeshStandardMaterial{
 			// ThreeMeshUI msdf vertex pars
 			shader.vertexShader = shader.vertexShader.replace(
 				'#include <uv_pars_vertex>',
-				'#include <uv_pars_vertex>\n'+ ThreeMeshUI.ShaderChunkUI.msdf_alphaglyph_pars_vertex
+				'#include <uv_pars_vertex>\n'+ ThreeMeshUI.ShaderChunkUI.msdfAlphaglyphParsVertexGlsl
 			);
 
 			// ThreeMeshUI msdf vertex chunks
 			shader.vertexShader = shader.vertexShader.replace(
 				'#include <uv_vertex>',
-				'#include <uv_vertex>\n'+ ThreeMeshUI.ShaderChunkUI.msdf_alphaglyph_vertex
+				'#include <uv_vertex>\n'+ ThreeMeshUI.ShaderChunkUI.msdfAlphaglyphVertexGlsl
 			)
 
 			// Custom shader part before vertex projection
 			shader.vertexShader = shader.vertexShader.replace(
 				'#include <project_vertex>',
-				ThreeMeshUI.ShaderChunkUI.msdf_offset_vertex + `
+				ThreeMeshUI.ShaderChunkUI.msdfOffsetglyphVertexGlsl + `
 // add a custom vertex shader chunks to modify vertex position
 if( uv.y >= progress )
 {
diff --git a/examples/tut__basic_setup.js b/examples/tut__basic_setup.js
index 6ca015eb..7f0fbdb8 100644
--- a/examples/tut__basic_setup.js
+++ b/examples/tut__basic_setup.js
@@ -1,3 +1,5 @@
+//xfg:title Basic setup
+
 import * as THREE from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -10,8 +12,7 @@ const HEIGHT = window.innerHeight;
 
 let scene, camera, renderer, controls;
 
-window.addEventListener( 'load', step1BuildThreeJSElements );
-window.addEventListener( 'resize', onWindowResize );
+window.addEventListener('load', step1BuildThreeJSElements );
 
 /***********************************************************************************************************************
  * THREE-MESH-UI - BASIC SETUP
@@ -50,6 +51,7 @@ function step1BuildThreeJSElements() {
 	controls.update();
 
 	// ROOM
+
 	const room = new THREE.LineSegments(
 		new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
 		new THREE.LineBasicMaterial( { color: 0x808080 } )
@@ -57,6 +59,7 @@ function step1BuildThreeJSElements() {
 
 	scene.add( room );
 
+
 	// Now that we have the threejs stuff up and running, we can build our three-mesh-ui stuff
 	// Let's read that function
 	step2BuildThreeMeshUIElements();
@@ -64,6 +67,8 @@ function step1BuildThreeJSElements() {
 	// three-mesh-ui requires to be updated prior each threejs render, let's go see what is in step3AnimationLoop()
 	renderer.setAnimationLoop( step3AnimationLoop );
 
+
+	window.addEventListener( 'resize', onWindowResize );
 }
 
 //
@@ -72,21 +77,29 @@ function step2BuildThreeMeshUIElements() {
 	// If we are going to display ThreeMeshUI Text elements
 	// It is important to know that a Text MUST have a Block as parent
 	// Using three-mesh-ui, we would usually have one or more rootBlock elements
-	const rootBlock = new ThreeMeshUI.Block( {
+	const rootBlock = new ThreeMeshUI.Text( {
 
+		name: 'rootBlock',
 		// A Block must define its "box-sizing" properties
 		width: 1.2,
-		height: 0.5,
+		height: 'auto', // the text will define the output height
 		padding: 0.05,
+		boxSizing: 'border-box',
 
 		// A Block can define its "layout" properties
 		justifyContent: 'center',
 		textAlign: 'left',
 
+		borderRadius: 0.015,
+
+		backgroundColor : 0x000000,
+		backgroundOpacity : 0.5,
+
 		// A Block can also define "text" properties that will propagate to any of its Text children
 		fontSize: 0.055,
-		fontFamily: '/assets/fonts/msdf/roboto/regular.json',
-		fontTexture: '/assets/fonts/msdf/roboto/regular.png',
+
+		fontFamily: './assets/fonts/msdf/roboto/regular.json',
+		fontTexture: './assets/fonts/msdf/roboto/regular.png',
 		// @Note: setting fontFamily
 		// This looks very easy, but this isn't the best way for handling fonts
 		// However it is perfect for a first glance on how to get started with three-mesh-ui
@@ -94,6 +107,7 @@ function step2BuildThreeMeshUIElements() {
 
 	} );
 
+
 	// three-mesh-ui root elements must be added on threejs display stack
 	// In the scene, or in another Object3D of our choice
 	scene.add( rootBlock );
@@ -104,42 +118,46 @@ function step2BuildThreeMeshUIElements() {
 	rootBlock.rotation.x = -0.55;
 
 
-	// Now that we have a three-mesh-ui Block, we can add three-mesh-ui Text's in it
 	rootBlock.add(
 
 
-		new ThreeMeshUI.Text( {
+		new ThreeMeshUI.Inline( {
 			// three-mesh-ui Text should defined their content to display
-			content: 'This library supports line-break-friendly-characters,',
+			textContent: 'This library supports line-break-friendly-characters,',
 
 			// if a Text is going to use the exact same Text properties as defined in its parent
 			// there is no need to set those properties again
 			// fontSize: 0.055,
-			// fontFamily: '/assets/fonts/msdf/roboto/regular.json',
-			// fontTexture: '/assets/fonts/msdf/roboto/regular.png',
+			// fontFamily: './assets/fonts/msdf/roboto/regular.json',
+			// fontTexture: './assets/fonts/msdf/roboto/regular.png',
 
 		} ),
 
-
-		new ThreeMeshUI.Text( {
-			content: ' As well as multi-font-size lines with consistent vertical',
+		new ThreeMeshUI.Inline( {
+			textContent: ' As well as multi-font-size lines with consistent vertical',
 
 			// If a Text must have different Text properties as defined in its parent
 			// We just have to define it on a specific Text
 			fontSize: 0.08,
-			fontFamily: '/assets/fonts/msdf/roboto/italic.json',
-			fontTexture: '/assets/fonts/msdf/roboto/italic.png',
+			fontFamily: './assets/fonts/msdf/roboto/italic.json',
+			fontTexture: './assets/fonts/msdf/roboto/italic.png',
 		} ),
 
-		new ThreeMeshUI.Text( {
-			content: ' spacing!',
+		new ThreeMeshUI.Inline( {
+			textContent: ' spacing!',
 			fontSize: 0.08,
-			fontFamily: '/assets/fonts/msdf/roboto/bold-italic.json',
-			fontTexture: '/assets/fonts/msdf/roboto/bold-italic.png',
+			fontFamily: './assets/fonts/msdf/roboto/bold-italic.json',
+			fontTexture: './assets/fonts/msdf/roboto/bold-italic.png',
 		} )
 
 	);
 
+
+	setInterval( ()=>{
+		rootBlock.textContent = "'./assets/fonts/msdf/roboto/bold-italic.json'",
+			rootBlock.set({textContent:"'./assets/fonts/msdf/roboto/bold-italic.json'", color:0xff9900})
+	},2500)
+
 }
 
 // In order to see things, we need to render them, usually on each frame
diff --git a/examples/tut__basic_setup_default.js b/examples/tut__basic_setup_default.js
new file mode 100644
index 00000000..220cf399
--- /dev/null
+++ b/examples/tut__basic_setup_default.js
@@ -0,0 +1,207 @@
+//xfg:title Basic setup default
+
+import * as THREE from 'three';
+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
+
+import ThreeMeshUI from 'three-mesh-ui';
+import { Vector4 } from 'three';
+
+const WIDTH = window.innerWidth;
+const HEIGHT = window.innerHeight;
+
+let scene, camera, renderer, controls;
+
+
+window.addEventListener('load', step1BuildThreeJSElements );
+
+// define three-mesh-ui defaults
+ThreeMeshUI.DefaultValues.set({
+	backgroundColor: 0x00ff99,
+	backgroundOpacity: 1,
+	borderColor: 0xffffff,
+	borderOpacity: 1,
+	borderWidth: 0.02,
+	borderRadius: 0.05,
+	color: 0xff0000
+});
+
+ThreeMeshUI.DefaultValues.set({
+	padding: 0.1,
+	borderRadius: 0.02,
+	borderColor: 0x99ff00,
+	borderWidth: new Vector4(0.01,0.01,0.08,0.01)
+}, 'block');
+
+ThreeMeshUI.DefaultValues.set({
+	color: 0xff9900
+}, 'inline')
+
+/***********************************************************************************************************************
+ * THREE-MESH-UI - BASIC SETUP
+ * ---------------------------
+ *
+ * This tutorial is made of 3 steps, split by functions:
+ *    - step1BuildThreeJSElements()
+ *    - step2BuildThreeMeshUIElements()
+ *    - step3AnimationLoop()
+ *
+ * Be sure to read all of their comments, in the proper order before going for another tutorial.
+ **********************************************************************************************************************/
+
+
+// three-mesh-ui requires working threejs setup
+// We usually build the threejs stuff prior three-mesh-ui
+function step1BuildThreeJSElements() {
+
+	scene = new THREE.Scene();
+	scene.background = new THREE.Color( 0x505050 );
+
+	camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 0.1, 100 );
+
+	renderer = new THREE.WebGLRenderer( {
+		antialias: true
+	} );
+	renderer.setPixelRatio( window.devicePixelRatio );
+	renderer.setSize( WIDTH, HEIGHT );
+	renderer.xr.enabled = true;
+	document.body.appendChild( VRButton.createButton( renderer ) );
+	document.body.appendChild( renderer.domElement );
+
+	controls = new OrbitControls( camera, renderer.domElement );
+	camera.position.set( 0, 1.6, 0 );
+	controls.target = new THREE.Vector3( 0, 1, -1.8 );
+	controls.update();
+
+	// ROOM
+
+	const room = new THREE.LineSegments(
+		new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
+		new THREE.LineBasicMaterial( { color: 0x808080 } )
+	);
+
+	scene.add( room );
+
+
+	// Now that we have the threejs stuff up and running, we can build our three-mesh-ui stuff
+	// Let's read that function
+	step2BuildThreeMeshUIElements();
+
+	// three-mesh-ui requires to be updated prior each threejs render, let's go see what is in step3AnimationLoop()
+	renderer.setAnimationLoop( step3AnimationLoop );
+
+
+	window.addEventListener( 'resize', onWindowResize );
+}
+
+//
+function step2BuildThreeMeshUIElements() {
+
+	// If we are going to display ThreeMeshUI Text elements
+	// It is important to know that a Text MUST have a Block as parent
+	// Using three-mesh-ui, we would usually have one or more rootBlock elements
+	const rootBlock = new ThreeMeshUI.Text( {
+
+		name: 'rootBlock',
+		// A Block must define its "box-sizing" properties
+		width: 1.3,
+		height: 'auto', // the text will define the output height
+		boxSizing: 'border-box',
+
+		// A Block can define its "layout" properties
+		justifyContent: 'center',
+		textAlign: 'left',
+
+		// A Block can also define "text" properties that will propagate to any of its Text children
+		fontSize: 0.055,
+
+		fontFamily: './assets/fonts/msdf/roboto/regular.json',
+		fontTexture: './assets/fonts/msdf/roboto/regular.png',
+		// @Note: setting fontFamily
+		// This looks very easy, but this isn't the best way for handling fonts
+		// However it is perfect for a first glance on how to get started with three-mesh-ui
+		// Be sure you next step will be `Getting started - Preload fonts`
+
+	} );
+
+
+	// three-mesh-ui root elements must be added on threejs display stack
+	// In the scene, or in another Object3D of our choice
+	scene.add( rootBlock );
+
+	// three-mesh-ui Block are Object3D agreemented with three-mesh-ui capabilities
+	// so you can use any existing Object3D methods and properties
+	rootBlock.position.set( 0, 1, -1.8 );
+	rootBlock.rotation.x = -0.55;
+
+
+	rootBlock.add(
+
+
+		new ThreeMeshUI.Inline( {
+			// three-mesh-ui Text should defined their content to display
+			textContent: 'This library supports line-break-friendly-characters,',
+
+			// if a Text is going to use the exact same Text properties as defined in its parent
+			// there is no need to set those properties again
+			// fontSize: 0.055,
+			// fontFamily: './assets/fonts/msdf/roboto/regular.json',
+			// fontTexture: './assets/fonts/msdf/roboto/regular.png',
+
+		} ),
+
+		new ThreeMeshUI.Inline( {
+			textContent: ' As well as multi-font-size lines with consistent vertical',
+
+			// If a Text must have different Text properties as defined in its parent
+			// We just have to define it on a specific Text
+			fontSize: 0.08,
+			fontFamily: './assets/fonts/msdf/roboto/italic.json',
+			fontTexture: './assets/fonts/msdf/roboto/italic.png',
+
+			color: 0xffffff
+		} ),
+
+		new ThreeMeshUI.Inline( {
+			color: 'inherit',
+			textContent: ' spacing!',
+			fontSize: 0.08,
+			fontFamily: './assets/fonts/msdf/roboto/bold-italic.json',
+			fontTexture: './assets/fonts/msdf/roboto/bold-italic.png',
+		} )
+
+	);
+
+
+	setInterval( ()=>{
+		rootBlock.set({color:Math.random()*0xffffff})
+	}, 2500 )
+
+}
+
+// In order to see things, we need to render them, usually on each frame
+function step3AnimationLoop() {
+
+	// Don't forget, ThreeMeshUI must be updated manually.
+	// This has been introduced in version 3.0.0 in order
+	// to improve performance
+	ThreeMeshUI.update();
+
+	controls.update();
+	renderer.render( scene, camera );
+
+}
+
+
+// handles resizing the renderer when the viewport is resized
+// common threejs stuff
+function onWindowResize() {
+
+	camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+	renderer.setSize( window.innerWidth, window.innerHeight );
+
+}
+
+
diff --git a/examples/tut__box_sizing.js b/examples/tut__box_sizing.js
new file mode 100644
index 00000000..40c83a2c
--- /dev/null
+++ b/examples/tut__box_sizing.js
@@ -0,0 +1,328 @@
+// xfg:title BoxSizing
+// xfg:category learn
+// xfg:type explore
+
+import { Block } from 'three-mesh-ui';
+let rootBlock;
+
+function example() {
+
+	// If we are going to display ThreeMeshUI Text elements
+	rootBlock = new Block( {
+
+		name: "rootBlock",
+		width: 1,
+		height: 1,
+		padding: 0.1,
+		boxSizing: 'border-box',
+
+		margin: 0,
+
+		// A Block can define its "layout" properties
+		justifyContent: 'start',
+		textAlign: 'left',
+
+		backgroundOpacity: 0.75,
+		backgroundColor: 'red',
+
+		borderWidth: 0.1,
+		borderRadius: 0.05,
+		borderColor: 'black',
+		overflow: 'hidden',
+
+	} );
+
+	// three-mesh-ui root elements must be added on threejs display stack
+	// In the scene, or in another Object3D of our choice
+	scene.add( rootBlock );
+
+	// three-mesh-ui Block, Text (or Boxes) are Object3D agreemented with three-mesh-ui capabilities
+	// so you can use any existing Object3D methods and properties
+	rootBlock.position.set( 0, 1.5, -2.99 );
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/***********************************************************************************************************************
+ * Above this comment, you could find the contextual setup of this example.
+ * Not really related to the example itself : Creating three renderer, scene, lights, etc...
+ **********************************************************************************************************************/
+
+import { exampleAddResizer, exampleManualRenderThreeOnly, exampleNoRenderLoop, exampleRender, exampleThreeSetup } from 'three-mesh-ui/examples/_setup/ThreeSetup';
+import { exampleFontPreloadRoboto } from 'three-mesh-ui/examples/_setup/RobotoFont';
+import { exampleCameraOrthographic, exampleCameraOrthographicResize } from 'three-mesh-ui/examples/_setup/CameraOrthographic';
+import { exampleRulers } from 'three-mesh-ui/examples/_setup/RulersVR';
+import exampleGUI from 'three-mesh-ui/examples/_setup/gui/exampleGUI';
+import BoxLayoutBehavior from 'three-mesh-ui/examples/behaviors/helpers/BoxLayoutBehavior';
+import { DefaultValues, Inline, Text } from 'three-mesh-ui';
+/* eslint-disable no-unused-vars */
+
+// building three setup
+const { camera } = exampleCameraOrthographic();
+exampleAddResizer( exampleCameraOrthographicResize );
+
+const { scene, renderer } = exampleThreeSetup( camera );
+exampleNoRenderLoop();
+exampleAddResizer( exampleRender );
+
+const { ruler, rulerHalf } = exampleRulers( scene );
+
+// preload fonts and run example() after
+const defaultFontFamily = exampleFontPreloadRoboto( () => { example(); additionalUI(); exampleRender(); boxSizingUI(); });
+DefaultValues.set({fontFamily:defaultFontFamily});
+
+let infoBlock, border, content;
+function additionalUI(){
+
+	infoBlock = new Block({
+		name: 'info-block',
+		width:  2.4,
+		padding: 0.05,
+		height: 'auto',
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		alignItems: 'center',
+		backgroundColor: 0x000000,
+		backgroundOpacity : 0.75,
+		borderRadius : 0.025,
+	});
+
+	infoBlock.position.z = -2
+	infoBlock.position.y = 0.4;
+	scene.add( infoBlock );
+
+	border = new Block({
+		name: 'border-container',
+		width: '45%',
+		height: 'auto',
+		flexDirection: 'column',
+		fontOpacity: 1
+	})
+
+	const borderTitle = new Text({name:'border-title', textContent: `border-box`, fontWeight: '700', fontSize: 0.08, lineHeight:1.5});
+	const borderContent = new Text({
+		name: 'border-content',
+		textAlign: "left",
+	}).add(
+		new Inline({
+			textContent: 'The '
+		}),
+		new Inline({
+			textContent: '"width" & "height" ',
+			fontWeight: '700',
+			fontStyle: 'italic'
+		}),
+		new Inline({
+			textContent: 'properties would be used as '
+		}),
+		new Inline({
+			textContent: '"outerWidth" & "outerHeight"',
+			fontWeight: '700',
+			fontStyle: 'italic'
+		}),
+		new Inline({
+			textContent: '.'
+		}),
+		new Inline({
+			textContent: '\n\n"borderWidth" & "padding" ',
+			fontWeight: '700',
+			fontStyle: 'italic'
+		}),
+		new Inline({
+			textContent: 'would then be computed  '
+		}),
+		new Inline({
+			textContent: 'INSIDE ',
+			fontWeight: '700',
+		}),
+		new Inline({
+			textContent: 'those values.'
+		}),
+
+	);
+
+	border.add( borderTitle, borderContent )
+
+	content = new Block({
+		name: 'content-container',
+		width: '45%',
+		height: 'auto',
+		flexDirection: 'column',
+		textAlign : 'right',
+		fontOpacity: 0.2
+	})
+
+	const contentTitle = new Text({textContent: `content-box`, fontWeight: '700', fontSize: 0.08, lineHeight: 1.5});
+	const contentContent = new Text({
+		name: 'border-content',
+		textAlign: "right",
+	}).add(
+		new Inline({
+			textContent: 'The '
+		}),
+		new Inline({
+			textContent: '"width" & "height" ',
+			fontWeight: '700',
+			fontStyle: 'italic'
+		}),
+		new Inline({
+			textContent: 'properties would be used as '
+		}),
+		new Inline({
+			textContent: '"innerWidth" & "innerHeight"',
+			fontWeight: '700',
+			fontStyle: 'italic'
+		}),
+		new Inline({
+			textContent: '.'
+		}),
+		new Inline({
+			textContent: '\n\n"borderWidth" & "padding" ',
+			fontWeight: '700',
+			fontStyle: 'italic'
+		}),
+		new Inline({
+			textContent: 'would then be computed  '
+		}),
+		new Inline({
+			textContent: 'OUTSIDE ',
+			fontWeight: '700',
+		}),
+		new Inline({
+			textContent: 'those values.'
+		}),
+
+	);
+
+	content.add( contentTitle, contentContent )
+
+
+	infoBlock.add( border, content);
+
+}
+
+function boxSizingUI() {
+
+	const gui = exampleGUI();
+
+	const boxlayout = new BoxLayoutBehavior( rootBlock, exampleRender );
+	boxlayout.attach();
+
+	const params = {
+		infoBox: true,
+		boxLayout: true,
+		zoom: camera.zoom,
+		boxSizing: rootBlock._boxSizing._value,
+		width: rootBlock._width._value,
+		height: rootBlock._height._value,
+		borderWidth: rootBlock._borderWidth._value.clone(),
+		padding: rootBlock._padding._value.clone(),
+		margin: rootBlock._margin._value.clone(),
+		render: exampleManualRenderThreeOnly,
+	}
+
+	gui.add( params, 'infoBox' ).onChange( ib => {
+		infoBlock.visible = ib;
+
+		exampleRender();
+
+	});
+
+	gui.add( params, 'boxLayout' ).onChange( bl => {
+		if( bl ) {
+			boxlayout.attach();
+		}else{
+			boxlayout.detach();
+		}
+
+		exampleRender();
+
+	});
+
+	gui.add( params, 'zoom', 100, 800, 10).onChange( z => {
+		camera.zoom = z;
+		camera.updateProjectionMatrix();
+		exampleRender();
+	})
+
+	const rootBlockGui = gui.addFolder( 'rootBlock properties' );
+
+	rootBlockGui.add( params, 'boxSizing', {"border-box":"border-box", "content-box":"content-box"} ).onChange( bz => {
+		rootBlock.set({boxSizing:bz});
+
+		if( bz === 'border-box' ) {
+			border.set({fontOpacity: 1});
+			content.set({fontOpacity: 0.2});
+		}else {
+			border.set({fontOpacity: 0.2});
+			content.set({fontOpacity: 1});
+		}
+
+		exampleRender();
+
+	})
+
+	rootBlockGui.add( params, 'width', 0, 2, 0.1 ).onChange( w => {
+		rootBlock.set({width:w});
+		exampleRender();
+	})
+
+	rootBlockGui.add( params, 'height', 0, 2, 0.1 ).onChange( h => {
+		rootBlock.set({height:h});
+		exampleRender();
+	})
+
+	rootBlockGui.addD4( params, 'padding', 0, 2, 0.1 ).onChange( p => {
+		rootBlock.set({padding:p});
+		exampleRender();
+	})
+
+	rootBlockGui.addD4( params, 'borderWidth', 0, 2, 0.1 ).onChange( bw => {
+		rootBlock.set({borderWidth:bw});
+		exampleRender();
+	})
+
+	rootBlockGui.addD4( params, 'margin', 0, 2, 0.1 ).onChange( m => {
+		rootBlock.set({margin:m});
+		console.log( "D4 changes !", m)
+		exampleRender();
+	})
+
+	rootBlockGui.add( params, 'render');
+
+}
diff --git a/examples/tut__nested_blocks.js b/examples/tut__nested_blocks.js
index bc3f654e..16f94cef 100644
--- a/examples/tut__nested_blocks.js
+++ b/examples/tut__nested_blocks.js
@@ -1,11 +1,14 @@
-import * as THREE from "three";
-import { VRButton } from "three/examples/jsm/webxr/VRButton.js";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
-import { BoxLineGeometry } from "three/examples/jsm/geometries/BoxLineGeometry.js";
+// xfg:title Nested block
+// xfg:category practice
 
-import ThreeMeshUI from "three-mesh-ui";
+import * as THREE from 'three';
+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
 
-import SnakeImage from "./assets/spiny_bush_viper.jpg";
+import ThreeMeshUI from 'three-mesh-ui';
+
+import SnakeImage from './assets/spiny_bush_viper.jpg';
 
 import FontJSON from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.json';
 import FontImage from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.png';
@@ -15,194 +18,191 @@ const HEIGHT = window.innerHeight;
 
 let scene, camera, renderer, controls;
 
-window.addEventListener("load", init);
-window.addEventListener("resize", onWindowResize);
+window.addEventListener( 'load', init );
+window.addEventListener( 'resize', onWindowResize );
 
 //
 
 function init() {
-  scene = new THREE.Scene();
-  scene.background = new THREE.Color(0x505050);
+	scene = new THREE.Scene();
+	scene.background = new THREE.Color( 0x505050 );
 
-  camera = new THREE.PerspectiveCamera(60, WIDTH / HEIGHT, 0.1, 100);
+	camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 0.1, 100 );
 
-  renderer = new THREE.WebGLRenderer({ antialias: true });
-  renderer.setPixelRatio(window.devicePixelRatio);
-  renderer.setSize(WIDTH, HEIGHT);
-  renderer.xr.enabled = true;
-  document.body.appendChild(VRButton.createButton(renderer));
-  document.body.appendChild(renderer.domElement);
+	renderer = new THREE.WebGLRenderer( { antialias: true } );
+	renderer.setPixelRatio( window.devicePixelRatio );
+	renderer.setSize( WIDTH, HEIGHT );
+	renderer.xr.enabled = true;
+	document.body.appendChild( VRButton.createButton( renderer ) );
+	document.body.appendChild( renderer.domElement );
 
-  controls = new OrbitControls(camera, renderer.domElement);
-  camera.position.set(0, 1.6, 0);
-  controls.target = new THREE.Vector3(0, 1, -1.8);
-  controls.update();
+	controls = new OrbitControls( camera, renderer.domElement );
+	camera.position.set( 0, 1.6, 0 );
+	controls.target = new THREE.Vector3( 0, 1, -1.8 );
+	controls.update();
 
-  // ROOM
+	// ROOM
 
-  const room = new THREE.LineSegments(
-    new BoxLineGeometry(6, 6, 6, 10, 10, 10).translate(0, 3, 0),
-    new THREE.LineBasicMaterial({ color: 0x808080 })
-  );
+	const room = new THREE.LineSegments(
+		new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
+		new THREE.LineBasicMaterial( { color: 0x808080 } )
+	);
 
-  scene.add(room);
+	scene.add( room );
 
-  // TEXT PANEL
+	// TEXT PANEL
 
-  makeTextPanel();
+	makeTextPanel();
 
-  //
+	//
 
-  renderer.setAnimationLoop(loop);
+	renderer.setAnimationLoop( loop );
 }
 
 //
 
 function makeTextPanel() {
-  const container = new ThreeMeshUI.Block({
-    ref: "container",
-    padding: 0.025,
-    fontFamily: FontJSON,
-    fontTexture: FontImage,
-    fontColor: new THREE.Color(0xffffff),
-    backgroundOpacity: 0,
-  });
-
-  container.position.set(0, 1, -1.8);
-  container.rotation.x = -0.55;
-  scene.add(container);
-
-  //
-
-  const title = new ThreeMeshUI.Block({
-    height: 0.2,
-    width: 1.5,
-    margin: 0.025,
-    justifyContent: "center",
-    fontSize: 0.09,
-  });
-
-  title.add(
-    new ThreeMeshUI.Text({
-      content: "spiny bush viper",
-    })
-  );
-
-  container.add(title);
-
-  //
-
-  const leftSubBlock = new ThreeMeshUI.Block({
-    height: 0.95,
-    width: 1.0,
-    margin: 0.025,
-    padding: 0.025,
-    textAlign: "left",
-    justifyContent: "end",
-  });
-
-  const caption = new ThreeMeshUI.Block({
-    height: 0.07,
-    width: 0.37,
-    textAlign: "center",
-    justifyContent: "center",
-  });
-
-  caption.add(
-    new ThreeMeshUI.Text({
-      content: "Mind your fingers",
-      fontSize: 0.04,
-    })
-  );
-
-  leftSubBlock.add(caption);
-
-  //
-
-  const rightSubBlock = new ThreeMeshUI.Block({
-    margin: 0.025,
-  });
-
-  const subSubBlock1 = new ThreeMeshUI.Block({
-    height: 0.35,
-    width: 0.5,
-    margin: 0.025,
-    padding: 0.02,
-    fontSize: 0.04,
-    justifyContent: "center",
-    backgroundOpacity: 0,
-  }).add(
-    new ThreeMeshUI.Text({
-      content: "Known for its extremely keeled dorsal scales that give it a ",
-    }),
-
-    new ThreeMeshUI.Text({
-      content: "bristly",
-      fontColor: new THREE.Color(0x92e66c),
-    }),
-
-    new ThreeMeshUI.Text({
-      content: " appearance.",
-    })
-  );
-
-  const subSubBlock2 = new ThreeMeshUI.Block({
-    height: 0.53,
-    width: 0.5,
-    margin: 0.01,
-    padding: 0.02,
-    fontSize: 0.025,
-    alignItems: "start",
-    textAlign: 'justify',
-    backgroundOpacity: 0,
-  }).add(
-    new ThreeMeshUI.Text({
-      content:
-        "The males of this species grow to maximum total length of 73 cm (29 in): body 58 cm (23 in), tail 15 cm (5.9 in). Females grow to a maximum total length of 58 cm (23 in). The males are surprisingly long and slender compared to the females.\nThe head has a short snout, more so in males than in females.\nThe eyes are large and surrounded by 9–16 circumorbital scales. The orbits (eyes) are separated by 7–9 scales.",
-    })
-  );
-
-  rightSubBlock.add(subSubBlock1, subSubBlock2);
-
-  //
-
-  const contentContainer = new ThreeMeshUI.Block({
-    contentDirection: "row",
-    padding: 0.02,
-    margin: 0.025,
-    backgroundOpacity: 0,
-  });
-
-  contentContainer.add(leftSubBlock, rightSubBlock);
-  container.add(contentContainer);
-
-  //
-
-  new THREE.TextureLoader().load(SnakeImage, (texture) => {
-    leftSubBlock.set({
-			backgroundColor: new THREE.Color(0xffffff),
+	const container = new ThreeMeshUI.Block( {
+		ref: 'container',
+		padding: 0.025,
+		fontFamily: FontJSON,
+		fontTexture: FontImage,
+		color: new THREE.Color( 0xffffff ),
+		backgroundOpacity: 0,
+		flexDirection: 'column',
+		justifyContent: 'center',
+		alignItems : 'center',
+	} );
+
+	container.position.set( 0, 1, -1.8 );
+	container.rotation.x = -0.55;
+	scene.add( container );
+
+	//
+
+	const title = new ThreeMeshUI.Text( {
+		// height: 'auto',
+		width: '80%',
+		margin: 0.025,
+		padding: '0.01 0.1',
+		textAlign: 'center',
+		fontSize: 0.09,
+		textContent: 'spiny bush viper',
+		backgroundColor: 0xff9900
+	} );
+
+	container.add( title );
+
+	//
+
+	const leftSubBlock = new ThreeMeshUI.Block( {
+		height: 0.95,
+		width: 1.0,
+		margin: 0.025,
+		padding: 0.025,
+		textAlign: 'left',
+		flexDirection: 'column',
+		alignItems: 'center',
+		justifyContent: 'end',
+	} );
+
+	const caption = new ThreeMeshUI.Text( {
+		width: '100%',
+		margin: 0.025,
+		padding: 0.025,
+		textAlign: 'center',
+		textContent: 'Mind your fingers',
+		backgroundColor: 0x000000,
+		backgroundOpacity: 0.5,
+		fontSize: 0.04,
+	} );
+
+	leftSubBlock.add( caption );
+
+	//
+
+	const rightSubBlock = new ThreeMeshUI.Block( {
+		margin: 0.025,
+		width: 0.5,
+		padding: 0.025,
+		backgroundColor : 0x000000,
+		backgroundOpacity : 0.5,
+		flexDirection: 'column',
+		justifyContent: 'space-evenly',
+	} );
+
+	const subSubBlock1 = new ThreeMeshUI.Text( {
+		margin: 0.025,
+		fontSize: 0.04,
+		backgroundOpacity: 0,
+		textAlign: 'center',
+	} ).add(
+		new ThreeMeshUI.Inline( {
+			textContent: 'Known for its extremely keeled dorsal scales that give it a ',
+		} ),
+
+		new ThreeMeshUI.Inline( {
+			textContent: 'bristly',
+			color: new THREE.Color( 0x92e66c ),
+		} ),
+
+		new ThreeMeshUI.Inline( {
+			textContent: ' appearance.',
+		} )
+	);
+
+	const subSubBlock2 = new ThreeMeshUI.Text( {
+		margin: 0.01,
+		padding: 0.02,
+		fontSize: 0.025,
+		alignItems: 'start',
+		textAlign: 'justify',
+		backgroundOpacity: 0,
+		textContent: 'The males of this species grow to maximum total length of 73 cm (29 in): body 58 cm (23 in), tail 15 cm (5.9 in). Females grow to a maximum total length of 58 cm (23 in). The males are surprisingly long and slender compared to the females.\n\nThe head has a short snout, more so in males than in females.\nThe eyes are large and surrounded by 9–16 circumorbital scales. The orbits (eyes) are separated by 7–9 scales.',
+	} );
+
+	rightSubBlock.add( subSubBlock1, subSubBlock2 );
+
+	//
+
+	const contentContainer = new ThreeMeshUI.Block( {
+		flexDirection: 'row',
+		alignItems: 'stretch',
+		padding: 0.02,
+		margin: 0.025,
+		backgroundOpacity: 0,
+	} );
+
+	contentContainer.add( leftSubBlock, rightSubBlock );
+	container.add( contentContainer );
+
+	//
+
+	new THREE.TextureLoader().load( SnakeImage, ( texture ) => {
+		leftSubBlock.set( {
+			backgroundColor: new THREE.Color( 0xffffff ),
 			backgroundOpacity: 1,
-      backgroundTexture: texture,
-    });
-  });
+			backgroundImage: texture,
+		} );
+	} );
 }
 
 //
 
 function onWindowResize() {
-  camera.aspect = window.innerWidth / window.innerHeight;
-  camera.updateProjectionMatrix();
-  renderer.setSize(window.innerWidth, window.innerHeight);
+	camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+	renderer.setSize( window.innerWidth, window.innerHeight );
 }
 
 //
 
 function loop() {
-  // Don't forget, ThreeMeshUI must be updated manually.
-  // This has been introduced in version 3.0.0 in order
-  // to improve performance
-  ThreeMeshUI.update();
+	// Don't forget, ThreeMeshUI must be updated manually.
+	// This has been introduced in version 3.0.0 in order
+	// to improve performance
+	ThreeMeshUI.update();
 
-  controls.update();
-  renderer.render(scene, camera);
+	controls.update();
+	renderer.render( scene, camera );
 }
diff --git a/examples/tut__preloaded_font.js b/examples/tut__preloaded_font.js
index 1c1a3964..3be916ba 100644
--- a/examples/tut__preloaded_font.js
+++ b/examples/tut__preloaded_font.js
@@ -1,3 +1,6 @@
+// xfg:title Preload Fonts
+// xfg:category practice
+
 import * as THREE from 'three';
 import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -8,9 +11,6 @@ import ThreeMeshUI, { FontLibrary } from 'three-mesh-ui';
 import ROBOTO_ADJUSTMENT from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/adjustment';
 import MSDFNormalMaterial from 'three-mesh-ui/examples/materials/msdf/MSDFNormalMaterial';
 
-import * as FontWeight from '../src/utils/font/FontWeight';
-import * as FontStyle from '../src/utils/font/FontStyle';
-
 /***********************************************************************************************************************
  * THREE-MESH-UI - FONT MANAGEMENT
  * -------------------------------
@@ -39,10 +39,10 @@ FontLibrary.prepare(
 				.addVariant(
 					// The weight of the variant '100'|'200'|'300'|'400'|'600'|'700'|'800'|'900'
 					//														LIGHTER					NORMAL			BOLD				BOLDER
-					FontWeight.NORMAL,
+					"normal",
 
 					// The style of the variant 'normal'|'italic'|'oblique'|'oblique(x deg)'
-					FontStyle.NORMAL,
+					"normal",
 
 					// The json definition of the msdf font 'urlToLoad'|loadedObject
 					"./assets/fonts/msdf/roboto/regular.json",
@@ -52,9 +52,9 @@ FontLibrary.prepare(
 				)
 
 				// Registering additional variants
-				.addVariant(FontWeight.BOLD, FontStyle.ITALIC, "./assets/fonts/msdf/roboto/bold-italic.json", "./assets/fonts/msdf/roboto/bold-italic.png" )
-				.addVariant(FontWeight.BOLD, FontStyle.NORMAL, "./assets/fonts/msdf/roboto/bold.json", "./assets/fonts/msdf/roboto/bold.png" )
-				.addVariant(FontWeight.NORMAL, FontStyle.ITALIC, "./assets/fonts/msdf/roboto/italic.json", "./assets/fonts/msdf/roboto/italic.png" )
+				.addVariant("bold", "italic", "./assets/fonts/msdf/roboto/bold-italic.json", "./assets/fonts/msdf/roboto/bold-italic.png" )
+				.addVariant("bold", "normal", "./assets/fonts/msdf/roboto/bold.json", "./assets/fonts/msdf/roboto/bold.png" )
+				.addVariant("normal", "italic", "./assets/fonts/msdf/roboto/italic.json", "./assets/fonts/msdf/roboto/italic.png" )
 
 // FontLibrary.prepare() returns a Promise, we can therefore add a callback to be executed when all files are loaded
 ).then( () => {
@@ -63,7 +63,7 @@ FontLibrary.prepare(
 	const RobotoFamily = FontLibrary.getFontFamily("Roboto");
 
 	// And then retrieve a fontVariant defined in this Family
-	const RobotoRegular = RobotoFamily.getVariant('400','normal');
+	const RobotoRegular = RobotoFamily.getVariant('normal','normal');
 
 	// Having font variant allows us to perform some modifications
 	// 1. Adjustments
@@ -82,14 +82,14 @@ FontLibrary.prepare(
 	// 1. Material
 	// Instead of assigning custom materials to Text one by one
 	// We can assign a Material(class) to a font variant (Here the bold one)
-	RobotoFamily.getVariant('700','normal').fontMaterial = MSDFNormalMaterial;
+	RobotoFamily.getVariant('bold','normal').fontMaterial = MSDFNormalMaterial;
 	// Once set, any three-mesh-ui Text using this font variant will use the defined material
 
 	// We may encounter the following lines in other examples,
 	// they are adjusting font variants to display a nice baseline
-	RobotoFamily.getVariant('700','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
-	RobotoFamily.getVariant('700','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
-	RobotoFamily.getVariant('400','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	RobotoFamily.getVariant('bold','normal').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	RobotoFamily.getVariant('bold','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
+	RobotoFamily.getVariant('normal','italic').adjustTypographicGlyphs( ROBOTO_ADJUSTMENT );
 
 	// Now that the font are loaded and adjusted,
 	step1BuildThreeJSElements();
@@ -166,6 +166,9 @@ function step2BuildThreeMeshUIElements() {
 		justifyContent: 'center',
 		textAlign: 'left',
 
+		backgroundOpacity: 0.15,
+		backgroundColor: 0x000000,
+
 		// text properties
 		fontSize: 0.05,
 		// As we have prepare our fonts we can now use them
@@ -181,8 +184,8 @@ function step2BuildThreeMeshUIElements() {
 
 	// Lets build a first text that would be in bold, and use a MSDFNormalMaterial
 	const text1 = new ThreeMeshUI.Text( {
-			content: 'Managing fonts in three-mesh-ui',
-			fontWeight: '700',
+			textContent: 'Managing fonts in three-mesh-ui',
+			fontWeight: 'bold',
 			fontSize: 0.08
 		} );
 
@@ -191,51 +194,47 @@ function step2BuildThreeMeshUIElements() {
 	// there is no more need to manually set its material to MSDFNormalMaterial
 	// text1.material = new MSDFNormalMaterial({});
 
+	const last = new ThreeMeshUI.Text( {
+		textContent: '\n\n* Managing and preloading fonts can display Text with no additional delays.',
+		fontStyle: 'italic',
+		fontSize: 0.035
+	} );
 
 	rootBlock.add(
 
 		text1,
 
 		new ThreeMeshUI.Text( {
-			content: '\nIn this examples, 4 variants of the "Roboto" font are registered.',
+			textContent: 'In this examples, 4 variants of the "Roboto" font are registered.',
 		} ),
 
-		new ThreeMeshUI.Text( {
-			content: '\n\nRegular',
-		} ),
-
-		new ThreeMeshUI.Text( {
-			content: ' Bold',
-			fontWeight: '700',
-		} ),
+		new ThreeMeshUI.Text({margin:'0.05 0 0.05 0.1'}).add(
+			new ThreeMeshUI.Inline({ textContent:"Regular "}),
+			new ThreeMeshUI.Inline({ textContent:"Bold ",fontWeight:'bold', margin: 0.05}),
+			new ThreeMeshUI.Inline({ textContent:"Italic ",fontStyle:'italic'}),
+			new ThreeMeshUI.Inline({ textContent:"Bold+Italic",fontWeight:'bold',fontStyle:'italic'}),
+		),
 
 		new ThreeMeshUI.Text( {
-			content: ' Italic',
-			fontStyle: 'italic',
+			textContent: 'The registered bold variant in this example, will automatically set the material of a Text to use ',
 		} ),
 
 		new ThreeMeshUI.Text( {
-			content: ' Bold+Italic',
-			fontWeight: '700',
-			fontStyle: 'italic',
+			textContent: 'MSDFNormalMaterial.',
+			fontWeight: 'bold',
 		} ),
 
-		new ThreeMeshUI.Text( {
-			content: '\n\nThe registered bold variant in this example, will automatically set the material of a Text to use ',
-		} ),
+		last
 
-		new ThreeMeshUI.Text( {
-			content: 'MSDFNormalMaterial.',
-			fontWeight: '700',
-		} ),
+	);
 
-		new ThreeMeshUI.Text( {
-			content: '\n\n* Managing and preloading fonts can display Text with no additional delays.',
-			fontStyle: 'italic',
-			fontSize: 0.035
-		} )
+	ThreeMeshUI.update()
 
-	);
+	setInterval( ()=>{
+		text1.set({ fontWeight: Math.random()>0.5 ? 'bold' : 'normal', color:Math.random()*0xffffff});
+		last.set({ fontStyle: Math.random()>0.5 ? 'italic' : 'normal'});
+		ThreeMeshUI.update()
+	}, 500)
 
 }
 
@@ -246,7 +245,7 @@ function step3AnimationLoop() {
 	// Don't forget, ThreeMeshUI must be updated manually.
 	// This has been introduced in version 3.0.0 in order
 	// to improve performance
-	ThreeMeshUI.update();
+	// ThreeMeshUI.update();
 
 	controls.update();
 	renderer.render( scene, camera );
diff --git a/examples/tut__sizes.js b/examples/tut__sizes.js
new file mode 100644
index 00000000..f3f92d6b
--- /dev/null
+++ b/examples/tut__sizes.js
@@ -0,0 +1,140 @@
+import * as THREE from 'three';
+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry.js';
+
+import ThreeMeshUI from 'three-mesh-ui';
+
+import FontJSON from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.json';
+import FontImage from 'three-mesh-ui/examples/assets/fonts/msdf/roboto/regular.png';
+
+const WIDTH = window.innerWidth;
+const HEIGHT = window.innerHeight;
+
+let scene, camera, renderer, controls;
+
+window.addEventListener( 'load', init );
+window.addEventListener( 'resize', onWindowResize );
+
+//
+
+function init() {
+	scene = new THREE.Scene();
+	scene.background = new THREE.Color( 0x505050 );
+
+	camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 0.1, 100 );
+
+	renderer = new THREE.WebGLRenderer( { antialias: true } );
+	renderer.setPixelRatio( window.devicePixelRatio );
+	renderer.setSize( WIDTH, HEIGHT );
+	renderer.xr.enabled = true;
+	document.body.appendChild( VRButton.createButton( renderer ) );
+	document.body.appendChild( renderer.domElement );
+
+	controls = new OrbitControls( camera, renderer.domElement );
+	camera.position.set( 0, 1.6, 0 );
+	controls.target = new THREE.Vector3( 0, 1, -1.8 );
+	controls.update();
+
+	// ROOM
+
+	const room = new THREE.LineSegments(
+		new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
+		new THREE.LineBasicMaterial( { color: 0x808080 } )
+	);
+
+	scene.add( room );
+
+	// TEXT PANEL
+
+	makeTextPanel();
+
+	//
+
+	renderer.setAnimationLoop( loop );
+}
+
+//
+
+function makeTextPanel() {
+
+	const rootBlock = new ThreeMeshUI.Block( {
+		name: 'rootBlock',
+		width: 2,
+		height: 2,
+		padding: 0.1,
+		fontFamily: FontJSON,
+		fontTexture: FontImage,
+		color: new THREE.Color( 0xffffff ),
+
+		backgroundColor: 0x000000,
+		backgroundOpacity: 0.25,
+
+		flexDirection: 'column',
+		justifyContent: 'center',
+		alignItems : 'stretch',
+	} );
+
+	rootBlock.position.set( 0, 1, -1.8 );
+	rootBlock.rotation.x = -0.55;
+
+	window.rootBlock = rootBlock;
+
+	scene.add( rootBlock );
+
+
+	const innerBlock = new ThreeMeshUI.Block({
+		name: "innerBlock",
+		height: '100%',
+		flexDirection: 'row',
+		justifyContent: 'space-evenly',
+		backgroundColor: 0xff9900,
+	})
+
+	rootBlock.add( innerBlock );
+
+	const letters = "ABCDE";
+	for ( let i = 0; i < 4; i++ ) {
+		const item = new ThreeMeshUI.Text({
+			width: 0.2,
+			height: '100%',
+			textContent: letters[i],
+			textAlign: 'center',
+			alignItems: 'center',
+			margin: 0.025,
+			backgroundColor : 'red',
+			backgroundOpacity : 1
+		})
+
+		innerBlock.add( item );
+	}
+
+}
+
+//
+
+function onWindowResize() {
+	camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+	renderer.setSize( window.innerWidth, window.innerHeight );
+}
+
+//
+
+function loop() {
+
+	const now = Date.now();
+
+	window.rootBlock.set( {
+		width: Math.sin( now / 1000 ) * 0.5 + 1.5,
+		height: Math.sin( now / 500 ) * 0.5 + 1.5
+	} );
+
+	// Don't forget, ThreeMeshUI must be updated manually.
+	// This has been introduced in version 3.0.0 in order
+	// to improve performance
+	ThreeMeshUI.update();
+
+	controls.update();
+	renderer.render( scene, camera );
+}
diff --git a/examples/tut__tutorial_result.js b/examples/tut__tutorial_result.js
index 139e2778..d13b9019 100644
--- a/examples/tut__tutorial_result.js
+++ b/examples/tut__tutorial_result.js
@@ -1,3 +1,5 @@
+// xfg:title Tutorial result
+// xfg:category practice
 /* Import everything we need from Three.js */
 
 import * as THREE from "three";
@@ -65,6 +67,7 @@ function makeUI() {
     height: 1.5,
     width: 1,
     backgroundOpacity: 0,
+		alignItems: 'center'
   });
 
   container.position.set(0, 1, -1.8);
@@ -78,10 +81,12 @@ function makeUI() {
     width: 1,
   });
 
-  const textBlock = new ThreeMeshUI.Block({
-    height: 0.4,
+  const textBlock = new ThreeMeshUI.Text({
+		boxSizing: 'border-box',
     width: 0.8,
     margin: 0.05,
+		backgroundColor : 0x000000,
+		textContent : "The spiny bush viper is known for its extremely keeled dorsal scales."
   });
 
   container.add(imageBlock, textBlock);
@@ -92,7 +97,7 @@ function makeUI() {
 
   loader.load(SnakeImage, (texture) => {
     imageBlock.set({
-			backgroundTexture: texture,
+			backgroundImage: texture,
 			backgroundOpacity: 1,
 			backgroundColor: new THREE.Color(0xffffff)
 		});
@@ -105,35 +110,20 @@ function makeUI() {
     fontTexture: FontImage,
   });
 
-  const text = new ThreeMeshUI.Text({
-    content:
-      "The spiny bush viper is known for its extremely keeled dorsal scales.",
-  });
-
-  textBlock.add(text);
+	textBlock.add( new ThreeMeshUI.Inline({
+		textContent: " Mind your fingers.",
+		fontSize: 0.07,
+		color: new THREE.Color(0xefffe8),
+	}) )
 
-  //
-
-  text.set({
-    fontColor: new THREE.Color(0xd2ffbd),
-    fontSize: 0.06,
-  });
 
   textBlock.set({
+		color: new THREE.Color(0xd2ffbd),
+		fontSize: 0.06,
     textAlign: "right",
     justifyContent: "end",
     padding: 0.03,
   });
-
-  //
-
-  textBlock.add(
-    new ThreeMeshUI.Text({
-      content: " Mind your fingers.",
-      fontSize: 0.07,
-      fontColor: new THREE.Color(0xefffe8),
-    })
-  );
 }
 
 // Function that resize the renderer when the browser window is resized
diff --git a/examples/utils/Arrows.js b/examples/utils/Arrows.js
new file mode 100644
index 00000000..dd82e59d
--- /dev/null
+++ b/examples/utils/Arrows.js
@@ -0,0 +1,27 @@
+const _rotations = {
+	"top": Math.PI/4,
+	"right": -Math.PI/4,
+	"bottom": Math.PI + Math.PI/4,
+	"left": Math.PI - Math.PI/4
+}
+
+/**
+ *
+ * @param {MeshUIBaseElement} element
+ * @param {number} width
+ * @param {"top"|"right"|"bottom"|"left"} side
+ * @param {"string"|Color|number} color
+ * @returns {void}
+ */
+export default function ( element, width, side, color ) {
+
+	// if ( element.isText ) {
+	// 	console.warn( 'ThreeMeshUI::Arrows cannot process Text elements. Aborted');
+	// 	return;
+	// }
+
+	element.set({borderColor: color, borderWidth: [width,width,0,0], borderOpacity:1, backgroundOpacity:0});
+	element._backgroundMesh.rotation.z = _rotations[side];
+
+
+}
diff --git a/config/webpack.prodConfig.js b/examples/webpack.config.js
similarity index 96%
rename from config/webpack.prodConfig.js
rename to examples/webpack.config.js
index dad1171b..305fae69 100644
--- a/config/webpack.prodConfig.js
+++ b/examples/webpack.config.js
@@ -97,6 +97,7 @@ class ThreeMeshUIExamplePlugin {
 			const fileName = path.join( __dirname , '../dist/database.json');
 
 			if( fs.existsSync( dirName) ) {
+
 				fs.writeFileSync( fileName , JSON.stringify( this._entriesData, null, true ) );
 			}else {
 
@@ -139,7 +140,7 @@ class ThreeMeshUIExamplePlugin {
 
 						details.link = details.title;
 						if( details.type ) {
-							details.link += `<sup>${details.type}</sup>`;
+							details.link += ` <sup>${details.type}</sup>`;
 						}
 
 						//store it
@@ -207,8 +208,12 @@ class ThreeMeshUIExamplePlugin {
 // Automatically get all example.js files
 const entryPoints = {};
 glob.sync( './examples/*.js' ).map( function ( file ) {
+
 	const entryKey = path.basename( file, '.js' );
-	entryPoints[ entryKey ] = file;
+
+	if( entryKey.indexOf("webpack.config") === -1 ){
+		entryPoints[ entryKey ] = file;
+	}
 } );
 
 // instanciate the plugin, it will be used by other
@@ -253,7 +258,7 @@ const indexConfig = new HtmlWebpackPlugin( {
 	// sort pages per purposes
 	environment: {
 		production: false,
-		version: require('./../package.json').version,
+		version: require('../package.json').version,
 	},
 
 	filename: 'index.html',
@@ -280,7 +285,8 @@ const indexConfig = new HtmlWebpackPlugin( {
 			},
 		};
 	}.bind( threeMeshUIExamples ),
-	inject: false
+	inject: false,
+	cache : false
 } );
 
 pagesConfig.push( indexConfig );
@@ -309,6 +315,7 @@ const webpackConfig = env => {
 		resolve: {
 			alias: {
 				'three-mesh-ui/examples': path.resolve( __dirname, '../examples/' ),
+				'three-mesh-ui/src': path.resolve( __dirname, '../src/' ),
 				'three-mesh-ui': path.resolve( __dirname, '../src/three-mesh-ui.js' ),
 			},
 		},
@@ -344,6 +351,14 @@ const webpackConfig = env => {
 		},
 
 		devServer: {
+
+
+			headers: { "Content-Encoding": 'none' },
+
+			server: 'https',
+			host: 'local-ipv4',
+
+
 			hot: false,
 			// The static directory of assets
 			static: {
diff --git a/package-lock.json b/package-lock.json
index 2f0fbc01..ee72840e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,177 +1,8656 @@
 {
   "name": "three-mesh-ui",
   "version": "7.0.0",
-  "lockfileVersion": 1,
+  "lockfileVersion": 2,
   "requires": true,
+  "packages": {
+    "": {
+      "name": "three-mesh-ui",
+      "version": "7.0.0",
+      "license": "MIT",
+      "devDependencies": {
+        "@babel/core": "^7.17.9",
+        "@babel/eslint-parser": "^7.17.0",
+        "@babel/eslint-plugin": "^7.17.7",
+        "@babel/preset-env": "^7.16.11",
+        "@types/three": "^0.136.1",
+        "acorn": "^8.7.0",
+        "chai": "^4.3.6",
+        "copy-webpack-plugin": "^10.2.4",
+        "eslint": "^8.13.0",
+        "eslint-webpack-plugin": "^3.1.1",
+        "file-loader": "^6.2.0",
+        "glob": "^8.0.3",
+        "html-webpack-plugin": "^5.5.0",
+        "karma": "^6.3.18",
+        "karma-chai": "^0.1.0",
+        "karma-chrome-launcher": "^3.1.1",
+        "karma-coverage-istanbul-instrumenter": "^1.0.4",
+        "karma-coverage-istanbul-reporter": "^3.0.3",
+        "karma-mocha": "^2.0.1",
+        "karma-mocha-reporter": "^2.2.5",
+        "lil-gui": "^0.17.0",
+        "mocha": "^9.2.2",
+        "typescript": "^4.6.3",
+        "webpack": "^5.70.0",
+        "webpack-cli": "^4.9.2",
+        "webpack-dev-server": "^4.7.4"
+      },
+      "engines": {
+        "node": "x.x.x"
+      },
+      "peerDependencies": {
+        "three": "^0.145.0"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
+      "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.1.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
+      "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/highlight": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.13.tgz",
+      "integrity": "sha512-5yUzC5LqyTFp2HLmDoxGQelcdYgSpP9xsnMWBphAscOdFrHSAVbLNzWiy32sVNDqJRDiJK6klfDnAgu6PAGSHw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.13.tgz",
+      "integrity": "sha512-ZisbOvRRusFktksHSG6pjj1CSvkPkcZq/KHD45LAkVP/oiHJkNBZWfpvlLmX8OtHDG8IuzsFlVRWo08w7Qxn0A==",
+      "dev": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.1.0",
+        "@babel/code-frame": "^7.18.6",
+        "@babel/generator": "^7.18.13",
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-module-transforms": "^7.18.9",
+        "@babel/helpers": "^7.18.9",
+        "@babel/parser": "^7.18.13",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.18.13",
+        "@babel/types": "^7.18.13",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.1",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/eslint-parser": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz",
+      "integrity": "sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ==",
+      "dev": true,
+      "dependencies": {
+        "eslint-scope": "^5.1.1",
+        "eslint-visitor-keys": "^2.1.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || >=14.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.11.0",
+        "eslint": "^7.5.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@babel/eslint-plugin": {
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-plugin/-/eslint-plugin-7.18.10.tgz",
+      "integrity": "sha512-iV1OZj/7eg4wZIcsVEkXS3MUWdhmpLsu2h+9Zr2ppywKWdCRs6VfjxbRzmHHYeurTizrrnaJ9ZkbO8KOv4lauQ==",
+      "dev": true,
+      "dependencies": {
+        "eslint-rule-composer": "^0.3.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || >=14.0.0"
+      },
+      "peerDependencies": {
+        "@babel/eslint-parser": ">=7.11.0",
+        "eslint": ">=7.5.0"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.13.tgz",
+      "integrity": "sha512-CkPg8ySSPuHTYPJYo7IRALdqyjM9HCbt/3uOBEFbzyGVP6Mn8bwFPB0jX6982JVNBlYzM1nnPkfjuXSOPtQeEQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.18.13",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "jsesc": "^2.5.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/generator/node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
+      "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.18.9.tgz",
+      "integrity": "sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-explode-assignable-expression": "^7.18.6",
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.9.tgz",
+      "integrity": "sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.18.8",
+        "@babel/helper-validator-option": "^7.18.6",
+        "browserslist": "^4.20.2",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.13.tgz",
+      "integrity": "sha512-hDvXp+QYxSRL+23mpAlSGxHMDyIGChm0/AwTfTAAK5Ufe40nCsyNdaYCGuK91phn/fVu9kqayImRDkvNAgdrsA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-member-expression-to-functions": "^7.18.9",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.18.9",
+        "@babel/helper-split-export-declaration": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.18.6.tgz",
+      "integrity": "sha512-7LcpH1wnQLGrI+4v+nPp+zUvIkF9x0ddv1Hkdue10tg3gmRnLy97DXh4STiOf1qeIInyD69Qv5kKSZzKD8B/7A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "regexpu-core": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.2.tgz",
+      "integrity": "sha512-r9QJJ+uDWrd+94BSPcP6/de67ygLtvVy6cK4luE6MOuDsZIdoaPBnfSpbO/+LTifjPckbKXRuI9BB/Z2/y3iTg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.17.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2",
+        "semver": "^6.1.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0-0"
+      }
+    },
+    "node_modules/@babel/helper-environment-visitor": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz",
+      "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-explode-assignable-expression": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz",
+      "integrity": "sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-function-name": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.18.9.tgz",
+      "integrity": "sha512-fJgWlZt7nxGksJS9a0XdSaI4XvpExnNIgRP+rVefWh5U7BL8pPuir6SJUmFKRfjWQ51OtWSzwOxhaH/EBWWc0A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.18.6",
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-hoist-variables": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
+      "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.9.tgz",
+      "integrity": "sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
+      "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.18.9.tgz",
+      "integrity": "sha512-KYNqY0ICwfv19b31XzvmI/mfcylOzbLtowkw+mfvGPAQ3kfCnMLYbED3YecL5tPd8nAYFQFAd6JHp2LxZk/J1g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-simple-access": "^7.18.6",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "@babel/template": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz",
+      "integrity": "sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz",
+      "integrity": "sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-remap-async-to-generator": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz",
+      "integrity": "sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-wrap-function": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.18.9.tgz",
+      "integrity": "sha512-dNsWibVI4lNT6HiuOIBr1oyxo40HvIVmbwPUm3XZ7wMh4k2WxrxTqZwSqw/eEmXDS9np0ey5M2bz9tBmO9c+YQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-member-expression-to-functions": "^7.18.9",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-simple-access": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz",
+      "integrity": "sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.18.9.tgz",
+      "integrity": "sha512-imytd2gHi3cJPsybLRbmFrF7u5BIEuI2cNheyKi3/iOBC63kNn3q8Crn2xVuESli0aM4KYsyEqKyS7lFL8YVtw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-split-export-declaration": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
+      "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz",
+      "integrity": "sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz",
+      "integrity": "sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz",
+      "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-wrap-function": {
+      "version": "7.18.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.18.11.tgz",
+      "integrity": "sha512-oBUlbv+rjZLh2Ks9SKi4aL7eKaAXBWleHzU89mP0G6BMUlRxSckk9tSIkgDGydhgFxHuGSlBQZfnaD47oBEB7w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.18.11",
+        "@babel/types": "^7.18.10"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.18.9.tgz",
+      "integrity": "sha512-Jf5a+rbrLoR4eNdUmnFu8cN5eNJT6qdTdOg5IHIzq87WwyRw9PwguLFOWYgktN/60IP4fgDUawJvs7PjQIzELQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
+      "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.13.tgz",
+      "integrity": "sha512-dgXcIfMuQ0kgzLB2b9tRZs7TTFFaGM2AbtA4fJgUUYukzGH4jwsS7hzQHEGs67jdehpm22vkgKwvbU+aEflgwg==",
+      "dev": true,
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz",
+      "integrity": "sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.18.9.tgz",
+      "integrity": "sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9",
+        "@babel/plugin-proposal-optional-chaining": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.13.0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-async-generator-functions": {
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.18.10.tgz",
+      "integrity": "sha512-1mFuY2TOsR1hxbjCo4QL+qlIjV07p4H4EUYw2J/WCqsvFV6V9X9z9YhXbWndc/4fw+hYGlDT7egYxliMp5O6Ew==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-remap-async-to-generator": "^7.18.9",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-class-properties": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
+      "integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-class-static-block": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.6.tgz",
+      "integrity": "sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-dynamic-import": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz",
+      "integrity": "sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-export-namespace-from": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz",
+      "integrity": "sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-json-strings": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz",
+      "integrity": "sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-logical-assignment-operators": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.18.9.tgz",
+      "integrity": "sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz",
+      "integrity": "sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-numeric-separator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz",
+      "integrity": "sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.18.9.tgz",
+      "integrity": "sha512-kDDHQ5rflIeY5xl69CEqGEZ0KY369ehsCIEbTGb4siHG5BE9sga/T0r0OUwyZNLMmZE79E1kbsqAjwFCW4ds6Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.18.8",
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.18.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-optional-catch-binding": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz",
+      "integrity": "sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-optional-chaining": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.18.9.tgz",
+      "integrity": "sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-private-methods": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz",
+      "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz",
+      "integrity": "sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz",
+      "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-static-block": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-assertions": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.18.6.tgz",
+      "integrity": "sha512-/DU3RXad9+bZwrgWJQKbr39gYbJpLJHezqEzRzi/BHRlJ9zsQb4CK2CA/5apllXNomwA1qHwzvHl+AdEmC5krQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz",
+      "integrity": "sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-to-generator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.18.6.tgz",
+      "integrity": "sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-remap-async-to-generator": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz",
+      "integrity": "sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.18.9.tgz",
+      "integrity": "sha512-5sDIJRV1KtQVEbt/EIBwGy4T01uYIo4KRB3VUqzkhrAIOGx7AoctL9+Ux88btY0zXdDyPJ9mW+bg+v+XEkGmtw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-classes": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.18.9.tgz",
+      "integrity": "sha512-EkRQxsxoytpTlKJmSPYrsOMjCILacAjtSVkd4gChEe2kXjFCun3yohhW5I7plXJhCemM0gKsaGMcO8tinvCA5g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-replace-supers": "^7.18.9",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-computed-properties": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.18.9.tgz",
+      "integrity": "sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-destructuring": {
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.13.tgz",
+      "integrity": "sha512-TodpQ29XekIsex2A+YJPj5ax2plkGa8YYY6mFjCohk/IG9IY42Rtuj1FuDeemfg2ipxIFLzPeA83SIBnlhSIow==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dotall-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz",
+      "integrity": "sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-duplicate-keys": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz",
+      "integrity": "sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz",
+      "integrity": "sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-for-of": {
+      "version": "7.18.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz",
+      "integrity": "sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-function-name": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz",
+      "integrity": "sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-literals": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz",
+      "integrity": "sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-member-expression-literals": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz",
+      "integrity": "sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-amd": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.18.6.tgz",
+      "integrity": "sha512-Pra5aXsmTsOnjM3IajS8rTaLCy++nGM4v3YR4esk5PCsyg9z8NA5oQLwxzMUtDBd8F+UmVza3VxoAaWCbzH1rg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.18.6.tgz",
+      "integrity": "sha512-Qfv2ZOWikpvmedXQJDSbxNqy7Xr/j2Y8/KfijM0iJyKkBTmWuvCA1yeH1yDM7NJhBW/2aXxeucLj6i80/LAJ/Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-simple-access": "^7.18.6",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-systemjs": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.9.tgz",
+      "integrity": "sha512-zY/VSIbbqtoRoJKo2cDTewL364jSlZGvn0LKOf9ntbfxOvjfmyrdtEEOAdswOswhZEb8UH3jDkCKHd1sPgsS0A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-module-transforms": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-umd": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz",
+      "integrity": "sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.18.6.tgz",
+      "integrity": "sha512-UmEOGF8XgaIqD74bC8g7iV3RYj8lMf0Bw7NJzvnS9qQhM4mg+1WHKotUIdjxgD2RGrgFLZZPCFPFj3P/kVDYhg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-new-target": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz",
+      "integrity": "sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-super": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz",
+      "integrity": "sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-parameters": {
+      "version": "7.18.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.18.8.tgz",
+      "integrity": "sha512-ivfbE3X2Ss+Fj8nnXvKJS6sjRG4gzwPMsP+taZC+ZzEGjAYlvENixmt1sZ5Ca6tWls+BlKSGKPJ6OOXvXCbkFg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-property-literals": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz",
+      "integrity": "sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-regenerator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.6.tgz",
+      "integrity": "sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "regenerator-transform": "^0.15.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-reserved-words": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz",
+      "integrity": "sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-shorthand-properties": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz",
+      "integrity": "sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-spread": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.18.9.tgz",
+      "integrity": "sha512-39Q814wyoOPtIB/qGopNIL9xDChOE1pNU0ZY5dO0owhiVt/5kFm4li+/bBtwc7QotG0u5EPzqhZdjMtmqBqyQA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-sticky-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz",
+      "integrity": "sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz",
+      "integrity": "sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typeof-symbol": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz",
+      "integrity": "sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-escapes": {
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz",
+      "integrity": "sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz",
+      "integrity": "sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-env": {
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.18.10.tgz",
+      "integrity": "sha512-wVxs1yjFdW3Z/XkNfXKoblxoHgbtUF7/l3PvvP4m02Qz9TZ6uZGxRVYjSQeR87oQmHco9zWitW5J82DJ7sCjvA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.18.8",
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-validator-option": "^7.18.6",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.18.6",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.18.9",
+        "@babel/plugin-proposal-async-generator-functions": "^7.18.10",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-class-static-block": "^7.18.6",
+        "@babel/plugin-proposal-dynamic-import": "^7.18.6",
+        "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+        "@babel/plugin-proposal-json-strings": "^7.18.6",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.18.9",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+        "@babel/plugin-proposal-numeric-separator": "^7.18.6",
+        "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.18.6",
+        "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+        "@babel/plugin-proposal-private-methods": "^7.18.6",
+        "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.18.6",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-import-assertions": "^7.18.6",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5",
+        "@babel/plugin-transform-arrow-functions": "^7.18.6",
+        "@babel/plugin-transform-async-to-generator": "^7.18.6",
+        "@babel/plugin-transform-block-scoped-functions": "^7.18.6",
+        "@babel/plugin-transform-block-scoping": "^7.18.9",
+        "@babel/plugin-transform-classes": "^7.18.9",
+        "@babel/plugin-transform-computed-properties": "^7.18.9",
+        "@babel/plugin-transform-destructuring": "^7.18.9",
+        "@babel/plugin-transform-dotall-regex": "^7.18.6",
+        "@babel/plugin-transform-duplicate-keys": "^7.18.9",
+        "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
+        "@babel/plugin-transform-for-of": "^7.18.8",
+        "@babel/plugin-transform-function-name": "^7.18.9",
+        "@babel/plugin-transform-literals": "^7.18.9",
+        "@babel/plugin-transform-member-expression-literals": "^7.18.6",
+        "@babel/plugin-transform-modules-amd": "^7.18.6",
+        "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+        "@babel/plugin-transform-modules-systemjs": "^7.18.9",
+        "@babel/plugin-transform-modules-umd": "^7.18.6",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.18.6",
+        "@babel/plugin-transform-new-target": "^7.18.6",
+        "@babel/plugin-transform-object-super": "^7.18.6",
+        "@babel/plugin-transform-parameters": "^7.18.8",
+        "@babel/plugin-transform-property-literals": "^7.18.6",
+        "@babel/plugin-transform-regenerator": "^7.18.6",
+        "@babel/plugin-transform-reserved-words": "^7.18.6",
+        "@babel/plugin-transform-shorthand-properties": "^7.18.6",
+        "@babel/plugin-transform-spread": "^7.18.9",
+        "@babel/plugin-transform-sticky-regex": "^7.18.6",
+        "@babel/plugin-transform-template-literals": "^7.18.9",
+        "@babel/plugin-transform-typeof-symbol": "^7.18.9",
+        "@babel/plugin-transform-unicode-escapes": "^7.18.10",
+        "@babel/plugin-transform-unicode-regex": "^7.18.6",
+        "@babel/preset-modules": "^0.1.5",
+        "@babel/types": "^7.18.10",
+        "babel-plugin-polyfill-corejs2": "^0.3.2",
+        "babel-plugin-polyfill-corejs3": "^0.5.3",
+        "babel-plugin-polyfill-regenerator": "^0.4.0",
+        "core-js-compat": "^3.22.1",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-modules": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
+      "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
+      "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
+      "dev": true,
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
+      "integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.18.6",
+        "@babel/parser": "^7.18.10",
+        "@babel/types": "^7.18.10"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.13.tgz",
+      "integrity": "sha512-N6kt9X1jRMLPxxxPYWi7tgvJRH/rtoU+dbKAPDM44RFHiMH8igdsaSBgFeskhSl/kLWLDUvIh1RXCrTmg0/zvA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.18.6",
+        "@babel/generator": "^7.18.13",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/parser": "^7.18.13",
+        "@babel/types": "^7.18.13",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.13.tgz",
+      "integrity": "sha512-ePqfTihzW0W6XAU+aMw2ykilisStJfDnsejDCXRchCcMJ4O0+8DhPXf2YUbZ6wjBlsEmZwLK/sPweWtu8hcJYQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.18.10",
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@colors/colors": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
+      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.1.tgz",
+      "integrity": "sha512-OhSY22oQQdw3zgPOOwdoj01l/Dzl1Z+xyUP33tkSN+aqyEhymJCcPHyXt+ylW8FSe0TfRC2VG+ROQOapD0aZSQ==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.4.0",
+        "globals": "^13.15.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "13.17.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz",
+      "integrity": "sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
+      "integrity": "sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==",
+      "dev": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/gitignore-to-minimatch": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz",
+      "integrity": "sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "dev": true
+    },
+    "node_modules/@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
+      "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.0",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "node_modules/@jridgewell/source-map/node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz",
+      "integrity": "sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
+    "node_modules/@leichtgewicht/ip-codec": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
+      "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
+      "dev": true
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "dev": true,
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/bonjour": {
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz",
+      "integrity": "sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/component-emitter": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz",
+      "integrity": "sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ==",
+      "dev": true
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect-history-api-fallback": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz",
+      "integrity": "sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==",
+      "dev": true,
+      "dependencies": {
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
+      "dev": true
+    },
+    "node_modules/@types/cors": {
+      "version": "2.8.12",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
+      "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==",
+      "dev": true
+    },
+    "node_modules/@types/eslint": {
+      "version": "8.4.6",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.6.tgz",
+      "integrity": "sha512-/fqTbjxyFUaYNO7VcW5g+4npmqVACz1bB7RTHYuLj+PRjw9hrCwrUXVQFpChUS0JsyEFvMZ7U/PfmvWgxJhI9g==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/eslint-scope": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
+      "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
+      "dev": true,
+      "dependencies": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+      "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
+      "dev": true
+    },
+    "node_modules/@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "dev": true,
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "4.17.30",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.30.tgz",
+      "integrity": "sha512-gstzbTWro2/nFed1WXtf+TtrpwxH7Ggs4RLYTLbeVgIkUQOI3WG/JKjgeOU1zXDvezllupjrf8OPIdvTbIaVOQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
+    "node_modules/@types/html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==",
+      "dev": true
+    },
+    "node_modules/@types/http-proxy": {
+      "version": "1.17.9",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.9.tgz",
+      "integrity": "sha512-QsbSjA/fSk7xB+UXlCT3wHBy5ai9wOcNDWwZAtud+jXhwOM3l+EYZh8Lng4+/6n8uar0J7xILzqftJdJ/Wdfkw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
+      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
+      "dev": true
+    },
+    "node_modules/@types/mime": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
+      "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==",
+      "dev": true
+    },
+    "node_modules/@types/node": {
+      "version": "18.7.14",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.14.tgz",
+      "integrity": "sha512-6bbDaETVi8oyIARulOE9qF1/Qdi/23z6emrUh0fNJRUmjznqrixD4MpGDdgOFk5Xb0m2H6Xu42JGdvAxaJR/wA==",
+      "dev": true
+    },
+    "node_modules/@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "dev": true
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
+      "dev": true
+    },
+    "node_modules/@types/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
+      "dev": true
+    },
+    "node_modules/@types/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==",
+      "dev": true,
+      "dependencies": {
+        "@types/express": "*"
+      }
+    },
+    "node_modules/@types/serve-static": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==",
+      "dev": true,
+      "dependencies": {
+        "@types/mime": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/sockjs": {
+      "version": "0.3.33",
+      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
+      "integrity": "sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/three": {
+      "version": "0.136.1",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.136.1.tgz",
+      "integrity": "sha512-gzTw6RR4dU8sGf+RpLBWWKHRVIJ4gwKVQPk+IFCgha04Efg/itXYUalX6iBcYeSmaDu0qE5M7uTq0XLQpU4FAg==",
+      "dev": true
+    },
+    "node_modules/@types/ws": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
+      "integrity": "sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@ungap/promise-all-settled": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz",
+      "integrity": "sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==",
+      "dev": true
+    },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
+      "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
+      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
+      "dev": true
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
+      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
+      "dev": true
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
+      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
+      "dev": true
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
+      "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.11.1",
+        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
+      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
+      "dev": true
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
+      "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.1"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
+      "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
+      "dev": true,
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
+      "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
+      "dev": true,
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
+      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
+      "dev": true
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
+      "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/helper-wasm-section": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.1",
+        "@webassemblyjs/wasm-opt": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1",
+        "@webassemblyjs/wast-printer": "1.11.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
+      "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/ieee754": "1.11.1",
+        "@webassemblyjs/leb128": "1.11.1",
+        "@webassemblyjs/utf8": "1.11.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
+      "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
+      "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/ieee754": "1.11.1",
+        "@webassemblyjs/leb128": "1.11.1",
+        "@webassemblyjs/utf8": "1.11.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
+      "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webpack-cli/configtest": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
+      "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
+      "dev": true,
+      "peerDependencies": {
+        "webpack": "4.x.x || 5.x.x",
+        "webpack-cli": "4.x.x"
+      }
+    },
+    "node_modules/@webpack-cli/info": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
+      "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
+      "dev": true,
+      "dependencies": {
+        "envinfo": "^7.7.3"
+      },
+      "peerDependencies": {
+        "webpack-cli": "4.x.x"
+      }
+    },
+    "node_modules/@webpack-cli/serve": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
+      "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
+      "dev": true,
+      "peerDependencies": {
+        "webpack-cli": "4.x.x"
+      },
+      "peerDependenciesMeta": {
+        "webpack-dev-server": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "dev": true
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "dev": true
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dev": true,
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-import-assertions": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
+      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": "^8"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/ansi-colors": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
+      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ansi-html-community": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
+      "dev": true,
+      "engines": [
+        "node >= 0.8.0"
+      ],
+      "bin": {
+        "ansi-html": "bin/ansi-html"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/array-flatten": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
+      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
+      "dev": true
+    },
+    "node_modules/array-union": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-3.0.1.tgz",
+      "integrity": "sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+      "dev": true,
+      "dependencies": {
+        "object.assign": "^4.1.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs2": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.2.tgz",
+      "integrity": "sha512-LPnodUl3lS0/4wN3Rb+m+UK8s7lj2jcLRrjho4gLw+OJs+I4bvGXshINesY5xx/apM+biTnQ9reDI8yj+0M5+Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.17.7",
+        "@babel/helper-define-polyfill-provider": "^0.3.2",
+        "semver": "^6.1.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.3.tgz",
+      "integrity": "sha512-zKsXDh0XjnrUEW0mxIHLfjBfnXSMr5Q/goMe/fxpQnLm07mcOZiIZHBNWCMx60HmdvjxfXcalac0tfFg0wqxyw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.3.2",
+        "core-js-compat": "^3.21.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-regenerator": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.0.tgz",
+      "integrity": "sha512-RW1cnryiADFeHmfLS+WW/G431p1PsW5qdRdz0SDRi7TKcUgc7Oh/uXkT7MZ/+tGsT1BkczEAmD5XjUyJ5SWDTw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.3.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "node_modules/base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "dev": true,
+      "engines": {
+        "node": "^4.5.0 || >= 5.9"
+      }
+    },
+    "node_modules/batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
+      "dev": true
+    },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz",
+      "integrity": "sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==",
+      "dev": true,
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.10.3",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/body-parser/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/body-parser/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/bonjour-service": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.0.14.tgz",
+      "integrity": "sha512-HIMbgLnk1Vqvs6B4Wq5ep7mxvj9sGz5d1JJyDNSGNIdA/w2MCz6GTjWTdjqOJV1bEPj+6IkxDvWNFKEBxNt4kQ==",
+      "dev": true,
+      "dependencies": {
+        "array-flatten": "^2.1.2",
+        "dns-equal": "^1.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "multicast-dns": "^7.2.5"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browser-stdout": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
+      "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
+      "dev": true
+    },
+    "node_modules/browserslist": {
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
+      "integrity": "sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001370",
+        "electron-to-chromium": "^1.4.202",
+        "node-releases": "^2.0.6",
+        "update-browserslist-db": "^1.0.5"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "dev": true,
+      "dependencies": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001388",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001388.tgz",
+      "integrity": "sha512-znVbq4OUjqgLxMxoNX2ZeeLR0d7lcDiE5uJ4eUiWdml1J1EkxbnQq6opT9jb9SMfJxB0XA16/ziHwni4u1I3GQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        }
+      ]
+    },
+    "node_modules/chai": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.6.tgz",
+      "integrity": "sha512-bbcp3YfHCUzMOvKqsztczerVgBKSsEijCySNlHHbX3VG1nskvqjz5Rfso1gGwD6w6oOV3eI60pKuMOV5MV7p3Q==",
+      "dev": true,
+      "dependencies": {
+        "assertion-error": "^1.1.0",
+        "check-error": "^1.0.2",
+        "deep-eql": "^3.0.1",
+        "get-func-name": "^2.0.0",
+        "loupe": "^2.3.1",
+        "pathval": "^1.1.1",
+        "type-detect": "^4.0.5"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/check-error": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
+      "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/clean-css": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
+      "integrity": "sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==",
+      "dev": true,
+      "dependencies": {
+        "source-map": "~0.6.0"
+      },
+      "engines": {
+        "node": ">= 10.0"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/colorette": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
+      "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
+      "dev": true
+    },
+    "node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/component-emitter": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
+      "dev": true
+    },
+    "node_modules/compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "dev": true,
+      "dependencies": {
+        "mime-db": ">= 1.43.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "dev": true,
+      "dependencies": {
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/compression/node_modules/bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/compression/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/compression/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "node_modules/connect": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
+      "integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "2.6.9",
+        "finalhandler": "1.1.2",
+        "parseurl": "~1.3.3",
+        "utils-merge": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/connect-history-api-fallback": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
+      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/connect/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/connect/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-disposition/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
+      "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+      "dev": true
+    },
+    "node_modules/copy-webpack-plugin": {
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-10.2.4.tgz",
+      "integrity": "sha512-xFVltahqlsRcyyJqQbDY6EYTtyQZF9rf+JPjwHObLdPFMEISqkFkr7mFoVOC6BfYS/dNThyoQKvziugm+OnwBg==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.2.7",
+        "glob-parent": "^6.0.1",
+        "globby": "^12.0.2",
+        "normalize-path": "^3.0.0",
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 12.20.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      }
+    },
+    "node_modules/core-js-compat": {
+      "version": "3.25.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.25.0.tgz",
+      "integrity": "sha512-extKQM0g8/3GjFx9US12FAgx8KJawB7RCQ5y8ipYLbmfzEzmFRWdDjIlxDx82g7ygcNG85qMVUSRyABouELdow==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.3",
+        "semver": "7.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-js-compat/node_modules/semver": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "dev": true
+    },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dev": true,
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/custom-event": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
+      "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==",
+      "dev": true
+    },
+    "node_modules/date-format": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.13.tgz",
+      "integrity": "sha512-bnYCwf8Emc3pTD8pXnre+wfnjGtfi5ncMDKy7+cWZXbmRAsdWkOQHrfC1yz/KiwP5thDp2kCHWYWKBX4HP1hoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decamelize": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz",
+      "integrity": "sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/deep-eql": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz",
+      "integrity": "sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==",
+      "dev": true,
+      "dependencies": {
+        "type-detect": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
+    },
+    "node_modules/default-gateway": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
+      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
+      "dev": true,
+      "dependencies": {
+        "execa": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
+      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "dev": true,
+      "dependencies": {
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+      "dev": true
+    },
+    "node_modules/di": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
+      "integrity": "sha512-uJaamHkagcZtHPqCIHZxnFrXlunQXgBOsZSUOWwFw31QJCAbyTBoHMW75YOTur5ZNx8pIeAKgf6GWIgaqqiLhA==",
+      "dev": true
+    },
+    "node_modules/diff": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.0.0.tgz",
+      "integrity": "sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dns-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
+      "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==",
+      "dev": true
+    },
+    "node_modules/dns-packet": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.4.0.tgz",
+      "integrity": "sha512-EgqGeaBB8hLiHLZtp/IbaDQTL8pZ0+IvwzSHA6d7VyMDM+B9hgddEMa9xjK5oYnw0ci0JQ6g2XCD7/f6cafU6g==",
+      "dev": true,
+      "dependencies": {
+        "@leichtgewicht/ip-codec": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/dom-converter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
+      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+      "dev": true,
+      "dependencies": {
+        "utila": "~0.4"
+      }
+    },
+    "node_modules/dom-serialize": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
+      "integrity": "sha512-Yra4DbvoW7/Z6LBN560ZwXMjoNOSAN2wRsKFGc4iBeso+mpIA6qj1vfdf9HpMaKAqG6wXTy+1SYEzmNpKXOSsQ==",
+      "dev": true,
+      "dependencies": {
+        "custom-event": "~1.0.0",
+        "ent": "~2.2.0",
+        "extend": "^3.0.0",
+        "void-elements": "^2.0.0"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "dev": true
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.240",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.240.tgz",
+      "integrity": "sha512-r20dUOtZ4vUPTqAajDGonIM1uas5tf85Up+wPdtNBNvBSqGCfkpvMVvQ1T8YJzPV9/Y9g3FbUDcXb94Rafycow==",
+      "dev": true
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/engine.io": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.2.0.tgz",
+      "integrity": "sha512-4KzwW3F3bk+KlzSOY57fj/Jx6LyRQ1nbcyIadehl+AnXjKT7gDO0ORdRi/84ixvMKTym6ZKuxvbzN62HDDU1Lg==",
+      "dev": true,
+      "dependencies": {
+        "@types/cookie": "^0.4.1",
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.4.1",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz",
+      "integrity": "sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
+      "integrity": "sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/ent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz",
+      "integrity": "sha512-GHrMyVZQWvTIdDtpiEXdHZnFQKzeO09apj8Cbl4pKWy4i0Oprcq17usfDt5aO63swf0JOeMWjWQE/LzgSRuWpA==",
+      "dev": true
+    },
+    "node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/envinfo": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
+      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
+      "dev": true,
+      "bin": {
+        "envinfo": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
+      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
+      "dev": true
+    },
+    "node_modules/escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "dev": true
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.23.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.23.0.tgz",
+      "integrity": "sha512-pBG/XOn0MsJcKcTRLr27S5HpzQo4kLr+HjLQIyK4EiCsijDl/TB+h5uEuJU6bQ8Edvwz1XWOjpaP2qgnXGpTcA==",
+      "dev": true,
+      "dependencies": {
+        "@eslint/eslintrc": "^1.3.1",
+        "@humanwhocodes/config-array": "^0.10.4",
+        "@humanwhocodes/gitignore-to-minimatch": "^1.0.2",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.1.1",
+        "eslint-utils": "^3.0.0",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.4.0",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^6.0.1",
+        "globals": "^13.15.0",
+        "globby": "^11.1.0",
+        "grapheme-splitter": "^1.0.4",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "regexpp": "^3.2.0",
+        "strip-ansi": "^6.0.1",
+        "strip-json-comments": "^3.1.0",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-rule-composer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz",
+      "integrity": "sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "engines": {
+        "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=5"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/eslint-webpack-plugin": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-webpack-plugin/-/eslint-webpack-plugin-3.2.0.tgz",
+      "integrity": "sha512-avrKcGncpPbPSUHX6B3stNGzkKFto3eL+DKM4+VyMrVnhPc3vRczVlCq3uhuFOdRvDHTVXuzwk1ZKUrqDQHQ9w==",
+      "dev": true,
+      "dependencies": {
+        "@types/eslint": "^7.29.0 || ^8.4.1",
+        "jest-worker": "^28.0.2",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/eslint/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/eslint/node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/eslint/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/eslint/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-scope": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/eslint/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/eslint/node_modules/globals": {
+      "version": "13.17.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz",
+      "integrity": "sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/eslint/node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.0.tgz",
+      "integrity": "sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree/node_modules/eslint-visitor-keys": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esquery/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.1.tgz",
+      "integrity": "sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==",
+      "dev": true,
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.0",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.5.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.2.0",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.10.3",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/express/node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+      "dev": true
+    },
+    "node_modules/express/node_modules/cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/express/node_modules/finalhandler": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "dev": true,
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/express/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/express/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "node_modules/fast-glob": {
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true
+    },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
+      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "dev": true,
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/file-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/file-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/file-loader/node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "dev": true,
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/finalhandler/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/finalhandler/node_modules/on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
+      "dev": true,
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "dev": true,
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "dependencies": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
+      "dev": true
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/fs-monkey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
+      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
+      "dev": true
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "node_modules/functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==",
+      "dev": true
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-func-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
+      "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
+      "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/glob": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
+      "integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true
+    },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
+      "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/globby": {
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-12.2.0.tgz",
+      "integrity": "sha512-wiSuFQLZ+urS9x2gGPl1H5drc5twabmm4m2gTR27XDFyjUHJUNsS8o/2aKyIF6IoBaR630atdher0XJ5g6OMmA==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^3.0.1",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.7",
+        "ignore": "^5.1.9",
+        "merge2": "^1.4.1",
+        "slash": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+      "dev": true
+    },
+    "node_modules/grapheme-splitter": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+      "dev": true
+    },
+    "node_modules/growl": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz",
+      "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.x"
+      }
+    },
+    "node_modules/handle-thing": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
+      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
+      "dev": true
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/hpack.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
+      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "obuf": "^1.0.0",
+        "readable-stream": "^2.0.1",
+        "wbuf": "^1.1.0"
+      }
+    },
+    "node_modules/hpack.js/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dev": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/html-entities": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
+      "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==",
+      "dev": true
+    },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true
+    },
+    "node_modules/html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
+      "dev": true,
+      "dependencies": {
+        "camel-case": "^4.1.2",
+        "clean-css": "^5.2.2",
+        "commander": "^8.3.0",
+        "he": "^1.2.0",
+        "param-case": "^3.0.4",
+        "relateurl": "^0.2.7",
+        "terser": "^5.10.0"
+      },
+      "bin": {
+        "html-minifier-terser": "cli.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/html-webpack-plugin": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
+      "integrity": "sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw==",
+      "dev": true,
+      "dependencies": {
+        "@types/html-minifier-terser": "^6.0.0",
+        "html-minifier-terser": "^6.0.2",
+        "lodash": "^4.17.21",
+        "pretty-error": "^4.0.0",
+        "tapable": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/html-webpack-plugin"
+      },
+      "peerDependencies": {
+        "webpack": "^5.20.0"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/http-deceiver": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
+      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==",
+      "dev": true
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dev": true,
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/http-parser-js": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
+      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==",
+      "dev": true
+    },
+    "node_modules/http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
+      "dependencies": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/http-proxy-middleware": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+      "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
+      "dev": true,
+      "dependencies": {
+        "@types/http-proxy": "^1.17.8",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "@types/express": "^4.17.13"
+      },
+      "peerDependenciesMeta": {
+        "@types/express": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/http-proxy-middleware/node_modules/is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-local": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
+      "integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==",
+      "dev": true,
+      "dependencies": {
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      },
+      "bin": {
+        "import-local-fixture": "fixtures/cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "node_modules/interpret": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
+      "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
+      "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
+      "integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
+      "dev": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "dev": true
+    },
+    "node_modules/isbinaryfile": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.10.tgz",
+      "integrity": "sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/gjtorikian/"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
+      "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-instrument": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz",
+      "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.7.5",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-coverage": "^3.0.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==",
+      "dev": true,
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^3.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz",
+      "integrity": "sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^2.0.5",
+        "make-dir": "^2.1.0",
+        "rimraf": "^2.6.3",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps/node_modules/istanbul-lib-coverage": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz",
+      "integrity": "sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps/node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/istanbul-reports": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.5.tgz",
+      "integrity": "sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==",
+      "dev": true,
+      "dependencies": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-worker": {
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-28.1.3.tgz",
+      "integrity": "sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+      }
+    },
+    "node_modules/jest-worker/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "dev": true,
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true
+    },
+    "node_modules/json5": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/karma": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.0.tgz",
+      "integrity": "sha512-s8m7z0IF5g/bS5ONT7wsOavhW4i4aFkzD4u4wgzAQWT4HGUeWI3i21cK2Yz6jndMAeHETp5XuNsRoyGJZXVd4w==",
+      "dev": true,
+      "dependencies": {
+        "@colors/colors": "1.5.0",
+        "body-parser": "^1.19.0",
+        "braces": "^3.0.2",
+        "chokidar": "^3.5.1",
+        "connect": "^3.7.0",
+        "di": "^0.0.1",
+        "dom-serialize": "^2.2.1",
+        "glob": "^7.1.7",
+        "graceful-fs": "^4.2.6",
+        "http-proxy": "^1.18.1",
+        "isbinaryfile": "^4.0.8",
+        "lodash": "^4.17.21",
+        "log4js": "^6.4.1",
+        "mime": "^2.5.2",
+        "minimatch": "^3.0.4",
+        "mkdirp": "^0.5.5",
+        "qjobs": "^1.2.0",
+        "range-parser": "^1.2.1",
+        "rimraf": "^3.0.2",
+        "socket.io": "^4.4.1",
+        "source-map": "^0.6.1",
+        "tmp": "^0.2.1",
+        "ua-parser-js": "^0.7.30",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "karma": "bin/karma"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/karma-chai": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/karma-chai/-/karma-chai-0.1.0.tgz",
+      "integrity": "sha512-mqKCkHwzPMhgTYca10S90aCEX9+HjVjjrBFAsw36Zj7BlQNbokXXCAe6Ji04VUMsxcY5RLP7YphpfO06XOubdg==",
+      "dev": true,
+      "peerDependencies": {
+        "chai": "*",
+        "karma": ">=0.10.9"
+      }
+    },
+    "node_modules/karma-chrome-launcher": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-3.1.1.tgz",
+      "integrity": "sha512-hsIglcq1vtboGPAN+DGCISCFOxW+ZVnIqhDQcCMqqCp+4dmJ0Qpq5QAjkbA0X2L9Mi6OBkHi2Srrbmm7pUKkzQ==",
+      "dev": true,
+      "dependencies": {
+        "which": "^1.2.1"
+      }
+    },
+    "node_modules/karma-chrome-launcher/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/karma-coverage-istanbul-instrumenter": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/karma-coverage-istanbul-instrumenter/-/karma-coverage-istanbul-instrumenter-1.0.4.tgz",
+      "integrity": "sha512-lde9WPGld1fuawEqoaibd+lq6wrs5HHwEnfzHUh5LlpU9TJqUCjhtHLFVUxJtGEhi/XUZJmlOKuk59NZJrKamg==",
+      "dev": true,
+      "dependencies": {
+        "convert-source-map": "^1.7.0",
+        "istanbul-lib-instrument": "^4.0.3"
+      },
+      "peerDependencies": {
+        "karma": "3 || 4 || 5 || 6"
+      }
+    },
+    "node_modules/karma-coverage-istanbul-reporter": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-3.0.3.tgz",
+      "integrity": "sha512-wE4VFhG/QZv2Y4CdAYWDbMmcAHeS926ZIji4z+FkB2aF/EposRb6DP6G5ncT/wXhqUfAb/d7kZrNKPonbvsATw==",
+      "dev": true,
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^3.0.6",
+        "istanbul-reports": "^3.0.2",
+        "minimatch": "^3.0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mattlewis92"
+      }
+    },
+    "node_modules/karma-mocha": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/karma-mocha/-/karma-mocha-2.0.1.tgz",
+      "integrity": "sha512-Tzd5HBjm8his2OA4bouAsATYEpZrp9vC7z5E5j4C5Of5Rrs1jY67RAwXNcVmd/Bnk1wgvQRou0zGVLey44G4tQ==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.3"
+      }
+    },
+    "node_modules/karma-mocha-reporter": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/karma-mocha-reporter/-/karma-mocha-reporter-2.2.5.tgz",
+      "integrity": "sha512-Hr6nhkIp0GIJJrvzY8JFeHpQZNseuIakGac4bpw8K1+5F0tLb6l7uvXRa8mt2Z+NVwYgCct4QAfp2R2QP6o00w==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.1.0",
+        "log-symbols": "^2.1.0",
+        "strip-ansi": "^4.0.0"
+      },
+      "peerDependencies": {
+        "karma": ">=0.13"
+      }
+    },
+    "node_modules/karma-mocha-reporter/node_modules/ansi-regex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+      "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/karma-mocha-reporter/node_modules/strip-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+      "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/karma/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lil-gui": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/lil-gui/-/lil-gui-0.17.0.tgz",
+      "integrity": "sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==",
+      "dev": true
+    },
+    "node_modules/loader-runner": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
+      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.11.5"
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "node_modules/log-symbols": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
+      "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/log4js": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/log4js/-/log4js-6.6.1.tgz",
+      "integrity": "sha512-J8VYFH2UQq/xucdNu71io4Fo+purYYudyErgBbswWKO0MC6QVOERRomt5su/z6d3RJSmLyTGmXl3Q/XjKCf+/A==",
+      "dev": true,
+      "dependencies": {
+        "date-format": "^4.0.13",
+        "debug": "^4.3.4",
+        "flatted": "^3.2.6",
+        "rfdc": "^1.3.0",
+        "streamroller": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/loupe": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.4.tgz",
+      "integrity": "sha512-OvKfgCC2Ndby6aSTREl5aCCPTNIzlDfQZvZxNUrBrihDhL3xcrYegTblhmEiCrg2kKQz4XsFIaemE5BF4ybSaQ==",
+      "dev": true,
+      "dependencies": {
+        "get-func-name": "^2.0.0"
+      }
+    },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/memfs": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.7.tgz",
+      "integrity": "sha512-ygaiUSNalBX85388uskeCyhSAoOSgzBbtVCr9jA2RROssFL9Q19/ZXFqS+2Th2sr1ewNIWgFdLzLC3Yl1Zv+lw==",
+      "dev": true,
+      "dependencies": {
+        "fs-monkey": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
+      "dev": true
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+      "dev": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "dev": true
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
+      "dev": true
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/mocha": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-9.2.2.tgz",
+      "integrity": "sha512-L6XC3EdwT6YrIk0yXpavvLkn8h+EU+Y5UcCHKECyMbdUIxyMuZj4bX4U9e1nvnvUUvQVsV2VHQr5zLdcUkhW/g==",
+      "dev": true,
+      "dependencies": {
+        "@ungap/promise-all-settled": "1.1.2",
+        "ansi-colors": "4.1.1",
+        "browser-stdout": "1.3.1",
+        "chokidar": "3.5.3",
+        "debug": "4.3.3",
+        "diff": "5.0.0",
+        "escape-string-regexp": "4.0.0",
+        "find-up": "5.0.0",
+        "glob": "7.2.0",
+        "growl": "1.10.5",
+        "he": "1.2.0",
+        "js-yaml": "4.1.0",
+        "log-symbols": "4.1.0",
+        "minimatch": "4.2.1",
+        "ms": "2.1.3",
+        "nanoid": "3.3.1",
+        "serialize-javascript": "6.0.0",
+        "strip-json-comments": "3.1.1",
+        "supports-color": "8.1.1",
+        "which": "2.0.2",
+        "workerpool": "6.2.0",
+        "yargs": "16.2.0",
+        "yargs-parser": "20.2.4",
+        "yargs-unparser": "2.0.0"
+      },
+      "bin": {
+        "_mocha": "bin/_mocha",
+        "mocha": "bin/mocha"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mochajs"
+      }
+    },
+    "node_modules/mocha/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/mocha/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/mocha/node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/mocha/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/mocha/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/mocha/node_modules/debug": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
+      "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/mocha/node_modules/debug/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node_modules/mocha/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mocha/node_modules/glob": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/mocha/node_modules/glob/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/mocha/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/mocha/node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mocha/node_modules/minimatch": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-4.2.1.tgz",
+      "integrity": "sha512-9Uq1ChtSZO+Mxa/CL1eGizn2vRn3MlLgzhT0Iz8zaY8NdvxvB0d5QdPFmCKf7JKA9Lerx5vRrnwO03jsSfGG9g==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/mocha/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
+    "node_modules/mocha/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/mocha/node_modules/yargs-parser": {
+      "version": "20.2.4",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
+      "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node_modules/multicast-dns": {
+      "version": "7.2.5",
+      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
+      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
+      "dev": true,
+      "dependencies": {
+        "dns-packet": "^5.2.2",
+        "thunky": "^1.0.2"
+      },
+      "bin": {
+        "multicast-dns": "cli.js"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
+      "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
+      "dev": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true
+    },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/node-forge": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6.13.0"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
+      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
+      "dev": true
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/obuf": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
+      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
+      "dev": true
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dev": true,
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
+      "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+      "dev": true,
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dev": true,
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-retry": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
+      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/retry": "0.12.0",
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "dev": true,
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dev": true,
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
+      "dev": true
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pathval": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
+      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/pretty-error": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
+      "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.20",
+        "renderkid": "^3.0.0"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dev": true,
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/proxy-addr/node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qjobs": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/qjobs/-/qjobs-1.2.0.tgz",
+      "integrity": "sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.9"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "dev": true,
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "dev": true,
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/rechoir": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
+      "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==",
+      "dev": true,
+      "dependencies": {
+        "resolve": "^1.9.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+      "dev": true
+    },
+    "node_modules/regenerate-unicode-properties": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz",
+      "integrity": "sha512-vn5DU6yg6h8hP/2OkQo3K7uVILvY4iu0oI4t3HFa81UPkhGJwkRwM10JEc3upjdhHjs/k8GJY1sRBhk5sr69Bw==",
+      "dev": true,
+      "dependencies": {
+        "regenerate": "^1.4.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
+      "dev": true
+    },
+    "node_modules/regenerator-transform": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.0.tgz",
+      "integrity": "sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "node_modules/regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      }
+    },
+    "node_modules/regexpu-core": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.1.0.tgz",
+      "integrity": "sha512-bb6hk+xWd2PEOkj5It46A16zFMs2mv86Iwpdu94la4S3sJ7C973h2dHpYKwIBGaWSO7cIRJ+UX0IeMaWcO4qwA==",
+      "dev": true,
+      "dependencies": {
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^10.0.1",
+        "regjsgen": "^0.6.0",
+        "regjsparser": "^0.8.2",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regjsgen": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.6.0.tgz",
+      "integrity": "sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA==",
+      "dev": true
+    },
+    "node_modules/regjsparser": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.8.4.tgz",
+      "integrity": "sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA==",
+      "dev": true,
+      "dependencies": {
+        "jsesc": "~0.5.0"
+      },
+      "bin": {
+        "regjsparser": "bin/parser"
+      }
+    },
+    "node_modules/regjsparser/node_modules/jsesc": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+      "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+      "dev": true,
+      "bin": {
+        "jsesc": "bin/jsesc"
+      }
+    },
+    "node_modules/relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/renderkid": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
+      "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
+      "dev": true,
+      "dependencies": {
+        "css-select": "^4.1.3",
+        "dom-converter": "^0.2.0",
+        "htmlparser2": "^6.1.0",
+        "lodash": "^4.17.21",
+        "strip-ansi": "^6.0.1"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true
+    },
+    "node_modules/resolve": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.9.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
+      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+      "dev": true,
+      "dependencies": {
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-cwd/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz",
+      "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==",
+      "dev": true
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
+    },
+    "node_modules/schema-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.8.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/select-hose": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
+      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
+      "dev": true
+    },
+    "node_modules/selfsigned": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.0.1.tgz",
+      "integrity": "sha512-LmME957M1zOsUhG+67rAjKfiWFox3SBxE/yymatMZsAx+oMrJ0YQ8AToOnyCm7xbeg2ep37IHLxdu0o2MavQOQ==",
+      "dev": true,
+      "dependencies": {
+        "node-forge": "^1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/send": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "dev": true,
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/send/node_modules/debug/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/send/node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
+      "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
+      "dev": true,
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
+      "dev": true,
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.6.2",
+        "mime-types": "~2.1.17",
+        "parseurl": "~1.3.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/serve-index/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/serve-index/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index/node_modules/http-errors": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+      "dev": true,
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.0",
+        "statuses": ">= 1.4.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+      "dev": true
+    },
+    "node_modules/serve-index/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/serve-index/node_modules/setprototypeof": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
+      "dev": true
+    },
+    "node_modules/serve-index/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "dev": true,
+      "dependencies": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.18.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "dev": true
+    },
+    "node_modules/shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "dependencies": {
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true
+    },
+    "node_modules/slash": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/socket.io": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.1.tgz",
+      "integrity": "sha512-0y9pnIso5a9i+lJmsCdtmTTgJFFSvNQKDnPQRz28mGNnxbmqYg2QPtJTLFxhymFZhAIn50eHAKzJeiNaKr+yUQ==",
+      "dev": true,
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "debug": "~4.3.2",
+        "engine.io": "~6.2.0",
+        "socket.io-adapter": "~2.4.0",
+        "socket.io-parser": "~4.0.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-adapter": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.4.0.tgz",
+      "integrity": "sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg==",
+      "dev": true
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.5.tgz",
+      "integrity": "sha512-sNjbT9dX63nqUFIOv95tTVm6elyIU4RvB1m8dOeZt+IgWwcWklFDOdmGcfo3zSiRsnR/3pJkjY5lfoGqEe4Eig==",
+      "dev": true,
+      "dependencies": {
+        "@types/component-emitter": "^1.2.10",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/sockjs": {
+      "version": "0.3.24",
+      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
+      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
+      "dev": true,
+      "dependencies": {
+        "faye-websocket": "^0.11.3",
+        "uuid": "^8.3.2",
+        "websocket-driver": "^0.7.4"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/spdy": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
+      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.0",
+        "handle-thing": "^2.0.0",
+        "http-deceiver": "^1.2.7",
+        "select-hose": "^2.0.0",
+        "spdy-transport": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/spdy-transport": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.0",
+        "detect-node": "^2.0.4",
+        "hpack.js": "^2.1.6",
+        "obuf": "^1.1.2",
+        "readable-stream": "^3.0.6",
+        "wbuf": "^1.7.3"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/streamroller": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-3.1.2.tgz",
+      "integrity": "sha512-wZswqzbgGGsXYIrBYhOE0yP+nQ6XRk7xDcYwuQAGTYXdyAUmvgVFE0YU1g5pvQT0m7GBaQfYcSnlHbapuK0H0A==",
+      "dev": true,
+      "dependencies": {
+        "date-format": "^4.0.13",
+        "debug": "^4.3.4",
+        "fs-extra": "^8.1.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.0.tgz",
+      "integrity": "sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser-webpack-plugin": {
+      "version": "5.3.6",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.6.tgz",
+      "integrity": "sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.14",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^3.1.1",
+        "serialize-javascript": "^6.0.0",
+        "terser": "^5.14.1"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "uglify-js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
+    },
+    "node_modules/three": {
+      "version": "0.145.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.145.0.tgz",
+      "integrity": "sha512-EKoHQEtEJ4CB6b2BGMBgLZrfwLjXcSUfoI/MiIXUuRpeYsfK5aPWbYhdtIVWOH+x6X0TouldHKHBuc/LAiFzAw==",
+      "peer": true
+    },
+    "node_modules/thunky": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
+      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
+      "dev": true
+    },
+    "node_modules/tmp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+      "dev": true,
+      "dependencies": {
+        "rimraf": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8.17.0"
+      }
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "dev": true
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dev": true,
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz",
+      "integrity": "sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
+    "node_modules/ua-parser-js": {
+      "version": "0.7.31",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
+      "integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+      "dev": true,
+      "dependencies": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-value-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-property-aliases-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.7.tgz",
+      "integrity": "sha512-iN/XYesmZ2RmmWAiI4Z5rq0YqSiv0brj9Ce9CfhNE4xIW2h+MFxcgkxIzZ+ShkFPUkjU3gQ+3oypadD3RAMtrg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "browserslist-lint": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
+    },
+    "node_modules/utila": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+      "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==",
+      "dev": true
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+      "integrity": "sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/watchpack": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
+      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "dev": true,
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/wbuf": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
+      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
+      "dev": true,
+      "dependencies": {
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "node_modules/webpack": {
+      "version": "5.74.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
+      "integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
+      "dev": true,
+      "dependencies": {
+        "@types/eslint-scope": "^3.7.3",
+        "@types/estree": "^0.0.51",
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/wasm-edit": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1",
+        "acorn": "^8.7.1",
+        "acorn-import-assertions": "^1.7.6",
+        "browserslist": "^4.14.5",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.10.0",
+        "es-module-lexer": "^0.9.0",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.9",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.2.0",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.1.0",
+        "tapable": "^2.1.1",
+        "terser-webpack-plugin": "^5.1.3",
+        "watchpack": "^2.4.0",
+        "webpack-sources": "^3.2.3"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-cli": {
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
+      "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
+      "dev": true,
+      "dependencies": {
+        "@discoveryjs/json-ext": "^0.5.0",
+        "@webpack-cli/configtest": "^1.2.0",
+        "@webpack-cli/info": "^1.5.0",
+        "@webpack-cli/serve": "^1.7.0",
+        "colorette": "^2.0.14",
+        "commander": "^7.0.0",
+        "cross-spawn": "^7.0.3",
+        "fastest-levenshtein": "^1.0.12",
+        "import-local": "^3.0.2",
+        "interpret": "^2.2.0",
+        "rechoir": "^0.7.0",
+        "webpack-merge": "^5.7.3"
+      },
+      "bin": {
+        "webpack-cli": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "4.x.x || 5.x.x"
+      },
+      "peerDependenciesMeta": {
+        "@webpack-cli/generators": {
+          "optional": true
+        },
+        "@webpack-cli/migrate": {
+          "optional": true
+        },
+        "webpack-bundle-analyzer": {
+          "optional": true
+        },
+        "webpack-dev-server": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-cli/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/webpack-dev-middleware": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
+      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "dev": true,
+      "dependencies": {
+        "colorette": "^2.0.10",
+        "memfs": "^3.4.3",
+        "mime-types": "^2.1.31",
+        "range-parser": "^1.2.1",
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/webpack-dev-server": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.10.1.tgz",
+      "integrity": "sha512-FIzMq3jbBarz3ld9l7rbM7m6Rj1lOsgq/DyLGMX/fPEB1UBUPtf5iL/4eNfhx8YYJTRlzfv107UfWSWcBK5Odw==",
+      "dev": true,
+      "dependencies": {
+        "@types/bonjour": "^3.5.9",
+        "@types/connect-history-api-fallback": "^1.3.5",
+        "@types/express": "^4.17.13",
+        "@types/serve-index": "^1.9.1",
+        "@types/serve-static": "^1.13.10",
+        "@types/sockjs": "^0.3.33",
+        "@types/ws": "^8.5.1",
+        "ansi-html-community": "^0.0.8",
+        "bonjour-service": "^1.0.11",
+        "chokidar": "^3.5.3",
+        "colorette": "^2.0.10",
+        "compression": "^1.7.4",
+        "connect-history-api-fallback": "^2.0.0",
+        "default-gateway": "^6.0.3",
+        "express": "^4.17.3",
+        "graceful-fs": "^4.2.6",
+        "html-entities": "^2.3.2",
+        "http-proxy-middleware": "^2.0.3",
+        "ipaddr.js": "^2.0.1",
+        "open": "^8.0.9",
+        "p-retry": "^4.5.0",
+        "rimraf": "^3.0.2",
+        "schema-utils": "^4.0.0",
+        "selfsigned": "^2.0.1",
+        "serve-index": "^1.9.1",
+        "sockjs": "^0.3.24",
+        "spdy": "^4.0.2",
+        "webpack-dev-middleware": "^5.3.1",
+        "ws": "^8.4.2"
+      },
+      "bin": {
+        "webpack-dev-server": "bin/webpack-dev-server.js"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.37.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/ws": {
+      "version": "8.8.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.1.tgz",
+      "integrity": "sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-merge": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
+      "integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
+      "dev": true,
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "wildcard": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack/node_modules/@types/estree": {
+      "version": "0.0.51",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
+      "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
+      "dev": true
+    },
+    "node_modules/webpack/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/webpack/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/webpack/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/webpack/node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dev": true,
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/wildcard": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
+      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
+      "dev": true
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/workerpool": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-6.2.0.tgz",
+      "integrity": "sha512-Rsk5qQHJ9eowMH28Jwhe8HEbmdYDX4lwoMWshiCXugjtHqMD9ZbiqSDLxcsfdqsETPzVUtX5s1Z5kStiIM6l4A==",
+      "dev": true
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    },
+    "node_modules/ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs-unparser": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-2.0.0.tgz",
+      "integrity": "sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^6.0.0",
+        "decamelize": "^4.0.0",
+        "flat": "^5.0.2",
+        "is-plain-obj": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  },
   "dependencies": {
     "@ampproject/remapping": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
-      "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
+      "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
       "dev": true,
       "requires": {
-        "@jridgewell/trace-mapping": "^0.3.0"
+        "@jridgewell/gen-mapping": "^0.1.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
       }
     },
     "@babel/code-frame": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
-      "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
+      "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
       "dev": true,
       "requires": {
-        "@babel/highlight": "^7.16.7"
+        "@babel/highlight": "^7.18.6"
       }
     },
     "@babel/compat-data": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.7.tgz",
-      "integrity": "sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.13.tgz",
+      "integrity": "sha512-5yUzC5LqyTFp2HLmDoxGQelcdYgSpP9xsnMWBphAscOdFrHSAVbLNzWiy32sVNDqJRDiJK6klfDnAgu6PAGSHw==",
       "dev": true
     },
     "@babel/core": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.9.tgz",
-      "integrity": "sha512-5ug+SfZCpDAkVp9SFIZAzlW18rlzsOcJGaetCjkySnrXXDUw9AR8cDUm1iByTmdWM6yxX6/zycaV76w3YTF2gw==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.13.tgz",
+      "integrity": "sha512-ZisbOvRRusFktksHSG6pjj1CSvkPkcZq/KHD45LAkVP/oiHJkNBZWfpvlLmX8OtHDG8IuzsFlVRWo08w7Qxn0A==",
       "dev": true,
       "requires": {
         "@ampproject/remapping": "^2.1.0",
-        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.9",
-        "@babel/helper-compilation-targets": "^7.17.7",
-        "@babel/helper-module-transforms": "^7.17.7",
-        "@babel/helpers": "^7.17.9",
-        "@babel/parser": "^7.17.9",
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.9",
-        "@babel/types": "^7.17.0",
+        "@babel/code-frame": "^7.18.6",
+        "@babel/generator": "^7.18.13",
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-module-transforms": "^7.18.9",
+        "@babel/helpers": "^7.18.9",
+        "@babel/parser": "^7.18.13",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.18.13",
+        "@babel/types": "^7.18.13",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
         "json5": "^2.2.1",
         "semver": "^6.3.0"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-          "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
-          "dev": true
-        }
       }
     },
     "@babel/eslint-parser": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.17.0.tgz",
-      "integrity": "sha512-PUEJ7ZBXbRkbq3qqM/jZ2nIuakUBqCYc7Qf52Lj7dlZ6zERnqisdHioL0l4wwQZnmskMeasqUNzLBFKs3nylXA==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz",
+      "integrity": "sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ==",
       "dev": true,
       "requires": {
         "eslint-scope": "^5.1.1",
         "eslint-visitor-keys": "^2.1.0",
         "semver": "^6.3.0"
-      },
-      "dependencies": {
-        "eslint-visitor-keys": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
-          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
-          "dev": true
-        }
       }
     },
     "@babel/eslint-plugin": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/eslint-plugin/-/eslint-plugin-7.17.7.tgz",
-      "integrity": "sha512-JATUoJJXSgwI0T8juxWYtK1JSgoLpIGUsCHIv+NMXcUDA2vIe6nvAHR9vnuJgs/P1hOFw7vPwibixzfqBBLIVw==",
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-plugin/-/eslint-plugin-7.18.10.tgz",
+      "integrity": "sha512-iV1OZj/7eg4wZIcsVEkXS3MUWdhmpLsu2h+9Zr2ppywKWdCRs6VfjxbRzmHHYeurTizrrnaJ9ZkbO8KOv4lauQ==",
       "dev": true,
       "requires": {
         "eslint-rule-composer": "^0.3.0"
       }
     },
     "@babel/generator": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.9.tgz",
-      "integrity": "sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.13.tgz",
+      "integrity": "sha512-CkPg8ySSPuHTYPJYo7IRALdqyjM9HCbt/3uOBEFbzyGVP6Mn8bwFPB0jX6982JVNBlYzM1nnPkfjuXSOPtQeEQ==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.17.0",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
+        "@babel/types": "^7.18.13",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "jsesc": "^2.5.1"
       },
       "dependencies": {
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
+        "@jridgewell/gen-mapping": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+          "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+          "dev": true,
+          "requires": {
+            "@jridgewell/set-array": "^1.0.1",
+            "@jridgewell/sourcemap-codec": "^1.4.10",
+            "@jridgewell/trace-mapping": "^0.3.9"
+          }
         }
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
-      "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
+      "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.18.6"
       }
     },
     "@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz",
-      "integrity": "sha512-C6FdbRaxYjwVu/geKW4ZeQ0Q31AftgRcdSnZ5/jsH6BzCJbtvXvhpfkbkThYSuutZA7nCXpPR6AD9zd1dprMkA==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.18.9.tgz",
+      "integrity": "sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==",
       "dev": true,
       "requires": {
-        "@babel/helper-explode-assignable-expression": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/helper-explode-assignable-expression": "^7.18.6",
+        "@babel/types": "^7.18.9"
       }
     },
     "@babel/helper-compilation-targets": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz",
-      "integrity": "sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.9.tgz",
+      "integrity": "sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.17.7",
-        "@babel/helper-validator-option": "^7.16.7",
-        "browserslist": "^4.17.5",
+        "@babel/compat-data": "^7.18.8",
+        "@babel/helper-validator-option": "^7.18.6",
+        "browserslist": "^4.20.2",
         "semver": "^6.3.0"
       }
     },
     "@babel/helper-create-class-features-plugin": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz",
-      "integrity": "sha512-kUjip3gruz6AJKOq5i3nC6CoCEEF/oHH3cp6tOZhB+IyyyPyW0g1Gfsxn3mkk6S08pIA2y8GQh609v9G/5sHVQ==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.13.tgz",
+      "integrity": "sha512-hDvXp+QYxSRL+23mpAlSGxHMDyIGChm0/AwTfTAAK5Ufe40nCsyNdaYCGuK91phn/fVu9kqayImRDkvNAgdrsA==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.17.9",
-        "@babel/helper-member-expression-to-functions": "^7.17.7",
-        "@babel/helper-optimise-call-expression": "^7.16.7",
-        "@babel/helper-replace-supers": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7"
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-member-expression-to-functions": "^7.18.9",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.18.9",
+        "@babel/helper-split-export-declaration": "^7.18.6"
       }
     },
     "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.0.tgz",
-      "integrity": "sha512-awO2So99wG6KnlE+TPs6rn83gCz5WlEePJDTnLEqbchMVrBeAujURVphRdigsk094VhvZehFoNOihSlcBjwsXA==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.18.6.tgz",
+      "integrity": "sha512-7LcpH1wnQLGrI+4v+nPp+zUvIkF9x0ddv1Hkdue10tg3gmRnLy97DXh4STiOf1qeIInyD69Qv5kKSZzKD8B/7A==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "regexpu-core": "^5.0.1"
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "regexpu-core": "^5.1.0"
       }
     },
     "@babel/helper-define-polyfill-provider": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz",
-      "integrity": "sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.2.tgz",
+      "integrity": "sha512-r9QJJ+uDWrd+94BSPcP6/de67ygLtvVy6cK4luE6MOuDsZIdoaPBnfSpbO/+LTifjPckbKXRuI9BB/Z2/y3iTg==",
       "dev": true,
       "requires": {
-        "@babel/helper-compilation-targets": "^7.13.0",
-        "@babel/helper-module-imports": "^7.12.13",
-        "@babel/helper-plugin-utils": "^7.13.0",
-        "@babel/traverse": "^7.13.0",
+        "@babel/helper-compilation-targets": "^7.17.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
         "debug": "^4.1.1",
         "lodash.debounce": "^4.0.8",
         "resolve": "^1.14.2",
@@ -179,428 +8658,375 @@
       }
     },
     "@babel/helper-environment-visitor": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
-      "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.16.7"
-      }
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz",
+      "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==",
+      "dev": true
     },
     "@babel/helper-explode-assignable-expression": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz",
-      "integrity": "sha512-KyUenhWMC8VrxzkGP0Jizjo4/Zx+1nNZhgocs+gLzyZyB8SHidhoq9KK/8Ato4anhwsivfkBLftky7gvzbZMtQ==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz",
+      "integrity": "sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.18.6"
       }
     },
     "@babel/helper-function-name": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz",
-      "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.18.9.tgz",
+      "integrity": "sha512-fJgWlZt7nxGksJS9a0XdSaI4XvpExnNIgRP+rVefWh5U7BL8pPuir6SJUmFKRfjWQ51OtWSzwOxhaH/EBWWc0A==",
       "dev": true,
       "requires": {
-        "@babel/template": "^7.16.7",
-        "@babel/types": "^7.17.0"
+        "@babel/template": "^7.18.6",
+        "@babel/types": "^7.18.9"
       }
     },
     "@babel/helper-hoist-variables": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
-      "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
+      "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.18.6"
       }
     },
     "@babel/helper-member-expression-to-functions": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz",
-      "integrity": "sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.9.tgz",
+      "integrity": "sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.17.0"
+        "@babel/types": "^7.18.9"
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
-      "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
+      "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.18.6"
       }
     },
     "@babel/helper-module-transforms": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz",
-      "integrity": "sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.18.9.tgz",
+      "integrity": "sha512-KYNqY0ICwfv19b31XzvmI/mfcylOzbLtowkw+mfvGPAQ3kfCnMLYbED3YecL5tPd8nAYFQFAd6JHp2LxZk/J1g==",
       "dev": true,
       "requires": {
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/helper-simple-access": "^7.17.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/helper-validator-identifier": "^7.16.7",
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.3",
-        "@babel/types": "^7.17.0"
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-simple-access": "^7.18.6",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/helper-validator-identifier": "^7.18.6",
+        "@babel/template": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9"
       }
     },
     "@babel/helper-optimise-call-expression": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz",
-      "integrity": "sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz",
+      "integrity": "sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.18.6"
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
-      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz",
+      "integrity": "sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==",
       "dev": true
     },
     "@babel/helper-remap-async-to-generator": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz",
-      "integrity": "sha512-fm0gH7Flb8H51LqJHy3HJ3wnE1+qtYR2A99K06ahwrawLdOFsCEWjZOrYricXJHoPSudNKxrMBUPEIPxiIIvBw==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz",
+      "integrity": "sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-wrap-function": "^7.16.8",
-        "@babel/types": "^7.16.8"
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-wrap-function": "^7.18.9",
+        "@babel/types": "^7.18.9"
       }
     },
     "@babel/helper-replace-supers": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz",
-      "integrity": "sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.18.9.tgz",
+      "integrity": "sha512-dNsWibVI4lNT6HiuOIBr1oyxo40HvIVmbwPUm3XZ7wMh4k2WxrxTqZwSqw/eEmXDS9np0ey5M2bz9tBmO9c+YQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-member-expression-to-functions": "^7.16.7",
-        "@babel/helper-optimise-call-expression": "^7.16.7",
-        "@babel/traverse": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-member-expression-to-functions": "^7.18.9",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9"
       }
     },
     "@babel/helper-simple-access": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz",
-      "integrity": "sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz",
+      "integrity": "sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.17.0"
+        "@babel/types": "^7.18.6"
       }
     },
     "@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.16.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz",
-      "integrity": "sha512-+il1gTy0oHwUsBQZyJvukbB4vPMdcYBrFHa0Uc4AizLxbq6BOYC51Rv4tWocX9BLBDLZ4kc6qUFpQ6HRgL+3zw==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.18.9.tgz",
+      "integrity": "sha512-imytd2gHi3cJPsybLRbmFrF7u5BIEuI2cNheyKi3/iOBC63kNn3q8Crn2xVuESli0aM4KYsyEqKyS7lFL8YVtw==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.16.0"
+        "@babel/types": "^7.18.9"
       }
     },
     "@babel/helper-split-export-declaration": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
-      "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
+      "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.18.6"
       }
     },
+    "@babel/helper-string-parser": {
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz",
+      "integrity": "sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==",
+      "dev": true
+    },
     "@babel/helper-validator-identifier": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
-      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz",
+      "integrity": "sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==",
       "dev": true
     },
     "@babel/helper-validator-option": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
-      "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz",
+      "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==",
       "dev": true
     },
     "@babel/helper-wrap-function": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz",
-      "integrity": "sha512-8RpyRVIAW1RcDDGTA+GpPAwV22wXCfKOoM9bet6TLkGIFTkRQSkH1nMQ5Yet4MpoXe1ZwHPVtNasc2w0uZMqnw==",
+      "version": "7.18.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.18.11.tgz",
+      "integrity": "sha512-oBUlbv+rjZLh2Ks9SKi4aL7eKaAXBWleHzU89mP0G6BMUlRxSckk9tSIkgDGydhgFxHuGSlBQZfnaD47oBEB7w==",
       "dev": true,
       "requires": {
-        "@babel/helper-function-name": "^7.16.7",
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.16.8",
-        "@babel/types": "^7.16.8"
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.18.11",
+        "@babel/types": "^7.18.10"
       }
     },
     "@babel/helpers": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.9.tgz",
-      "integrity": "sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.18.9.tgz",
+      "integrity": "sha512-Jf5a+rbrLoR4eNdUmnFu8cN5eNJT6qdTdOg5IHIzq87WwyRw9PwguLFOWYgktN/60IP4fgDUawJvs7PjQIzELQ==",
       "dev": true,
       "requires": {
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.9",
-        "@babel/types": "^7.17.0"
+        "@babel/template": "^7.18.6",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9"
       }
     },
     "@babel/highlight": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.17.9.tgz",
-      "integrity": "sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
+      "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
       "dev": true,
       "requires": {
-        "@babel/helper-validator-identifier": "^7.16.7",
+        "@babel/helper-validator-identifier": "^7.18.6",
         "chalk": "^2.0.0",
         "js-tokens": "^4.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "dev": true,
-          "requires": {
-            "color-name": "1.1.3"
-          }
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-          "dev": true
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-          "dev": true
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
       }
     },
     "@babel/parser": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.9.tgz",
-      "integrity": "sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.13.tgz",
+      "integrity": "sha512-dgXcIfMuQ0kgzLB2b9tRZs7TTFFaGM2AbtA4fJgUUYukzGH4jwsS7hzQHEGs67jdehpm22vkgKwvbU+aEflgwg==",
       "dev": true
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz",
-      "integrity": "sha512-anv/DObl7waiGEnC24O9zqL0pSuI9hljihqiDuFHC8d7/bjr/4RLGPWuc8rYOff/QPzbEPSkzG8wGG9aDuhHRg==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz",
+      "integrity": "sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.16.7.tgz",
-      "integrity": "sha512-di8vUHRdf+4aJ7ltXhaDbPoszdkh59AQtJM5soLsuHpQJdFQZOA4uGj0V2u/CZ8bJ/u8ULDL5yq6FO/bCXnKHw==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.18.9.tgz",
+      "integrity": "sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
-        "@babel/plugin-proposal-optional-chaining": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9",
+        "@babel/plugin-proposal-optional-chaining": "^7.18.9"
       }
     },
     "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz",
-      "integrity": "sha512-71YHIvMuiuqWJQkebWJtdhQTfd4Q4mF76q2IX37uZPkG9+olBxsX+rH1vkhFto4UeJZ9dPY2s+mDvhDm1u2BGQ==",
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.18.10.tgz",
+      "integrity": "sha512-1mFuY2TOsR1hxbjCo4QL+qlIjV07p4H4EUYw2J/WCqsvFV6V9X9z9YhXbWndc/4fw+hYGlDT7egYxliMp5O6Ew==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-remap-async-to-generator": "^7.16.8",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-remap-async-to-generator": "^7.18.9",
         "@babel/plugin-syntax-async-generators": "^7.8.4"
       }
     },
     "@babel/plugin-proposal-class-properties": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz",
-      "integrity": "sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
+      "integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-proposal-class-static-block": {
-      "version": "7.17.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.17.6.tgz",
-      "integrity": "sha512-X/tididvL2zbs7jZCeeRJ8167U/+Ac135AM6jCAx6gYXDUviZV5Ku9UDvWS2NCuWlFjIRXklYhwo6HhAC7ETnA==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.6.tgz",
+      "integrity": "sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.17.6",
-        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-class-static-block": "^7.14.5"
       }
     },
     "@babel/plugin-proposal-dynamic-import": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz",
-      "integrity": "sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz",
+      "integrity": "sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3"
       }
     },
     "@babel/plugin-proposal-export-namespace-from": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.16.7.tgz",
-      "integrity": "sha512-ZxdtqDXLRGBL64ocZcs7ovt71L3jhC1RGSyR996svrCi3PYqHNkb3SwPJCs8RIzD86s+WPpt2S73+EHCGO+NUA==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz",
+      "integrity": "sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.18.9",
         "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
       }
     },
     "@babel/plugin-proposal-json-strings": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.16.7.tgz",
-      "integrity": "sha512-lNZ3EEggsGY78JavgbHsK9u5P3pQaW7k4axlgFLYkMd7UBsiNahCITShLjNQschPyjtO6dADrL24757IdhBrsQ==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz",
+      "integrity": "sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-json-strings": "^7.8.3"
       }
     },
     "@babel/plugin-proposal-logical-assignment-operators": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.7.tgz",
-      "integrity": "sha512-K3XzyZJGQCr00+EtYtrDjmwX7o7PLK6U9bi1nCwkQioRFVUv6dJoxbQjtWVtP+bCPy82bONBKG8NPyQ4+i6yjg==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.18.9.tgz",
+      "integrity": "sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.18.9",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
       }
     },
     "@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz",
-      "integrity": "sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz",
+      "integrity": "sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
       }
     },
     "@babel/plugin-proposal-numeric-separator": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz",
-      "integrity": "sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz",
+      "integrity": "sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-numeric-separator": "^7.10.4"
       }
     },
     "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.17.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.17.3.tgz",
-      "integrity": "sha512-yuL5iQA/TbZn+RGAfxQXfi7CNLmKi1f8zInn4IgobuCWcAb7i+zj4TYzQ9l8cEzVyJ89PDGuqxK1xZpUDISesw==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.18.9.tgz",
+      "integrity": "sha512-kDDHQ5rflIeY5xl69CEqGEZ0KY369ehsCIEbTGb4siHG5BE9sga/T0r0OUwyZNLMmZE79E1kbsqAjwFCW4ds6Q==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.17.0",
-        "@babel/helper-compilation-targets": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/compat-data": "^7.18.8",
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.16.7"
+        "@babel/plugin-transform-parameters": "^7.18.8"
       }
     },
     "@babel/plugin-proposal-optional-catch-binding": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.7.tgz",
-      "integrity": "sha512-eMOH/L4OvWSZAE1VkHbr1vckLG1WUcHGJSLqqQwl2GaUqG6QjddvrOaTUMNYiv77H5IKPMZ9U9P7EaHwvAShfA==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz",
+      "integrity": "sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
       }
     },
     "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.16.7.tgz",
-      "integrity": "sha512-eC3xy+ZrUcBtP7x+sq62Q/HYd674pPTb/77XZMb5wbDPGWIdUbSr4Agr052+zaUPSb+gGRnjxXfKFvx5iMJ+DA==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.18.9.tgz",
+      "integrity": "sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9",
         "@babel/plugin-syntax-optional-chaining": "^7.8.3"
       }
     },
     "@babel/plugin-proposal-private-methods": {
-      "version": "7.16.11",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.11.tgz",
-      "integrity": "sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz",
+      "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.16.10",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.7.tgz",
-      "integrity": "sha512-rMQkjcOFbm+ufe3bTZLyOfsOUOxyvLXZJCTARhJr+8UMSoZmqTe1K1BgkFcrW37rAchWg57yI69ORxiWvUINuQ==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz",
+      "integrity": "sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-create-class-features-plugin": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
       }
     },
     "@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.16.7.tgz",
-      "integrity": "sha512-QRK0YI/40VLhNVGIjRNAAQkEHws0cswSdFFjpFyt943YmJIU1da9uW63Iu6NFV6CxTZW5eTDCrwZUstBWgp/Rg==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz",
+      "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-syntax-async-generators": {
@@ -648,6 +9074,15 @@
         "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
+    "@babel/plugin-syntax-import-assertions": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.18.6.tgz",
+      "integrity": "sha512-/DU3RXad9+bZwrgWJQKbr39gYbJpLJHezqEzRzi/BHRlJ9zsQb4CK2CA/5apllXNomwA1qHwzvHl+AdEmC5krQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
     "@babel/plugin-syntax-json-strings": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
@@ -730,359 +9165,354 @@
       }
     },
     "@babel/plugin-transform-arrow-functions": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.16.7.tgz",
-      "integrity": "sha512-9ffkFFMbvzTvv+7dTp/66xvZAWASuPD5Tl9LK3Z9vhOmANo6j94rik+5YMBt4CwHVMWLWpMsriIc2zsa3WW3xQ==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz",
+      "integrity": "sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-async-to-generator": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.8.tgz",
-      "integrity": "sha512-MtmUmTJQHCnyJVrScNzNlofQJ3dLFuobYn3mwOTKHnSCMtbNsqvF71GQmJfFjdrXSsAA7iysFmYWw4bXZ20hOg==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.18.6.tgz",
+      "integrity": "sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-remap-async-to-generator": "^7.16.8"
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-remap-async-to-generator": "^7.18.6"
       }
     },
     "@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz",
-      "integrity": "sha512-JUuzlzmF40Z9cXyytcbZEZKckgrQzChbQJw/5PuEHYeqzCsvebDx0K0jWnIIVcmmDOAVctCgnYs0pMcrYj2zJg==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz",
+      "integrity": "sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-block-scoping": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.16.7.tgz",
-      "integrity": "sha512-ObZev2nxVAYA4bhyusELdo9hb3H+A56bxH3FZMbEImZFiEDYVHXQSJ1hQKFlDnlt8G9bBrCZ5ZpURZUrV4G5qQ==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.18.9.tgz",
+      "integrity": "sha512-5sDIJRV1KtQVEbt/EIBwGy4T01uYIo4KRB3VUqzkhrAIOGx7AoctL9+Ux88btY0zXdDyPJ9mW+bg+v+XEkGmtw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-classes": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz",
-      "integrity": "sha512-WY7og38SFAGYRe64BrjKf8OrE6ulEHtr5jEYaZMwox9KebgqPi67Zqz8K53EKk1fFEJgm96r32rkKZ3qA2nCWQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.16.7",
-        "@babel/helper-optimise-call-expression": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-replace-supers": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.18.9.tgz",
+      "integrity": "sha512-EkRQxsxoytpTlKJmSPYrsOMjCILacAjtSVkd4gChEe2kXjFCun3yohhW5I7plXJhCemM0gKsaGMcO8tinvCA5g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-replace-supers": "^7.18.9",
+        "@babel/helper-split-export-declaration": "^7.18.6",
         "globals": "^11.1.0"
-      },
-      "dependencies": {
-        "globals": {
-          "version": "11.12.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-          "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-          "dev": true
-        }
       }
     },
     "@babel/plugin-transform-computed-properties": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.7.tgz",
-      "integrity": "sha512-gN72G9bcmenVILj//sv1zLNaPyYcOzUho2lIJBMh/iakJ9ygCo/hEF9cpGb61SCMEDxbbyBoVQxrt+bWKu5KGw==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.18.9.tgz",
+      "integrity": "sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-destructuring": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.17.7.tgz",
-      "integrity": "sha512-XVh0r5yq9sLR4vZ6eVZe8FKfIcSgaTBxVBRSYokRj2qksf6QerYnTxz9/GTuKTH/n/HwLP7t6gtlybHetJ/6hQ==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.13.tgz",
+      "integrity": "sha512-TodpQ29XekIsex2A+YJPj5ax2plkGa8YYY6mFjCohk/IG9IY42Rtuj1FuDeemfg2ipxIFLzPeA83SIBnlhSIow==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-dotall-regex": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz",
-      "integrity": "sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz",
+      "integrity": "sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-duplicate-keys": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.16.7.tgz",
-      "integrity": "sha512-03DvpbRfvWIXyK0/6QiR1KMTWeT6OcQ7tbhjrXyFS02kjuX/mu5Bvnh5SDSWHxyawit2g5aWhKwI86EE7GUnTw==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz",
+      "integrity": "sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz",
-      "integrity": "sha512-8UYLSlyLgRixQvlYH3J2ekXFHDFLQutdy7FfFAMm3CPZ6q9wHCwnUyiXpQCe3gVVnQlHc5nsuiEVziteRNTXEA==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz",
+      "integrity": "sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==",
       "dev": true,
       "requires": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-for-of": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.16.7.tgz",
-      "integrity": "sha512-/QZm9W92Ptpw7sjI9Nx1mbcsWz33+l8kuMIQnDwgQBG5s3fAfQvkRjQ7NqXhtNcKOnPkdICmUHyCaWW06HCsqg==",
+      "version": "7.18.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz",
+      "integrity": "sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-function-name": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz",
-      "integrity": "sha512-SU/C68YVwTRxqWj5kgsbKINakGag0KTgq9f2iZEXdStoAbOzLHEBRYzImmA6yFo8YZhJVflvXmIHUO7GWHmxxA==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz",
+      "integrity": "sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-compilation-targets": "^7.16.7",
-        "@babel/helper-function-name": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-literals": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.16.7.tgz",
-      "integrity": "sha512-6tH8RTpTWI0s2sV6uq3e/C9wPo4PTqqZps4uF0kzQ9/xPLFQtipynvmT1g/dOfEJ+0EQsHhkQ/zyRId8J2b8zQ==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz",
+      "integrity": "sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-member-expression-literals": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz",
-      "integrity": "sha512-mBruRMbktKQwbxaJof32LT9KLy2f3gH+27a5XSuXo6h7R3vqltl0PgZ80C8ZMKw98Bf8bqt6BEVi3svOh2PzMw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz",
+      "integrity": "sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-modules-amd": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.16.7.tgz",
-      "integrity": "sha512-KaaEtgBL7FKYwjJ/teH63oAmE3lP34N3kshz8mm4VMAw7U3PxjVwwUmxEFksbgsNUaO3wId9R2AVQYSEGRa2+g==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.18.6.tgz",
+      "integrity": "sha512-Pra5aXsmTsOnjM3IajS8rTaLCy++nGM4v3YR4esk5PCsyg9z8NA5oQLwxzMUtDBd8F+UmVza3VxoAaWCbzH1rg==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
         "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
     "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.9.tgz",
-      "integrity": "sha512-2TBFd/r2I6VlYn0YRTz2JdazS+FoUuQ2rIFHoAxtyP/0G3D82SBLaRq9rnUkpqlLg03Byfl/+M32mpxjO6KaPw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.18.6.tgz",
+      "integrity": "sha512-Qfv2ZOWikpvmedXQJDSbxNqy7Xr/j2Y8/KfijM0iJyKkBTmWuvCA1yeH1yDM7NJhBW/2aXxeucLj6i80/LAJ/Q==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "^7.17.7",
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-simple-access": "^7.17.7",
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-simple-access": "^7.18.6",
         "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
     "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.17.8",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.17.8.tgz",
-      "integrity": "sha512-39reIkMTUVagzgA5x88zDYXPCMT6lcaRKs1+S9K6NKBPErbgO/w/kP8GlNQTC87b412ZTlmNgr3k2JrWgHH+Bw==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.9.tgz",
+      "integrity": "sha512-zY/VSIbbqtoRoJKo2cDTewL364jSlZGvn0LKOf9ntbfxOvjfmyrdtEEOAdswOswhZEb8UH3jDkCKHd1sPgsS0A==",
       "dev": true,
       "requires": {
-        "@babel/helper-hoist-variables": "^7.16.7",
-        "@babel/helper-module-transforms": "^7.17.7",
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-validator-identifier": "^7.16.7",
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-module-transforms": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-validator-identifier": "^7.18.6",
         "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
     "@babel/plugin-transform-modules-umd": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.7.tgz",
-      "integrity": "sha512-EMh7uolsC8O4xhudF2F6wedbSHm1HHZ0C6aJ7K67zcDNidMzVcxWdGr+htW9n21klm+bOn+Rx4CBsAntZd3rEQ==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz",
+      "integrity": "sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.16.8",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.8.tgz",
-      "integrity": "sha512-j3Jw+n5PvpmhRR+mrgIh04puSANCk/T/UA3m3P1MjJkhlK906+ApHhDIqBQDdOgL/r1UYpz4GNclTXxyZrYGSw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.18.6.tgz",
+      "integrity": "sha512-UmEOGF8XgaIqD74bC8g7iV3RYj8lMf0Bw7NJzvnS9qQhM4mg+1WHKotUIdjxgD2RGrgFLZZPCFPFj3P/kVDYhg==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.16.7"
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-new-target": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.16.7.tgz",
-      "integrity": "sha512-xiLDzWNMfKoGOpc6t3U+etCE2yRnn3SM09BXqWPIZOBpL2gvVrBWUKnsJx0K/ADi5F5YC5f8APFfWrz25TdlGg==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz",
+      "integrity": "sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-object-super": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz",
-      "integrity": "sha512-14J1feiQVWaGvRxj2WjyMuXS2jsBkgB3MdSN5HuC2G5nRspa5RK9COcs82Pwy5BuGcjb+fYaUj94mYcOj7rCvw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz",
+      "integrity": "sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-replace-supers": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.18.6"
       }
     },
     "@babel/plugin-transform-parameters": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.7.tgz",
-      "integrity": "sha512-AT3MufQ7zZEhU2hwOA11axBnExW0Lszu4RL/tAlUJBuNoRak+wehQW8h6KcXOcgjY42fHtDxswuMhMjFEuv/aw==",
+      "version": "7.18.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.18.8.tgz",
+      "integrity": "sha512-ivfbE3X2Ss+Fj8nnXvKJS6sjRG4gzwPMsP+taZC+ZzEGjAYlvENixmt1sZ5Ca6tWls+BlKSGKPJ6OOXvXCbkFg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-property-literals": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz",
-      "integrity": "sha512-z4FGr9NMGdoIl1RqavCqGG+ZuYjfZ/hkCIeuH6Do7tXmSm0ls11nYVSJqFEUOSJbDab5wC6lRE/w6YjVcr6Hqw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz",
+      "integrity": "sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-regenerator": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.17.9.tgz",
-      "integrity": "sha512-Lc2TfbxR1HOyn/c6b4Y/b6NHoTb67n/IoWLxTu4kC7h4KQnWlhCq2S8Tx0t2SVvv5Uu87Hs+6JEJ5kt2tYGylQ==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.6.tgz",
+      "integrity": "sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ==",
       "dev": true,
       "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6",
         "regenerator-transform": "^0.15.0"
       }
     },
     "@babel/plugin-transform-reserved-words": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.16.7.tgz",
-      "integrity": "sha512-KQzzDnZ9hWQBjwi5lpY5v9shmm6IVG0U9pB18zvMu2i4H90xpT4gmqwPYsn8rObiadYe2M0gmgsiOIF5A/2rtg==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz",
+      "integrity": "sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-shorthand-properties": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.7.tgz",
-      "integrity": "sha512-hah2+FEnoRoATdIb05IOXf+4GzXYTq75TVhIn1PewihbpyrNWUt2JbudKQOETWw6QpLe+AIUpJ5MVLYTQbeeUg==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz",
+      "integrity": "sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-spread": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.16.7.tgz",
-      "integrity": "sha512-+pjJpgAngb53L0iaA5gU/1MLXJIfXcYepLgXB3esVRf4fqmj8f2cxM3/FKaHsZms08hFQJkFccEWuIpm429TXg==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.18.9.tgz",
+      "integrity": "sha512-39Q814wyoOPtIB/qGopNIL9xDChOE1pNU0ZY5dO0owhiVt/5kFm4li+/bBtwc7QotG0u5EPzqhZdjMtmqBqyQA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.16.0"
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9"
       }
     },
     "@babel/plugin-transform-sticky-regex": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz",
-      "integrity": "sha512-NJa0Bd/87QV5NZZzTuZG5BPJjLYadeSZ9fO6oOUoL4iQx+9EEuw/eEM92SrsT19Yc2jgB1u1hsjqDtH02c3Drw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz",
+      "integrity": "sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/plugin-transform-template-literals": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.16.7.tgz",
-      "integrity": "sha512-VwbkDDUeenlIjmfNeDX/V0aWrQH2QiVyJtwymVQSzItFDTpxfyJh3EVaQiS0rIN/CqbLGr0VcGmuwyTdZtdIsA==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz",
+      "integrity": "sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-typeof-symbol": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.16.7.tgz",
-      "integrity": "sha512-p2rOixCKRJzpg9JB4gjnG4gjWkWa89ZoYUnl9snJ1cWIcTH/hvxZqfO+WjG6T8DRBpctEol5jw1O5rA8gkCokQ==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz",
+      "integrity": "sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-unicode-escapes": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.7.tgz",
-      "integrity": "sha512-TAV5IGahIz3yZ9/Hfv35TV2xEm+kaBDaZQCn2S/hG9/CZ0DktxJv9eKfPc7yYCvOYR4JGx1h8C+jcSOvgaaI/Q==",
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz",
+      "integrity": "sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.18.9"
       }
     },
     "@babel/plugin-transform-unicode-regex": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz",
-      "integrity": "sha512-oC5tYYKw56HO75KZVLQ+R/Nl3Hro9kf8iG0hXoaHP7tjAyCpvqBiSNe6vGrZni1Z6MggmUOC6A7VP7AVmw225Q==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz",
+      "integrity": "sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7"
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
     "@babel/preset-env": {
-      "version": "7.16.11",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.16.11.tgz",
-      "integrity": "sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g==",
-      "dev": true,
-      "requires": {
-        "@babel/compat-data": "^7.16.8",
-        "@babel/helper-compilation-targets": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-validator-option": "^7.16.7",
-        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.16.7",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.16.7",
-        "@babel/plugin-proposal-async-generator-functions": "^7.16.8",
-        "@babel/plugin-proposal-class-properties": "^7.16.7",
-        "@babel/plugin-proposal-class-static-block": "^7.16.7",
-        "@babel/plugin-proposal-dynamic-import": "^7.16.7",
-        "@babel/plugin-proposal-export-namespace-from": "^7.16.7",
-        "@babel/plugin-proposal-json-strings": "^7.16.7",
-        "@babel/plugin-proposal-logical-assignment-operators": "^7.16.7",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
-        "@babel/plugin-proposal-numeric-separator": "^7.16.7",
-        "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.16.7",
-        "@babel/plugin-proposal-optional-chaining": "^7.16.7",
-        "@babel/plugin-proposal-private-methods": "^7.16.11",
-        "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.16.7",
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.18.10.tgz",
+      "integrity": "sha512-wVxs1yjFdW3Z/XkNfXKoblxoHgbtUF7/l3PvvP4m02Qz9TZ6uZGxRVYjSQeR87oQmHco9zWitW5J82DJ7sCjvA==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.18.8",
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-validator-option": "^7.18.6",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.18.6",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.18.9",
+        "@babel/plugin-proposal-async-generator-functions": "^7.18.10",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-class-static-block": "^7.18.6",
+        "@babel/plugin-proposal-dynamic-import": "^7.18.6",
+        "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+        "@babel/plugin-proposal-json-strings": "^7.18.6",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.18.9",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+        "@babel/plugin-proposal-numeric-separator": "^7.18.6",
+        "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.18.6",
+        "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+        "@babel/plugin-proposal-private-methods": "^7.18.6",
+        "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.18.6",
         "@babel/plugin-syntax-async-generators": "^7.8.4",
         "@babel/plugin-syntax-class-properties": "^7.12.13",
         "@babel/plugin-syntax-class-static-block": "^7.14.5",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-import-assertions": "^7.18.6",
         "@babel/plugin-syntax-json-strings": "^7.8.3",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
@@ -1092,44 +9522,44 @@
         "@babel/plugin-syntax-optional-chaining": "^7.8.3",
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
         "@babel/plugin-syntax-top-level-await": "^7.14.5",
-        "@babel/plugin-transform-arrow-functions": "^7.16.7",
-        "@babel/plugin-transform-async-to-generator": "^7.16.8",
-        "@babel/plugin-transform-block-scoped-functions": "^7.16.7",
-        "@babel/plugin-transform-block-scoping": "^7.16.7",
-        "@babel/plugin-transform-classes": "^7.16.7",
-        "@babel/plugin-transform-computed-properties": "^7.16.7",
-        "@babel/plugin-transform-destructuring": "^7.16.7",
-        "@babel/plugin-transform-dotall-regex": "^7.16.7",
-        "@babel/plugin-transform-duplicate-keys": "^7.16.7",
-        "@babel/plugin-transform-exponentiation-operator": "^7.16.7",
-        "@babel/plugin-transform-for-of": "^7.16.7",
-        "@babel/plugin-transform-function-name": "^7.16.7",
-        "@babel/plugin-transform-literals": "^7.16.7",
-        "@babel/plugin-transform-member-expression-literals": "^7.16.7",
-        "@babel/plugin-transform-modules-amd": "^7.16.7",
-        "@babel/plugin-transform-modules-commonjs": "^7.16.8",
-        "@babel/plugin-transform-modules-systemjs": "^7.16.7",
-        "@babel/plugin-transform-modules-umd": "^7.16.7",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.16.8",
-        "@babel/plugin-transform-new-target": "^7.16.7",
-        "@babel/plugin-transform-object-super": "^7.16.7",
-        "@babel/plugin-transform-parameters": "^7.16.7",
-        "@babel/plugin-transform-property-literals": "^7.16.7",
-        "@babel/plugin-transform-regenerator": "^7.16.7",
-        "@babel/plugin-transform-reserved-words": "^7.16.7",
-        "@babel/plugin-transform-shorthand-properties": "^7.16.7",
-        "@babel/plugin-transform-spread": "^7.16.7",
-        "@babel/plugin-transform-sticky-regex": "^7.16.7",
-        "@babel/plugin-transform-template-literals": "^7.16.7",
-        "@babel/plugin-transform-typeof-symbol": "^7.16.7",
-        "@babel/plugin-transform-unicode-escapes": "^7.16.7",
-        "@babel/plugin-transform-unicode-regex": "^7.16.7",
+        "@babel/plugin-transform-arrow-functions": "^7.18.6",
+        "@babel/plugin-transform-async-to-generator": "^7.18.6",
+        "@babel/plugin-transform-block-scoped-functions": "^7.18.6",
+        "@babel/plugin-transform-block-scoping": "^7.18.9",
+        "@babel/plugin-transform-classes": "^7.18.9",
+        "@babel/plugin-transform-computed-properties": "^7.18.9",
+        "@babel/plugin-transform-destructuring": "^7.18.9",
+        "@babel/plugin-transform-dotall-regex": "^7.18.6",
+        "@babel/plugin-transform-duplicate-keys": "^7.18.9",
+        "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
+        "@babel/plugin-transform-for-of": "^7.18.8",
+        "@babel/plugin-transform-function-name": "^7.18.9",
+        "@babel/plugin-transform-literals": "^7.18.9",
+        "@babel/plugin-transform-member-expression-literals": "^7.18.6",
+        "@babel/plugin-transform-modules-amd": "^7.18.6",
+        "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+        "@babel/plugin-transform-modules-systemjs": "^7.18.9",
+        "@babel/plugin-transform-modules-umd": "^7.18.6",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.18.6",
+        "@babel/plugin-transform-new-target": "^7.18.6",
+        "@babel/plugin-transform-object-super": "^7.18.6",
+        "@babel/plugin-transform-parameters": "^7.18.8",
+        "@babel/plugin-transform-property-literals": "^7.18.6",
+        "@babel/plugin-transform-regenerator": "^7.18.6",
+        "@babel/plugin-transform-reserved-words": "^7.18.6",
+        "@babel/plugin-transform-shorthand-properties": "^7.18.6",
+        "@babel/plugin-transform-spread": "^7.18.9",
+        "@babel/plugin-transform-sticky-regex": "^7.18.6",
+        "@babel/plugin-transform-template-literals": "^7.18.9",
+        "@babel/plugin-transform-typeof-symbol": "^7.18.9",
+        "@babel/plugin-transform-unicode-escapes": "^7.18.10",
+        "@babel/plugin-transform-unicode-regex": "^7.18.6",
         "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.16.8",
-        "babel-plugin-polyfill-corejs2": "^0.3.0",
-        "babel-plugin-polyfill-corejs3": "^0.5.0",
-        "babel-plugin-polyfill-regenerator": "^0.3.0",
-        "core-js-compat": "^3.20.2",
+        "@babel/types": "^7.18.10",
+        "babel-plugin-polyfill-corejs2": "^0.3.2",
+        "babel-plugin-polyfill-corejs3": "^0.5.3",
+        "babel-plugin-polyfill-regenerator": "^0.4.0",
+        "core-js-compat": "^3.22.1",
         "semver": "^6.3.0"
       }
     },
@@ -1147,58 +9577,51 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
-      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
+      "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
       "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
     },
     "@babel/template": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
-      "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
+      "version": "7.18.10",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
+      "integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==",
       "dev": true,
       "requires": {
-        "@babel/code-frame": "^7.16.7",
-        "@babel/parser": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/code-frame": "^7.18.6",
+        "@babel/parser": "^7.18.10",
+        "@babel/types": "^7.18.10"
       }
     },
     "@babel/traverse": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.9.tgz",
-      "integrity": "sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.9",
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.17.9",
-        "@babel/helper-hoist-variables": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/parser": "^7.17.9",
-        "@babel/types": "^7.17.0",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.13.tgz",
+      "integrity": "sha512-N6kt9X1jRMLPxxxPYWi7tgvJRH/rtoU+dbKAPDM44RFHiMH8igdsaSBgFeskhSl/kLWLDUvIh1RXCrTmg0/zvA==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.18.6",
+        "@babel/generator": "^7.18.13",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/parser": "^7.18.13",
+        "@babel/types": "^7.18.13",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
-      },
-      "dependencies": {
-        "globals": {
-          "version": "11.12.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-          "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-          "dev": true
-        }
       }
     },
     "@babel/types": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
-      "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.13.tgz",
+      "integrity": "sha512-ePqfTihzW0W6XAU+aMw2ykilisStJfDnsejDCXRchCcMJ4O0+8DhPXf2YUbZ6wjBlsEmZwLK/sPweWtu8hcJYQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-validator-identifier": "^7.16.7",
+        "@babel/helper-string-parser": "^7.18.10",
+        "@babel/helper-validator-identifier": "^7.18.6",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -1215,26 +9638,55 @@
       "dev": true
     },
     "@eslint/eslintrc": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz",
-      "integrity": "sha512-bxvbYnBPN1Gibwyp6NrpnFzA3YtRL3BBAyEAFVIpNTm2Rn4Vy87GA5M4aSn3InRrlsbX5N0GW7XIx+U4SAEKdQ==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.1.tgz",
+      "integrity": "sha512-OhSY22oQQdw3zgPOOwdoj01l/Dzl1Z+xyUP33tkSN+aqyEhymJCcPHyXt+ylW8FSe0TfRC2VG+ROQOapD0aZSQ==",
       "dev": true,
       "requires": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.3.1",
-        "globals": "^13.9.0",
+        "espree": "^9.4.0",
+        "globals": "^13.15.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.0",
-        "minimatch": "^3.0.4",
+        "minimatch": "^3.1.2",
         "strip-json-comments": "^3.1.1"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "globals": {
+          "version": "13.17.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz",
+          "integrity": "sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==",
+          "dev": true,
+          "requires": {
+            "type-fest": "^0.20.2"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        }
       }
     },
     "@humanwhocodes/config-array": {
-      "version": "0.9.5",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
-      "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==",
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
+      "integrity": "sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==",
       "dev": true,
       "requires": {
         "@humanwhocodes/object-schema": "^1.2.1",
@@ -1242,6 +9694,18 @@
         "minimatch": "^3.0.4"
       }
     },
+    "@humanwhocodes/gitignore-to-minimatch": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz",
+      "integrity": "sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==",
+      "dev": true
+    },
+    "@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true
+    },
     "@humanwhocodes/object-schema": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
@@ -1254,28 +9718,73 @@
       "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
       "dev": true
     },
+    "@jridgewell/gen-mapping": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
+      "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.0.0",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "@jridgewell/resolve-uri": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
-      "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
       "dev": true
     },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "dependencies": {
+        "@jridgewell/gen-mapping": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+          "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+          "dev": true,
+          "requires": {
+            "@jridgewell/set-array": "^1.0.1",
+            "@jridgewell/sourcemap-codec": "^1.4.10",
+            "@jridgewell/trace-mapping": "^0.3.9"
+          }
+        }
+      }
+    },
     "@jridgewell/sourcemap-codec": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
-      "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==",
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
       "dev": true
     },
     "@jridgewell/trace-mapping": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz",
-      "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==",
+      "version": "0.3.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz",
+      "integrity": "sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==",
       "dev": true,
       "requires": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@leichtgewicht/ip-codec": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
+      "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
+      "dev": true
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1302,12 +9811,6 @@
         "fastq": "^1.6.0"
       }
     },
-    "@socket.io/base64-arraybuffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
-      "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==",
-      "dev": true
-    },
     "@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -1365,9 +9868,9 @@
       "dev": true
     },
     "@types/eslint": {
-      "version": "8.4.1",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
-      "integrity": "sha512-GE44+DNEyxxh2Kc6ro/VkIj+9ma0pO0bwv9+uHSyBrikYOHr8zYcdPvnBOp1aw8s+CjRvuSx7CyWqRrNFQ59mA==",
+      "version": "8.4.6",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.6.tgz",
+      "integrity": "sha512-/fqTbjxyFUaYNO7VcW5g+4npmqVACz1bB7RTHYuLj+PRjw9hrCwrUXVQFpChUS0JsyEFvMZ7U/PfmvWgxJhI9g==",
       "dev": true,
       "requires": {
         "@types/estree": "*",
@@ -1375,9 +9878,9 @@
       }
     },
     "@types/eslint-scope": {
-      "version": "3.7.3",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.3.tgz",
-      "integrity": "sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==",
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
+      "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
       "dev": true,
       "requires": {
         "@types/eslint": "*",
@@ -1385,9 +9888,9 @@
       }
     },
     "@types/estree": {
-      "version": "0.0.51",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
-      "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+      "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
       "dev": true
     },
     "@types/express": {
@@ -1403,9 +9906,9 @@
       }
     },
     "@types/express-serve-static-core": {
-      "version": "4.17.28",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
-      "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
+      "version": "4.17.30",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.30.tgz",
+      "integrity": "sha512-gstzbTWro2/nFed1WXtf+TtrpwxH7Ggs4RLYTLbeVgIkUQOI3WG/JKjgeOU1zXDvezllupjrf8OPIdvTbIaVOQ==",
       "dev": true,
       "requires": {
         "@types/node": "*",
@@ -1420,30 +9923,30 @@
       "dev": true
     },
     "@types/http-proxy": {
-      "version": "1.17.8",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
-      "integrity": "sha512-5kPLG5BKpWYkw/LVOGWpiq3nEVqxiN32rTgI53Sk12/xHFQ2rG3ehI9IO+O3W2QoKeyB92dJkoka8SUm6BX1pA==",
+      "version": "1.17.9",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.9.tgz",
+      "integrity": "sha512-QsbSjA/fSk7xB+UXlCT3wHBy5ai9wOcNDWwZAtud+jXhwOM3l+EYZh8Lng4+/6n8uar0J7xILzqftJdJ/Wdfkw==",
       "dev": true,
       "requires": {
         "@types/node": "*"
       }
     },
     "@types/json-schema": {
-      "version": "7.0.9",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
+      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
     "@types/mime": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
-      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
+      "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==",
       "dev": true
     },
     "@types/node": {
-      "version": "16.10.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.10.1.tgz",
-      "integrity": "sha512-4/Z9DMPKFexZj/Gn3LylFgamNKHm4K3QDi0gz9B26Uk0c8izYf97B5fxfpspMNkWlFupblKM/nV8+NA9Ffvr+w==",
+      "version": "18.7.14",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.14.tgz",
+      "integrity": "sha512-6bbDaETVi8oyIARulOE9qF1/Qdi/23z6emrUh0fNJRUmjznqrixD4MpGDdgOFk5Xb0m2H6Xu42JGdvAxaJR/wA==",
       "dev": true
     },
     "@types/qs": {
@@ -1459,9 +9962,9 @@
       "dev": true
     },
     "@types/retry": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
-      "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
       "dev": true
     },
     "@types/serve-index": {
@@ -1474,12 +9977,12 @@
       }
     },
     "@types/serve-static": {
-      "version": "1.13.10",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
-      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==",
       "dev": true,
       "requires": {
-        "@types/mime": "^1",
+        "@types/mime": "*",
         "@types/node": "*"
       }
     },
@@ -1660,25 +10163,27 @@
       }
     },
     "@webpack-cli/configtest": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz",
-      "integrity": "sha512-1FBc1f9G4P/AxMqIgfZgeOTuRnwZMten8E7zap5zgpPInnCrP8D4Q81+4CWIch8i/Nf7nXjP0v6CjjbHOrXhKg==",
-      "dev": true
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
+      "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
+      "dev": true,
+      "requires": {}
     },
     "@webpack-cli/info": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.1.tgz",
-      "integrity": "sha512-PKVGmazEq3oAo46Q63tpMr4HipI3OPfP7LiNOEJg963RMgT0rqheag28NCML0o3GIzA3DmxP1ZIAv9oTX1CUIA==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
+      "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
       "dev": true,
       "requires": {
         "envinfo": "^7.7.3"
       }
     },
     "@webpack-cli/serve": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.1.tgz",
-      "integrity": "sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==",
-      "dev": true
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
+      "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
+      "dev": true,
+      "requires": {}
     },
     "@xtuc/ieee754": {
       "version": "1.2.0",
@@ -1700,93 +10205,57 @@
       "requires": {
         "mime-types": "~2.1.34",
         "negotiator": "0.6.3"
-      },
-      "dependencies": {
-        "mime-types": {
-          "version": "2.1.35",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-          "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-          "dev": true,
-          "requires": {
-            "mime-db": "1.52.0"
-          }
-        }
       }
     },
     "acorn": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
       "dev": true
     },
     "acorn-import-assertions": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
-    },
-    "aggregate-error": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
-      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
       "dev": true,
-      "requires": {
-        "clean-stack": "^2.0.0",
-        "indent-string": "^4.0.0"
-      }
+      "requires": {}
     },
     "ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       }
-    },
-    "ajv-formats": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
-      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "dev": true,
-      "requires": {
-        "ajv": "^8.0.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-          "dev": true
-        }
+    },
+    "ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "requires": {
+        "ajv": "^8.0.0"
       }
     },
     "ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.3"
+      }
     },
     "ansi-colors": {
       "version": "4.1.1",
@@ -1807,12 +10276,12 @@
       "dev": true
     },
     "ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
       "dev": true,
       "requires": {
-        "color-convert": "^2.0.1"
+        "color-convert": "^1.9.0"
       }
     },
     "anymatch": {
@@ -1838,9 +10307,9 @@
       "dev": true
     },
     "array-union": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-3.0.1.tgz",
+      "integrity": "sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==",
       "dev": true
     },
     "assertion-error": {
@@ -1849,15 +10318,6 @@
       "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
       "dev": true
     },
-    "async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.14"
-      }
-    },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
@@ -1868,33 +10328,33 @@
       }
     },
     "babel-plugin-polyfill-corejs2": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz",
-      "integrity": "sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.2.tgz",
+      "integrity": "sha512-LPnodUl3lS0/4wN3Rb+m+UK8s7lj2jcLRrjho4gLw+OJs+I4bvGXshINesY5xx/apM+biTnQ9reDI8yj+0M5+Q==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.13.11",
-        "@babel/helper-define-polyfill-provider": "^0.3.1",
+        "@babel/compat-data": "^7.17.7",
+        "@babel/helper-define-polyfill-provider": "^0.3.2",
         "semver": "^6.1.1"
       }
     },
     "babel-plugin-polyfill-corejs3": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz",
-      "integrity": "sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.3.tgz",
+      "integrity": "sha512-zKsXDh0XjnrUEW0mxIHLfjBfnXSMr5Q/goMe/fxpQnLm07mcOZiIZHBNWCMx60HmdvjxfXcalac0tfFg0wqxyw==",
       "dev": true,
       "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.3.1",
+        "@babel/helper-define-polyfill-provider": "^0.3.2",
         "core-js-compat": "^3.21.0"
       }
     },
     "babel-plugin-polyfill-regenerator": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz",
-      "integrity": "sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.0.tgz",
+      "integrity": "sha512-RW1cnryiADFeHmfLS+WW/G431p1PsW5qdRdz0SDRi7TKcUgc7Oh/uXkT7MZ/+tGsT1BkczEAmD5XjUyJ5SWDTw==",
       "dev": true,
       "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.3.1"
+        "@babel/helper-define-polyfill-provider": "^0.3.2"
       }
     },
     "balanced-match": {
@@ -1912,7 +10372,7 @@
     "batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-      "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
+      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
       "dev": true
     },
     "big.js": {
@@ -1928,29 +10388,25 @@
       "dev": true
     },
     "body-parser": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.2.tgz",
-      "integrity": "sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==",
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz",
+      "integrity": "sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==",
       "dev": true,
       "requires": {
         "bytes": "3.1.2",
         "content-type": "~1.0.4",
         "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "1.8.1",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
-        "on-finished": "~2.3.0",
-        "qs": "6.9.7",
-        "raw-body": "2.4.3",
-        "type-is": "~1.6.18"
+        "on-finished": "2.4.1",
+        "qs": "6.10.3",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
       },
       "dependencies": {
-        "bytes": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-          "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-          "dev": true
-        },
         "debug": {
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -1963,29 +10419,27 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
           "dev": true
         }
       }
     },
-    "bonjour": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
-      "integrity": "sha1-jokKGD2O6aI5OzhExpGkK897yfU=",
+    "bonjour-service": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.0.14.tgz",
+      "integrity": "sha512-HIMbgLnk1Vqvs6B4Wq5ep7mxvj9sGz5d1JJyDNSGNIdA/w2MCz6GTjWTdjqOJV1bEPj+6IkxDvWNFKEBxNt4kQ==",
       "dev": true,
       "requires": {
-        "array-flatten": "^2.1.0",
-        "deep-equal": "^1.0.1",
+        "array-flatten": "^2.1.2",
         "dns-equal": "^1.0.0",
-        "dns-txt": "^2.0.2",
-        "multicast-dns": "^6.0.1",
-        "multicast-dns-service-types": "^1.1.0"
+        "fast-deep-equal": "^3.1.3",
+        "multicast-dns": "^7.2.5"
       }
     },
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
     "brace-expansion": {
@@ -2014,16 +10468,15 @@
       "dev": true
     },
     "browserslist": {
-      "version": "4.20.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.2.tgz",
-      "integrity": "sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==",
+      "version": "4.21.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
+      "integrity": "sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001317",
-        "electron-to-chromium": "^1.4.84",
-        "escalade": "^3.1.1",
-        "node-releases": "^2.0.2",
-        "picocolors": "^1.0.0"
+        "caniuse-lite": "^1.0.30001370",
+        "electron-to-chromium": "^1.4.202",
+        "node-releases": "^2.0.6",
+        "update-browserslist-db": "^1.0.5"
       }
     },
     "buffer-from": {
@@ -2032,16 +10485,10 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true
     },
-    "buffer-indexof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz",
-      "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==",
-      "dev": true
-    },
     "bytes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
       "dev": true
     },
     "call-bind": {
@@ -2077,9 +10524,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001320",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001320.tgz",
-      "integrity": "sha512-MWPzG54AGdo3nWx7zHZTefseM5Y1ccM7hlQKHRqJkPozUaw3hNbBTMmLn16GG2FUzjR13Cr3NPfhIieX5PzXDA==",
+      "version": "1.0.30001388",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001388.tgz",
+      "integrity": "sha512-znVbq4OUjqgLxMxoNX2ZeeLR0d7lcDiE5uJ4eUiWdml1J1EkxbnQq6opT9jb9SMfJxB0XA16/ziHwni4u1I3GQ==",
       "dev": true
     },
     "chai": {
@@ -2098,19 +10545,20 @@
       }
     },
     "chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
       "dev": true,
       "requires": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
       }
     },
     "check-error": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
-      "integrity": "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=",
+      "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==",
       "dev": true
     },
     "chokidar": {
@@ -2129,37 +10577,13 @@
         "readdirp": "~3.6.0"
       },
       "dependencies": {
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
           "dev": true,
           "requires": {
-            "is-number": "^7.0.0"
+            "is-glob": "^4.0.1"
           }
         }
       }
@@ -2171,20 +10595,14 @@
       "dev": true
     },
     "clean-css": {
-      "version": "5.2.4",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.4.tgz",
-      "integrity": "sha512-nKseG8wCzEuji/4yrgM/5cthL9oTDc5UOQyFMvW/Q53oP6gLH690o1NbuTh6Y18nujr7BxlsFuS7gXLnLzKJGg==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
+      "integrity": "sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==",
       "dev": true,
       "requires": {
         "source-map": "~0.6.0"
       }
     },
-    "clean-stack": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
-      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
-      "dev": true
-    },
     "cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -2208,24 +10626,24 @@
       }
     },
     "color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
       "dev": true,
       "requires": {
-        "color-name": "~1.1.4"
+        "color-name": "1.1.3"
       }
     },
     "color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
     "colorette": {
-      "version": "2.0.16",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
-      "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
+      "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
       "dev": true
     },
     "commander": {
@@ -2264,6 +10682,12 @@
         "vary": "~1.1.2"
       },
       "dependencies": {
+        "bytes": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+          "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+          "dev": true
+        },
         "debug": {
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -2276,13 +10700,7 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
-        },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
           "dev": true
         }
       }
@@ -2290,7 +10708,7 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
     "connect": {
@@ -2317,15 +10735,15 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
           "dev": true
         }
       }
     },
     "connect-history-api-fallback": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
-      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
+      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
       "dev": true
     },
     "content-disposition": {
@@ -2335,6 +10753,14 @@
       "dev": true,
       "requires": {
         "safe-buffer": "5.2.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+          "dev": true
+        }
       }
     },
     "content-type": {
@@ -2350,14 +10776,6 @@
       "dev": true,
       "requires": {
         "safe-buffer": "~5.1.1"
-      },
-      "dependencies": {
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
-        }
       }
     },
     "cookie": {
@@ -2369,7 +10787,7 @@
     "cookie-signature": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "dev": true
     },
     "copy-webpack-plugin": {
@@ -2384,100 +10802,15 @@
         "normalize-path": "^3.0.0",
         "schema-utils": "^4.0.0",
         "serialize-javascript": "^6.0.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "ajv-keywords": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.3"
-          }
-        },
-        "array-union": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/array-union/-/array-union-3.0.1.tgz",
-          "integrity": "sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==",
-          "dev": true
-        },
-        "glob-parent": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-          "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.3"
-          }
-        },
-        "globby": {
-          "version": "12.2.0",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-12.2.0.tgz",
-          "integrity": "sha512-wiSuFQLZ+urS9x2gGPl1H5drc5twabmm4m2gTR27XDFyjUHJUNsS8o/2aKyIF6IoBaR630atdher0XJ5g6OMmA==",
-          "dev": true,
-          "requires": {
-            "array-union": "^3.0.1",
-            "dir-glob": "^3.0.1",
-            "fast-glob": "^3.2.7",
-            "ignore": "^5.1.9",
-            "merge2": "^1.4.1",
-            "slash": "^4.0.0"
-          }
-        },
-        "is-glob": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-          "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-          "dev": true,
-          "requires": {
-            "is-extglob": "^2.1.1"
-          }
-        },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-          "dev": true
-        },
-        "schema-utils": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
-          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.9",
-            "ajv": "^8.8.0",
-            "ajv-formats": "^2.1.1",
-            "ajv-keywords": "^5.0.0"
-          }
-        },
-        "slash": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
-          "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
-          "dev": true
-        }
       }
     },
     "core-js-compat": {
-      "version": "3.21.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.21.1.tgz",
-      "integrity": "sha512-gbgX5AUvMb8gwxC7FLVWYT7Kkgu/y7+h/h1X43yJkNqhlK2fuYyQimqvKGNZFAY6CKii/GFKJ2cp/1/42TN36g==",
+      "version": "3.25.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.25.0.tgz",
+      "integrity": "sha512-extKQM0g8/3GjFx9US12FAgx8KJawB7RCQ5y8ipYLbmfzEzmFRWdDjIlxDx82g7ygcNG85qMVUSRyABouELdow==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.19.1",
+        "browserslist": "^4.21.3",
         "semver": "7.0.0"
       },
       "dependencies": {
@@ -2517,40 +10850,40 @@
       }
     },
     "css-select": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
-      "integrity": "sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
       "dev": true,
       "requires": {
         "boolbase": "^1.0.0",
-        "css-what": "^5.1.0",
-        "domhandler": "^4.3.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
         "domutils": "^2.8.0",
         "nth-check": "^2.0.1"
       }
     },
     "css-what": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
-      "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
       "dev": true
     },
     "custom-event": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
-      "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=",
+      "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==",
       "dev": true
     },
     "date-format": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.7.tgz",
-      "integrity": "sha512-k5xqlzDGIfv2N/DHR/BR8Kc4N9CRy9ReuDkmdxeX/jNfit94QXd36emWMm40ZOEDKNm/c91yV9EO3uGPkR7wWQ==",
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.13.tgz",
+      "integrity": "sha512-bnYCwf8Emc3pTD8pXnre+wfnjGtfi5ncMDKy7+cWZXbmRAsdWkOQHrfC1yz/KiwP5thDp2kCHWYWKBX4HP1hoQ==",
       "dev": true
     },
     "debug": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
-      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
       "dev": true,
       "requires": {
         "ms": "2.1.2"
@@ -2571,20 +10904,6 @@
         "type-detect": "^4.0.0"
       }
     },
-    "deep-equal": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
-      "dev": true,
-      "requires": {
-        "is-arguments": "^1.0.4",
-        "is-date-object": "^1.0.1",
-        "is-regex": "^1.0.4",
-        "object-is": "^1.0.1",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.2.0"
-      }
-    },
     "deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2607,40 +10926,25 @@
       "dev": true
     },
     "define-properties": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-      "dev": true,
-      "requires": {
-        "object-keys": "^1.0.12"
-      }
-    },
-    "del": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/del/-/del-6.0.0.tgz",
-      "integrity": "sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
+      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
       "dev": true,
       "requires": {
-        "globby": "^11.0.1",
-        "graceful-fs": "^4.2.4",
-        "is-glob": "^4.0.1",
-        "is-path-cwd": "^2.2.0",
-        "is-path-inside": "^3.0.2",
-        "p-map": "^4.0.0",
-        "rimraf": "^3.0.2",
-        "slash": "^3.0.0"
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
       }
     },
     "depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
       "dev": true
     },
     "destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
       "dev": true
     },
     "detect-node": {
@@ -2652,7 +10956,7 @@
     "di": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
-      "integrity": "sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=",
+      "integrity": "sha512-uJaamHkagcZtHPqCIHZxnFrXlunQXgBOsZSUOWwFw31QJCAbyTBoHMW75YOTur5ZNx8pIeAKgf6GWIgaqqiLhA==",
       "dev": true
     },
     "diff": {
@@ -2673,26 +10977,16 @@
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
-      "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0=",
+      "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==",
       "dev": true
     },
     "dns-packet": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz",
-      "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==",
-      "dev": true,
-      "requires": {
-        "ip": "^1.1.0",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "dns-txt": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz",
-      "integrity": "sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.4.0.tgz",
+      "integrity": "sha512-EgqGeaBB8hLiHLZtp/IbaDQTL8pZ0+IvwzSHA6d7VyMDM+B9hgddEMa9xjK5oYnw0ci0JQ6g2XCD7/f6cafU6g==",
       "dev": true,
       "requires": {
-        "buffer-indexof": "^1.0.0"
+        "@leichtgewicht/ip-codec": "^2.0.1"
       }
     },
     "doctrine": {
@@ -2716,7 +11010,7 @@
     "dom-serialize": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
-      "integrity": "sha1-ViromZ9Evl6jB29UGdzVnrQ6yVs=",
+      "integrity": "sha512-Yra4DbvoW7/Z6LBN560ZwXMjoNOSAN2wRsKFGc4iBeso+mpIA6qj1vfdf9HpMaKAqG6wXTy+1SYEzmNpKXOSsQ==",
       "dev": true,
       "requires": {
         "custom-event": "~1.0.0",
@@ -2726,9 +11020,9 @@
       }
     },
     "dom-serializer": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
       "dev": true,
       "requires": {
         "domelementtype": "^2.0.1",
@@ -2737,9 +11031,9 @@
       }
     },
     "domelementtype": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
       "dev": true
     },
     "domhandler": {
@@ -2775,13 +11069,13 @@
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.4.92",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.92.tgz",
-      "integrity": "sha512-YAVbvQIcDE/IJ/vzDMjD484/hsRbFPW2qXJPaYTfOhtligmfYEYOep+5QojpaEU9kq6bMvNeC2aG7arYvTHYsA==",
+      "version": "1.4.240",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.240.tgz",
+      "integrity": "sha512-r20dUOtZ4vUPTqAajDGonIM1uas5tf85Up+wPdtNBNvBSqGCfkpvMVvQ1T8YJzPV9/Y9g3FbUDcXb94Rafycow==",
       "dev": true
     },
     "emoji-regex": {
@@ -2799,13 +11093,13 @@
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
       "dev": true
     },
     "engine.io": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.1.3.tgz",
-      "integrity": "sha512-rqs60YwkvWTLLnfazqgZqLa/aKo+9cueVfEi/dZ8PyGyaf8TLOxj++4QMIgeG3Gn0AhrWiFXvghsoY9L9h25GA==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.2.0.tgz",
+      "integrity": "sha512-4KzwW3F3bk+KlzSOY57fj/Jx6LyRQ1nbcyIadehl+AnXjKT7gDO0ORdRi/84ixvMKTym6ZKuxvbzN62HDDU1Lg==",
       "dev": true,
       "requires": {
         "@types/cookie": "^0.4.1",
@@ -2818,29 +11112,28 @@
         "debug": "~4.3.1",
         "engine.io-parser": "~5.0.3",
         "ws": "~8.2.3"
-      },
-      "dependencies": {
-        "ws": {
-          "version": "8.2.3",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
-          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
-          "dev": true
-        }
       }
     },
     "engine.io-parser": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.3.tgz",
-      "integrity": "sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz",
+      "integrity": "sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==",
+      "dev": true
+    },
+    "enhanced-resolve": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
+      "integrity": "sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==",
       "dev": true,
       "requires": {
-        "@socket.io/base64-arraybuffer": "~1.0.2"
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
       }
     },
     "ent": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz",
-      "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0=",
+      "integrity": "sha512-GHrMyVZQWvTIdDtpiEXdHZnFQKzeO09apj8Cbl4pKWy4i0Oprcq17usfDt5aO63swf0JOeMWjWQE/LzgSRuWpA==",
       "dev": true
     },
     "entities": {
@@ -2870,23 +11163,25 @@
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
       "dev": true
     },
     "escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
       "dev": true
     },
     "eslint": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.13.0.tgz",
-      "integrity": "sha512-D+Xei61eInqauAyTJ6C0q6x9mx7kTUC1KZ0m0LSEexR0V+e94K12LmWX076ZIsldwfQ2RONdaJe0re0TRGQbRQ==",
+      "version": "8.23.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.23.0.tgz",
+      "integrity": "sha512-pBG/XOn0MsJcKcTRLr27S5HpzQo4kLr+HjLQIyK4EiCsijDl/TB+h5uEuJU6bQ8Edvwz1XWOjpaP2qgnXGpTcA==",
       "dev": true,
       "requires": {
-        "@eslint/eslintrc": "^1.2.1",
-        "@humanwhocodes/config-array": "^0.9.2",
+        "@eslint/eslintrc": "^1.3.1",
+        "@humanwhocodes/config-array": "^0.10.4",
+        "@humanwhocodes/gitignore-to-minimatch": "^1.0.2",
+        "@humanwhocodes/module-importer": "^1.0.1",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
@@ -2896,14 +11191,17 @@
         "eslint-scope": "^7.1.1",
         "eslint-utils": "^3.0.0",
         "eslint-visitor-keys": "^3.3.0",
-        "espree": "^9.3.1",
+        "espree": "^9.4.0",
         "esquery": "^1.4.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
         "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
         "functional-red-black-tree": "^1.0.1",
         "glob-parent": "^6.0.1",
-        "globals": "^13.6.0",
+        "globals": "^13.15.0",
+        "globby": "^11.1.0",
+        "grapheme-splitter": "^1.0.4",
         "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
@@ -2912,16 +11210,73 @@
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
         "lodash.merge": "^4.6.2",
-        "minimatch": "^3.0.4",
+        "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
         "regexpp": "^3.2.0",
         "strip-ansi": "^6.0.1",
         "strip-json-comments": "^3.1.0",
-        "text-table": "^0.2.0",
-        "v8-compile-cache": "^2.0.3"
+        "text-table": "^0.2.0"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "array-union": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        },
         "eslint-scope": {
           "version": "7.1.1",
           "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
@@ -2932,30 +11287,66 @@
             "estraverse": "^5.2.0"
           }
         },
+        "eslint-visitor-keys": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+          "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+          "dev": true
+        },
         "estraverse": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
           "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
           "dev": true
         },
-        "glob-parent": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-          "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+        "globals": {
+          "version": "13.17.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz",
+          "integrity": "sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==",
+          "dev": true,
+          "requires": {
+            "type-fest": "^0.20.2"
+          }
+        },
+        "globby": {
+          "version": "11.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+          "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+          "dev": true,
+          "requires": {
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.2.9",
+            "ignore": "^5.2.0",
+            "merge2": "^1.4.1",
+            "slash": "^3.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {
-            "is-glob": "^4.0.3"
-          },
-          "dependencies": {
-            "is-glob": {
-              "version": "4.0.3",
-              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-              "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-              "dev": true,
-              "requires": {
-                "is-extglob": "^2.1.1"
-              }
-            }
+            "has-flag": "^4.0.0"
           }
         }
       }
@@ -2983,56 +11374,44 @@
       "dev": true,
       "requires": {
         "eslint-visitor-keys": "^2.0.0"
-      },
-      "dependencies": {
-        "eslint-visitor-keys": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
-          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
-          "dev": true
-        }
       }
     },
     "eslint-visitor-keys": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
-      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
       "dev": true
     },
     "eslint-webpack-plugin": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-webpack-plugin/-/eslint-webpack-plugin-3.1.1.tgz",
-      "integrity": "sha512-xSucskTN9tOkfW7so4EaiFIkulWLXwCB/15H917lR6pTv0Zot6/fetFucmENRb7J5whVSFKIvwnrnsa78SG2yg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-webpack-plugin/-/eslint-webpack-plugin-3.2.0.tgz",
+      "integrity": "sha512-avrKcGncpPbPSUHX6B3stNGzkKFto3eL+DKM4+VyMrVnhPc3vRczVlCq3uhuFOdRvDHTVXuzwk1ZKUrqDQHQ9w==",
       "dev": true,
       "requires": {
-        "@types/eslint": "^7.28.2",
-        "jest-worker": "^27.3.1",
-        "micromatch": "^4.0.4",
+        "@types/eslint": "^7.29.0 || ^8.4.1",
+        "jest-worker": "^28.0.2",
+        "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
-        "schema-utils": "^3.1.1"
-      },
-      "dependencies": {
-        "@types/eslint": {
-          "version": "7.29.0",
-          "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.29.0.tgz",
-          "integrity": "sha512-VNcvioYDH8/FxaeTKkM4/TiTwt6pBV9E3OfGmvaw8tPl0rrHCJ4Ll15HRT+pMiFAf/MLQvAzC+6RzUMEL9Ceng==",
-          "dev": true,
-          "requires": {
-            "@types/estree": "*",
-            "@types/json-schema": "*"
-          }
-        }
+        "schema-utils": "^4.0.0"
       }
     },
     "espree": {
-      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.1.tgz",
-      "integrity": "sha512-bvdyLmJMfwkV3NCRl5ZhJf22zBFo1y8bYh3VYb+bfzqNB4Je68P2sSuXyuFquzWLebHpNd2/d5uv7yoP9ISnGQ==",
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.0.tgz",
+      "integrity": "sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==",
       "dev": true,
       "requires": {
-        "acorn": "^8.7.0",
-        "acorn-jsx": "^5.3.1",
+        "acorn": "^8.8.0",
+        "acorn-jsx": "^5.3.2",
         "eslint-visitor-keys": "^3.3.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+          "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+          "dev": true
+        }
       }
     },
     "esquery": {
@@ -3062,9 +11441,9 @@
       },
       "dependencies": {
         "estraverse": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
           "dev": true
         }
       }
@@ -3084,7 +11463,7 @@
     "etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
       "dev": true
     },
     "eventemitter3": {
@@ -3117,38 +11496,39 @@
       }
     },
     "express": {
-      "version": "4.17.3",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.17.3.tgz",
-      "integrity": "sha512-yuSQpz5I+Ch7gFrPCk4/c+dIBKlQUxtgwqzph132bsT6qhuzss6I8cLJQz7B3rFblzd6wtcI0ZbGltH/C4LjUg==",
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.1.tgz",
+      "integrity": "sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==",
       "dev": true,
       "requires": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.19.2",
+        "body-parser": "1.20.0",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.4.2",
+        "cookie": "0.5.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
-        "depd": "~1.1.2",
+        "depd": "2.0.0",
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "~1.1.2",
+        "finalhandler": "1.2.0",
         "fresh": "0.5.2",
+        "http-errors": "2.0.0",
         "merge-descriptors": "1.0.1",
         "methods": "~1.1.2",
-        "on-finished": "~2.3.0",
+        "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.7",
         "proxy-addr": "~2.0.7",
-        "qs": "6.9.7",
+        "qs": "6.10.3",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.17.2",
-        "serve-static": "1.14.2",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
         "setprototypeof": "1.2.0",
-        "statuses": "~1.5.0",
+        "statuses": "2.0.1",
         "type-is": "~1.6.18",
         "utils-merge": "1.0.1",
         "vary": "~1.1.2"
@@ -3157,7 +11537,13 @@
         "array-flatten": {
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-          "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
+          "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+          "dev": true
+        },
+        "cookie": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+          "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
           "dev": true
         },
         "debug": {
@@ -3169,10 +11555,31 @@
             "ms": "2.0.0"
           }
         },
+        "finalhandler": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+          "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+          "dev": true,
+          "requires": {
+            "debug": "2.6.9",
+            "encodeurl": "~1.0.2",
+            "escape-html": "~1.0.3",
+            "on-finished": "2.4.1",
+            "parseurl": "~1.3.3",
+            "statuses": "2.0.1",
+            "unpipe": "~1.0.0"
+          }
+        },
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        },
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
           "dev": true
         }
       }
@@ -3202,47 +11609,13 @@
         "micromatch": "^4.0.4"
       },
       "dependencies": {
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.4",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.2.3"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
           "dev": true,
           "requires": {
-            "is-number": "^7.0.0"
+            "is-glob": "^4.0.1"
           }
         }
       }
@@ -3256,13 +11629,13 @@
     "fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
     "fastest-levenshtein": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
       "dev": true
     },
     "fastq": {
@@ -3300,6 +11673,44 @@
       "requires": {
         "loader-utils": "^2.0.0",
         "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "dev": true,
+          "requires": {}
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
       }
     },
     "fill-range": {
@@ -3338,18 +11749,33 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        },
+        "on-finished": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+          "integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
+          "dev": true,
+          "requires": {
+            "ee-first": "1.1.1"
+          }
+        },
+        "statuses": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+          "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
           "dev": true
         }
       }
     },
     "find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
       "dev": true,
       "requires": {
-        "locate-path": "^5.0.0",
+        "locate-path": "^6.0.0",
         "path-exists": "^4.0.0"
       }
     },
@@ -3370,15 +11796,15 @@
       }
     },
     "flatted": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz",
-      "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
     "follow-redirects": {
-      "version": "1.14.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
-      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
       "dev": true
     },
     "forwarded": {
@@ -3390,18 +11816,18 @@
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "dev": true
     },
     "fs-extra": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
-      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
       }
     },
     "fs-monkey": {
@@ -3432,7 +11858,7 @@
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
-      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
+      "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==",
       "dev": true
     },
     "gensync": {
@@ -3450,18 +11876,18 @@
     "get-func-name": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
-      "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=",
+      "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==",
       "dev": true
     },
     "get-intrinsic": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
+      "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
       "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
-        "has-symbols": "^1.0.1"
+        "has-symbols": "^1.0.3"
       }
     },
     "get-stream": {
@@ -3504,12 +11930,12 @@
       }
     },
     "glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
       "dev": true,
       "requires": {
-        "is-glob": "^4.0.1"
+        "is-glob": "^4.0.3"
       }
     },
     "glob-to-regexp": {
@@ -3519,40 +11945,35 @@
       "dev": true
     },
     "globals": {
-      "version": "13.13.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.13.0.tgz",
-      "integrity": "sha512-EQ7Q18AJlPwp3vUDL4mKA0KXrXyNIQyWon6T6XQiBQF0XHvRsiCSrWmmeATpUzdJN2HhWZU6Pdl0a9zdep5p6A==",
-      "dev": true,
-      "requires": {
-        "type-fest": "^0.20.2"
-      }
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true
     },
     "globby": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-12.2.0.tgz",
+      "integrity": "sha512-wiSuFQLZ+urS9x2gGPl1H5drc5twabmm4m2gTR27XDFyjUHJUNsS8o/2aKyIF6IoBaR630atdher0XJ5g6OMmA==",
       "dev": true,
       "requires": {
-        "array-union": "^2.1.0",
+        "array-union": "^3.0.1",
         "dir-glob": "^3.0.1",
-        "fast-glob": "^3.2.9",
-        "ignore": "^5.2.0",
+        "fast-glob": "^3.2.7",
+        "ignore": "^5.1.9",
         "merge2": "^1.4.1",
-        "slash": "^3.0.0"
-      },
-      "dependencies": {
-        "ignore": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-          "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
-          "dev": true
-        }
+        "slash": "^4.0.0"
       }
     },
     "graceful-fs": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+      "dev": true
+    },
+    "grapheme-splitter": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
     "growl": {
@@ -3577,26 +11998,26 @@
       }
     },
     "has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true
-    },
-    "has-symbols": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
       "dev": true
     },
-    "has-tostringtag": {
+    "has-property-descriptors": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
       "dev": true,
       "requires": {
-        "has-symbols": "^1.0.2"
+        "get-intrinsic": "^1.1.1"
       }
     },
+    "has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true
+    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -3606,19 +12027,36 @@
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
-      "integrity": "sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=",
+      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
       "dev": true,
       "requires": {
         "inherits": "^2.0.1",
         "obuf": "^1.0.0",
         "readable-stream": "^2.0.1",
         "wbuf": "^1.1.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        }
       }
     },
     "html-entities": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
-      "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
+      "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==",
       "dev": true
     },
     "html-escaper": {
@@ -3670,26 +12108,26 @@
     "http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
-      "integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=",
+      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==",
       "dev": true
     },
     "http-errors": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
-      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
       "dev": true,
       "requires": {
-        "depd": "~1.1.2",
+        "depd": "2.0.0",
         "inherits": "2.0.4",
         "setprototypeof": "1.2.0",
-        "statuses": ">= 1.5.0 < 2",
+        "statuses": "2.0.1",
         "toidentifier": "1.0.1"
       }
     },
     "http-parser-js": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.6.tgz",
-      "integrity": "sha512-vDlkRPDJn93swjcjqMSaGSPABbIarsr1TLAui/gLDXzV5VsJNdXNzMYDyNBLQkjWQCJ1uizu8T2oDMhmGt0PRA==",
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
+      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==",
       "dev": true
     },
     "http-proxy": {
@@ -3704,9 +12142,9 @@
       }
     },
     "http-proxy-middleware": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.4.tgz",
-      "integrity": "sha512-m/4FxX17SUvz4lJ5WPXOHDUuCwIqXLfLHs1s0uZ3oYjhoXlx9csYxaOa0ElDEJ+h8Q4iJ1s+lTMbiCa4EXIJqg==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+      "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
       "dev": true,
       "requires": {
         "@types/http-proxy": "^1.17.8",
@@ -3716,48 +12154,11 @@
         "micromatch": "^4.0.2"
       },
       "dependencies": {
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+        "is-plain-obj": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+          "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
           "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.4",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.2.3"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
         }
       }
     },
@@ -3790,14 +12191,6 @@
       "requires": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
-      },
-      "dependencies": {
-        "resolve-from": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-          "dev": true
-        }
       }
     },
     "import-local": {
@@ -3813,13 +12206,7 @@
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
-      "dev": true
-    },
-    "indent-string": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "dev": true
     },
     "inflight": {
@@ -3844,28 +12231,12 @@
       "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
       "dev": true
     },
-    "ip": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
-      "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=",
-      "dev": true
-    },
     "ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
       "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==",
       "dev": true
     },
-    "is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -3876,23 +12247,14 @@
       }
     },
     "is-core-module": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
-      "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==",
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
+      "integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
       "dev": true,
       "requires": {
         "has": "^1.0.3"
       }
     },
-    "is-date-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "dev": true,
-      "requires": {
-        "has-tostringtag": "^1.0.0"
-      }
-    },
     "is-docker": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@@ -3902,7 +12264,7 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true
     },
     "is-fullwidth-code-point": {
@@ -3912,9 +12274,9 @@
       "dev": true
     },
     "is-glob": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.2.tgz",
-      "integrity": "sha512-ZZTOjRcDjuAAAv2cTBQP/lL59ZTArx77+7UzHdWW/XB1mrfp7DEaVpKmZ0XIzx+M7AxfhKcqV+nMetUQmFifwg==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
@@ -3926,22 +12288,10 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true
     },
-    "is-path-cwd": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
-      "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
-      "dev": true
-    },
-    "is-path-inside": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-      "dev": true
-    },
     "is-plain-obj": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
-      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
       "dev": true
     },
     "is-plain-object": {
@@ -3953,16 +12303,6 @@
         "isobject": "^3.0.1"
       }
     },
-    "is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
     "is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -3987,7 +12327,7 @@
     "isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
       "dev": true
     },
     "isbinaryfile": {
@@ -3999,13 +12339,13 @@
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
       "dev": true
     },
     "istanbul-lib-coverage": {
@@ -4035,6 +12375,23 @@
         "istanbul-lib-coverage": "^3.0.0",
         "make-dir": "^3.0.0",
         "supports-color": "^7.1.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
       }
     },
     "istanbul-lib-source-maps": {
@@ -4050,6 +12407,20 @@
         "source-map": "^0.6.1"
       },
       "dependencies": {
+        "glob": {
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.1.1",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
         "istanbul-lib-coverage": {
           "version": "2.0.5",
           "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz",
@@ -4066,15 +12437,6 @@
             "semver": "^5.6.0"
           }
         },
-        "minimatch": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "^1.1.7"
-          }
-        },
         "rimraf": {
           "version": "2.7.1",
           "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -4082,22 +12444,6 @@
           "dev": true,
           "requires": {
             "glob": "^7.1.3"
-          },
-          "dependencies": {
-            "glob": {
-              "version": "7.2.3",
-              "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-              "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-              "dev": true,
-              "requires": {
-                "fs.realpath": "^1.0.0",
-                "inflight": "^1.0.4",
-                "inherits": "2",
-                "minimatch": "^3.1.1",
-                "once": "^1.3.0",
-                "path-is-absolute": "^1.0.0"
-              }
-            }
           }
         },
         "semver": {
@@ -4109,9 +12455,9 @@
       }
     },
     "istanbul-reports": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.4.tgz",
-      "integrity": "sha512-r1/DshN4KSE7xWEknZLLLLDn5CJybV3nw01VTkp6D5jzLuELlcbudfj/eSQFvrKsJuTVCGnePO7ho82Nw9zzfw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.5.tgz",
+      "integrity": "sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==",
       "dev": true,
       "requires": {
         "html-escaper": "^2.0.0",
@@ -4119,9 +12465,9 @@
       }
     },
     "jest-worker": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
-      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "version": "28.1.3",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-28.1.3.tgz",
+      "integrity": "sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g==",
       "dev": true,
       "requires": {
         "@types/node": "*",
@@ -4129,6 +12475,12 @@
         "supports-color": "^8.0.0"
       },
       "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
         "supports-color": {
           "version": "8.1.1",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -4161,47 +12513,43 @@
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
       "dev": true
     },
-    "json-parse-better-errors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "dev": true
     },
     "json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
     "json5": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
-      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
-      "dev": true,
-      "requires": {
-        "minimist": "^1.2.5"
-      }
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+      "dev": true
     },
     "jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
       "dev": true,
       "requires": {
-        "graceful-fs": "^4.1.6",
-        "universalify": "^2.0.0"
+        "graceful-fs": "^4.1.6"
       }
     },
     "karma": {
-      "version": "6.3.18",
-      "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.18.tgz",
-      "integrity": "sha512-YEwXVHRILKWKN7uEW9IkgTPjnYGb3YA3MDvlp04xpSRAyrNPoRmsBayLDgHykKAwBm6/mAOckj4xi/1JdQfhzQ==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.0.tgz",
+      "integrity": "sha512-s8m7z0IF5g/bS5ONT7wsOavhW4i4aFkzD4u4wgzAQWT4HGUeWI3i21cK2Yz6jndMAeHETp5XuNsRoyGJZXVd4w==",
       "dev": true,
       "requires": {
         "@colors/colors": "1.5.0",
@@ -4242,32 +12590,16 @@
             "minimatch": "^3.1.1",
             "once": "^1.3.0",
             "path-is-absolute": "^1.0.0"
-          },
-          "dependencies": {
-            "minimatch": {
-              "version": "3.1.2",
-              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-              "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-              "dev": true,
-              "requires": {
-                "brace-expansion": "^1.1.7"
-              }
-            }
           }
-        },
-        "mime": {
-          "version": "2.6.0",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
-          "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
-          "dev": true
         }
       }
     },
     "karma-chai": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/karma-chai/-/karma-chai-0.1.0.tgz",
-      "integrity": "sha1-vuWtQEAFF4Ea40u5RfdikJEIt5o=",
-      "dev": true
+      "integrity": "sha512-mqKCkHwzPMhgTYca10S90aCEX9+HjVjjrBFAsw36Zj7BlQNbokXXCAe6Ji04VUMsxcY5RLP7YphpfO06XOubdg==",
+      "dev": true,
+      "requires": {}
     },
     "karma-chrome-launcher": {
       "version": "3.1.1",
@@ -4324,7 +12656,7 @@
     "karma-mocha-reporter": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/karma-mocha-reporter/-/karma-mocha-reporter-2.2.5.tgz",
-      "integrity": "sha1-FRIAlejtgZGG5HoLAS8810GJVWA=",
+      "integrity": "sha512-Hr6nhkIp0GIJJrvzY8JFeHpQZNseuIakGac4bpw8K1+5F0tLb6l7uvXRa8mt2Z+NVwYgCct4QAfp2R2QP6o00w==",
       "dev": true,
       "requires": {
         "chalk": "^2.1.0",
@@ -4338,79 +12670,14 @@
           "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "dev": true,
-          "requires": {
-            "color-name": "1.1.3"
-          }
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-          "dev": true
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-          "dev": true
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-          "dev": true
-        },
-        "log-symbols": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
-          "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.0.1"
-          }
-        },
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
           "dev": true,
           "requires": {
             "ansi-regex": "^3.0.0"
           }
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
         }
       }
     },
@@ -4430,16 +12697,22 @@
         "type-check": "~0.4.0"
       }
     },
+    "lil-gui": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/lil-gui/-/lil-gui-0.17.0.tgz",
+      "integrity": "sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==",
+      "dev": true
+    },
     "loader-runner": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
-      "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
+      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
       "dev": true
     },
     "loader-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-      "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
       "dev": true,
       "requires": {
         "big.js": "^5.2.2",
@@ -4448,12 +12721,12 @@
       }
     },
     "locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
       "dev": true,
       "requires": {
-        "p-locate": "^4.1.0"
+        "p-locate": "^5.0.0"
       }
     },
     "lodash": {
@@ -4465,7 +12738,7 @@
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "dev": true
     },
     "lodash.merge": {
@@ -4475,37 +12748,25 @@
       "dev": true
     },
     "log-symbols": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
-      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
+      "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
       "dev": true,
       "requires": {
-        "chalk": "^4.1.0",
-        "is-unicode-supported": "^0.1.0"
+        "chalk": "^2.0.1"
       }
     },
     "log4js": {
-      "version": "6.4.5",
-      "resolved": "https://registry.npmjs.org/log4js/-/log4js-6.4.5.tgz",
-      "integrity": "sha512-43RJcYZ7nfUxpPO2woTl8CJ0t5+gucLJZ43mtp2PlInT+LygCp/bl6hNJtKulCJ+++fQsjIv4EO3Mp611PfeLQ==",
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/log4js/-/log4js-6.6.1.tgz",
+      "integrity": "sha512-J8VYFH2UQq/xucdNu71io4Fo+purYYudyErgBbswWKO0MC6QVOERRomt5su/z6d3RJSmLyTGmXl3Q/XjKCf+/A==",
       "dev": true,
       "requires": {
-        "date-format": "^4.0.7",
+        "date-format": "^4.0.13",
         "debug": "^4.3.4",
-        "flatted": "^3.2.5",
+        "flatted": "^3.2.6",
         "rfdc": "^1.3.0",
-        "streamroller": "^3.0.7"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "4.3.4",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        }
+        "streamroller": "^3.1.2"
       }
     },
     "loupe": {
@@ -4538,22 +12799,22 @@
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
       "dev": true
     },
     "memfs": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.1.tgz",
-      "integrity": "sha512-1c9VPVvW5P7I85c35zAdEr1TD5+F11IToIHIlrVIcflfnzPkJa0ZoYEoEdYDP8KgPFoSZ/opDrUsAoZWym3mtw==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.7.tgz",
+      "integrity": "sha512-ygaiUSNalBX85388uskeCyhSAoOSgzBbtVCr9jA2RROssFL9Q19/ZXFqS+2Th2sr1ewNIWgFdLzLC3Yl1Zv+lw==",
       "dev": true,
       "requires": {
-        "fs-monkey": "1.0.3"
+        "fs-monkey": "^1.0.3"
       }
     },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
       "dev": true
     },
     "merge-stream": {
@@ -4571,23 +12832,23 @@
     "methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
       "dev": true
     },
     "micromatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
       "dev": true,
       "requires": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.2.3"
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
       }
     },
     "mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
       "dev": true
     },
     "mime-db": {
@@ -4597,20 +12858,12 @@
       "dev": true
     },
     "mime-types": {
-      "version": "2.1.32",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.32.tgz",
-      "integrity": "sha512-hJGaVS4G4c9TSMYh2n6SQAGrC4RnfU+daP8G7cSCmaqNjiOoUY0VHCMS42pxnQmVF1GWwFhbHWn3RIxCqTmZ9A==",
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "dev": true,
       "requires": {
-        "mime-db": "1.49.0"
-      },
-      "dependencies": {
-        "mime-db": {
-          "version": "1.49.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.49.0.tgz",
-          "integrity": "sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA==",
-          "dev": true
-        }
+        "mime-db": "1.52.0"
       }
     },
     "mimic-fn": {
@@ -4626,9 +12879,9 @@
       "dev": true
     },
     "minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
@@ -4681,6 +12934,51 @@
         "yargs-unparser": "2.0.0"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "7.2.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+              "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^4.0.0"
+              }
+            }
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
         "debug": {
           "version": "4.3.3",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -4698,15 +12996,11 @@
             }
           }
         },
-        "find-up": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^6.0.0",
-            "path-exists": "^4.0.0"
-          }
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
         },
         "glob": {
           "version": "7.2.0",
@@ -4733,13 +13027,20 @@
             }
           }
         },
-        "locate-path": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "log-symbols": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+          "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
           "dev": true,
           "requires": {
-            "p-locate": "^5.0.0"
+            "chalk": "^4.1.0",
+            "is-unicode-supported": "^0.1.0"
           }
         },
         "minimatch": {
@@ -4757,24 +13058,6 @@
           "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
           "dev": true
         },
-        "p-limit": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-          "dev": true,
-          "requires": {
-            "yocto-queue": "^0.1.0"
-          }
-        },
-        "p-locate": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^3.0.2"
-          }
-        },
         "supports-color": {
           "version": "8.1.1",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -4799,21 +13082,15 @@
       "dev": true
     },
     "multicast-dns": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
-      "integrity": "sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==",
+      "version": "7.2.5",
+      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
+      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
       "dev": true,
       "requires": {
-        "dns-packet": "^1.3.1",
+        "dns-packet": "^5.2.2",
         "thunky": "^1.0.2"
       }
     },
-    "multicast-dns-service-types": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
-      "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
-      "dev": true
-    },
     "nanoid": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
@@ -4823,7 +13100,7 @@
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
     "negotiator": {
@@ -4849,15 +13126,15 @@
       }
     },
     "node-forge": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.0.tgz",
-      "integrity": "sha512-08ARB91bUi6zNKzVmaj3QO7cr397uiDT2nJ63cHjyNtCTWIgvS47j3eT0WfzUwS9+6Z5YshRaoasFkXCKrIYbA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
       "dev": true
     },
     "node-releases": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.2.tgz",
-      "integrity": "sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
+      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
       "dev": true
     },
     "normalize-path": {
@@ -4876,9 +13153,9 @@
       }
     },
     "nth-check": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
-      "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
       "dev": true,
       "requires": {
         "boolbase": "^1.0.0"
@@ -4887,18 +13164,14 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
       "dev": true
     },
-    "object-is": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
+    "object-inspect": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "dev": true
     },
     "object-keys": {
       "version": "1.1.1",
@@ -4907,14 +13180,14 @@
       "dev": true
     },
     "object.assign": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       }
     },
@@ -4925,9 +13198,9 @@
       "dev": true
     },
     "on-finished": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
       "dev": true,
       "requires": {
         "ee-first": "1.1.1"
@@ -4983,39 +13256,30 @@
       }
     },
     "p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
       "dev": true,
       "requires": {
-        "p-try": "^2.0.0"
+        "yocto-queue": "^0.1.0"
       }
     },
     "p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
-      "requires": {
-        "p-limit": "^2.2.0"
-      }
-    },
-    "p-map": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
-      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
       "dev": true,
       "requires": {
-        "aggregate-error": "^3.0.0"
+        "p-limit": "^3.0.2"
       }
     },
     "p-retry": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.1.tgz",
-      "integrity": "sha512-e2xXGNhZOZ0lfgR9kL34iGlU8N/KO0xZnQxVEwdeOvpqNDQfdnxIYizvWtK8RglUa3bGqI8g0R/BdfzLMxRkiA==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
+      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
       "dev": true,
       "requires": {
-        "@types/retry": "^0.12.0",
+        "@types/retry": "0.12.0",
         "retry": "^0.13.1"
       }
     },
@@ -5087,7 +13351,7 @@
     "path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
       "dev": true
     },
     "path-type": {
@@ -5109,9 +13373,9 @@
       "dev": true
     },
     "picomatch": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
     "pify": {
@@ -5127,26 +13391,43 @@
       "dev": true,
       "requires": {
         "find-up": "^4.0.0"
-      }
-    },
-    "portfinder": {
-      "version": "1.0.28",
-      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
-      "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==",
-      "dev": true,
-      "requires": {
-        "async": "^2.6.2",
-        "debug": "^3.1.1",
-        "mkdirp": "^0.5.5"
       },
       "dependencies": {
-        "debug": {
-          "version": "3.2.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
           "dev": true,
           "requires": {
-            "ms": "^2.1.1"
+            "p-limit": "^2.2.0"
           }
         }
       }
@@ -5204,10 +13485,13 @@
       "dev": true
     },
     "qs": {
-      "version": "6.9.7",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
-      "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
-      "dev": true
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "dev": true,
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
     },
     "queue-microtask": {
       "version": "1.2.3",
@@ -5228,58 +13512,29 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "dev": true
-    },
-    "raw-body": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.3.tgz",
-      "integrity": "sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==",
-      "dev": true,
-      "requires": {
-        "bytes": "3.1.2",
-        "http-errors": "1.8.1",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      },
-      "dependencies": {
-        "bytes": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-          "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-          "dev": true
-        }
-      }
-    },
-    "readable-stream": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-      "dev": true,
-      "requires": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      },
-      "dependencies": {
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        }
+      "dev": true
+    },
+    "raw-body": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "dev": true,
+      "requires": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
       }
     },
     "readdirp": {
@@ -5330,16 +13585,6 @@
         "@babel/runtime": "^7.8.4"
       }
     },
-    "regexp.prototype.flags": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz",
-      "integrity": "sha512-pMR7hBVUUGI7PMA37m2ofIdQCsomVnas+Jn5UPGAHQ+/LlwKm/aTLJHdasmHRzlfeZwHiAOaRSo2rbBDm3nNUQ==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
     "regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -5347,9 +13592,9 @@
       "dev": true
     },
     "regexpu-core": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.0.1.tgz",
-      "integrity": "sha512-CriEZlrKK9VJw/xQGJpQM5rY88BtuL8DM+AEwvcThHilbxiTAy8vq4iJnd2tqq8wLmjbGZzP7ZcKFjbGkmEFrw==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.1.0.tgz",
+      "integrity": "sha512-bb6hk+xWd2PEOkj5It46A16zFMs2mv86Iwpdu94la4S3sJ7C973h2dHpYKwIBGaWSO7cIRJ+UX0IeMaWcO4qwA==",
       "dev": true,
       "requires": {
         "regenerate": "^1.4.2",
@@ -5378,7 +13623,7 @@
         "jsesc": {
           "version": "0.5.0",
           "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
+          "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
           "dev": true
         }
       }
@@ -5386,7 +13631,7 @@
     "relateurl": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
+      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
       "dev": true
     },
     "renderkid": {
@@ -5405,7 +13650,7 @@
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
       "dev": true
     },
     "require-from-string": {
@@ -5417,16 +13662,16 @@
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
     "resolve": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
-      "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
       "dev": true,
       "requires": {
-        "is-core-module": "^2.8.1",
+        "is-core-module": "^2.9.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       }
@@ -5438,12 +13683,20 @@
       "dev": true,
       "requires": {
         "resolve-from": "^5.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+          "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+          "dev": true
+        }
       }
     },
     "resolve-from": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "dev": true
     },
     "retry": {
@@ -5486,15 +13739,6 @@
             "once": "^1.3.0",
             "path-is-absolute": "^1.0.0"
           }
-        },
-        "minimatch": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "^1.1.7"
-          }
         }
       }
     },
@@ -5508,9 +13752,9 @@
       }
     },
     "safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true
     },
     "safer-buffer": {
@@ -5520,29 +13764,30 @@
       "dev": true
     },
     "schema-utils": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
       "dev": true,
       "requires": {
-        "@types/json-schema": "^7.0.8",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.8.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.0.0"
       }
     },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
-      "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=",
+      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
       "dev": true
     },
     "selfsigned": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.0.0.tgz",
-      "integrity": "sha512-cUdFiCbKoa1mZ6osuJs2uDHrs0k0oprsKveFiiaBKCNq3SYyb5gs2HxhQyDNLCmL51ZZThqi4YNDpCK6GOP1iQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.0.1.tgz",
+      "integrity": "sha512-LmME957M1zOsUhG+67rAjKfiWFox3SBxE/yymatMZsAx+oMrJ0YQ8AToOnyCm7xbeg2ep37IHLxdu0o2MavQOQ==",
       "dev": true,
       "requires": {
-        "node-forge": "^1.2.0"
+        "node-forge": "^1"
       }
     },
     "semver": {
@@ -5552,24 +13797,24 @@
       "dev": true
     },
     "send": {
-      "version": "0.17.2",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz",
-      "integrity": "sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==",
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
       "dev": true,
       "requires": {
         "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "destroy": "~1.0.4",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
         "fresh": "0.5.2",
-        "http-errors": "1.8.1",
+        "http-errors": "2.0.0",
         "mime": "1.6.0",
         "ms": "2.1.3",
-        "on-finished": "~2.3.0",
+        "on-finished": "2.4.1",
         "range-parser": "~1.2.1",
-        "statuses": "~1.5.0"
+        "statuses": "2.0.1"
       },
       "dependencies": {
         "debug": {
@@ -5584,11 +13829,17 @@
             "ms": {
               "version": "2.0.0",
               "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-              "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+              "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
               "dev": true
             }
           }
         },
+        "mime": {
+          "version": "1.6.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+          "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+          "dev": true
+        },
         "ms": {
           "version": "2.1.3",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5609,7 +13860,7 @@
     "serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-      "integrity": "sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=",
+      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
       "dev": true,
       "requires": {
         "accepts": "~1.3.4",
@@ -5630,10 +13881,16 @@
             "ms": "2.0.0"
           }
         },
+        "depd": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+          "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+          "dev": true
+        },
         "http-errors": {
           "version": "1.6.3",
           "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-          "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
+          "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
           "dev": true,
           "requires": {
             "depd": "~1.1.2",
@@ -5645,13 +13902,13 @@
         "inherits": {
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
           "dev": true
         },
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
           "dev": true
         },
         "setprototypeof": {
@@ -5659,19 +13916,25 @@
           "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
           "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
           "dev": true
+        },
+        "statuses": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+          "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+          "dev": true
         }
       }
     },
     "serve-static": {
-      "version": "1.14.2",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.2.tgz",
-      "integrity": "sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
       "dev": true,
       "requires": {
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.17.2"
+        "send": "0.18.0"
       }
     },
     "setprototypeof": {
@@ -5704,6 +13967,17 @@
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true
     },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
     "signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -5711,35 +13985,35 @@
       "dev": true
     },
     "slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
       "dev": true
     },
     "socket.io": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.4.1.tgz",
-      "integrity": "sha512-s04vrBswdQBUmuWJuuNTmXUVJhP0cVky8bBDhdkf8y0Ptsu7fKU2LuLbts9g+pdmAdyMMn8F/9Mf1/wbtUN0fg==",
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.1.tgz",
+      "integrity": "sha512-0y9pnIso5a9i+lJmsCdtmTTgJFFSvNQKDnPQRz28mGNnxbmqYg2QPtJTLFxhymFZhAIn50eHAKzJeiNaKr+yUQ==",
       "dev": true,
       "requires": {
         "accepts": "~1.3.4",
         "base64id": "~2.0.0",
         "debug": "~4.3.2",
-        "engine.io": "~6.1.0",
-        "socket.io-adapter": "~2.3.3",
+        "engine.io": "~6.2.0",
+        "socket.io-adapter": "~2.4.0",
         "socket.io-parser": "~4.0.4"
       }
     },
     "socket.io-adapter": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.3.3.tgz",
-      "integrity": "sha512-Qd/iwn3VskrpNO60BeRyCyr8ZWw9CPZyitW4AQwmRZ8zCiyDiL+znRnWX6tDHXnWn1sJrM1+b6Mn6wEDJJ4aYQ==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.4.0.tgz",
+      "integrity": "sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg==",
       "dev": true
     },
     "socket.io-parser": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz",
-      "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.5.tgz",
+      "integrity": "sha512-sNjbT9dX63nqUFIOv95tTVm6elyIU4RvB1m8dOeZt+IgWwcWklFDOdmGcfo3zSiRsnR/3pJkjY5lfoGqEe4Eig==",
       "dev": true,
       "requires": {
         "@types/component-emitter": "^1.2.10",
@@ -5765,9 +14039,9 @@
       "dev": true
     },
     "source-map-support": {
-      "version": "0.5.20",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.20.tgz",
-      "integrity": "sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==",
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
       "requires": {
         "buffer-from": "^1.0.0",
@@ -5799,47 +14073,32 @@
         "obuf": "^1.1.2",
         "readable-stream": "^3.0.6",
         "wbuf": "^1.7.3"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        }
       }
     },
     "statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
       "dev": true
     },
     "streamroller": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-3.0.7.tgz",
-      "integrity": "sha512-kh68kwiDGuIPiPDWwRbEC5us+kfARP1e9AsQiaLaSqGrctOvMn0mtL8iNY3r4/o5nIoYi3gPI1jexguZsXDlxw==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-3.1.2.tgz",
+      "integrity": "sha512-wZswqzbgGGsXYIrBYhOE0yP+nQ6XRk7xDcYwuQAGTYXdyAUmvgVFE0YU1g5pvQT0m7GBaQfYcSnlHbapuK0H0A==",
       "dev": true,
       "requires": {
-        "date-format": "^4.0.7",
+        "date-format": "^4.0.13",
         "debug": "^4.3.4",
-        "fs-extra": "^10.0.1"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "4.3.4",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        }
+        "fs-extra": "^8.1.0"
+      }
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.0"
       }
     },
     "string-width": {
@@ -5853,15 +14112,6 @@
         "strip-ansi": "^6.0.1"
       }
     },
-    "string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
     "strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -5884,12 +14134,12 @@
       "dev": true
     },
     "supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
       "dev": true,
       "requires": {
-        "has-flag": "^4.0.0"
+        "has-flag": "^3.0.0"
       }
     },
     "supports-preserve-symlinks-flag": {
@@ -5905,80 +14155,98 @@
       "dev": true
     },
     "terser": {
-      "version": "5.12.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.12.1.tgz",
-      "integrity": "sha512-NXbs+7nisos5E+yXwAD+y7zrcTkMqb0dEJxIGtSKPdCBzopf7ni4odPul2aechpV7EXNvOudYOX2bb5tln1jbQ==",
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.0.tgz",
+      "integrity": "sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==",
       "dev": true,
       "requires": {
+        "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
         "source-map-support": "~0.5.20"
       },
       "dependencies": {
-        "acorn": {
-          "version": "8.7.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-          "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-          "dev": true
-        },
         "commander": {
           "version": "2.20.3",
           "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
           "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
           "dev": true
-        },
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-          "dev": true
         }
       }
     },
     "terser-webpack-plugin": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.1.tgz",
-      "integrity": "sha512-GvlZdT6wPQKbDNW/GDQzZFg/j4vKU96yl2q6mcUkzKOgW4gwf1Z8cZToUCrz31XHlPWH8MVb1r2tFtdDtTGJ7g==",
+      "version": "5.3.6",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.6.tgz",
+      "integrity": "sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==",
       "dev": true,
       "requires": {
+        "@jridgewell/trace-mapping": "^0.3.14",
         "jest-worker": "^27.4.5",
         "schema-utils": "^3.1.1",
         "serialize-javascript": "^6.0.0",
-        "source-map": "^0.6.1",
-        "terser": "^5.7.2"
+        "terser": "^5.14.1"
       },
       "dependencies": {
-        "acorn": {
-          "version": "8.7.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-          "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "dev": true,
+          "requires": {}
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+        "jest-worker": {
+          "version": "27.5.1",
+          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+          "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+          "dev": true,
+          "requires": {
+            "@types/node": "*",
+            "merge-stream": "^2.0.0",
+            "supports-color": "^8.0.0"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
           "dev": true
         },
-        "terser": {
-          "version": "5.12.1",
-          "resolved": "https://registry.npmjs.org/terser/-/terser-5.12.1.tgz",
-          "integrity": "sha512-NXbs+7nisos5E+yXwAD+y7zrcTkMqb0dEJxIGtSKPdCBzopf7ni4odPul2aechpV7EXNvOudYOX2bb5tln1jbQ==",
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
           "dev": true,
           "requires": {
-            "acorn": "^8.5.0",
-            "commander": "^2.20.0",
-            "source-map": "~0.7.2",
-            "source-map-support": "~0.5.20"
-          },
-          "dependencies": {
-            "source-map": {
-              "version": "0.7.3",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-              "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-              "dev": true
-            }
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
+        "supports-color": {
+          "version": "8.1.1",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
           }
         }
       }
@@ -5986,14 +14254,14 @@
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
     "three": {
-      "version": "0.143.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.143.0.tgz",
-      "integrity": "sha512-oKcAGYHhJ46TGEuHjodo2n6TY2R6lbvrkp+feKZxqsUL/WkH7GKKaeu6RHeyb2Xjfk2dPLRKLsOP0KM2VgT8Zg==",
-      "dev": true
+      "version": "0.145.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.145.0.tgz",
+      "integrity": "sha512-EKoHQEtEJ4CB6b2BGMBgLZrfwLjXcSUfoI/MiIXUuRpeYsfK5aPWbYhdtIVWOH+x6X0TouldHKHBuc/LAiFzAw==",
+      "peer": true
     },
     "thunky": {
       "version": "1.1.0",
@@ -6013,7 +14281,7 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
       "dev": true
     },
     "to-regex-range": {
@@ -6032,9 +14300,9 @@
       "dev": true
     },
     "tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
       "dev": true
     },
     "type-check": {
@@ -6069,9 +14337,9 @@
       }
     },
     "typescript": {
-      "version": "4.6.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
-      "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz",
+      "integrity": "sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==",
       "dev": true
     },
     "ua-parser-js": {
@@ -6109,17 +14377,27 @@
       "dev": true
     },
     "universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
       "dev": true
     },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
       "dev": true
     },
+    "update-browserslist-db": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.7.tgz",
+      "integrity": "sha512-iN/XYesmZ2RmmWAiI4Z5rq0YqSiv0brj9Ce9CfhNE4xIW2h+MFxcgkxIzZ+ShkFPUkjU3gQ+3oypadD3RAMtrg==",
+      "dev": true,
+      "requires": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      }
+    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -6132,19 +14410,19 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
     "utila": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
-      "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
+      "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==",
       "dev": true
     },
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
       "dev": true
     },
     "uuid": {
@@ -6153,28 +14431,22 @@
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
       "dev": true
     },
-    "v8-compile-cache": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
-      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
-      "dev": true
-    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
       "dev": true
     },
     "void-elements": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
-      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
+      "integrity": "sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung==",
       "dev": true
     },
     "watchpack": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
-      "integrity": "sha512-x0t0JuydIo8qCNctdDrn1OzH/qDzk2+rdCOC3YzumZ42fiMqmQ7T3xQurykYMhYfHaPHTp4ZxAx2NfUo1K6QaA==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
+      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
       "dev": true,
       "requires": {
         "glob-to-regexp": "^0.4.1",
@@ -6191,9 +14463,9 @@
       }
     },
     "webpack": {
-      "version": "5.70.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.70.0.tgz",
-      "integrity": "sha512-ZMWWy8CeuTTjCxbeaQI21xSswseF2oNOwc70QSKNePvmxE7XW36i7vpBMYZFAUHPwQiEbNGCEYIOOlyRbdGmxw==",
+      "version": "5.74.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
+      "integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
       "dev": true,
       "requires": {
         "@types/eslint-scope": "^3.7.3",
@@ -6201,70 +14473,84 @@
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/wasm-edit": "1.11.1",
         "@webassemblyjs/wasm-parser": "1.11.1",
-        "acorn": "^8.4.1",
+        "acorn": "^8.7.1",
         "acorn-import-assertions": "^1.7.6",
         "browserslist": "^4.14.5",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.9.2",
+        "enhanced-resolve": "^5.10.0",
         "es-module-lexer": "^0.9.0",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.2.9",
-        "json-parse-better-errors": "^1.0.2",
+        "json-parse-even-better-errors": "^2.3.1",
         "loader-runner": "^4.2.0",
         "mime-types": "^2.1.27",
         "neo-async": "^2.6.2",
         "schema-utils": "^3.1.0",
         "tapable": "^2.1.1",
         "terser-webpack-plugin": "^5.1.3",
-        "watchpack": "^2.3.1",
+        "watchpack": "^2.4.0",
         "webpack-sources": "^3.2.3"
       },
       "dependencies": {
-        "acorn": {
-          "version": "8.7.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-          "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
+        "@types/estree": {
+          "version": "0.0.51",
+          "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
+          "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
           "dev": true
         },
-        "enhanced-resolve": {
-          "version": "5.9.2",
-          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz",
-          "integrity": "sha512-GIm3fQfwLJ8YZx2smuHpBKkXC1yOk+OBEmKckVyL0i/ea8mqDEykK3ld5dgH1QYPNyT/lIllxV2LULnxCHaHkA==",
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
           "dev": true,
           "requires": {
-            "graceful-fs": "^4.2.4",
-            "tapable": "^2.2.0"
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
           }
         },
-        "graceful-fs": {
-          "version": "4.2.9",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
-          "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
-          "dev": true
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "dev": true,
+          "requires": {}
         },
-        "tapable": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-          "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
           "dev": true
+        },
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
         }
       }
     },
     "webpack-cli": {
-      "version": "4.9.2",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.2.tgz",
-      "integrity": "sha512-m3/AACnBBzK/kMTcxWHcZFPrw/eQuY4Df1TxvIWfWM2x7mRqBQCqKEd96oCUa9jkapLBaFfRce33eGDb4Pr7YQ==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
+      "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
       "dev": true,
       "requires": {
         "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^1.1.1",
-        "@webpack-cli/info": "^1.4.1",
-        "@webpack-cli/serve": "^1.6.1",
+        "@webpack-cli/configtest": "^1.2.0",
+        "@webpack-cli/info": "^1.5.0",
+        "@webpack-cli/serve": "^1.7.0",
         "colorette": "^2.0.14",
         "commander": "^7.0.0",
-        "execa": "^5.0.0",
+        "cross-spawn": "^7.0.3",
         "fastest-levenshtein": "^1.0.12",
         "import-local": "^3.0.2",
         "interpret": "^2.2.0",
@@ -6281,150 +14567,61 @@
       }
     },
     "webpack-dev-middleware": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.1.tgz",
-      "integrity": "sha512-81EujCKkyles2wphtdrnPg/QqegC/AtqNH//mQkBYSMqwFVCQrxM6ktB2O/SPlZy7LqeEfTbV3cZARGQz6umhg==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
+      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
       "dev": true,
       "requires": {
         "colorette": "^2.0.10",
-        "memfs": "^3.4.1",
+        "memfs": "^3.4.3",
         "mime-types": "^2.1.31",
         "range-parser": "^1.2.1",
         "schema-utils": "^4.0.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "ajv-keywords": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.3"
-          }
-        },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-          "dev": true
-        },
-        "schema-utils": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
-          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.9",
-            "ajv": "^8.8.0",
-            "ajv-formats": "^2.1.1",
-            "ajv-keywords": "^5.0.0"
-          }
-        }
       }
     },
     "webpack-dev-server": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.7.4.tgz",
-      "integrity": "sha512-nfdsb02Zi2qzkNmgtZjkrMOcXnYZ6FLKcQwpxT7MvmHKc+oTtDsBju8j+NMyAygZ9GW1jMEUpy3itHtqgEhe1A==",
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.10.1.tgz",
+      "integrity": "sha512-FIzMq3jbBarz3ld9l7rbM7m6Rj1lOsgq/DyLGMX/fPEB1UBUPtf5iL/4eNfhx8YYJTRlzfv107UfWSWcBK5Odw==",
       "dev": true,
       "requires": {
         "@types/bonjour": "^3.5.9",
         "@types/connect-history-api-fallback": "^1.3.5",
         "@types/express": "^4.17.13",
         "@types/serve-index": "^1.9.1",
+        "@types/serve-static": "^1.13.10",
         "@types/sockjs": "^0.3.33",
-        "@types/ws": "^8.2.2",
+        "@types/ws": "^8.5.1",
         "ansi-html-community": "^0.0.8",
-        "bonjour": "^3.5.0",
+        "bonjour-service": "^1.0.11",
         "chokidar": "^3.5.3",
         "colorette": "^2.0.10",
         "compression": "^1.7.4",
-        "connect-history-api-fallback": "^1.6.0",
+        "connect-history-api-fallback": "^2.0.0",
         "default-gateway": "^6.0.3",
-        "del": "^6.0.0",
-        "express": "^4.17.1",
+        "express": "^4.17.3",
         "graceful-fs": "^4.2.6",
         "html-entities": "^2.3.2",
-        "http-proxy-middleware": "^2.0.0",
+        "http-proxy-middleware": "^2.0.3",
         "ipaddr.js": "^2.0.1",
         "open": "^8.0.9",
         "p-retry": "^4.5.0",
-        "portfinder": "^1.0.28",
+        "rimraf": "^3.0.2",
         "schema-utils": "^4.0.0",
-        "selfsigned": "^2.0.0",
+        "selfsigned": "^2.0.1",
         "serve-index": "^1.9.1",
-        "sockjs": "^0.3.21",
+        "sockjs": "^0.3.24",
         "spdy": "^4.0.2",
-        "strip-ansi": "^7.0.0",
         "webpack-dev-middleware": "^5.3.1",
         "ws": "^8.4.2"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "ajv-keywords": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.3"
-          }
-        },
-        "ansi-regex": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-          "dev": true
-        },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-          "dev": true
-        },
-        "schema-utils": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
-          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.9",
-            "ajv": "^8.8.0",
-            "ajv-formats": "^2.1.1",
-            "ajv-keywords": "^5.0.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
-          "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+        "ws": {
+          "version": "8.8.1",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.1.tgz",
+          "integrity": "sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==",
           "dev": true,
-          "requires": {
-            "ansi-regex": "^6.0.1"
-          }
+          "requires": {}
         }
       }
     },
@@ -6497,6 +14694,32 @@
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
         "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        }
       }
     },
     "wrappy": {
@@ -6506,10 +14729,11 @@
       "dev": true
     },
     "ws": {
-      "version": "8.5.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
-      "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
-      "dev": true
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "dev": true,
+      "requires": {}
     },
     "y18n": {
       "version": "5.0.8",
@@ -6548,14 +14772,6 @@
         "decamelize": "^4.0.0",
         "flat": "^5.0.2",
         "is-plain-obj": "^2.1.0"
-      },
-      "dependencies": {
-        "is-plain-obj": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
-          "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
-          "dev": true
-        }
       }
     },
     "yocto-queue": {
diff --git a/package.json b/package.json
index 6f7dcf06..0a8e17c2 100644
--- a/package.json
+++ b/package.json
@@ -8,15 +8,23 @@
   "main": "build/three-mesh-ui.min.js",
   "module": "build/three-mesh-ui.module.js",
   "types": "build/types/three-mesh-ui.d.ts",
+  "exports": {
+    ".": {
+      "import": "./build/three-mesh-ui.module.js"
+    },
+    "./examples/*": "./examples/*"
+  },
   "scripts": {
     "test": "karma start --single-run --browsers ChromeHeadless config/karma.conf.js",
     "lint": "eslint -c config/codestyle/.eslintrc src examples",
+    "dts": "npx tsc",
+    "strip": "npx ./config/scripts/tsc-strip-internals.js",
     "tdd:test": "karma start --auto-watch --browsers ChromeHeadless config/karma.conf.js",
     "tdd:build": "npx webpack --config config/webpack.config.test.js --watch",
-    "build": "npx webpack --config config/webpack.config.js",
-    "build-site": "npx webpack --config config/webpack.prodConfig.js --env NODE_ENV=prod",
-    "start": "webpack-dev-server --config config/webpack.prodConfig.js --open --env NODE_ENV=dev",
-    "heroku-postbuild": "npx webpack --config config/webpack.prodConfig.js --env NODE_ENV=prod"
+    "build": "npx webpack --config webpack.config.js",
+    "build-site": "npx webpack --config examples/webpack.config.js --env NODE_ENV=prod",
+    "start": "webpack-dev-server --config examples/webpack.config.js --open --env NODE_ENV=dev",
+    "heroku-postbuild": "npx webpack --config examples/webpack.prodConfig.js --env NODE_ENV=prod"
   },
   "repository": {
     "type": "git",
@@ -58,6 +66,7 @@
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-mocha": "^2.0.1",
     "karma-mocha-reporter": "^2.2.5",
+    "lil-gui": "^0.17.0",
     "mocha": "^9.2.2",
     "typescript": "^4.6.3",
     "webpack": "^5.70.0",
@@ -65,6 +74,6 @@
     "webpack-dev-server": "^4.7.4"
   },
   "peerDependencies": {
-    "three": "^0.132.1"
+    "three": ">= 0.132.1 < 0.149.0"
   }
 }
diff --git a/src/components/Block.js b/src/components/Block.js
deleted file mode 100644
index 36da32fd..00000000
--- a/src/components/Block.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import { Vector2 } from 'three';
-
-import BoxComponent from './core/BoxComponent.js';
-
-import Frame from '../frame/Frame.js';
-import FrameMaterial from '../frame/materials/FrameMaterial';
-import FrameMaterialUtils from '../frame/utils/FrameMaterialUtils';
-
-/**
-
-Job:
-- Update a Block component
-- Calls BoxComponent's API to position its children box components
-- Calls InlineManager's API to position its children inline components
-- Call creation and update functions of its background planes
- */
-
-
-
-export default class Block extends BoxComponent {
-
-	constructor( options ) {
-
-		super( options );
-
-		this.isBlock = true;
-
-		//
-
-		this.size = new Vector2( 1, 1 );
-
-		// this._main = new Frame( this.getBackgroundMaterial() );
-		this._material = new FrameMaterial();
-
-		/**
-		 *
-		 * @type {Frame}
-		 * @protected
-		 */
-		this._main = new Frame( this._material );
-
-		this._materialMediation = { ...FrameMaterialUtils.mediation };
-
-		// This is for hiddenOverflow to work
-		this._main.onBeforeRender = () => {
-
-			if ( this.updateClippingPlanes ) {
-
-				this.updateClippingPlanes();
-
-			}
-
-		};
-
-		this.add( this._main );
-
-		// Lastly set the options parameters to this object, which will trigger an update
-
-		this.set( options );
-
-		this._transferToMaterial();
-
-	}
-
-	get frame() { return this._main; }
-	////////////
-	//  UPDATE
-	////////////
-
-	parseParams() {}
-
-	updateLayout() {
-
-		// Get temporary dimension
-		this.computeBoxProperties();
-
-		this._borderRadiusComponent.updateValue(null, this.offsetWidth, this.offsetHeight);
-
-		this._borderWidthComponent.updateValue(null, this.offsetWidth, this.offsetHeight);
-
-		const WIDTH = this.offsetWidth;
-		const HEIGHT = this.offsetHeight;
-
-		if ( !WIDTH || !HEIGHT ) {
-
-			console.warn( 'Block got no dimension from its parameters or from children parameters' );
-			return;
-
-		}
-
-		this.size.set( WIDTH, HEIGHT );
-		this._main.scale.set( WIDTH, HEIGHT, 1 );
-
-
-
-		// if ( this._main ) this.updateBackgroundMaterial();
-
-		this._main.renderOrder = this.getParentsNumber();
-
-		// Position this element according to earlier parent computation.
-		// Delegate to BoxComponent.
-
-		if ( this.autoLayout ) {
-
-			this.setPosFromParentRecords();
-
-		}
-
-		// Position inner elements according to dimensions and layout parameters.
-		// Delegate to BoxComponent.
-
-		if ( this.childrenInlines.length ) {
-
-			this.computeInlinesPosition();
-
-		}
-
-		this.computeChildrenPosition();
-
-		// We check if this block is the root component,
-		// because most of the time the user wants to set the
-		// root component's z position themselves
-		if ( this.parentUI ) {
-
-			this.position.z = this.getOffset();
-
-		}
-
-	}
-
-	//
-
-	updateInner() {
-
-		// We check if this block is the root component,
-		// because most of the time the user wants to set the
-		// root component's z position themselves
-		if ( this.parentUI ) {
-
-			this.position.z = this.getOffset();
-
-		}
-
-		// UV units - proportional
-		const sX = this.offsetWidth > this.offsetHeight ? this.offsetHeight/this.offsetWidth : 1;
-		const sY = this.offsetWidth < this.offsetHeight ? this.offsetWidth/this.offsetHeight : 1;
-		this._borderRadiusComponent.process(sX, sY);
-
-		// if ( this._main ) this.updateBackgroundMaterial();
-
-	}
-
-}
diff --git a/src/components/InlineBlock.js b/src/components/InlineBlock.js
deleted file mode 100644
index 3833b969..00000000
--- a/src/components/InlineBlock.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import { Color, Vector2 } from 'three';
-
-import Frame from '../frame/Frame.js';
-import FrameMaterial from '../frame/materials/FrameMaterial';
-import FrameMaterialUtils from '../frame/utils/FrameMaterialUtils';
-import Inline from './core/Inline';
-import MeshUIComponent from './core/MeshUIComponent';
-
-/**
- * Job:
- * - computing its own size according to user measurements or content measurement
- * - creating an 'inlines' object with info, so that the parent component can organise it along with other inlines
- *
- * Knows:
- * - Its measurements parameter
- * - Parent block
- */
-export default class InlineBlock extends MeshUIComponent {
-
-	constructor( options ) {
-
-		super( options );
-
-		this.isInline = true;
-		this.isInlineBlock = true;
-
-		//
-
-		this.size = new Vector2( 1, 1 );
-
-		this._material = new FrameMaterial();
-		this._main = new Frame( this._material );
-
-		this._materialMediation = { ...FrameMaterialUtils.mediation };
-
-		// This is for hiddenOverflow to work
-		this._main.onBeforeRender = () => {
-
-			if ( this.updateClippingPlanes ) {
-
-				this.updateClippingPlanes();
-
-			}
-
-		};
-
-		this.add( this._main );
-
-		// Lastly set the options parameters to this object, which will trigger an update
-
-		if( options.backgroundOpacity === undefined ){
-
-			options.backgroundOpacity = 1.0
-
-		}
-
-		if( options.backgroundColor === undefined && options.backgroundTexture ) {
-
-			options.backgroundColor = new Color(0xffffff);
-
-		}
-
-		// Add an object that can be seen and CharacterInline
-		this.inline = new InlineBlockInline(this);
-		this.inlines = [ this.inline ];
-
-		this.set( options );
-
-		this._transferToMaterial();
-
-	}
-
-	///////////
-	// UPDATES
-	///////////
-
-	parseParams(){
-
-	}
-
-	/**
-	 * Create text content
-	 *
-	 * At this point, text.inlines should have been modified by the parent
-	 * component, to add xOffset and yOffset properties to each inlines.
-	 * This way, TextContent knows were to position each character.
-	 *
-	 */
-	updateLayout() {
-
-		const PADDING = this._padding.w + this._padding.y;
-		const WIDTH = this.inlineWidth;
-		const HEIGHT = this.inlineHeight;
-
-
-		// basic translation to put the plane's left bottom corner at the center of its space
-		// this.position.set( WIDTH / 2 , HEIGHT / 2, 0 );
-		this.position.set( (WIDTH + PADDING)/2, HEIGHT / 2, 0 );
-
-		// translation required by inlineManager to position this component inline
-		this.position.x += this.inline.offsetX;
-		this.position.y += this.inline.offsetY;
-
-		this.position.y += this.inline.anchor;
-
-		this.size.set( WIDTH, HEIGHT );
-		this._main.scale.set( WIDTH, HEIGHT, 1 );
-
-		this._main.renderOrder = this.getParentsNumber();
-
-		this.position.z = this.getOffset();
-
-	}
-
-	//
-
-	updateInner() {
-
-	}
-
-	/*********************************************************************************************************************
-	 * POVIDES INLINE SIZING
-	 ********************************************************************************************************************/
-
-	/**
-	 *
-	 * @return {number}
-	 */
-	get inlineXAdvance(){
-
-		const pad = this._padding.w + this._padding.y;
-		return (this.width || 0.3) + pad;
-
-	}
-
-	/**
-	 *
-	 * @return {number}
-	 */
-	get inlineWidth() {
-
-		return this.width || 0.3;
-
-	}
-
-	/**
-	 *
-	 * @return {number}
-	 */
-	get inlineHeight() {
-
-		return this.height || 0.3;
-
-	}
-
-}
-
-/**
- * InlineBlock has its own Inline implementation
- */
-class InlineBlockInline extends Inline {
-
-	/**
-	 *
-	 * @param {InlineBlock} parent
-	 */
-	constructor( parent ) {
-
-		super();
-
-		/**
-		 * @TODO: This currently make a circular reference that should ideally be removed
-		 * @type {InlineBlock}
-		 * @private
-		 */
-		this._parent = parent;
-
-	}
-
-	/**
-	 * Rely on the parent for size computation
-	 * @override
-	 * @returns {number}
-	 */
-	get xadvance() { return this._parent.inlineXAdvance; }
-
-	/**
-	 * Rely on the parent for size computation
-	 * @override
-	 * @returns {number}
-	 */
-	get width() { return this._parent.inlineWidth; }
-
-	/**
-	 * Rely on the parent for size computation
-	 * @override
-	 * @returns {number}
-	 */
-	get height() { return this._parent.inlineHeight; }
-
-
-	/**
-	 * Rely on the parent for size computation
-	 * @override
-	 * @returns {number}
-	 */
-	get lineHeight() { return this._parent.inlineHeight; }
-
-	/**
-	 * Rely on the parent for size computation
-	 * @override
-	 * @returns {number}
-	 */
-	get lineBase() { return this._parent.inlineHeight; }
-
-}
diff --git a/src/components/Keyboard.js b/src/components/Keyboard.js
deleted file mode 100644
index 4b578e96..00000000
--- a/src/components/Keyboard.js
+++ /dev/null
@@ -1,340 +0,0 @@
-import { TextureLoader } from 'three';
-
-import BoxComponent from './core/BoxComponent.js';
-
-import Block from './Block.js';
-import Text from './Text.js';
-import InlineBlock from './InlineBlock.js';
-
-import keymaps from '../utils/Keymaps.js';
-
-//
-
-const textureLoader = new TextureLoader();
-
-//
-
-/**
- * Job: high-level component that returns a keyboard
- */
-export default class Keyboard extends BoxComponent {
-
-	constructor( options ) {
-
-		// DEFAULTS
-
-		if ( !options ) options = {};
-		if ( !options.width ) options.width = 1;
-		if ( !options.height ) options.height = 0.4;
-		if ( !options.margin ) options.margin = 0.003;
-		if ( !options.padding ) options.padding = 0.01;
-
-		//
-
-		super( options );
-
-		this.currentPanel = 0;
-
-		this.isLowerCase = true;
-
-		this.charsetCount = 1;
-
-		//////////
-		// KEYMAP
-		//////////
-
-		// ../utils/Keymaps contains information about various keyboard layouts
-		// We select one depending on the user's browser language if
-		// there is no options.language
-
-		let keymap;
-
-		if ( options.language || navigator.language ) {
-
-			switch ( options.language || navigator.language ) {
-
-				case 'fr' :
-				case 'fr-CH' :
-				case 'fr-CA' :
-					keymap = keymaps.fr;
-					break;
-
-				case 'ru' :
-					this.charsetCount = 2;
-					keymap = keymaps.ru;
-					break;
-
-				case 'de' :
-				case 'de-DE' :
-				case 'de-AT' :
-				case 'de-LI' :
-				case 'de-CH' :
-					keymap = keymaps.de;
-					break;
-
-				case 'es' :
-				case 'es-419' :
-				case 'es-AR' :
-				case 'es-CL' :
-				case 'es-CO' :
-				case 'es-ES' :
-				case 'es-CR' :
-				case 'es-US' :
-				case 'es-HN' :
-				case 'es-MX' :
-				case 'es-PE' :
-				case 'es-UY' :
-				case 'es-VE' :
-					keymap = keymaps.es;
-					break;
-
-				case 'el' :
-					this.charsetCount = 2;
-					keymap = keymaps.el;
-					break;
-
-				case 'nord' :
-					keymap = keymaps.nord;
-					break;
-
-				default :
-					keymap = keymaps.eng;
-					break;
-
-			}
-
-		} else {
-
-			keymap = keymaps.eng;
-
-		}
-
-		////////////////////
-		// BLOCKS CREATION
-		////////////////////
-
-		// PANELS
-
-		this.keys = [];
-
-		this.panels = keymap.map( ( panel ) => {
-
-			const lineHeight = ( options.height / panel.length ) - ( options.margin * 2 );
-
-			const panelBlock = new Block( {
-				width: options.width + ( options.padding * 2 ),
-				height: options.height + ( options.padding * 2 ),
-				offset: 0,
-				padding: options.padding,
-				fontFamily: options.fontFamily,
-				fontTexture: options.fontTexture,
-				backgroundColor: options.backgroundColor,
-				backgroundOpacity: options.backgroundOpacity
-			} );
-
-			panelBlock.charset = 0;
-
-			panelBlock.add( ...panel.map( ( line ) => {
-
-				const lineBlock = new Block( {
-					width: options.width,
-					height: lineHeight,
-					margin: options.margin,
-					contentDirection: 'row',
-					justifyContent: 'center'
-				} );
-
-				lineBlock.frame.visible = false;
-
-				const keys = [];
-
-				line.forEach( ( keyItem ) => {
-
-					const key = new Block( {
-						width: ( options.width * keyItem.width ) - ( options.margin * 2 ),
-						height: lineHeight,
-						margin: options.margin,
-						justifyContent: 'center',
-						offset: 0
-					} );
-
-					const char = keyItem.chars[ panelBlock.charset ].lowerCase || keyItem.chars[ panelBlock.charset ].icon || 'undif';
-
-					if (
-						( char === 'enter' && options.enterTexture ) ||
-						( char === 'shift' && options.shiftTexture ) ||
-						( char === 'backspace' && options.backspaceTexture )
-					) {
-
-						const url = ( () => {
-
-							switch ( char ) {
-
-								case 'backspace':
-									return options.backspaceTexture;
-								case 'enter':
-									return options.enterTexture;
-								case 'shift':
-									return options.shiftTexture;
-								default:
-									console.warn( 'There is no icon image for this key' );
-
-							}
-
-						} )();
-
-						textureLoader.load( url, ( texture ) => {
-
-							key.add(
-								new InlineBlock( {
-									width: key.width * 0.65,
-									height: key.height * 0.65,
-									backgroundSize: 'contain',
-									backgroundTexture: texture
-								} )
-							);
-
-						} );
-
-					} else {
-
-						key.add(
-							new Text( {
-								content: char,
-								offset: 0
-							} )
-						);
-
-					}
-
-					key.type = 'Key';
-
-					key.info = keyItem;
-					key.info.input = char;
-					key.panel = panelBlock;
-
-					// line's keys
-					keys.push( key );
-
-					// keyboard's keys
-					this.keys.push( key );
-
-				} );
-
-				lineBlock.add( ...keys );
-
-				return lineBlock;
-
-			} ) );
-
-			return panelBlock;
-
-		} );
-
-		this.add( this.panels[ 0 ] );
-
-		// Lastly set the options parameters to this object, which will trigger an update
-		this.set( options );
-
-	}
-
-	/**
-	 * Used to switch to an entirely different panel of this keyboard,
-	 * with potentially a completely different layout
-	 */
-	setNextPanel() {
-
-		this.panels.forEach( ( panel ) => {
-
-			this.remove( panel );
-
-		} );
-
-		this.currentPanel = ( this.currentPanel + 1 ) % ( this.panels.length );
-
-		this.add( this.panels[ this.currentPanel ] );
-
-		this.update( true, true, true );
-
-	}
-
-	/*
-	 * Used to change the keys charset. Some layout support this,
-	 * like the Russian or Greek keyboard, to be able to switch to
-	 * English layout when necessary
-	 */
-	setNextCharset() {
-
-		this.panels[ this.currentPanel ].charset = ( this.panels[ this.currentPanel ].charset + 1 ) % this.charsetCount;
-
-		this.keys.forEach( ( key ) => {
-
-			// Here we sort the keys, we only keep the ones that are part of the current panel.
-
-			const isInCurrentPanel = this.panels[ this.currentPanel ].getObjectById( key.id );
-
-			if ( !isInCurrentPanel ) return;
-
-			//
-
-			const char = key.info.chars[ key.panel.charset ] || key.info.chars[ 0 ];
-
-			const newContent = this.isLowerCase || !char.upperCase ? char.lowerCase : char.upperCase;
-
-			if ( !key.childrenTexts.length ) return;
-
-			const textComponent = key.childrenTexts[0];
-
-			key.info.input = newContent;
-
-			textComponent.set( {
-				content: newContent
-			} );
-
-			textComponent.update( true, true, true );
-
-		} );
-
-	}
-
-	/** Toggle case for characters that support it. */
-	toggleCase() {
-
-		this.isLowerCase = !this.isLowerCase;
-
-		this.keys.forEach( ( key ) => {
-
-			const char = key.info.chars[ key.panel.charset ] || key.info.chars[ 0 ];
-
-			const newContent = this.isLowerCase || !char.upperCase ? char.lowerCase : char.upperCase;
-
-			if ( !key.childrenTexts.length ) return;
-
-			const textComponent = key.childrenTexts[0];
-
-			key.info.input = newContent;
-
-			textComponent.set( {
-				content: newContent
-			} );
-
-			textComponent.update( true, true, true );
-
-		} );
-
-	}
-
-	////////////
-	//  UPDATE
-	////////////
-
-	parseParams() {
-	}
-
-	updateLayout() {
-	}
-
-	updateInner() {
-	}
-
-}
diff --git a/src/components/Text.js b/src/components/Text.js
deleted file mode 100644
index e7586383..00000000
--- a/src/components/Text.js
+++ /dev/null
@@ -1,369 +0,0 @@
-import { Mesh } from 'three';
-
-import FontLibrary from '../font/FontLibrary.js';
-
-import deepDelete from '../utils/deepDelete.js';
-import * as Whitespace from '../utils/inline-layout/Whitespace';
-import FontFamily from '../font/FontFamily';
-import { mergeBufferGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils';
-
-
-//JSDoc related imports
-/* eslint-disable no-unused-vars */
-import MSDFTypographicGlyph from '../font/msdf/MSDFTypographicGlyph';
-import MSDFInlineGlyph from '../font/msdf/MSDFInlineGlyph';
-import FontVariant from '../font/FontVariant';
-import { Material } from 'three';
-import MeshUIComponent from './core/MeshUIComponent';
-/* eslint-enable no-unused-vars */
-
-/**
-
-Job:
-- computing its own size according to user measurements or content measurement
-- creating 'inlines' objects with info, so that the parent component can organise them in lines
-
-Knows:
-- Its text content (string)
-- Font attributes ('font', 'fontSize'.. etc..)
-- Parent block
- */
-
-
-export default class Text extends MeshUIComponent {
-
-	constructor( options ) {
-
-		super( options );
-
-		this.isInline = true;
-		this.isText = true;
-
-		// adds internal properties
-		/**
-		 *
-		 * @type {string[]}
-		 * @private
-		 */
-		this._textContent = null;
-
-		/**
-		 *
-		 * @type {MSDFTypographicGlyph[]}
-		 * @private
-		 */
-		this._textContentGlyphs = null;
-
-		/**
-		 *
-		 * @type {MSDFInlineGlyph[]}
-		 * @private
-		 */
-		this._textContentInlines = null;
-
-		this.set( options );
-
-		this.addEventListener( 'added', this._acquireFont );
-
-	}
-
-	/**
-	 * Trigger some update when the font is ready
-	 * @private
-	 */
-	_handleFontVariantReady = () => {
-
-		this._transferToMaterial();
-
-		// request parse update and parent layout
-		this.update( true, true, false );
-		this.getHighestParent().update( false, true, false );
-
-		// remove the listener
-		this._font.removeEventListener( 'ready', this._handleFontVariantReady );
-
-	};
-
-	/**
-	 * When adding a text to a parent ui element,
-	 * acquire parent font, if needed
-	 * @private
-	 */
-	_acquireFont = () => {
-
-		if( !this._font ) {
-
-			let fontFamily = this.getFontFamily();
-			if ( fontFamily ) {
-
-				if ( fontFamily instanceof FontFamily ) {
-
-					this.font = fontFamily.getVariant( this.getFontWeight(), this.getFontStyle() );
-
-				} else {
-
-					// Set from old way, check if that family is already registered
-					const fontName = fontFamily.pages ? fontFamily.info.face : fontFamily;
-					fontFamily = FontLibrary.getFontFamily( fontName );
-					if ( fontFamily ) {
-
-						this.font = fontFamily.getVariant( this.getFontWeight(), this.getFontStyle() );
-
-					}
-
-				}
-
-			}
-
-		}
-
-	}
-
-	_onBeforeRender = () => {
-
-			if ( this.updateClippingPlanes ) {
-
-				this.updateClippingPlanes();
-
-			}
-
-	}
-
-	/*******************************************************************************************************************
-	 * GETTERS - SETTERS
-	 ******************************************************************************************************************/
-
-	/**
-	 * @override
-	 * @param {FontVariant} value
-	 */
-	set font( value ) {
-
-		// if a previous font isset, be sure no event remains
-		if ( this._font && !this._font.isReady ) {
-
-			this._font.removeEventListener( 'ready', this._handleFontVariantReady );
-
-		}
-
-		this._font = value;
-
-		// new font, means rebuild inlines, now or soon
-		if ( !this._font.isReady ) {
-
-			this.inlines = null;
-			this._font.addEventListener( 'ready', this._handleFontVariantReady );
-
-		} else {
-
-			this._handleFontVariantReady();
-
-		}
-
-		// update font material according to font variant
-		if( !this._material ) {
-
-			this.material = new this._font.fontMaterial();
-
-		} else {
-
-
-
-			// @TODO :	Only recreate a material instance if needed,
-			//  				prevent user that its custom material may no longer be compatible with update fontVariant implementation
-			const isDefaultMaterial = this._material.isDefault && this._material.isDefault();
-			if( isDefaultMaterial && !(this._material instanceof this._font.fontMaterial) ) {
-
-				this.material = new this._font.fontMaterial();
-
-			} else {
-
-				this._transferToMaterial();
-
-			}
-
-		}
-
-	}
-
-
-	_buildContentKernings(){
-
-		// apply kerning
-		if ( this.getFontKerning() !== 'none' ) {
-
-			// First character won't be kerned with its void lefthanded peer
-			for ( let i = 1; i < this._textContent.length; i++ ) {
-
-				const glyphPair = this._textContent[ i - 1 ] + this._textContent[ i ];
-
-				// retrieve the kerning from the font
-				// as set it on the characterInline
-				this._textContentInlines[ i ].kerning = this._font.getKerningAmount( glyphPair );
-
-			}
-		}
-
-	}
-
-
-	///////////
-	// UPDATES
-	///////////
-
-
-	/**
-	 * Here we compute each glyph dimension, and we store it in this
-	 * component's inlines parameter. This way the parent Block will
-	 * compute each glyph position on updateLayout.
-	 */
-	parseParams() {
-
-		this._acquireFont();
-
-		if( !this.content || this.content.length === 0 ) return;
-
-		// won't parse without font or unready font
-		if( !this._font || !this._font.isReady ) return;
-
-		// Apply whitespace on string characters themselves.
-		// Will possibly :
-		//  - l/r trim whitespace
-		//  - collapse whitespace sequences
-		//  - remove newlines / tabulations
-		this._textContent = Whitespace.collapseWhitespaceOnString( this.content, this.getWhiteSpace() );
-
-		// Now that we know exactly which characters will be printed
-		// Store the character description ( typographic properties )
-		this._textContentGlyphs = this._textContent.split( '' ).map( ( char ) => this._font.getTypographicGlyph( char ) );
-
-		// And from the descriptions ( which are static/freezed per character per font )
-		// Build the inline
-		this._textContentInlines = this._textContentGlyphs.map( ( glyphBox ) => glyphBox.asInlineGlyph() );
-		this._buildContentKernings();
-
-		// Apply margin and padding on first and last inlines
-		if( this._textContentInlines.length ) {
-
-			// First gets left side
-			this._textContentInlines[0].paddingLeft = this._padding.w;
-			this._textContentInlines[0].marginLeft = this._margin.w;
-
-			// Last gets right side
-			const lastIndex = this._textContentInlines.length - 1;
-			this._textContentInlines[lastIndex].paddingRight = this._padding.y;
-			this._textContentInlines[lastIndex].marginRight = this._margin.y;
-
-		}
-
-
-		this.inlines = this._textContentInlines;
-
-
-		// this.calculateInlines( this._fitFontSize || this.getFontSize() );
-		this.calculateInlines( this._fitFontSize || this.getFontSize() );
-
-	}
-
-	/**
-	 * Create text content
-	 *
-	 * At this point, text.inlines should have been modified by the parent
-	 * component, to add xOffset and yOffset properties to each inlines.
-	 * This way, TextContent knows were to position each character.
-	 */
-	updateLayout() {
-
-		deepDelete( this );
-
-		if ( this.inlines ) {
-
-			const charactersAsGeometries = this.inlines.map(
-				inline =>
-					this._font.getGeometricGlyph( inline, this.getSegments() )
-						.translate( inline.offsetX, inline.offsetY, 0 )
-
-			);
-
-			const mergedGeom = mergeBufferGeometries( charactersAsGeometries );
-
-			// console.log(this.uuid);
-
-			this._main = new Mesh( mergedGeom, this._material );
-			if( this.customDepthMaterial ){
-
-				this._main.customDepthMaterial = this.customDepthMaterial;
-
-			}
-
-			this._transferToMesh();
-
-			this._main.renderOrder = Infinity;
-
-			// This is for hiddenOverflow to work
-			this._main.onBeforeRender = this._onBeforeRender
-
-			this.add( this._main );
-
-		}
-
-	}
-
-	updateInner() {
-
-	}
-
-	calculateInlines( fontSize ) {
-
-		// Abort conditions
-		if ( !this._font || !this._font.isReady ) return;
-		if ( !this._textContent) return;
-
-		const whiteSpace = this.getWhiteSpace();
-		const newLineBreakability = Whitespace.newlineBreakability( whiteSpace )
-
-		const breakChars = this.getBreakOn();
-
-		const SCALE_MULT = fontSize / this._font.typographic.size;
-
-		// update inlines properties before inline placements in lines
-		for ( let i = 0; i < this._textContent.length; i++ ) {
-
-			const char = this._textContent[ i ];
-
-			/**
-			 *
-			 * @type {MSDFInlineGlyph}
-			 */
-			const inline = this._textContentInlines[ i ];
-
-			inline.resetOffsets();
-
-			// Whitespace Breakability ---------------------------------------------------------------------------------------
-			let lineBreak = null;
-			if ( whiteSpace !== Whitespace.NOWRAP ) {
-
-				if ( breakChars.includes( char ) || char.match( /\s/g ) ) lineBreak = 'possible';
-
-			}
-
-			if ( char.match( /\n/g ) ) {
-
-				lineBreak = newLineBreakability;
-
-			}
-
-			inline.lineBreak = lineBreak;
-
-			// --------------------------------------------------------------------------------------  Whitespace Breakability
-
-			inline.fontSize = fontSize;
-
-			inline.fontFactor = SCALE_MULT;
-
-
-		}
-
-	}
-
-}
diff --git a/src/components/core/BoxComponent.js b/src/components/core/BoxComponent.js
deleted file mode 100644
index e96a87fa..00000000
--- a/src/components/core/BoxComponent.js
+++ /dev/null
@@ -1,338 +0,0 @@
-/**
-
-Job: Handle everything related to a BoxComponent element dimensioning and positioning
-
-Knows: Parents and children dimensions and positions
-
-It's worth noting that in three-mesh-ui, it's the parent Block that computes
-its children position. A Block can only have either only box components (Block)
-as children, or only inline components (Text, InlineBlock).
-
- */
-
-import { COLUMN, COLUMN_REVERSE, contentDirection, ROW, ROW_REVERSE } from '../../utils/block-layout/ContentDirection';
-import { alignItems } from '../../utils/block-layout/AlignItems';
-import { justifyContent } from '../../utils/block-layout/JustifyContent';
-import InlineManager from './InlineManager';
-import { padItems } from '../../utils/block-layout/Padding';
-
-export default class BoxComponent extends InlineManager {
-
-
-		constructor( options ) {
-
-			super( options );
-
-			this.isBoxComponent = true;
-			this.childrenPos = {};
-
-			// Box properties only update once per update layout
-			this.offsetWidth = 0;
-			this.offsetHeight = 0;
-			this.innerWidth = 0;
-			this.innerHeight = 0;
-
-			this.centerX = 0;
-			this.centerY = 0;
-
-		}
-
-	/**
-	 *
-	 */
-	computeBoxProperties() {
-
-			this.offsetWidth = this.getOffsetWidth();
-			this.offsetHeight = this.getOffsetHeight();
-
-			this.innerWidth = this.getInnerWidth();
-			this.innerHeight = this.getInnerHeight();
-
-			this.centerX = this.getCenterX();
-			this.centerY = this.getCenterY();
-
-		}
-
-
-	/**
-	 * Return the sum of all this component's children sides + their margin
-	 * @param {string} side
-	 * @return {number}
-	 */
-		getChildrenSideSum( side ) {
-
-			return this.childrenBoxes.reduce( ( accu, child ) => {
-
-				const CHILD_SIZE = ( side === 'width' ) ?
-					( child.getOffsetWidth() + child._margin.y + child._margin.w  ) :
-					( child.getOffsetHeight() + child._margin.x + child._margin.z );
-
-				return accu + CHILD_SIZE;
-
-			}, 0 );
-
-		}
-
-		/**
-		 * Look in parent record what is the instructed position for this component, then set its position
-		 **/
-		setPosFromParentRecords() {
-
-			if ( this.parentUI && this.parentUI.childrenPos[ this.id ] ) {
-
-				this.position.x = this.parentUI.childrenPos[ this.id ].x;
-				this.position.y = this.parentUI.childrenPos[ this.id ].y;
-
-			}
-
-		}
-
-		/**
-		 * Position inner elements according to dimensions and layout parameters.
-		 * */
-		computeChildrenPosition() {
-
-			if ( this.childrenUIs.length > 0 ) {
-
-				const DIRECTION = this.getContentDirection();
-				const ALIGNMENT = this.getAlignItems();
-
-				let directionalOffset;
-
-
-				switch ( DIRECTION ) {
-
-					case ROW :
-						directionalOffset = -this.innerWidth / 2;
-						break;
-
-					case ROW_REVERSE :
-						directionalOffset = this.innerWidth / 2;
-						break;
-
-					case COLUMN :
-						directionalOffset = this.innerHeight / 2;
-						break;
-
-					case COLUMN_REVERSE :
-						directionalOffset = -this.innerHeight / 2;
-						break;
-
-				}
-
-
-				const REVERSE = -Math.sign( directionalOffset );
-
-				contentDirection( this, DIRECTION, directionalOffset, REVERSE );
-				justifyContent( this, DIRECTION, directionalOffset, REVERSE );
-				alignItems( this, DIRECTION );
-				padItems( this, DIRECTION, ALIGNMENT );
-
-			}
-
-		}
-
-
-	/**
-	 * Returns the highest linear dimension among all the children of the passed component
-	 * MARGIN INCLUDED
-	 * @param {string} direction
-	 * @return {number}
-	 */
-		getHighestChildSizeOn( direction ) {
-
-			return this.childrenBoxes.reduce( ( accu, child ) => {
-
-				const maxSize = direction === 'width' ?
-					child.getOffsetWidth() + child._margin.y + child._margin.w :
-					child.getOffsetHeight() + child._margin.x + child._margin.z;
-
-				return Math.max( accu, maxSize );
-
-			}, 0 );
-
-		}
-
-	/**
-	 * Obtain the outer width according to box-sizing
-	 * @return {number}
-	 */
-		getOffsetWidth() {
-
-			const base = this.getStretchedWidth() || this.width || this.getAutoWidth();
-			if ( this.getBoxSizing() === 'border-box' ) {
-
-				return base;
-
-			}
-
-			return base + this._padding.y + this._padding.w + this._borderWidth.y + this._borderWidth.w;
-
-		}
-
-	/**
-	 * Obtain the outer height according to box-sizing
-	 * @return {number}
-	 */
-	getOffsetHeight() {
-
-		const base = this.getStretchedHeight() || this.height || this.getAutoHeight();
-
-		if ( this.getBoxSizing() === 'border-box' ) {
-
-			return base;
-
-		}
-
-		return base + this._padding.x + this._padding.z + this._borderWidth.x + this._borderWidth.z;
-
-	}
-
-	/**
-	 * Obtain the inner width according to box-sizing
-	 * @return {number}
-	 */
-	getInnerWidth() {
-
-		const base = this.width || this.getAutoWidth();
-
-		if ( this.getBoxSizing() === 'border-box' ) {
-
-			return base - ( this._padding.y + this._padding.w + this._borderWidth.y + this._borderWidth.w );
-
-		}
-
-		return base;
-
-	}
-
-	/**
-	 * Obtain the inner height according to box-sizing
-	 * @return {number}
-	 */
-	getInnerHeight() {
-
-		const base = this.height || this.getAutoHeight();
-
-		if ( this.getBoxSizing() === 'border-box' ) {
-
-			return base - (this._padding.x + this._padding.z + this._borderWidth.x + this._borderWidth.z );
-
-		}
-
-		return base;
-
-	}
-
-
-		getBoxSizing() { return this.boxSizing || 'border-box'; }
-
-	/**
-	 * Retrieve the center X according to box sized dimensions
-	 * @return {number}
-	 */
-	getCenterX() {
-		const leftSide = this._padding.w + this._borderWidth.w;
-		const rightSide = this._padding.y + this._borderWidth.y;
-
-		return (leftSide - rightSide ) / 2;
-	}
-
-	/**
-	 * Retrieve the center Y according to box sized dimensions
-	 * @return {number}
-	 */
-	getCenterY() {
-		const topSide = this._padding.x + this._borderWidth.x;
-		const bottomSide = this._padding.z + this._borderWidth.z;
-
-		return ( bottomSide - topSide ) / 2;
-	}
-
-
-	/**
-	 * Retrieve the automatic height from children boxes
-	 * @return {number}
-	 */
-	getAutoHeight() {
-
-		const DIRECTION = this.getContentDirection();
-
-		switch ( DIRECTION ) {
-
-			case 'row' :
-			case 'row-reverse' :
-				return this.getHighestChildSizeOn( 'height' );
-
-
-			case 'column' :
-			case 'column-reverse' :
-				return this.getChildrenSideSum( 'height' );
-
-			default :
-				console.error( `Invalid contentDirection : ${DIRECTION}` );
-				break;
-
-		}
-
-	}
-
-	/**
-	 *
-	 * @return {number}
-	 */
-	getAutoWidth() {
-
-		const DIRECTION = this.getContentDirection();
-
-		switch ( DIRECTION ) {
-
-			case 'row' :
-			case 'row-reverse' :
-				return this.getChildrenSideSum( 'width' );
-
-
-			case 'column' :
-			case 'column-reverse' :
-				return this.getHighestChildSizeOn( 'width' );
-
-			default :
-				console.error( `Invalid contentDirection : ${DIRECTION}` );
-				break;
-
-		}
-
-	}
-
-	/**
-	 *
-	 * @return {number}
-	 */
-	getStretchedHeight(){
-
-		if( this.parentUI && this.parentUI.getAlignItems() === 'stretch' && this.parentUI.getContentDirection().indexOf('row') !== -1 ) {
-
-			return this.parentUI.getInnerHeight();
-
-		}
-
-		return 0;
-	}
-
-	/**
-	 *
-	 * @return {number}
-	 */
-	getStretchedWidth(){
-
-		if( this.parentUI && this.parentUI.getAlignItems() === 'stretch' && this.parentUI.getContentDirection().indexOf('column') !== -1 ) {
-
-			return this.parentUI.getInnerWidth();
-
-		}
-
-		return 0;
-	}
-
-}
-
diff --git a/src/components/core/InlineManager.js b/src/components/core/InlineManager.js
deleted file mode 100644
index d37d0e0d..00000000
--- a/src/components/core/InlineManager.js
+++ /dev/null
@@ -1,226 +0,0 @@
-/**
-
-Job: Positioning inline elements according to their dimensions inside this component
-
-Knows: This component dimensions, and its children dimensions
-
-This module is used for Block composition (Object.assign). A Block is responsible
-for the positioning of its inline elements. In order for it to know what is the
-size of these inline components, parseParams must be called on its children first.
-
-It's worth noting that a Text is not positioned as a whole, but letter per letter,
-in order to create a line break when necessary. It's Text that merge the various letters
-in its own updateLayout function.
-
- */
-import * as Whitespace from '../../utils/inline-layout/Whitespace';
-import * as TextAlign from '../../utils/inline-layout/TextAlign';
-import * as InlineJustification from '../../utils/inline-layout/InlineJustification';
-import Line from './Line';
-import Lines from './Lines';
-import MeshUIComponent from './MeshUIComponent';
-
-export default class InlineManager extends MeshUIComponent{
-
-		constructor(options) {
-
-			super(options);
-
-		}
-
-		/** Compute children .inlines objects position, according to their pre-computed dimensions */
-		computeInlinesPosition() {
-
-			// computed by BoxComponent
-			const INNER_WIDTH = this.innerWidth;
-			// const INNER_WIDTH = this.getInnerWidth();
-			const INNER_HEIGHT = this.innerHeight;
-			// const INNER_HEIGHT = this.getInnerHeight();
-
-			// got by MeshUIComponent
-			const JUSTIFICATION = this.getJustifyContent();
-			const ALIGNMENT = this.getTextAlign();
-
-			// Compute lines
-			const lines = this.computeLines();
-
-			/////////////////////////////////////////////////////////////////
-			// Position lines according to justifyContent and contentAlign
-			/////////////////////////////////////////////////////////////////
-
-			// Vertical positioning
-			InlineJustification.justifyInlines( this, lines, JUSTIFICATION, INNER_HEIGHT);
-
-			// Horizontal positioning
-			TextAlign.textAlign( this, lines, ALIGNMENT, INNER_WIDTH );
-
-
-			// Make lines accessible to provide helpful informations
-			this.lines = lines;
-
-		}
-
-		/**
-		 * computes lines based on children's inlines array.
-		 * @private
-		 */
-		computeLines() {
-
-			// computed by BoxComponent
-			const INNER_WIDTH = this.innerWidth;
-			const INTERLINE = this.getInterLine();
-
-			// Will stock the characters of each line, so that we can
-			// correct lines position before to merge
-			const lines = new Lines( new Line() );
-
-			let lastInlineOffset = 0;
-			this.childrenInlines.forEach( ( inlineComponent ) => {
-
-					// Abort condition
-
-					if ( !inlineComponent.inlines ) return;
-
-					//////////////////////////////////////////////////////////////
-					// Compute offset of each children according to its dimensions
-					//////////////////////////////////////////////////////////////
-
-					const FONTSIZE = inlineComponent._fitFontSize || inlineComponent.getFontSize();
-					const LETTERSPACING = inlineComponent.isText ? inlineComponent.getLetterSpacing() * FONTSIZE : 0;
-					const WHITESPACE = inlineComponent.getWhiteSpace();
-					const BREAKON = inlineComponent.getBreakOn();
-
-					const whiteSpaceOptions = {
-						WHITESPACE,
-						LETTERSPACING,
-						BREAKON,
-						INNER_WIDTH
-					}
-
-					lastInlineOffset += inlineComponent._margin.w + inlineComponent._padding.w;
-
-					inlineComponent.inlines.forEach( ( inline, i, inlines ) => {
-
-						const line = lines[lines.length - 1];
-						// Line break
-						const shouldBreak = Whitespace.shouldBreak(inlines,i,lastInlineOffset, whiteSpaceOptions );
-
-						if ( shouldBreak ) {
-
-							lines.push( new Line( inline ) );
-
-							inline.offsetX = inline.xoffset;
-
-							// restart the lastInlineOffset as zero.
-							if ( inline.width === 0 ) {
-								lastInlineOffset = 0;
-								return;
-							}
-
-							// compute lastInlineOffset normally
-							// except for kerning which won't apply
-							// as there is visually no lefthanded glyph to kern with
-							inline.cumulativeWidth = inline.xadvance + LETTERSPACING;
-							lastInlineOffset = inline.cumulativeWidth;
-							return;
-
-						}
-
-						lines[ lines.length - 1 ].push( inline );
-						inline.offsetX = lastInlineOffset + inline.xoffset + inline.kerning;
-
-						inline.cumulativeWidth = inline.xadvance + inline.kerning + LETTERSPACING;
-						lastInlineOffset += inline.cumulativeWidth;
-
-						// in case of lineBreak mandatory
-						if( line.length-1 === 1) {
-
-							if ( line[ line.length - 2 ].width === 0 ) {
-
-								// remove the offset of the character following the newline
-								inline.offsetX -= inline.xoffset;
-								lastInlineOffset -= inline.xoffset;
-
-							}
-
-						}
-
-					} );
-
-					lastInlineOffset += inlineComponent._margin.y + inlineComponent._padding.y;
-
-			} );
-
-			// Compute single line and combined lines dimensions
-			const WHITESPACE = this.getWhiteSpace();
-
-			let width = 0;
-			let lineOffsetY = 0;
-			lines[0].y = 0;
-
-			lines.forEach( ( line, i ) => {
-
-				// starts by processing whitespace, it will return a collapsed left offset
-				const whiteSpaceOffset = Whitespace.collapseWhitespaceOnInlines( line, WHITESPACE );
-
-				//
-				let lineHeight = 0;
-				let lineBase = 0;
-
-				line.forEach( ( inline ) => {
-
-					lineHeight = Math.max( lineHeight, inline.lineHeight );
-					lineBase = Math.max( lineBase, inline.lineBase );
-
-					inline.offsetX -= whiteSpaceOffset;
-
-				});
-
-				line.lineHeight = lineHeight;
-				line.lineBase = lineBase;
-
-				const baseLineDelta = lineHeight - lineBase;
-
-				// process yoffset
-				line.forEach( ( inline ) => {
-
-					inline.offsetY = lineOffsetY - line.lineHeight + baseLineDelta + lines[ 0 ].lineHeight;
-
-				});
-
-				if( i !== 0 ){
-
-					// get the previousLine y and increase
-					line.y =  lines[i-1].y - line.lineHeight - INTERLINE;
-
-				}
-
-				lineOffsetY = lineOffsetY - line.lineHeight - INTERLINE
-
-				//
-
-				line.width = 0;
-				// if this line have inlines
-				if ( line[ 0 ] ) {
-
-					// compute its width: length from firstInline:LEFT to lastInline:RIGHT
-					// only by the length of its extremities
-					const lastInline = line[ line.length - 1 ];
-
-					// Right + Left ( left is negative )
-					line.width = ( lastInline.offsetX + lastInline.cumulativeWidth + lastInline.paddingRight + lastInline.marginRight ) + line[ 0 ].offsetX;
-
-					width = Math.max( width, line.width);
-				}
-
-			} );
-
-			lines.height = Math.abs(lineOffsetY + INTERLINE );
-			lines.width = width;
-
-			return lines;
-
-		}
-
-
-}
diff --git a/src/components/core/MeshUIComponent.js b/src/components/core/MeshUIComponent.js
deleted file mode 100644
index 601d668e..00000000
--- a/src/components/core/MeshUIComponent.js
+++ /dev/null
@@ -1,1513 +0,0 @@
-import { Object3D, Plane, Vector4 } from 'three';
-import { Vector3 } from 'three';
-
-import FontLibrary from '../../font/FontLibrary.js';
-import UpdateManager from './UpdateManager.js';
-
-import DEFAULTS from '../../utils/Defaults.js';
-import FontFamily from '../../font/FontFamily';
-import * as FontWeight from '../../utils/font/FontWeight';
-import * as FontStyle from '../../utils/font/FontStyle';
-import Lines from './Lines';
-
-import Mediator from '../../utils/mediator/Mediator';
-import BorderRadius from '../styles-components/BorderRadius';
-import BorderWidth from '../styles-components/BorderWidth';
-
-//JSDoc related imports
-/* eslint-disable no-unused-vars */
-import { Mesh, Material } from 'three';
-import FontVariant from '../../font/FontVariant';
-/* eslint-enable no-unused-vars */
-
-/**
-
-
-Job:
-- Set this component attributes and call updates accordingly
-- Getting this component attribute, from itself or from its parents
-- Managing this component's states
-
-This is the core module of three-mesh-ui. Every component is composed with it.
-It owns the principal public methods of a component : set, setupState and setState.
-
- */
-
-export default class MeshUIComponent extends Object3D {
-
-	/**
-	 *
-	 * @param {Object.<(string), any>} options
-	 */
-	constructor( options ) {
-
-		super();
-
-		this.states = {};
-		this.currentState = undefined;
-		this.isUI = true;
-		this.autoLayout = true;
-
-		// children
-
-		/**
-		 *
-		 * @type {MeshUIComponent[]}
-		 */
-		this.childrenUIs = [];
-
-		/**
-		 *
-		 * @type {MeshUIComponent[]}
-		 */
-		this.childrenBoxes = [];
-
-		/**
-		 *
-		 * @type {MeshUIComponent[]}
-		 */
-		this.childrenTexts = [];
-
-		/**
-		 *
-		 * @type {MeshUIComponent[]}
-		 */
-		this.childrenInlines = [];
-
-
-		/**
-		 * parents
-		 * @type {MeshUIComponent|null}
-		 */
-		this.parentUI = null;
-
-		// update parentUI when this component will be added or removed
-		this.addEventListener( 'added', this._rebuildParentUI );
-		this.addEventListener( 'removed', this._rebuildParentUI );
-
-		/**
-		 *
-		 * @type {Mesh|null}
-		 * @protected
-		 */
-		this._main = null;
-
-		/**
-		 *
-		 * @type {*[]}
-		 * @private
-		 */
-		this._onAfterUpdates = [];
-
-		this.position.z = this.getOffset();
-
-		/**
-		 *
-		 * @type {Object.<{m:string, t?:(value:any) => any}>}
-		 * @protected
-		 */
-		this._materialMediation = {};
-
-		/**
-		 *
-		 * @type {{_receiveShadow: {m: string}, _castShadow: {m: string}}}
-		 * @private
-		 */
-		this._meshMediation = {
-			_castShadow: { m: 'castShadow' },
-			_receiveShadow: { m: 'receiveShadow' },
-			// _renderOrder:{m:'renderOrder'}
-		};
-
-
-		/**
-		 * The raw border radius values, and the units is not defined
-		 * @type {Vector4}
-		 * @private
-		 */
-		this._borderRadius = new Vector4().copy( DEFAULTS.borderRadius );
-
-		/**
-		 *
-		 * @type {BorderRadius}
-		 * @private
-		 */
-		this._borderRadiusComponent = new BorderRadius( this._borderRadius );
-
-		/**
-		 * BorderWidth in world units
-		 * @type {Vector4}
-		 * @private
-		 */
-		this._borderWidth = new Vector4().copy( DEFAULTS.borderWidth );
-
-		/**
-		 *
-		 * @type {BorderWidth}
-		 * @private
-		 */
-		this._borderWidthComponent = new BorderWidth( DEFAULTS.borderWidth );
-
-		/**
-		 *
-		 * @type {Vector4}
-		 * @private
-		 */
-		this._padding = new Vector4( 0, 0, 0, 0 );
-
-		/**
-		 *
-		 * @type {Vector4}
-		 * @private
-		 */
-		this._margin = new Vector4( 0, 0, 0, 0 );
-
-		/**
-		 * @Todo: Probably only for boxComponents
-		 * @type {Lines}
-		 */
-		this.lines = new Lines();
-
-		/**
-		 *
-		 * @type {FontVariant}
-		 * @protected
-		 */
-		this._font = null;
-
-	}
-
-	/////////////
-	/// GETTERS
-	/////////////
-
-	getClippingPlanes() {
-
-		const planes = [];
-
-		if ( this.parentUI ) {
-
-			if ( this.isBlock && this.parentUI.getHiddenOverflow() ) {
-
-				// const yLimit = ( this.getInsetHeight() / 2 );
-				const yLimit = this.parentUI.getOffsetHeight();
-				const xLimit = this.parentUI.getOffsetWidth();
-				const padding = this.parentUI._padding;
-				const border = this.parentUI._borderWidth;
-
-				const newPlanes = [
-					// top
-					new Plane( new Vector3( 0, -1, 0 ), yLimit / 2 - ( padding.x + border.x ) ),
-					// right
-					new Plane( new Vector3( -1, 0, 0 ), xLimit / 2 - ( padding.y + border.y ) ),
-					// bottom
-					new Plane( new Vector3( 0, 1, 0 ), yLimit / 2 - ( padding.z + border.z ) ),
-					// left
-					new Plane( new Vector3( 1, 0, 0 ), xLimit / 2 - ( padding.w + border.w ) ),
-				];
-
-				newPlanes.forEach( plane => {
-
-					plane.applyMatrix4( this.parentUI.matrixWorld );
-
-				} );
-
-				planes.push( ...newPlanes );
-
-			}
-
-			if ( this.parentUI.parentUI ) {
-
-				planes.push( ...this.parentUI.getClippingPlanes() );
-
-			}
-
-		}
-
-		return planes;
-
-	}
-
-	/**
-	 * @TODO : This is already present in MaterialManager
-	 * Update a component's materials clipping planes.
-	 * Called every frame.
-	 */
-	updateClippingPlanes( value ) {
-
-		const newClippingPlanes = value !== undefined ? value : this.getClippingPlanes();
-
-		if ( JSON.stringify( newClippingPlanes ) !== JSON.stringify( this.clippingPlanes ) ) {
-
-			this.clippingPlanes = newClippingPlanes;
-
-			if ( this.material ) this.material.clippingPlanes = this.clippingPlanes;
-
-		}
-
-	}
-
-	/** Get the highest parent of this component (the parent that has no parent on top of it) */
-	getHighestParent() {
-
-		if ( !this.parentUI ) {
-
-			return this;
-
-		}
-
-		return this.parent.getHighestParent();
-
-
-	}
-
-	/**
-	 * look for a property in this object, and if does not find it, find in parents or return default value
-	 * @private
-	 */
-	_getProperty( propName ) {
-
-		if ( this[ propName ] === undefined && this.parentUI ) {
-
-			return this.parent._getProperty( propName );
-
-		} else if ( this[ propName ] !== undefined ) {
-
-			return this[ propName ];
-
-		}
-
-		return DEFAULTS[ propName ];
-
-	}
-
-	//
-
-	getFontSize() {
-
-		return this._getProperty( 'fontSize' );
-
-	}
-
-	getSegments() {
-
-		return this.segments || 1;
-
-	}
-
-	getAlphaTest() {
-
-		return this.alphaTest || 0.02;
-
-	}
-
-	getFontKerning() {
-
-		return this._getProperty( 'fontKerning' );
-
-	}
-
-	getFontStyle() {
-
-		return this._getProperty( 'fontStyle' );
-
-	}
-
-	getFontWeight() {
-
-		return this._getProperty( 'fontWeight' );
-
-	}
-
-	getLetterSpacing() {
-
-		return this._getProperty( 'letterSpacing' );
-
-	}
-
-	getFontTexture() {
-
-		if ( this._font && this._font.isReady ) {
-
-			return this._font.texture;
-
-		}
-
-		return this._getProperty( 'fontTexture' );
-
-	}
-
-	getFontFamily() {
-
-		return this._getProperty( 'fontFamily' );
-
-	}
-
-	getBreakOn() {
-
-		return this._getProperty( 'breakOn' );
-
-	}
-
-	getWhiteSpace() {
-
-		return this._getProperty( 'whiteSpace' );
-
-	}
-
-	getTextAlign() {
-
-		return this._getProperty( 'textAlign' );
-
-	}
-
-	getFontColor() {
-
-		return this._getProperty( 'fontColor' );
-
-	}
-
-
-	getFontSupersampling() {
-
-		return this._getProperty( 'fontSupersampling' );
-
-	}
-
-	getFontOpacity() {
-
-		return this._getProperty( 'fontOpacity' );
-
-	}
-
-	getFontPXRange() {
-
-		return this._getProperty( 'fontPXRange' );
-
-	}
-
-	getBorderColor() {
-
-		return this._getProperty( 'borderColor' );
-
-	}
-
-	getBorderOpacity() {
-
-		return this._getProperty( 'borderOpacity' );
-
-	}
-
-	/// SPECIALS
-
-	/** return the first parent with a 'threeOBJ' property */
-	getContainer() {
-
-		if ( !this.threeOBJ && this.parent ) {
-
-			return this.parent.getContainer();
-
-		} else if ( this.threeOBJ ) {
-
-			return this;
-
-		}
-
-		return DEFAULTS.container;
-
-
-	}
-
-	/** Get the number of UI parents above this elements (0 if no parent) */
-	getParentsNumber( i ) {
-
-		i = i || 0;
-
-		if ( this.parentUI ) {
-
-			return this.parentUI.getParentsNumber( i + 1 );
-
-		}
-
-		return i;
-
-	}
-
-	////////////////////////////////////
-	/// GETTERS WITH NO PARENTS LOOKUP
-	////////////////////////////////////
-
-	getBackgroundOpacity() {
-
-		return ( !this.backgroundOpacity && this.backgroundOpacity !== 0 ) ?
-			DEFAULTS.backgroundOpacity : this.backgroundOpacity;
-
-	}
-
-	getBackgroundColor() {
-
-		return this.backgroundColor || DEFAULTS.backgroundColor;
-
-	}
-
-	getBackgroundTexture() {
-
-		// return this.backgroundTexture || DEFAULTS.backgroundTexture();
-		return this.backgroundTexture || DEFAULTS.backgroundTexture;
-
-	}
-
-	getAlignItems() {
-
-		return this.alignItems || DEFAULTS.alignItems;
-
-	}
-
-	getContentDirection() {
-
-		return this.contentDirection || DEFAULTS.contentDirection;
-
-	}
-
-	getJustifyContent() {
-
-		return this.justifyContent || DEFAULTS.justifyContent;
-
-	}
-
-	getInterLine() {
-
-		return ( this.interLine === undefined ) ? DEFAULTS.interLine : this.interLine;
-
-	}
-
-	getOffset() {
-
-		return ( this.offset === undefined ) ? DEFAULTS.offset : this.offset;
-
-	}
-
-	getBackgroundSize() {
-
-		return ( this.backgroundSize === undefined ) ? DEFAULTS.backgroundSize : this.backgroundSize;
-
-	}
-
-	getHiddenOverflow() {
-
-		return ( this.hiddenOverflow === undefined ) ? DEFAULTS.hiddenOverflow : this.hiddenOverflow;
-
-	}
-
-	getBestFit() {
-
-		return ( this.bestFit === undefined ) ? DEFAULTS.bestFit : this.bestFit;
-
-	}
-
-	///////////////
-	///  UPDATE
-	///////////////
-
-	/**
-	 * Filters children in order to compute only one times children lists
-	 * @private
-	 */
-	_rebuildChildrenLists() {
-
-		// Stores all children that are ui
-		this.childrenUIs = this.children.filter( child => child.isUI && child.visible );
-
-		// Stores all children that are box
-		this.childrenBoxes = this.childrenUIs.filter( child => child.isBoxComponent );
-
-		// Stores all children that are inline
-		this.childrenInlines = this.childrenUIs.filter( child => child.isInline );
-
-		// Stores all children that are text
-		this.childrenTexts = this.childrenUIs.filter( child => child.isText );
-	}
-
-	/**
-	 * Try to retrieve parentUI after each structural change
-	 * @private
-	 */
-	_rebuildParentUI = () => {
-
-		if ( this.parent && this.parent.isUI ) {
-
-			this.parentUI = this.parent;
-			this.position.z = this.getOffset();
-
-		} else {
-
-			this.parentUI = null;
-
-		}
-
-	};
-
-	/**
-	 * When the user calls component.add, it registers for updates,
-	 * then call THREE.Object3D.add.
-	 */
-
-	/* eslint-disable no-unused-vars */
-	/**
-	 *
-	 * @override
-	 * @param {...Object3D} object
-	 * @return {this}
-	 */
-	add( object ) {
-
-		for ( const id of Object.keys( arguments ) ) {
-
-			// An inline component relies on its parent for positioning
-			if ( arguments[ id ].isUI ) this.update( null, true );
-			// if ( arguments[ id ].isInline ) this.update( null, true );
-
-		}
-
-		super.add( ...arguments );
-
-		this._rebuildChildrenLists();
-
-		return this;
-
-	}
-
-
-	/**
-	 * When the user calls component.remove, it registers for updates,
-	 * then call THREE.Object3D.remove.
-	 * @override
-	 * @param {...Object3D} object
-	 * @return {this}
-	 */
-	remove( object ) {
-
-		for ( const id of Object.keys( arguments ) ) {
-
-			// An inline component relies on its parent for positioning
-			if ( arguments[ id ].isInline ) this.update( null, true );
-
-		}
-
-		super.remove( ...arguments );
-
-		this._rebuildChildrenLists();
-
-		return this;
-
-	}
-
-	/* eslint-enable no-unused-vars */
-
-	//
-
-	update( updateParsing, updateLayout, updateInner ) {
-
-		UpdateManager.requestUpdate( this, updateParsing, updateLayout, updateInner );
-
-	}
-
-	/**
-	 *
-	 * @param {Function} func
-	 */
-	set onAfterUpdate( func ) {
-
-		console.warn( '`onAfterUpdate` property has been deprecated, please rely on `addAfterUpdate` instead.' );
-		this.addAfterUpdate( func );
-
-	}
-
-	/**
-	 *
-	 * @param {Function} func
-	 */
-	addAfterUpdate( func ) {
-
-		this._onAfterUpdates.push( func );
-
-	}
-
-	/**
-	 *
-	 * @param {Function} func
-	 */
-	removeAfterUpdate( func ) {
-
-		const index = this._onAfterUpdates.indexOf( func );
-		if ( index !== -1 ) {
-
-			this._onAfterUpdates.splice( index, 1 );
-
-		}
-
-	}
-
-	performAfterUpdate() {
-
-		for ( let i = 0; i < this._onAfterUpdates.length; i++ ) {
-
-			this._onAfterUpdates[ i ]();
-
-		}
-
-	}
-
-	/**
-	 * Set this component's passed parameters.
-	 * If necessary, take special actions.
-	 * Update this component unless otherwise specified.
-	 */
-	set( options ) {
-
-		let parsingNeedsUpdate, layoutNeedsUpdate, innerNeedsUpdate;
-
-		// Register to the update manager, so that it knows when to update
-
-		UpdateManager.register( this );
-
-		// Abort if no option passed
-
-		if ( !options || JSON.stringify( options ) === JSON.stringify( {} ) ) return;
-
-		// Set this component parameters according to options, and trigger updates accordingly
-		// The benefit of having two types of updates, is to put everthing that takes time
-		// in one batch, and the rest in the other. This way, efficient animation is possible with
-		// attribute from the light batch.
-
-		const additionalMaterialTransfer = {};
-
-		for ( const prop of Object.keys( options ) ) {
-
-			if ( this[ prop ] != options[ prop ] ) {
-
-				const value = options[ prop ];
-
-				switch ( prop ) {
-
-					case 'content' :
-					case 'fontWeight' :
-					case 'fontStyle' :
-					case 'whiteSpace': // @TODO : Whitespace could also just be layouting
-						if ( this.isText ) parsingNeedsUpdate = true;
-						layoutNeedsUpdate = true;
-						this[ prop ] = value;
-						break;
-
-					// Only layout now - Not anymore parsing
-					case 'fontSize' :
-					case 'fontKerning' :
-					case 'breakOn':
-					case 'segments':
-						layoutNeedsUpdate = true;
-						this[ prop ] = value;
-						break;
-
-					case 'bestFit' :
-						if ( this.isBlock ) {
-							parsingNeedsUpdate = true;
-							layoutNeedsUpdate = true;
-						}
-						this[ prop ] = value;
-						break;
-
-					case 'width' :
-					case 'height' :
-						// case 'padding' :
-						// @TODO: I don't think this is true anymore
-						if ( this.isInlineBlock || ( this.isBlock ) ) parsingNeedsUpdate = true;
-						layoutNeedsUpdate = true;
-						this[ prop ] = value;
-						break;
-
-					case 'padding':
-						this._fourDimensionsValueSetter( this._padding, value );
-						layoutNeedsUpdate = true;
-						break;
-					case 'paddingTop':
-						this._padding.x = value;
-						layoutNeedsUpdate = true;
-						break;
-					case 'paddingRight':
-						this._padding.y = value;
-						layoutNeedsUpdate = true;
-						break;
-					case 'paddingBottom':
-						this._padding.z = value;
-						layoutNeedsUpdate = true;
-						break;
-					case 'paddingLeft':
-						this._padding.w = value;
-						layoutNeedsUpdate = true;
-						break;
-
-					case 'letterSpacing' :
-					case 'interLine' :
-						// @TODO: I don't think this is true anymore
-						if ( this.isBlock ) parsingNeedsUpdate = true;
-						layoutNeedsUpdate = true;
-						this[ prop ] = value;
-						break;
-
-					case 'margin' :
-						this._fourDimensionsValueSetter( this._margin, value );
-						layoutNeedsUpdate = true;
-						break;
-					case 'marginTop':
-						this._margin.x = value;
-						layoutNeedsUpdate = true;
-						break;
-					case 'marginRight':
-						this._margin.y = value;
-						layoutNeedsUpdate = true;
-						break;
-					case 'marginBottom':
-						this._margin.z = value;
-						layoutNeedsUpdate = true;
-						break;
-					case 'marginLeft':
-						this._margin.w = value;
-						layoutNeedsUpdate = true;
-						break;
-					// case 'margin':
-					case 'contentDirection' :
-					case 'justifyContent' :
-					case 'alignContent' :
-					case 'alignItems' :
-					case 'textAlign' :
-					case 'textType' :
-						layoutNeedsUpdate = true;
-						this[ prop ] = value;
-						break;
-
-					case 'fontColor' :
-					case 'fontOpacity' :
-					case 'fontSupersampling' :
-					case 'backgroundColor' :
-					case 'backgroundOpacity' :
-					case 'backgroundTexture' :
-					case 'backgroundSize' :
-					case 'borderColor' :
-					case 'borderOpacity' :
-						// innerNeedsUpdate = true;
-						this[ prop ] = value;
-						break;
-
-					case 'hiddenOverflow' :
-						this[ prop ] = value;
-						break;
-
-					case 'offset':
-						// if( !this.isBlock || this.parentUI ){
-
-						this[ prop ] = value;
-						this.position.z = value;
-
-						// }
-						break;
-
-					default:
-						this[ prop ] = value;
-				}
-
-			}
-
-		}
-
-		// special cases, this.update() must be called only when some files finished loading
-
-		// Selection of fontFamily and font property
-		// 1. Preferred way, give a {FontFamily} property
-		if ( options.fontFamily instanceof FontFamily ) {
-
-			this.fontFamily = options.fontFamily;
-			this.font = options.fontFamily.getVariant( this.getFontWeight(), this.getFontStyle() );
-
-		}
-
-		// 1.1 Preferred way, a bit annoying to check options.fontTexture ( retro-compatibility )
-		else if ( typeof options.fontFamily === 'string' && !options.fontTexture ) {
-
-			const fontFamily = FontLibrary.getFontFamily( options.fontFamily );
-
-			if ( fontFamily ) {
-
-				this.fontFamily = fontFamily;
-				this.font = fontFamily.getVariant( this.getFontWeight(), this.getFontStyle() );
-
-			}
-
-		}
-		// 2. < v7.x.x way
-		else if ( options.fontFamily && options.fontTexture ) {
-
-			// Set from old way, check if that family is already registered
-			const fontName = options.fontFamily.pages ? options.fontFamily.info.face : options.fontFamily;
-
-			let fontFamily = FontLibrary.getFontFamily( fontName );
-
-			if ( !fontFamily ) {
-
-				fontFamily = FontLibrary.addFontFamily( fontName )
-					.addVariant( FontWeight.NORMAL, FontStyle.NORMAL, options.fontFamily, options.fontTexture );
-
-			}
-
-			this.fontFamily = fontFamily;
-
-			// @TODO: Add more variant selection
-			this.font = fontFamily.getVariant( FontWeight.NORMAL, FontStyle.NORMAL );
-
-		}
-
-		// if font kerning changes for a child of a block with Best Fit enabled, we need to trigger parsing for the parent as well.
-		if ( this.parentUI && this.parentUI.getBestFit() != 'none' ) this.parentUI.update( true, true, false );
-
-		// Call component update
-
-		this.update( parsingNeedsUpdate, layoutNeedsUpdate, innerNeedsUpdate );
-
-
-		if ( layoutNeedsUpdate ) this.getHighestParent().update( false, true, false );
-
-
-		//
-		// @TODO : Prevent merging those
-		// this._transferToMaterial( options );
-		this._transferToMaterial( { ...options, ...additionalMaterialTransfer } );
-
-
-		//
-		// this._transferToMesh( options );
-
-
-	}
-
-	/////////////////////
-	// STATES MANAGEMENT
-	/////////////////////
-
-	/** Store a new state in this component, with linked attributes */
-	setupState( options ) {
-
-		this.states[ options.state ] = {
-			attributes: options.attributes,
-			onSet: options.onSet
-		};
-
-	}
-
-	/** Set the attributes of a stored state of this component */
-	setState( state ) {
-
-		const savedState = this.states[ state ];
-
-		if ( !savedState ) {
-			console.warn( `state "${state}" does not exist within this component` );
-			return;
-		}
-
-		if ( state === this.currentState ) return;
-
-		this.currentState = state;
-
-		if ( savedState.onSet ) savedState.onSet();
-
-		if ( savedState.attributes ) this.set( savedState.attributes );
-
-	}
-
-	/**
-	 * Get completely rid of this component and its children, also unregister it for updates
-	 * @override
-	 * @return {this}
-	 */
-	clear() {
-
-		this.traverse( ( obj ) => {
-
-			UpdateManager.disposeOf( obj );
-
-			if ( obj.material ) obj.material.dispose();
-
-			if ( obj.geometry ) obj.geometry.dispose();
-
-		} );
-
-		return this;
-	}
-
-	/***********************************************************************************************************************
-	 * BorderRadius Interface
-	 **********************************************************************************************************************/
-
-	/**
-	 * Set the units of borderRadius
-	 * @param {string|"em"|"rem"|"%"} v
-	 */
-	set borderRadiusUnits( v ) {
-
-		this._borderRadiusComponent.units = v;
-		this.update( false, true, true );
-
-	}
-
-	/**
-	 * Get the units of borderRadius
-	 * @returns {string}
-	 */
-	get borderRadiusUnits() { return this._borderRadiusComponent.units; }
-
-	/**
-	 *
-	 * @param {Vector4|Array.<Number>|Number|string} v
-	 */
-	set borderRadius( v ) {
-
-		this._fourDimensionsValueSetter( this._borderRadius, v );
-		this._borderRadiusComponent.updateValue( this._borderRadius );
-		this.update( false, false, true );
-
-	}
-
-	/**
-	 *
-	 * @returns {Vector4}
-	 */
-	get borderRadius() { return this._borderRadius; }
-
-	/**
-	 * Set the top left radius only
-	 * @param {Number} v in units of `borderRadiusUnits`
-	 */
-	set borderTopLeftRadius( v ) {
-
-		this._borderRadius.x = v;
-		this._borderRadiusComponent.updateValue( this._borderRadius );
-		this.update( false, false, true );
-
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get borderTopLeftRadius() { return this._borderWidth.x; }
-
-
-	/**
-	 * Set the top right radius only
-	 * @param {Number} v in units of `borderRadiusUnits`
-	 */
-	set borderTopRightRadius( v ) {
-
-		this._borderRadius.y = v;
-		this._borderRadiusComponent.updateValue( this._borderRadius );
-		this.update( false, false, true );
-
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get borderTopRightRadius() { return this._borderWidth.y; }
-
-	/**
-	 * Set the bottom right radius only
-	 * @param {Number} v in units of `borderRadiusUnits`
-	 */
-	set borderBottomRightRadius( v ) {
-
-		this._borderRadius.z = v;
-		this._borderRadiusComponent.updateValue( this._borderRadius );
-		this.update( false, false, true );
-
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get borderBottomRightRadius() { return this._borderWidth.z; }
-
-	/**
-	 * Set the bottom left radius only
-	 * @param {Number} v in units of `borderRadiusUnits`
-	 */
-	set borderBottomLeftRadius( v ) {
-
-		this._borderRadius.w = v;
-		this._borderRadiusComponent.updateValue( this._borderRadius );
-		this.update( false, false, true );
-
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get borderBottomLeftRadius() { return this._borderWidth.w; }
-
-	/**
-	 * Set the top left and top right radiuses
-	 * @param {Number} v in units of `borderRadiusUnits`
-	 */
-	set borderTopRadius( v ) {
-
-		this._borderRadius.x = v;
-		this._borderRadius.y = v;
-		this._borderRadiusComponent.updateValue( this._borderRadius );
-
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get borderTopRadius() { return this._borderWidth.y; }
-
-	/**
-	 * Set the top right and bottom right radiuses
-	 * @param {Number} v in units of `borderRadiusUnits`
-	 */
-	set borderRightRadius( v ) {
-
-		this._borderRadius.y = v;
-		this._borderRadius.z = v;
-		this._borderRadiusComponent.updateValue( this._borderRadius );
-
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get borderRightRadius() { return this._borderWidth.z; }
-
-	/**
-	 * Set the top left and bottom left radiuses
-	 * @param {Number} v in units of `borderRadiusUnits`
-	 */
-	set borderLeftRadius( v ) {
-
-		this._borderRadius.x = v;
-		this._borderRadius.w = v;
-		this._borderRadiusComponent.updateValue( this._borderRadius );
-
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get borderLeftRadius() { return this._borderWidth.x; }
-
-	/**
-	 * Set the bottom left and bottom right radiuses
-	 * @param {Number} v in units of `borderRadiusUnits`
-	 */
-	set borderBottomRadius( v ) {
-
-		this._borderRadius.z = v;
-		this._borderRadius.w = v;
-		this._borderRadiusComponent.updateValue( this._borderRadius );
-
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get borderBottomRadius() { return this._borderWidth.w; }
-
-	/*********************************************************************************************************************
-	 * BorderWidth Interface
-	 ********************************************************************************************************************/
-
-	/**
-	 * Set the units of borderWidth
-	 * @param {string|"em"|"rem"|"%"} v
-	 */
-	set borderWidthUnits( v ) {
-
-		this._borderWidthComponent.units = v;
-		this.update( false, true, true );
-
-	}
-
-	/**
-	 * Get the units of borderWidth
-	 * @returns {string}
-	 */
-	get borderWidthUnits() { return this._borderWidthComponent.units; }
-
-	/**
-	 *
-	 * @param {Vector4|Array.<Number>|Number|string} v
-	 */
-	set borderWidth( v ) {
-
-		this._fourDimensionsValueSetter( this._borderWidth, v );
-		this._borderWidthComponent.updateValue( this._borderWidth );
-		this.update( false, true, true );
-
-	}
-
-	/**
-	 *
-	 * @returns {Vector4}
-	 */
-	get borderWidth() { return this._borderWidth; }
-
-	/**
-	 * Set the width of the top side border only
-	 * @param {Number} v in units of `borderWidthUnits`
-	 */
-	set borderTopWidth( v ) {
-
-		this._borderWidth.x = v;
-		this._borderWidthComponent.updateValue( this._borderWidth );
-		this.update( false, true, true );
-
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get borderTopWidth() { return this._borderWidth.x; }
-
-	/**
-	 * Set the width of the right side border only
-	 * @param {Number} v in units of `borderWidthUnits`
-	 */
-	set borderRightWidth( v ) {
-
-		this._borderWidth.y = v;
-		this._borderWidthComponent.updateValue( this._borderWidth );
-		this.update( false, true, true );
-
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get borderRightWidth() { return this._borderWidth.y; }
-
-	/**
-	 * Set the width of the bottom side border only
-	 * @param {Number} v in units of `borderWidthUnits`
-	 */
-	set borderBottomWidth( v ) {
-
-		this._borderWidth.z = v;
-		this._borderWidthComponent.updateValue( this._borderWidth );
-		this.update( false, true, true );
-
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get borderBottomWidth() { return this._borderWidth.z; }
-
-	/**
-	 * Set the width of the left side border only
-	 * @param {Number} v in units of `borderWidthUnits`
-	 */
-	set borderLeftWidth( v ) {
-
-		this._borderWidth.w = v;
-		this._borderWidthComponent.updateValue( this._borderWidth );
-		this.update( false, true, true );
-
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get borderLeftWidth() { return this._borderWidth.w; }
-
-
-	/***********************************************************************************************************************
-	 * TO MATERIAL HOLDER
-	 **********************************************************************************************************************/
-
-	/**
-	 *
-	 * @returns {Material|ShaderMaterial}
-	 */
-	get material() { return this._material; }
-
-	/**
-	 *
-	 * @param {Material|ShaderMaterial} material
-	 */
-	set material( material ) {
-
-		this._material = material;
-
-		// Update the fontMaterialProperties that need to be transferred to
-		this._materialMediation = { ...material.constructor.mediation };
-
-		// transfer all the properties to material
-		this._transferToMaterial();
-
-		if ( this._main ) {
-
-			this._main.material = this._material;
-
-		}
-
-	}
-
-	/**
-	 *
-	 * @param {Material|null} material
-	 */
-	set customDepthMaterial( material ) {
-
-		this._customDepthMaterial = material;
-
-		this._transferToMaterial();
-
-		if ( this._main ) {
-			// transfer to the main if isset
-			this._main.customDepthMaterial = this._customDepthMaterial;
-
-		}
-
-	}
-
-	/**
-	 *
-	 * @returns {Material|null}
-	 */
-	get customDepthMaterial() { return this._customDepthMaterial;	}
-
-	/**
-	 * According to the list of materialProperties
-	 * some properties are sent to material
-	 * @param {Object} [options=null]
-	 * @private
-	 */
-	_transferToMaterial( options = null ) {
-
-		Mediator.mediate( this, this._material, options, this._materialMediation, this.customDepthMaterial );
-
-	}
-
-	/**
-	 * According to the list of meshProperties
-	 * some properties are sent to mesh
-	 * @param {Object} [options=null]
-	 * @private
-	 */
-	_transferToMesh( options = null ) {
-
-		Mediator.mediate( this, this._main, options, this._meshMediation );
-
-	}
-
-	/**
-	 *
-	 * @param {Vector4} vector4
-	 * @param {string|number|Array.<string|number>} value
-	 * @private
-	 */
-	_fourDimensionsValueSetter( vector4, value ) {
-
-		if ( value instanceof Vector4 ) {
-
-			vector4.copy( value );
-			return;
-
-		}
-
-		if ( typeof value === 'string' || value instanceof String ) {
-
-			value = value.split( ' ' );
-
-		}
-
-		if ( Array.isArray( value ) ) {
-
-			value = value.map( v => parseFloat( v ) );
-
-			switch ( value.length ) {
-
-				case 1:
-					vector4.setScalar( value[ 0 ] );
-					return;
-
-				case 2:
-					vector4.x = vector4.z = value[ 0 ];
-					vector4.y = vector4.w = value[ 1 ];
-					return;
-
-				case 3:
-					vector4.x = value[ 0 ];
-					vector4.y = value[ 1 ];
-					vector4.z = value[ 2 ];
-					return;
-
-				case 4:
-					vector4.x = value[ 0 ];
-					vector4.y = value[ 1 ];
-					vector4.z = value[ 2 ];
-					vector4.w = value[ 3 ];
-					return;
-
-				default:
-					console.error( 'Four Dimension property has more than four values' );
-					return;
-
-			}
-
-		}
-
-		if ( !isNaN( value ) ) {
-
-			vector4.setScalar( value );
-
-		}
-
-	}
-
-	/**
-	 * @param {FontVariant} value
-	 */
-	set font( value ) {
-
-		this._font = value;
-
-	}
-
-	/**
-	 *
-	 * @returns {FontVariant}
-	 */
-	get font() { return this._font; }
-
-	/*********************************************************************************************************************
-	 * MESH MEDIATION
-	 ********************************************************************************************************************/
-
-	/**
-	 *
-	 * @param {boolean} value
-	 */
-	set visible( value ) {
-
-		this._visible = value;
-
-		// @TODO: Instead of direct execution of _rebuildChildrenList
-		//				It could be better to "dirtying" the children list and compute it only once on next frame
-		this.parentUI?._rebuildChildrenLists();
-
-	}
-
-	/**
-	 *
-	 * @return {boolean}
-	 */
-	get visible() { return this._visible; }
-
-	/**
-	 *
-	 * @param {boolean} value
-	 */
-	set castShadow( value ) {
-
-		this._castShadow = value;
-
-		if ( this._main ) {
-
-			this._main.castShadow = this._castShadow;
-
-		}
-
-	}
-
-	/**
-	 *
-	 * @return {boolean}
-	 */
-	get castShadow() { return this._castShadow; }
-
-	/**
-	 *
-	 * @param {boolean} value
-	 */
-	set receiveShadow( value ) {
-
-		this._receiveShadow = value;
-
-		if ( this._main ) {
-
-			this._main.receiveShadow = this._receiveShadow;
-
-		}
-
-	}
-
-	/**
-	 *
-	 * @return {boolean}
-	 */
-	get receiveShadow() { return this._receiveShadow; }
-
-	/**
-	 *
-	 * @param {number} value
-	 */
-	set renderOrder( value ) {
-
-		this._renderOrder = value;
-
-		if ( this._main ) {
-
-			this._main.renderOrder = this._renderOrder;
-
-		}
-
-	}
-
-	/**
-	 *
-	 * @return {number}
-	 */
-	get renderOrder() { return this._renderOrder; }
-
-	/*********************************************************************************************************************
-	 * MATERIAL MEDIATION
-	 ********************************************************************************************************************/
-
-	/**
-	 *
-	 * @param {number} value
-	 */
-	set side( value ) {
-
-		this._side = value;
-
-		if ( this._material ) this._material.side = value;
-
-	}
-
-	/**
-	 *
-	 * @return {number}
-	 */
-	get side() { return this._side; }
-
-}
diff --git a/src/components/core/UpdateManager.js b/src/components/core/UpdateManager.js
index 312cfbf5..2cc9d3a2 100644
--- a/src/components/core/UpdateManager.js
+++ b/src/components/core/UpdateManager.js
@@ -1,3 +1,8 @@
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from './../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
 /**
  * Job:
  * - recording components required updates
@@ -21,151 +26,46 @@
  */
 export default class UpdateManager {
 
-	/*
-	 * get called by MeshUIComponent when component.set has been used.
-	 * It registers this component and all its descendants for the different types of updates that were required.
-	 */
-	static requestUpdate( component, updateParsing, updateLayout, updateInner ) {
-
-		component.traverse( ( child ) => {
-
-			if ( !child.isUI ) return;
-
-			// request updates for all descendants of the passed components
-			if ( !this.requestedUpdates[ child.id ] ) {
-
-				this.requestedUpdates[ child.id ] = {
-					updateParsing,
-					updateLayout,
-					updateInner,
-					needCallback: ( updateParsing || updateLayout || updateInner )
-				};
-
-			} else {
-
-				if ( updateParsing ) this.requestedUpdates[ child.id ].updateParsing = true;
-				if ( updateLayout ) this.requestedUpdates[ child.id ].updateLayout = true;
-				if ( updateInner ) this.requestedUpdates[ child.id ].updateInner = true;
 
-			}
-
-		} );
-
-	}
-
-	/** Register a passed component for later updates */
 	static register( component ) {
 
-		if ( !this.components.includes( component ) ) {
-
-			this.components.push( component );
-
-		}
-
-	}
-
-	/** Unregister a component (when it's deleted for instance) */
-	static disposeOf( component ) {
-
-		const idx = this.components.indexOf( component );
-
-		if ( idx > -1 ) {
-
-			this.components.splice( idx, 1 );
-
-		}
-
-	}
-
-	/** Trigger all requested updates of registered components */
-	static update() {
-
-		if ( Object.keys( this.requestedUpdates ).length > 0 ) {
-
-			const roots = this.components.filter( ( component ) => {
-
-				return !component.parentUI;
-
-			} );
+		if ( !this.elements.includes( component ) ) {
 
-			roots.forEach( root => this.traverseParsing( root ) );
-			roots.forEach( root => this.traverseUpdates( root ) );
+				this.elements.push( component );
 
 		}
 
 	}
 
-	/**
-	 * Calls parseParams update of all components from parent to children
-	 * @private
-	 */
-	static traverseParsing( component ) {
+	static remove( component ) {
 
-		const request = this.requestedUpdates[ component.id ];
+		const index = this.elements.indexOf( component );
+		if ( index !== -1 ) {
 
-		if ( request && request.updateParsing ) {
-
-			component.parseParams();
-
-			request.updateParsing = false;
+			this.elements.splice( index, 1 );
 
 		}
 
-		component.childrenUIs.forEach( child => this.traverseParsing( child ) );
-
 	}
 
-	/**
-	 * Calls updateLayout and updateInner functions of components that need an update
-	 * @private
-	 */
-	static traverseUpdates( component ) {
-
-		const request = this.requestedUpdates[ component.id ];
-		// instant remove the requested update,
-		// allowing code below ( especially onAfterUpdate ) to add it without being directly remove
-		delete this.requestedUpdates[ component.id ];
-
-		//
-
-		if ( request && request.updateLayout ) {
-
-			request.updateLayout = false;
-
-			component.updateLayout();
-
-		}
-
-		//
-
-		if ( request && request.updateInner ) {
-
-			request.updateInner = false;
-
-			component.updateInner();
-
-		}
 
+	static update() {
 
-		// Update any child
-		component.childrenUIs.forEach( ( childUI ) => {
-
-			this.traverseUpdates( childUI );
-
-		} );
-
-		// before sending onAfterUpdate
-		if ( request && request.needCallback ) {
+		for ( const UIElement of this.elements ) {
+			UIElement.update();
 
-			component.performAfterUpdate();
+			UIElement.process(); // Natural process
+			UIElement.process(); // Actual process (optional) - For auto size and stretch
 
+			UIElement.render();
 		}
 
 	}
 
 }
 
-// TODO move these into the class (Webpack unfortunately doesn't understand
-// `static` property syntax, despite browsers already supporting this)
-UpdateManager.components = [];
-UpdateManager.requestedUpdates = {};
+/**
+ * @internal
+ * @type {Array.<MeshUIBaseElement>}
+ */
+UpdateManager.elements = [];
diff --git a/src/components/styles-components/BorderRadius.js b/src/components/styles-components/BorderRadius.js
deleted file mode 100644
index 4ff58dc2..00000000
--- a/src/components/styles-components/BorderRadius.js
+++ /dev/null
@@ -1,230 +0,0 @@
-import { Vector2, Vector4 } from 'three';
-import BorderRadiusMediator from './BorderRadiusMediator';
-import * as Units from '../../utils/Units';
-
-export default class BorderRadius {
-
-	/**
-	 *
-	 * @param {Vector4} target
-	 */
-	constructor( target ) {
-
-		/**
-		 *
-		 * @type {string}
-		 * @private
-		 */
-		this._units = Units.UV;
-
-		/**
-		 *
-		 * @type {Vector4}
-		 * @private
-		 */
-		this._target = target;
-
-		/**
-		 *
-		 * @type {boolean}
-		 * @private
-		 */
-		this._mediation = true;
-
-		/**
-		 * The mediated border radius values.
-		 * Maximum side sum is 1.
-		 * The units is UV ( ALWAYS )
-		 * @type {Vector4}
-		 * @private
-		 */
-		this._borderRadiusMediated = new Vector4().copy(target);
-
-		/**
-		 *
-		 * @type {Vector2}
-		 * @private
-		 */
-		this._cornerTL = new Vector2(this._borderRadiusMediated.x, 1-this._borderRadiusMediated.x);
-
-		/**
-		 *
-		 * @type {Vector2}
-		 * @private
-		 */
-		this._cornerTR = new Vector2(1-this._borderRadiusMediated.y, 1-this._borderRadiusMediated.y);
-
-		/**
-		 *
-		 * @type {Vector2}
-		 * @private
-		 */
-		this._cornerBR = new Vector2(1-this._borderRadiusMediated.z, this._borderRadiusMediated.z);
-
-		/**
-		 *
-		 * @type {Vector2}
-		 * @private
-		 */
-		this._cornerBL = new Vector2(this._borderRadiusMediated.w, this._borderRadiusMediated.w);
-
-		const mediationTop = new BorderRadiusMediator( this._borderRadiusMediated, [ 'x', 'y' ] ); // bottom
-		const mediationBottom = new BorderRadiusMediator( this._borderRadiusMediated, [ 'z', 'w'] ); // top
-		const mediationLeft = new BorderRadiusMediator( this._borderRadiusMediated, [ 'x', 'w'] ); // right
-		const mediationRight = new BorderRadiusMediator( this._borderRadiusMediated, [ 'y', 'z'] ); // left
-
-		mediationTop.complementaryMediation = mediationBottom;
-		mediationBottom.complementaryMediation = mediationTop;
-		mediationLeft.complementaryMediation = mediationRight;
-		mediationRight.complementaryMediation = mediationLeft;
-
-		/**
-		 *
-		 * @type {Array.<BorderRadiusMediator>}
-		 * @private
-		 */
-		this._sideMediators = [ mediationTop, mediationBottom, mediationLeft, mediationRight ];
-
-	}
-
-	/**
-	 *
-	 * @param {string} units
-	 */
-	set units( units ) {
-
-		this._units = Units.validateUnits( units );
-		this.updateValue();
-
-	}
-
-	/**
-	 *
-	 * @returns {string}
-	 */
-	get units() { return this._units; }
-
-	/**
-	 *
-	 * @param {boolean} v
-	 */
-	set mediation ( v) {
-
-		if( v !== this._mediation ){
-
-			this._mediation = v;
-			this.updateValue();
-
-		}
-
-	}
-
-	/**
-	 *
-	 * @returns {boolean}
-	 */
-	get mediation () { return this._mediation; }
-
-	/**
-	 *
-	 * @param {Number} sX
-	 * @param {Number} sY
-	 */
-	process( sX, sY ){
-
-		// Do not scale pourcentages, allowing ovals
-		if( this._units === Units.PERCENT ){
-			sX = sY = 1.0;
-		}
-
-		this._cornerTL.x = this._borderRadiusMediated.x * sX;
-		this._cornerTL.y = 1 - (this._borderRadiusMediated.x * sY );
-
-		this._cornerTR.x = 1 - (this._borderRadiusMediated.y * sX );
-		this._cornerTR.y = 1 - (this._borderRadiusMediated.y * sY );
-
-		this._cornerBR.x = 1 - (this._borderRadiusMediated.z * sX );
-		this._cornerBR.y = this._borderRadiusMediated.z * sY;
-
-		this._cornerBL.x = this._borderRadiusMediated.w * sX;
-		this._cornerBL.y = this._borderRadiusMediated.w * sY;
-
-	}
-
-	/**
-	 *
-	 * @param target
-	 * @param sX
-	 * @param sY
-	 */
-	updateValue( target, sX = 1.0, sY = 1.0 ) {
-
-		if( !target ){
-			target = this._target;
-		}
-
-		this._borderRadiusMediated.copy( target );
-
-		// @TODO: Units process could be strategies
-		if( this._units === Units.PERCENT ) {
-			this._borderRadiusMediated.divideScalar(100);
-		}
-
-		// @TODO: Units process could be strategies
-		if( this._units === Units.WORLD_UNITS ) {
-			this._borderRadiusMediated.divideScalar( Math.min(sX , sY) );
-		}
-
-		/**
-		 * mediate
-		 * Be sure no side is greater than 1 (uv units)
-		 */
-		if( this._mediation ) {
-
-			do {
-
-				this._sideMediators.forEach( srm => srm.computeValue() );
-				this._sideMediators.sort( ( a, b ) => {
-					return a.value < b.value ? 1 : -1
-				} );
-
-				if ( this._sideMediators[ 0 ].value > 1.0 ) {
-					this._sideMediators[ 0 ].mediate();
-				}
-
-			} while ( this._sideMediators[ 0 ].value > 1.0 );
-
-		}
-
-	}
-
-	/**
-	 *
-	 */
-	dispose() {
-
-		for ( const sideMediator of this._sideMediators ) {
-
-			sideMediator.dispose();
-
-		}
-
-		this._target = null;
-
-		this._sideMediators = null;
-
-		this._borderRadiusMediated = null;
-		this._cornerTL = null;
-		this._cornerTR = null;
-		this._cornerBR = null;
-		this._cornerBL = null;
-
-	}
-
-	/**
-	 *
-	 * @returns {Vector4}
-	 */
-	get output(){ return this._borderRadiusMediated; }
-
-}
diff --git a/src/components/styles-components/BorderRadiusMediator.js b/src/components/styles-components/BorderRadiusMediator.js
deleted file mode 100644
index 99653638..00000000
--- a/src/components/styles-components/BorderRadiusMediator.js
+++ /dev/null
@@ -1,115 +0,0 @@
-//JSDoc related imports
-/* eslint-disable no-unused-vars */
-import { Vector4 } from 'three';
-/* eslint-enable no-unused-vars */
-
-/**
- * Job: Contains two border radiuses values of the same side
- * 			If their sums is greater than 1 (uv units) mediation could occurs
- */
-export default class BorderRadiusMediator {
-
-	/**
-	 *
-	 * @param {Vector4} borderRadiuses
-	 * @param {Array.<string>} sideProperties
-	 */
-	constructor( borderRadiuses, sideProperties ) {
-
-		/**
-		 *
-		 * @type {Vector4}
-		 * @private
-		 */
-		this._borderRadiuses = borderRadiuses;
-
-		/**
-		 *
-		 * @type {Array<string>}
-		 * @private
-		 */
-		this._sideProperties = sideProperties;
-
-		/**
-		 *
-		 * @type {BorderRadiusMediator|null}
-		 * @private
-		 */
-		this._complementaryMediation = null;
-
-		/**
-		 *
-		 * @type {number}
-		 * @private
-		 */
-		this._value = 0;
-	}
-
-	/**
-	 * The sum of the border radius of that side
-	 * @returns {number}
-	 */
-	get value(){ return this._value; }
-
-	/**
-	 * A complementary side mediation ie: For top, complementary is bottom
-	 * @param {BorderRadiusMediator} brm
-	 */
-	set complementaryMediation( brm ){
-
-		this._complementaryMediation = brm;
-
-	}
-
-	/**
-	 * Adds all side property to compute the value of that side
-	 */
-	computeValue(){
-
-		let totalRadius = 0;
-
-		for ( const radius of this._sideProperties ) {
-
-			totalRadius += this._borderRadiuses[radius];
-
-		}
-
-		this._value = totalRadius;
-	}
-
-	/**
-	 *
-	 * @param {boolean} [mediateOpposite=true]
-	 */
-	mediate( mediateOpposite = true ){
-
-		// Mediation only occurs when sum of radius are greater than 1 (uv units)
-		if( this._value < 1.0 ) return;
-
-		// Simply divide each component by the sum
-		for ( const radius of this._sideProperties ) {
-
-			this._borderRadiuses[radius] /= this._value;
-
-		}
-
-		if( mediateOpposite ) {
-
-			// and also mediate the complementary
-			this._complementaryMediation.mediate( false );
-
-		}
-
-	}
-
-	/**
-	 *
-	 */
-	dispose() {
-
-		this._complementaryMediation = null;
-		this._borderRadiuses = null;
-
-	}
-
-}
diff --git a/src/components/styles-components/BorderWidth.js b/src/components/styles-components/BorderWidth.js
deleted file mode 100644
index 54888863..00000000
--- a/src/components/styles-components/BorderWidth.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Vector4 } from 'three';
-import * as Units from '../../utils/Units';
-
-export default class BorderWidth {
-
-	/**
-	 *
-	 * @param defaultValue
-	 */
-	constructor( defaultValue ) {
-
-		this._units = Units.WORLD_UNITS;
-
-		this._inputValue = new Vector4().copy( defaultValue );
-
-		this._borderWidthUV = new Vector4().copy( this._inputValue );
-
-	}
-
-	/**
-	 *
-	 * @param {string} units
-	 */
-	set units( units ) {
-
-		this._units = Units.validateUnits( units );
-		this.updateValue();
-
-	}
-
-	/**
-	 *
-	 * @returns {string}
-	 */
-	get units() { return this._units; }
-
-	updateValue( target = null, offsetWidth = 1.0, offsetHeight = 1.0 ){
-
-		if( target ){
-			this._inputValue.copy( target );
-		}else{
-			target = this._inputValue;
-		}
-
-		this._borderWidthUV.copy( target );
-
-
-		// @TODO: Units process could be strategies
-		if( this._units === Units.PERCENT ){
-
-			this._borderWidthUV.divideScalar( 100 );
-
-		}
-
-		// @TODO: Units process could be strategies
-		if( this._units === Units.WORLD_UNITS ) {
-
-			this._borderWidthUV.w /= offsetWidth;
-			this._borderWidthUV.y /= offsetWidth;
-
-			this._borderWidthUV.x /= offsetHeight;
-			this._borderWidthUV.z /= offsetHeight;
-
-		}
-
-		// @TODO: Units process could be strategies
-		if( this._units === Units.UV ) {
-
-			const sX = offsetWidth > offsetHeight ? offsetHeight/offsetWidth : 1;
-			const sY = offsetWidth < offsetHeight ? offsetWidth/offsetHeight : 1;
-
-			this._borderWidthUV.x *= sY;
-			this._borderWidthUV.y *= sX;
-			this._borderWidthUV.z *= sY;
-			this._borderWidthUV.w *= sX;
-
-		}
-
-	}
-
-	/**
-	 *
-	 * @returns {Vector4}
-	 */
-	get output() { return this._borderWidthUV; }
-
-}
diff --git a/src/components/styles-components/StyleComponentVector4.js b/src/components/styles-components/StyleComponentVector4.js
deleted file mode 100644
index b5438ef9..00000000
--- a/src/components/styles-components/StyleComponentVector4.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import { Vector4 } from 'three';
-
-export default class StyleComponentVector4 {
-
-	constructor( defaultValue ) {
-
-		this._input = new Vector4().copy( defaultValue );
-
-	}
-
-	/**
-	 *
-	 * @param {Vector4|Array.<Number>|Number|String} v
-	 */
-	set input( v ) {
-		_vector4ValueSetter( this._input, v );
-	}
-
-	/**
-	 *
-	 * @returns {Vector4}
-	 */
-	get input() { return this._input; }
-
-	/**
-	 * @returns {Vector4}
-	 */
-	get output() { return this._input; }
-
-	/**
-	 *
-	 * @param {Number} v
-	 */
-	set x( v ) {
-		this._input.x = v;
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get x() { return this._input.x; }
-
-	/**
-	 *
-	 * @param {Number} v
-	 */
-	set y( v ) {
-		this._input.y = v;
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get y() { return this._input.y; }
-
-	/**
-	 *
-	 * @param {Number} v
-	 */
-	set z( v ) {
-		this._input.z = v;
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get z() { return this._input.z; }
-
-	/**
-	 *
-	 * @param {Number} v
-	 */
-	set w( v ) {
-		this._input.w = v;
-	}
-
-	/**
-	 *
-	 * @returns {number}
-	 */
-	get w() { return this._input.w; }
-
-	dispose(){
-
-		this._input = null;
-
-	}
-
-}
-
-/**
- *
- * @param {Vector4} vector4
- * @param {Vector4|Array.<Number>|Number|String} value
- * @private
- */
-function _vector4ValueSetter( vector4, value ) {
-
-	if ( value instanceof Vector4 ) {
-
-		vector4.copy( value );
-		return;
-
-	}
-
-	if ( typeof value === 'string' || value instanceof String ) {
-
-		value = value.split( ' ' );
-
-	}
-
-	if ( Array.isArray( value ) ) {
-
-		value = value.map( v => parseFloat( v ) );
-
-		switch ( value.length ) {
-
-			case 1:
-				vector4.setScalar( value[ 0 ] );
-				return;
-
-			case 2:
-				vector4.x = vector4.z = value[ 0 ];
-				vector4.y = vector4.w = value[ 1 ];
-				return;
-
-			case 3:
-				vector4.x = value[ 0 ];
-				vector4.y = value[ 1 ];
-				vector4.z = value[ 2 ];
-				return;
-
-			case 4:
-				vector4.x = value[ 0 ];
-				vector4.y = value[ 1 ];
-				vector4.z = value[ 2 ];
-				vector4.w = value[ 3 ];
-				return;
-
-			default:
-				console.error( 'StyleComponentVector4::set() Four Dimension property had more than four values' );
-				return;
-
-		}
-
-	}
-
-	if ( !isNaN( value ) ) {
-
-		vector4.setScalar( value );
-
-	}
-
-}
diff --git a/src/core/DefaultValues.js b/src/core/DefaultValues.js
new file mode 100644
index 00000000..4d01398b
--- /dev/null
+++ b/src/core/DefaultValues.js
@@ -0,0 +1,96 @@
+/** List the default values of the lib components */
+const _values = {
+	fontFamily: null,
+	fontSize: 0.05,
+	fontKerning: 'normal',
+	fontStyle: 'normal',
+	fontWeight : 'normal',
+	offset: 0.005,
+	lineHeight: 1.2,
+	lineBreak: '- ,.:?!\n',// added '\n' to also acts as friendly breaks when white-space:normal
+	whiteSpace: 'pre-line',
+	flexDirection : 'column',
+	justifyContent : 'start',
+	alignItems : 'start',
+	backgroundImage: null,
+	textAlign : 'left',
+	boxSizing: 'content-box',
+	position: 'static',
+	color: 0xffffff,
+	fontOpacity: 1,
+	opacity: 1,
+	fontPXRange: 4,
+	fontSupersampling: true,
+	fontSmooth: 'antialiased',
+	borderRadius: 0,
+	borderWidth: 0,
+	borderColor: 'black',
+	borderOpacity: 1,
+	backgroundSize: "cover",
+	backgroundColor: 0x000000,
+	backgroundOpacity: 0,
+	overflow: 'visible',
+	letterSpacing: 0,
+	invertAlpha : false,
+	segments: 1,
+	backgroundSide : 0, //FrontSide
+	backgroundAlphaTest: 0.02,
+	fontSide: 0, // FrontSide
+	fontAlphaTest: 0.02,
+	padding: 0,
+	margin: 0,
+	verticalAlign: "baseline"
+};
+
+const _blocks = {
+
+};
+
+const _inlines = {
+	fontStyle: 'inherit',
+	fontWeight: 'inherit',
+	color: 'inherit'
+}
+
+const _registry = {
+	default: _values,
+	block: _blocks,
+	inline : _inlines
+}
+
+/**
+ * @param {import('./../core/elements/MeshUIBaseElement').Options} overrideProperties
+ * @param [type='default']
+ */
+export const set = function ( overrideProperties , type = 'default' ) {
+
+	const values = _registry[type] || _registry.default;
+
+	for ( const property in overrideProperties ) {
+
+		values[property] = overrideProperties[property];
+
+	}
+
+}
+
+/**
+ *
+ * @param {string} property
+ * @return {any}
+ */
+export const get = function ( property, type = 'default' ) {
+
+	const values = _registry[type] ? {..._values,..._registry[type]} : {..._registry.default};
+
+	if( !property ) return values;
+
+	if( !Object.prototype.hasOwnProperty.call( values, property) ) {
+
+		console.warn( `ThreeMeshUI::DefaultValues is trying to retrieve non-existing property '${property}'`);
+
+	}
+
+	return values[property];
+
+}
diff --git a/src/core/elements/MeshUIBaseElement.js b/src/core/elements/MeshUIBaseElement.js
new file mode 100644
index 00000000..a181060f
--- /dev/null
+++ b/src/core/elements/MeshUIBaseElement.js
@@ -0,0 +1,1560 @@
+import RenderOrderProperty from '../properties/RenderOrderProperty';
+import OffsetProperty from '../properties/OffsetProperty';
+import FontSmoothProperty from '../properties/FontSmoothProperty';
+import PaddingProperty from '../properties/style-properties/bounds/PaddingProperty';
+import MarginProperty from '../properties/style-properties/bounds/MarginProperty';
+import Mediator from '../../utils/mediator/Mediator';
+import ParentProperty from '../properties/hierarchy/ParentProperty';
+import NumberProperty from '../properties/NumberProperty';
+import SideProperty from '../properties/SideProperty';
+import UpdateManager from '../../components/core/UpdateManager';
+import FontProperty from '../properties/FontProperty';
+import { Object3D } from 'three';
+import Display from '../properties/style-properties/visibility/Display';
+import BoxSizing from '../properties/style-properties/bounds/BoxSizing';
+import StyleColorProperty from '../properties/style-properties/StyleColorProperty';
+import StyleFactorProperty from '../properties/style-properties/StyleFactorProperty';
+import BackgroundImage from '../properties/style-properties/background/BackgroundImage';
+import BackgroundSize from '../properties/style-properties/background/BackgroundSize';
+import Overflow from '../properties/style-properties/visibility/Overflow';
+import BorderRadius from '../properties/style-properties/border/BorderRadius';
+import BorderWidth from '../properties/style-properties/border/BorderWidth';
+import VisibleProperty from '../properties/VisibleProperty';
+import BackgroundColorProperty from '../properties/style-properties/background/BackgroundColorProperty';
+import EmptyProperty from '../properties/EmptyProperty';
+import InlineJustificator from '../properties/InlineJustificator';
+import AlignItemsProperty from '../properties/style-properties/flex/AlignItemsProperty';
+import TextAlignProperty from '../properties/style-properties/font/TextAlignProperty';
+import FlexDirectionProperty from '../properties/style-properties/flex/FlexDirectionProperty';
+import JustifyContentProperty from '../properties/style-properties/flex/JustifyContentProperty';
+import OrderProperty from '../properties/style-properties/flex/OrderProperty';
+import PositionProperty from '../properties/style-properties/PositionProperty';
+import WidthProperty from '../properties/style-properties/bounds/WidthProperty';
+import HeightProperty from '../properties/style-properties/bounds/HeightProperty';
+import TextContentEmpty from '../properties/TextContentEmpty';
+import FontStyleProperty from '../properties/style-properties/font/FontStyleProperty';
+import FontWeightProperty from '../properties/style-properties/font/FontWeightProperty';
+import FontFamilyProperty from '../properties/style-properties/font/FontFamilyProperty';
+import LineHeightProperty from '../properties/style-properties/font/LineHeightProperty';
+import WhiteSpaceProperty from '../properties/style-properties/font/WhiteSpaceProperty';
+import LetterSpacingProperty from '../properties/style-properties/font/LetterSpacingProperty';
+import FontSizeProperty from '../properties/style-properties/font/FontSizeProperty';
+import FontLibrary from '../../font/FontLibrary';
+import SegmentsProperty from '../properties/geometry/SegmentsProperty';
+import InvertAlphaProperty from '../properties/InvertAlphaProperty';
+import FontKerningProperty from '../properties/style-properties/font/FontKerningProperty';
+import InheritableBooleanProperty from '../properties/InheritableBooleanProperty';
+import InheritableMaterialProperty from '../properties/InheritableMaterialProperty';
+import { directTransferNotNull } from '../../utils/mediator/transformers/CommonTransformers';
+import { uniformOrUserDataTransformer } from '../../utils/mediator/transformers/MaterialTransformers';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Color, Texture, Vector4, Mesh, Material, ShaderMaterial } from 'three';
+import BaseProperty from './../properties/BaseProperty';
+import FontFamily from '../../font/FontFamily';
+import { DefaultValues } from '../../three-mesh-ui';
+import VerticalAlignProperty from '../properties/style-properties/font/VerticalAlignProperty';
+/* eslint-enable no-unused-vars */
+
+export default class MeshUIBaseElement extends Object3D {
+
+	/**
+	 *
+	 * @param {Properties} properties
+	 * @param {Options} values
+	 */
+	constructor( properties, values) {
+
+		super();
+
+		Object.defineProperties( this, {
+				isUI: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+		let uiType = values.uiType || 'default';
+		if( values.uiType ){
+			delete values.uiType;
+		}
+
+		Object.defineProperties( this, {
+				uiType: {
+					configurable: false,
+					enumerable: true,
+					value: uiType
+				}
+			}
+		);
+
+		/**
+		 *
+		 * @type {Mesh|null}
+		 * @internal
+		 */
+		this._backgroundMesh = null;
+
+		/**
+		 *
+		 * @type {Material}
+		 * @internal
+		 */
+		this._backgroundMaterial = null;
+
+		/**
+		 *
+		 * @type {Material}
+		 * @protected
+		 */
+		this._backgroundCustomDepthMaterial = null;
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(target:any, targetProperty:string, value:any) => void}>}
+		 * @protected
+		 */
+		this._backgroundMaterialMediation = {};
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(value:any) => any}>}
+		 * @private
+		 */
+		this._backgroundMeshMediation = {
+			backgroundCastShadow: { m: 'castShadow' },
+			backgroundReceiveShadow: { m: 'receiveShadow' },
+			renderOrder: {m: 'renderOrder' }
+		};
+
+		/**
+		 *
+		 * @type {Mesh|null}
+		 * @internal
+		 */
+		this._fontMesh = null;
+
+		/**
+		 *
+		 * @type {InheritableMaterialProperty}
+		 * @internal
+		 */
+		this._fontMaterial = new InheritableMaterialProperty('fontMaterial');
+
+		/**
+		 *
+		 * @type {InheritableMaterialProperty}
+		 * @private
+		 */
+		this._fontCustomDepthMaterial = new InheritableMaterialProperty('fontCustomDepthMaterial');
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(value:any) => any}>}
+		 * @private
+		 */
+		this._fontMeshMediation = {
+			fontMaterial: { m: 'material' },
+			fontCustomDepthMaterial: { m : 'customDepthMaterial', t:directTransferNotNull},
+			fontCastShadow: { m: 'castShadow' },
+			fontReceiveShadow: { m: 'receiveShadow' },
+			renderOrder: {m: 'renderOrder' }
+		};
+
+		// Children lists
+
+
+		const defaults = DefaultValues.get(null, this.uiType );
+		/**
+		 *
+		 * @type {EmptyProperty|ChildrenBox|ChildrenText}
+		 * @internal
+		 */
+		this._children = properties.children ? new properties.children : new EmptyProperty("children");
+		this._parent = new ParentProperty();
+
+		// update parentUI when this component will be added or removed
+		this.addEventListener( 'added', this._rebuildParentUI );
+		this.addEventListener( 'removed', this._rebuildParentUI );
+
+		//material properties
+		this._backgroundSide = new SideProperty( 'backgroundSide', defaults.backgroundSide );
+		this._fontSide = new SideProperty( 'fontSide', defaults.fontSide );
+		this._backgroundAlphaTest = new NumberProperty( 'backgroundAlphaTest', defaults.backgroundAlphaTest );
+		this._fontAlphaTest = new NumberProperty( 'fontAlphaTest', defaults.fontAlphaTest );
+
+		// mesh properties
+		this._visible = new VisibleProperty( 'visible', true );
+
+		this._backgroundCastShadow = new InheritableBooleanProperty( 'backgroundCastShadow' );
+		this._fontCastShadow = new InheritableBooleanProperty( 'fontCastShadow' );
+		this._backgroundReceiveShadow = new InheritableBooleanProperty( 'backgroundReceiveShadow' );
+		this._fontReceiveShadow = new InheritableBooleanProperty( 'fontReceiveShadow' );
+
+		// @TODO: RenderOrder for background and fonts
+		this._renderOrder = new RenderOrderProperty();
+
+		// @TODO : background & Text
+		this._segments = properties.segments ? new properties.segments() : new SegmentsProperty();
+
+
+		/**
+		 *
+		 * @type {BoundsBox|BoundsText|EmptyProperty}
+		 * @ignore
+		 * @internal
+		 */
+		this._bounds = properties.bounds ? new properties.bounds() : new EmptyProperty("bounds");
+
+		// styles ---;
+
+		this._order = new OrderProperty();
+
+		this._padding = new PaddingProperty( defaults.padding );
+		this._margin = new MarginProperty( defaults.margin );
+
+
+		this._position = new PositionProperty( defaults.position );
+
+		/**
+		 *
+		 * @type {FlexDirectionProperty}
+		 * @internal
+		 */
+		this._flexDirection = properties.flexDirection ? new properties.flexDirection() : new FlexDirectionProperty();
+
+		this._justifyContent = properties.justifyContent ? new properties.justifyContent() : new JustifyContentProperty();
+
+		this._alignItems = properties.alignItems ? new properties.alignItems() : new AlignItemsProperty();
+
+		this._display = new Display( 'flex' );
+
+		this._boxSizing = new BoxSizing( 'border-box' );
+		this._width = new WidthProperty();
+		this._height = new HeightProperty();
+
+		this._backgroundColor = properties.backgroundColor ? new properties.backgroundColor( defaults.backgroundColor ) : new BackgroundColorProperty(defaults.backgroundColor);
+		this._backgroundOpacity = new StyleFactorProperty('backgroundOpacity', defaults.backgroundOpacity);
+		this._backgroundImage = new BackgroundImage();
+		this._backgroundSize = new BackgroundSize( 'cover' );
+
+		this._color = properties.color ? new properties.color( defaults.color ) : new StyleColorProperty('color', defaults.color);
+		this._fontOpacity = new StyleFactorProperty( 'fontOpacity', 'inherit');
+
+		this._whiteSpace = properties.whiteSpace ? new properties.whiteSpace() : new WhiteSpaceProperty();
+
+		this._fontFamily = properties.fontFamily ? new properties.fontFamily() : new FontFamilyProperty();
+		this._fontStyle = properties.fontStyle ? new properties.fontStyle(defaults.fontStyle) : new FontStyleProperty( defaults.fontStyle );
+		this._fontWeight = properties.fontWeight ? new properties.fontWeight( defaults.fontWeight ) : new FontWeightProperty(defaults.fontWeight);
+		this._fontSize = properties.fontSize ? new properties.fontSize() : new FontSizeProperty();
+
+		this._lineHeight = properties.lineHeight ? new properties.lineHeight() : new LineHeightProperty();
+
+		this._fontKerning = properties.fontKerning ? new properties.fontKerning() : new FontKerningProperty();
+		this._letterSpacing = properties.letterSpacing ? new properties.letterSpacing() : new LetterSpacingProperty();
+
+		this._overflow = new Overflow( 'visible' );
+
+		this._borderRadius = new BorderRadius( defaults.borderRadius );
+		this._borderWidth = new BorderWidth( defaults.borderWidth );
+		this._borderColor = properties.borderColor ? new properties.borderColor() : new StyleColorProperty( 'borderColor', defaults.borderColor );
+		this._borderOpacity = new StyleFactorProperty( 'borderOpacity', defaults.borderOpacity);
+
+		// styles ---;
+
+		this._font = new FontProperty();
+
+		this._lineBreak = properties.lineBreak ? new properties.lineBreak() : new EmptyProperty("lineBreak");
+
+		/**
+		 *
+		 * @type {TextContentEmpty|TextContentText|TextContentInline}
+		 * @internal
+		 */
+		this._textContent = properties.textContent ? new properties.textContent() : new TextContentEmpty();
+
+		/**
+		 *
+		 * @type {GlyphsProperty}
+		 * @internal
+		 */
+		this._glyphs = properties.glyphs ? new properties.glyphs() : new EmptyProperty("glyphs");
+
+		this._inlines = properties.inlines ? new properties.inlines() : new EmptyProperty("inlines");
+
+
+		/**
+		 *
+		 * @type {BoxLayouter|TextLayouter|EmptyProperty}
+		 * @internal
+		 */
+		this._layouter = properties.layouter ? new properties.layouter() : new EmptyProperty("layouter");
+
+		this._inlineJustificator = new InlineJustificator();
+
+		this._textAlign = properties.textAlign ? new properties.textAlign() : new TextAlignProperty();
+
+		this._verticalAlign = properties.verticalAlign ? new properties.verticalAlign() : new VerticalAlignProperty();
+
+		this._autoSize = properties.autoSize ? new properties.autoSize() : new EmptyProperty("autoSize");
+
+		this._renderer = properties.renderer ? new properties.renderer() : new EmptyProperty("renderer");
+
+		this._offset = new OffsetProperty();
+
+		// adds
+		this._invertAlpha = new InvertAlphaProperty();
+		this._fontSmooth = properties.fontSmooth ? new properties.fontSmooth() : new FontSmoothProperty();
+
+		/**
+		 *
+		 * @type {Array.<BaseProperty>}
+		 * @internal
+		 */
+		this._components = [
+
+			this._textContent,
+			this._children,
+			this._parent,
+
+
+			this._autoSize,
+
+
+			this._fontFamily,
+			this._fontStyle,
+			this._fontWeight,
+			this._font,
+
+			this._whiteSpace,
+
+
+			this._glyphs,
+
+			this._inlines,
+
+			this._visible,
+
+			// Meshes interfaces
+			this._backgroundSide,
+			this._fontSide,
+			this._backgroundAlphaTest,
+			this._fontAlphaTest,
+			this._backgroundCastShadow,
+			this._fontCastShadow,
+			this._backgroundReceiveShadow,
+			this._fontReceiveShadow,
+			this._renderOrder,
+			this._segments,
+			// styles ---;
+
+			this._fontSize,
+
+			this._padding,
+			this._margin,
+			this._width,
+			this._height,
+			this._borderWidth,
+			this._boxSizing,
+
+			this._bounds,
+
+			this._position,
+
+
+			this._flexDirection,
+			this._justifyContent,
+			this._alignItems,
+			this._order,
+
+
+			this._display,
+
+			this._fontOpacity,
+			this._color,
+
+			this._backgroundColor,
+			this._backgroundOpacity,
+			this._backgroundImage,
+			this._backgroundSize,
+
+
+
+			// font : update order : WhiteSpace > Glyph > Inlines > Kerning > newlineBreakability > LineBreak > FontSize
+			// font : process order : ??
+			// this._font,
+
+
+			this._lineHeight,
+			this._fontKerning,
+			this._letterSpacing,
+
+			this._borderRadius,
+			this._borderColor,
+			this._borderOpacity,
+
+			// this._styles,
+			// styles ---;
+			this._lineBreak,
+			this._offset,
+
+			this._verticalAlign,
+			this._layouter,
+
+			this._inlineJustificator,
+			this._textAlign,
+
+
+			// !! this._renderer renderer MUST NOT BE in components !!
+
+			this._invertAlpha,
+			this._fontSmooth,
+
+			this._fontMaterial,
+			this._fontCustomDepthMaterial,
+			this._overflow,
+			this._renderer,
+
+		]
+
+
+		/**
+		 *
+		 * @type {*[]}
+		 * @private
+		 */
+		this._onAfterUpdates = [];
+
+
+		// breaks inheritance chains
+		// if( !values ) values = {};
+		if( !values.backgroundSide ) values.backgroundSide = 0; // FrontSide
+
+
+		if( values ) this.set( values );
+
+	}
+
+
+	///////////////
+	///  UPDATE
+	///////////////
+
+	update( ) {
+
+
+		// console.log( "Update Element", this.name , this.constructor.name );
+
+		const out = {};
+		for ( const component of this._components ) {
+
+			if( component._needsUpdate ) {
+
+				// console.log( '    ', component.id )
+				component.update( this, out );
+				component._needsUpdate = false;
+
+			}
+
+		}
+
+		this._transferToBackgroundMesh( out );
+		this._transferToFontMesh( out );
+
+		this._transferToBackgroundMaterial( out );
+		this._transferToFontMaterial( out );
+
+
+		// update children
+		for ( const child of this._children._uis ) {
+			child.update();
+		}
+
+	}
+
+	process() {
+
+		// process first time : Natural size
+		for ( const child of this._children._uis ) {
+			child.process();
+		}
+
+
+		// console.log( 'Process ', this.name );
+		for ( const component of this._components ) {
+
+			if( component._needsProcess ) {
+
+				// console.log( '    ', component.id );
+				component.process( this );
+				component._needsProcess = false;
+
+			}
+
+		}
+
+	}
+
+	render() {
+
+		// console.log( 'render ', this.name );
+		for ( let i = 0; i < this._components.length; i++ ) {
+			const component = this._components[ i ];
+			if( component._needsRender ) {
+				// console.log( '    ', component.id);
+				component.render( this );
+				component._needsRender = false;
+			}
+		}
+
+		// render all children
+		for ( const child of this._children._uis ) {
+			child.render();
+		}
+
+	}
+
+
+	/**
+	 *
+	 * @param {Options} options
+	 */
+	set( options ) {
+
+		// Retro compatibility, when not recommended way
+		// 2. < v7.x.x way
+		if( options.fontTexture ) {
+
+			console.warn( "ThreeMeshUI::set( {fontTexture} ) is deprecated. Please use fontLibrary to register font families and variants.")
+
+			if( options.fontFamily ) {
+
+				// Set from old way, check if that family is already registered
+				const fontName = options.fontFamily.pages ? options.fontFamily.info.face : options.fontFamily;
+
+				let fontFamily = FontLibrary.getFontFamily( fontName );
+
+				if ( !fontFamily ) {
+
+					const fontStyle = options.fontStyle ? options.fontStyle : 'normal';
+					// const fontWeight = options.fontWeight ? options.fontWeight : '400';
+					const fontWeight = options.fontWeight ? options.fontWeight : 'normal';
+
+					fontFamily = FontLibrary.addFontFamily( fontName )
+						.addVariant( fontWeight, fontStyle, options.fontFamily, options.fontTexture );
+
+				}
+
+				options['fontFamily'] = fontFamily;
+
+				delete options['fontTexture'];
+
+			}
+
+		}
+
+
+
+		for ( let prop of Object.keys( options ) ) {
+
+			const value = options[prop];
+
+			// 1. replace deprecated properties
+			switch ( prop ){
+				case 'contentDirection':
+					console.warn('ThreeMeshUI v7xx: property `contentDirection` is deprecated and has been renamed as `flexDirection`');
+					prop = 'flexDirection';
+					break;
+
+				case 'interLine':
+					console.warn('ThreeMeshUI v7xx: property `interLine` is deprecated and has been renamed as `lineHeight`');
+					prop = 'lineHeight';
+					break;
+
+				case 'content':
+					console.warn( 'ThreeMeshUI v7xx: property `content` is deprecated and has been renamed as `textContent`');
+					prop = 'textContent';
+					break;
+
+				case 'fontColor':
+					console.warn( 'ThreeMeshUI v7xx: property `fontColor` is deprecated and has been renamed as `color`');
+					prop = 'color';
+					break;
+
+				case 'hiddenOverflow':
+					console.warn( 'ThreeMeshUI v7xx: property `hiddenOverflow` is deprecated and has been renamed as `overflow`');
+					prop = 'overflow';
+					break;
+
+				case 'backgroundTexture':
+					console.warn( 'ThreeMeshUI v7xx: property `backgroundTexture` is deprecated and has been renamed as `backgroundImage`');
+					prop = 'backgroundImage';
+					break;
+
+				case 'alignContent':
+					console.warn( 'ThreeMeshUI v7xx: property `alignContent` is deprecated and has been renamed as `alignItems`');
+					prop = 'alignItems';
+					break;
+
+				case "borderTopColor":
+				case "borderBottomColor":
+				case "borderLeftColor":
+				case "borderRightColor":
+					prop = 'borderColor';
+					break;
+			}
+
+				switch ( prop ) {
+
+				// properties
+
+				// As textContent property might alter the hierarchy, do not wait until update
+				// 	case 'textContent' :
+
+					case 'fontSmooth':
+					case 'renderOrder':
+					case 'segments' :
+					case 'visible' :
+					case 'offset':
+						this[`_${prop}`].value = value;
+						break;
+
+					// styles properties
+					case 'flexDirection' :
+					case 'justifyContent' :
+					case 'alignItems' :
+					case 'color' :
+					case 'fontFamily' :
+					case 'fontOpacity' :
+					case 'fontKerning' :
+					case 'fontSize' :
+					case 'fontStyle' :
+					case 'fontWeight' :
+					case 'textAlign' :
+					case 'letterSpacing' :
+					case 'lineHeight' :
+					case 'whiteSpace':
+					case 'breakOn': // Not valid anymore?
+					case 'width' :
+					case 'height' :
+					case 'padding':
+					case 'margin' :
+					case 'backgroundColor' :
+					case 'backgroundOpacity' :
+					case 'backgroundImage' :
+					case 'backgroundSize' :
+					case 'borderColor' :
+					case 'borderOpacity' :
+					case 'borderRadius' :
+					case 'borderWidth':
+					case 'overflow' :
+					case 'order':
+					case 'boxSizing':
+					case 'position':
+					case 'verticalAlign':
+						if( this[`_${prop}`] ){
+							this[`_${prop}`].inline = value;
+						}
+						break;
+
+					case 'paddingTop':
+						this._padding.top = value;
+						break;
+					case 'paddingRight':
+						this._padding.right = value;
+						break;
+					case 'paddingBottom':
+						this._padding.bottom = value;
+						break;
+					case 'paddingLeft':
+						this._padding.left = value;
+						break;
+
+					case 'marginTop':
+						this._margin.top = value;
+						break;
+					case 'marginRight':
+						this._margin.right = value;
+						break;
+					case 'marginBottom':
+						this._margin.bottom = value;
+						break;
+					case 'marginLeft':
+						this._margin.left = value;
+						break;
+
+					case 'borderTopWidth':
+						this._borderWidth.top = value;
+						break;
+					case 'borderRightWidth':
+						this._borderWidth.right = value;
+						break;
+					case 'borderBottomWidth':
+						this._borderWidth.bottom = value;
+						break;
+					case 'borderLeftWidth':
+						this._borderWidth.left = value;
+						break;
+
+					case 'borderTopLeftRadius':
+						this._borderRadius.topLeft = value;
+						break;
+					case 'borderTopRightRadius':
+						this._borderRadius.topRight = value;
+						break;
+					case 'borderBottomRightRadius':
+						this._borderRadius.bottomRight = value;
+						break;
+					case 'borderBottomLeftRadius':
+						this._borderRadius.bottomLeft = value;
+						break;
+
+
+					// Back & Front linked properties
+					case 'side':
+					case 'castShadow':
+					case 'receiveShadow':
+						const upperCamelCaseProperty = prop.charAt(0).toUpperCase()+prop.substr(1);
+						this[`_background${upperCamelCaseProperty}`].value = value;
+						this[`_font${upperCamelCaseProperty}`].value = value;
+						break;
+
+
+						// Meshes & material properties
+					case 'fontSide':
+					case 'backgroundSide':
+					case 'fontCastShadow':
+					case 'backgroundCastShadow':
+					case 'fontReceiveShadow':
+					case 'backgroundReceiveShadow':
+					case 'fontMaterial':
+					case 'fontCustomDepthMaterial':
+						this[`_${prop}`].value = value;
+						break;
+
+
+					default:
+
+						console.log(prop)
+
+						if( this[ prop ] !== undefined ) {
+
+							console.log(`--		${prop} has setter`)
+
+							this[ prop ] = value
+						}else if( this[`_${prop}`] !== undefined ) {
+							this[`_${prop}`].value = value;
+						} else {
+							// error
+						}
+				}
+
+		}
+
+	}
+
+	get ( property ) {
+
+		switch ( property ) {
+
+			case 'overflow':
+			case 'width' :
+			case 'height' :
+				return this[`_${property}`].inline;
+		}
+
+	}
+
+	/**
+	 * Filters children in order to compute only one times children lists
+	 * @private
+	 */
+	_rebuildChildrenLists() {
+
+		//console.log( this.name, 'child added' );
+		this._children._needsUpdate = true;
+
+	}
+
+	/**
+	 * Try to retrieve parentUI after each structural change
+	 * @protected
+	 */
+	_rebuildParentUI = () => {
+
+		this._parent._needsUpdate = true;
+
+		// set elements as root
+		if ( this.parent && !this.parent.isUI ) {
+
+			UpdateManager.register( this );
+			this.activatePseudoState('root');
+
+		} else {
+
+			UpdateManager.remove( this );
+			this.deactivatePseudoState('root');
+		}
+
+
+	};
+
+	/**
+	 * When the user calls component.add, it registers for updates,
+	 * then call THREE.Object3D.add.
+	 */
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) {
+
+		let addedUIChildren = false;
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			super.add( arguments[ i ] );
+
+			if( arguments[i].isUI ) {
+				addedUIChildren = true;
+			}
+
+		}
+
+		if( addedUIChildren ) this._rebuildChildrenLists();
+
+		return this;
+
+	}
+
+
+	/**
+	 * When the user calls component.remove, it registers for updates,
+	 * then call THREE.Object3D.remove.
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	remove( object ) {
+
+		for ( const id of Object.keys( arguments ) ) {
+
+			// An inline component relies on its parent for positioning
+			if ( arguments[ id ].isInline ) this.update( null, true );
+
+		}
+
+		super.remove( ...arguments );
+
+		this._rebuildChildrenLists();
+
+		return this;
+
+	}
+
+	/**
+	 *
+	 * @return {Object3D}
+	 */
+	clear() {
+
+		this.removeFromParent();
+
+		this.traverse( ( obj ) => {
+
+			if ( obj.material ) obj.material.dispose();
+			if ( obj.geometry ) obj.geometry.dispose();
+
+		} );
+
+		super.clear();
+
+		// remove properties
+		this._backgroundMesh = null;
+		this._backgroundMaterial = null;
+		this._backgroundMaterialMediation = null;
+		this._backgroundMeshMediation = null;
+
+		this._children.dispose();
+		this._children = null;
+
+		this._parent.dispose();
+		this._parent = null;
+
+		this._backgroundSide = null;
+		this._backgroundAlphaTest = null;
+		this._visible = null;
+		this._backgroundCastShadow = null;
+		this._backgroundReceiveShadow = null;
+		this._renderOrder = null;
+		this._segments = null;
+		this._bounds = null;
+
+		// styles properties
+		this._boxSizing = null;
+		this._padding = null;
+		this._margin = null;
+		this._position = null;
+		this._flexDirection = null;
+		this._justifyContent = null;
+		this._alignItems = null;
+		this._display = null;
+		this._backgroundColor = null;
+		this._backgroundOpacity = null;
+		this._backgroundSize = null;
+		this._fontOpacity = null;
+		this._color = null;
+		this._whiteSpace = null;
+		this._fontFamily = null;
+		this._fontStyle = null;
+		this._fontWeight = null;
+		this._lineHeight = null;
+		this._fontKerning = null;
+		this._letterSpacing = null;
+		this._overflow = null;
+		this._textAlign = null;
+
+		this._font = null;
+		this._lineBreak = null;
+		this._layouter = null;
+
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	get textContent() {
+
+		this._textContent.process( this );
+
+		return this._textContent._value;
+
+	}
+
+	/***********************************************************************************************************************
+	 * TO MATERIAL HOLDER
+	 **********************************************************************************************************************/
+
+	/**
+	 *
+	 * @returns {Material|ShaderMaterial}
+	 */
+	get backgroundMaterial() { return this._backgroundMaterial; }
+
+	/**
+	 *
+	 * @param {Material|ShaderMaterial} material
+	 */
+	set backgroundMaterial( material ) {
+
+		this._backgroundMaterial = material;
+
+		// Update the fontMaterialProperties that need to be transferred to
+		this._backgroundMaterialMediation = { ...material.constructor.mediation };
+
+		// transfer all the properties to material
+		this._transferToBackgroundMaterial();
+
+		if ( this._backgroundMesh ) {
+
+			this._backgroundMesh.material = this._backgroundMaterial;
+			uniformOrUserDataTransformer( material, 'frameSize', this._backgroundMesh.scale );
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @param {Material|null} material
+	 */
+	set backgroundCustomDepthMaterial( material ) {
+
+		this._backgroundCustomDepthMaterial = material;
+
+		this._transferToBackgroundMaterial();
+
+		if ( this._backgroundMesh ) {
+			// transfer to the main if isset
+			this._backgroundMesh.customDepthMaterial = this._backgroundCustomDepthMaterial;
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @returns {Material|null}
+	 */
+	get backgroundCustomDepthMaterial() { return this._backgroundCustomDepthMaterial; }
+
+	/**
+	 * According to the list of materialProperties
+	 * some properties are sent to material
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToBackgroundMaterial( options = null ) {
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+		}
+
+		Mediator.mediate( this, this._backgroundMaterial, options, this._backgroundMaterialMediation, this._backgroundCustomDepthMaterial );
+
+	}
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set backgroundSide( value ) {
+
+		this._backgroundSide.value = value;
+
+		if ( this._backgroundMaterial ) this._backgroundMaterial.side = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get backgroundSide() { return this._backgroundSide.value; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set backgroundAlphaTest ( value ) {
+
+		this._backgroundAlphaTest.value = value;
+
+		if( this._backgroundMaterial ) this._backgroundMaterial.alphaTest = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get backgroundAlphaTest () { return this._backgroundAlphaTest.value; }
+
+	/** Font Material ----------------------------------------------------------*/
+
+	/**
+	 *
+	 * @returns {Material|ShaderMaterial}
+	 */
+	// get fontMaterial() { return this._fontMaterial__; }
+	get fontMaterial() { return this._fontMaterial.value; }
+
+	/**
+	 *
+	 * @param {Material|ShaderMaterial} material
+	 */
+	set fontMaterial( material ) {
+
+		this._fontMaterial.value = material;
+
+	}
+
+	/**
+	 *
+	 * @param {Material|null} material
+	 */
+	set fontCustomDepthMaterial( material ) {
+
+		this._fontCustomDepthMaterial.value = material;
+
+	}
+
+	/**
+	 *
+	 * @returns {Material|null}
+	 */
+	get fontCustomDepthMaterial() { return this._fontCustomDepthMaterial.value; }
+
+	/**
+	 * According to the list of materialProperties
+	 * some properties are sent to material
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToFontMaterial( options = null ) {
+
+		const fontMat = this._fontMaterial.value;
+		if( !fontMat ) return;
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+		}
+
+		Mediator.mediate( this, fontMat, options, this._fontMaterial._mediation, this._fontCustomDepthMaterial.value );
+
+	}
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set fontSide( value ) {
+
+		this._fontSide.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get fontSide() { return this._fontSide.value; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set fontAlphaTest ( value ) {
+
+		this._fontAlphaTest.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get fontAlphaTest () { return this._fontAlphaTest.value; }
+
+	/*********************************************************************************************************************
+	 * MESH MEDIATION
+	 ********************************************************************************************************************/
+
+	/**
+	 * According to the list of meshProperties
+	 * some properties are sent to mesh
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToBackgroundMesh( options = null ) {
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+
+		}
+
+		Mediator.mediate( this, this._backgroundMesh, options, this._backgroundMeshMediation );
+
+	}
+
+	/**
+	 * @internal
+	 * @param {Mesh|Array.<Mesh>|null} mesh
+	 */
+	setBackgroundMesh( mesh ) {
+
+		if( this._backgroundMesh ) {
+
+			this.remove( this._backgroundMesh );
+			this.unbindBackgroundMeshProperties();
+
+		}
+
+		this._backgroundMesh = mesh;
+
+		if ( this._backgroundMesh ) {
+
+			this.bindBackgroundMeshProperties();
+
+			if( this._backgroundCustomDepthMaterial ) {
+				this._backgroundMesh.customDepthMaterial = this._backgroundCustomDepthMaterial;
+			}
+
+			if( this._backgroundMaterial ) {
+				uniformOrUserDataTransformer( this._backgroundMaterial, 'frameSize', this._backgroundMesh.scale );
+			}
+
+			this._transferToBackgroundMesh();
+
+			this.add( this._backgroundMesh );
+
+		}
+
+	}
+
+	/**
+	 *
+	 */
+	bindBackgroundMeshProperties () { }
+
+	/**
+	 *
+	 */
+	unbindBackgroundMeshProperties () { }
+
+
+	activatePseudoState ( state ) {
+
+	}
+
+	deactivatePseudoState ( state ) {
+
+	}
+
+	togglePseudoState ( state ) {
+
+	}
+
+
+	hasPseudoState( state ) {
+		return false;
+	}
+
+	set borderRadiusMediation ( value ) {
+		this._borderRadius.mediation = value;
+	}
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set backgroundCastShadow( value ) {
+
+		if( this._backgroundCastShadow ) this._backgroundCastShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get backgroundCastShadow() { return this._backgroundCastShadow; }
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set backgroundReceiveShadow( value ) {
+
+		if( this._backgroundReceiveShadow ) this._backgroundReceiveShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get backgroundReceiveShadow() { return this._backgroundReceiveShadow; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set renderOrder( value ) {
+
+		if( this._renderOrder ) this._renderOrder.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get renderOrder() { return this._renderOrder.value; }
+
+	/** Font Mesh --------------------------------------------------------------*/
+
+	/**
+	 * According to the list of meshProperties
+	 * some properties are sent to mesh
+	 * @param {Object} [options=null]
+	 * @private
+	 */
+	_transferToFontMesh( options = null ) {
+
+		if( !this._fontMesh ) return;
+
+		if( !options ) {
+
+			options = {};
+
+			for ( const component of this._components ) {
+				component.output( options );
+			}
+
+		}
+
+		Mediator.mediate( this, this._fontMesh, options, this._fontMeshMediation );
+
+	}
+
+	/**
+	 * @internal
+	 * @param {Mesh|Array.<Mesh>|null} mesh
+	 */
+	setFontMesh( mesh ) {
+
+		if( this._fontMesh ) {
+
+			this.remove( this._fontMesh );
+
+			if ( this._fontMesh.material ) this._fontMesh.material.dispose?.();
+			if ( this._fontMesh.geometry ) this._fontMesh.geometry.dispose?.();
+
+			this._fontMesh = null;
+			// deepDelete( this._fontMesh );
+
+			this.unbindFontMeshProperties();
+
+		}
+
+		this._fontMesh = mesh;
+
+		if ( this._fontMesh ) {
+
+			this._fontMesh.raycast = () => {};
+
+			this.bindFontMeshProperties();
+
+			this._transferToFontMaterial();
+			this._transferToFontMesh();
+
+			this.add( this._fontMesh );
+
+		}
+
+	}
+
+	/**
+	 *
+	 */
+	bindFontMeshProperties () { }
+
+	/**
+	 *
+	 */
+	unbindFontMeshProperties () { }
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set fontCastShadow( value ) {
+
+		if( this._fontCastShadow ) this._fontCastShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get fontCastShadow() { return this._fontCastShadow; }
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set fontReceiveShadow( value ) {
+
+		if( this._fontReceiveShadow ) this._fontReceiveShadow.value = value;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get fontReceiveShadow() { return this._fontReceiveShadow; }
+
+	/***********************************************************************************************************************
+	 * GEOMETRY
+	 **********************************************************************************************************************/
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set segments (v) {
+
+		this._segments.value = v;
+
+		// @TODO : Geometry Update
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get segments () { return this._segments.value; }
+
+
+	/***********************************************************************************************************************
+	 * HOOKS & ALTERS
+	 **********************************************************************************************************************/
+
+	/**
+	 *
+	 * @param {Function} func
+	 */
+	set onAfterUpdate( func ) {
+
+		console.warn( 'ThreeMeshUI v7xx : `onAfterUpdate()` property has been deprecated, please rely on `addAfterUpdate` instead.' );
+		this.addAfterUpdate( func );
+
+	}
+
+	/**
+	 *
+	 * @param {Function} func
+	 */
+	addAfterUpdate( func ) {
+
+		this._onAfterUpdates.push( func );
+
+	}
+
+	/**
+	 *
+	 * @param {Function} func
+	 */
+	removeAfterUpdate( func ) {
+
+		const index = this._onAfterUpdates.indexOf( func );
+		if ( index !== -1 ) {
+
+			this._onAfterUpdates.splice( index, 1 );
+
+		}
+
+	}
+
+	/**
+	 * @todo: afterUpdate not called anymore
+	 */
+	performAfterUpdate() {
+
+		for ( let i = 0; i < this._onAfterUpdates.length; i++ ) {
+
+			this._onAfterUpdates[ i ]();
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @param {string} name
+	 * @param {BaseProperty} instance
+	 * @returns {void}
+	 */
+	appendProperty( name, instance ) {
+
+		this[`_${name}`] = instance;
+		this._components.push( instance );
+
+	}
+
+	/**
+	 *
+	 * @param {string} name
+	 * @param {BaseProperty} instance
+	 * @returns {BaseProperty}
+	 */
+	replaceProperty( name, instance ) {
+
+		const oldProperty = this[`_${name}`];
+
+		const index = this._components.indexOf( oldProperty );
+
+		this._components[index] = this[`_${name}`] = instance;
+		instance.needsUpdate = true;
+
+		return oldProperty;
+
+	}
+
+}
+
+/**
+ * @typedef Properties
+ * @type {Object.<string,Function>}
+ */
+
+/**
+ * @typedef Options
+ * @type {DocumentedOptions & Object.<string,any>}
+ */
+
+/**
+ *
+ * @typedef {Object} DocumentedOptions
+ *
+ * @property [options.name] {string}
+ * @property [options.flexDirection] {"row"|"row-reverse"|"column"|"column-reverse"}
+ * @property [options.justifyContent] {"start"|"center"|"end"|"space-around"|"space-between"|"space-evenly"}
+ * @property [options.alignItems] {"start"|"center"|"end"|"stretch"}
+ * @property [options.overflow] {"visible"|"hidden"}
+ * @property [options.fontKerning] {"normal"|"none"}
+ * @property [options.segments] {number}
+ * @property [options.fontFamily] {FontFamily|string}
+ * @property [options.fontStyle] {"normal"|"italic"}
+ * @property [options.fontWeight] {"light"|"normal"|"bold"|"bolder"|100|200|300|400|500|600|700|800|900}
+ *
+ * @property [options.color]{Color|number|string} The font color
+ *
+ * @property [options.backgroundColor]{Color|number|string} The background color
+ * @property [options.backgroundOpacity] {number}
+ * @property [options.backgroundSize] {"cover"|"contain"|"stretch"}
+ * @property [options.backgroundImage] {Texture|string}
+ *
+ *
+ * @property [options.borderRadius] {Vector4|Array.<number>|number|string}
+ * @property [options.borderWidth] {Vector4|Array.<number>|number|string}
+ * @property [options.borderColor] {Color|number|string}
+ *
+ * @property [options.boxSizing] {"content-box"|"border-box"}
+ * @property [options.width] {number|string|"100%"|"auto"}
+ * @property [options.height] {number|string|"100%"|"auto"}
+ * @property [options.padding] {Vector4|Array.<number>|number|string}
+ * @property [options.margin] {Vector4|Array.<number>|number|string}
+ *
+ * @property [options.textAlign] {"left"|"right"|"center"|"justify"|"justify-left"|"justify-right"}
+ * @property [options.visible] {boolean}
+ * @property [options.letterSpacing] {number}
+ *
+ * @property [options.whiteSpace] {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"}
+ * @property [options.fontTexture] {Texture|string} @deprecated
+ * @property [options.textContent] {string}
+ *
+ * @property [options.verticalAlign] {"baseline","super","sub","inherit"}
+ *
+ *
+ */
diff --git a/src/components/core/Inline.js b/src/core/elements/glyphs/Inline.js
similarity index 96%
rename from src/components/core/Inline.js
rename to src/core/elements/glyphs/Inline.js
index 21845202..f644e5b3 100644
--- a/src/components/core/Inline.js
+++ b/src/core/elements/glyphs/Inline.js
@@ -70,7 +70,7 @@ export default class Inline {
 	 *
 	 * @param {string|null} value
 	 */
-	set lineBreak( value ){
+	set lineBreak( value ) {
 
 		this._lineBreak = value;
 
@@ -254,5 +254,9 @@ export default class Inline {
 
 	}
 
-	get fontFactor() { return this._fontFactor };
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get fontFactor() { return this._fontFactor }
 }
diff --git a/src/components/core/Line.js b/src/core/elements/glyphs/Line.js
similarity index 100%
rename from src/components/core/Line.js
rename to src/core/elements/glyphs/Line.js
diff --git a/src/components/core/Lines.js b/src/core/elements/glyphs/Lines.js
similarity index 100%
rename from src/components/core/Lines.js
rename to src/core/elements/glyphs/Lines.js
diff --git a/src/core/properties/AutoSizePropertyBox.js b/src/core/properties/AutoSizePropertyBox.js
new file mode 100644
index 00000000..bbac7be1
--- /dev/null
+++ b/src/core/properties/AutoSizePropertyBox.js
@@ -0,0 +1,251 @@
+import BaseProperty from './BaseProperty';
+
+/**
+ * Autosize are only trigger when natural size changed
+ */
+export default class AutoSizePropertyBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'autosize' );
+
+		this._needsProcess = true;
+	}
+
+	process( element ) {
+
+		// if( parent ) return;
+
+
+		// has auto size get the height from children
+		if ( element._width._auto ) _processAutoWidth( element );
+		if ( element._height._auto ) _processAutoHeight( element );
+
+		const stretch = element._alignItems._value === 'stretch';
+		const stretchChildrenWidth = stretch && element._flexDirection._value.indexOf( 'column' ) !== -1;
+		const stretchChildrenHeight = stretch && !stretchChildrenWidth;
+
+		for ( const box of element._children._boxes ) {
+
+			if ( ( box._width._auto && stretchChildrenWidth ) || box._width._relative ) {
+
+				box._bounds.setReferenceWidth( box, element._bounds._innerWidth );
+
+			}
+
+			if ( ( box._height._auto && stretchChildrenHeight ) || box._height._relative ) {
+
+				box._bounds.setReferenceHeight( box, element._bounds._innerHeight );
+
+			}
+
+		}
+
+		// // justify stretch - Not that easy
+		// const stretchD = element._justifyContent._value === 'stretch';
+		// const stretchChildrenWidthD = stretchD && element._flexDirection._value.indexOf( 'row' ) !== -1;
+		// const stretchChildrenHeightD = stretchD && !stretchChildrenWidthD;
+		//
+		//
+		// if ( stretchChildrenWidthD ) {
+		//
+		// 	const used = _computeChildrenSideWidth( element );
+		// 	const available = element._bounds._innerWidth - used;
+		// 	if ( available > 0 ) {
+		//
+		// 		const autoElement = element._children._uis.filter( c => c._width._auto );
+		// 		const distributed = available / autoElement.length;
+		//
+		// 		for ( const child of autoElement ) {
+		//
+		// 			const width = child._bounds._offsetWidth + distributed;
+		// 			child._bounds.setReferenceWidth( child, width );
+		//
+		// 		}
+		//
+		// 		element._layouter._needsProcess = true;
+		// 		element._flexDirection._needsProcess = true;
+		//
+		// 	}
+		//
+		// } else if ( stretchChildrenHeightD ) {
+		//
+		// 	const used = _computeChildrenSideHeight( element );
+		// 	const available = element._bounds._innerHeight - used;
+		// 	if ( available > 0 ) {
+		//
+		// 		const autoElement = element._children._uis.filter( c => c._height._auto );
+		// 		const distributed = available / autoElement.length;
+		//
+		// 		for ( const child of autoElement ) {
+		//
+		// 			const height = child._bounds._offsetHeight + distributed;
+		// 			child._bounds.setReferenceHeight( child, height );
+		//
+		// 		}
+		//
+		// 		element._layouter._needsProcess = true;
+		// 		element._flexDirection._needsProcess = true;
+		//
+		// 	}
+		//
+		// }
+
+
+	}
+
+}
+
+function _processAutoWidth( element ) {
+
+	// column : retrieve the biggest child width
+	// row : retrieve the sum of children width
+	element._bounds.setChildrenWidth( element, _computeAutoWidth( element ) );
+
+}
+
+function _processAutoHeight( element ) {
+
+	// column : retrieve the sum of children height
+	// row : retrieve the biggest child height
+	element._bounds.setChildrenHeight( element, _computeAutoHeight( element ) );
+
+}
+
+/**
+ * Retrieve the automatic height from children boxes
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeAutoHeight( element ) {
+
+	switch ( element._flexDirection._value ) {
+
+		case 'row' :
+		case 'row-reverse' :
+			return _computeHighestChildHeight( element );
+
+
+		case 'column' :
+		case 'column-reverse' :
+			return _computeChildrenSideHeight( element );
+
+	}
+
+}
+
+/**
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ *
+ */
+function _computeAutoWidth( element ) {
+
+	switch ( element._flexDirection._value ) {
+
+		case 'row' :
+		case 'row-reverse' :
+			return _computeChildrenSideWidth( element );
+
+
+		case 'column' :
+		case 'column-reverse' :
+			return _computeHighestChildWidth( element );
+
+	}
+
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideWidth( element ) {
+
+	let sumWidth = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const width = box._bounds._offsetWidth + margin.y + margin.w;
+
+		sumWidth += width;
+
+	}
+
+	return sumWidth;
+
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideHeight( element ) {
+
+	let sumHeight = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const height = box._bounds._offsetHeight + margin.x + margin.z;
+
+		sumHeight += height;
+
+	}
+
+	return sumHeight;
+
+}
+
+/**
+ * Returns the highest linear dimension among all the children of the passed component
+ * MARGIN INCLUDED
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeHighestChildWidth( element ) {
+
+	let maxWidth = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const width = box._bounds._offsetWidth + margin.y + margin.w;
+
+		if ( width > maxWidth ) maxWidth = width;
+
+	}
+
+	return maxWidth;
+
+}
+
+/**
+ * Returns the highest linear dimension among all the children of the passed component
+ * MARGIN INCLUDED
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeHighestChildHeight( element ) {
+
+	let maxHeight = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const height = box._bounds._offsetHeight + margin.x + margin.z;
+
+		if ( height > maxHeight ) maxHeight = height;
+
+	}
+
+	return maxHeight;
+
+}
diff --git a/src/core/properties/AutoSizePropertyText.js b/src/core/properties/AutoSizePropertyText.js
new file mode 100644
index 00000000..09e47226
--- /dev/null
+++ b/src/core/properties/AutoSizePropertyText.js
@@ -0,0 +1,41 @@
+import BaseProperty from './BaseProperty';
+
+/**
+ * Autosize are only trigger when natural size changed
+ */
+export default class AutoSizePropertyText extends BaseProperty {
+
+	constructor() {
+
+		super( 'autosize' );
+
+	}
+
+	process( element ) {
+
+		if( element._layouter._value && element._layouter._value.length ) {
+
+			const lines = element._layouter._value;
+
+			// as this is from children offsetWidth, it means parent innerWidth
+			const padding = element._padding._value;
+			const border = element._borderWidth._value;
+
+			// has auto size get the height from children
+			if ( element._width._auto ) {
+
+				element._bounds.setOffsetWidth( element, lines.width + padding.w + padding.y + border.w + border.y );
+
+			}
+
+			if ( element._height._auto ) {
+
+				element._bounds.setOffsetHeight( element, lines.height + padding.x + padding.z + border.x + border.z );
+
+			}
+
+		}
+
+	}
+
+}
diff --git a/src/core/properties/BaseProperty.js b/src/core/properties/BaseProperty.js
new file mode 100644
index 00000000..46d11cd6
--- /dev/null
+++ b/src/core/properties/BaseProperty.js
@@ -0,0 +1,208 @@
+import * as DefaultValues from '../DefaultValues';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from './../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class BaseProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 * @param primitive
+	 */
+	constructor( propertyId, value = null, primitive = true ) {
+
+		/**
+		 *
+		 * @type {string}
+		 * @internal
+		 */
+		this._id = propertyId;
+
+		/**
+		 *
+		 * @type {any}
+		 * @internal
+		 */
+		this._value = value;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._needsUpdate = true;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._needsProcess = false;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._needsRender = false;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @protected
+		 */
+		this._isPrimitive = primitive;
+
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	get id() { return this._id; }
+
+	/**
+	 *
+	 * @return {any}
+	 */
+	get value() { return this._value; }
+
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set value( value ) {
+
+		if( ! this.isValid( value) ) return;
+
+		if( this._value !== value ) {
+
+			this._value = value;
+
+			this._needsUpdate = true;
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @param {Object.<string,any>} out
+	 */
+	update( element , out ) { 	/* eslint-enable no-unused-vars */
+
+		// the value has been updated from setter
+		// if there is no additional logic
+		// then just output it
+		// => out[this._id] = this._value;
+		this.output( out );
+
+
+		// ??
+		//this.computeOutputValue( element );
+		// if( this._isPrimitive ) this.output( out );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Output this property in a dictionnary
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) { 	/* eslint-enable no-unused-vars */
+
+		// ie:
+		// out['borderRadius'] = this;
+		// out[this._id] = this._value;
+
+	}
+
+
+
+	/**
+	 *
+	 * @param {Out} out
+	 */
+	_outputValue( out ) {
+
+		out[this._id] = this._value;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Execute additional process after all properties have been updated
+	 * @param {MeshUIBaseElement} element
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */ }
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Execute additional process after all properties have been updated
+	 * @param {MeshUIBaseElement} element
+	 */
+	render( element ) { /* eslint-enable no-unused-vars */ }
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	getInheritedInput ( element ) {
+
+		if( this._value !== 'inherit' ) return this._value;
+
+		const parent = element._parent._value;
+		if( parent && parent[`_${this._id}`] ) {
+
+			return parent[`_${this._id}`].getInheritedInput( parent )
+
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+	/**
+	 *
+	 * @return {any}
+	 */
+	getDefaultValue() {
+
+		return DefaultValues.get( this._id );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {any} value
+	 * @return {boolean}
+	 */
+	isValid( value ) { 	/* eslint-enable no-unused-vars */
+
+		return true;
+
+	}
+
+	/**
+	 *
+	 */
+	emptyStrategyLogic () {
+
+		throw new Error( `ThreeMeshUI::${this.constructor.name} has empty strategy. Update has not been processed.` );
+
+	}
+
+}
+
+
+/**
+ * @typedef Out
+ * @type {Object & Object.<string,any>}
+ */
diff --git a/src/core/properties/BooleanProperty.js b/src/core/properties/BooleanProperty.js
new file mode 100644
index 00000000..f10476fa
--- /dev/null
+++ b/src/core/properties/BooleanProperty.js
@@ -0,0 +1,43 @@
+import BaseProperty from './BaseProperty';
+
+export default class BooleanProperty extends BaseProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 */
+	constructor( propertyId, value = true ) {
+
+		super( propertyId, value, true );
+
+		/**
+		 * @override
+		 * @type {boolean}
+		 * @private
+		 */
+		this._value = value;
+
+		this.output = this._outputValue;
+
+	}
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set value( value ) {
+
+		this._value = value;
+
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/src/core/properties/BoundsBox.js b/src/core/properties/BoundsBox.js
new file mode 100644
index 00000000..a52953bf
--- /dev/null
+++ b/src/core/properties/BoundsBox.js
@@ -0,0 +1,398 @@
+import BaseProperty from './BaseProperty';
+import { Vector3 } from 'three';
+import { numberEquals } from '../../utils/NumberUtils';
+
+export default class BoundsBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'bounds', null, false );
+
+		/**
+		 *
+		 * @type {Vector3}
+		 * @internal
+		 */
+		this._size = new Vector3( 1, 1, 1 );
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._offsetWidth = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._offsetHeight = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._innerWidth = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._innerHeight = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._centerX = 0.5;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._centerY = 0.5;
+
+
+		this._needsProcess = true;
+
+	}
+
+	/**
+	 * Set the value of the width 100%
+	 * @param element
+	 * @param value
+	 */
+	setReferenceWidth( element, value ) {
+
+		const width = element._width;
+		const padding = element._padding._value;
+		const borderWidth = element._borderWidth._value;
+		const margin = element._margin._value;
+
+		const factor = width._auto ? 1 : width._value;
+		// const newOffsetWidth = (value * factor) - (margin.y + margin.w);
+		const newOffsetWidth = (value * factor) - (margin.y + margin.w);
+		if ( numberEquals( newOffsetWidth, this._offsetWidth ) ) return;
+
+		this._offsetWidth = newOffsetWidth;
+		this._innerWidth = this._offsetWidth - ( padding.y + padding.w + borderWidth.y + borderWidth.w );
+
+		this._centerX = _computeCenterX( element );
+
+		this._propagateWidth( element );
+
+		this._triggerCascadingDependencies( element );
+
+	}
+
+	/**
+	 * Set the value of the height 100%
+	 * @param element
+	 * @param value
+	 */
+	setReferenceHeight( element, value ) {
+
+		const height = element._height;
+		const padding = element._padding._value;
+		const borderWidth = element._borderWidth._value;
+		const margin = element._margin._value;
+
+		const factor = height._auto ? 1 : height._value;
+
+		const newOffsetHeight = (value * factor) - ( margin.x + margin.z );
+		if ( numberEquals( newOffsetHeight, this._offsetHeight ) ) return;
+
+		this._offsetHeight = newOffsetHeight;
+		this._innerHeight = this._offsetHeight - ( padding.x + padding.z + borderWidth.x + borderWidth.z );
+		this._centerY = _computeCenterY( element );
+
+		this._propagateHeight( element );
+
+		this._triggerCascadingDependencies( element );
+
+	}
+
+	setChildrenWidth( element, value ) {
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		this._innerWidth = value;
+		this._offsetWidth = this._innerWidth + ( padding.y + padding.w + border.y + border.w )
+
+		this._centerX = _computeCenterX( element );
+
+		this._propagateWidth( element );
+		this._triggerCascadingDependencies( element );
+
+
+	}
+
+	setChildrenHeight( element, value ) {
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		this._innerHeight = value;
+		this._offsetHeight = this._innerHeight + ( padding.x + padding.z + border.x + border.z )
+
+		this._centerY = _computeCenterY( element );
+
+		this._propagateHeight( element );
+		this._triggerCascadingDependencies( element );
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		// only compute new width if explicitely defined
+		const width = element._width;
+		if( !width._auto && !width._relative ) {
+
+			if ( element._boxSizing._value === 'content-box' ) {
+
+				this._innerWidth = width._value;
+				this._offsetWidth = this._innerWidth + padding.y + padding.w + border.y + border.w;
+
+			} else {
+
+				this._offsetWidth = width._value;
+				this._innerWidth = this._offsetWidth - ( padding.y + padding.w + border.y + border.w );
+
+			}
+
+			this._centerX = _computeCenterX( element );
+			this._needsProcess = true;
+
+			// tells children width has changed
+			this._propagateWidth( element );
+			this._triggerCascadingDependencies( element );
+
+		}
+
+		const height = element._height;
+		if( !height._auto && !height._relative ) {
+
+			if ( element._boxSizing._value === 'content-box' ) {
+
+				this._innerHeight = height._value;
+				this._offsetHeight = this._innerHeight + padding.x + padding.z + border.x + border.z;
+
+			} else {
+
+				this._offsetHeight = height._value;
+				this._innerHeight = this._offsetHeight - ( padding.x + padding.z + border.x + border.z );
+
+			}
+
+			this._centerY = _computeCenterY( element );
+			this._needsProcess = true;
+
+			// tells children height has changed
+			this._propagateHeight( element );
+			this._triggerCascadingDependencies( element );
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */ render( element ) { /* eslint-enable no-unused-vars */
+
+		this._size.x = this._offsetWidth;
+		this._size.y = this._offsetHeight;
+
+		element._renderer._needsRender = true;
+
+	}
+
+	/**
+	 *
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) {
+
+		out[ 'size' ] = this._size;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @override
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */
+
+		// this._triggerCascadingDependencies( element )
+
+		//console.log( 'process bounds box', element.name );
+
+		// update primitives or unbinded values
+
+		// require cascading processes
+
+		element._overflow._needsRender = true;
+
+
+	}
+
+	/**
+	 *
+	 * @param element
+	 * @internal
+	 */
+	_computeChildrenSideWidth( element ) {
+
+		return _computeChildrenSideWidth( element );
+
+	}
+
+	/**
+	 *
+	 * @param element
+	 * @internal
+	 */
+	_computeChildrenSideHeight( element ) {
+
+		return _computeChildrenSideHeight( element );
+
+	}
+
+	_propagateWidth( element ) {
+
+		for ( let i = 0; i < element._children._boxes.length; i++ ) {
+
+			const box = element._children._boxes[ i ];
+			const width = box._width;
+
+			if( width._relative ) box._bounds.setReferenceWidth( box, this._innerWidth );
+
+		}
+
+	}
+
+	_propagateHeight( element ) {
+
+		for ( let i = 0; i < element._children._boxes.length; i++ ) {
+
+			const box = element._children._boxes[ i ];
+			const height = box._height;
+
+			if( height._relative ) box._bounds.setReferenceHeight( box, this._innerHeight );
+
+		}
+
+	}
+
+	_triggerCascadingDependencies( element ) {
+
+		// also change parent when require
+		if ( element._parent._value ) {
+			element._parent._value._autoSize._needsProcess = true;
+		}
+
+		element._flexDirection._needsProcess = true;
+		element._fontSize._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+		this._needsRender = true;
+
+		element._borderWidth._needsRender = true;
+		element._borderRadius._needsRender = true;
+
+		element._overflow._needsRender = true;
+
+	}
+
+}
+
+
+
+
+/***********************************************************************************************************************
+ * INTERNAL FUNCTIONS
+ **********************************************************************************************************************/
+
+/**
+ * Retrieve the center X according to box sized dimensions
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeCenterX( element ) {
+
+	const padding = element._padding._value;
+	const borderWidth = element._borderWidth._value;
+
+	const leftSide = padding.w + borderWidth.w;
+	const rightSide = padding.y + borderWidth.y;
+
+	return ( leftSide - rightSide ) / 2;
+}
+
+/**
+ * Retrieve the center Y according to box sized dimensions
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeCenterY( element ) {
+
+
+	const padding = element._padding._value;
+	const borderWidth = element._borderWidth._value;
+
+	const topSide = padding.x + borderWidth.x;
+	const bottomSide = padding.z + borderWidth.z;
+
+	return ( bottomSide - topSide ) / 2;
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideWidth( element ) {
+
+	return element._children._boxes.reduce( ( accu, child ) => {
+
+		// if ( child._bounds._needsProcess ) child._bounds.process( child );
+
+		const margin = child._margin._value;
+		const CHILD_SIZE = child._bounds._offsetWidth + margin.y + margin.w;
+
+		return accu + CHILD_SIZE;
+
+	}, 0 );
+
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideHeight( element ) {
+
+	return element._children._boxes.reduce( ( accu, child ) => {
+
+
+		// if ( child._bounds._needsProcess ) child._bounds.process( child );
+
+		const margin = child._margin._value;
+
+		const CHILD_SIZE = child._bounds._offsetHeight + margin.x + margin.z;
+
+		return accu + CHILD_SIZE;
+
+	}, 0 );
+
+}
+
diff --git a/src/core/properties/BoundsInlineBlock.js b/src/core/properties/BoundsInlineBlock.js
new file mode 100644
index 00000000..309bad0f
--- /dev/null
+++ b/src/core/properties/BoundsInlineBlock.js
@@ -0,0 +1,65 @@
+import BaseProperty from './BaseProperty';
+import { Vector3 } from 'three';
+
+export default class BoundsInlineBlock extends BaseProperty {
+
+	constructor() {
+
+		super( 'bounds', null, false );
+
+		/**
+		 *
+		 * @type {Vector3}
+		 * @internal
+		 */
+		this._size = new Vector3( 1, 1, 1 );
+
+		this._offsetWidth = 0;
+		this._offsetHeight = 0;
+
+		this._innerWidth = 0;
+		this._innerHeight = 0;
+	}
+
+
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
+
+		this.output( out );
+
+		this._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		this._offsetWidth = this._innerWidth = element._inlines._value[0].width;
+		this._offsetHeight = this._innerHeight = element._inlines._value[0].height;
+
+		this._needsRender = true;
+
+		element._borderWidth._needsRender = true;
+		element._borderRadius._needsRender = true;
+
+	}
+
+	/* eslint-disable no-unused-vars */ render( element ) { /* eslint-enable no-unused-vars */
+
+		this._size.x = this._offsetWidth;
+		this._size.y = this._offsetHeight;
+
+	}
+
+	/**
+	 *
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) {
+
+		out[ 'size' ] = this._size;
+
+	}
+
+}
+
diff --git a/src/core/properties/BoundsText.js b/src/core/properties/BoundsText.js
new file mode 100644
index 00000000..af8aa1f6
--- /dev/null
+++ b/src/core/properties/BoundsText.js
@@ -0,0 +1,14 @@
+import BoundsBox from './BoundsBox';
+
+export default class BoundsText extends BoundsBox {
+
+	constructor() {
+
+		super();
+
+		this._innerWidth = Infinity;
+		this._innerHeight = 0;
+
+	}
+
+}
diff --git a/src/core/properties/BoxLayouter.js b/src/core/properties/BoxLayouter.js
new file mode 100644
index 00000000..7cb6784b
--- /dev/null
+++ b/src/core/properties/BoxLayouter.js
@@ -0,0 +1,87 @@
+import BaseProperty from './BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from './../../core/elements/MeshUIBaseElement';
+import Line from './../../core/elements/glyphs/Line';
+import { Vector3 } from 'three';
+/* eslint-enable no-unused-vars */
+
+export default class BoxLayouter extends BaseProperty {
+
+	constructor() {
+
+		super( 'layouter', null, false);
+
+		// configure
+		this._needsUpdate = true;
+
+		/**
+		 * @typedef ChildrenPos
+		 * @type {Object & Object.<string,Vector3>}
+		 */
+
+		/**
+		 *
+		 * @type {ChildrenPos}
+		 * @internal
+		 */
+		this._childrenPos = {};
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Updated when :
+	 * 	- New child added
+	 * 	- Child removed
+	 * 	- Child position changed
+	 * 	- Child visibility changed
+	 * 	- ...?
+	 * 	@override
+	 */
+	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		//console.log( "BoxLayouter update", element.name );
+		// reset
+		this._childrenPos = {};
+
+		for ( const uiBoxElement of element._children._boxes ) {
+
+			//console.log( uiBoxElement._position._value )
+			if( uiBoxElement._position._value === 'static' ) {
+
+				// bind position
+				this._childrenPos[ uiBoxElement.id ] = uiBoxElement.position;
+
+			}
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @override
+	 */
+	/* eslint-disable no-unused-vars */ process( element ) { 	/* eslint-enable no-unused-vars */
+
+		// As _childrenPos are bounds with child.position, this is not required anymore
+		//
+		// element._position._needsProcess = true;
+		//
+		// for ( const box of element._children._boxes ) {
+		//
+		// 	if( this._childrenPos[box.id] ) {
+		//
+		// 		box.position.x = this._childrenPos[box.id].x;
+		// 		box.position.y = this._childrenPos[box.id].y;
+		//
+		// 	}
+		//
+		// }
+
+	}
+
+}
diff --git a/src/core/properties/EmptyProperty.js b/src/core/properties/EmptyProperty.js
new file mode 100644
index 00000000..0e419fdd
--- /dev/null
+++ b/src/core/properties/EmptyProperty.js
@@ -0,0 +1,30 @@
+import BaseProperty from './BaseProperty';
+
+export default class EmptyProperty extends BaseProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId = 'untitled' ) {
+
+		super( propertyId, undefined, false );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @param {Object.<string,any>} out
+	 */
+	update( element , out ) { /* eslint-enable no-unused-vars */ }
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Output this property in a dictionnary
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) { /* eslint-enable no-unused-vars */ }
+
+}
diff --git a/src/core/properties/FontProperty.js b/src/core/properties/FontProperty.js
new file mode 100644
index 00000000..c3aeb6fd
--- /dev/null
+++ b/src/core/properties/FontProperty.js
@@ -0,0 +1,208 @@
+import BaseProperty from './BaseProperty';
+import FontVariant from '../../font/FontVariant';
+
+export default class FontProperty extends BaseProperty{
+
+	/**
+	 *
+	 * @param {FontVariant} [value=null]
+	 */
+	constructor( value = null ) {
+
+		super( 'font', value, false);
+
+		this._needsUpdate = false;
+
+		/**
+		 *
+		 * @type {FontVariant|null}
+		 * @internal
+		 */
+		this._fontVariant = null;
+
+
+		/**
+		 * @typedef ReadyClosure
+		 * @type { ()=> void|null }
+		 */
+
+		/**
+		 *
+		 * @type {ReadyClosure}
+		 * @private
+		 */
+		this._handleFontReadyClosure = null;
+
+		/**
+		 * @override
+		 */
+		this.isValid = _isValid;
+
+	}
+
+	output( out ) {
+
+		out[this._id] = this._fontVariant;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 */
+	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		// if a previous font isset, be sure no event remains
+		if ( this._fontVariant && !this._fontVariant.isReady ) {
+
+			this._fontVariant.removeEventListener( 'ready', this._handleFontReadyClosure );
+
+		}
+
+		// obtain font from value or from style combinaison
+		if( this._value && this._value instanceof FontVariant ) {
+
+			this._fontVariant = this._value;
+
+		} else {
+
+
+			const fontFamily = element._fontFamily._value;
+
+			if( typeof fontFamily !== 'string'  ) {
+
+				this._fontVariant = fontFamily.getVariant(
+					element._fontWeight._value,
+					element._fontStyle._value,
+				);
+
+			}
+
+		}
+
+		if( !this._fontVariant ) return;
+
+		this._fontVariant._alterElementProperties( element );
+
+		this._handleFontReadyClosure = _readyClosure( element, this );
+
+		// new font, means rebuild inlines, now or soon
+		if ( !this._fontVariant.isReady ) {
+
+			// @TODO : clear inlines components
+			// this.inlines = null;
+
+			this._fontVariant.addEventListener( 'ready', this._handleFontReadyClosure );
+
+		} else {
+
+			this._handleFontReadyClosure();
+
+		}
+
+		// Set the default material
+		if( !element._fontMaterial._defaultMaterial || !(element._fontMaterial._defaultMaterial instanceof this._fontVariant.fontMaterial) ) {
+
+			element._fontMaterial._defaultMaterial = new this._fontVariant.fontMaterial();
+			element._fontMaterial._needsUpdate = true;
+
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @param {FontVariant} value
+	 */
+	set value( value ) {
+
+		if( ! this.isValid( value) ) return;
+
+		if( this._value !== value ) {
+
+			this._value = value;
+
+			this._needsUpdate = true;
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @return {FontVariant}
+	 */
+	get value() { return this._value; }
+
+
+	/**
+	 *
+	 * @return {FontVariant|null}
+	 */
+	get fontVariant() { return this._fontVariant; }
+
+	/**
+	 *
+	 */
+	dispose () {
+
+		if( this._handleFontReadyClosure ) {
+
+			this._fontVariant.removeEventListener( 'ready', this._handleFontReadyClosure );
+			this._handleFontReadyClosure = null;
+
+		}
+
+		this._value = null;
+		this._fontVariant = null;
+
+	}
+
+}
+
+
+/**
+ *
+ * @param {number} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if( ! ( value instanceof FontVariant )  ) {
+
+		console.warn(`.font value '${value}' is not valid. It requires a FontVariant instance. Aborted`);
+		return false;
+
+	}
+
+	return true;
+
+}
+
+/**
+ *
+ * @param {MeshUIBaseElement} element
+ * @param {FontProperty} fontProperty
+ * @return {() => void}
+ * @private
+ */
+function _readyClosure( element, fontProperty ) {
+	return function () {
+
+		fontProperty._needsUpdate = true;// ? update itself?
+		element._glyphs._needsProcess = true;
+
+		// this._transferToMaterial();
+
+		// request parse update and parent layout
+		// this.update( true, true, false );
+		// this.getHighestParent().update( false, true, false );
+
+		// remove the listener
+		fontProperty._fontVariant.removeEventListener( 'ready', fontProperty._handleFontReadyClosure );
+		fontProperty._handleFontReadyClosure = null;
+
+	}
+}
diff --git a/src/core/properties/FontSmoothProperty.js b/src/core/properties/FontSmoothProperty.js
new file mode 100644
index 00000000..8a91af76
--- /dev/null
+++ b/src/core/properties/FontSmoothProperty.js
@@ -0,0 +1,36 @@
+import InheritableProperty from './InheritableProperty';
+
+export default class FontSmoothProperty extends InheritableProperty{
+
+	constructor() {
+
+		super( 'fontSmooth', 'inherit', true);
+
+		// configure
+		this._needsUpdate = false;
+		this.isValid = _isValid;
+		this.output = this._outputValue;
+	}
+
+}
+
+const AVAILABLE_VALUES = ['inherit','none','antialiased'];
+
+/**
+ *
+ * @param {string} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if(  AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn(`.fontSmoothing value '${value}' is not valid. Aborted`);
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/src/core/properties/FontSmoothPropertyInline.js b/src/core/properties/FontSmoothPropertyInline.js
new file mode 100644
index 00000000..98229893
--- /dev/null
+++ b/src/core/properties/FontSmoothPropertyInline.js
@@ -0,0 +1,15 @@
+import FontSmoothProperty from './FontSmoothProperty';
+
+export default class FontSmoothPropertyInline extends FontSmoothProperty{
+
+	constructor() {
+
+		super();
+
+		// configure
+		this.output = this._outputValue;
+		this._needsUpdate = true;
+
+	}
+
+}
diff --git a/src/core/properties/GlyphsProperty.js b/src/core/properties/GlyphsProperty.js
new file mode 100644
index 00000000..ea4bb108
--- /dev/null
+++ b/src/core/properties/GlyphsProperty.js
@@ -0,0 +1,72 @@
+import BaseProperty from './BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import TypographicGlyph from '../../font/TypographicGlyph';
+/* eslint-enable no-unused-vars */
+
+export default class GlyphsProperty extends BaseProperty{
+
+	constructor() {
+
+		super( "glyphs", null, false);
+
+		this._needsUpdate = false;
+
+		/**
+		 *
+		 * @type {Array.<TypographicGlyph>}
+		 * @private
+		 */
+		this._value = null;
+
+		// value
+
+		// 1. collapsed whiteSpace;
+		// this._textContent = Whitespace.collapseWhitespaceOnString( this.content, this.getWhiteSpace() );
+
+		// 2. glyphs
+		// this._textContentGlyphs = this._textContent.split( '' ).map( ( char ) => this._font.getTypographicGlyph( char ) );
+
+		// 3. Inlines
+		// this._textContentInlines = this._textContentGlyphs.map( ( glyphBox ) => glyphBox.asInlineGlyph() );
+
+		// 4. kerning
+		// this._buildContentKernings();
+
+
+		// 5.? Apply margin and padding on first and last inlines
+		// if( this._textContentInlines.length ) {
+		//
+		// 	// First gets left side
+		// 	this._textContentInlines[0].paddingLeft = this._padding.w;
+		// 	this._textContentInlines[0].marginLeft = this._margin.w;
+		//
+		// 	// Last gets right side
+		// 	const lastIndex = this._textContentInlines.length - 1;
+		// 	this._textContentInlines[lastIndex].paddingRight = this._padding.y;
+		// 	this._textContentInlines[lastIndex].marginRight = this._margin.y;
+		//
+		// }
+
+	}
+
+	process( element ) {
+
+		if( !element._font._fontVariant ) return;
+		if( !element._font._fontVariant.isReady ) return;
+
+		this._value = element._whiteSpace._whiteSpacedContent.split( '' ).map( ( char ) => element._font._fontVariant.getTypographicGlyph( char ) );
+
+		// @TODO : Even if the value is removed it should trigger a rebuild.
+		if( this._value ) element._inlines._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @return {Array.<TypographicGlyph>}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/src/core/properties/InheritableBooleanProperty.js b/src/core/properties/InheritableBooleanProperty.js
new file mode 100644
index 00000000..7a7099b4
--- /dev/null
+++ b/src/core/properties/InheritableBooleanProperty.js
@@ -0,0 +1,18 @@
+import InheritableProperty from './InheritableProperty';
+
+/**
+ * @property {boolean|"inherit"} value
+ */
+export default class InheritableBooleanProperty extends InheritableProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId) {
+
+		super( propertyId, 'inherit', true );
+
+	}
+
+}
diff --git a/src/core/properties/InheritableMaterialProperty.js b/src/core/properties/InheritableMaterialProperty.js
new file mode 100644
index 00000000..85b66d9a
--- /dev/null
+++ b/src/core/properties/InheritableMaterialProperty.js
@@ -0,0 +1,107 @@
+import InheritableProperty from './InheritableProperty';
+import { alphaTestTransformer } from '../../utils/mediator/transformers/MaterialTransformers';
+
+/**
+ * @property {Material|null|"inherit"} value
+ */
+export default class InheritableMaterialProperty extends InheritableProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId ) {
+
+		super( propertyId, 'inherit', false );
+
+		/**
+		 *
+		 * @type {Object.<{m:string, t?:(target:any, targetProperty:string, value:any) => void}>}
+		 * @internal
+		 */
+		this._mediation = {};
+
+		/**
+		 *
+		 * @type {null}
+		 * @internal
+		 */
+		this._defaultMaterial = null;
+
+	}
+
+	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		this._notInheritedValue = this._value;
+
+		if ( this._notInheritedValue === 'inherit' ) {
+			this._notInheritedValue = this.getInheritedInput( element );
+		} else {
+			this.propagate( element );
+		}
+
+		// no material
+		if ( !this._notInheritedValue ) {
+
+			// reset mediation
+			this._mediation = {};
+
+		} else if ( this._notInheritedValue.constructor.mediation ) {
+
+			this._mediation = { ...this._notInheritedValue.constructor.mediation };
+
+		} else {
+
+			this._mediation = {
+				clippingPlanes: { m: 'clippingPlanes' },
+				fontAlphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+				fontSide: { m: 'side' },
+				color: { m: 'color' },
+				fontOpacity: { m: 'opacity' }
+			};
+
+		}
+
+		element._transferToFontMaterial();
+
+		// dispatch to children
+
+
+		this._outputValue( out );
+
+	}
+
+	/**
+	 * @override
+	 */
+	getInheritedInput( element ) {
+
+		if ( this._value !== 'inherit' ) return this._value;
+
+		let recursiveParent = element;
+		let inheritedValue = null;
+		while ( recursiveParent._parent._value ) {
+
+			recursiveParent = recursiveParent._parent._value;
+			if ( recursiveParent[ `_${this._id}` ]._value !== 'inherit' ) {
+
+				inheritedValue = recursiveParent[ `_${this._id}` ]._value;
+				break;
+			}
+
+		}
+
+		if ( inheritedValue !== null ) {
+			return inheritedValue;
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+	getDefaultValue() {
+		return this._defaultMaterial;
+	}
+
+
+}
diff --git a/src/core/properties/InheritableProperty.js b/src/core/properties/InheritableProperty.js
new file mode 100644
index 00000000..3694294a
--- /dev/null
+++ b/src/core/properties/InheritableProperty.js
@@ -0,0 +1,90 @@
+import BaseProperty from './BaseProperty';
+
+export default class InheritableProperty extends BaseProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 * @param primitive
+	 */
+	constructor( propertyId, value = null, primitive = true ) {
+
+		super( propertyId, value, primitive );
+
+		// @TODO : I would like to remove this rules ( here )
+		this.output = this._outputValue;
+
+		this._notInheritedValue = null;
+	}
+
+	update( element , out ) { 	/* eslint-enable no-unused-vars */
+
+		this._notInheritedValue = this._value;
+
+		if( this._notInheritedValue === 'inherit' )
+		{
+			this._notInheritedValue = this.getInheritedInput( element );
+		}
+		// else
+		// {
+		// 	this.propagate( element );
+		// }
+
+		// @TODO: Evaluate. This might be too much
+		this.propagate( element );
+
+		this._outputValue( out );
+
+	}
+
+	propagate( element ) {
+
+		// rebuild same properties on children 'inheritance'
+		for ( const childUIElement of element._children._uis ) {
+
+			const property = childUIElement[`_${this._id}`];
+			if( property !== undefined && property._value === 'inherit' ) {
+				childUIElement[`_${this._id}`]._needsUpdate = true;
+			}
+
+		}
+	}
+
+	/**
+	 * Output this property in a dictionnary
+	 * @override
+	 */
+	_outputValue( out ) { 	/* eslint-enable no-unused-vars */
+
+		out[this._id] = this._notInheritedValue;
+
+	}
+
+	set value ( value ) {
+
+		if( ! this.isValid( value) ) return;
+
+		if( this._value !== value ) {
+
+			this._value = value;
+
+			this._needsUpdate = true;
+
+		}
+
+	}
+	/**
+	 *
+	 * @override
+	 * @return {any|"inherit"}
+	 */
+	get value() {
+
+		if( this._value === 'inherit' ) return this._notInheritedValue;
+
+		return this._value;
+
+	}
+
+}
diff --git a/src/core/properties/InlineJustificator.js b/src/core/properties/InlineJustificator.js
new file mode 100644
index 00000000..7309fd9c
--- /dev/null
+++ b/src/core/properties/InlineJustificator.js
@@ -0,0 +1,75 @@
+import BaseProperty from './BaseProperty';
+
+export default class InlineJustificator extends BaseProperty {
+
+	constructor() {
+		super( 'inlineJustificator', null, false );
+
+		/**
+		 *
+		 * @type {Lines}
+		 * @private
+		 */
+		this._value = null;
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */ }
+
+	/**
+	 *
+	 * @override
+	 */
+	process( element ) {
+
+		const INNER_HEIGHT = element._bounds._innerHeight;
+		const lines = element._layouter._value;
+
+		const textHeight = Math.abs( lines.height );
+
+
+		// Line vertical positioning
+		let justificationOffset = ( () => {
+
+			switch ( element._alignItems._value ) {
+
+				case 'inherit':
+				case 'start':
+					return INNER_HEIGHT / 2 ;
+
+				case 'end':
+					return textHeight - ( INNER_HEIGHT / 2 );
+
+
+				case 'stretch': // @TODO : Stretch should trigger an error in own property
+				case 'center':
+					return textHeight/2;
+
+			}
+		} )();
+
+		//console.log( justificationOffset );
+
+		// Apply padding
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		justificationOffset += ( - padding.x + padding.z ) / 2 + ( - border.x + border.z ) / 2;
+
+		//
+
+		lines.forEach( ( line ) => {
+
+			line.y += justificationOffset;
+
+			line.forEach( ( inline ) => {
+
+				inline.offsetY += justificationOffset;
+
+			} );
+
+		} );
+
+	}
+
+}
diff --git a/src/core/properties/InlineLayouter.js b/src/core/properties/InlineLayouter.js
new file mode 100644
index 00000000..445f87a6
--- /dev/null
+++ b/src/core/properties/InlineLayouter.js
@@ -0,0 +1,45 @@
+import BaseProperty from './BaseProperty';
+
+export default class InlineLayouter extends BaseProperty {
+
+	constructor() {
+
+		super( 'layouter', null, false );
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 * @private
+		 */
+		this._value = null;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		// find the first text parent;
+		this._value = element._parent.find( (p) => { return p.isUI && p.isText } );
+
+		this._needsProcess = true;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 */
+	process( element ) { 	/* eslint-enable no-unused-vars */
+
+
+		// layout has been changed
+		if( this._value ) {
+
+			this._value._layouter._needsProcess = true;
+
+		}
+
+	}
+
+}
diff --git a/src/core/properties/InlinesProperty.js b/src/core/properties/InlinesProperty.js
new file mode 100644
index 00000000..fc438664
--- /dev/null
+++ b/src/core/properties/InlinesProperty.js
@@ -0,0 +1,79 @@
+import BaseProperty from './BaseProperty';
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import Inline from '../elements/glyphs/Inline';
+/* eslint-enable no-unused-vars */
+
+export default class InlinesProperty extends BaseProperty{
+
+	constructor() {
+
+		super( "inlines", null, false );
+
+		/**
+		 *
+		 * @type {Array.<Inline>}
+		 * @private
+		 */
+		this._value = null;
+
+		// value
+
+		// 3. Inlines
+		// this._textContentInlines = this._textContentGlyphs.map( ( glyphBox ) => glyphBox.asInlineGlyph() );
+
+		// 4. kerning
+		// this._buildContentKernings();
+
+
+		// 5.? Apply margin and padding on first and last inlines
+		// if( this._textContentInlines.length ) {
+		//
+		// 	// First gets left side
+		// 	this._textContentInlines[0].paddingLeft = this._padding.w;
+		// 	this._textContentInlines[0].marginLeft = this._margin.w;
+		//
+		// 	// Last gets right side
+		// 	const lastIndex = this._textContentInlines.length - 1;
+		// 	this._textContentInlines[lastIndex].paddingRight = this._padding.y;
+		// 	this._textContentInlines[lastIndex].marginRight = this._margin.y;
+		//
+		// }
+
+	}
+
+	process( element ) {
+
+		this._value = element._glyphs._value.map( ( glyphBox ) => glyphBox.asInlineGlyph() );
+
+		if( this._value.length ) {
+
+			// First gets left side
+			this._value[0].paddingLeft = element._padding._value.w;
+			this._value[0].marginLeft = element._margin._value.w;
+
+			// Last gets right side
+			const lastIndex = this._value.length - 1;
+			this._value[lastIndex].paddingRight = element._padding._value.y;
+			this._value[lastIndex].marginRight = element._margin._value.y;
+
+		}
+
+
+		element._verticalAlign._needsProcess = true;
+		element._fontSize._needsProcess = true;
+		element._lineBreak._needsProcess = true;
+		element._fontKerning._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @return {Array.<Inline>}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/src/core/properties/InlinesPropertyInlineBlock.js b/src/core/properties/InlinesPropertyInlineBlock.js
new file mode 100644
index 00000000..57649a2c
--- /dev/null
+++ b/src/core/properties/InlinesPropertyInlineBlock.js
@@ -0,0 +1,40 @@
+import BaseProperty from './BaseProperty';
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import Inline from '../elements/glyphs/Inline';
+/* eslint-enable no-unused-vars */
+
+/**
+ * @property {Array.<InlineGlyph>} value
+ */
+export default class InlinesPropertyInlineBlock extends BaseProperty{
+
+	constructor() {
+
+		super( "inlines", null, false );
+
+		/**
+		 *
+		 * @type {Array.<Inline>}
+		 * @internal
+		 */
+		this._value = [];
+
+	}
+
+	process( element ) {
+
+		// First gets left side
+		this._value[0].paddingLeft = element._padding._value.w;
+		this._value[0].marginLeft = element._margin._value.w;
+
+		// Last gets right side
+		const lastIndex = this._value.length - 1;
+		this._value[lastIndex].paddingRight = element._padding._value.y;
+		this._value[lastIndex].marginRight = element._margin._value.y;
+
+	}
+
+}
diff --git a/src/core/properties/InvertAlphaProperty.js b/src/core/properties/InvertAlphaProperty.js
new file mode 100644
index 00000000..c79b0c24
--- /dev/null
+++ b/src/core/properties/InvertAlphaProperty.js
@@ -0,0 +1,16 @@
+import InheritableProperty from './InheritableProperty';
+
+/**
+ * Class definition
+ * @property {boolean|"inherit"} value - propriety description
+ *
+ */
+export default class InvertAlphaProperty extends InheritableProperty {
+
+	constructor() {
+
+		super( 'invertAlpha', 'inherit' );
+
+	}
+
+}
diff --git a/src/core/properties/LineBreakProperty.js b/src/core/properties/LineBreakProperty.js
new file mode 100644
index 00000000..42724210
--- /dev/null
+++ b/src/core/properties/LineBreakProperty.js
@@ -0,0 +1,76 @@
+import BaseProperty from './BaseProperty';
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
+
+export default class LineBreakProperty extends BaseProperty{
+
+	constructor( defaultValue = "- ,.:?!\n" ) {
+
+		super( "lineBreak", defaultValue, true );
+
+		/**
+		 *
+		 * @type {"mandatory"|"possible"|null}
+		 * @private
+		 */
+		this._newLineBreakability = null;
+
+
+	}
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		this._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		const newLineBreakability = element._whiteSpace._newLineBreakability;
+
+		if( !element._inlines._value ) return;
+
+		// update inlines properties before inline placements in lines
+		for ( let i = 0; i < element._inlines._value.length; i++ ) {
+
+
+			const inline = element._inlines._value[ i ];
+			const char = inline.char;
+
+			// Whitespace Breakability ---------------------------------------------------------------------------------------
+			let lineBreak = null;
+
+			// could be inlineBlock without char
+			if( char !== undefined ) {
+
+				// @question : Does it worth to be strategy? I don't really think so
+				if ( newLineBreakability !== 'nowrap' ) {
+
+					if ( this._value.includes( char ) || char.match( /\s/g ) ) lineBreak = 'possible';
+
+				}
+
+				if ( char.match( /\n/g ) ) {
+
+					lineBreak = newLineBreakability;
+
+				}
+
+			}
+
+			inline.lineBreak = lineBreak;
+
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @return {string}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/src/core/properties/NumberProperty.js b/src/core/properties/NumberProperty.js
new file mode 100644
index 00000000..e684e1de
--- /dev/null
+++ b/src/core/properties/NumberProperty.js
@@ -0,0 +1,42 @@
+import BaseProperty from './BaseProperty';
+import { numberEquals } from '../../utils/NumberUtils';
+
+export default class NumberProperty extends BaseProperty{
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {number} [value]
+	 */
+	constructor( propertyId, value ) {
+
+		super( propertyId, value, true);
+
+		this.output = this._outputValue;
+	}
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set value( value ) {
+
+		if( ! this.isValid( value) ) return;
+
+		if( numberEquals(this._value, value) ) return;
+
+		this._value = value;
+
+		this._needsUpdate = true;
+
+	}
+
+
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/src/core/properties/OffsetProperty.js b/src/core/properties/OffsetProperty.js
new file mode 100644
index 00000000..618c8d44
--- /dev/null
+++ b/src/core/properties/OffsetProperty.js
@@ -0,0 +1,22 @@
+import InheritableProperty from './InheritableProperty';
+
+export default class OffsetProperty extends InheritableProperty {
+
+	constructor( ) {
+
+		super( 'offset', 'inherit', false );
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
+
+		super.update( element, out);
+
+		// only process if element has ui parent
+		if( element._parent._value !== null ) element.position.z = this._notInheritedValue;
+
+	}
+
+
+}
diff --git a/src/core/properties/RenderOrderProperty.js b/src/core/properties/RenderOrderProperty.js
new file mode 100644
index 00000000..e1c9cc85
--- /dev/null
+++ b/src/core/properties/RenderOrderProperty.js
@@ -0,0 +1,73 @@
+import BaseProperty from './BaseProperty';
+
+export default class RenderOrderProperty extends BaseProperty{
+
+	constructor() {
+
+		super( 'renderOrder', 'auto', true);
+
+		this.output = this._outputValue;
+
+		this._actualValue = 0;
+	}
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set value( value ) {
+
+		if( ! this.isValid( value) ) return;
+
+		this._value = value;
+
+		this._needsUpdate = true;
+
+	}
+
+	update( element, out ) {
+
+		if( this._value !== 'auto' ) {
+
+			this._actualValue = this._value;
+
+		} else {
+
+			const parent = element._parent._value;
+			if( parent !== null ) {
+
+				const parentIndex = parent._renderOrder._actualValue;
+				const positionInParent = 1 + parent._children._uis.indexOf( element );
+
+				this._actualValue = parentIndex + positionInParent;
+
+			}
+
+		}
+
+		// update any children
+		for ( const childUIElement of element._children._uis ) {
+
+			const property = childUIElement[`_renderOrder`];
+			if( property._value === 'auto' ) childUIElement[`_renderOrder`]._needsUpdate = true;
+
+		}
+
+		this._outputValue( out );
+
+	}
+
+	_outputValue( out ) {
+
+		out[this._id] = this._actualValue;
+
+	}
+
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/src/core/properties/SideProperty.js b/src/core/properties/SideProperty.js
new file mode 100644
index 00000000..eb1d130e
--- /dev/null
+++ b/src/core/properties/SideProperty.js
@@ -0,0 +1,42 @@
+import { BackSide, DoubleSide, FrontSide } from 'three';
+import InheritableProperty from './InheritableProperty';
+
+/**
+ * @property {number|"inherit"} value
+ */
+export default class SideProperty extends InheritableProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId ) {
+
+		super( propertyId, 'inherit', true);
+
+		this.isValid = _isValid;
+
+	}
+
+}
+
+const AVAILABLE_VALUES = [ FrontSide, BackSide, DoubleSide ];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value) === -1 ){
+
+		console.warn(`SideProperty value '${value}' is not valid. Abort`);
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/src/core/properties/TextContentEmpty.js b/src/core/properties/TextContentEmpty.js
new file mode 100644
index 00000000..8d365426
--- /dev/null
+++ b/src/core/properties/TextContentEmpty.js
@@ -0,0 +1,36 @@
+import EmptyProperty from './EmptyProperty';
+
+export default class TextContentEmpty extends EmptyProperty{
+
+	constructor() {
+
+		super( "textContent" );
+
+		this._needsUpdate = false;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ set value( v ) { 	/* eslint-enable no-unused-vars */ }
+
+
+	/* eslint-disable no-unused-vars */ process( element ) { /* eslint-enable no-unused-vars */
+
+		let content = "";
+		for ( let i = 0; i < element.children.length; i++ ) {
+			const child = element.children[i];
+
+			if( child.isUI ) {
+
+				content += child.textContent;
+
+			}
+
+		}
+
+		this._value = content;
+
+	}
+
+
+}
diff --git a/src/core/properties/TextContentInline.js b/src/core/properties/TextContentInline.js
new file mode 100644
index 00000000..afcd432d
--- /dev/null
+++ b/src/core/properties/TextContentInline.js
@@ -0,0 +1,19 @@
+import BaseProperty from './BaseProperty';
+
+export default class TextContentInline extends BaseProperty{
+
+	constructor() {
+
+		super( "textContent", null, false );
+
+	}
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		element._glyphs._needsUpdate = true;
+		element._whiteSpace._needsProcess = true;
+
+	}
+
+
+}
diff --git a/src/core/properties/TextContentText.js b/src/core/properties/TextContentText.js
new file mode 100644
index 00000000..ac868a2c
--- /dev/null
+++ b/src/core/properties/TextContentText.js
@@ -0,0 +1,67 @@
+import InlineElement from '../../elements/basic/InlineElement';
+import TextContentEmpty from './TextContentEmpty';
+
+export default class TextContentText extends TextContentEmpty{
+
+	constructor() {
+
+		super( "textContent", null, false );
+
+		this._needsUpdate = false;
+
+	}
+
+	set value( value ) {
+
+		// If content hasn't change, dont update it
+		if( this._value !== value ) {
+
+			this._value = value;
+
+			console.log( this._value );
+
+			this._needsUpdate = true;
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
+
+		// prevent multiple update
+		this._needsUpdate = false;
+
+		// Remove all its children (Inlines)
+		for ( let i = element.children.length - 1 ; i >= 0; i-- ) {
+			const child = element.children[ i ];
+			if( child.isUI ) {
+
+				element.remove( child );
+				child.clear();
+
+			}
+
+		}
+
+		// Rebuild its child list
+		element._children._uis = [];
+
+		// If a value, add a child
+		if( this._value ) {
+			element.add( new InlineElement({name:'anonymousInline',textContent:this._value}));
+		}
+
+
+	}
+
+	process( element ) {
+
+		// If not already updated, return raw values
+		if( this._needsUpdate ) return this._value;
+
+		// or default traverse all children to concat textContent
+		return super.process(element);
+
+	}
+
+}
diff --git a/src/core/properties/TextLayouter.js b/src/core/properties/TextLayouter.js
new file mode 100644
index 00000000..4b54beea
--- /dev/null
+++ b/src/core/properties/TextLayouter.js
@@ -0,0 +1,276 @@
+import BaseProperty from './BaseProperty';
+import Lines from '../elements/glyphs/Lines';
+import Line from '../elements/glyphs/Line';
+
+export default class TextLayouter extends BaseProperty {
+
+	constructor() {
+
+		super( 'layouter', null, false );
+
+		/**
+		 *
+		 * @type {Lines}
+		 * @private
+		 */
+		this._value = null;
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */ }
+
+	/**
+	 *
+	 * @override
+	 */
+	process( element ) {
+
+
+		let INNER_WIDTH = element._width._value;
+
+		if ( element._width._auto ) {
+
+			INNER_WIDTH = Infinity;
+
+		} else {
+
+			INNER_WIDTH = element._bounds._innerWidth;
+
+		}
+
+		// Compute lines
+
+		const INTERLINE = element._lineHeight._value;
+
+		// Will stock the characters of each line, so that we can
+		// correct lines position before to merge
+		const lines = new Lines( new Line() );
+
+		let lastInlineOffset = 0;
+		element._children._inlines.forEach( ( inlineElement ) => {
+
+			// Abort condition
+
+			if ( !inlineElement._inlines.value ) return;
+
+			this._resetInlines( inlineElement );
+
+			//////////////////////////////////////////////////////////////
+			// Compute offset of each children according to its dimensions
+			//////////////////////////////////////////////////////////////
+
+			// @TODO: Fontsize best fit
+			const FONTSIZE = inlineElement._fontSize._value;
+
+			const LETTERSPACING = inlineElement._letterSpacing._value * FONTSIZE;
+
+			const WHITESPACE = inlineElement._whiteSpace._value;
+
+			const BREAKON = inlineElement._lineBreak._value;
+
+			const POSITION = inlineElement._position._value;
+
+			const whiteSpaceOptions = {
+				WHITESPACE,
+				LETTERSPACING,
+				BREAKON,
+				INNER_WIDTH
+			}
+
+			const inlineWrapper = inlineElement._whiteSpace._inlineWrapper;
+
+			// @TODO : absolute inlines in Texts
+			var remember = lastInlineOffset;
+			if( POSITION === 'absolute' ){
+					lastInlineOffset = 0;
+			}
+
+
+			lastInlineOffset += inlineElement._margin._value.w + inlineElement._padding._value.w;
+
+			inlineElement._inlines.value.forEach( ( inline, i, inlines ) => {
+
+				const line = lines[lines.length - 1];
+
+				// Line break
+				const shouldBreak = inlineWrapper(inlines,i,lastInlineOffset, whiteSpaceOptions );
+
+				if ( shouldBreak ) {
+
+					lines.push( new Line( inline ) );
+
+					inline.offsetX = inline.xoffset;
+
+					// restart the lastInlineOffset as zero.
+					if ( inline.width === 0 ) {
+						lastInlineOffset = 0;
+						return;
+					}
+
+					// compute lastInlineOffset normally
+					// except for kerning which won't apply
+					// as there is visually no lefthanded glyph to kern with
+					inline.cumulativeWidth = inline.xadvance + LETTERSPACING;
+					lastInlineOffset = inline.cumulativeWidth;
+					return;
+
+				}
+
+				lines[ lines.length - 1 ].push( inline );
+				inline.offsetX = lastInlineOffset + inline.xoffset + inline.kerning;
+
+				inline.cumulativeWidth = inline.xadvance + inline.kerning + LETTERSPACING;
+				lastInlineOffset += inline.cumulativeWidth;
+
+				// in case of lineBreak mandatory
+				if( line.length-1 === 1) {
+
+					if ( line[ line.length - 2 ].width === 0 ) {
+
+						// remove the offset of the character following the newline
+						inline.offsetX -= inline.xoffset;
+						lastInlineOffset -= inline.xoffset;
+
+					}
+
+				}
+
+			} );
+
+			lastInlineOffset += inlineElement._margin._value.y + inlineElement._padding._value.y;
+
+			// @TODO : absolute inlines in Texts
+			if( POSITION === 'absolute'){
+				lastInlineOffset = remember;
+			}
+
+		} );
+
+		// Compute single line and combined lines dimensions
+		const inlineCollapser = element._whiteSpace._inlineCollapser;
+
+
+		let width = 0, height =0, lineOffsetY = 0;
+
+		// calculates lines
+		lines.forEach( ( line, i ) => {
+
+			// starts by processing whitespace, it will return a collapsed left offset
+			const whiteSpaceOffset = inlineCollapser( line );
+
+			//
+			let lineHeight = 0;
+			let lineBase = 0;
+
+			line.forEach( ( inline ) => {
+
+				lineHeight = Math.max( lineHeight, inline.lineHeight );
+				lineBase = Math.max( lineBase, inline.lineBase );
+
+				inline.offsetX -= whiteSpaceOffset;
+
+			});
+
+			line.lineHeight = lineHeight;
+			line.lineBase = lineBase;
+
+			const baseLineDelta = lineHeight - lineBase;
+
+			if( i === 0 ){
+				lineOffsetY = -(lineHeight*INTERLINE - lineHeight) * 0.5;
+			} else {
+				lineOffsetY -= lines[i-1].lineHeight*INTERLINE;
+			}
+
+			line.y = lineOffsetY;
+			line.x = 0;
+
+			// process yoffset
+			line.forEach( ( inline ) => {
+
+				inline.offsetY = lineOffsetY - inline.anchor;
+
+				// VERTICAL ALIGN
+				if( inline.lineHeight < line.lineHeight ){
+
+					if ( inline.verticalAlign === 'super' ) {
+						inline.offsetY += inline.lineBase / 5;
+					}else if( inline.verticalAlign === 'sub'){
+						inline.offsetY -= line.lineBase * 1.2 - inline.lineBase;
+					}else{
+						// Baseline
+							inline.offsetY -= line.lineBase- inline.lineBase;
+					}
+
+
+				}
+
+			});
+
+
+
+			height += ( line.lineHeight * INTERLINE );
+			// height += ( line.lineHeight);
+
+			//
+			line.width = 0;
+			// if this line have inlines
+			if ( line[ 0 ] ) {
+
+				// compute its width: length from firstInline:LEFT to lastInline:RIGHT
+				// only by the length of its extremities
+				const lastInline = line[ line.length - 1 ];
+
+				// Right + Left ( left is negative )
+				line.width = ( lastInline.offsetX + lastInline.cumulativeWidth + lastInline.paddingRight + lastInline.marginRight ) + line[ 0 ].offsetX;
+
+				width = Math.max( width, line.width);
+			}
+
+		} );
+
+		lines.height = height;
+		lines.width = width;
+
+		this._value = lines;
+
+		if( INNER_WIDTH === Infinity ) {
+
+			element._bounds.setChildrenWidth( element, lines.width );
+
+		}
+
+		if( element._height._auto ) {
+
+			element._bounds.setChildrenHeight( element, lines.height );
+
+		}
+
+		const parent = element._parent._value;
+		if( parent ) {
+
+			parent._autoSize._needsProcess = true;
+			parent._flexDirection._needsProcess = true;
+
+		}
+
+		element._inlineJustificator._needsProcess = true;
+		element._textAlign._needsProcess = true;
+
+		element._overflow._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @param inlineElement
+	 * @protected
+	 */
+	_resetInlines ( inlineElement ) {
+
+		// ensure no collapsed remains
+		inlineElement._fontSize.process( inlineElement );
+
+	}
+
+}
diff --git a/src/core/properties/VisibleProperty.js b/src/core/properties/VisibleProperty.js
new file mode 100644
index 00000000..0a7802c0
--- /dev/null
+++ b/src/core/properties/VisibleProperty.js
@@ -0,0 +1,50 @@
+import BaseProperty from './BaseProperty';
+
+export default class VisibleProperty extends BaseProperty{
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 */
+	constructor( propertyId, value = true ) {
+
+		super( 'visible', value, true );
+
+		this._needsUpdate = false;
+
+	}
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		element.visible = this._value;
+
+		if( element._parent._value ) {
+
+			element._parent._value._children._needsUpdate = true;
+
+		}
+
+	}
+
+	set value( value ) {
+
+		if( ! this.isValid( value) ) return;
+
+		if( this._value !== value ) {
+
+			this._value = value;
+
+			this._needsUpdate = true;
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/src/core/properties/geometry/SegmentsProperty.js b/src/core/properties/geometry/SegmentsProperty.js
new file mode 100644
index 00000000..d41d95ff
--- /dev/null
+++ b/src/core/properties/geometry/SegmentsProperty.js
@@ -0,0 +1,11 @@
+import BaseProperty from '../BaseProperty';
+
+export default class SegmentsProperty extends BaseProperty {
+
+	constructor() {
+
+		super( 'segments', 1, false );
+
+	}
+
+}
diff --git a/src/core/properties/geometry/SegmentsPropertyInline.js b/src/core/properties/geometry/SegmentsPropertyInline.js
new file mode 100644
index 00000000..080df7fe
--- /dev/null
+++ b/src/core/properties/geometry/SegmentsPropertyInline.js
@@ -0,0 +1,13 @@
+import SegmentsPropertyText from './SegmentsPropertyText';
+
+export default class SegmentsPropertyInline extends SegmentsPropertyText {
+
+	constructor() {
+
+		super();
+
+		this._value = 'inherit';
+
+	}
+
+}
diff --git a/src/core/properties/geometry/SegmentsPropertyText.js b/src/core/properties/geometry/SegmentsPropertyText.js
new file mode 100644
index 00000000..a8647f08
--- /dev/null
+++ b/src/core/properties/geometry/SegmentsPropertyText.js
@@ -0,0 +1,52 @@
+import SegmentsProperty from './SegmentsProperty';
+
+export default class SegmentsPropertyText extends SegmentsProperty {
+
+	constructor() {
+
+		super( 'segments', 1, false );
+
+		this._notInheritedValue = undefined;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		this._notInheritedValue = this._value;
+		if ( this._notInheritedValue === 'inherit' ) {
+
+			this._notInheritedValue = this.getInheritedInput( element );
+
+		}
+
+		element._layouter._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @param {number|"inherit"} v
+	 */
+	set value( v ) {
+
+		if ( this._value === v ) return;
+
+		this._value = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @override
+	 * @return {number}
+	 */
+	get value() {
+
+		if ( this._value === 'inherit' ) return this._notInheritedValue;
+
+		return this._value;
+
+	}
+
+}
diff --git a/src/core/properties/hierarchy/ChildrenBase.js b/src/core/properties/hierarchy/ChildrenBase.js
new file mode 100644
index 00000000..5797b7b5
--- /dev/null
+++ b/src/core/properties/hierarchy/ChildrenBase.js
@@ -0,0 +1,120 @@
+import BaseProperty from '../BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class ChildrenBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'children', null, false );
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @private
+		 */
+		this._uis = [];
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._boxes = [];
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update requested when :
+	 * 		- New child has been added
+	 * 		- Existing child has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) { /* eslint-enable no-unused-vars */
+
+		
+
+		this._compute( element );
+
+		element._layouter._needsUpdate = true;
+		element._renderOrder._needsUpdate = true;
+
+	}
+
+
+	/**
+	 * Process when :
+	 * 		- Existing child visibility changed
+	 *
+	 * @param element
+	 */
+	process( element ) {
+
+		this._compute( element );
+
+		element._flexDirection._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+		element._overflow._needsRender = true;
+
+	}
+
+	_compute( element ) {
+
+		// Stores all children that are box
+		this._uis = element.children.filter( child => child.visible && child.isUI );
+		this._boxes = this._uis.filter( child => child.isBox ).sort( this._sortOrder );
+
+		// @TODO: check if it has changes boxes values? with array join to 'fingerprint'?
+		// 				computation to remove computation? Does it worth it? When would it worth it?
+		//				// Changed order property of children but doesn't impact the output of boxes => Order have change, okay to have more computation
+		//				// Removed the Added the same element, at the same position => Rare case
+		// 		Conclusion : Not worth it at the time of writing
+
+
+
+	}
+
+
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		this._uis = null;
+		this._boxes = null;
+
+	}
+
+	/**
+	 *
+	 * Sort children according to their .style.order property or fallback on children index
+	 *
+	 * @param {HTMLElementVR} a
+	 * @param {HTMLElementVR} b
+	 * @return {number}
+	 * @private
+	 */
+	_sortOrder = ( a, b ) => {
+
+		if( a._order._value < b._order._value ) return -1;
+		if( a._order._value > b._order._value ) return 1;
+
+		// if both children have the same order value, use their children index to order them
+		if( this._uis.indexOf(a) < this._uis.indexOf(b) ) {
+			return -1;
+		}
+
+		return 1;
+
+	}
+
+}
diff --git a/src/core/properties/hierarchy/ChildrenBox.js b/src/core/properties/hierarchy/ChildrenBox.js
new file mode 100644
index 00000000..6c100c5e
--- /dev/null
+++ b/src/core/properties/hierarchy/ChildrenBox.js
@@ -0,0 +1,118 @@
+import BaseProperty from '../BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class ChildrenBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'children', null, false );
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @private
+		 */
+		this._uis = [];
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._boxes = [];
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update requested when :
+	 * 		- New child has been added
+	 * 		- Existing child has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) { /* eslint-enable no-unused-vars */
+
+		this._compute( element );
+
+		element._layouter._needsUpdate = true;
+		element._renderOrder._needsUpdate = true;
+
+	}
+
+
+	/**
+	 * Process when :
+	 * 		- Existing child visibility changed
+	 *
+	 * @param element
+	 */
+	process( element ) {
+
+		this._compute( element );
+
+		element._flexDirection._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+		element._overflow._needsRender = true;
+
+	}
+
+	_compute( element ) {
+
+		// Stores all children that are box
+		this._uis = element.children.filter( child => child.visible && child.isUI );
+		this._boxes = this._uis.filter( child => child.isBox ).sort( this._sortOrder );
+
+		// @TODO: check if it has changes boxes values? with array join to 'fingerprint'?
+		// 				computation to remove computation? Does it worth it? When would it worth it?
+		//				// Changed order property of children but doesn't impact the output of boxes => Order have change, okay to have more computation
+		//				// Removed the Added the same element, at the same position => Rare case
+		// 		Conclusion : Not worth it at the time of writing
+
+
+
+	}
+
+
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		this._uis = null;
+		this._boxes = null;
+
+	}
+
+	/**
+	 *
+	 * Sort children according to their .style.order property or fallback on children index
+	 *
+	 * @param {HTMLElementVR} a
+	 * @param {HTMLElementVR} b
+	 * @return {number}
+	 * @private
+	 */
+	_sortOrder = ( a, b ) => {
+
+		if( a._order._value < b._order._value ) return -1;
+		if( a._order._value > b._order._value ) return 1;
+
+		// if both children have the same order value, use their children index to order them
+		if( this._uis.indexOf(a) < this._uis.indexOf(b) ) {
+			return -1;
+		}
+
+		return 1;
+
+	}
+
+}
diff --git a/src/core/properties/hierarchy/ChildrenInline.js b/src/core/properties/hierarchy/ChildrenInline.js
new file mode 100644
index 00000000..f2c797d4
--- /dev/null
+++ b/src/core/properties/hierarchy/ChildrenInline.js
@@ -0,0 +1,71 @@
+import BaseProperty from '../BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class ChildrenInline extends BaseProperty {
+
+	constructor() {
+
+		super( 'children', null, false );
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._uis = [];
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update requested when :
+	 * 		- New child has been added
+	 * 		- Existing child has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) { /* eslint-enable no-unused-vars */
+
+		// this._compute( element );
+		//
+		// this._needsProcess = true;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Process when :
+	 * 		- Existing child visibility changed
+	 *
+	 * @param element
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */
+
+		// this._compute( element );
+
+	}
+
+	/* eslint-disable no-unused-vars */ _compute( element ) { /* eslint-enable no-unused-vars */
+
+		// this._uis = element.children.filter( child => child.visible && child.isUI );
+		//
+		// this._inlines = this._uis.filter( child => child.isInline );
+
+	}
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		// this._inlines = null;
+
+	}
+
+}
diff --git a/src/core/properties/hierarchy/ChildrenText.js b/src/core/properties/hierarchy/ChildrenText.js
new file mode 100644
index 00000000..21a4a673
--- /dev/null
+++ b/src/core/properties/hierarchy/ChildrenText.js
@@ -0,0 +1,109 @@
+import BaseProperty from '../BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class ChildrenText extends BaseProperty {
+
+	constructor() {
+
+		super( 'children', null, false );
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._uis = [];
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._inlines = [];
+
+		/**
+		 *
+		 * @type {Array.<MeshUIBaseElement>}
+		 * @internal
+		 */
+		this._boxes = [];
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update requested when :
+	 * 		- New child has been added
+	 * 		- Existing child has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) { /* eslint-enable no-unused-vars */
+
+		this._compute( element );
+
+		this._needsProcess = true;
+
+	}
+
+
+	/**
+	 * Process when :
+	 * 		- Existing child visibility changed
+	 *
+	 * @param element
+	 */
+	process( element ) {
+
+		this._compute( element );
+
+		element._overflow._needsRender = true;
+
+	}
+
+	_compute( element ) {
+
+		this._uis = element.children.filter( child => child.visible && child.isUI );
+
+		this._inlines = this._uis.filter( child => child.isInline ).sort( this._sortOrder );
+
+	}
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		this._inlines = null;
+
+	}
+
+	/**
+	 *
+	 * Sort children according to their .style.order property or fallback on children index
+	 *
+	 * @param {HTMLElementVR} a
+	 * @param {HTMLElementVR} b
+	 * @return {number}
+	 * @private
+	 */
+	_sortOrder = ( a, b ) => {
+
+		if( a._order._value < b._order._value ) return -1;
+		if( a._order._value > b._order._value ) return 1;
+
+		// if both children have the same order value, use their children index to order them
+		if( this._uis.indexOf(a) < this._uis.indexOf(b) ) {
+			return -1;
+		}
+
+		return 1;
+
+	}
+
+}
diff --git a/src/core/properties/hierarchy/ParentProperty.js b/src/core/properties/hierarchy/ParentProperty.js
new file mode 100644
index 00000000..ea00cc98
--- /dev/null
+++ b/src/core/properties/hierarchy/ParentProperty.js
@@ -0,0 +1,102 @@
+import BaseProperty from '../BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Object3D } from 'three';
+/* eslint-enable no-unused-vars */
+
+export default class ParentProperty extends BaseProperty {
+
+	constructor() {
+
+		super('parent', null, false);
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Update when :
+	 * 		- element has been added
+	 * 		- element has been removed
+	 *
+	 * @param element
+	 * @param out
+	 */
+	update( element, out ) {
+		/* eslint-enable no-unused-vars */
+
+		if ( element.parent && element.parent.isUI ) {
+
+			this._value = element.parent;
+			// this.position.z = this.getOffset();
+
+		} else {
+
+			this._value = null;
+
+		}
+
+		// @TODO : parentElement
+		// // set elements as root
+		// if ( element.isBlock && !this._value ) {
+		//
+		// 	ThreeMeshUI.addRoot( element );
+		// 	element.pseudoClassList.add('root');
+		//
+		// } else {
+		//
+		// 	ThreeMeshUI.removeRoot( element );
+		// 	element.pseudoClassList.remove('root');
+		//
+		// }
+
+
+	}
+
+	set value( value ) {
+
+		console.warn('ParentProperty is readonly');
+
+	}
+
+	/**
+	 *
+	 * @return {MeshUIBaseElement}
+	 */
+	get value() { return this._value; }
+
+
+	/**
+	 *
+	 * @param {(p:Object3D)=>boolean } conditionCallback
+	 */
+	find( conditionCallback ) {
+
+		if( this._value ) {
+
+			if( conditionCallback( this._value) ) {
+
+				return this._value;
+
+			}
+
+			return this._value._parent.find( conditionCallback );
+
+		}
+
+		return null;
+
+	}
+
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		this._value = null;
+
+	}
+
+
+}
diff --git a/src/core/properties/rendering/RendererPropertyBox.js b/src/core/properties/rendering/RendererPropertyBox.js
new file mode 100644
index 00000000..20025226
--- /dev/null
+++ b/src/core/properties/rendering/RendererPropertyBox.js
@@ -0,0 +1,25 @@
+import BaseProperty from '../BaseProperty';
+import Frame from '../../../frame/Frame';
+
+export default class RendererPropertyBox extends BaseProperty{
+
+	constructor() {
+
+		super( 'renderer' );
+
+	}
+
+
+	render( element ) {
+
+		if( !element._backgroundMesh ) {
+
+			element.setBackgroundMesh( new Frame(element) );
+
+		}
+
+		element.performAfterUpdate();
+
+	}
+
+}
diff --git a/src/core/properties/rendering/RendererPropertyInline.js b/src/core/properties/rendering/RendererPropertyInline.js
new file mode 100644
index 00000000..76d24283
--- /dev/null
+++ b/src/core/properties/rendering/RendererPropertyInline.js
@@ -0,0 +1,35 @@
+import BaseProperty from '../BaseProperty';
+import { mergeBufferGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils';
+import { Mesh } from 'three';
+
+export default class RendererPropertyInline extends BaseProperty{
+
+	constructor() {
+
+		super( 'renderer' );
+
+	}
+
+
+	render( element ) {
+
+		if( !element._inlines._value || !element._inlines._value.length ) return;
+
+			const charactersAsGeometries = element._inlines._value.map(
+				inline => {
+					return element._font._fontVariant.getGeometricGlyph( inline, element )
+						.translate( inline.offsetX, inline.offsetY, 0 )
+				}
+			);
+
+			const mergedGeom = mergeBufferGeometries( charactersAsGeometries );
+
+			element.setFontMesh( new Mesh( mergedGeom, element.fontMaterial) );
+
+			element._fontMesh.renderOrder = Infinity;
+
+
+
+	}
+
+}
diff --git a/src/core/properties/rendering/RendererPropertyInlineBox.js b/src/core/properties/rendering/RendererPropertyInlineBox.js
new file mode 100644
index 00000000..1a9653c4
--- /dev/null
+++ b/src/core/properties/rendering/RendererPropertyInlineBox.js
@@ -0,0 +1,29 @@
+import BaseProperty from '../BaseProperty';
+import Frame from '../../../frame/Frame';
+
+export default class RendererPropertyInlineBox extends BaseProperty{
+
+	constructor() {
+
+		super( 'renderer' );
+
+	}
+
+
+	render( element ) {
+
+		if( !element._backgroundMesh ) {
+
+			element.setBackgroundMesh( new Frame(element) );
+
+		}
+
+		element._backgroundMesh.position.x = element._inlines._value[0].offsetX + element._inlines._value[0].width/2;
+		// element._backgroundMesh.position.y = element._inlines._value[0].offsetY + element._inlines._value[0].lineBase/4;
+		element._backgroundMesh.position.y = element._inlines._value[0].offsetY + element._inlines._value[0].lineBase/2;
+
+		element._bounds.render( element );
+
+	}
+
+}
diff --git a/src/core/properties/rendering/RendererPropertyText.js b/src/core/properties/rendering/RendererPropertyText.js
new file mode 100644
index 00000000..748c4f50
--- /dev/null
+++ b/src/core/properties/rendering/RendererPropertyText.js
@@ -0,0 +1,28 @@
+import RendererPropertyBox from './RendererPropertyBox';
+
+export default class RendererPropertyText extends RendererPropertyBox{
+
+	constructor() {
+
+		super( 'renderer' );
+
+		this._needsUpdate = false;
+
+	}
+
+
+	render( element ) {
+
+		super.render( element );
+
+		for ( const inlineElement of element._children._inlines ) {
+
+			inlineElement._renderer.render( inlineElement );
+
+		}
+
+		element.performAfterUpdate();
+
+	}
+
+}
diff --git a/src/core/properties/style-properties/PositionProperty.js b/src/core/properties/style-properties/PositionProperty.js
new file mode 100644
index 00000000..04dce3dc
--- /dev/null
+++ b/src/core/properties/style-properties/PositionProperty.js
@@ -0,0 +1,45 @@
+import SubStyleProperty from './SubStyleProperty';
+
+
+export default class PositionProperty extends SubStyleProperty {
+
+	constructor( ) {
+
+		super( 'position', 'static', true );
+
+		// configure
+		this._allowsInherit = false;
+
+		this._value = 'static';
+		this._needsUpdate = false;
+
+		this.computeOutputValue = this._computeFromInherited;
+
+		this.isValidValue = _isValid;
+
+	}
+
+	_computeFromInherited( element ) {
+		super._computeFromInherited( element );
+
+		//console.log( "Position update")
+		// require parent to compute children -> bounds -> etc...
+		if( element._parent._value ) element._parent._value._children._needsProcess = true;
+	}
+
+}
+
+const AVAILABLE_VALUES = ['static', 'absolute'];
+
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) position value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/src/core/properties/style-properties/PositionPropertyBox.js b/src/core/properties/style-properties/PositionPropertyBox.js
new file mode 100644
index 00000000..25a27d5c
--- /dev/null
+++ b/src/core/properties/style-properties/PositionPropertyBox.js
@@ -0,0 +1,19 @@
+import PositionProperty from './PositionProperty';
+
+export default class PositionPropertyBox extends PositionProperty {
+
+	constructor( ) {
+
+		super( 'position' );
+
+	}
+
+	update( element, out ) {
+
+		super.update( element, out );
+
+		this._needsProcess = true;
+
+	}
+
+}
diff --git a/src/core/properties/style-properties/Style4DimensionsProperty.js b/src/core/properties/style-properties/Style4DimensionsProperty.js
new file mode 100644
index 00000000..159c51eb
--- /dev/null
+++ b/src/core/properties/style-properties/Style4DimensionsProperty.js
@@ -0,0 +1,106 @@
+import { Vector4 } from 'three';
+import SubStyleProperty from './SubStyleProperty';
+import StyleVector4Property from './StyleVector4Property';
+
+export default class Style4DimensionsProperty extends StyleVector4Property {
+
+	constructor( propertyId, defaultValue ) {
+
+		super( propertyId, defaultValue, false );
+
+	}
+
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		console.log( this._value, this._input)
+		this._vector4ValueSetterFinal( this._value, this._input, element );
+
+	}
+
+	set inline( value ) {
+
+		this._input = value;
+
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @param {Vector4} vector4
+	 * @param {Vector4|Array.<Number>|Number|String} value
+	 * @protected
+	 */
+	_vector4ValueSetterFinal( vector4, value, element ) {
+
+		if ( value instanceof Vector4 ) {
+
+			return vector4.copy( value );
+
+		}
+
+		if ( typeof value === 'string' || value instanceof String ) {
+
+			value = value.split( ' ' );
+
+		}
+
+		if ( Array.isArray( value ) ) {
+
+			switch ( value.length ) {
+
+				case 1:
+					return vector4.setScalar( this._parseValue( value[ 0 ], element ) );
+
+				case 2:
+					vector4.x = vector4.z = this._parseValue(value[ 0 ]);
+					vector4.y = vector4.w = this._parseValue(value[ 1 ]);
+					return vector4;
+
+				case 3:
+					vector4.x = this._parseValue(value[ 0 ]);
+					vector4.y = this._parseValue(value[ 1 ]);
+					vector4.z = this._parseValue(value[ 2 ]);
+					return vector4;
+
+				case 4:
+					vector4.x = this._parseValue(value[ 0 ]);
+					vector4.y = this._parseValue(value[ 1 ]);
+					vector4.z = this._parseValue(value[ 2 ]);
+					vector4.w = this._parseValue(value[ 3 ]);
+					return vector4;
+
+				default:
+					console.error( 'StyleVector4Property::set() Four Dimension property had more than four values' );
+					return;
+
+			}
+
+		}
+
+		if ( !isNaN( value ) ) {
+
+			vector4.setScalar( value );
+
+		}
+
+		return vector4;
+
+	}
+
+
+	_parseValue( v , element ){
+
+		if( !isNaN(v) ) return parseFloat(v);
+
+		if( v.endsWith('em') ) {
+
+			return parseFloat( v.replace(/[^0-9.]+/,"") ) * element._fontSize._value;
+
+		}
+
+	}
+
+}
+
+
diff --git a/src/core/properties/style-properties/StyleColorProperty.js b/src/core/properties/style-properties/StyleColorProperty.js
new file mode 100644
index 00000000..f980dee7
--- /dev/null
+++ b/src/core/properties/style-properties/StyleColorProperty.js
@@ -0,0 +1,56 @@
+import SubStyleProperty from './SubStyleProperty';
+import { Color } from 'three';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
+
+export default class StyleColorProperty extends SubStyleProperty {
+
+	constructor( propertyId, defaultValue ) {
+
+		super( propertyId, defaultValue, false );
+
+		/**
+		 * @type {Color|string|number}
+		 * @private
+		 */
+		this._input = defaultValue;
+
+		/**
+		 * @type {Color}
+		 * @protected
+		 */
+		this._value = new Color();
+
+		this.output = this._outputValue;
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @override
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._input !== 'inherit' ) {
+
+			this._value.set(this._input);
+
+		}
+
+	}
+
+	set inline( value ) {
+
+		// Colors are too wide to perform validation checks each time
+		// if( ! this.isValidValue( value ) ) return;
+
+		this._input = this._inline = value;
+
+		this._needsUpdate = true;
+
+	}
+
+}
+
+
diff --git a/src/core/properties/style-properties/StyleEmptyProperty.js b/src/core/properties/style-properties/StyleEmptyProperty.js
new file mode 100644
index 00000000..8a0cd754
--- /dev/null
+++ b/src/core/properties/style-properties/StyleEmptyProperty.js
@@ -0,0 +1,21 @@
+import SubStyleProperty from './SubStyleProperty';
+
+export default class StyleEmptyProperty extends SubStyleProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId = 'untitled' ) {
+
+		super( propertyId , undefined, false);
+
+		this._needsUpdate = false;
+
+	}
+
+	/* eslint-disable no-unused-vars */ output( out ) {} /* eslint-enable no-unused-vars */
+}
+
+
+
diff --git a/src/core/properties/style-properties/StyleFactorProperty.js b/src/core/properties/style-properties/StyleFactorProperty.js
new file mode 100644
index 00000000..c2b953e1
--- /dev/null
+++ b/src/core/properties/style-properties/StyleFactorProperty.js
@@ -0,0 +1,58 @@
+import SubStyleProperty from './SubStyleProperty';
+
+export default class StyleFactorProperty extends SubStyleProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} defaultValue
+	 */
+	constructor( propertyId, defaultValue ) {
+
+		super( propertyId, defaultValue, true );
+
+		this.isValidValue = _isValid;
+
+		this._allowsInherit = false;
+
+		this._input = defaultValue;
+
+		this._value = defaultValue;
+
+		this.output = this._outputValue;
+
+		this.computeOutputValue = this._computeFromInherited;
+
+	}
+
+
+	_outputValue( out ) {
+
+		out[this._id] = this._inheritedInput;
+
+	}
+
+
+
+}
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if ( value < 0 && value > 1.0 ) {
+
+		console.warn( `(.style) styleFactorProperty('${this.id}') value '${value}' is not valid)` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+
diff --git a/src/core/properties/style-properties/StyleNumberProperty.js b/src/core/properties/style-properties/StyleNumberProperty.js
new file mode 100644
index 00000000..91692a4c
--- /dev/null
+++ b/src/core/properties/style-properties/StyleNumberProperty.js
@@ -0,0 +1,25 @@
+import SubStyleProperty from './SubStyleProperty';
+
+export default class StyleNumberProperty extends SubStyleProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} defaultValue
+	 */
+	constructor( propertyId, defaultValue ) {
+
+		super( propertyId, defaultValue );
+
+	}
+
+	/**
+	 * @override
+	 * @return {Number}
+	 */
+	get value() { return this._value; }
+
+}
+
+
+
diff --git a/src/core/properties/style-properties/StyleVector4Property.js b/src/core/properties/style-properties/StyleVector4Property.js
new file mode 100644
index 00000000..51af1c12
--- /dev/null
+++ b/src/core/properties/style-properties/StyleVector4Property.js
@@ -0,0 +1,213 @@
+import { Vector4 } from 'three';
+import SubStyleProperty from './SubStyleProperty';
+
+export default class StyleVector4Property extends SubStyleProperty {
+
+	constructor( propertyId, defaultValue ) {
+
+		super( propertyId, defaultValue, false );
+
+		/**
+		 *
+		 * @type {Vector4}
+		 * @private
+		 */
+		this._input = this._vector4ValueSetter( new Vector4(0,0,0,0), defaultValue);
+
+		/**
+		 *
+		 * @type {any}
+		 * @internal
+		 */
+		this._inline = null;
+
+		/**
+		 * @override
+		 * @type {Vector4}
+		 * @protected
+		 */
+		this._value = new Vector4(0,0,0,0);
+
+	}
+
+	/**
+	 * @override
+	 * @return {Vector4}
+	 */
+	get value(){
+
+		return this._value;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @override
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		this._vector4ValueSetter( this._value, this._input, element );
+
+	}
+
+	set inline( value ) {
+
+		this._vector4ValueSetter( this._input, value );
+
+		if( this._input.equals( this._value) ) return;
+
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set top( v ) {
+
+		if( this._input.x === v ) return;
+
+		this._input.x = v;
+		this._needsUpdate = true;
+
+	}
+
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get top() { return this._input.x; }
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set right( v ) {
+
+		if( this._input.y === v ) return;
+
+		this._input.y = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get right() { return this._input.y; }
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set bottom( v ) {
+		if( this._input.z === v ) return;
+
+		this._input.z = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get bottom() { return this._input.z; }
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set left( v ) {
+
+		if( this._input.w === v ) return;
+
+		this._input.w = v;
+		this._needsUpdate = true;
+	}
+
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get left() { return this._input.w; }
+
+	dispose(){
+
+		this._computed = null;
+		this._inline = null;
+		this._input = null;
+		this._output = null;
+
+	}
+
+	/**
+	 *
+	 * @param {Vector4} vector4
+	 * @param {Vector4|Array.<Number>|Number|String} value
+	 * @protected
+	 */
+	_vector4ValueSetter( vector4, value ) {
+
+		if ( value instanceof Vector4 ) {
+
+			return vector4.copy( value );
+
+		}
+
+		if ( typeof value === 'string' || value instanceof String ) {
+
+			value = value.split( ' ' );
+
+		}
+
+		if ( Array.isArray( value ) ) {
+
+			value = value.map( v => parseFloat( v ) );
+
+			switch ( value.length ) {
+
+				case 1:
+					return vector4.setScalar( value[ 0 ] );
+
+				case 2:
+					vector4.x = vector4.z = value[ 0 ];
+					vector4.y = vector4.w = value[ 1 ];
+					return vector4;
+
+				case 3:
+					vector4.x = value[ 0 ];
+					vector4.y = value[ 1 ];
+					vector4.z = value[ 2 ];
+					return vector4;
+
+				case 4:
+					vector4.x = value[ 0 ];
+					vector4.y = value[ 1 ];
+					vector4.z = value[ 2 ];
+					vector4.w = value[ 3 ];
+					return vector4;
+
+				default:
+					console.error( 'StyleVector4Property::set() Four Dimension property had more than four values' );
+					return;
+
+			}
+
+		}
+
+		if ( !isNaN( value ) ) {
+
+			vector4.setScalar( value );
+
+		}
+
+		return vector4;
+
+	}
+
+}
+
+
diff --git a/src/core/properties/style-properties/SubStyleProperty.js b/src/core/properties/style-properties/SubStyleProperty.js
new file mode 100644
index 00000000..b28e3639
--- /dev/null
+++ b/src/core/properties/style-properties/SubStyleProperty.js
@@ -0,0 +1,175 @@
+import BaseProperty from '../BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+/* eslint-disable no-unused-vars */
+export default class SubStyleProperty extends BaseProperty{
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {boolean} [primitive=true]
+	 * @param {any} defaultValue
+	 */
+	constructor( propertyId, defaultValue, primitive = true) {
+
+		super( propertyId, 'unset', primitive );
+
+		/**
+		 * @type {any}
+		 * @internal
+		 */
+		this._input = 'inherit';
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @protected
+		 */
+		this._allowsInherit = true;
+
+		/**
+		 * The input value that won't be 'inherit'
+		 * @type {any}
+		 * @protected
+		 */
+		this._inheritedInput = undefined;
+
+		/**
+		 *
+		 * @type {any}
+		 * @internal
+		 */
+		this._inline = undefined;
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 * @param {Object.<string,any> } out
+	 */
+	update( element, out ) {
+
+		if( !this._allowsInherit ) {
+
+			this._inheritedInput = this.getInheritedInput( element );
+
+		}
+
+		this.computeOutputValue( element );
+
+		// rebuild same properties on children 'inheritance'
+		for ( const childUIElement of element._children._uis ) {
+
+			const property = childUIElement[`_${this._id}`];
+
+			if( !property ) continue;
+
+			const target = property._input ? property._input : property._value;
+
+			if( target === 'inherit' ) childUIElement[`_${this._id}`]._needsUpdate = true;
+
+		}
+
+		this.output( out );
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) {
+
+		this._value = this._input;
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	_computeFromInherited( element ) {
+
+		this._value = this._inheritedInput;
+
+	}
+
+
+	/**
+	 * @override
+	 * @deprecated
+	 * @param {any} v
+	 */
+	set value( v ) {
+
+		console.warn(".(style) sub-property cannot be directly set. It must comes from inline or computed setter.")
+
+	}
+
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set inline( value ) {
+
+		if( ! this.isValidValue( value ) ) return;
+
+		if( value === this._inline ) {
+
+			// do nothing no update, the value hasn't changed
+			return;
+
+		}
+
+		this._input = this._inline = value;
+
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @return {any}
+	 */
+	get inline() { return this._inline; }
+
+	/**
+	 *
+	 * @param {any} value
+	 * @return {boolean}
+	 */
+	isValidValue( value ) {
+
+		return true;
+
+	}
+
+	/**
+	 * @param {MeshUIBaseElement} element
+	 */
+	getInheritedInput ( element ) {
+
+		if( this._input !== 'inherit' ) return this._input;
+
+		const parent = element._parent._value;
+		if( parent ) {
+
+			const parentProperty = parent[`_${this._id}`];
+
+			if( !parentProperty ) return this.getDefaultValue();
+
+			return parent[`_${this._id}`].getInheritedInput( parent )
+
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+}
+/* eslint-enable no-unused-vars */
diff --git a/src/core/properties/style-properties/background/BackgroundColorProperty.js b/src/core/properties/style-properties/background/BackgroundColorProperty.js
new file mode 100644
index 00000000..7b1661d5
--- /dev/null
+++ b/src/core/properties/style-properties/background/BackgroundColorProperty.js
@@ -0,0 +1,59 @@
+import { Color } from 'three';
+import StyleColorProperty from '../StyleColorProperty';
+
+
+export default class BackgroundColorProperty extends StyleColorProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'backgroundColor', defaultValue, false );
+
+		this._input = new Color(defaultValue);
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		element._backgroundMesh.visible = !(this._input === 'none' || this._input === 'transparent');
+
+		if( this._input === 'inherit' ) {
+
+			this._value.set(this.getInheritedInput( element ));
+
+		} else {
+
+			this._value.set( this._input );
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set inline( value ) {
+
+		if( ! this.isValidValue( value ) ) return;
+
+		if( value === this._inline ) {
+
+			// do nothing no update, the value hasn't changed
+			return;
+
+		}
+
+		this._input = this._inline = value;
+
+		this._needsUpdate = true;
+
+	}
+
+}
+
+
diff --git a/src/core/properties/style-properties/background/BackgroundColorPropertyInline.js b/src/core/properties/style-properties/background/BackgroundColorPropertyInline.js
new file mode 100644
index 00000000..aaec1d27
--- /dev/null
+++ b/src/core/properties/style-properties/background/BackgroundColorPropertyInline.js
@@ -0,0 +1,45 @@
+import { Color } from 'three';
+import StyleColorProperty from '../StyleColorProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
+
+export default class BackgroundColorPropertyInline extends StyleColorProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'backgroundColor', defaultValue, false );
+
+		this._allowsInherit = false;
+
+		this._input = 'transparent';
+
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		// @TODO : Changes multiple mesh visibility
+		// element._backgroundMesh.visible = !(this._input === 'none' || this._input === 'transparent');
+
+		if( this._input === 'inherit' ) {
+
+			this._value.set(this.getInheritedInput( element ));
+
+		} else {
+
+			this._value.set( this._input );
+
+		}
+
+	}
+
+}
+
+
diff --git a/src/core/properties/style-properties/background/BackgroundColorPropertyInlineBlock.js b/src/core/properties/style-properties/background/BackgroundColorPropertyInlineBlock.js
new file mode 100644
index 00000000..d9c248a3
--- /dev/null
+++ b/src/core/properties/style-properties/background/BackgroundColorPropertyInlineBlock.js
@@ -0,0 +1,67 @@
+import StyleColorProperty from '../StyleColorProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
+
+export default class BackgroundColorPropertyInlineBlock extends StyleColorProperty {
+
+	constructor() {
+
+		super( 'backgroundColor', 'inherit', false );
+
+		this._allowsInherit = false;
+
+		this._input = 'inherit';
+
+	}
+
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		element._backgroundMesh.visible = !(this._input === 'none' || this._input === 'transparent');
+
+		if( this._input === 'inherit' ) {
+
+			this._value.set(this.getInheritedInput( element ));
+
+		} else {
+
+			this._value.set( this._input );
+
+		}
+
+	}
+
+	// background color of inlineBlock looks for parent color instead of backgroundColor
+	getInheritedInput( element ) {
+
+		if ( this._input !== 'inherit' ) return this._input;
+
+		return element._color._value;
+
+	}
+
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set inline( value ) {
+
+		if( ! this.isValidValue( value ) ) return;
+
+		if( value === this._inline ) {
+
+			// do nothing no update, the value hasn't changed
+			return;
+
+		}
+
+		this._input = this._inline = value;
+
+		this._needsUpdate = true;
+
+	}
+
+}
+
+
diff --git a/src/core/properties/style-properties/background/BackgroundImage.js b/src/core/properties/style-properties/background/BackgroundImage.js
new file mode 100644
index 00000000..fc008aa4
--- /dev/null
+++ b/src/core/properties/style-properties/background/BackgroundImage.js
@@ -0,0 +1,102 @@
+import SubStyleProperty from '../SubStyleProperty';
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Texture, Vector2 } from 'three';
+/* eslint-enable no-unused-vars */
+
+
+export default class BackgroundImage extends SubStyleProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'backgroundImage', defaultValue, true );
+
+
+		this._input = null;
+
+		// configure
+		this._allowsInherit = false;
+
+		/**
+		 *
+		 * @type {Vector2}
+		 * @internal
+		 */
+		this._textureSize = new Vector2( 1,1 );
+
+		this.isValidValue = _isValid;
+
+	}
+
+	/**
+	 * @override
+	 * @return {any|Texture|null}
+	 */
+	get value() {
+
+		return this._value;
+
+	}
+
+	output( out ) {
+
+		out[this._id] = this._value;
+
+		out['tSize'] = this._textureSize;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		// @TODO : URL
+		this._value = this._inheritedInput;
+
+		// ?
+		// out[this.id] = this._value;
+
+		if( this._value instanceof Texture && !this._value.image ) {
+			console.warn( `ThreeMeshUI - .backgroundImage :: Please provide preloaded texture in order to have accurate sizing.`);
+			return;
+		}
+
+		this._needsProcess = true;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._value ) {
+
+			this._textureSize.set( this._value.image.width, this._value.image.height );
+
+		} else {
+
+			this._textureSize.set( 1 , 1 );
+
+		}
+
+	}
+
+}
+
+/* eslint-disable no-unused-vars */
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) { /* eslint-enable no-unused-vars */
+
+	// @TODO : Texture or URL() or String or ID ?
+	//console.log( "todo, validate image value", value);
+
+	return true;
+
+}
diff --git a/src/core/properties/style-properties/background/BackgroundSize.js b/src/core/properties/style-properties/background/BackgroundSize.js
new file mode 100644
index 00000000..e224fde5
--- /dev/null
+++ b/src/core/properties/style-properties/background/BackgroundSize.js
@@ -0,0 +1,39 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+/**
+ * @property {"cover"|"contain"|"stretch"} value
+ */
+export default class BackgroundSize extends SubStyleProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'backgroundSize', defaultValue, true );
+
+		this.isValidValue = _isValid;
+
+		this.output = this._outputValue;
+	}
+
+}
+
+const AVAILABLE_VALUES = ['cover','contain','stretch'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) backgroundSize value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/src/core/properties/style-properties/border/BorderColorPropertyInlineBlock.js b/src/core/properties/style-properties/border/BorderColorPropertyInlineBlock.js
new file mode 100644
index 00000000..3f934e71
--- /dev/null
+++ b/src/core/properties/style-properties/border/BorderColorPropertyInlineBlock.js
@@ -0,0 +1,44 @@
+import StyleColorProperty from '../StyleColorProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
+
+export default class BorderColorPropertyInlineBlock extends StyleColorProperty {
+
+	constructor() {
+
+		super( 'borderColor', 'inherit', false );
+
+		this._allowsInherit = false;
+
+		this._input = 'inherit';
+
+	}
+
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._input === 'inherit' ) {
+
+			this._value.set(this.getInheritedInput( element ));
+
+		} else {
+
+			this._value.set( this._input );
+
+		}
+
+	}
+
+	// background color of inlineBlock looks for parent color instead of backgroundColor
+	getInheritedInput( element ) {
+
+		if ( this._input !== 'inherit' ) return this._input;
+
+		return element._color._value;
+
+	}
+
+}
+
+
diff --git a/src/core/properties/style-properties/border/BorderRadius.js b/src/core/properties/style-properties/border/BorderRadius.js
new file mode 100644
index 00000000..e13453c9
--- /dev/null
+++ b/src/core/properties/style-properties/border/BorderRadius.js
@@ -0,0 +1,513 @@
+import { Vector2 } from 'three';
+import * as Units from '../../../../utils/Units';
+import StyleVector4Property from '../StyleVector4Property';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Vector4 } from 'three';
+/* eslint-enable no-unused-vars */
+
+export default class BorderRadius extends StyleVector4Property {
+
+	/**
+	 *
+	 * @param {Vector4} defaultValue
+	 */
+	constructor( defaultValue ) {
+
+		super( 'borderRadius', defaultValue );
+
+		/**
+		 *
+		 * @type {Vector4}
+		 * @private
+		 */
+		this._valueUV = this._value.clone();
+
+		/**
+		 *
+		 * @type {Vector4}
+		 * @private
+		 */
+		this._input = this._vector4ValueSetter(new Vector4(0,0,0,0), defaultValue);
+		/**
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		this._mediation = true;
+
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerTL = new Vector2(0, 1);
+
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerTR = new Vector2(1, 1);
+
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerBR = new Vector2(1, 0);
+
+		/**
+		 *
+		 * @type {Vector2}
+		 * @private
+		 */
+		this._cornerBL = new Vector2(0, 0);
+
+		const mediationTop = new BorderRadiusMediator( this._valueUV, [ 'x', 'y' ] ); // bottom
+		const mediationBottom = new BorderRadiusMediator( this._valueUV, [ 'z', 'w'] ); // top
+		const mediationLeft = new BorderRadiusMediator( this._valueUV, [ 'x', 'w'] ); // right
+		const mediationRight = new BorderRadiusMediator( this._valueUV, [ 'y', 'z'] ); // left
+
+		mediationTop.complementaryMediation = mediationBottom;
+		mediationBottom.complementaryMediation = mediationTop;
+		mediationLeft.complementaryMediation = mediationRight;
+		mediationRight.complementaryMediation = mediationLeft;
+
+		/**
+		 *
+		 * @type {Array.<BorderRadiusMediator>}
+		 * @private
+		 */
+		this._sideMediators = [ mediationTop, mediationBottom, mediationLeft, mediationRight ];
+
+		this._units = Units.WORLD_UNITS;
+
+	}
+
+	/**
+	 *
+	 * @param {string} units
+	 */
+	set units( units ) {
+
+		this._units = Units.validateUnits( units );
+
+		this._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get units() { return this._units; }
+
+	/**
+	 *
+	 * @param {boolean} v
+	 */
+	set mediation ( v) {
+
+		if( v !== this._mediation ){
+
+			this._mediation = v;
+
+			this._needsUpdate = true;
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @returns {boolean}
+	 */
+	get mediation () { return this._mediation; }
+
+
+	/**
+	 *
+	 * @param {Object.<string,any>} out
+	 */
+
+	output( out ) {
+
+		out["cornerTL"] = this._cornerTL;
+		out["cornerTR"] = this._cornerTR;
+		out["cornerBR"] = this._cornerBR;
+		out["cornerBL"] = this._cornerBL;
+
+	}
+
+	/**
+	 *
+	 * @override
+	 */
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		this._vector4ValueSetter( this._value, this._input );
+
+		this._needsProcess = true;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 */
+	process( element ){ /* eslint-enable no-unused-vars */
+
+		this._needsRender = true;
+
+	}
+
+	/**
+	 *
+	 * @override
+	 */
+	render( element ){
+
+		this._valueUV.copy( this._value );
+
+		const elementWidth = element._bounds._offsetWidth;
+		const elementHeight = element._bounds._offsetHeight;
+
+		// @TODO: Units process could be strategies
+		if( this._units === Units.PERCENT ) {
+			this._valueUV.divideScalar(100);
+		}
+
+		// @TODO: Units process could be strategies
+		if( this._units === Units.WORLD_UNITS ) {
+			this._valueUV.divideScalar( Math.min(elementWidth , elementHeight) );
+		}
+
+
+
+		/**
+		 * mediate
+		 * Be sure no side is greater than 1 (uv units)
+		 */
+		if( this._mediation ) {
+
+			do {
+
+				this._sideMediators.forEach( srm => srm.computeValue() );
+				this._sideMediators.sort( ( a, b ) => {
+					return a.value < b.value ? 1 : -1
+				} );
+
+				if ( this._sideMediators[ 0 ].value > 1.0 ) {
+					this._sideMediators[ 0 ].mediate();
+				}
+
+			} while ( this._sideMediators[ 0 ].value > 1.0 );
+
+		}
+
+
+		let sX = elementWidth > elementHeight ? elementHeight/elementWidth : 1;
+		let sY = elementWidth < elementHeight ? elementWidth/elementHeight : 1;
+
+		// Do not scale pourcentages, allowing ovals
+		if( this._units === Units.PERCENT ){
+			sX = sY = 1.0;
+		}
+
+		this._cornerTL.x = this._valueUV.x * sX;
+		this._cornerTL.y = 1 - (this._valueUV.x * sY );
+
+		this._cornerTR.x = 1 - (this._valueUV.y * sX );
+		this._cornerTR.y = 1 - (this._valueUV.y * sY );
+
+		this._cornerBR.x = 1 - (this._valueUV.z * sX );
+		this._cornerBR.y = this._valueUV.z * sY;
+
+		this._cornerBL.x = this._valueUV.w * sX;
+		this._cornerBL.y = this._valueUV.w * sY;
+
+	}
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		for ( const sideMediator of this._sideMediators ) {
+
+			sideMediator.dispose();
+
+		}
+
+		this._sideMediators = null;
+
+		this._cornerTL = null;
+		this._cornerTR = null;
+		this._cornerBR = null;
+		this._cornerBL = null;
+
+		super.dispose();
+
+	}
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set topLeft( v ) {
+
+		if( this._input.x === v ) return;
+
+		this._input.x = v;
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get topLeft() { return this._input.x; }
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set topRight( v ) {
+
+		if( this._input.y === v ) return;
+
+		this._input.y = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get topRight() { return this._input.y; }
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set bottomRight( v ) {
+		if( this._input.z === v ) return;
+
+		this._input.z = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get bottomRight() { return this._input.z; }
+
+	/**
+	 *
+	 * @param {Number} v
+	 */
+	set bottomLeft( v ) {
+
+		if( this._input.w === v ) return;
+
+		this._input.w = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get bottomLeft() { return this._input.w; }
+
+
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set top( v ) {
+
+		if( this._input.x === v && this._input.y === v ) return;
+
+		this._input.x = this._input.y = v;
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get top() { return (this._input.x + this._input.y) / 2; }
+
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set right( v ) {
+
+		if( this._input.y === v && this._input.z === v ) return;
+
+		this._input.y = this._input.z = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get right() { return (this._input.y + this._input.z) / 2; }
+
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set bottom( v ) {
+		if( this._input.z === v && this._input.w === v ) return;
+
+		this._input.z = this._input.w = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get bottom() { return (this._input.z + this._input.w) / 2; }
+
+	/**
+	 * @override
+	 * @param {Number} v
+	 */
+	set left( v ) {
+
+		if( this._input.w === v && this._input.x === v ) return;
+
+		this._input.w = this._input.x = v;
+		this._needsUpdate = true;
+	}
+
+	/**
+	 * @override
+	 * @returns {number}
+	 */
+	get left() { return (this._input.w + this._input.x) / 2; }
+
+}
+
+/**
+ * Job: Contains two border radiuses values of the same side
+ * 			If their sums is greater than 1 (uv units) mediation could occurs
+ */
+class BorderRadiusMediator {
+
+	/**
+	 *
+	 * @param {Vector4} borderRadiuses
+	 * @param {Array.<string>} sideProperties
+	 */
+	constructor( borderRadiuses, sideProperties ) {
+
+		/**
+		 *
+		 * @type {Vector4}
+		 * @private
+		 */
+		this._borderRadiuses = borderRadiuses;
+
+		/**
+		 *
+		 * @type {Array<string>}
+		 * @private
+		 */
+		this._sideProperties = sideProperties;
+
+		/**
+		 *
+		 * @type {BorderRadiusMediator|null}
+		 * @private
+		 */
+		this._complementaryMediation = null;
+
+		/**
+		 *
+		 * @type {number}
+		 * @private
+		 */
+		this._value = 0;
+	}
+
+	/**
+	 * The sum of the border radius of that side
+	 * @returns {number}
+	 */
+	get value(){ return this._value; }
+
+	/**
+	 * A complementary side mediation ie: For top, complementary is bottom
+	 * @param {BorderRadiusMediator} brm
+	 */
+	set complementaryMediation( brm ){
+
+		this._complementaryMediation = brm;
+
+	}
+
+	/**
+	 * Adds all side property to compute the value of that side
+	 */
+	computeValue(){
+
+		let totalRadius = 0;
+
+		for ( const radius of this._sideProperties ) {
+
+			totalRadius += this._borderRadiuses[radius];
+
+		}
+
+		this._value = totalRadius;
+	}
+
+	/**
+	 *
+	 * @param {boolean} [mediateOpposite=true]
+	 */
+	mediate( mediateOpposite = true ){
+
+		// Mediation only occurs when sum of radius are greater than 1 (uv units)
+		if( this._value < 1.0 ) return;
+
+		// Simply divide each component by the sum
+		for ( const radius of this._sideProperties ) {
+
+			this._borderRadiuses[radius] /= this._value;
+
+		}
+
+		if( mediateOpposite ) {
+
+			// and also mediate the complementary
+			this._complementaryMediation.mediate( false );
+
+		}
+
+	}
+
+	/**
+	 *
+	 */
+	dispose() {
+
+		this._complementaryMediation = null;
+		this._borderRadiuses = null;
+
+	}
+
+}
diff --git a/src/core/properties/style-properties/border/BorderWidth.js b/src/core/properties/style-properties/border/BorderWidth.js
new file mode 100644
index 00000000..3186574a
--- /dev/null
+++ b/src/core/properties/style-properties/border/BorderWidth.js
@@ -0,0 +1,131 @@
+import * as Units from '../../../../utils/Units';
+import StyleVector4Property from '../StyleVector4Property';
+
+export default class BorderWidth extends StyleVector4Property{
+
+	/**
+	 *
+	 * @param defaultValue
+	 */
+	constructor( defaultValue ) {
+
+		super ( 'borderWidth', defaultValue, false );
+
+
+		this._valueUV = this._value.clone();
+
+		// configure
+		this.output = this._outputValue;
+
+		this._units = Units.WORLD_UNITS;
+
+	}
+
+	/**
+	 *
+	 * @param {string} units
+	 */
+	set units( units ) {
+
+		this._units = Units.validateUnits( units );
+
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @returns {string}
+	 */
+	get units() { return this._units; }
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 */
+	computeOutputValue( element) { /* eslint-enable no-unused-vars */
+
+		this._vector4ValueSetter( this._value, this._input );
+
+		this._needsProcess = true;
+
+		element._bounds._needsUpdate = true;
+		element._layouter._needsUpdate = true;
+
+		// for ( let i = 0; i < element._children._uis.length; i++ ) {
+		// 	const child = element._children._uis[ i ];
+		// 	element._bounds._needsUpdate = true;
+		// }
+
+	}
+
+	_outputValue( out ) {
+		out[this._id] = this._valueUV;
+	}
+
+	/**
+	 *
+	 * @override
+	 */
+	process( element ) {
+		this._needsRender = true;
+		element._borderRadius._needsRender = true;
+	}
+
+	/**
+	 * @override
+	 */
+	render( element ) {
+
+		this._valueUV.copy( this._value );
+
+		const offsetWidth = element._bounds._offsetWidth;
+		const offsetHeight = element._bounds._offsetHeight;
+
+		// @TODO: Units process could be strategies
+		if( this._units === Units.PERCENT ){
+
+			console.log( "Percent" );
+			// this._valueUV.divideScalar( 100 );
+			console.log( this._valueUV );
+
+		}
+
+		// @TODO: Units process could be strategies
+		if( this._units === Units.WORLD_UNITS ) {
+
+			if( offsetWidth !== 0) {
+				this._valueUV.w /= offsetWidth;
+				this._valueUV.y /= offsetWidth;
+			}
+
+
+			if( offsetHeight !== 0 ) {
+				this._valueUV.x /= offsetHeight;
+				this._valueUV.z /= offsetHeight;
+			}
+
+
+		} else if( this._units === Units.UV ) {
+
+			// @TODO: Units process could be strategies
+
+			if( offsetWidth !== 0 ) {
+				const sX = offsetWidth > offsetHeight ? offsetHeight/offsetWidth : 1;
+				this._valueUV.y *= sX;
+				this._valueUV.w *= sX;
+			}
+
+			if( offsetHeight !== 0 ) {
+				const sY = offsetWidth < offsetHeight ? offsetWidth/offsetHeight : 1;
+
+				this._valueUV.x *= sY;
+				this._valueUV.z *= sY;
+			}
+
+		}
+
+	}
+
+}
diff --git a/src/core/properties/style-properties/bounds/BoxSizing.js b/src/core/properties/style-properties/bounds/BoxSizing.js
new file mode 100644
index 00000000..daea467b
--- /dev/null
+++ b/src/core/properties/style-properties/bounds/BoxSizing.js
@@ -0,0 +1,51 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+export default class BoxSizing extends SubStyleProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'boxSizing', defaultValue );
+
+		// Configure
+		this._allowsInherit = false;
+
+		this.isValidValue = _isValid;
+
+	}
+
+	computeOutputValue( element ) {
+
+		this._value = this._inheritedInput;
+
+		element._bounds._needsUpdate = true;
+
+	}
+
+}
+
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const AVAILABLE_VALUES = ['border-box', 'content-box'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) boxSizing value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/src/core/properties/style-properties/bounds/HeightProperty.js b/src/core/properties/style-properties/bounds/HeightProperty.js
new file mode 100644
index 00000000..119b5685
--- /dev/null
+++ b/src/core/properties/style-properties/bounds/HeightProperty.js
@@ -0,0 +1,19 @@
+import StyleSideProperty from './StyleSideProperty';
+
+export default class HeightProperty extends StyleSideProperty {
+
+	constructor() {
+
+		super( 'height' );
+
+	}
+
+	computeOutputValue( element ) {
+
+		super.computeOutputValue( element );
+
+	}
+
+}
+
+
diff --git a/src/core/properties/style-properties/bounds/MarginProperty.js b/src/core/properties/style-properties/bounds/MarginProperty.js
new file mode 100644
index 00000000..4a29041c
--- /dev/null
+++ b/src/core/properties/style-properties/bounds/MarginProperty.js
@@ -0,0 +1,25 @@
+import StyleVector4Property from '../StyleVector4Property';
+import { Vector4 } from 'three';
+import Style4DimensionsProperty from '../Style4DimensionsProperty';
+
+// export default class MarginProperty extends StyleVector4Property {
+export default class MarginProperty extends Style4DimensionsProperty {
+
+	constructor() {
+
+		super('margin', new Vector4(0,0,0,0) )
+
+	}
+
+	computeOutputValue( element ) {
+
+		super.computeOutputValue( element );
+
+		element._renderer._needsRender = true;
+
+		if( element._parent._value ){
+			element._parent._value._flexDirection._needsProcess = true;
+		}
+	}
+
+}
diff --git a/src/core/properties/style-properties/bounds/PaddingProperty.js b/src/core/properties/style-properties/bounds/PaddingProperty.js
new file mode 100644
index 00000000..f1f11181
--- /dev/null
+++ b/src/core/properties/style-properties/bounds/PaddingProperty.js
@@ -0,0 +1,27 @@
+import StyleVector4Property from '../StyleVector4Property';
+import { Vector4 } from 'three';
+import { DefaultValues } from '../../../../three-mesh-ui';
+
+export default class PaddingProperty extends StyleVector4Property {
+
+	constructor( defaultValue ) {
+
+		super('padding', defaultValue )
+
+	}
+
+	computeOutputValue( element ) {
+
+		super.computeOutputValue( element );
+
+		element._bounds._needsUpdate = true;
+		element._bounds._needsRender = true;
+		element._layouter._needsProcess = true;
+		element._renderer._needsRender = true;
+
+		if( element._parent._value ){
+			element._parent._value._layouter._needsProcess = true;
+		}
+	}
+
+}
diff --git a/src/core/properties/style-properties/bounds/StyleSideProperty.js b/src/core/properties/style-properties/bounds/StyleSideProperty.js
new file mode 100644
index 00000000..f7048f57
--- /dev/null
+++ b/src/core/properties/style-properties/bounds/StyleSideProperty.js
@@ -0,0 +1,199 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+export default class StyleSideProperty extends SubStyleProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {number} defaultValue
+	 */
+	constructor( propertyId, defaultValue = null ) {
+
+		super( propertyId, defaultValue, true );
+
+		/**
+		 * @type {any}
+		 * @internal
+		 */
+		this._input = 'auto';
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._auto = true;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._relative = false;
+
+		this._updateRequired = true;
+
+
+
+	}
+
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set inline( value ) {
+
+		if( ! this.isValidValue( value ) ) return;
+
+		if( value === this._inline ) {
+
+			// do nothing no update, the value hasn't changed
+			return;
+
+		}
+
+		this._inline = value;
+
+		if( this._input === this._inline ) return;
+
+		this._parseInput();
+
+	}
+
+	get inline() { return this._inline; }
+
+	_parseInput() {
+
+		let updateRequired = true;
+
+		// Inline has priority if set
+		if( this._inline !== undefined && this._inline !== 'unset' ) {
+
+			this._input = this._inline;
+
+		}
+		// or fallback on computed
+		else if( this._computed !== undefined ) {
+
+			// do not require an update if the value remains
+			if( this._computed === this._input ) updateRequired = false;
+			this._input = this._computed;
+
+		}
+		// or fallback on default value
+		else {
+
+			updateRequired = this._input === 'inherit';
+
+		}
+
+		if( updateRequired ) {
+
+			this._auto = !this._input || this._input === 'auto';
+
+
+			if ( !this._auto ) {
+
+				// string can be percentages
+				// console.log( this._input, typeof this._input, this._input.endsWith('%'))
+				if ( ( typeof this._input === 'string' || this._input instanceof String ) && this._input.endsWith( '%' ) ) {
+
+
+					this._relative = true;
+					this._value = 0;
+
+
+					const floatValue = parseFloat( this._input.replace( '%', '' ).trim() );
+					if ( !isNaN( floatValue ) ) {
+
+						this._value = floatValue / 100;
+
+					}
+
+				} else {
+
+					this._relative = false;
+					this._value = this._input;
+
+				}
+
+			} else {
+
+
+				this._relative = false;
+
+			}
+
+			this._needsUpdate = this._updateRequired = updateRequired;
+
+		}
+
+	}
+
+	update( element, out ) {
+
+		if( this._updateRequired ) {
+
+			this._updateRequired = false;
+
+			if( !this._allowsInherit ) {
+
+				this._inheritedInput = this.getInheritedInput( element );
+
+			}
+
+			this.computeOutputValue( element );
+
+			// rebuild same properties on children 'inheritance'
+			for ( const childUIElement of element._children._uis ) {
+
+				childUIElement[`_${this._id}`]._needsUpdate = true;
+
+			}
+
+			this.output( out );
+
+			if( element._parent._value ) element._parent._value._layouter._needsProcess = true;
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		element._bounds._needsUpdate = true;
+		element._renderer._needsRender = true;
+		// element._autoSize._needsProcess = true;
+
+	}
+
+	getInheritedInput ( element ) {
+
+		if( this._input !== 'inherit' && !this._auto ) return this._input;
+
+		const parent = element._parent._value;
+		if( parent ) {
+
+			return parent[`_${this._id}`].getInheritedInput( parent )
+
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+	getDefaultValue() {
+
+		return 0;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get value() { return this._value; }
+
+}
+
+
diff --git a/src/core/properties/style-properties/bounds/WidthProperty.js b/src/core/properties/style-properties/bounds/WidthProperty.js
new file mode 100644
index 00000000..812d204e
--- /dev/null
+++ b/src/core/properties/style-properties/bounds/WidthProperty.js
@@ -0,0 +1,13 @@
+import StyleSideProperty from './StyleSideProperty';
+
+export default class WidthProperty extends StyleSideProperty {
+
+	constructor() {
+
+		super( 'width' );
+
+	}
+
+}
+
+
diff --git a/src/core/properties/style-properties/flex/AlignItemsProperty.js b/src/core/properties/style-properties/flex/AlignItemsProperty.js
new file mode 100644
index 00000000..84d03936
--- /dev/null
+++ b/src/core/properties/style-properties/flex/AlignItemsProperty.js
@@ -0,0 +1,38 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const AVAILABLE_VALUES = ['start', 'center', 'end', 'stretch'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+const _isValid = function ( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) alignItems value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
+export default class AlignItemsProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'alignItems', 'inherit', true );
+
+		this.isValidValue = _isValid;
+
+	}
+
+}
diff --git a/src/core/properties/style-properties/flex/AlignItemsPropertyBox.js b/src/core/properties/style-properties/flex/AlignItemsPropertyBox.js
new file mode 100644
index 00000000..12442433
--- /dev/null
+++ b/src/core/properties/style-properties/flex/AlignItemsPropertyBox.js
@@ -0,0 +1,267 @@
+import AlignItemsProperty from './AlignItemsProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from './../../../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class AlignItemsPropertyBox extends AlignItemsProperty {
+
+	constructor( ) {
+
+		super();
+
+		// configure this property
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+		// strategies
+		/**
+		 *
+		 * @type {(element:MeshUIBaseElement, (child:MeshUIBaseElement, parentOffset:number )=> number ) =>  void  }
+		 * @private
+		 */
+		this._process = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {(child:MeshUIBaseElement, parentOffset:number )=> number}
+		 * @private
+		 */
+		this._childAlign = this.emptyStrategyLogic;
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) {
+
+		// Stretch : Current or previous requires a bounds update of children
+		// if( this._value === 'stretch' || this._input === 'stretch' ) {
+		//
+		// 	for ( let i = 0; i < element._children._boxes.length; i++ ) {
+		// 		element._children._boxes[ i ]._bounds._needsProcess = true;
+		// 	}
+		//
+		// }
+
+		this._value = this._inheritedInput;
+
+		switch( element._flexDirection._value ) {
+
+			case 'row':
+			case 'row-reverse':
+				this._process = _processRow;
+				switch ( this._value ) {
+					case 'start':
+						this._childAlign = _alignChildRowStart;
+						break;
+					case 'end':
+						this._childAlign = _alignChildRowEnd;
+						break;
+
+					default:
+						this._childAlign = _alignChild;
+				}
+				break;
+
+			case 'column':
+			case 'column-reverse':
+				this._process = _processColumn;
+
+				switch ( this._value ) {
+					case 'start':
+						this._childAlign = _alignChildColumnStart;
+						break;
+					case 'end':
+						this._childAlign = _alignChildColumnEnd;
+						break;
+
+					default:
+						this._childAlign = _alignChild;
+				}
+
+				break;
+
+		}
+
+		this._needsProcess = true;
+		// @TODO: Store children here
+		element._autoSize._needsProcess = true;
+
+		element._flexDirection._needsProcess = true; //not mandatory
+		element._justifyContent._needsProcess = true;
+
+		this._needsProcess = true;
+		element._fontSize._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @param element
+	 */
+	process( element ) {
+
+		// return;
+		// if( !element._children._boxes.length ) return;
+
+		this._process( element, this._childAlign );
+
+		// @TODO : Could be strategized
+		let snap = 'center';
+		let snapXon = 'center';
+		let snapYon = 'center';
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		if( element._flexDirection._value.indexOf('column') !== -1 ) {
+
+			if( this._value === 'start' ) {
+				snap = snapXon = 'left';
+			}else if( this._value === 'end' ){
+				snap = snapXon ='right';
+			}else {
+				snap = 'centerX';
+			}
+
+		} else {
+
+			/* eslint-disable no-lonely-if */
+			if( this._value === 'start' ) {
+				snap = snapYon = 'top';
+			}else if( this._value === 'end' ){
+				snap = snapYon ='bottom';
+			}else{
+				snap = 'centerY';
+			}
+			/* eslint-enable no-lonely-if */
+
+		}
+
+		// apply 4 directional padding and borders
+		let y = -(padding.x - padding.z) / 2 - (border.x - border.z)  / 2;
+		let x = -(padding.y - padding.w) / 2 - ( border.y - border.w ) / 2;
+
+
+		if( snapXon === 'left' ) {
+
+			x = (padding.w - padding.y) / 2 + (border.w - border.y) / 2;
+
+		} else if( snapXon === 'right' ) {
+
+			x = - ( padding.y - padding.w ) / 2 - ( border.y - border.w ) / 2;
+
+		}
+
+		if( snapYon === 'top' ) {
+
+			y = - (padding.x - padding.z) / 2 - (border.x - border.z)  / 2;
+
+		} else if( snapYon === 'bottom' ) {
+
+			y = (padding.z - padding.x) / 2 + (border.z - border.x)  / 2;
+
+		}
+
+
+		element._children._boxes.forEach( ( child ) => {
+
+			let marginX = 0;
+			let marginY = 0;
+			// let marginY = ( -child._margin._value.x + child._margin._value.z ) /2;
+			// let marginY = ( -child._margin._value.x + child._margin._value.z ) /2;
+
+			if( snap === 'top' ) {
+
+				marginY = - child._margin._value.x;
+
+			} else if( snap === 'bottom' ) {
+
+				marginY = child._margin._value.z;
+
+			} else if( snap === 'left' ) {
+
+				marginX = child._margin._value.w;
+
+			} else if( snap === 'right' ) {
+
+				marginX = - child._margin._value.y;
+
+			} else if( snap === 'centerX' ) {
+
+				marginX = ( child._margin._value.w - child._margin._value.y ) /2;
+
+			} else if( snap === 'centerY' ) {
+
+				marginY = ( - child._margin._value.x + child._margin._value.z ) /2;
+
+			}
+
+			element._layouter._childrenPos[ child.id ].x += x + marginX;
+			element._layouter._childrenPos[ child.id ].y += y + marginY;
+
+		} );
+
+	}
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
+function _alignChild() {
+	return 0;
+}
+
+/**
+ *
+ * @param child
+ * @param parentOffset
+ * @return {number}
+ * @private
+ */
+function _alignChildRowEnd( child, parentOffset ) {
+	return - parentOffset + ( child._bounds._offsetHeight / 2 );
+}
+
+function _alignChildRowStart( child, parentOffset ) {
+	return parentOffset - ( child._bounds._offsetHeight / 2 );
+}
+
+function _alignChildColumnEnd( child, parentOffset ) {
+	return parentOffset - ( child._bounds._offsetWidth / 2 );
+}
+
+function _alignChildColumnStart( child, parentOffset ) {
+	return - parentOffset + ( child._bounds._offsetWidth / 2 );
+}
+
+function _processColumn( element, childAligner ) {
+
+	const AXIS_TARGET = element._bounds._innerWidth / 2;
+
+	element._children._boxes.forEach( ( child ) => {
+
+		element._layouter._childrenPos[ child.id ].x = childAligner( child, AXIS_TARGET );
+
+	} );
+
+}
+
+function _processRow( element, childAligner ) {
+
+	const AXIS_TARGET = element._bounds._innerHeight / 2;
+
+	element._children._boxes.forEach( ( child ) => {
+
+		element._layouter._childrenPos[ child.id ].y = childAligner( child, AXIS_TARGET );
+
+	} );
+
+}
diff --git a/src/core/properties/style-properties/flex/FlexDirectionProperty.js b/src/core/properties/style-properties/flex/FlexDirectionProperty.js
new file mode 100644
index 00000000..1c89912b
--- /dev/null
+++ b/src/core/properties/style-properties/flex/FlexDirectionProperty.js
@@ -0,0 +1,42 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class FlexDirectionProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'flexDirection', 'inherit', true );
+
+		// configure
+
+		this.isValid = _isValid;
+
+	}
+
+}
+
+const AVAILABLE_VALUES = ['row','row-reverse', 'column', 'column-reverse'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) flexDirection value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/src/core/properties/style-properties/flex/FlexDirectionPropertyBox.js b/src/core/properties/style-properties/flex/FlexDirectionPropertyBox.js
new file mode 100644
index 00000000..1c01a9d5
--- /dev/null
+++ b/src/core/properties/style-properties/flex/FlexDirectionPropertyBox.js
@@ -0,0 +1,259 @@
+import FlexDirectionProperty from './FlexDirectionProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class FlexDirectionPropertyBox extends FlexDirectionProperty {
+
+	constructor( ) {
+
+		super();
+
+		// Configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._offset = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._reverse = 1;
+
+		/**
+		 *
+		 * @param { (element:MeshUIBaseElement) => void} element
+		 * @private
+		 */
+		this._process = this.emptyStrategyLogic;
+
+	}
+
+	computeOutputValue( element ) {
+
+		this._value = this._inheritedInput;
+
+		switch ( this._value ) {
+			case "row":
+				this._process = _processRow;
+				// this._offset = - element._bounds._innerWidth / 2;
+				break;
+
+			case "row-reverse":
+				this._process = _processRowReverse;
+				// this._offset = element._bounds._innerWidth / 2;
+				break;
+
+			case "column":
+				this._process = _processColumn;
+				// this._offset = element._bounds._innerHeight / 2;
+				break;
+
+			case "column-reverse":
+				this._process = _processColumnReverse;
+				// this._offset = - element._bounds._innerHeight / 2;
+				break;
+		}
+
+		// also update dependencies
+		if( !element._justifyContent._needsUpdate ) element._justifyContent.computeOutputValue( element );
+		if( !element._alignItems._needsUpdate ) element._alignItems.computeOutputValue( element );
+
+		this._needsProcess = true;
+
+	}
+
+	process( element ) {
+		// this will be defined from strategy
+
+		//console.log( element.name, 'flexDirection process');
+
+
+		switch ( this._value ) {
+			case "row":
+				this._offset = - element._bounds._innerWidth / 2;
+				break;
+
+			case "row-reverse":
+				this._offset = element._bounds._innerWidth / 2;
+				break;
+
+			case "column":
+				this._offset = element._bounds._innerHeight / 2;
+				break;
+
+			case "column-reverse":
+				this._offset = - element._bounds._innerHeight / 2;
+				break;
+		}
+
+		this._reverse = -Math.sign( this._offset );
+		if( this._reverse === 0 ) {
+			this._reverse = 1;
+		}
+
+
+		this._process( element );
+
+		element._justifyContent._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
+function _processRow( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 */
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetWidth;
+
+		// increase with the left margin before placing the child
+		accu += child._margin._value.w * REVERSE;
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+		position.y = 0;
+
+
+		// increase the next child with this child right margin
+		accu += REVERSE * ( CHILD_SIZE + child._margin._value.y ) ;
+
+	}
+
+}
+
+function _processRowReverse( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 */
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetWidth;
+
+		// decrease with the right margin before placing the child
+		accu += child._margin._value.y * REVERSE;
+
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+		position.y = 0;
+
+		// decrease the next child with this child left margin
+		accu += (CHILD_SIZE + child._margin._value.w) * REVERSE ;
+
+	}
+
+}
+
+function _processColumn( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetHeight;
+
+		// increase with the top margin before placing the child
+		accu += child._margin._value.x * REVERSE;
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = 0;
+		position.y = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+
+		// increase the next child with this child bottom margin
+		accu += (CHILD_SIZE + child._margin._value.z) * REVERSE ;
+
+	}
+
+}
+
+function _processColumnReverse( element ) {
+
+	// end to end children
+	let accu = element._flexDirection._offset;
+	const REVERSE = element._flexDirection._reverse;
+
+	const boxes = element._children._boxes;
+
+	// Refactor reduce into fori in order to get rid of this keyword
+	for ( let i = 0; i < boxes.length; i++ ) {
+
+		const child = boxes[ i ];
+
+		const CHILD_ID = child.id;
+
+		// @TODO : use getter instead of compute function if possible
+		const CHILD_SIZE = child._bounds._offsetHeight;
+
+		// decrease with the bottom margin before placing the child
+		accu += child._margin._value.z * REVERSE;
+
+		const position = element._layouter._childrenPos[ CHILD_ID ];
+
+		position.x = 0;
+		position.y = accu + ( CHILD_SIZE / 2 ) * REVERSE;
+
+		// decrease the next child with this child top margin
+		accu += ( CHILD_SIZE + child._margin._value.x ) * REVERSE ;
+
+	}
+
+}
diff --git a/src/core/properties/style-properties/flex/FlexDirectionPropertyText.js b/src/core/properties/style-properties/flex/FlexDirectionPropertyText.js
new file mode 100644
index 00000000..792a46e8
--- /dev/null
+++ b/src/core/properties/style-properties/flex/FlexDirectionPropertyText.js
@@ -0,0 +1,29 @@
+import FlexDirectionProperty from './FlexDirectionProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../../elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class FlexDirectionPropertyText extends FlexDirectionProperty {
+
+	constructor( ) {
+
+		super();
+
+		this._value = this._input = 'column';
+
+		// Configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+	}
+
+	/* eslint-disable no-unused-vars */computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		// @TODO : Evaluate the needs of this property. Could be empty
+		this._value = this._inheritedInput;
+
+	}
+
+}
diff --git a/src/core/properties/style-properties/flex/JustifyContentProperty.js b/src/core/properties/style-properties/flex/JustifyContentProperty.js
new file mode 100644
index 00000000..0538d4b3
--- /dev/null
+++ b/src/core/properties/style-properties/flex/JustifyContentProperty.js
@@ -0,0 +1,43 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+export default class JustifyContentProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'justifyContent', 'inherit', true );
+
+		/**
+		 *
+		 * @override
+		 */
+		this.isValidValue = _isValid;
+
+	}
+
+}
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const AVAILABLE_VALUES = [ 'start', 'center', 'end', 'space-between', 'space-around', 'space-evenly' ];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if ( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) justifyContent value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
+
diff --git a/src/core/properties/style-properties/flex/JustifyContentPropertyBox.js b/src/core/properties/style-properties/flex/JustifyContentPropertyBox.js
new file mode 100644
index 00000000..21537bcf
--- /dev/null
+++ b/src/core/properties/style-properties/flex/JustifyContentPropertyBox.js
@@ -0,0 +1,284 @@
+import JustifyContentProperty from './JustifyContentProperty';
+
+export default class JustifyContentPropertyBox extends JustifyContentProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'justifyContent', defaultValue, true );
+
+		// configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+		// strategies
+		/**
+		 *
+		 * @type {(axisOffset:number) => number}
+		 * @private
+		 */
+		this._computeOffset = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {(element:MeshUIBaseElement, availableSpace:number, reverse:number) => Array.<number> }
+		 * @private
+		 */
+		this._computeMargin = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {(element:MeshUIBaseElement) => void}
+		 * @private
+		 */
+		this._process = this.emptyStrategyLogic;
+
+	}
+
+
+	computeOutputValue( element ) {
+
+		this._value = this._inheritedInput;
+
+		//console.log( element._flexDirection._value );
+		switch ( element._flexDirection._value ) {
+
+			case 'column-reverse':
+			case 'column':
+				this._process = _column.bind( this );
+				break;
+
+
+			case 'row-reverse':
+			case 'row':
+				this._process = _row.bind( this );
+				break;
+
+		}
+
+		switch ( this._value ) {
+			case 'end':
+				this._computeOffset = _justificationOffsetEnd;
+				this._computeMargin = _justificationMargin;
+				break;
+
+			case 'center':
+				this._computeOffset = _justificationOffsetCenter;
+				this._computeMargin = _justificationMargin;
+				break;
+
+			case 'start':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMargin;
+				break;
+
+			case 'space-between':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMarginSpaceBetween;
+				break;
+
+			case 'space-around':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMarginSpaceAround;
+				break;
+
+			case 'space-evenly':
+				this._computeOffset = _justificationOffset;
+				this._computeMargin = _justificationMarginSpaceEvenly;
+				break;
+		}
+
+		// @TODO : 	If flexDirection was keeping its children position,
+		//  				it won't be necessary to compute the same result again
+		//					but it will increase the memory footprint
+		element._flexDirection._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		this._process( element );
+
+		element._alignItems._needsProcess = true; // not mandatory : Layout could sum each
+
+	}
+
+}
+
+function _row( element ) {
+
+	const startPos = element._flexDirection._offset;
+
+	const { usedDirectionSpace, remainingSpace } = _rowRemainingSpace( element );
+
+	// Items Offset
+	const axisOffset = ( startPos * 2 ) - ( usedDirectionSpace * Math.sign( startPos ) );
+	const justificationOffset = this._computeOffset( axisOffset );
+
+	// Items margin
+	// const justificationMargins = _getJustificationMargin( boxComponent.childrenBoxes, remainingSpace, JUSTIFICATION, REVERSE );
+	const justificationMargins = this._computeMargin( element, remainingSpace, element._flexDirection._reverse );
+
+
+	// Apply
+	element._children._boxes.forEach( ( child, childIndex ) => {
+
+		element._layouter._childrenPos[ child.id ].x -= justificationOffset - justificationMargins[ childIndex ];
+
+	} );
+
+}
+
+function _column( element ) {
+
+
+	const startPos = element._flexDirection._offset;
+
+	const { usedDirectionSpace, remainingSpace } = _columnRemainingSpace( element );
+
+	// Items Offset
+	const axisOffset = ( startPos * 2 ) - ( usedDirectionSpace * Math.sign( startPos ) );
+	const justificationOffset = this._computeOffset( axisOffset );
+
+	// Items margin
+	const justificationMargins = this._computeMargin( element, remainingSpace, element._flexDirection._reverse );
+
+	// Apply
+	element._children._boxes.forEach( ( child, childIndex ) => {
+
+		element._layouter._childrenPos[ child.id ].y -= justificationOffset - justificationMargins[ childIndex ];
+
+	} );
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
+/**
+ *
+ * @param {MeshUIBaseElement} element
+ * @return {{usedDirectionSpace: *, remainingSpace: number}}
+ * @private
+ */
+function _rowRemainingSpace( element ) {
+
+	const usedDirectionSpace = element._bounds._computeChildrenSideWidth( element );
+	return { usedDirectionSpace, remainingSpace: element._bounds._innerWidth - usedDirectionSpace };
+
+}
+
+function _columnRemainingSpace( element ) {
+
+	const usedDirectionSpace = element._bounds._computeChildrenSideHeight( element );
+	return { usedDirectionSpace, remainingSpace: element._bounds._innerHeight - usedDirectionSpace };
+
+}
+
+
+/* eslint-disable no-unused-vars */ function _justificationOffset( axisOffset ) { /* eslint-enable no-unused-vars */
+
+	return 0;
+
+}
+
+function _justificationOffsetEnd( axisOffset ) {
+
+	return axisOffset;
+
+}
+
+function _justificationOffsetCenter( axisOffset ) {
+
+	return axisOffset / 2;
+
+}
+
+/* eslint-disable no-unused-vars */
+function _justificationMargin( element, availableSpace = 0, reverse = 1 ) { /* eslint-enable no-unused-vars */
+
+	return Array( element._children._boxes.length ).fill( 0 );
+
+}
+
+function _justificationMarginSpaceBetween( element, availableSpace = 0, reverse = 1 ) {
+
+	const boxes = element._children._boxes;
+	const length = boxes.length;
+	const justificationMargins = Array( length ).fill( 0 );
+
+	if ( availableSpace > 0 ) {
+
+		// only one children would act as start
+		if ( length > 1 ) {
+
+			const margin = availableSpace / ( length - 1 ) * reverse;
+			// set this margin for any children
+
+			// except for first child
+			justificationMargins[ 0 ] = 0;
+
+			for ( let i = 1; i < length; i++ ) {
+
+				justificationMargins[ i ] = margin * i;
+
+			}
+
+		}
+
+	}
+
+	return justificationMargins;
+
+}
+
+function _justificationMarginSpaceEvenly( element, availableSpace = 0, reverse = 1 ) {
+
+	const boxes = element._children._boxes;
+	const length = boxes.length;
+	const justificationMargins = Array( length ).fill( 0 );
+
+	if ( availableSpace > 0 ) {
+
+		const margin = availableSpace / ( length + 1 ) * reverse;
+
+		// set this margin for any children
+		for ( let i = 0; i < length; i++ ) {
+
+			justificationMargins[ i ] = margin * ( i + 1 );
+
+		}
+
+	}
+
+	return justificationMargins;
+
+}
+
+function _justificationMarginSpaceAround( element, availableSpace = 0, reverse = 1 ) {
+
+	const boxes = element._children._boxes;
+	const length = boxes.length;
+	const justificationMargins = Array( length ).fill( 0 );
+
+	if ( availableSpace > 0 ) {
+
+
+		const margin = availableSpace / ( length ) * reverse;
+
+		const start = margin / 2;
+		justificationMargins[ 0 ] = start;
+
+		// set this margin for any children
+		for ( let i = 1; i < length; i++ ) {
+
+			justificationMargins[ i ] = start + margin * i;
+
+		}
+
+
+	}
+
+	return justificationMargins;
+
+}
diff --git a/src/core/properties/style-properties/flex/OrderProperty.js b/src/core/properties/style-properties/flex/OrderProperty.js
new file mode 100644
index 00000000..5c3034ad
--- /dev/null
+++ b/src/core/properties/style-properties/flex/OrderProperty.js
@@ -0,0 +1,32 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+export default class OrderProperty extends SubStyleProperty {
+
+	constructor( ) {
+
+		super( 'order', 0, true );
+
+		this._value = 0;
+
+		this._input = 0;
+
+		// configure
+		this._allowsInherit = false;
+	}
+
+	/* eslint-disable no-unused-vars */computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		this._value = this._inheritedInput;
+
+		// require parent children (order) update, which will require layout update
+		if( element._parent._value ) {
+
+			element._parent._value._children._needsProcess = true;
+
+		}
+
+	}
+
+}
+
+
diff --git a/src/core/properties/style-properties/font/ColorProperty.js b/src/core/properties/style-properties/font/ColorProperty.js
new file mode 100644
index 00000000..407e7e03
--- /dev/null
+++ b/src/core/properties/style-properties/font/ColorProperty.js
@@ -0,0 +1,39 @@
+import StyleColorProperty from '../StyleColorProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Color } from 'three';
+/* eslint-enable no-unused-vars */
+
+export default class ColorProperty extends StyleColorProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'color', defaultValue, false );
+
+		this._input = defaultValue;
+
+		this.output = this._outputValue;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._input === 'inherit' ) {
+
+			this._value.set( this.getInheritedInput( element ) );
+
+		} else {
+
+			this._value.set( this._input);
+
+		}
+
+	}
+
+}
diff --git a/src/core/properties/style-properties/font/ColorPropertyInlineBlock.js b/src/core/properties/style-properties/font/ColorPropertyInlineBlock.js
new file mode 100644
index 00000000..3b29412c
--- /dev/null
+++ b/src/core/properties/style-properties/font/ColorPropertyInlineBlock.js
@@ -0,0 +1,41 @@
+import StyleColorProperty from '../StyleColorProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+/* eslint-enable no-unused-vars */
+
+export default class ColorPropertyInlineBlock extends StyleColorProperty {
+
+	constructor() {
+
+		super( 'color', 'inherit', false );
+
+		this._input = 'inherit';
+
+		this.output = this._outputValue;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._input === 'inherit' ) {
+
+			this._value.set( this.getInheritedInput( element ) );
+
+		} else {
+
+			this._value.set( this._input);
+
+		}
+
+		element._backgroundColor._needsUpdate = true;
+		element._borderColor._needsUpdate = true;
+
+	}
+
+}
diff --git a/src/core/properties/style-properties/font/FontFamilyProperty.js b/src/core/properties/style-properties/font/FontFamilyProperty.js
new file mode 100644
index 00000000..422f4226
--- /dev/null
+++ b/src/core/properties/style-properties/font/FontFamilyProperty.js
@@ -0,0 +1,75 @@
+import SubStyleProperty from '../SubStyleProperty';
+import FontLibrary from '../../../../font/FontLibrary';
+import FontFamily from '../../../../font/FontFamily';
+
+
+export default class FontFamilyProperty extends SubStyleProperty {
+
+	constructor( ) {
+
+		super( 'fontFamily', 'inherit' , true );
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		if( this._input instanceof FontFamily ) {
+
+			this._value = this._input;
+
+		} else if ( this._input === 'inherit' ) {
+
+			// do nothing
+
+		} else if ( typeof this._input === 'string' ) {
+
+			// string - family
+			const fontFamily = FontLibrary.getFontFamily( this._input );
+
+			if( fontFamily ) {
+
+				this._value = fontFamily;
+
+			} else {
+
+				console.warn( `(.style) fontFamily, the font '${this._input}' is not registered. Aborted.`)
+
+			}
+
+		} else {
+
+			console.warn( `(.style) fontFamily requires a registered fontFamily instance, or the id of a registered fontFamily.`);
+			console.warn( `If you want to set a specific font, please use .font property instead.`);
+
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @return {any|FontFamily|null}
+	 */
+	get value() { return this._value; }
+
+	getInheritedInput ( element ) {
+
+		if( this._input !== 'inherit' ) return this._input;
+
+		const parent = element._parent._value;
+		if( parent ) {
+
+			return parent[`_${this._id}`].getInheritedInput( parent )
+
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+}
diff --git a/src/core/properties/style-properties/font/FontFamilyPropertyInline.js b/src/core/properties/style-properties/font/FontFamilyPropertyInline.js
new file mode 100644
index 00000000..80d4c6ca
--- /dev/null
+++ b/src/core/properties/style-properties/font/FontFamilyPropertyInline.js
@@ -0,0 +1,69 @@
+import FontLibrary from '../../../../font/FontLibrary';
+import { default as RegisteredFontFamily } from '../../../../font/FontFamily';
+import FontFamilyProperty from './FontFamilyProperty';
+
+
+export default class FontFamilyPropertyInline extends FontFamilyProperty {
+
+	constructor( ) {
+
+		super( 'fontFamily', 'inherit' , true );
+
+		this._input = 'inherit';
+		this._needsUpdate = true;
+
+		// configure
+		this._allowsInherit = false;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 */
+	computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		let abstractedInput = this._inheritedInput;
+
+		if( abstractedInput === 'inherit' ) {
+			abstractedInput = this.getInheritedInput( element );
+		}
+
+		if( abstractedInput instanceof RegisteredFontFamily ) {
+
+			this._value = abstractedInput;
+			element._font._needsUpdate = true;
+
+		} else if ( typeof abstractedInput === 'string' ) {
+
+			// string - family
+			const fontFamily = FontLibrary.getFontFamily(abstractedInput);
+
+			if( fontFamily ) {
+
+				this._value = fontFamily;
+				element._font._needsUpdate = true;
+
+			} else {
+
+				console.warn( `(.style) fontFamily, the font '${abstractedInput}' is not registered. Aborted.`)
+
+			}
+
+		} else {
+
+			console.warn( `(.style) fontFamily requires a registered fontFamily instance, or the id of a registered fontFamily.`);
+			console.warn( `If you want to set a specific font, please use .font property instead.`);
+
+		}
+
+	}
+
+	/**
+	 * @override
+	 * @return {any|FontFamilyPropertyInline|null}
+	 */
+	get value() { return this._value; }
+
+}
diff --git a/src/core/properties/style-properties/font/FontKerningProperty.js b/src/core/properties/style-properties/font/FontKerningProperty.js
new file mode 100644
index 00000000..66c21e54
--- /dev/null
+++ b/src/core/properties/style-properties/font/FontKerningProperty.js
@@ -0,0 +1,30 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+export default class FontKerningProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'fontKerning', 'inherit' );
+
+		this.isValidValue = _isValid;
+
+	}
+
+}
+
+
+const AVAILABLE_VALUES = ['normal', 'none', 'inherit'];
+
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) fontKerning value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/src/core/properties/style-properties/font/FontKerningPropertyInline.js b/src/core/properties/style-properties/font/FontKerningPropertyInline.js
new file mode 100644
index 00000000..e15e0030
--- /dev/null
+++ b/src/core/properties/style-properties/font/FontKerningPropertyInline.js
@@ -0,0 +1,45 @@
+import FontKerningProperty from './FontKerningProperty';
+
+
+export default class FontKerningPropertyInline extends FontKerningProperty {
+
+	constructor() {
+
+		super();
+
+		// Configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+	}
+
+
+	_computeFromInherited( element ) {
+		super._computeFromInherited(element);
+
+		// this._needsProcess = true;
+		element._parent._value._layouter._needsProcess = false;
+	}
+
+	process( element ) {
+
+		// apply kerning on inlines
+		if ( this._value !== 'none' ) {
+
+			// First character won't be kerned with its void lefthanded peer
+			const whiteSpacedContent = element._whiteSpace._whiteSpacedContent;
+			const inlines = element._inlines._value;
+			for ( let i = 1; i < inlines.length; i++ ) {
+
+				const glyphPair = whiteSpacedContent[ i - 1 ] + whiteSpacedContent[ i ];
+
+				// retrieve the kerning from the font
+				// as set it on the characterInline
+				inlines[ i ].kerning = element._font._fontVariant.getKerningAmount( glyphPair );
+
+			}
+
+		}
+
+	}
+
+}
diff --git a/src/core/properties/style-properties/font/FontKerningPropertyText.js b/src/core/properties/style-properties/font/FontKerningPropertyText.js
new file mode 100644
index 00000000..4edc3058
--- /dev/null
+++ b/src/core/properties/style-properties/font/FontKerningPropertyText.js
@@ -0,0 +1,25 @@
+import FontKerningProperty from './FontKerningProperty';
+
+
+export default class FontKerningPropertyText extends FontKerningProperty {
+
+	constructor() {
+
+		super();
+
+		this._value = this._input = this.getDefaultValue();
+
+		// Configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+
+	}
+
+
+	_computeFromInherited( element ) {
+		super._computeFromInherited(element);
+
+
+	}
+
+}
diff --git a/src/core/properties/style-properties/font/FontSizeProperty.js b/src/core/properties/style-properties/font/FontSizeProperty.js
new file mode 100644
index 00000000..6e2e25e6
--- /dev/null
+++ b/src/core/properties/style-properties/font/FontSizeProperty.js
@@ -0,0 +1,74 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+export default class FontSizeProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'fontSize', 'inherit', true );
+
+		this._fontRelative = false;
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 * @param {Object.<string,any> } out
+	 */
+	update( element, out ) {
+
+		console.log("fontSize update")
+		// /if( !this._allowsInherit ) {
+
+			this._inheritedInput = this.getInheritedInput( element );
+			console.log( 'inherit?', this._inheritedInput )
+			this._value = _parseValue( this._inheritedInput, element );
+
+		// }else{
+		//
+		// 	console.log( this._input )
+		// 	this._value = _parseValue( this._input, element )
+		// }
+
+		console.log( "    = ", this._value )
+
+		this.computeOutputValue( element );
+
+		// rebuild same properties on children 'inheritance'
+		for ( const childUIElement of element._children._uis ) {
+
+			const property = childUIElement[`_${this._id}`];
+
+			if( !property ) continue;
+
+			const target = property._input ? property._input : property._value;
+
+			if( target === 'inherit' || property._fontRelative ) childUIElement[`_${this._id}`]._needsUpdate = true;
+
+		}
+
+		this.output( out );
+
+	}
+
+	computeOutputValue( element ) {}
+
+}
+
+function _parseValue( v, element ){
+
+	element._fontSize._fontRelative = false;
+
+	if( !isNaN(v) ) return v;
+
+	if( v.endsWith('em') ) {
+
+		element._fontSize._fontRelative = true;
+
+		console.log("VVVVVV", v);
+
+		return parseFloat( v.replace(/[^0-9.]+/,"") ) * element._parent._value._fontSize.getInheritedInput(element._parent._value);
+
+	}
+}
+
+
diff --git a/src/core/properties/style-properties/font/FontSizePropertyInline.js b/src/core/properties/style-properties/font/FontSizePropertyInline.js
new file mode 100644
index 00000000..21255b6a
--- /dev/null
+++ b/src/core/properties/style-properties/font/FontSizePropertyInline.js
@@ -0,0 +1,63 @@
+import SubStyleProperty from '../SubStyleProperty';
+import FontSizeProperty from './FontSizeProperty';
+
+export default class FontSizePropertyInline extends FontSizeProperty {
+
+	constructor( ) {
+
+		super();
+
+		// Configure
+		this._allowsInherit = false;
+
+	}
+
+	computeOutputValue( element ) {
+
+		// this._value = this._inheritedInput;
+
+		if( element._font._fontVariant ) {
+			element._bounds._needsProcess = true;
+			element._layouter._needsProcess = true;
+		}
+
+		// @TODO : FontRelatives properties?? instead of manual registering them?
+		// for em dimensions;
+		element._margin._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		if( !element._font._fontVariant || !element._font._fontVariant.isReady ) return;
+
+		const SCALE_MULT = this._value / element._font._fontVariant.typographic.size;
+
+		// First character won't be kerned with its void lefthanded peer
+		const inlines = element._inlines._value;
+
+		// update inlines properties before inline placements in lines
+		for ( let i = 0; i < inlines.length; i++ ) {
+
+			const inline = inlines[ i ];
+
+			inline.resetOffsets();
+
+			inline.fontSize = this._value;
+			inline.fontFactor = SCALE_MULT;
+
+		}
+
+		// element._layouter._needsProcess = true;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get value() { return this._value; }
+
+}
+
+
diff --git a/src/core/properties/style-properties/font/FontStyleProperty.js b/src/core/properties/style-properties/font/FontStyleProperty.js
new file mode 100644
index 00000000..fce63661
--- /dev/null
+++ b/src/core/properties/style-properties/font/FontStyleProperty.js
@@ -0,0 +1,29 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+export default class FontStyleProperty extends SubStyleProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'fontStyle', defaultValue, true );
+
+		this.isValidValue = _isValid;
+
+	}
+
+}
+
+
+const AVAILABLE_VALUES = ['normal', 'italic'];
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) fontStyle value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/src/core/properties/style-properties/font/FontStylePropertyInline.js b/src/core/properties/style-properties/font/FontStylePropertyInline.js
new file mode 100644
index 00000000..eab0ae5f
--- /dev/null
+++ b/src/core/properties/style-properties/font/FontStylePropertyInline.js
@@ -0,0 +1,23 @@
+import FontStyleProperty from './FontStyleProperty';
+
+
+export default class FontStylePropertyInline extends FontStyleProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+	}
+
+	_computeFromInherited( element ) {
+
+		super._computeFromInherited(element);
+
+		element._font._needsUpdate = true;
+
+	}
+
+}
diff --git a/src/core/properties/style-properties/font/FontWeightProperty.js b/src/core/properties/style-properties/font/FontWeightProperty.js
new file mode 100644
index 00000000..41833a8e
--- /dev/null
+++ b/src/core/properties/style-properties/font/FontWeightProperty.js
@@ -0,0 +1,27 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+export default class FontWeightProperty extends SubStyleProperty {
+
+	constructor( def ) {
+
+		super( 'fontWeight', def , true );
+
+		this.isValid = _isValid;
+	}
+
+}
+
+const AVAILABLE_VALUES = ['100','200','300','400','500','600','700','800','900','light','normal','bold','bolder'];
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value.toString() ) === -1 ) {
+
+		console.warn( `(.style) fontWeight value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/src/core/properties/style-properties/font/FontWeightPropertyInline.js b/src/core/properties/style-properties/font/FontWeightPropertyInline.js
new file mode 100644
index 00000000..4d3a4517
--- /dev/null
+++ b/src/core/properties/style-properties/font/FontWeightPropertyInline.js
@@ -0,0 +1,40 @@
+import FontWeightProperty from './FontWeightProperty';
+
+export default class FontWeightPropertyInline extends FontWeightProperty {
+
+	constructor( def ) {
+
+		super( def );
+
+	}
+
+	computeOutputValue( element ) {
+
+		const input = this.getInheritedInput( element );
+
+		const converted = LOOK_UP_TABLE[ input ];
+
+		if ( converted ) {
+
+			this._value = converted
+
+		} else {
+
+			this._value = input;
+
+		}
+
+		element._font._needsUpdate = true;
+
+	}
+
+}
+
+// @TODO : Evaluate the need
+const LOOK_UP_TABLE = {
+	// 'light'		: '100',
+	// 'normal'	: '400',
+	// 'bold' 		: '700',
+	// 'bolder' 	: '900'
+}
+
diff --git a/src/core/properties/style-properties/font/LetterSpacingProperty.js b/src/core/properties/style-properties/font/LetterSpacingProperty.js
new file mode 100644
index 00000000..fe9b3799
--- /dev/null
+++ b/src/core/properties/style-properties/font/LetterSpacingProperty.js
@@ -0,0 +1,13 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+export default class LetterSpacingProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'letterSpacing', 'inherit', true );
+
+	}
+
+}
+
+
diff --git a/src/core/properties/style-properties/font/LetterSpacingPropertyInline.js b/src/core/properties/style-properties/font/LetterSpacingPropertyInline.js
new file mode 100644
index 00000000..2e66db02
--- /dev/null
+++ b/src/core/properties/style-properties/font/LetterSpacingPropertyInline.js
@@ -0,0 +1,28 @@
+import LetterSpacingProperty from './LetterSpacingProperty';
+
+export default class LetterSpacingPropertyInline extends LetterSpacingProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._input = 'inherit';
+		this._allowsInherit = false;
+
+		this.computeOutputValue = this._computeFromInherited;
+
+	}
+
+	_computeFromInherited( element ) {
+		super._computeFromInherited( element );
+
+
+		element._fontSize._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+}
+
+
diff --git a/src/core/properties/style-properties/font/LineHeightProperty.js b/src/core/properties/style-properties/font/LineHeightProperty.js
new file mode 100644
index 00000000..c7d5a9fe
--- /dev/null
+++ b/src/core/properties/style-properties/font/LineHeightProperty.js
@@ -0,0 +1,22 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+export default class LineHeightProperty extends SubStyleProperty {
+
+	/**
+	 *
+	 */
+	constructor() {
+
+		super( 'lineHeight', 'inherit', true );
+
+	}
+
+	update( element, out ) {
+		super.update( element, out );
+
+		element._layouter._needsProcess = true;
+	}
+
+}
+
+
diff --git a/src/core/properties/style-properties/font/LineHeightPropertyInline.js b/src/core/properties/style-properties/font/LineHeightPropertyInline.js
new file mode 100644
index 00000000..8fb6feae
--- /dev/null
+++ b/src/core/properties/style-properties/font/LineHeightPropertyInline.js
@@ -0,0 +1,21 @@
+
+import LineHeightProperty from './LineHeightProperty';
+
+export default class LineHeightPropertyInline extends LineHeightProperty {
+
+	/**
+	 *
+	 */
+	constructor() {
+
+		super();
+
+		// configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+
+	}
+
+}
+
+
diff --git a/src/core/properties/style-properties/font/TextAlignProperty.js b/src/core/properties/style-properties/font/TextAlignProperty.js
new file mode 100644
index 00000000..a482123f
--- /dev/null
+++ b/src/core/properties/style-properties/font/TextAlignProperty.js
@@ -0,0 +1,39 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+export default class TextAlignProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'textAlign', 'inherit', true );
+
+		this.isValidValue = _isValid;
+
+	}
+
+}
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const AVAILABLE_VALUES = ['left', 'right', 'center', 'justify', 'justify-left', 'justify-right','justify-center'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+const _isValid = function ( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) textAlign value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/src/core/properties/style-properties/font/TextAlignPropertyInline.js b/src/core/properties/style-properties/font/TextAlignPropertyInline.js
new file mode 100644
index 00000000..9883d468
--- /dev/null
+++ b/src/core/properties/style-properties/font/TextAlignPropertyInline.js
@@ -0,0 +1,25 @@
+import TextAlignProperty from './TextAlignProperty';
+
+
+export default class TextAlignPropertyInline extends TextAlignProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._allowsInherit = false;
+		this._needsUpdate = false;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		this._value = this._inheritedInput;
+
+		element._layouter._needsProcess = true;
+
+	}
+
+}
diff --git a/src/utils/inline-layout/TextAlign.js b/src/core/properties/style-properties/font/TextAlignPropertyText.js
similarity index 56%
rename from src/utils/inline-layout/TextAlign.js
rename to src/core/properties/style-properties/font/TextAlignPropertyText.js
index 8f478543..aa8c0a5d 100644
--- a/src/utils/inline-layout/TextAlign.js
+++ b/src/core/properties/style-properties/font/TextAlignPropertyText.js
@@ -1,40 +1,65 @@
-//JSDoc related import
-/* eslint-disable no-unused-vars */
-import InlineGlyph from '../../font/InlineGlyph';
-/* eslint-enable no-unused-vars */
-
-export const LEFT = 'left';
-export const RIGHT = 'right';
-export const CENTER = 'center';
-export const JUSTIFY = 'justify';
-export const JUSTIFY_LEFT = 'justify-left';
-export const JUSTIFY_RIGHT = 'justify-right';
-export const JUSTIFY_CENTER = 'justify-center';
-
-/**
- *
- * @param boxComponent
- * @param {Array.<Array.<InlineGlyph>>} lines
- * @param ALIGNMENT
- * @param INNER_WIDTH
- */
-export function textAlign( boxComponent, lines, ALIGNMENT, INNER_WIDTH ) {
+import TextAlignProperty from './TextAlignProperty';
+
+
+export default class TextAlignPropertyText extends TextAlignProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._allowsInherit = false;
+		this._needsUpdate = true;
+
+		//
+		// @TODO : strategies
+
+	}
+
+
+	/* eslint-disable no-unused-vars */computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		this._value = this._inheritedInput;
+
+		this._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		_process( element );
+
+		element._renderer._needsRender = true;
+
+	}
+
+}
+
+function _process( element ) {
+
+	const lines = element._layouter._value;
+	const ALIGNMENT = element._textAlign._value;
+	const INNER_WIDTH = element._bounds._innerWidth;
 
 	// Start the alignment by sticking to directions : left, right, center
 	for ( let i = 0; i < lines.length; i++ ) {
 
 		const line = lines[ i ];
 
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
 		// compute the alignment offset of the line
-		const offsetX = _computeLineOffset( line, ALIGNMENT, INNER_WIDTH, i === lines.length - 1 );
+		const offsetX = _computeLineOffset( element, line, i === lines.length - 1 , padding);
+
 
-		const padding = boxComponent._padding;
-		const border = boxComponent._borderWidth;
 
 		// const paddingAmount = - ( padding.w + padding.y ) / 2 - ( border.w + border.y ) / 2;
 		// const paddingAmount = - ( padding.w + padding.y ) / 2;
 		const paddingAmount = ( - padding.w + padding.y ) / 2 + ( - border.w + border.y ) / 2;
 
+		line.x += offsetX;
+
 		// apply the offset to each characters of the line
 		for ( let j = 0; j < line.length; j++ ) {
 
@@ -43,10 +68,13 @@ export function textAlign( boxComponent, lines, ALIGNMENT, INNER_WIDTH ) {
 
 		}
 
+		// line.x = line[ 0 ].offsetX;
+
+
 	}
 
 	// last operations for justifications alignments
-	if ( ALIGNMENT.indexOf( JUSTIFY ) === 0 ) {
+	if ( ALIGNMENT.indexOf( 'justify' ) === 0 ) {
 
 		for ( let i = 0; i < lines.length; i++ ) {
 
@@ -73,7 +101,7 @@ export function textAlign( boxComponent, lines, ALIGNMENT, INNER_WIDTH ) {
 
 			// for right justification, process the loop in reverse
 			let inverter = 1;
-			if ( ALIGNMENT === JUSTIFY_RIGHT ) {
+			if ( ALIGNMENT === 'justify-right' ) {
 
 				line.reverse();
 				inverter = -1;
@@ -95,7 +123,7 @@ export function textAlign( boxComponent, lines, ALIGNMENT, INNER_WIDTH ) {
 			}
 
 			// for right justification, the loop was processed in reverse
-			if ( ALIGNMENT === JUSTIFY_RIGHT ) {
+			if ( ALIGNMENT === 'justify-right' ) {
 				line.reverse();
 			}
 
@@ -106,25 +134,24 @@ export function textAlign( boxComponent, lines, ALIGNMENT, INNER_WIDTH ) {
 
 }
 
+function _computeLineOffset ( element, line, lastLine, padding ) {
 
-const _computeLineOffset = ( line, ALIGNMENT, INNER_WIDTH, lastLine ) => {
-
-	switch ( ALIGNMENT ) {
+	switch ( element._textAlign._value ) {
 
-		case JUSTIFY_LEFT:
-		case JUSTIFY:
-		case LEFT:
-			return -INNER_WIDTH / 2;
+		case 'justify-left':
+		case 'justify':
+		case 'left':
+			return - element._bounds._innerWidth / 2 + padding.w;
 
-		case JUSTIFY_RIGHT:
-		case RIGHT:
-			return -line.width + ( INNER_WIDTH / 2 );
+		case 'justify-right':
+		case 'right':
+			return -line.width + ( element._bounds._innerWidth / 2 ) - padding.y;
 
 
-		case CENTER:
+		case 'center':
 			return -line.width / 2;
 
-		case JUSTIFY_CENTER:
+		case 'justify-center':
 			if ( lastLine ) {
 
 				// center alignement
@@ -132,12 +159,12 @@ const _computeLineOffset = ( line, ALIGNMENT, INNER_WIDTH, lastLine ) => {
 
 			}
 
-				// left alignment
-				return -INNER_WIDTH / 2;
+			// left alignment
+			return - element._bounds._innerWidth / 2 + padding.w;
 
 		default:
-			console.warn( `textAlign: '${ALIGNMENT}' is not valid` );
+			console.warn( `textAlign: '${element._textAlign._value}' is not valid` );
 
 	}
 
-};
+}
diff --git a/src/core/properties/style-properties/font/VerticalAlignProperty.js b/src/core/properties/style-properties/font/VerticalAlignProperty.js
new file mode 100644
index 00000000..ba80f9ee
--- /dev/null
+++ b/src/core/properties/style-properties/font/VerticalAlignProperty.js
@@ -0,0 +1,39 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+export default class VerticalAlignProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'verticalAlign', 'inherit', true );
+
+		this.isValidValue = _isValid;
+
+	}
+
+}
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const AVAILABLE_VALUES = ['inherit', 'baseline', 'sub', 'super'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+const _isValid = function ( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) verticalAlign value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/src/core/properties/style-properties/font/VerticalAlignPropertyInline.js b/src/core/properties/style-properties/font/VerticalAlignPropertyInline.js
new file mode 100644
index 00000000..f88d8510
--- /dev/null
+++ b/src/core/properties/style-properties/font/VerticalAlignPropertyInline.js
@@ -0,0 +1,36 @@
+import VerticalAlignProperty from './VerticalAlignProperty';
+
+
+export default class VerticalAlignPropertyInline extends VerticalAlignProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._allowsInherit = false;
+		this._needsUpdate = false;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ computeOutputValue( element ) { /* eslint-enable no-unused-vars */
+
+		this._value = this._inheritedInput;
+
+		this._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		if( !element._inlines.value ) return;
+
+		element._inlines.value.forEach( inline => {
+			inline.verticalAlign = this._value;
+		});
+
+	}
+
+}
diff --git a/src/core/properties/style-properties/font/WhiteSpaceProperty.js b/src/core/properties/style-properties/font/WhiteSpaceProperty.js
new file mode 100644
index 00000000..fae25950
--- /dev/null
+++ b/src/core/properties/style-properties/font/WhiteSpaceProperty.js
@@ -0,0 +1,39 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+export default class WhiteSpaceProperty extends SubStyleProperty {
+
+	constructor() {
+
+		super( 'whiteSpace', 'inherit' );
+
+		this.isValidValue = _isValid;
+
+	}
+
+}
+
+/**
+ *
+ * @type {Array.<string>}
+ */
+const AVAILABLE_VALUES = ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) whiteSpace value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/src/core/properties/style-properties/font/WhiteSpacePropertyInline.js b/src/core/properties/style-properties/font/WhiteSpacePropertyInline.js
new file mode 100644
index 00000000..52e4b76b
--- /dev/null
+++ b/src/core/properties/style-properties/font/WhiteSpacePropertyInline.js
@@ -0,0 +1,467 @@
+import WhiteSpaceProperty from './WhiteSpaceProperty';
+
+/**
+ * @typedef  StringCollapserStrategy
+ * @type {(textContent:{string}) => string}
+ */
+
+
+/**
+ * @typedef  InlineCollapserStrategy
+ * @type {(line:{Line}) => number }
+ */
+
+
+/**
+ * @typedef InlineWrapperStrategy
+ * @type {(inlines:{Array}, i:{number}, lastInlineOffset:{number}, options:Object<string,any>) => boolean}
+ */
+
+export default class WhiteSpacePropertyInline extends WhiteSpaceProperty {
+
+	constructor() {
+
+		super();
+
+		// configure
+		this._allowsInherit = false;
+		this.computeOutputValue = this._computeFromInherited;
+
+		this._whiteSpacedContent = '';
+
+		// strategies
+
+		/**
+		 *
+		 * @type {StringCollapserStrategy}
+		 * @internal
+		 */
+		this._stringCollapser = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {InlineCollapserStrategy}
+		 * @internal
+		 */
+		this._inlineCollapser = this.emptyStrategyLogic;
+
+		/**
+		 *
+		 * @type {InlineWrapperStrategy}
+		 * @internal
+		 */
+		this._inlineWrapper = this.emptyStrategyLogic;
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @private
+	 */
+	_computeFromInherited( element ) { /* eslint-enable no-unused-vars */
+		super._computeFromInherited( element );
+
+		// set strategies
+		this._newLineBreakability = _newlineBreakability( this._value );
+
+		// REDO Whitespace Matrix
+		// https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
+
+		switch ( this._value ) {
+
+			case 'nowrap':
+			case 'normal':
+				this._stringCollapser = _stringCollapseNewLine;
+				break;
+
+			case 'pre-line':
+				this._stringCollapser = _stringCollapseMultipleSpace;
+				break;
+
+			default:
+				this._stringCollapser = _stringCollapseNothing;
+
+		}
+
+		switch ( this._value ) {
+
+			case 'pre-line':
+			case 'nowrap':
+			case 'normal':
+				this._inlineCollapser = _inlineCollapseMultiple;
+				break;
+
+			case 'pre-wrap':
+				this._inlineCollapser = _inlineCollapseSingle;
+				break;
+
+			default:
+				this._inlineCollapser = _inlineCollapseNothing;
+
+		}
+
+		switch ( this._value ) {
+
+			case 'pre-line':
+			case 'pre-wrap':
+			case 'normal':
+				this._inlineWrapper = _lineBreakerWrapText;
+				break;
+
+			case 'pre':
+				this._inlineWrapper = _lineBreakerLineBreakOnly;
+				break;
+
+			default:
+				this._inlineWrapper = _lineBreakerNoWrap;
+
+		}
+
+
+		this._needsProcess = true;
+
+	}
+
+
+	process( element ) {
+
+		// @TODO: Make a property for Text -> inlineCollapser
+		if( element.isInline && !element.isInlineBlock ) {
+
+			this._whiteSpacedContent = this._stringCollapser( element._textContent._value );
+
+			element._glyphs._needsProcess = true;
+
+		}
+	}
+
+}
+
+/***********************************************************************************************************************
+ * STRATEGIES
+ **********************************************************************************************************************/
+
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace#whitespace_helper_functions
+ *
+ * Throughout, whitespace is defined as one of the characters
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * This does not use Javascript's "\s" because that includes non-breaking
+ * spaces (and also some other characters).
+ **/
+const WHITE_CHARS = { '\t': '\u0009', '\n': '\u000A', '\r': '\u000D', ' ': '\u0020' };
+
+/**
+ * Get the breakability of a newline character according to white-space property
+ *
+ * @param whiteSpace
+ * @returns {string|null}
+ */
+const _newlineBreakability = function ( whiteSpace ) {
+
+	switch ( whiteSpace ) {
+
+		case 'pre':
+		case 'pre-wrap':
+		case 'pre-line':
+			return 'mandatory';
+	}
+
+	// case NOWRAP:
+	// case NORMAL:
+	// default:
+
+	return null;
+
+};
+
+
+// STRING COLLAPSER -----------------------------------------------------
+
+/**
+ * Treat newlines as spaces
+ * @param textContentValue
+ * @return {*}
+ * @private
+ *
+ */
+function _stringCollapseNewLine( textContentValue ) {
+
+	return _stringCollapseMultipleSpace( textContentValue.replace( /\n/g, ' ' ) );
+
+}
+
+/**
+ * Treat sequences of spaces as only one space
+ * @param textContentValue
+ * @return {*}
+ * @private
+ */
+function _stringCollapseMultipleSpace( textContentValue ) {
+
+	return textContentValue.replace( /[ ]{2,}/g, ' ' );
+
+}
+
+/**
+ *
+ * @param textContentValue
+ * @return {*}
+ * @private
+ */
+function _stringCollapseNothing ( textContentValue ) {
+	return textContentValue;
+}
+
+// LineBreakers -----------------------------------------------------
+
+/**
+ *
+ * @param inlines
+ * @param i
+ * @param lastInlineOffset
+ * @param options
+ * @return {boolean}
+ * @private
+ */
+function _lineBreakerWrapText( inlines, i, lastInlineOffset, options ) {
+	const inline = inlines[ i ];
+
+	// prevent additional computation if line break is mandatory
+	if ( inline.lineBreak === 'mandatory' ) return true;
+
+	// ?? Missing letterSpacing ?
+	// prevent additional computation if this character already exceed the available size
+	if ( lastInlineOffset + inline.xadvance + inline.xoffset + inline.kerning > options.INNER_WIDTH ) return true;
+
+
+	const nextBreak = _distanceToNextBreak( inlines, i, options );
+	return _shouldFriendlyBreak( inlines[ i - 1 ], lastInlineOffset, nextBreak, options );
+}
+
+/* eslint-disable no-unused-vars */
+/**
+ *
+ * @param inlines
+ * @param i
+ * @param lastInlineOffset
+ * @param options
+ * @return {boolean}
+ * @private
+ */
+function _lineBreakerLineBreakOnly( inlines, i, lastInlineOffset, options ) { /* eslint-enable no-unused-vars */
+
+	return inlines[ i ].lineBreak === 'mandatory';
+
+}
+
+/**
+ *
+ * @return {boolean}
+ * @private
+ */
+function _lineBreakerNoWrap() {
+	return false;
+}
+
+// Inlines collapser -----------------------------------------------------
+
+/**
+ *
+ * @param line
+ * @return {number}
+ * @private
+ */
+function _inlineCollapseSingle( line ) {
+	if ( !line[ 0 ] ) return 0;
+
+	const firstInline = line[ 0 ];
+	const lastInline = line[ line.length - 1 ];
+
+	// only process whiteChars glyphs inlines
+	// if( firstInline.glyph && whiteChars[firstInline.glyph] && line.length > 1 ){
+	if ( firstInline.char && firstInline.char === '\n' && line.length > 1 ) {
+	// if ( firstInline.char && WHITE_CHARS[ firstInline.char ] && line.length > 1 ) {
+
+		_collapseLeftInlines( [ firstInline ], line[ 1 ] );
+
+	}
+
+	// if( lastInline.glyph && whiteChars[lastInline.glyph] && line.length > 1 ){
+	if ( lastInline.char && lastInline.char === '\n' && line.length > 1 ) {
+	// if ( lastInline.char && WHITE_CHARS[ firstInline.char ] && line.length > 1 ) {
+
+		_collapseRightInlines( [ lastInline ], line[ line.length - 2 ] );
+
+	}
+
+	return firstInline.offsetX;
+
+}
+
+function _inlineCollapseMultiple( line ) {
+
+	if ( !line[ 0 ] ) return 0;
+
+	let inlinesToCollapse = [];
+	let collapsingTarget;
+	// collect starting whitespaces to collapse
+	for ( let i = 0; i < line.length; i++ ) {
+
+		const inline = line[ i ];
+
+		if ( inline.char && WHITE_CHARS[ inline.char ] && line.length > i ) {
+
+			inlinesToCollapse.push( inline );
+			collapsingTarget = line[ i + 1 ];
+			continue;
+
+		}
+
+		break;
+
+	}
+
+	_collapseLeftInlines( inlinesToCollapse, collapsingTarget );
+
+
+	inlinesToCollapse = [];
+	collapsingTarget = null;
+	// collect ending whitespace to collapse
+	for ( let i = line.length - 1; i > 0; i-- ) {
+
+		const inline = line[ i ];
+		if ( inline.char && WHITE_CHARS[ inline.char ] && i > 0 ) {
+
+			inlinesToCollapse.push( inline );
+			collapsingTarget = line[ i - 1 ];
+			continue;
+
+		}
+
+		break;
+
+	}
+
+	_collapseRightInlines( inlinesToCollapse, collapsingTarget );
+
+	return line[ 0 ].offsetX;
+
+}
+
+/**
+ *
+ * @param line
+ * @return {number|*}
+ * @private
+ */
+function _inlineCollapseNothing( line ) {
+
+	if ( !line[ 0 ] ) return 0;
+	return line[ 0 ].offsetX;
+
+}
+
+/***********************************************************************************************************************
+ * Internal logics
+ **********************************************************************************************************************/
+
+
+/**
+ * Visually collapse inlines from right to left ( endtrim )
+ * @param {Array} inlines
+ * @param targetInline
+ * @private
+ */
+function _collapseRightInlines( inlines, targetInline ) {
+
+	if ( !targetInline ) return;
+
+	for ( let i = 0; i < inlines.length; i++ ) {
+
+		const inline = inlines[ i ];
+
+		inline.fontFactor = 0;
+		inline.offsetX = targetInline.offsetX + targetInline.cumulativeWidth;
+		inline.cumulativeWidth = 0;
+
+	}
+
+}
+
+/**
+ * Visually collapse inlines from left to right (starttrim)
+ * @param {Array} inlines
+ * @param targetInline
+ * @private
+ */
+function _collapseLeftInlines( inlines, targetInline ) {
+
+	if ( !targetInline ) return;
+
+	for ( let i = 0; i < inlines.length; i++ ) {
+
+		const inline = inlines[ i ];
+
+		inline.fontFactor = 0;
+		// inline.offsetX += inline.cumulativeWidth;
+		inline.offsetX = targetInline.offsetX;
+		inline.cumulativeWidth = 0;
+
+	}
+
+}
+
+/**
+ * get the distance in world coord to the next glyph defined
+ * as break-line-safe ( like whitespace for instance )
+ * @private
+ */
+function _distanceToNextBreak( inlines, currentIdx, options, accu ) {
+
+	accu = accu || 0;
+
+	// end of the text
+	if ( !inlines[ currentIdx ] ) return accu;
+
+	const inline = inlines[ currentIdx ];
+
+	// const kerning = inline.kerning ? inline.kerning : 0;
+	// const xoffset = inline.xoffset ? inline.xoffset : 0;
+	// const xadvance = inline.xadvance ? inline.xadvance : inline.width;
+
+	// if inline.lineBreak is set, it is 'mandatory' or 'possible'
+	if ( inline.lineBreak ) return accu + inline.xadvance;
+
+	// no line break is possible on this character
+	return _distanceToNextBreak(
+		inlines,
+		currentIdx + 1,
+		options,
+		accu + inline.xadvance + inline.xoffset + inline.kerning + options.LETTERSPACING
+	);
+
+}
+
+/**
+ * Test if we should line break here even if the current glyph is not out of boundary.
+ * It might be necessary if the last glyph was break-line-friendly (whitespace, hyphen..)
+ * and the distance to the next friendly glyph is out of boundary.
+ */
+function _shouldFriendlyBreak( prevChar, lastInlineOffset, nextBreak, options ) {
+
+	// We can't check if last glyph is break-line-friendly it does not exist
+	if ( !prevChar || !prevChar.char ) return false;
+
+	// Next break-line-friendly glyph is inside boundary
+	if ( lastInlineOffset + nextBreak < options.INNER_WIDTH ) return false;
+
+	// Previous glyph was break-line-friendly
+	return options.BREAKON.indexOf( prevChar.char ) > -1;
+
+}
diff --git a/src/core/properties/style-properties/visibility/Display.js b/src/core/properties/style-properties/visibility/Display.js
new file mode 100644
index 00000000..d0dff1d0
--- /dev/null
+++ b/src/core/properties/style-properties/visibility/Display.js
@@ -0,0 +1,46 @@
+import SubStyleProperty from '../SubStyleProperty';
+
+
+export default class Display extends SubStyleProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'display', defaultValue );
+
+		// configure
+		this._value = 'flex';
+		this._allowsInherit = false;
+		this._needsUpdate = false;
+
+
+		this.isValidValue = _isValid;
+
+	}
+
+	computeOutputValue( element ) {
+
+		element._visible._value = this._output !== 'none';
+
+	}
+}
+
+const AVAILABLE_VALUES = ['none','flex'];
+
+/**
+ *
+ * @param {any} value
+ * @return {boolean}
+ * @private
+ */
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) display value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/src/core/properties/style-properties/visibility/Overflow.js b/src/core/properties/style-properties/visibility/Overflow.js
new file mode 100644
index 00000000..b57376de
--- /dev/null
+++ b/src/core/properties/style-properties/visibility/Overflow.js
@@ -0,0 +1,206 @@
+import SubStyleProperty from '../SubStyleProperty';
+import { Plane, Vector3 } from 'three';
+
+
+export default class Overflow extends SubStyleProperty {
+
+	constructor( defaultValue ) {
+
+		super( 'overflow', defaultValue, true );
+
+		this.isValidValue = _isValid;
+
+		/**
+		 *
+		 * @type {Array.<Plane>|null}
+		 * @internal
+		 */
+		this._clippingPlanes = null;
+
+		this._renderStrategy = this._emptyRender;
+	}
+
+	/**
+	 * Update of overflow is a bit different, as parent may trigger changes on it
+	 * @override
+	 */
+	update( element, out ) {
+
+		// in any case, it will compute value. It doesn't have updateRequire evaluation
+		// let updateRequired = true;
+
+		// Inline has priority if set
+		if ( this._inline !== undefined && this._inline !== 'unset' ) {
+
+			this._input = this._inline;
+
+		}
+		// or fallback on computed
+		else if ( this._computed !== undefined ) {
+
+			this._input = this._computed;
+
+		}
+
+		if ( !this._allowsInherit ) {
+
+			this._inheritedInput = this.getInheritedInput( element );
+
+		}
+
+		this.computeOutputValue( element );
+
+		// rebuild same properties on children 'inheritance'
+		for ( const childUIElement of element._children._uis ) {
+			childUIElement[ `_overflow` ]._needsUpdate = true;
+		}
+
+		this.output( out );
+
+	}
+
+	output( out ) {
+
+		out['clippingPlanes'] = this._clippingPlanes;
+
+	}
+
+	computeOutputValue( element ) {
+
+		// update self --------------------
+		super.computeOutputValue( element );
+
+		if( this._value === 'hidden' ) {
+
+			this._renderStrategy = this._propagateRender;
+
+		}else{
+
+			this._renderStrategy = this._emptyRender;
+			this._clippingPlanes = null;
+		}
+
+
+		const parent = element._parent._value;
+		if( parent !== null ) {
+
+			// Check that parent is hiddenOverflow or has clippingPlanes
+			const overflowParent = parent._overflow;
+			if ( ( overflowParent._value === 'hidden' || overflowParent._clippingPlanes !== null ) && !this._clippingPlanes ) {
+
+				// add planes and render
+				this._clippingPlanes =  [
+					// top
+					new Plane( new Vector3( 0, -1, 0 ), 1 ),
+					// right
+					new Plane( new Vector3( -1, 0, 0 ), 1 ),
+					// bottom
+					new Plane( new Vector3( 0, 1, 0 ), 1 ),
+					// left
+					new Plane( new Vector3( 1, 0, 0 ), 1 ),
+				];
+
+				// bind the parent to the clipping plane in a custom property
+				for ( let i = 0; i < this._clippingPlanes.length; i++ ) {
+					this._clippingPlanes[ i ].parent = parent;
+				}
+
+				// Also add parent clipping planes if isset
+				if( overflowParent._clippingPlanes !== null ) {
+					this._clippingPlanes.push( ...overflowParent._clippingPlanes );
+				}
+
+				this._renderStrategy = this._hiddenRender;
+				this._needsRender = true;
+
+			} else if ( ( overflowParent._value === 'visible' || overflowParent._clippingPlanes === null ) && this._clippingPlanes !== null ){
+
+				// remove planes and render
+				this._clippingPlanes = null;
+				this._renderStrategy = this._emptyRender;
+				this._needsRender = true;
+
+			}
+
+		}
+
+	}
+
+	render( element) {
+
+		this._renderStrategy( element );
+
+	}
+
+	/* eslint-disable no-unused-vars */	_emptyRender( element ) { /* eslint-enable no-unused-vars */ }
+
+	_hiddenRender( element ) {
+
+
+		const parentUI = element._parent._value;
+
+		const yLimit = parentUI._bounds._offsetHeight;
+		const xLimit = parentUI._bounds._offsetWidth;
+		const padding = parentUI._padding._value;
+		const border = parentUI._borderWidth._value;
+
+		for ( let i = 0; i < 4 && i < this._clippingPlanes.length ; i++ ) {
+			const clippingPlane = this._clippingPlanes[ i ];
+
+			switch ( i % 4 ) {
+				// top
+				case 0:
+					clippingPlane.constant = yLimit / 2 - ( padding.x + border.x );
+					break;
+
+				// right
+				case 1:
+					clippingPlane.constant = xLimit / 2 - ( padding.y + border.y );
+					break;
+
+				// bottom
+				case 2:
+					clippingPlane.constant = yLimit / 2 - ( padding.z + border.z );
+					break;
+
+				// left
+				case 3:
+					clippingPlane.constant = xLimit / 2 - ( padding.w + border.w );
+					break;
+			}
+
+			clippingPlane.applyMatrix4( parentUI.matrixWorld )
+
+		}
+
+		for ( let i = 0; i < element._children._uis.length; i++ ) {
+			const ui = element._children._uis[ i ];
+			ui._overflow._needsRender = true;
+		}
+
+	}
+
+	_propagateRender( element ) {
+
+		for ( let i = 0; i < element._children._uis.length; i++ ) {
+			const ui = element._children._uis[ i ];
+			ui._overflow._needsRender = true;
+		}
+
+	}
+
+}
+
+const AVAILABLE_VALUES = ['visible', 'hidden'];
+function _isValid( value ) {
+
+	if( AVAILABLE_VALUES.indexOf( value ) === -1 ) {
+
+		console.warn( `(.style) overflow value '${value}' is not valid. Aborted` );
+		return false;
+
+	}
+
+	return true;
+
+}
diff --git a/src/elements/basic/BlockElement.js b/src/elements/basic/BlockElement.js
new file mode 100644
index 00000000..b1a6f450
--- /dev/null
+++ b/src/elements/basic/BlockElement.js
@@ -0,0 +1,94 @@
+import BoxElement from './BoxElement';
+import BoxLayouter from '../../core/properties/BoxLayouter';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from './../../core/elements/MeshUIBaseElement';
+import { Object3D } from 'three';
+/* eslint-enable no-unused-vars */
+
+
+export default class BlockElement extends BoxElement {
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 */
+	constructor( values = {} ) {
+
+		const properties = {};
+		BlockElement.definePropertiesValues( properties, values );
+
+		super( properties , values );
+
+		BlockElement.init( this );
+
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * A Block Element can only contains box elements
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) {
+		/* eslint-enable no-unused-vars */
+
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			const argument = arguments[ i ];
+
+			if ( !argument.isUI || argument.isBox ) {
+
+				validChildren.push( argument );
+
+			} else {
+
+				console.warn( 'Block element can only contain Box elements.', argument );
+
+			}
+
+		}
+
+		return super.add( ...validChildren );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {  /* eslint-enable no-unused-vars */
+
+		properties.layouter = BoxLayouter;
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init ( element ) {
+
+		Object.defineProperties( element , {
+				isBlock: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+	}
+
+}
diff --git a/src/elements/basic/BoxElement.js b/src/elements/basic/BoxElement.js
new file mode 100644
index 00000000..b27363ff
--- /dev/null
+++ b/src/elements/basic/BoxElement.js
@@ -0,0 +1,118 @@
+import FrameMaterial from '../../frame/materials/FrameMaterial';
+import MeshUIBaseElement from '../../core/elements/MeshUIBaseElement';
+import ChildrenBox from '../../core/properties/hierarchy/ChildrenBox';
+import BoundsBox from '../../core/properties/BoundsBox';
+import AlignItemsPropertyBox from '../../core/properties/style-properties/flex/AlignItemsPropertyBox';
+import FlexDirectionPropertyBox from '../../core/properties/style-properties/flex/FlexDirectionPropertyBox';
+import JustifyContentPropertyBox from '../../core/properties/style-properties/flex/JustifyContentPropertyBox';
+import { Vector3 } from 'three';
+import RendererPropertyBox from '../../core/properties/rendering/RendererPropertyBox';
+import PositionPropertyBox from '../../core/properties/style-properties/PositionPropertyBox';
+import AutoSizePropertyBox from '../../core/properties/AutoSizePropertyBox';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Object3D } from 'three';
+/* eslint-enable no-unused-vars */
+
+export default class BoxElement extends MeshUIBaseElement {
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	constructor( properties, values) {
+
+		BoxElement.definePropertiesValues( properties, values );
+
+		super( properties, values );
+
+		BoxElement.init( this );
+
+	}
+
+	/**
+	 * When the backgroundMesh has been set, bind properties
+	 * @override
+	 */
+	bindBackgroundMeshProperties () {
+
+		// bind the background scale with bounds
+		this._bounds._size = this._backgroundMesh.scale;
+		this._bounds._needsProcess = true;
+
+	}
+
+	/**
+	 * When the backgroundMesh has been unset, unbind properties
+	 * @override
+	 */
+	unbindBackgroundMeshProperties () {
+
+		// detach bounds size
+		this._bounds._size = new Vector3(1,1,1);
+		this._bounds._needsProcess = true;
+
+	}
+
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {
+
+		// customize property
+		if( !properties.children ) properties.children = ChildrenBox;
+		if( !properties.bounds ) properties.bounds = BoundsBox;
+		if( !properties.flexDirection ) properties.flexDirection = FlexDirectionPropertyBox;
+		if( !properties.justifyContent ) properties.justifyContent = JustifyContentPropertyBox;
+		if( !properties.alignItems ) properties.alignItems = AlignItemsPropertyBox;
+		if( !properties.position ) properties.position = PositionPropertyBox;
+		if( !properties.autoSize ) properties.autoSize = AutoSizePropertyBox;
+
+		if( !properties.renderer ) properties.renderer = RendererPropertyBox;
+
+
+		// configure
+		// /* ie: * /if ( !values.width ) values.width = '100%';
+
+
+		// break inheritance chains
+		if ( !values.fontSide ) values.fontSide = 0; // FrontSide;
+		if ( !values.invertAlpha ) values.invertAlpha = false;
+		if ( !values.fontCastShadow ) values.fontCastShadow = false;
+		if ( !values.fontReceiveShadow ) values.fontReceiveShadow = false;
+		if ( !values.backgroundCastShadow ) values.backgroundCastShadow = false;
+		if ( !values.backgroundReceiveShadow ) values.backgroundReceiveShadow = false;
+
+		if( !values.uiType ) values.uiType = 'block';
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init( element ) {
+
+		Object.defineProperties( element, {
+				isBox: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+
+		element.backgroundMaterial = new FrameMaterial();
+		element._renderer.render( element );
+
+		element._backgroundMesh.visible = false;
+
+	}
+
+}
diff --git a/src/elements/basic/InlineBlockElement.js b/src/elements/basic/InlineBlockElement.js
new file mode 100644
index 00000000..7afc3e7d
--- /dev/null
+++ b/src/elements/basic/InlineBlockElement.js
@@ -0,0 +1,300 @@
+import LineBreakProperty from '../../core/properties/LineBreakProperty';
+import ChildrenInline from '../../core/properties/hierarchy/ChildrenInline';
+import FontKerningProperty from '../../core/properties/style-properties/font/FontKerningProperty';
+import MeshUIBaseElement from '../../core/elements/MeshUIBaseElement';
+import InlineLayouter from '../../core/properties/InlineLayouter';
+import Inline from '../../core/elements/glyphs/Inline';
+import FrameMaterial from '../../frame/materials/FrameMaterial';
+import InlinesPropertyInlineBlock from '../../core/properties/InlinesPropertyInlineBlock';
+import LetterSpacingPropertyInline from '../../core/properties/style-properties/font/LetterSpacingPropertyInline';
+import FontSizePropertyInline from '../../core/properties/style-properties/font/FontSizePropertyInline';
+import RendererPropertyInlineBox from '../../core/properties/rendering/RendererPropertyInlineBox';
+import BoundsInlineBlock from '../../core/properties/BoundsInlineBlock';
+import { Vector3 } from 'three';
+import WhiteSpacePropertyInline from '../../core/properties/style-properties/font/WhiteSpacePropertyInline';
+import FontFamilyPropertyInline from '../../core/properties/style-properties/font/FontFamilyPropertyInline';
+import FontWeightPropertyInline from '../../core/properties/style-properties/font/FontWeightPropertyInline';
+import FontStylePropertyInline from '../../core/properties/style-properties/font/FontStylePropertyInline';
+import BackgroundColorPropertyInlineBlock from '../../core/properties/style-properties/background/BackgroundColorPropertyInlineBlock';
+import ColorPropertyInlineBlock from '../../core/properties/style-properties/font/ColorPropertyInlineBlock';
+import BorderColorPropertyInlineBlock from '../../core/properties/style-properties/border/BorderColorPropertyInlineBlock';
+
+export default class InlineBlockElement extends MeshUIBaseElement {
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 */
+	constructor( values = {}) {
+
+		const properties = {};
+		InlineBlockElement.definePropertiesValues( properties, values );
+
+		super( properties, values );
+
+		InlineBlockElement.init( this );
+
+	}
+
+	clear() {
+
+		// remove cross reference
+		for ( const inline of this._inlines._value ) {
+			inline.clear();
+		}
+
+		return super.clear();
+	}
+
+	/**
+	 * When the backgroundMesh has been set, bind properties
+	 * @override
+	 */
+	bindBackgroundMeshProperties () {
+
+		this._backgroundMesh.raycast = ()=>{};
+
+		// bind the background scale with bounds
+		this._bounds._size = this._backgroundMesh.scale;
+		this._bounds._needsUpdate = true;
+
+	}
+
+	/**
+	 * When the backgroundMesh has been unset, unbind properties
+	 * @override
+	 */
+	unbindBackgroundMeshProperties () {
+
+		// detach bounds size
+		this._bounds._size = new Vector3(1,1,1);
+		this._bounds._needsUpdate = true;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) { /* eslint-enable no-unused-vars */
+
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			const argument = arguments[ i ];
+
+			if ( !argument.isUI ) {
+
+				validChildren.push( argument );
+
+				argument.position.z = 0.005;
+
+			} else {
+
+				console.warn( 'ThreeMeshUI::InlineBlockElement cannot contains UI Elements.', argument );
+
+			}
+
+		}
+
+		return super.add( ...validChildren );
+
+	}
+
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {
+
+		if( !properties.children ) properties.children = ChildrenInline;
+		if( !properties.bounds ) properties.bounds = BoundsInlineBlock;
+		if( !properties.inlines ) properties.inlines = InlinesPropertyInlineBlock;
+		if( !properties.layouter ) properties.layouter = InlineLayouter;
+		if( !properties.renderer ) properties.renderer = RendererPropertyInlineBox;
+
+		// reset inlineElement specificity
+		if( !properties.fontFamily ) properties.fontFamily = FontFamilyPropertyInline;
+		if( !properties.fontWeight ) properties.fontWeight = FontWeightPropertyInline;
+		if( !properties.fontStyle ) properties.fontStyle = FontStylePropertyInline;
+		if( !properties.fontSize ) properties.fontSize = FontSizePropertyInline;
+
+		if( !properties.backgroundColor ) properties.backgroundColor = BackgroundColorPropertyInlineBlock;
+		if( !properties.borderColor ) properties.borderColor = BorderColorPropertyInlineBlock;
+		if( !properties.color ) properties.color = ColorPropertyInlineBlock;
+
+		if( !properties.lineBreak ) properties.lineBreak = LineBreakProperty;
+		if( !properties.letterSpacing ) properties.letterSpacing = LetterSpacingPropertyInline;
+		if( !properties.whiteSpace ) properties.whiteSpace = WhiteSpacePropertyInline;
+		if( !properties.fontKerning ) properties.fontKerning = FontKerningProperty;
+
+		if( values.backgroundOpacity === undefined) values.backgroundOpacity = 1;
+
+		if( !values.backgroundSize ) values.backgroundSize = 'cover';
+		if( !values.width ) values.width = '100%';
+		if( !values.height ) values.height = '100%';
+		if( !values.boxSizing ) values.boxSizing = 'border-box';
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init( element ) {
+
+		Object.defineProperties( element, {
+				isInline: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				},
+				isInlineBlock: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+		element._inlines._value = [new InlineBlockInline(element)];
+
+		element.backgroundMaterial = new FrameMaterial();
+		element._renderer.render( element );
+
+	}
+
+}
+
+
+
+
+/**
+ * InlineBlock has its own Inline implementation
+ */
+class InlineBlockInline extends Inline {
+
+	/**
+	 *
+	 * @param {InlineBlockElement} parent
+	 */
+	constructor( parent ) {
+
+		super();
+
+		/**
+		 * @TODO: This currently make a circular reference that should ideally be removed
+		 * @type {InlineBlockElement}
+		 * @private
+		 */
+		this._uiElement = parent;
+
+	}
+
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get xadvance() {
+
+		const padding = this._uiElement._padding._value;
+		const width = this._uiElement._width;
+		if( width._relative ) {
+			return width._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
+
+		return padding.w + padding.y + width.value ;
+	}
+
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get width() {
+
+		const width = this._uiElement._width;
+
+		if( width._relative ) {
+			return width._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
+
+		return width.value;
+
+	}
+
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get height() {
+
+		const height = this._uiElement._height;
+		if( height._relative ) {
+			return height._value * this._uiElement._fontSize.getInheritedInput( this._uiElement ) ;
+		}
+
+		return height.value;
+
+	}
+
+	get anchor(){
+		return this.height;
+	}
+
+
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get lineHeight() {
+
+		const height = this._uiElement._height;
+		if( height._relative ) {
+			return height._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
+
+		return height.value;
+
+	}
+
+	/**
+	 * Rely on the parent for size computation
+	 * @override
+	 * @returns {number}
+	 */
+	get lineBase() {
+
+		const height = this._uiElement._height;
+		if( height._relative ) {
+			return height._value * this._uiElement._fontSize.getInheritedInput( this._uiElement );
+		}
+
+		return height.value;
+
+	}
+
+	/**
+	 *
+	 */
+	clear() {
+
+		this._uiElement = null;
+
+	}
+
+}
+
diff --git a/src/elements/basic/InlineElement.js b/src/elements/basic/InlineElement.js
new file mode 100644
index 00000000..b17b8b04
--- /dev/null
+++ b/src/elements/basic/InlineElement.js
@@ -0,0 +1,159 @@
+import MeshUIBaseElement from '../../core/elements/MeshUIBaseElement';
+import TextContentInline from '../../core/properties/TextContentInline';
+import InlinesProperty from '../../core/properties/InlinesProperty';
+import GlyphsProperty from '../../core/properties/GlyphsProperty';
+import ColorProperty from '../../core/properties/style-properties/font/ColorProperty';
+import LineBreakProperty from '../../core/properties/LineBreakProperty';
+import InlineLayouter from '../../core/properties/InlineLayouter';
+import BackgroundColorPropertyInline from '../../core/properties/style-properties/background/BackgroundColorPropertyInline';
+import FontStylePropertyInline from '../../core/properties/style-properties/font/FontStylePropertyInline';
+import FontWeightPropertyInline from '../../core/properties/style-properties/font/FontWeightPropertyInline';
+import FontFamilyPropertyInline from '../../core/properties/style-properties/font/FontFamilyPropertyInline';
+import WhiteSpacePropertyInline from '../../core/properties/style-properties/font/WhiteSpacePropertyInline';
+import LetterSpacingPropertyInline from '../../core/properties/style-properties/font/LetterSpacingPropertyInline';
+import FontSizePropertyInline from '../../core/properties/style-properties/font/FontSizePropertyInline';
+import SegmentsPropertyInline from '../../core/properties/geometry/SegmentsPropertyInline';
+import FontKerningPropertyInline from '../../core/properties/style-properties/font/FontKerningPropertyInline';
+import ChildrenInline from '../../core/properties/hierarchy/ChildrenInline';
+import RendererPropertyInline from '../../core/properties/rendering/RendererPropertyInline';
+import TextAlignPropertyInline from '../../core/properties/style-properties/font/TextAlignPropertyInline';
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Object3D } from 'three';
+import VerticalAlignPropertyInline from '../../core/properties/style-properties/font/VerticalAlignPropertyInline';
+/* eslint-enable no-unused-vars */
+
+export default class InlineElement extends MeshUIBaseElement {
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 */
+	constructor( values = { }) {
+
+		const properties = {};
+		InlineElement.definePropertiesValues( properties, values );
+
+		super( properties, values );
+
+		InlineElement.init( this );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * A Text Element can only contains inline elements
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) { /* eslint-enable no-unused-vars */
+
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			const argument = arguments[ i ];
+
+			if ( !argument.isUI || argument.isInline ) {
+
+				validChildren.push( argument );
+
+				argument.position.z = 0.005;
+
+			} else {
+
+				console.warn( 'Block element can only contain Box elements.', argument );
+
+			}
+
+		}
+
+		return super.add( ...validChildren );
+
+	}
+
+	_rebuildParentUI = () => {
+
+		super._rebuildParentUI();
+
+		this._layouter._needsUpdate = true;
+
+	}
+
+	set textContent( value ) {
+
+		this._textContent.value = value;
+
+	}
+
+	get textContent () { return this._textContent._value; }
+
+	set invertAlpha( value ) {
+
+		this._invertAlpha.value = value;
+
+	}
+
+	get invertAlpha () { return this._invertAlpha._value; }
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {  /* eslint-enable no-unused-vars */
+
+		if( !properties.children ) properties.children = ChildrenInline;
+		if( !properties.textContent ) properties.textContent = TextContentInline;
+		if( !properties.glyphs ) properties.glyphs = GlyphsProperty;
+		if( !properties.inlines ) properties.inlines = InlinesProperty;
+		if( !properties.layouter ) properties.layouter = InlineLayouter;
+		if( !properties.renderer ) properties.renderer = RendererPropertyInline;
+
+
+		if( !properties.fontFamily ) properties.fontFamily = FontFamilyPropertyInline;
+		if( !properties.fontWeight ) properties.fontWeight = FontWeightPropertyInline;
+		if( !properties.fontStyle ) properties.fontStyle = FontStylePropertyInline;
+		if( !properties.fontSize ) properties.fontSize = FontSizePropertyInline;
+		if( !properties.color ) properties.color = ColorProperty;
+		if( !properties.backgroundColor ) properties.backgroundColor = BackgroundColorPropertyInline;
+		if( !properties.lineBreak ) properties.lineBreak = LineBreakProperty;
+		if( !properties.letterSpacing ) properties.letterSpacing = LetterSpacingPropertyInline;
+		if( !properties.whiteSpace ) properties.whiteSpace = WhiteSpacePropertyInline;
+		if( !properties.segments ) properties.segments = SegmentsPropertyInline;
+		if( !properties.textAlign ) properties.textAlign = TextAlignPropertyInline;
+		if( !properties.verticalAlign ) properties.verticalAlign = VerticalAlignPropertyInline;
+
+		if( !properties.fontKerning ) properties.fontKerning = FontKerningPropertyInline;
+
+		// if( !properties.inlines ) properties.inlines = InlinesProperty;
+
+		if( !values.uiType ) values.uiType = 'inline';
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init( element ) {
+
+		Object.defineProperties( element, {
+				isInline: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+	}
+}
diff --git a/src/elements/basic/TextElement.js b/src/elements/basic/TextElement.js
new file mode 100644
index 00000000..d47221ee
--- /dev/null
+++ b/src/elements/basic/TextElement.js
@@ -0,0 +1,166 @@
+import BoxElement from './BoxElement';
+import TextContentText from '../../core/properties/TextContentText';
+import TextLayouter from '../../core/properties/TextLayouter';
+import TextAlignPropertyText from '../../core/properties/style-properties/font/TextAlignPropertyText';
+import FlexDirectionPropertyText from '../../core/properties/style-properties/flex/FlexDirectionPropertyText';
+import InlineElement from './InlineElement';
+import JustifyContentProperty from '../../core/properties/style-properties/flex/JustifyContentProperty';
+import AlignItemsProperty from '../../core/properties/style-properties/flex/AlignItemsProperty';
+import LineHeightPropertyInline from '../../core/properties/style-properties/font/LineHeightPropertyInline';
+import WhiteSpacePropertyInline from '../../core/properties/style-properties/font/WhiteSpacePropertyInline';
+import SegmentsPropertyText from '../../core/properties/geometry/SegmentsPropertyText';
+import FontKerningPropertyText from '../../core/properties/style-properties/font/FontKerningPropertyText';
+import BoundsText from '../../core/properties/BoundsText';
+import ChildrenText from '../../core/properties/hierarchy/ChildrenText';
+import AutoSizePropertyText from '../../core/properties/AutoSizePropertyText';
+import RendererPropertyText from '../../core/properties/rendering/RendererPropertyText';
+
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Object3D } from 'three';
+import MeshUIBaseElement from '../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class TextElement extends BoxElement {
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} [values={}]
+	 * @param [properties={}]
+	 */
+	constructor( values = {}, properties = {}) {
+
+		TextElement.definePropertiesValues( properties, values );
+
+		super( properties, values );
+
+		TextElement.init( this );
+
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * A Text Element can only contains inline elements
+	 * @override
+	 * @param {...Object3D} object
+	 * @return {this}
+	 */
+	add( object ) { /* eslint-enable no-unused-vars */
+
+		/**
+		 *
+		 * @type {Array.<Object3D>}
+		 */
+		const validChildren = [];
+		let updateLayout = false;
+
+		for ( let i = 0; i < arguments.length; i++ ) {
+
+			const argument = arguments[ i ];
+
+			if ( !argument.isUI || argument.isInline ) {
+
+				if( argument.isInline ) {
+					updateLayout = true;
+				}
+
+				validChildren.push( argument );
+
+			} else {
+
+				console.warn( 'Block element can only contain Box elements.', argument );
+
+			}
+
+		}
+
+		if( validChildren.length > 0 ) {
+
+			super.add( ...validChildren )
+
+		}
+
+		if( updateLayout ) {
+			this._children._needsUpdate = true;
+			this._layouter._needsProcess = true;
+		}
+
+		return this;
+
+	}
+
+
+	set textContent ( value ) {
+
+		this._textContent.value = value;
+
+	}
+
+	// Must redefine getter also, or issue.
+	get textContent() {
+
+		return super.textContent;
+
+	}
+
+	set invertAlpha( value ) {
+
+		this._invertAlpha.value = value;
+
+	}
+
+	get invertAlpha () { return this._invertAlpha._value; }
+
+	get lines() { return this._layouter._value; }
+
+	/**
+	 *
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Properties} properties
+	 * @param {import('./../../core/elements/MeshUIBaseElement').Options} values
+	 */
+	static definePropertiesValues( properties, values ) {
+
+		properties.flexDirection = FlexDirectionPropertyText;
+		properties.justifyContent = JustifyContentProperty;
+		properties.alignItems = AlignItemsProperty;
+		properties.bounds = BoundsText;
+		properties.autoSize = AutoSizePropertyText;
+		properties.renderer = RendererPropertyText;
+
+		if( !properties.children ) properties.children = ChildrenText;
+		if( !properties.textContent ) properties.textContent = TextContentText;
+		if( !properties.layouter ) properties.layouter = TextLayouter;
+		if( !properties.lineHeight ) properties.lineHeight = LineHeightPropertyInline;
+		if( !properties.textAlign ) properties.textAlign = TextAlignPropertyText;
+		if( !properties.whiteSpace ) properties.whiteSpace = WhiteSpacePropertyInline;
+		if( !properties.fontKerning ) properties.fontKerning = FontKerningPropertyText;
+		if( !properties.segments ) properties.segments = SegmentsPropertyText;
+
+		// configure
+		if ( !values.width ) values.width = '100%';
+
+
+		// break inheritance chains
+		if ( !values.fontSide ) values.fontSide = 0; // FrontSide;
+
+	}
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	static init( element ) {
+
+		Object.defineProperties( element, {
+				isText: {
+					configurable: false,
+					enumerable: true,
+					value: true
+				}
+			}
+		);
+
+	}
+}
diff --git a/src/elements/html/properties/StyleComputedPropertyWrapper.js b/src/elements/html/properties/StyleComputedPropertyWrapper.js
new file mode 100644
index 00000000..369f35bd
--- /dev/null
+++ b/src/elements/html/properties/StyleComputedPropertyWrapper.js
@@ -0,0 +1,937 @@
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Color, Vector4 } from 'three';
+import MeshUIBaseElement from './../../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+/**
+ * Wrapper of properties to fit html naming and multiple inputs : computed & computed(css)
+ */
+export default class StyleComputedPropertyWrapper {
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	constructor( element ) {
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 * @private
+		 */
+		this._element = element;
+
+	}
+
+	set( values ) {
+
+		for ( const property in values ) {
+			this[property] = values[property];
+		}
+
+	}
+
+	/***********************************************************************************************************************
+	 * computed GETTERS - SETTERS
+	 **********************************************************************************************************************/
+
+	/** Box Properties ---------------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"border-box"|"content-box"} value
+	 */
+	set boxSizing( value ) {
+
+		this._element._boxSizing.computed = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"border-box"|"content-box"}
+	 */
+	get boxSizing() { return this._element._boxSizing._computed; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set width ( v ) {
+
+		this._element._width.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {*}
+	 */
+	get width () { return this._element._width._computed; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set height ( v ) {
+
+		this._element._height.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {*}
+	 */
+	get height () { return this._element._height._computed; }
+
+
+	/**
+	 *
+	 * @param {Vector4|Array.<number>|number|string} v
+	 */
+	set padding( v ) {
+
+		this._element._padding.computed = v;
+
+	}
+
+
+	/**
+	 *
+	 * @return {Vector4}
+	 */
+	get padding () { return this._element._padding._computed; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingTop ( v ) {
+
+		this._element._padding.computedTop = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingTop () { return this._element._padding.computedTop; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingRight (v) {
+
+		this._element._padding.computedRight = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingRight () { return this._element._padding.computedRight; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingBottom (v) {
+
+		this._element._padding.computedBottom = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingBottom () { return this._element._padding.computedBottom; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingLeft ( v ) {
+
+		this._element._padding.computedLeft = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingLeft () { return this._element._padding.computedLeft; }
+
+	/**
+	 *
+	 * @param {Vector4|Array.<number>|number|string} v
+	 */
+	set margin( v ) {
+
+		this._element._margin.computed = v;
+
+	}
+
+
+	/**
+	 *
+	 * @return {Vector4}
+	 */
+	get margin () {
+		return this._element._margin._computed;
+	}
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginTop ( v ) {
+
+		this._element._margin.computedTop = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginTop () { return this._element._margin.computedTop; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginRight (v) {
+
+		this._element._margin.computedRight = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginRight () { return this._element._margin.computedRight; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginBottom (v) {
+
+		this._element._margin.computedBottom = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginBottom () { return this._element._margin.computedBottom; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginLeft ( v ) {
+
+		this._element._margin.computedLeft = v;
+
+	}
+
+	/** Display Properties -----------------------------------------------------*/
+
+
+	/**
+	 *
+	 * @param {"flex"|"none"} value
+	 */
+	set display ( value ) {
+
+		this._element._display.computed = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"flex"|"none"}
+	 */
+	get display() { return this._element._display._computed; }
+
+
+	/**
+	 *
+	 * @param {"visible"|"hidden"} v
+	 */
+	set overflow ( v ) {
+
+		this._element._overflow.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"visible"|"hidden"}
+	 */
+	get overflow () { return this._element._overflow._computed; }
+
+	/** Position Properties ----------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"static"|"absolute"} v
+	 */
+	set position ( v ) {
+
+		this._element._position.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"static"|"absolute"}
+	 */
+	get position () { return this._element._position._computed; }
+
+
+	/** Flex Properties --------------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"column"|"column-reverse"|"row"|"row-reverse"} value
+	 */
+	set flexDirection( value ) {
+
+		this._element._flexDirection.computed = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"column"|"column-reverse"|"row"|"row-reverse"}
+	 */
+	get flexDirection() { return this._element._flexDirection._computed; }
+
+	/**
+	 *
+	 * @param {"flex-start"|"center"|"flex-end"|"space-around"|"space-between"|"space-evenly"} value
+	 */
+	set justifyContent( value ) {
+
+		this._element._justifyContent.computed = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"flex-start"|"center"|"flex-end"|"space-around"|"space-between"|"space-evenly"}
+	 */
+	get justifyContent() { return this._element._justifyContent._computed; }
+
+	/**
+	 *
+	 * @param {"start"|"center"|"end"|"stretch"} value
+	 */
+	set alignItems ( value ) {
+
+		this._element._alignItems.computed = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"start"|"center"|"end"|"stretch"}
+	 */
+	get alignItems() { return this._element._alignItems._computed; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set order (v) {
+
+		this._element._order.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get order () { return this._element._order._computed; }
+
+
+	/** Background Properties --------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {Color|number|string} v
+	 */
+	set backgroundColor( v ) {
+
+		this._element._backgroundColor.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {Color|number|string}
+	 */
+	get backgroundColor() { return this._element._backgroundColor._computed; }
+
+
+	set backgroundOpacity ( v ) {
+
+		this._element._backgroundOpacity.computed = v;
+
+	}
+
+	get backgroundOpacity () { return this._element._backgroundOpacity._computed; }
+
+	/**
+	 *
+	 * @param {Texture|string} v
+	 */
+	set backgroundImage ( v ) {
+
+		this._element._backgroundImage.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {Texture|string}
+	 */
+	get backgroundImage () { return this._element._backgroundImage._computed; }
+
+	/**
+	 *
+	 * @param {"cover"|"contain"|"stretch"} v
+	 */
+	set backgroundSize ( v ) {
+
+		this._element._backgroundSize.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"cover"|"contain"|"stretch"}
+	 */
+	get backgroundSize() { return this._element._backgroundSize._computed; }
+
+
+	/** Text Properties --------------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"} v
+	 */
+	set whiteSpace ( v ) {
+
+		this._element._whiteSpace.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"}
+	 */
+	get whiteSpace () { return this._element._whiteSpace._computed; }
+
+
+
+
+
+	/**
+	 *
+	 * @param {Color|number|string} v
+	 */
+	set color( v ) {
+
+		this._element._color.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {Color|number|string}
+	 */
+	get color () { return this._element._color._computed; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set opacity ( v ) {
+
+		this._element._fontOpacity.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get opacity () { return this._element._fontOpacity._computed; }
+
+
+
+
+	/**
+	 *
+	 * @param {"normal"|"italic"} v
+	 */
+	set fontStyle (v) {
+
+		this._element._fontStyle.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"normal"|"italic"}
+	 */
+	get fontStyle () { return this._element._fontStyle._computed; }
+
+
+	/**
+	 *
+	 * @param {100|200|300|400|500|600|700|800|900|"light"|"normal"|"bold"|"bolder"}  v
+	 */
+	set fontWeight ( v ) {
+
+		this._element._fontWeight.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {100|200|300|400|500|600|700|800|900|"light"|"normal"|"bold"|"bolder"}
+	 */
+	get fontWeight () { return this._element._fontWeight._computed; }
+
+	/**
+	 *
+	 * @param {"normal"|"none"} v
+	 */
+	set fontKerning ( v ) {
+
+		this._element._fontKerning.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"normal"|"none"}
+	 */
+	get fontKerning () { return this._element._fontKerning._computed; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set letterSpacing (v) {
+
+		this._element._letterSpacing.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get letterSpacing () { return this._element._letterSpacing._computed; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set lineHeight ( v ) {
+
+		this._element._lineHeight.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get lineHeight () { return this._element._lineHeight._computed; }
+
+
+	/**
+	 *
+	 * @param {"left"| "right"|"center"|"justify"|"justify-left"|"justify-right"|"justify-center"} v
+	 */
+	set textAlign ( v ) {
+
+		this._element._textAlign.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"left"| "right"|"center"|"justify"|"justify-left"|"justify-right"|"justify-center"}
+	 */
+	get textAlign() { return this._element._textAlign._computed; }
+
+	/**
+	 *
+	 * @param {"baseline","super","sub","inherit"} v
+	 */
+	set verticalAlign( v ){
+		this._element._verticalAlign.computed = v;
+	}
+
+	/**
+	 *
+	 * @return {"baseline","super","sub","inherit"}
+	 */
+	get verticalAlign() { return this._element._verticalAlign.computed; }
+
+	/** Border Properties ----------------------------------------------------------------------------------------------*/
+
+	/**
+	 * Set the units of borderRadius
+	 * @param {string|"rem"} v
+	 */
+	set borderRadiusUnits( v ) {
+
+		// @TODO:
+		this._element._borderRadius.units = v;
+
+	}
+
+	/**
+	 * Get the units of borderRadius
+	 * @returns {string}
+	 */
+	get borderRadiusUnits() { /* @TODO:computed units */ return this._element._borderRadius.units; }
+
+	/**
+	 *
+	 * @param {Vector4|Array.<Number>|Number|string} v
+	 */
+	set borderRadius( v ) {
+
+		this._element._borderRadius.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {Vector4}
+	 */
+	get borderRadius() { return this._element._borderRadius._computed; }
+
+	/**
+	 * Set the top left radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderTopLeftRadius( v ) {
+
+		this._element._borderRadius.computedTopLeft = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopLeftRadius() { return this._element._borderRadius.computedTopLeft; }
+
+
+	/**
+	 * Set the top right radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderTopRightRadius( v ) {
+
+		this._element._borderRadius.computedTopRight = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopRightRadius() { return this._element._borderWidth.computedTopRight; }
+
+	/**
+	 * Set the bottom right radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderBottomRightRadius( v ) {
+
+		this._element._borderRadius.computedBottomRight = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomRightRadius() { return this._element._borderWidth.computedBottomRight; }
+
+	/**
+	 * Set the bottom left radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderBottomLeftRadius( v ) {
+
+		this._element._borderRadius.computedBottomLeft = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomLeftRadius() { return this._element._borderWidth.computedBottomLeft; }
+
+	/**
+	 * Set the top left and top right radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderTopRadius( v ) {
+
+		this._element._borderRadius.computedTop = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopRadius() { return this._element._borderWidth.computedTop; }
+
+	/**
+	 * Set the top right and bottom right radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderRightRadius( v ) {
+
+		this._element._borderRadius.computedRight = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderRightRadius() { return this._element._borderRadius.computedRight; }
+
+	/**
+	 * Set the top left and bottom left radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderLeftRadius( v ) {
+
+		this._element._borderRadius.computedLeft = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderLeftRadius() { return this._element._borderRadius.computedLeft; }
+
+	/**
+	 * Set the bottom left and bottom right radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderBottomRadius( v ) {
+
+		this._element._borderRadius.computedBottom = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomRadius() { return this._element._borderRadius.computedBottom; }
+
+
+	/**
+	 * Set the units of borderWidth
+	 * @param {string|"rem"} v
+	 */
+	set borderWidthUnits( v ) {
+
+		// @TODO : computed and Computed units to be implemented
+		this._element._borderWidth.units = v;
+
+	}
+
+	/**
+	 * Get the units of borderWidth
+	 * @returns {string}
+	 */
+	get borderWidthUnits() { return this._element._borderWidth.units; }
+
+	/**
+	 *
+	 * @param {Vector4|Array.<Number>|Number|string} v
+	 */
+	set borderWidth( v ) {
+
+		this._element._borderWidth.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {Vector4}
+	 */
+	get borderWidth() { return this._element._borderWidth._computed; }
+
+	/**
+	 * Set the width of the top side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderTopWidth( v ) {
+
+		this._element._borderWidth.computedTop = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopWidth() { return this._element._borderWidth.computedTop; }
+
+	/**
+	 * Set the width of the right side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderRightWidth( v ) {
+
+		this._element._borderWidth.computedRight = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderRightWidth() { return this._element._borderWidth.computedRight; }
+
+	/**
+	 * Set the width of the bottom side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderBottomWidth( v ) {
+
+		this._element._borderWidth.computedBottom = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomWidth() { return this._element._borderWidth.computedBottom; }
+
+	/**
+	 * Set the width of the left side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderLeftWidth( v ) {
+
+		this._element._borderWidth.computedLeft = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderLeftWidth() { return this._element._borderWidth.computedLeft; }
+
+
+	/**
+	 *
+	 * @param {Color|Number|string} v
+	 */
+	set borderColor( v ) {
+
+		this._element._borderColor.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {Color}
+	 */
+	get borderColor() { return this._element._borderColor._computed; }
+
+	/**
+	 *
+	 * @param v
+	 */
+	set borderOpacity (v) {
+
+		this._element._borderOpacity.computed = v;
+
+	}
+
+	/**
+	 *
+	 * @return {*}
+	 */
+	get borderOpacity () { return this._element._borderOpacity._computed; }
+
+
+
+	/**
+	 *
+	 * @param value
+	 */
+	set computed( value ) {
+
+		// do update
+		// this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @return {Object.<string,any>}
+	 */
+	get computed() {
+
+		const output = {};
+		for ( const component of this._element._components ) {
+
+			output[component.id] = component.output;
+
+		}
+
+		return output;
+
+	}
+
+
+	dispose () {
+
+		this._element = null;
+
+	}
+
+
+}
diff --git a/src/elements/html/properties/StylePropertyWrapper.js b/src/elements/html/properties/StylePropertyWrapper.js
new file mode 100644
index 00000000..3882f801
--- /dev/null
+++ b/src/elements/html/properties/StylePropertyWrapper.js
@@ -0,0 +1,917 @@
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import { Color, Vector4 } from 'three';
+import MeshUIBaseElement from '../../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+
+/**
+ * Wrapper of properties to fit html naming and multiple inputs : inline & computed(css)
+ */
+export default class StylePropertyWrapper {
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	constructor( element ) {
+
+		/**
+		 *
+		 * @type {MeshUIBaseElement}
+		 * @private
+		 */
+		this._element = element;
+
+	}
+
+	/***********************************************************************************************************************
+	 * INLINE GETTERS - SETTERS
+	 **********************************************************************************************************************/
+
+	/** Box Properties ---------------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"border-box"|"content-box"} value
+	 */
+	set boxSizing( value ) {
+
+		this._element._boxSizing.inline = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"border-box"|"content-box"}
+	 */
+	get boxSizing() { return this._element._boxSizing._inline; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set width ( v ) {
+
+		this._element._width.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {*}
+	 */
+	get width () { return this._element._width._inline; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set height ( v ) {
+
+		this._element._height.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {*}
+	 */
+	get height () { return this._element._height._inline; }
+
+
+	/**
+	 *
+	 * @param {Vector4|Array.<number>|number|string} v
+	 */
+	set padding( v ) {
+
+		this._element._padding.inline = v;
+
+	}
+
+
+	/**
+	 *
+	 * @return {Vector4}
+	 */
+	get padding () { return this._element._padding._inline; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingTop ( v ) {
+
+		this._element._padding.top = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingTop () { return this._element._padding.top; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingRight (v) {
+
+		this._element._padding.right = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingRight () { return this._element._padding.right; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingBottom (v) {
+
+		this._element._padding.bottom = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingBottom () { return this._element._padding.bottom; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set paddingLeft ( v ) {
+
+		this._element._padding.left = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingLeft () { return this._element._padding.left; }
+
+	/**
+	 *
+	 * @param {Vector4|Array.<number>|number|string} v
+	 */
+	set margin( v ) {
+
+		this._element._margin.inline = v;
+
+	}
+
+
+	/**
+	 *
+	 * @return {Vector4}
+	 */
+	get margin () {
+		return this._element._margin._inline;
+	}
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginTop ( v ) {
+
+		this._element._margin.top = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginTop () { return this._element._margin.top; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginRight (v) {
+
+		this._element._margin.right = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginRight () { return this._element._margin.right; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginBottom (v) {
+
+		this._element._margin.bottom = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginBottom () { return this._element._margin.bottom; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set marginLeft ( v ) {
+
+		this._element._margin.left = v;
+
+	}
+
+	/** Display Properties -----------------------------------------------------*/
+
+
+	/**
+	 *
+	 * @param {"flex"|"none"} value
+	 */
+	set display ( value ) {
+
+		this._element._display.inline = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"flex"|"none"}
+	 */
+	get display() { return this._element._display._inline; }
+
+
+	/**
+	 *
+	 * @param {"visible"|"hidden"} v
+	 */
+	set overflow ( v ) {
+
+		this._element._overflow.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"visible"|"hidden"}
+	 */
+	get overflow () { return this._element._overflow._inline; }
+
+	/** Position Properties ----------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"static"|"absolute"} v
+	 */
+	set position ( v ) {
+
+		this._element._position.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"static"|"absolute"}
+	 */
+	get position () { return this._element._position._inline; }
+
+
+	/** Flex Properties --------------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"column"|"column-reverse"|"row"|"row-reverse"} value
+	 */
+	set flexDirection( value ) {
+
+		this._element._flexDirection.inline = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"column"|"column-reverse"|"row"|"row-reverse"}
+	 */
+	get flexDirection() { return this._element._flexDirection._inline; }
+
+	/**
+	 *
+	 * @param {"flex-start"|"center"|"flex-end"|"space-around"|"space-between"|"space-evenly"} value
+	 */
+	set justifyContent( value ) {
+
+		this._element._justifyContent.inline = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"flex-start"|"center"|"flex-end"|"space-around"|"space-between"|"space-evenly"}
+	 */
+	get justifyContent() { return this._element._justifyContent._inline; }
+
+	/**
+	 *
+	 * @param {"start"|"center"|"end"|"stretch"} value
+	 */
+	set alignItems ( value ) {
+
+		this._element._alignItems.inline = value;
+
+	}
+
+	/**
+	 *
+	 * @return {"start"|"center"|"end"|"stretch"}
+	 */
+	get alignItems() { return this._element._alignItems._inline; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set order (v) {
+
+		this._element._order.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get order () { return this._element._order._inline; }
+
+
+	/** Background Properties --------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {Color|number|string} v
+	 */
+	set backgroundColor( v ) {
+
+		this._element._backgroundColor.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {Color|number|string}
+	 */
+	get backgroundColor() { return this._element._backgroundColor._inline; }
+
+
+	set backgroundOpacity ( v ) {
+
+		this._element._backgroundOpacity.inline = v;
+
+	}
+
+	get backgroundOpacity () { return this._element._backgroundOpacity._inline; }
+
+	/**
+	 *
+	 * @param {Texture|string} v
+	 */
+	set backgroundImage ( v ) {
+
+		this._element._backgroundImage.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {Texture|string}
+	 */
+	get backgroundImage () { return this._element._backgroundImage._inline; }
+
+	/**
+	 *
+	 * @param {"cover"|"contain"|"stretch"} v
+	 */
+	set backgroundSize ( v ) {
+
+		this._element._backgroundSize.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"cover"|"contain"|"stretch"}
+	 */
+	get backgroundSize() { return this._element._backgroundSize._inline; }
+
+
+	/** Text Properties --------------------------------------------------------*/
+
+	/**
+	 *
+	 * @param {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"} v
+	 */
+	set whiteSpace ( v ) {
+
+		this._element._whiteSpace.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"normal"|"nowrap"|"pre"|"pre-line"|"pre-wrap"}
+	 */
+	get whiteSpace () { return this._element._whiteSpace._inline; }
+
+
+
+
+
+	/**
+	 *
+	 * @param {Color|number|string} v
+	 */
+	set color( v ) {
+
+		this._element._color.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {Color|number|string}
+	 */
+	get color () { return this._element._color._inline; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set opacity ( v ) {
+
+		this._element._fontOpacity.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get opacity () { return this._element._fontOpacity._inline; }
+
+
+
+
+	/**
+	 *
+	 * @param {"normal"|"italic"} v
+	 */
+	set fontStyle (v) {
+
+		this._element._fontStyle.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"normal"|"italic"}
+	 */
+	get fontStyle () { return this._element._fontStyle._inline; }
+
+
+	/**
+	 *
+	 * @param {100|200|300|400|500|600|700|800|900|"light"|"normal"|"bold"|"bolder"}  v
+	 */
+	set fontWeight ( v ) {
+
+		this._element._fontWeight.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {100|200|300|400|500|600|700|800|900|"light"|"normal"|"bold"|"bolder"}
+	 */
+	get fontWeight () { return this._element._fontWeight._inline; }
+
+	/**
+	 *
+	 * @param {"normal"|"none"} v
+	 */
+	set fontKerning ( v ) {
+
+		this._element._fontKerning.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"normal"|"none"}
+	 */
+	get fontKerning () { return this._element._fontKerning._inline; }
+
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set letterSpacing (v) {
+
+		this._element._letterSpacing.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get letterSpacing () { return this._element._letterSpacing._inline; }
+
+	/**
+	 *
+	 * @param {number} v
+	 */
+	set lineHeight ( v ) {
+
+		this._element._lineHeight.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get lineHeight () { return this._element._lineHeight._inline; }
+
+
+	/**
+	 *
+	 * @param {"left"| "right"|"center"|"justify"|"justify-left"|"justify-right"|"justify-center"} v
+	 */
+	set textAlign ( v ) {
+
+		this._element._textAlign.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {"left"| "right"|"center"|"justify"|"justify-left"|"justify-right"|"justify-center"}
+	 */
+	get textAlign() { return this._element._textAlign._inline; }
+
+
+	/** Border Properties ----------------------------------------------------------------------------------------------*/
+
+	/**
+	 * Set the units of borderRadius
+	 * @param {string|"rem"} v
+	 */
+	set borderRadiusUnits( v ) {
+
+		// @TODO:
+		this._element._borderRadius.units = v;
+
+	}
+
+	/**
+	 * Get the units of borderRadius
+	 * @returns {string}
+	 */
+	get borderRadiusUnits() { /* @TODO:inline units */ return this._element._borderRadius.units; }
+
+	/**
+	 *
+	 * @param {Vector4|Array.<Number>|Number|string} v
+	 */
+	set borderRadius( v ) {
+
+		this._element._borderRadius.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {Vector4}
+	 */
+	get borderRadius() { return this._element._borderRadius._inline; }
+
+	/**
+	 * Set the top left radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderTopLeftRadius( v ) {
+
+		this._element._borderRadius.topLeft = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopLeftRadius() { return this._element._borderRadius.topLeft; }
+
+
+	/**
+	 * Set the top right radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderTopRightRadius( v ) {
+
+		this._element._borderRadius.topRight = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopRightRadius() { return this._element._borderWidth.topRight; }
+
+	/**
+	 * Set the bottom right radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderBottomRightRadius( v ) {
+
+		this._element._borderRadius.bottomRight = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomRightRadius() { return this._element._borderWidth.bottomRight; }
+
+	/**
+	 * Set the bottom left radius only
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderBottomLeftRadius( v ) {
+
+		this._element._borderRadius.bottomLeft = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomLeftRadius() { return this._element._borderWidth.bottomLeft; }
+
+	/**
+	 * Set the top left and top right radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderTopRadius( v ) {
+
+		this._element._borderRadius.top = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopRadius() { return this._element._borderWidth.top; }
+
+	/**
+	 * Set the top right and bottom right radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderRightRadius( v ) {
+
+		this._element._borderRadius.right = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderRightRadius() { return this._element._borderRadius.right; }
+
+	/**
+	 * Set the top left and bottom left radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderLeftRadius( v ) {
+
+		this._element._borderRadius.left = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderLeftRadius() { return this._element._borderRadius.left; }
+
+	/**
+	 * Set the bottom left and bottom right radiuses
+	 * @param {Number} v in units of `borderRadiusUnits`
+	 */
+	set borderBottomRadius( v ) {
+
+		this._element._borderRadius.bottom = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomRadius() { return this._element._borderRadius.bottom; }
+
+
+	/**
+	 * Set the units of borderWidth
+	 * @param {string|"rem"} v
+	 */
+	set borderWidthUnits( v ) {
+
+		// @TODO : Inline and Computed units to be implemented
+		this._element._borderWidth.units = v;
+
+	}
+
+	/**
+	 * Get the units of borderWidth
+	 * @returns {string}
+	 */
+	get borderWidthUnits() { return this._element._borderWidth.units; }
+
+	/**
+	 *
+	 * @param {Vector4|Array.<Number>|Number|string} v
+	 */
+	set borderWidth( v ) {
+
+		this._element._borderWidth.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {Vector4}
+	 */
+	get borderWidth() { return this._element._borderWidth._inline; }
+
+	/**
+	 * Set the width of the top side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderTopWidth( v ) {
+
+		this._element._borderWidth.top = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderTopWidth() { return this._element._borderWidth.top; }
+
+	/**
+	 * Set the width of the right side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderRightWidth( v ) {
+
+		this._element._borderWidth.right = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderRightWidth() { return this._element._borderWidth.right; }
+
+	/**
+	 * Set the width of the bottom side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderBottomWidth( v ) {
+
+		this._element._borderWidth.bottom = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderBottomWidth() { return this._element._borderWidth.bottom; }
+
+	/**
+	 * Set the width of the left side border only
+	 * @param {Number} v in units of `borderWidthUnits`
+	 */
+	set borderLeftWidth( v ) {
+
+		this._element._borderWidth.left = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get borderLeftWidth() { return this._element._borderWidth.left; }
+
+
+	/**
+	 *
+	 * @param {Color|Number|string} v
+	 */
+	set borderColor( v ) {
+
+		this._element._borderColor.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @returns {Color}
+	 */
+	get borderColor() { return this._element._borderColor._inline; }
+
+	/**
+	 *
+	 * @param v
+	 */
+	set borderOpacity (v) {
+
+		this._element._borderOpacity.inline = v;
+
+	}
+
+	/**
+	 *
+	 * @return {*}
+	 */
+	get borderOpacity () { return this._element._borderOpacity._inline; }
+
+
+
+	/**
+	 *
+	 * @param value
+	 */
+	set computed( value ) {
+
+		// do update
+		// this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @return {Object.<string,any>}
+	 */
+	get computed() {
+
+		const output = {};
+		for ( const component of this._element._components ) {
+
+			output[component.id] = component.output;
+
+		}
+
+		return output;
+
+	}
+
+
+	dispose () {
+
+		this._element = null;
+
+	}
+
+
+}
diff --git a/src/font/FontFamily.js b/src/font/FontFamily.js
index b0a548f8..11ca7ae6 100644
--- a/src/font/FontFamily.js
+++ b/src/font/FontFamily.js
@@ -44,7 +44,7 @@ export default class FontFamily extends EventDispatcher {
 
 	/**
 	 *
-	 * @param {string} weight
+	 * @param {string|number} weight
 	 * @param {string} style
 	 * @param {string|Object} json
 	 * @param {string|Texture} texture
@@ -115,7 +115,7 @@ export default class FontFamily extends EventDispatcher {
 
 	/**
 	 *
-	 * @param {string} weight
+	 * @param {string|number} weight
 	 * @param {string} style
 	 * @returns {FontVariant|null}
 	 */
diff --git a/src/font/FontLibrary.js b/src/font/FontLibrary.js
index 26c54152..2cd8fc7b 100644
--- a/src/font/FontLibrary.js
+++ b/src/font/FontLibrary.js
@@ -15,7 +15,7 @@ const _fontFamilies = {};
  * @param {FontFamily} fontFamily
  * @returns {Promise<unknown>}
  */
-function prepare( fontFamily ) {
+const prepare = function ( fontFamily ) {
 
 	/**
 	 *
@@ -89,7 +89,7 @@ function prepare( fontFamily ) {
  * @param {string} name
  * @returns {FontFamily}
  */
-function addFontFamily( name ) {
+const addFontFamily = function ( name ) {
 
 	if ( _fontFamilies[ name ] ) {
 		console.error( `FontLibrary::addFontFamily - Font('${name}') is already registered` );
@@ -106,7 +106,7 @@ function addFontFamily( name ) {
  * @param {string} name
  * @returns {FontFamily}
  */
-function getFontFamily( name ) {
+const getFontFamily = function( name ) {
 
 	return _fontFamilies[ name ];
 
@@ -117,24 +117,12 @@ function getFontFamily( name ) {
  *
  * @param { (fontVariant:FontVariant, character:string ) => string|null } handler
  */
-function setMissingCharacterHandler( handler ) {
+const setMissingCharacterHandler = function ( handler ) {
 
 	_missingCharacterHandler = handler;
 
 }
 
-//
-
-const FontLibrary = {
-	addFontFamily,
-	getFontFamily,
-	prepare,
-	setMissingCharacterHandler,
-	missingCharacter
-};
-
-export default FontLibrary;
-
 /**
  *
  * @type { (fontVariant:FontVariant, character:string ) => string|null }
@@ -164,3 +152,14 @@ function missingCharacter( fontVariant, character ) {
 }
 
 
+//
+
+const FontLibrary = {
+	addFontFamily,
+	getFontFamily,
+	prepare,
+	setMissingCharacterHandler,
+	missingCharacter
+};
+
+export default FontLibrary;
diff --git a/src/font/FontVariant.js b/src/font/FontVariant.js
index f02248ca..4cf0e85d 100644
--- a/src/font/FontVariant.js
+++ b/src/font/FontVariant.js
@@ -1,19 +1,20 @@
 import { EventDispatcher } from 'three';
-import FontLibrary from './FontLibrary';
+
 
 // JSDoc related imports
 /* eslint-disable no-unused-vars */
-import TypographicFont from './TypographicFont';
-import InlineGlyph from './InlineGlyph';
-import MSDFTypographicGlyph from './msdf/MSDFTypographicGlyph';
 import { BufferGeometry, Material, ShaderMaterial, Texture } from 'three';
+import InlineGlyph from './InlineGlyph';
+import MeshUIBaseElement from './../core/elements/MeshUIBaseElement';
+import TypographicFont from './TypographicFont';
+import TypographicGlyph from './TypographicGlyph';
 /* eslint-enable no-unused-vars */
 
 
 /**
  * @abstract
  */
-export default class FontVariant extends EventDispatcher {
+class FontVariant extends EventDispatcher {
 
 	/**
 	 *
@@ -115,16 +116,17 @@ export default class FontVariant extends EventDispatcher {
 	/**
 	 *
 	 * @param {string} character
-	 * @returns {MSDFTypographicGlyph}
+	 * @returns {TypographicGlyph}
 	 */
 	getTypographicGlyph( character ) {
 
 		let typographicGlyph = this._chars[ character ];
 		if ( typographicGlyph ) return typographicGlyph;
 
+		// Auto generate whitespace chars
 		if ( character.match( /\s/ ) ) return this._chars[ " " ];
 
-		const fallbackCharacter = FontLibrary.missingCharacter( this, character );
+		const fallbackCharacter = this._getFallbackCharacter( character );
 		if( fallbackCharacter ) {
 
 			typographicGlyph = this._chars[ fallbackCharacter ];
@@ -135,17 +137,28 @@ export default class FontVariant extends EventDispatcher {
 		throw Error( `FontVariant('${this.id}')::getTypographicGlyph() - character('${character}') and/or fallback character were not found in provided msdf charset.` );
 	}
 
-	/* eslint-disable no-unused-vars */
 
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @abstract
+	 * @protected
+	 * @param {string} missingChar
+	 * @returns {string|null}
+	 */
+	_getFallbackCharacter( missingChar ) {  /* eslint-enable no-unused-vars */
+		throw new Error(`FontVariant(${typeof this})::_getFallbackCharacter() is abstract and should therefore be overridden.`);
+	}
 
+	/* eslint-disable no-unused-vars */
 	/**
 	 * Convert an InlineCharacter to a geometry
 	 *
 	 * @abstract
 	 * @param {InlineGlyph} inline
+	 * @param {MeshUIBaseElement} element
 	 * @returns {BufferGeometry|Array.<BufferGeometry>}
 	 */
-	getGeometricGlyph( inline, segments = 1 ) {
+	getGeometricGlyph( inline, element ) {
 
 		throw new Error(`FontVariant(${typeof this})::getGeometryCharacter() is abstract and should therefore be overridden.`);
 
@@ -201,6 +214,18 @@ export default class FontVariant extends EventDispatcher {
 
 	}
 
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @abstract
+	 * @param element
+	 * @internal
+	 */
+	_alterElementProperties( element ) {  /* eslint-enable no-unused-vars */
+
+		throw new Error(`FontVariant(${typeof this})::_alterElementProperties() is abstract and should therefore be overridden.`);
+
+	}
+
 	/**
 	 *
 	 * @abstract
@@ -237,3 +262,9 @@ function _setReady( fontVariant ) {
 
 }
 
+/**
+ * @typedef {Object.<string,number>} KerningPairs
+ *
+ */
+
+export default FontVariant;
diff --git a/src/font/InlineGlyph.js b/src/font/InlineGlyph.js
index 4f758aa7..068f1564 100644
--- a/src/font/InlineGlyph.js
+++ b/src/font/InlineGlyph.js
@@ -1,4 +1,4 @@
-import Inline from '../components/core/Inline';
+import Inline from '../core/elements/glyphs/Inline';
 
 //JSDoc related imports
 /* eslint-disable no-unused-vars */
@@ -75,10 +75,12 @@ export default class InlineGlyph extends Inline {
 	 */
 	get anchor() {
 
-		const lineHeight = this._typographic.font.lineHeight;
-		const lineBase = this._typographic.font.lineBase;
+		// const lineHeight = this._typographic.font.lineHeight;
+		// const lineBase = this._typographic.font.lineBase;
+		//
+		// return ( ( this._typographic.yoffset + this._typographic.height - lineBase ) * this._fontSize ) / lineHeight;
 
-		return ( ( this._typographic.yoffset + this._typographic.height - lineBase ) * this._fontSize ) / lineHeight;
+		return this.yoffset;
 
 	}
 
diff --git a/src/font/TypographicGlyph.js b/src/font/TypographicGlyph.js
index 6005acdd..a77c820a 100644
--- a/src/font/TypographicGlyph.js
+++ b/src/font/TypographicGlyph.js
@@ -112,6 +112,18 @@ export default class TypographicGlyph {
 
 	}
 
+	/**
+	 *
+	 * @abstract
+	 * @param {string} otherChar
+	 * @returns {TypographicGlyph}
+	 */
+	/* eslint-disable no-unused-vars */ clone( otherChar ) { /* eslint-enable no-unused-vars */
+
+		throw new Error("Abstract... Need to be implemented");
+
+	}
+
 	/**
 	 *
 	 * @abstract
diff --git a/src/font/msdf/MSDFFontVariant.js b/src/font/msdf/MSDFFontVariant.js
index d5812023..b79f2bc2 100644
--- a/src/font/msdf/MSDFFontVariant.js
+++ b/src/font/msdf/MSDFFontVariant.js
@@ -1,13 +1,14 @@
 import { FileLoader, LinearFilter, Texture, TextureLoader, Vector2 } from 'three';
-import FontVariant from '../FontVariant';
 import MSDFTypographicFont from './MSDFTypographicFont';
 import MSDFTypographicGlyph from './MSDFTypographicGlyph';
 import MSDFGeometricGlyph from './MSDFGeometricGlyph';
 import MSDFFontMaterial from './materials/MSDFFontMaterial';
+import FontVariant from '../FontVariant';
 
 //JSDoc related imports
 /* eslint-disable no-unused-vars */
-import MSDFInlineGlyph from './MSDFInlineGlyph';
+import InlineGlyph from './../InlineGlyph';
+import FontLibrary from '../FontLibrary';
 /* eslint-enable no-unused-vars */
 
 /**
@@ -34,12 +35,17 @@ export default class MSDFFontVariant extends FontVariant {
 
 		if ( texture instanceof Texture ) {
 
+			this._texture = texture;
 			this._buildTexture( texture );
 
-		} else {
+		} else if( typeof(texture) === 'string' || texture instanceof String ){
 
 			_loadTexture( this, texture );
 
+		} else {
+
+			throw new Error(`ThreeMeshUI::MSDFVariant provided 'texture' parameter is '${typeof texture}'. Only Texture and String allowed.`)
+
 		}
 
 		this._defaultMaterialClass = MSDFFontMaterial;
@@ -92,9 +98,17 @@ export default class MSDFFontVariant extends FontVariant {
 
 		this._font = new MSDFTypographicFont( json );
 
+		/**
+		 *
+		 * @type {import('../FontVariant').KerningPairs}
+		 * @private
+		 */
 		this._kernings = this._buildKerningPairs( json );
 		this._chars = this._buildCharacters( json );
+
 		this._chars[ " " ] = this._buildCharacterWhite( json );
+		this._chars[ "\n" ] = this._buildCharacterWhite( json, '\n' , 0.001, 1);
+		this._chars[ "\t" ] = this._buildCharacterWhite( json, '\t' , 4, 1);
 
 		this._size = json.info.size;
 		this._lineHeight = json.common.lineHeight;
@@ -107,6 +121,7 @@ export default class MSDFFontVariant extends FontVariant {
 		// "I would suggest precomputing unitRange as a uniform variable instead of pxRange for better performance."
 		this._unitRange = new Vector2(this._distanceRange, this._distanceRange)
 			.divide( new Vector2( json.common.scaleW, json.common.scaleH ) );
+
 	}
 
 	/**
@@ -124,14 +139,26 @@ export default class MSDFFontVariant extends FontVariant {
 
 	}
 
+	/**
+	 * @abstract
+	 * @protected
+	 * @param {string} missingChar
+	 * @returns {string|null}
+	 */
+	_getFallbackCharacter( missingChar ) {
+		return FontLibrary.missingCharacter( this, missingChar );
+	}
+
 	/**
 	 *
-	 * @param {MSDFInlineGlyph} inline
+	 * @override
+	 * @param {import('./../InlineGlyph').default|import('./MSDFInlineGlyph').default} inline
+	 * @param {import('./../../core/elements/MeshUIBaseElement').default} element
 	 * @returns {MSDFGeometricGlyph}
 	 */
-	getGeometricGlyph( inline, segments = 1 ) {
+	getGeometricGlyph( inline, element ) {
 
-		return new MSDFGeometricGlyph( inline, segments );
+		return new MSDFGeometricGlyph( inline, element );
 
 	}
 
@@ -143,7 +170,7 @@ export default class MSDFFontVariant extends FontVariant {
 	 */
 	_readyCondition() {
 
-		return this._chars && this._texture;
+		return this._chars && this._texture && this._texture.image;
 
 	}
 
@@ -152,8 +179,7 @@ export default class MSDFFontVariant extends FontVariant {
 	 * @see src/font/msdf/FontVariantMSDF.js for an implementation
 	 *
 	 * @param {MSDFJson} json
-	 *
-	 * @returns {Object.<string, number>}
+	 * @returns {import('../FontVariant').KerningPairs}
 	 * @private
 	 */
 	_buildKerningPairs( json ) {
@@ -205,17 +231,28 @@ export default class MSDFFontVariant extends FontVariant {
 	/**
 	 *
 	 * @param {MSDFJson} json
+	 * @param char
+	 * @param scaleX
+	 * @param scaleY
 	 * @private
 	 */
-	_buildCharacterWhite( json ) {
+	_buildCharacterWhite( json, char = " ", scaleX = 1, scaleY = 1 ) {
 		return new MSDFTypographicGlyph( this._font,
 			{
-				char: ' ',
-				width: json.info.size / 3,
-				height: json.info.size * 0.7,
+				char,
+				width: (json.info.size / 3)*scaleX,
+				height: (json.info.size * 0.7)*scaleY,
 			});
 	}
 
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @private
+	 */
+	_alterElementProperties( element ) { /* eslint-enable no-unused-vars */ }
 }
 
 /***********************************************************************************************************************
@@ -264,7 +301,6 @@ function _loadTexture( fontVariant, textureUrl ) {
  * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
  **********************************************************************************************************************/
 
-
 /**
  * @typedef {Object} MSDFJson
  *
@@ -333,7 +369,8 @@ function _loadTexture( fontVariant, textureUrl ) {
  * @property {number} xadvance How much the current position should be advanced after drawing the character.
  * @property {string} page The texture page where the character image is found.
  * @property {number} chnl The texture channel where the character image is found (1 = blue, 2 = green, 4 = red, 8 = alpha, 15 = all channels).
- */
+ * @property {Object} [uv]
+ * /
 
 
 
diff --git a/src/font/msdf/MSDFGeometricGlyph.js b/src/font/msdf/MSDFGeometricGlyph.js
index ffb0878a..db561212 100644
--- a/src/font/msdf/MSDFGeometricGlyph.js
+++ b/src/font/msdf/MSDFGeometricGlyph.js
@@ -1,17 +1,19 @@
-import { BufferAttribute, PlaneBufferGeometry } from 'three';
+import { BufferAttribute, PlaneGeometry } from 'three';
 
 //JSDoc related imports
 /* eslint-disable no-unused-vars */
+import MeshUIBaseElement from './../../core/elements/MeshUIBaseElement';
 import MSDFInlineGlyph from './MSDFInlineGlyph';
 /* eslint-enable no-unused-vars */
 
-export default class MSDFGeometricGlyph extends PlaneBufferGeometry {
+export default class MSDFGeometricGlyph extends PlaneGeometry {
 
 	/**
 	 *
 	 * @param {MSDFInlineGlyph} inline
+	 * @param {MeshUIBaseElement} element
 	 */
-	constructor( inline, segments = 1 ) {
+	constructor( inline, element ) {
 
 
 		// default w & h segments
@@ -20,8 +22,10 @@ export default class MSDFGeometricGlyph extends PlaneBufferGeometry {
 		// If charOBJ, try to distribute segments proportionally
 		const typographicFontSize = inline.typographic.font.size;
 
-		wS = Math.ceil((inline.typographic.width / typographicFontSize) * segments);
-		hS = Math.ceil((inline.typographic.height / typographicFontSize) * segments);
+		const segments = element._segments.value;
+
+		wS = Math.ceil((inline.typographic.width / typographicFontSize) * segments );
+		hS = Math.ceil((inline.typographic.height / typographicFontSize) * segments );
 
 		super( inline.width, inline.height, wS, hS );
 
@@ -43,6 +47,12 @@ export default class MSDFGeometricGlyph extends PlaneBufferGeometry {
 
 		}
 
+		this.name = "GlyphGeometry";
+		// Demo alter geometry
+		// const maxOffset = inline.fontSize / 10;
+		// this.translate(0 , -maxOffset + Math.random() * maxOffset*2, 0 )
+		// this.rotateZ(-0.1 + 0.2 * Math.random() )
+
 	}
 
 	/**
@@ -108,7 +118,7 @@ export default class MSDFGeometricGlyph extends PlaneBufferGeometry {
 		// @TODO : Evaluate this as being a property. It can wait until splitGeometry
 		this.translate(
 			inline.width / 2,
-			( inline.height / 2 ) - inline.anchor,
+			-inline.height/2,
 			0
 		);
 
diff --git a/src/font/msdf/MSDFTypographicGlyph.js b/src/font/msdf/MSDFTypographicGlyph.js
index 647457fc..5f46a67b 100644
--- a/src/font/msdf/MSDFTypographicGlyph.js
+++ b/src/font/msdf/MSDFTypographicGlyph.js
@@ -7,6 +7,9 @@ import MSDFTypographicFont from './MSDFTypographicFont';
 /* eslint-enable no-unused-vars */
 
 
+/**
+ * @property {MSDFTypographicFont} _font
+ */
 export default class MSDFTypographicGlyph extends TypographicGlyph {
 
 	/**
@@ -15,7 +18,7 @@ export default class MSDFTypographicGlyph extends TypographicGlyph {
 	 */
 	constructor( fontDescription, characterData ) {
 
-		super(fontDescription);
+		super( fontDescription );
 
 		this._char = characterData.char;
 		this._width = characterData.width;
@@ -26,9 +29,9 @@ export default class MSDFTypographicGlyph extends TypographicGlyph {
 		this._yoffset = characterData.yoffset ? characterData.yoffset : 0;
 
 		// Msdf requires uvs
-		this._uv = null;
+		this._uv = characterData.uv ? characterData.uv : null;
 
-		if( !isNaN( characterData.x ) ) {
+		if ( !isNaN( characterData.x ) ) {
 			// transform absolute pixel values into uv values [0,1]
 			this._uv = {
 				left: characterData.x / fontDescription.textureWidth,
@@ -50,6 +53,28 @@ export default class MSDFTypographicGlyph extends TypographicGlyph {
 
 	}
 
+	/**
+	 * @override
+	 * @param {string} otherChar
+	 * @returns {MSDFTypographicGlyph}
+	 */
+	clone( otherChar ) {
+
+		return new MSDFTypographicGlyph( this._font, {
+			char: otherChar,
+			width: this._width,
+			height: this._heigth,
+			xadvance: this._xadvance,
+			xoffset: this._xoffset,
+			yoffset: this._yoffset,
+
+			// Msdf requires uvs
+			uv: null
+		} );
+
+	}
+
+
 	/**
 	 * @override
 	 * @returns {MSDFInlineGlyph}
diff --git a/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl.js b/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl.js
index b4c5de47..4c23ca30 100644
--- a/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl.js
+++ b/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.fragment.glsl.js
@@ -1,4 +1,8 @@
-export default /* glsl */`
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
 	float alpha;
 #ifdef NO_RGSS
 
@@ -36,4 +40,6 @@ export default /* glsl */`
 #endif
 
 	diffuseColor.a *= alpha;
-`
+`;
+
+export default program;
diff --git a/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl.js b/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl.js
index 39562ed2..8ee9dfbb 100644
--- a/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl.js
+++ b/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.fragment.glsl.js
@@ -1,4 +1,8 @@
-export default /* glsl */`
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
 varying vec2 vUvG;
 uniform sampler2D glyphMap;
 uniform vec2 unitRange;
@@ -22,3 +26,5 @@ float tap(vec2 offsetUV) {
 	return alpha;
 }
 `;
+
+export default program;
diff --git a/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl.js b/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl.js
index 9346a4b4..54937def 100644
--- a/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl.js
+++ b/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.pars.vertex.glsl.js
@@ -1,4 +1,10 @@
-export default /* glsl */`
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
 attribute vec2 uvG;
 varying vec2 vUvG;
-`
+`;
+
+export default program;
diff --git a/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl.js b/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl.js
index e130cb3c..7bfcecc3 100644
--- a/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl.js
+++ b/src/font/msdf/renderers/ShaderChunks/msdf-alphaglyph.vertex.glsl.js
@@ -1,3 +1,9 @@
-export default /* glsl */`
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */ `
 vUvG = uvG;
-`
+`;
+
+export default program;
diff --git a/src/font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl.js b/src/font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl.js
index a789d0fc..ee14b4d7 100644
--- a/src/font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl.js
+++ b/src/font/msdf/renderers/ShaderChunks/msdf-offsetglyph.vertex.glsl.js
@@ -1,3 +1,9 @@
-export default /* glsl */`
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
 gl_Position.z -= 0.00001;
-`
+`;
+
+export default program;
diff --git a/src/font/msdf/utils/MSDFFontMaterialUtils.js b/src/font/msdf/utils/MSDFFontMaterialUtils.js
index 7d615ad4..3f6e3a79 100644
--- a/src/font/msdf/utils/MSDFFontMaterialUtils.js
+++ b/src/font/msdf/utils/MSDFFontMaterialUtils.js
@@ -232,7 +232,7 @@ const _fontToGlyphMapTransformer = function( fontMaterial, materialProperty, val
  */
 const _RGSSTransformer = function( fontMaterial, materialProperty, value){
 
-	if ( !value ) {
+	if ( value && value !== 'antialiased' ) {
 
 		fontMaterial.defines['NO_RGSS'] = '';
 
@@ -252,12 +252,12 @@ const _RGSSTransformer = function( fontMaterial, materialProperty, value){
  * @type {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
  */
 const mediationDefinitions = {
-	alphaTest: { m: 'alphaTest', t: alphaTestTransformer },
-	_side: { m: 'side' },
-	// side: { m: 'side' },
-	_font: { m: "glyphMap", t: _fontToGlyphMapTransformer },
-	fontColor: { m: 'color' },
+	clippingPlanes: { m: 'clippingPlanes' },
+	fontAlphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+	fontSide: { m: 'side' },
+	font: { m: "glyphMap", t: _fontToGlyphMapTransformer },
+	color: { m: 'color' },
 	fontOpacity: { m: 'opacity' },
-	fontSupersampling: { m: 'NO_RGSS', t: _RGSSTransformer },
+	fontSmooth: { m: 'NO_RGSS', t: _RGSSTransformer },
 	invertAlpha: { m: 'INVERT_ALPHA', t: toPreprocessorTriggerTransformer },
 }
diff --git a/src/frame/Frame.js b/src/frame/Frame.js
index b7183d98..cb4ff0d1 100644
--- a/src/frame/Frame.js
+++ b/src/frame/Frame.js
@@ -1,24 +1,31 @@
-import { BufferAttribute, PlaneBufferGeometry } from 'three';
+import { BufferAttribute, PlaneGeometry } from 'three';
 import { Mesh } from 'three';
 
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
 /**
  * Returns a basic plane mesh.
  */
 export default class Frame extends Mesh {
 
-	constructor( material ) {
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	constructor( element ) {
 
-		const geometry = new PlaneBufferGeometry();
+		const geometry = new PlaneGeometry( 1, 1, element._segments.value, element._segments.value );
 
-		// Add uv for borders computations by copying uv
-		geometry.setAttribute('uvB', new BufferAttribute(
-			new Float32Array(
-				geometry.getAttribute('uv').array
-			), 2)).name = 'uvB';
+		// Add additional uv for borders computations by copying initial uv
+		const uvB = new BufferAttribute( new Float32Array( geometry.getAttribute('uv').array ), 2);
+		geometry.setAttribute('uvB', uvB ).name = 'uvB';
 
-		super( geometry, material );
+		super( geometry, element.backgroundMaterial );
 
-		this.name = 'MeshUI-Frame';
+		this.name = 'UIBackgroundBox';
 
 	}
 
diff --git a/src/frame/materials/FrameMaterial.js b/src/frame/materials/FrameMaterial.js
index a5a018cc..fea35a12 100644
--- a/src/frame/materials/FrameMaterial.js
+++ b/src/frame/materials/FrameMaterial.js
@@ -1,4 +1,4 @@
-import { Color, FrontSide, ShaderMaterial, Vector2, Vector4 } from 'three';
+import { Color, FrontSide, ShaderMaterial, Vector2, Vector3, Vector4 } from 'three';
 import { fragmentShader, vertexShader } from '../renderers/ShaderLib/framematerial.glsl';
 import FrameMaterialUtils from '../utils/FrameMaterialUtils';
 
@@ -24,17 +24,18 @@ export default class FrameMaterial extends ShaderMaterial {
 				map: { value: null },
 				diffuse: { value: new Color(0xffffff) },
 				opacity: { value: 1.0 },
-				borderColor: { value: null },
+				borderColor: { value: new Color(0x000000) },
+				borderOpacity: { value: 0 },
 				borderRadius: { value: new Vector4(0,0,0,0) },
 				// Corners for customized radius not all starting on center [0.5,0.5];
 				// Corners will be generated from borderRadiuses
-				cornerTL: { value : new Vector2(0,0) },
-				cornerTR: { value : new Vector2(0,0) },
-				cornerBR: { value : new Vector2(0,0) },
+				cornerTL: { value : new Vector2(0,1) },
+				cornerTR: { value : new Vector2(1,1) },
+				cornerBR: { value : new Vector2(1,0) },
 				cornerBL: { value : new Vector2(0,0) },
 				borderWidth: { value: new Vector4(0,0,0,0) },
-				borderOpacity: { value: null },
-				frameSize: { value: new Vector2( 1, 1 ) },
+
+				frameSize: { value: new Vector3( 1, 1, 1 ) },
 				textureSize: { value: new Vector2( 1, 1 ) }
 			},
 			side: FrontSide,
diff --git a/src/frame/renderers/ShaderChunk/frame-background.fragment.glsl.js b/src/frame/renderers/ShaderChunk/frame-background.fragment.glsl.js
index e37f644b..5bb92290 100644
--- a/src/frame/renderers/ShaderChunk/frame-background.fragment.glsl.js
+++ b/src/frame/renderers/ShaderChunk/frame-background.fragment.glsl.js
@@ -1,8 +1,14 @@
-export default /* glsl */`
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
 #ifdef USE_MAP
 
 	vec4 textureSample = sampleTexture();
 	diffuseColor *= textureSample;
 
 #endif
-`
+`;
+
+export default program;
diff --git a/src/frame/renderers/ShaderChunk/frame-background.pars.fragment.glsl.js b/src/frame/renderers/ShaderChunk/frame-background.pars.fragment.glsl.js
index 243809dc..b8656b04 100644
--- a/src/frame/renderers/ShaderChunk/frame-background.pars.fragment.glsl.js
+++ b/src/frame/renderers/ShaderChunk/frame-background.pars.fragment.glsl.js
@@ -1,4 +1,8 @@
-export default /* glsl */`
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
 
 #ifdef USE_MAP
 
@@ -45,4 +49,6 @@ vec4 sampleTexture() {
 
 }
 #endif
-`
+`;
+
+export default program;
diff --git a/src/frame/renderers/ShaderChunk/frame-border.fragment.glsl.js b/src/frame/renderers/ShaderChunk/frame-border.fragment.glsl.js
index 1c031836..49986dbf 100644
--- a/src/frame/renderers/ShaderChunk/frame-border.fragment.glsl.js
+++ b/src/frame/renderers/ShaderChunk/frame-border.fragment.glsl.js
@@ -1,4 +1,8 @@
-export default /* glsl */`
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
 
 vec4 borderColor = vec4( borderColor, borderOpacity );
 
@@ -124,4 +128,6 @@ if( vUvB.x > cornerBR.x && vUvB.y < cornerBR.y ) {
 
 }
 
-`
+`;
+
+export default program;
diff --git a/src/frame/renderers/ShaderChunk/frame-border.pars.fragment.glsl.js b/src/frame/renderers/ShaderChunk/frame-border.pars.fragment.glsl.js
index c059cd1b..15bc498f 100644
--- a/src/frame/renderers/ShaderChunk/frame-border.pars.fragment.glsl.js
+++ b/src/frame/renderers/ShaderChunk/frame-border.pars.fragment.glsl.js
@@ -1,4 +1,8 @@
-export default /* glsl */`
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
 
 // borders sequences are : x:TOP, y:RIGHT, z:BOTTOM, w:LEFT
 uniform vec4 borderWidth;
@@ -26,4 +30,6 @@ float getEllipticFactor( vec2 uv, vec2 center, float radiusX, float radiusY )
 
 }
 
-`
+`;
+
+export default program;
diff --git a/src/frame/renderers/ShaderChunk/frame-border.pars.vertex.glsl.js b/src/frame/renderers/ShaderChunk/frame-border.pars.vertex.glsl.js
index db701457..40eeff2f 100644
--- a/src/frame/renderers/ShaderChunk/frame-border.pars.vertex.glsl.js
+++ b/src/frame/renderers/ShaderChunk/frame-border.pars.vertex.glsl.js
@@ -1,7 +1,13 @@
-export default /* glsl */`
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
 
 // FrameBorder vertex pars
 attribute vec2 uvB;
 varying vec2 vUvB;
 
-`
+`;
+
+export default program;
diff --git a/src/frame/renderers/ShaderChunk/frame-border.vertex.glsl.js b/src/frame/renderers/ShaderChunk/frame-border.vertex.glsl.js
index e288af84..1623c745 100644
--- a/src/frame/renderers/ShaderChunk/frame-border.vertex.glsl.js
+++ b/src/frame/renderers/ShaderChunk/frame-border.vertex.glsl.js
@@ -1,6 +1,12 @@
-export default /* glsl */`
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
 
 	// FrameBorder vertex shader
 	vUvB = uvB;
 
-`
+`;
+
+export default program;
diff --git a/src/frame/renderers/ShaderChunk/frame-common.pars.fragment.glsl.js b/src/frame/renderers/ShaderChunk/frame-common.pars.fragment.glsl.js
index 5b5b1dd4..48780426 100644
--- a/src/frame/renderers/ShaderChunk/frame-common.pars.fragment.glsl.js
+++ b/src/frame/renderers/ShaderChunk/frame-common.pars.fragment.glsl.js
@@ -1,7 +1,13 @@
-export default /* glsl */`
+/**
+ *
+ * @type {string}
+ */
+const program = /* glsl */`
 
 // To be removed - required for both border and background
-uniform vec2 frameSize;
+uniform vec3 frameSize;
 uniform vec2 textureSize;
 
-`
+`;
+
+export default program;
diff --git a/src/frame/renderers/ShaderLib/framematerial.glsl.js b/src/frame/renderers/ShaderLib/framematerial.glsl.js
index 5e06f9a0..7a3aa659 100644
--- a/src/frame/renderers/ShaderLib/framematerial.glsl.js
+++ b/src/frame/renderers/ShaderLib/framematerial.glsl.js
@@ -1,5 +1,10 @@
-// import { ShaderChunkUI } from 'three-mesh-ui';
-import { ShaderChunkUI } from '../../../renderers/shaders/ShaderChunkUI';
+import frameBorderParsVertexGlsl from '../ShaderChunk/frame-border.pars.vertex.glsl';
+import frameBorderVertexGlsl from '../ShaderChunk/frame-border.vertex.glsl';
+import frameBackgroundParsFragmentGlsl from '../ShaderChunk/frame-background.pars.fragment.glsl';
+import frameBorderParsFragmentGlsl from '../ShaderChunk/frame-border.pars.fragment.glsl';
+import frameCommonParsFragmentGlsl from '../ShaderChunk/frame-common.pars.fragment.glsl';
+import frameBackgroundFragmentGlsl from '../ShaderChunk/frame-background.fragment.glsl';
+import frameBorderFragmentGlsl from '../ShaderChunk/frame-border.fragment.glsl';
 
 export const vertexShader = /* glsl */`
 // Would be automatic on three materials and from USE_UV
@@ -7,7 +12,7 @@ export const vertexShader = /* glsl */`
 varying vec2 vUv;
 #endif
 
-${ShaderChunkUI.frame_border_pars_vertex}
+${frameBorderParsVertexGlsl}
 
 #include <clipping_planes_pars_vertex>
 
@@ -17,7 +22,7 @@ void main() {
 	vUv = uv;
 	#endif
 
-	${ShaderChunkUI.frame_border_vertex}
+	${frameBorderVertexGlsl}
 
 	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
 	gl_Position = projectionMatrix * mvPosition;
@@ -33,9 +38,13 @@ export const fragmentShader = /* glsl */`
 uniform vec3 diffuse;
 uniform float opacity;
 
-${ShaderChunkUI.frame_common_pars}
+#ifdef USE_ALPHATEST
+	uniform float alphaTest;
+#endif
+
+${frameCommonParsFragmentGlsl}
 
-${ShaderChunkUI.frame_border_pars_fragment}
+${frameBorderParsFragmentGlsl}
 
 
 #ifdef USE_MAP
@@ -43,7 +52,7 @@ varying vec2 vUv;
 uniform sampler2D map;
 #endif
 
-${ShaderChunkUI.frame_background_pars_fragment}
+${frameBackgroundParsFragmentGlsl}
 
 #include <clipping_planes_pars_fragment>
 
@@ -52,11 +61,15 @@ void main() {
 	vec4 diffuseColor = vec4( diffuse, opacity );
 
 	// map
-	${ShaderChunkUI.frame_background_fragment}
+	${frameBackgroundFragmentGlsl}
+
+	${frameBorderFragmentGlsl}
 
-	${ShaderChunkUI.frame_border_fragment}
+	#ifdef USE_ALPHATEST
 
-	if( diffuseColor.a < 0.02 ) discard;
+	if ( diffuseColor.a < alphaTest ) discard;
+
+	#endif
 
 	// output
 	gl_FragColor = diffuseColor;
diff --git a/src/frame/utils/FrameMaterialUtils.js b/src/frame/utils/FrameMaterialUtils.js
index f9c00914..2d1f92a3 100644
--- a/src/frame/utils/FrameMaterialUtils.js
+++ b/src/frame/utils/FrameMaterialUtils.js
@@ -1,10 +1,16 @@
-import { Vector2, Vector4 } from 'three';
+import { Vector2, Vector3, Vector4 } from 'three';
 
 //JSDoc related import
 /* eslint-disable no-unused-vars */
 import { Material, ShaderMaterial } from 'three';
-import { ShaderChunkUI } from '../../renderers/shaders/ShaderChunkUI';
 import { alphaTestTransformer, asPreprocessorValueTransformer, uniformOrUserDataTransformer } from '../../utils/mediator/transformers/MaterialTransformers';
+import frameBorderParsVertexGlsl from '../renderers/ShaderChunk/frame-border.pars.vertex.glsl';
+import frameBorderVertexGlsl from '../renderers/ShaderChunk/frame-border.vertex.glsl';
+import frameBackgroundParsFragmentGlsl from '../renderers/ShaderChunk/frame-background.pars.fragment.glsl';
+import frameBorderParsFragmentGlsl from '../renderers/ShaderChunk/frame-border.pars.fragment.glsl';
+import frameCommonParsFragmentGlsl from '../renderers/ShaderChunk/frame-common.pars.fragment.glsl';
+import frameBackgroundFragmentGlsl from '../renderers/ShaderChunk/frame-background.fragment.glsl';
+import frameBorderFragmentGlsl from '../renderers/ShaderChunk/frame-border.fragment.glsl';
 /* eslint-enable no-unused-vars */
 
 
@@ -53,14 +59,14 @@ export default class FrameMaterialUtils {
 		threeMaterial.userData.borderColor = { value: null };
 		threeMaterial.userData.borderRadius = { value: new Vector4(0,0,0,0) };
 		// Store corners based on borderRadiuses
-		threeMaterial.userData.cornerTL = { value : new Vector2(0,0) };
-		threeMaterial.userData.cornerTR = { value : new Vector2(0,0) };
-		threeMaterial.userData.cornerBR = { value : new Vector2(0,0) };
+		threeMaterial.userData.cornerTL = { value : new Vector2(0,1) };
+		threeMaterial.userData.cornerTR = { value : new Vector2(1,1) };
+		threeMaterial.userData.cornerBR = { value : new Vector2(1,0) };
 		threeMaterial.userData.cornerBL = { value : new Vector2(0,0) };
 
 		threeMaterial.userData.borderWidth = { value: new Vector4(0,0,0,0) };
 		threeMaterial.userData.borderOpacity = { value: null };
-		threeMaterial.userData.frameSize = { value: new Vector2( 1, 1 ) };
+		threeMaterial.userData.frameSize = { value: new Vector3( 1, 1, 1 ) };
 		threeMaterial.userData.textureSize = { value: new Vector2( 1, 1 ) };
 
 	}
@@ -103,13 +109,13 @@ export default class FrameMaterialUtils {
 	static injectVertexShaderChunks( shader ) {
 		shader.vertexShader = shader.vertexShader.replace(
 			'#include <uv_pars_vertex>',
-			'#include <uv_pars_vertex>\n' + ShaderChunkUI.frame_border_pars_vertex
+			'#include <uv_pars_vertex>\n' + frameBorderParsVertexGlsl
 		);
 
 		// vertex chunks
 		shader.vertexShader = shader.vertexShader.replace(
 			'#include <uv_vertex>',
-			'#include <uv_vertex>\n' + ShaderChunkUI.frame_border_vertex
+			'#include <uv_vertex>\n' + frameBorderVertexGlsl
 		)
 
 	}
@@ -121,31 +127,30 @@ export default class FrameMaterialUtils {
 	static injectFragmentShaderChunks( shader ) {
 		shader.fragmentShader = shader.fragmentShader.replace(
 			'#include <map_pars_fragment>',
-			'#include <map_pars_fragment>\n' + ShaderChunkUI.frame_background_pars_fragment
+			'#include <map_pars_fragment>\n' + frameBackgroundParsFragmentGlsl
 		)
 
 		shader.fragmentShader = shader.fragmentShader.replace(
 			'#include <map_pars_fragment>',
-			'#include <map_pars_fragment>\n' + ShaderChunkUI.frame_border_pars_fragment
+			'#include <map_pars_fragment>\n' + frameBorderParsFragmentGlsl
 		)
 
 		shader.fragmentShader = shader.fragmentShader.replace(
 			'#include <map_pars_fragment>',
-			'#include <map_pars_fragment>\n' + ShaderChunkUI.frame_common_pars
+			'#include <map_pars_fragment>\n' + frameCommonParsFragmentGlsl
 		)
 
 		// fragment chunks
 		shader.fragmentShader = shader.fragmentShader.replace(
 			'#include <map_fragment>',
-			ShaderChunkUI.frame_background_fragment
+			frameBackgroundFragmentGlsl
 		)
 
 		shader.fragmentShader = shader.fragmentShader.replace(
 			'#include <alphamap_fragment>',
-			ShaderChunkUI.frame_border_fragment+'\n#include <alphamap_fragment>'
+			frameBorderFragmentGlsl+'\n#include <alphamap_fragment>'
 		)
 
-
 	}
 
 }
@@ -164,50 +169,45 @@ const _backgroundSizeTransformer = function( target, property, value ) {
 
 }
 
-/**
- *
- * @param {*} target
- * @param {string} property
- * @param {*} value
- * @private
- */
-const _linkCornersOutput = function( target, property, value ) {
+// /**
+//  *
+//  * @type {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
+//  */
+// const _mediationDefinitions = {
+// 	alphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+// 	backgroundTexture: { m: 'map' },
+// 	backgroundColor: { m: 'color' },
+// 	backgroundOpacity: { m:'opacity' },
+// 	backgroundSize: { m: 'u_backgroundMapping', t: _backgroundSizeTransformer },
+// 	_borderWidthComponent: { m: 'borderWidth', t: _linkComponentOutput },
+// 	borderColor: { m: 'borderColor', t: uniformOrUserDataTransformer },
+// 	_borderRadiusComponent: { m: 'computedCorners', t: _linkCornersOutput },
+// 	borderOpacity: { m: 'borderOpacity', t: uniformOrUserDataTransformer },
+// 	size: { m: 'frameSize', t: uniformOrUserDataTransformer },
+// 	tSize: { m: 'textureSize', t: uniformOrUserDataTransformer }
+// }
 
-	uniformOrUserDataTransformer(target,'cornerTL', value._cornerTL);
-	uniformOrUserDataTransformer(target,'cornerTR', value._cornerTR);
-	uniformOrUserDataTransformer(target,'cornerBL', value._cornerBL);
-	uniformOrUserDataTransformer(target,'cornerBR', value._cornerBR);
-
-}
 
 /**
- *
- * @param {*} target
- * @param {string} property
- * @param {*} value
- * @private
- */
-const _linkComponentOutput = function( target, property, value ) {
-
-	uniformOrUserDataTransformer(target,property, value.output);
-
-}
-
-/**
- *
+ * 7xx
  * @type {Object.<{m:string, t?:(fontMaterial:Material|ShaderMaterial, materialProperty:string, value:any) => void}>}
  */
 const _mediationDefinitions = {
-	alphaTest: { m: 'alphaTest', t: alphaTestTransformer },
-	backgroundTexture: { m: 'map' },
+	clippingPlanes : {m: 'clippingPlanes'},
+	backgroundAlphaTest: { m: 'alphaTest', t: alphaTestTransformer },
+	backgroundSide: { m: 'side' },
+	// backgroundTexture: { m: 'map' },
+	backgroundImage: { m: 'map'},
 	backgroundColor: { m: 'color' },
 	backgroundOpacity: { m:'opacity' },
-	backgroundSize: { m: 'u_backgroundMapping', t: _backgroundSizeTransformer },
-	_borderWidthComponent: { m: 'borderWidth', t: _linkComponentOutput },
+	backgroundSize: { m: 'computedBackgroundSize', t: _backgroundSizeTransformer },
+	borderWidth: { m: 'borderWidth', t: uniformOrUserDataTransformer },
 	borderColor: { m: 'borderColor', t: uniformOrUserDataTransformer },
-	_borderRadiusComponent: { m: 'computedCorners', t: _linkCornersOutput },
+	cornerTL : { m: 'cornerTL', t: uniformOrUserDataTransformer },
+	cornerTR : { m: 'cornerTR', t: uniformOrUserDataTransformer },
+	cornerBR : { m: 'cornerBR', t: uniformOrUserDataTransformer },
+	cornerBL : { m: 'cornerBL', t: uniformOrUserDataTransformer },
 	borderOpacity: { m: 'borderOpacity', t: uniformOrUserDataTransformer },
 	size: { m: 'frameSize', t: uniformOrUserDataTransformer },
 	tSize: { m: 'textureSize', t: uniformOrUserDataTransformer }
 }
-
diff --git a/src/renderers/shaders/ShaderChunkUI.js b/src/renderers/shaders/ShaderChunkUI.js
index ea72bf0a..18ba80ca 100644
--- a/src/renderers/shaders/ShaderChunkUI.js
+++ b/src/renderers/shaders/ShaderChunkUI.js
@@ -13,18 +13,36 @@ import frameBackgroundFragmentGlsl from '../../frame/renderers/ShaderChunk/frame
 
 
 /* eslint-disable camelcase */
+
+/**
+ * @typedef {Object} ChunksUI
+ * @property msdf_alphaglyph_vertex {string}
+ * @property frame_border_fragment {string}
+ * @property frame_background_pars_fragment {string}
+ * @property frame_common_pars {string}
+ * @property msdf_alphaglyph_pars_vertex {string}
+ * @property frame_border_pars_fragment {string}
+ * @property msdf_offset_vertex {string}
+ * @property frame_border_pars_vertex {string}
+ * @property msdf_alphaglyph_pars_fragment {string}
+ * @property frame_border_vertex {string}
+ * @property frame_background_fragment {string}
+ * @property msdf_alphaglyph_fragment {string}
+ */
+
+
 export const ShaderChunkUI = {
-	msdf_alphaglyph_pars_vertex: msdfAlphaglyphParsVertexGlsl,
-	msdf_alphaglyph_vertex: msdfAlphaglyphVertexGlsl,
-	msdf_offset_vertex: msdfOffsetglyphVertexGlsl,
-	msdf_alphaglyph_pars_fragment: msdfAlphaglyphParsFragmentGlsl,
-	msdf_alphaglyph_fragment: msdfAlphaglyphFragmentGlsl,
-	frame_border_pars_vertex: frameBorderParsVertexGlsl,
-	frame_border_vertex: frameBorderVertexGlsl,
-	frame_common_pars: frameCommonParsFragmentGlsl,
-	frame_border_pars_fragment: frameBorderParsFragmentGlsl,
-	frame_border_fragment: frameBorderFragmentGlsl,
-	frame_background_pars_fragment: frameBackgroundParsFragmentGlsl,
-	frame_background_fragment: frameBackgroundFragmentGlsl,
+	msdfAlphaglyphParsVertexGlsl,
+	msdfAlphaglyphVertexGlsl,
+	msdfOffsetglyphVertexGlsl,
+	msdfAlphaglyphParsFragmentGlsl,
+	msdfAlphaglyphFragmentGlsl,
+	frameBorderParsVertexGlsl,
+	frameBorderVertexGlsl,
+	frameCommonParsFragmentGlsl,
+	frameBorderParsFragmentGlsl,
+	frameBorderFragmentGlsl,
+	frameBackgroundParsFragmentGlsl,
+	frameBackgroundFragmentGlsl,
 };
 /* eslint-enable camelcase */
diff --git a/src/three-mesh-ui.js b/src/three-mesh-ui.js
index 48735834..484a7af8 100644
--- a/src/three-mesh-ui.js
+++ b/src/three-mesh-ui.js
@@ -1,71 +1,71 @@
 /* global global */
 
-import Block from './components/Block.js';
-import Text from './components/Text.js';
-import InlineBlock from './components/InlineBlock.js';
-import Keyboard from './components/Keyboard.js';
 import UpdateManager from './components/core/UpdateManager.js';
 import FontLibrary from './font/FontLibrary.js';
-import * as TextAlign from './utils/inline-layout/TextAlign';
-import * as Whitespace from './utils/inline-layout/Whitespace';
-import * as JustifyContent from './utils/block-layout/JustifyContent';
-import * as AlignItems from './utils/block-layout/AlignItems';
-import * as ContentDirection from './utils/block-layout/ContentDirection';
-import MSDFFontMaterialUtils from './font/msdf/utils/MSDFFontMaterialUtils';
 import { ShaderChunkUI } from './renderers/shaders/ShaderChunkUI';
-import * as FontWeight from './utils/font/FontWeight';
-import * as FontStyle from './utils/font/FontStyle';
-import FontVariant from './font/FontVariant';
 import TypographicFont from './font/TypographicFont';
 import TypographicGlyph from './font/TypographicGlyph';
 import InlineGlyph from './font/InlineGlyph';
+import MSDFFontMaterialUtils from './font/msdf/utils/MSDFFontMaterialUtils';
+import * as DefaultValues from './core/DefaultValues';
+import MeshUIBaseElement from './core/elements/MeshUIBaseElement';
+import BlockElement from './elements/basic/BlockElement';
+import TextElement from './elements/basic/TextElement';
+import InlineElement from './elements/basic/InlineElement';
+import InlineBlockElement from './elements/basic/InlineBlockElement';
+import InheritableProperty from './core/properties/InheritableProperty';
+import BaseProperty from './core/properties/BaseProperty';
+import * as MaterialTransformers from './utils/mediator/transformers/MaterialTransformers';
+import Behavior from './utils/Behavior';
+import FontVariant from './font/FontVariant';
+
 
-const update = () => UpdateManager.update();
 
 
+const update = () => UpdateManager.update();
+
 const ThreeMeshUI = {
-	Block,
-	Text,
-	InlineBlock,
-	Keyboard,
+	Block: BlockElement,
+	Text : TextElement,
+	Inline: InlineElement,
+	InlineBlock : InlineBlockElement,
+	// Keyboard : KeyboardElement,
+	MeshUIBaseElement,
 	FontLibrary,
-	FontStyle,
-	FontWeight,
 	update,
-	TextAlign,
-	Whitespace,
-	JustifyContent,
-	AlignItems,
-	ContentDirection,
 	MSDFFontMaterialUtils,
 	ShaderChunkUI,
+	Behavior,
+	FontVariant,
+	DefaultValues
 };
 
 
 if ( typeof global !== 'undefined' ) global.ThreeMeshUI = ThreeMeshUI;
 
-
-export { Block };
-export { Text };
-export { InlineBlock };
-export { Keyboard };
+export { BlockElement as Block };
+export { TextElement as Text };
+export { InlineElement as Inline };
+export { InlineBlockElement as InlineBlock };
 export { FontLibrary };
-export { FontStyle };
-export { FontWeight };
 export { update };
-export { TextAlign };
-export { Whitespace };
-export { JustifyContent};
-export { AlignItems };
-export { ContentDirection };
 export { ShaderChunkUI };
 export { MSDFFontMaterialUtils };
-export { FontVariant }
 export { TypographicFont }
 export { TypographicGlyph }
 export { InlineGlyph }
+export { MeshUIBaseElement }
+export { DefaultValues }
+export { InheritableProperty }
+export { BaseProperty }
+export { MaterialTransformers }
+export { Behavior }
+export { FontVariant }
 
 export default ThreeMeshUI;
 
+console.warn("ThreeMeshUI v7.1.x - Three "+window.__THREE__)
+
+
 
 
diff --git a/src/utils/Behavior.js b/src/utils/Behavior.js
index b8a26716..e89a9b0b 100644
--- a/src/utils/Behavior.js
+++ b/src/utils/Behavior.js
@@ -1,14 +1,20 @@
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+
 export default class Behavior {
 
 	/**
 	 *
-	 * @param {MeshUIComponent} subject
+	 * @param {MeshUIBaseElement} subject
 	 */
 	constructor( subject ) {
 
 		/**
 		 *
-		 * @type {MeshUIComponent}
+		 * @type {MeshUIBaseElement}
 		 * @protected
 		 */
 		this._subject = subject;
@@ -26,6 +32,7 @@ export default class Behavior {
 
 	/**
 	 * @abstract
+	 * @returns {void}
 	 */
 	act() {
 
diff --git a/src/utils/Defaults.js b/src/utils/Defaults.js
deleted file mode 100644
index 154f0f7c..00000000
--- a/src/utils/Defaults.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Color, Vector4 } from 'three';
-import { START as justifyContent } from "./block-layout/JustifyContent";
-import { CENTER as alignItems } from "./block-layout/AlignItems";
-import { COLUMN as contentDirection } from './block-layout/ContentDirection';
-import { CENTER as textAlign } from './inline-layout/TextAlign';
-import { PRE_LINE as whiteSpace } from './inline-layout/Whitespace';
-import { NORMAL as fontWeight } from './font/FontWeight';
-import { NORMAL as fontStyle } from './font/FontStyle';
-
-
-/** List the default values of the lib components */
-export default {
-	container: null,
-	fontFamily: null,
-	fontSize: 0.05,
-	fontKerning: 'normal', // FontKerning would act like css : "none"|"normal"|"auto"("auto" not yet implemented)
-	fontStyle,
-	fontWeight,
-	bestFit: 'none',
-	offset: 0.01,
-	interLine: 0.01,
-	breakOn: '- ,.:?!\n',// added '\n' to also acts as friendly breaks when white-space:normal
-	whiteSpace,
-	contentDirection,
-	alignItems,
-	justifyContent,
-	fontTexture: null,
-	textAlign,
-	fontColor: new Color( 0xffffff ),
-	fontOpacity: 1,
-	fontPXRange: 4,
-	fontSupersampling: true,
-	borderRadius: new Vector4( 0.025,0.025,0.025, 0.025 ),
-	borderWidth: new Vector4( 0, 0, 0, 0 ),
-	borderColor: new Color( 'black' ),
-	borderOpacity: 1,
-	backgroundSize: "cover",
-	backgroundColor: new Color( 0x222222 ),
-	backgroundWhiteColor: new Color( 0xffffff ),
-	backgroundOpacity: 0.8,
-	backgroundOpaqueOpacity: 1.0,
-	// this default value is a function to avoid initialization issues (see issue #126)
-	// backgroundTexture: makeBackgroundTexture,
-	backgroundTexture: null,
-	hiddenOverflow: false,
-	letterSpacing: 0
-};
diff --git a/src/utils/Keymaps.js b/src/utils/Keymaps.js
deleted file mode 100644
index caaf57e6..00000000
--- a/src/utils/Keymaps.js
+++ /dev/null
@@ -1,724 +0,0 @@
-/**
-
-Contains key maps for the Keyboard component.
-Most languages need a specific keyboard. Therefore, Keyboard takes a language attribute
-and if not passed tries to detect the language. If not found, it uses the basic QZERTY layout.
-
- */
-export default {
-
-	fr:
-		[
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'p', upperCase: 'P' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'm', upperCase: 'M' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	///////////////////////////////////////////////////////////
-
-	eng:
-		[
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'p', upperCase: 'P' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'l', upperCase: 'L' } ] }
-				],
-
-				[
-					{ width: 0.15, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 0.15, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	////////////////////////////////////////////////////////////
-
-	ru:
-		[
-			[
-				[
-					{ width: 1 / 12, chars: [ { lowerCase: 'й', upperCase: 'Й' }, { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ц', upperCase: 'Ц' }, { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'у', upperCase: 'У' }, { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'к', upperCase: 'К' }, { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'е', upperCase: 'Е' }, { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'н', upperCase: 'Н' }, { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'г', upperCase: 'Г' }, { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ш', upperCase: 'Ш' }, { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'щ', upperCase: 'Щ' }, { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'з', upperCase: 'З' }, { lowerCase: 'p', upperCase: 'P' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'х', upperCase: 'Х' }, { lowerCase: '{', upperCase: '[' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ъ', upperCase: 'Ъ' }, { lowerCase: '}', upperCase: ']' } ] }
-				],
-
-				[
-					{ width: 1 / 12, chars: [ { lowerCase: 'ф', upperCase: 'Ф' }, { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ы', upperCase: 'Ы' }, { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'в', upperCase: 'В' }, { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'а', upperCase: 'А' }, { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'п', upperCase: 'П' }, { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'р', upperCase: 'Р' }, { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'о', upperCase: 'О' }, { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'л', upperCase: 'Л' }, { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'д', upperCase: 'Д' }, { lowerCase: 'l', upperCase: 'L' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ж', upperCase: 'Ж' }, { lowerCase: ':', upperCase: ';' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'э', upperCase: 'Э' }, { lowerCase: '"', upperCase: '\'' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ё', upperCase: 'Ё' }, { lowerCase: '|', upperCase: '\\' } ] }
-				],
-
-				[
-					{ width: 1.5 / 12, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'я', upperCase: 'Я' }, { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ч', upperCase: 'Ч' }, { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'с', upperCase: 'С' }, { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'м', upperCase: 'М' }, { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'и', upperCase: 'И' }, { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'т', upperCase: 'Т' }, { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ь', upperCase: 'Ь' }, { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'б', upperCase: 'Б' }, { lowerCase: ',', upperCase: '' } ] },
-					{ width: 1 / 12, chars: [ { lowerCase: 'ю', upperCase: 'Ю' }, { lowerCase: '.', upperCase: '' } ] },
-					{ width: 1.5 / 12, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.15, command: 'switch-set', chars: [ { lowerCase: 'eng' } ] },
-					{ width: 0.15, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.3, command: 'switch', chars: [ { lowerCase: 'АБВ' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	/////////////////////////////////////////////////////////
-
-	de:
-		[
-			[
-				[
-					{ width: 1 / 11, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'p', upperCase: 'P' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'ü', upperCase: 'Ü' } ] }
-				],
-
-				[
-					{ width: 1 / 11, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'ö', upperCase: 'Ö' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'ä', upperCase: 'Ä' } ] }
-				],
-
-				[
-					{ width: 2 / 11, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 2 / 11, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	///////////////////////////////////////////////////////////
-
-	es:
-		[
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'p', upperCase: 'P' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ñ', upperCase: 'Ñ' } ] }
-				],
-
-				[
-					{ width: 0.15, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 0.15, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	//////////////////////////////////////////////////////////////////////
-
-	el:
-		[
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: ';', upperCase: ':' }, { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ς', upperCase: 'ς' }, { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ε', upperCase: 'Ε' }, { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ρ', upperCase: 'Ρ' }, { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'τ', upperCase: 'Τ' }, { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'υ', upperCase: 'Υ' }, { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'θ', upperCase: 'Θ' }, { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ι', upperCase: 'Ι' }, { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ο', upperCase: 'Ο' }, { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'π', upperCase: 'Π' }, { lowerCase: 'p', upperCase: 'P' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: 'α', upperCase: 'Α' }, { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'σ', upperCase: 'Σ' }, { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'δ', upperCase: 'Δ' }, { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'φ', upperCase: 'Φ' }, { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'γ', upperCase: 'Γ' }, { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'η', upperCase: 'Η' }, { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ξ', upperCase: 'Ξ' }, { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'κ', upperCase: 'Κ' }, { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'λ', upperCase: 'Λ' }, { lowerCase: 'l', upperCase: 'L' } ] }
-				],
-
-				[
-					{ width: 0.15, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ζ', upperCase: 'Ζ' }, { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'χ', upperCase: 'Χ' }, { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ψ', upperCase: 'Ψ' }, { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ω', upperCase: 'Ω' }, { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'β', upperCase: 'Β' }, { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'ν', upperCase: 'Ν' }, { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 0.1, chars: [ { lowerCase: 'μ', upperCase: 'Μ' }, { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 0.15, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.15, command: 'switch-set', chars: [ { lowerCase: 'eng' } ] },
-					{ width: 0.15, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		],
-
-	////////////////////////////////////////////////////////////////////////////////
-
-	nord:
-		[
-			[
-				[
-					{ width: 1 / 11, chars: [ { lowerCase: 'q', upperCase: 'Q' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'w', upperCase: 'W' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'e', upperCase: 'E' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'r', upperCase: 'R' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 't', upperCase: 'T' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'y', upperCase: 'Y' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'u', upperCase: 'U' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'i', upperCase: 'I' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'o', upperCase: 'O' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'p', upperCase: 'P' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'å', upperCase: 'Å' } ] }
-				],
-
-				[
-					{ width: 1 / 11, chars: [ { lowerCase: 'a', upperCase: 'A' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 's', upperCase: 'S' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'd', upperCase: 'D' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'f', upperCase: 'F' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'g', upperCase: 'G' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'h', upperCase: 'H' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'j', upperCase: 'J' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'k', upperCase: 'K' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'l', upperCase: 'L' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'æ', upperCase: 'Æ' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'ø', upperCase: 'Ø' } ] }
-				],
-
-				[
-					{ width: 2 / 11, command: 'shift', chars: [ { icon: 'shift' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'z', upperCase: 'Z' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'x', upperCase: 'X' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'c', upperCase: 'C' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'v', upperCase: 'V' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'b', upperCase: 'B' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'n', upperCase: 'N' } ] },
-					{ width: 1 / 11, chars: [ { lowerCase: 'm', upperCase: 'M' } ] },
-					{ width: 2 / 11, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-
-			],
-
-			[
-				[
-					{ width: 0.1, chars: [ { lowerCase: '1' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '2' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '3' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '4' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '5' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '6' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '7' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '8' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '9' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '0' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '@' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '#' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '|' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '_' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '&' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '-' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '+' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '(' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ')' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '/' } ] }
-				],
-
-				[
-					{ width: 0.1, chars: [ { lowerCase: '=' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '*' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '"' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '\'' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ':' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ';' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '!' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '?' } ] },
-					{ width: 0.2, command: 'backspace', chars: [ { icon: 'backspace' } ] }
-				],
-
-				[
-					{ width: 0.2, command: 'switch', chars: [ { lowerCase: '.?12' } ] },
-					{ width: 0.1, chars: [ { lowerCase: ',' } ] },
-					{ width: 0.4, command: 'space', chars: [ { icon: 'space' } ] },
-					{ width: 0.1, chars: [ { lowerCase: '.' } ] },
-					{ width: 0.2, command: 'enter', chars: [ { icon: 'enter' } ] }
-				]
-			]
-		]
-
-};
diff --git a/src/utils/NumberUtils.js b/src/utils/NumberUtils.js
new file mode 100644
index 00000000..0254627d
--- /dev/null
+++ b/src/utils/NumberUtils.js
@@ -0,0 +1,24 @@
+/**
+ * Get rid of the precision issue
+ * @param numA
+ * @param numB
+ * @param precision
+ * @return {boolean}
+ */
+export const numberEquals = function ( numA, numB, precision = 6 ) {
+
+	return numA.toFixed(precision) === numB.toFixed(precision)
+
+}
+
+/**
+ *
+ * @param unprecisedNumber
+ * @param precision
+ * @return {number}
+ */
+export const numberPrecise = function ( unprecisedNumber, precision = 6 ) {
+
+	return parseFloat( unprecisedNumber.toFixed( precision ) );
+
+}
diff --git a/src/utils/Units.js b/src/utils/Units.js
index 9793db86..a177520d 100644
--- a/src/utils/Units.js
+++ b/src/utils/Units.js
@@ -1,4 +1,10 @@
 export const WORLD_UNITS = 'rem';
+
+//
+export const CENTIMETERS = 'cm';
+export const MILLIMETERS = 'mm';
+export const INCHES = 'in';
+
 export const UV = 'em';
 export const PERCENT = '%';
 
diff --git a/src/utils/block-layout/AlignItems.js b/src/utils/block-layout/AlignItems.js
deleted file mode 100644
index efef12c9..00000000
--- a/src/utils/block-layout/AlignItems.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import { ROW } from './ContentDirection';
-
-
-export const START = "start";
-export const CENTER = "center";
-export const END = "end";
-export const STRETCH = "stretch"; // Still bit experimental
-
-/**
- * @tests '/test/specs/utils/box-layout/align-items.js'
- * @param {BoxComponent} boxComponent
- * @param {string} DIRECTION
- */
-export function alignItems( boxComponent, DIRECTION){
-
-	const ALIGNMENT = boxComponent.getAlignItems();
-	if( AVAILABLE_ALIGN_ITEMS.indexOf(ALIGNMENT) === -1 ){
-
-		console.warn( `alignItems === '${ALIGNMENT}' is not supported` );
-
-	}
-
-	let getSizeMethod = "getInnerWidth";
-	let axis = "x";
-	if( DIRECTION.indexOf( ROW ) === 0 ){
-
-		getSizeMethod = "getInnerHeight";
-		axis = "y";
-
-	}
-	const AXIS_TARGET = ( boxComponent[getSizeMethod]() / 2 );
-
-	boxComponent.childrenBoxes.forEach( ( child ) => {
-
-		let offset = 0;
-
-		switch ( ALIGNMENT ){
-
-			case END:
-			case 'right': // @TODO : Deprecated and will be remove upon 7.x.x
-			case 'bottom': // @TODO : Deprecated and will be remove upon 7.x.x
-				if( DIRECTION.indexOf( ROW ) === 0 ){
-
-					offset = - AXIS_TARGET + ( child[getSizeMethod]() / 2 );
-
-				}else{
-
-					offset = AXIS_TARGET - ( child[getSizeMethod]() / 2 );
-
-				}
-
-				break;
-
-			case START:
-			case 'left': // @TODO : Deprecated and will be remove upon 7.x.x
-			case 'top': // @TODO : Deprecated and will be remove upon 7.x.x
-				if( DIRECTION.indexOf( ROW ) === 0 ){
-
-					offset = AXIS_TARGET - ( child[getSizeMethod]() / 2 );
-
-				}else{
-
-					offset = - AXIS_TARGET + ( child[getSizeMethod]() / 2 );
-
-				}
-
-				break;
-		}
-
-		boxComponent.childrenPos[ child.id ][axis] = offset;
-
-	} );
-
-}
-
-/**
- * @deprecated
- * // @TODO: Be remove upon 7.x.x
- * @param alignment
- */
-export function warnAboutDeprecatedAlignItems( alignment ){
-
-	if( DEPRECATED_ALIGN_ITEMS.indexOf(alignment) !== - 1){
-
-		console.warn(`alignItems === '${alignment}' is deprecated and will be remove in 7.x.x. Fallback are 'start'|'end'`)
-
-	}
-
-}
-
-const AVAILABLE_ALIGN_ITEMS = [
-	START,
-	CENTER,
-	END,
-	STRETCH,
-	'top', // @TODO: Be remove upon 7.x.x
-	'right', // @TODO: Be remove upon 7.x.x
-	'bottom', // @TODO: Be remove upon 7.x.x
-	'left' // @TODO: Be remove upon 7.x.x
-];
-
-// @TODO: Be remove upon 7.x.x
-const DEPRECATED_ALIGN_ITEMS = [
-	'top',
-	'right',
-	'bottom',
-	'left'
-];
-
diff --git a/src/utils/block-layout/ContentDirection.js b/src/utils/block-layout/ContentDirection.js
deleted file mode 100644
index ae9300c9..00000000
--- a/src/utils/block-layout/ContentDirection.js
+++ /dev/null
@@ -1,67 +0,0 @@
-export const ROW = "row";
-export const ROW_REVERSE = "row-reverse";
-export const COLUMN = "column";
-export const COLUMN_REVERSE = "column-reverse";
-
-
-/**
- * @tests '/test/specs/utils/box-layout/content-direction.js'
- * @param {BoxComponent} container
- * @param {string} DIRECTION
- * @param {number} startPos
- * @param {number} REVERSE
- */
-export function contentDirection( container, DIRECTION, startPos, REVERSE ){
-
-	// end to end children
-	let accu = startPos;
-
-
-	let childGetSize = "getOffsetWidth";
-	let axisPrimary = "x";
-	let axisSecondary = "y";
-
-	// left right
-	let margins = ['w','y'];
-
-	if( DIRECTION.indexOf( COLUMN ) === 0 ){
-
-		childGetSize = "getOffsetHeight";
-
-		axisPrimary = "y";
-		axisSecondary = "x";
-
-		// top bttom
-		margins = ['x', 'z'];
-
-	}
-
-	if ( DIRECTION.indexOf('-reverse') !== -1 ) {
-
-		margins.reverse();
-
-	}
-
-	// Refactor reduce into fori in order to get rid of this keyword
-	for ( let i = 0; i < container.childrenBoxes.length; i++ ) {
-
-		const child = container.childrenBoxes[ i ];
-
-		const CHILD_ID = child.id;
-		const CHILD_SIZE = child[childGetSize]();
-
-		accu += child._margin[margins[0]] * REVERSE;
-
-		container.childrenPos[ CHILD_ID ] = {
-			[axisPrimary]: accu + ( ( CHILD_SIZE / 2 ) * REVERSE ),
-			[axisSecondary]: 0
-		};
-
-		// update accu for next children
-		accu += ( REVERSE * ( CHILD_SIZE + child._margin[margins[1]] ) );
-
-	}
-
-}
-
-
diff --git a/src/utils/block-layout/JustifyContent.js b/src/utils/block-layout/JustifyContent.js
deleted file mode 100644
index f4f1d4c0..00000000
--- a/src/utils/block-layout/JustifyContent.js
+++ /dev/null
@@ -1,157 +0,0 @@
-export const START = "start";
-export const CENTER = "center";
-export const END = "end";
-export const SPACE_AROUND = 'space-around';
-export const SPACE_BETWEEN = 'space-between';
-export const SPACE_EVENLY = 'space-evenly';
-
-/**
- * @tests '/test/specs/utils/box-layout/justify-content.js'
- * @param {BoxComponent} boxComponent
- * @param {string} direction
- * @param {number} startPos
- * @param {number} REVERSE
- */
-export function justifyContent( boxComponent, direction, startPos, REVERSE){
-
-	const JUSTIFICATION = boxComponent.getJustifyContent();
-	if ( AVAILABLE_JUSTIFICATIONS.indexOf( JUSTIFICATION ) === -1 ) {
-
-		console.warn( `justifyContent === '${ JUSTIFICATION }' is not supported` );
-
-	}
-
-	const side = direction.indexOf('row') === 0 ? 'width' : 'height'
-	const usedDirectionSpace = boxComponent.getChildrenSideSum( side );
-
-	const INNER_SIZE = side === 'width' ? boxComponent.innerWidth : boxComponent.innerHeight;
-	const remainingSpace = INNER_SIZE - usedDirectionSpace;
-
-	// Items Offset
-	const axisOffset = ( startPos * 2 ) - ( usedDirectionSpace * Math.sign( startPos ) );
-	// const axisOffset = ( startPos * 2 ) - ( usedDirectionSpace * REVERSE );
-	const justificationOffset = _getJustificationOffset( JUSTIFICATION, axisOffset );
-
-	// Items margin
-	const justificationMargins = _getJustificationMargin( boxComponent.childrenBoxes, remainingSpace, JUSTIFICATION, REVERSE );
-
-	// Apply
-	const axis = direction.indexOf( 'row' ) === 0 ? "x" : "y"
-	boxComponent.childrenBoxes.forEach( ( child , childIndex ) => {
-
-		boxComponent.childrenPos[ child.id ][axis] -= justificationOffset - justificationMargins[childIndex];
-
-	} );
-}
-
-const AVAILABLE_JUSTIFICATIONS = [
-	START,
-	CENTER,
-	END,
-	SPACE_AROUND,
-	SPACE_BETWEEN,
-	SPACE_EVENLY
-];
-
-/**
- *
- * @param {string} justification
- * @param {number} axisOffset
- * @returns {number}
- */
-function _getJustificationOffset( justification, axisOffset ){
-
-	// Only end and center have justification offset
-	switch ( justification ){
-
-		case END:
-			return axisOffset;
-
-		case CENTER:
-			return axisOffset / 2;
-	}
-
-	return 0;
-}
-
-/**
- *
- * @param items
- * @param spaceToDistribute
- * @param justification
- * @param reverse
- * @returns {any[]}
- */
-function _getJustificationMargin( items, spaceToDistribute, justification, reverse ){
-
-	const justificationMargins = Array( items.length ).fill( 0 );
-
-	if ( spaceToDistribute > 0 ) {
-
-		// Only space-*  have justification margin betweem items
-		switch ( justification ) {
-
-			case SPACE_BETWEEN:
-				// only one children would act as start
-				if ( items.length > 1 ) {
-
-					const margin = spaceToDistribute / ( items.length - 1 ) * reverse;
-					// set this margin for any children
-
-					// except for first child
-					justificationMargins[ 0 ] = 0;
-
-					for ( let i = 1; i < items.length; i++ ) {
-
-						justificationMargins[ i ] = margin * i;
-
-					}
-
-				}
-
-				break;
-
-			case SPACE_EVENLY:
-				// only one children would act as start
-				if ( items.length > 1 ) {
-
-					const margin = spaceToDistribute / ( items.length + 1 ) * reverse;
-
-					// set this margin for any children
-					for ( let i = 0; i < items.length; i++ ) {
-
-						justificationMargins[ i ] = margin * ( i + 1 );
-
-					}
-
-				}
-
-				break;
-
-			case SPACE_AROUND:
-				// only one children would act as start
-				if ( items.length > 1 ) {
-
-					const margin = spaceToDistribute / ( items.length ) * reverse;
-
-					const start = margin / 2;
-					justificationMargins[ 0 ] = start;
-
-					// set this margin for any children
-					for ( let i = 1; i < items.length; i++ ) {
-
-						justificationMargins[ i ] = start + margin * i;
-
-					}
-
-				}
-
-				break;
-
-		}
-
-	}
-
-	return justificationMargins;
-
-}
diff --git a/src/utils/block-layout/Padding.js b/src/utils/block-layout/Padding.js
deleted file mode 100644
index 4a7dac65..00000000
--- a/src/utils/block-layout/Padding.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * @TODO: This could be integrated in AlignItems
- * @param {BoxComponent} boxComponent
- * @param {string} DIRECTION
- * @param {string} ALIGNMENT
- */
-export const padItems = function( boxComponent, DIRECTION, ALIGNMENT ){
-
-	let snap = 'center';
-	let snapXon = 'center';
-	let snapYon = 'center';
-
-	const padding = boxComponent._padding;
-	const border = boxComponent._borderWidth;
-
-	if( DIRECTION.indexOf('column') !== -1 ) {
-
-		if( ALIGNMENT === 'start' ) {
-			snap = snapXon = 'left';
-		}else if( ALIGNMENT === 'end' ){
-			snap = snapXon ='right';
-		}else {
-			snap = 'centerX';
-		}
-
-	} else {
-
-		/* eslint-disable no-lonely-if */
-		if( ALIGNMENT === 'start' ) {
-			snap = snapYon = 'top';
-		}else if( ALIGNMENT === 'end' ){
-			snap = snapYon ='bottom';
-		}else{
-			snap = 'centerY';
-		}
-		/* eslint-enable no-lonely-if */
-
-	}
-
-	// apply 4 directional padding and borders
-	let y = -(padding.x - padding.z) / 2 - (border.x - border.z) / 2;
-	let x = -(padding.y - padding.w) / 2 - ( border.y - border.w ) / 2;
-
-
-	if( snapXon === 'left' ) {
-
-		x = (padding.w - padding.y) / 2 + (border.w - border.y) / 2;
-
-	} else if( snapXon === 'right' ) {
-
-		x = - ( padding.y - padding.w ) / 2 - ( border.y - border.w ) / 2;
-
-	}
-
-	if( snapYon === 'top' ) {
-
-		y = - (padding.x - padding.z) / 2 - (border.x - border.z) / 2;
-
-	} else if( snapYon === 'bottom' ) {
-
-		y = (padding.z - padding.x) / 2 + (border.z - border.x) / 2;
-
-	}
-
-
-	boxComponent.childrenBoxes.forEach( ( child ) => {
-
-		let marginX = 0;
-		let marginY = 0;
-		// let marginY = ( -child._margin.x + child._margin.z ) /2;
-		// let marginY = ( -child._margin.x + child._margin.z ) /2;
-
-		if( snap === 'top' ) {
-
-			marginY = - child._margin.x;
-
-		} else if( snap === 'bottom' ) {
-
-			marginY = child._margin.z;
-
-		} else if( snap === 'left' ) {
-
-			marginX = child._margin.w;
-
-		} else if( snap === 'right' ) {
-
-			marginX = - child._margin.y;
-
-		} else if( snap === 'centerX' ) {
-
-			marginX = ( child._margin.w - child._margin.y ) /2;
-
-		} else if( snap === 'centerY' ) {
-
-			marginY = ( - child._margin.x + child._margin.z ) /2;
-
-		}
-
-		boxComponent.childrenPos[ child.id ]['x'] += x + marginX;
-		boxComponent.childrenPos[ child.id ]['y'] += y + marginY;
-
-
-
-	} );
-
-
-}
diff --git a/src/utils/font/FontStyle.js b/src/utils/font/FontStyle.js
deleted file mode 100644
index 2484e6b6..00000000
--- a/src/utils/font/FontStyle.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export const NORMAL = "normal";
-export const ITALIC = "italic";
-export const OBLIQUE = "oblique";
-
-const MAX_OBLIQUE_ANGLE = 90;
-
-/**
- * Get the oblique style with custom angle
- * @param angleInDegree
- */
-export function obliqueCustomAngle( angleInDegree ){
-
-	// Clamp the angle
-	angleInDegree = angleInDegree < - MAX_OBLIQUE_ANGLE ? - MAX_OBLIQUE_ANGLE : angleInDegree > MAX_OBLIQUE_ANGLE ? MAX_OBLIQUE_ANGLE : angleInDegree;
-
-	return `${OBLIQUE} ${angleInDegree}deg`;
-
-}
-
diff --git a/src/utils/font/FontWeight.js b/src/utils/font/FontWeight.js
deleted file mode 100644
index 20d38a96..00000000
--- a/src/utils/font/FontWeight.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export const LIGHTER = '100';
-export const _100 = '100';
-export const _200 = '200';
-export const _300 = '300';
-export const NORMAL = '400';
-export const _400 = '400';
-export const _500 = '500';
-export const _600 = '600';
-export const BOLD = '700';
-export const _700 = '700';
-export const _800 = '800';
-export const BOLDER = '900';
-export const _900 = '900';
-
-
diff --git a/src/utils/inline-layout/InlineJustification.js b/src/utils/inline-layout/InlineJustification.js
deleted file mode 100644
index 176763e3..00000000
--- a/src/utils/inline-layout/InlineJustification.js
+++ /dev/null
@@ -1,52 +0,0 @@
-
-export function justifyInlines( boxComponent, lines, JUSTIFICATION, INNER_HEIGHT ){
-
-	const textHeight = Math.abs( lines.height );
-
-
-	// Line vertical positioning
-
-	let justificationOffset = ( () => {
-		switch ( JUSTIFICATION ) {
-
-			case 'start':
-				// return ( INNER_HEIGHT / 2 ) - lines[ 0 ].lineHeight - boxComponent._padding.x ;
-				// return boxComponent._padding.x - lines[0].lineHeight ;
-				// return (INNER_HEIGHT * .5) + boxComponent._padding.x - (lines[0].lineHeight * .5);
-				return (INNER_HEIGHT * .5) - lines[0].lineHeight;
-
-			case 'end':
-				return textHeight - lines[ 0 ].lineHeight - ( INNER_HEIGHT / 2 );
-
-			case 'space-around':
-			case 'space-between':
-			case 'space-evenly':
-			case 'center':
-				return ( textHeight / 2 ) - lines[ 0 ].lineHeight ;
-
-			default:
-				console.warn( `justifyContent: '${JUSTIFICATION}' is not valid` );
-
-		}
-	} )();
-
-	// Apply padding
-	const padding = boxComponent._padding;
-	const border = boxComponent._borderWidth;
-
-	justificationOffset += ( - padding.x + padding.z ) / 2 + ( - border.x + border.z ) / 2;
-
-	//
-
-	lines.forEach( ( line ) => {
-
-		line.y += justificationOffset;
-		line.forEach( ( inline ) => {
-
-			inline.offsetY += justificationOffset;
-
-		} );
-
-	} );
-
-}
diff --git a/src/utils/inline-layout/Whitespace.js b/src/utils/inline-layout/Whitespace.js
deleted file mode 100644
index cf46c53e..00000000
--- a/src/utils/inline-layout/Whitespace.js
+++ /dev/null
@@ -1,342 +0,0 @@
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace#whitespace_helper_functions
- *
- * Throughout, whitespace is defined as one of the characters
- *  "\t" TAB \u0009
- *  "\n" LF  \u000A
- *  "\r" CR  \u000D
- *  " "  SPC \u0020
- *
- * This does not use Javascript's "\s" because that includes non-breaking
- * spaces (and also some other characters).
- **/
-export const WHITE_CHARS = { '\t': '\u0009', '\n': '\u000A', '\r': '\u000D', ' ': '\u0020' };
-
-export const NORMAL = 'normal';
-export const NOWRAP = 'nowrap';
-export const PRE = 'pre';
-export const PRE_LINE = 'pre-line';
-export const PRE_WRAP = 'pre-wrap';
-
-const AVAILABLE_VALUES = [ NORMAL, NOWRAP, PRE, PRE_LINE, PRE_WRAP ];
-
-/**
- * Check the validity of a whitespace
- * @param value
- * @returns {string}
- */
-export function isValid ( value ){
-
-	if( AVAILABLE_VALUES.indexOf(value) === -1 ){
-
-		console.warn(`Whitespace::isValid() The provided white-space value ('${value}') is not valid !`);
-		console.warn(`    - Automatic fallback to ('${PRE_LINE}')`);
-
-		value = PRE_LINE;
-
-	}
-
-	return value;
-
-}
-
-/**
- * Collapse whitespaces and sequence of whitespaces on string
- *
- * @param textContent
- * @param whiteSpace
- * @returns {*}
- */
-export const collapseWhitespaceOnString = function ( textContent, whiteSpace ) {
-
-	switch ( whiteSpace ) {
-
-		case NOWRAP:
-		case NORMAL:
-			// newlines are treated as other whitespace characters
-			textContent = textContent.replace( /\n/g, ' ' );
-		//falls through
-
-		case PRE_LINE:
-			// collapsed white spaces sequences
-			textContent = textContent.replace( /[ ]{2,}/g, ' ' );
-			break;
-
-		default:
-
-	}
-
-	return textContent;
-
-};
-
-/**
- * Get the breakability of a newline character according to white-space property
- *
- * @param whiteSpace
- * @returns {string|null}
- */
-export const newlineBreakability = function ( whiteSpace ) {
-
-	switch ( whiteSpace ) {
-
-		case PRE:
-		case PRE_WRAP:
-		case PRE_LINE:
-			return 'mandatory';
-	}
-
-	// case NOWRAP:
-	// case NORMAL:
-	// default:
-
-	return null;
-
-};
-
-/**
- * Check for breaks in inlines according to whiteSpace value
- *
- * @param inlines
- * @param i
- * @param lastInlineOffset
- * @param options
- * @returns {boolean}
- */
-export const shouldBreak = function( inlines, i, lastInlineOffset, options){
-	const inline = inlines[i];
-
-	switch ( options.WHITESPACE ){
-
-		case NORMAL:
-		case PRE_LINE:
-		case PRE_WRAP:
-
-			// prevent additional computation if line break is mandatory
-			if( inline.lineBreak === 'mandatory' ) return true;
-
-			// Part of inline now
-			// const kerning = inline.kerning ? inline.kerning : 0;
-			// const xoffset = inline.xoffset ? inline.xoffset : 0;
-			// const xadvance = inline.xadvance ? inline.xadvance : inline.width;
-
-
-			// ?? Missing letterSpacing ?
-			// prevent additional computation if this character already exceed the available size
-			if( lastInlineOffset + inline.xadvance + inline.xoffset + inline.kerning > options.INNER_WIDTH ) return true;
-
-
-			const nextBreak = _distanceToNextBreak( inlines, i, options );
-			return _shouldFriendlyBreak( inlines[ i - 1 ], lastInlineOffset, nextBreak, options );
-
-		case PRE:
-			return inline.lineBreak === 'mandatory';
-
-		case NOWRAP:
-		default:
-			return false;
-	}
-}
-
-
-/**
- * Alter a line of inlines according to white-space property
- * @param line
- * @param {('normal'|'pre-wrap'|'pre-line')} whiteSpace
- */
-export const collapseWhitespaceOnInlines = function ( line, whiteSpace ) {
-
-	if( !line[0] ) return 0;
-
-	const firstInline = line[ 0 ];
-	const lastInline = line[ line.length - 1 ];
-
-	// @see https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace
-	//
-	// current implementation is 'pre-line'
-	// if the breaking character is a space, get the previous one
-	switch ( whiteSpace ) {
-
-		// trim/collapse first and last whitespace characters of a line
-		case PRE_WRAP:
-			// only process whiteChars glyphs inlines
-			// if( firstInline.glyph && whiteChars[firstInline.glyph] && line.length > 1 ){
-			if ( firstInline.char && firstInline.char === '\n' && line.length > 1 ) {
-
-				_collapseLeftInlines( [ firstInline ], line[ 1 ] );
-
-			}
-
-			// if( lastInline.glyph && whiteChars[lastInline.glyph] && line.length > 1 ){
-			if ( lastInline.char && lastInline.char === '\n' && line.length > 1 ) {
-
-				_collapseRightInlines( [ lastInline ], line[ line.length - 2 ] );
-
-			}
-
-			break;
-
-
-		case PRE_LINE:
-		case NOWRAP:
-		case NORMAL:
-			let inlinesToCollapse = [];
-			let collapsingTarget;
-			// collect starting whitespaces to collapse
-			for ( let i = 0; i < line.length; i++ ) {
-
-				const inline = line[ i ];
-
-				if ( inline.char && WHITE_CHARS[ inline.char ] && line.length > i ) {
-
-					inlinesToCollapse.push( inline );
-					collapsingTarget = line[ i + 1 ];
-					continue;
-
-				}
-
-				break;
-
-			}
-
-			_collapseLeftInlines( inlinesToCollapse, collapsingTarget );
-
-
-			inlinesToCollapse = [];
-			collapsingTarget = null;
-			// collect ending whitespace to collapse
-			for ( let i = line.length - 1; i > 0; i-- ) {
-
-				const inline = line[ i ];
-				if ( inline.char && WHITE_CHARS[ inline.char ] && i > 0 ) {
-
-					inlinesToCollapse.push( inline );
-					collapsingTarget = line[ i - 1 ];
-					continue;
-
-				}
-
-				break;
-
-			}
-
-			_collapseRightInlines( inlinesToCollapse, collapsingTarget );
-			break;
-
-		case PRE:
-			break;
-
-
-		default:
-			console.warn( `whiteSpace: '${whiteSpace}' is not valid` );
-			return 0;
-
-	}
-
-	return firstInline.offsetX;
-
-};
-
-
-/***********************************************************************************************************************
- * Internal logics
- **********************************************************************************************************************/
-
-
-/**
- * Visually collapse inlines from right to left ( endtrim )
- * @param {Array} inlines
- * @param targetInline
- * @private
- */
-function _collapseRightInlines( inlines, targetInline ) {
-
-	if ( !targetInline ) return;
-
-	for ( let i = 0; i < inlines.length; i++ ) {
-
-		const inline = inlines[ i ];
-
-		// inline.width = 0;
-		// inline.height = 0;
-		inline.fontFactor = 0;
-		// inline.offsetX = targetInline.offsetX + targetInline.width;
-		inline.offsetX = targetInline.offsetX + targetInline.cumulativeWidth;
-		// inline.offsetX -= inline.cumulativeWidth;
-
-	}
-
-}
-
-/**
- * Visually collapse inlines from left to right (starttrim)
- * @param {Array} inlines
- * @param targetInline
- * @private
- */
-function _collapseLeftInlines( inlines, targetInline ) {
-
-	if ( !targetInline ) return;
-
-	for ( let i = 0; i < inlines.length; i++ ) {
-
-		const inline = inlines[ i ];
-
-		// inline.width = 0;
-		// inline.height = 0;
-		inline.fontFactor = 0;
-		// inline.offsetX = targetInline.offsetX;
-		inline.offsetX += inline.cumulativeWidth;
-
-	}
-
-}
-
-/**
- * get the distance in world coord to the next glyph defined
- * as break-line-safe ( like whitespace for instance )
- * @private
- */
-function _distanceToNextBreak( inlines, currentIdx, options, accu ) {
-
-	accu = accu || 0;
-
-	// end of the text
-	if ( !inlines[ currentIdx ] ) return accu;
-
-	const inline = inlines[ currentIdx ];
-
-	// const kerning = inline.kerning ? inline.kerning : 0;
-	// const xoffset = inline.xoffset ? inline.xoffset : 0;
-	// const xadvance = inline.xadvance ? inline.xadvance : inline.width;
-
-	// if inline.lineBreak is set, it is 'mandatory' or 'possible'
-	if ( inline.lineBreak ) return accu + inline.xadvance;
-
-	// no line break is possible on this character
-	return _distanceToNextBreak(
-		inlines,
-		currentIdx + 1,
-		options,
-		accu + inline.xadvance + inline.xoffset + inline.kerning + options.LETTERSPACING
-	);
-
-}
-
-/**
- * Test if we should line break here even if the current glyph is not out of boundary.
- * It might be necessary if the last glyph was break-line-friendly (whitespace, hyphen..)
- * and the distance to the next friendly glyph is out of boundary.
- */
-function _shouldFriendlyBreak( prevChar, lastInlineOffset, nextBreak, options ) {
-
-	// We can't check if last glyph is break-line-friendly it does not exist
-	if ( !prevChar || !prevChar.char ) return false;
-
-	// Next break-line-friendly glyph is inside boundary
-	if ( lastInlineOffset + nextBreak < options.INNER_WIDTH ) return false;
-
-	// Previous glyph was break-line-friendly
-	return options.BREAKON.indexOf( prevChar.char ) > -1;
-
-}
diff --git a/src/utils/mediator/Mediator.js b/src/utils/mediator/Mediator.js
index 12b78400..94726433 100644
--- a/src/utils/mediator/Mediator.js
+++ b/src/utils/mediator/Mediator.js
@@ -1,5 +1,9 @@
 import { directTransfer } from './transformers/CommonTransformers';
 
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from '../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
 /**
  * An option function to transform value from subject to target
  * @typedef {(target:any, targetProperty:string, value:any) => void} MediationTransformer
@@ -41,7 +45,7 @@ export default class Mediator{
 
 	/**
 	 *
-	 * @param {MeshUIComponent} subject
+	 * @param {MeshUIBaseElement} subject
 	 * @param {any} target
 	 * @param {Object.<(string|number), any>} options
 	 * @param {any} [secondTarget=null]
@@ -81,7 +85,7 @@ export default class Mediator{
 	 * @param {MeshUIComponent} subject
 	 * @param {any} target
 	 * @param {Object.<(string|number), any>} options
-	 * @param {Object.<{subjectProperty:string, trans?:(target:any, targetProperty:string, value:any) => void}>} mediationDefinitions
+	 * @param {Object.<{subjectProperty:string, t?:(target:any, targetProperty:string, value:any) => void}>} mediationDefinitions
 	 * @param {any} [secondTarget=null]
 	 */
 	static mediate( subject, target, options, mediationDefinitions, secondTarget = null ) {
@@ -89,35 +93,6 @@ export default class Mediator{
 		// Cannot mediate if target not defined
 		if( !target ) return;
 
-		// if no options found, retrieve all need options
-		if( !options ){
-
-			options = {};
-			for ( const materialProperty in mediationDefinitions ) {
-
-				let value = subject[materialProperty];
-				if( value === undefined ){
-
-					const upperCaseProperty = materialProperty[0].toUpperCase() + materialProperty.substring(1)
-					if( subject["get"+upperCaseProperty] ) {
-
-						value = subject["get"+upperCaseProperty]();
-
-					}
-
-				}
-
-				if( value !== undefined ) {
-
-					options[materialProperty] = value;
-
-				}
-
-			}
-
-		}
-
-
 		// Mediate each subject properties to material
 		for ( const subjectProperty in mediationDefinitions ) {
 			const definition = mediationDefinitions[subjectProperty];
diff --git a/src/utils/mediator/transformers/CommonTransformers.js b/src/utils/mediator/transformers/CommonTransformers.js
index 6c4894b8..a6c1d2fb 100644
--- a/src/utils/mediator/transformers/CommonTransformers.js
+++ b/src/utils/mediator/transformers/CommonTransformers.js
@@ -7,3 +7,11 @@ export const directTransfer = function ( target, targetProperty, value ) {
 	target[targetProperty] = value;
 
 }
+
+export const directTransferNotNull = function( target, targetProperty, value ) {
+
+	if( value === null ) return;
+
+	target[targetProperty] = value;
+
+}
diff --git a/src/utils/mediator/transformers/MaterialTransformers.js b/src/utils/mediator/transformers/MaterialTransformers.js
index ef6e4ebd..b08e2c7a 100644
--- a/src/utils/mediator/transformers/MaterialTransformers.js
+++ b/src/utils/mediator/transformers/MaterialTransformers.js
@@ -8,7 +8,7 @@ export const alphaTestTransformer = function ( target, targetProperty, value) {
 	// set the value in the material
 	target.alphaTest = value;
 
-	toPreprocessorTriggerTransformer(target, 'USE_ALPHATEST', value === 0 ? '' : null );
+	toPreprocessorTriggerTransformer(target, 'USE_ALPHATEST', value > 0 );
 
 }
 
@@ -18,6 +18,8 @@ export const alphaTestTransformer = function ( target, targetProperty, value) {
  */
 export const toPreprocessorTriggerTransformer = function ( target, targetProperty, value) {
 
+	if( !target.defines ) return;
+
 	if ( value ) {
 
 		if( target.defines[targetProperty] === undefined ) {
diff --git a/tests/specs/core/box-component.js b/tests/specs/core/box-component.js
index ca10bb1e..0602ab10 100644
--- a/tests/specs/core/box-component.js
+++ b/tests/specs/core/box-component.js
@@ -56,23 +56,23 @@ describe("BoxComponent", function () {
 
 		it('Without padding, without borders', () => {
 
-			expect( containerCB.offsetWidth ).equals(1.0 );
-			expect( containerBB.offsetWidth ).equals(1.0 );
+			expect( containerCB._bounds._offsetWidth ).equals(1.0 );
+			expect( containerBB._bounds._offsetWidth ).equals(1.0 );
 
-			expect( containerCB.offsetHeight ).equals(1.0 );
-			expect( containerBB.offsetHeight ).equals(1.0 );
+			expect( containerCB._bounds._offsetHeight ).equals(1.0 );
+			expect( containerBB._bounds._offsetHeight ).equals(1.0 );
 
-			expect( containerCB.innerWidth ).equals(1.0 );
-			expect( containerBB.innerWidth ).equals(1.0 );
+			expect( containerCB._bounds._innerWidth ).equals(1.0 );
+			expect( containerBB._bounds._innerWidth ).equals(1.0 );
 
-			expect( containerCB.innerHeight ).equals(1.0 );
-			expect( containerBB.innerHeight ).equals(1.0 );
+			expect( containerCB._bounds._innerHeight ).equals(1.0 );
+			expect( containerBB._bounds._innerHeight ).equals(1.0 );
 
-			expect( containerCB.centerX ).equals( 0 );
-			expect( containerBB.centerX ).equals( 0 );
+			expect( containerCB._bounds._centerX ).equals( 0 );
+			expect( containerBB._bounds._centerX ).equals( 0 );
 
-			expect( containerCB.centerY ).equals( 0 );
-			expect( containerBB.centerY ).equals( 0 );
+			expect( containerCB._bounds._centerY ).equals( 0 );
+			expect( containerBB._bounds._centerY ).equals( 0 );
 
 		});
 
@@ -83,23 +83,23 @@ describe("BoxComponent", function () {
 			render();
 
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.2 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.2 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.2 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.2 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(0.8 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(0.8 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(0.8 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(0.8 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( 0 );
-			expect( imprecise( containerBB.centerX ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( 0 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( 0 );
-			expect( imprecise( containerBB.centerY ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( 0 );
 
 		});
 
@@ -109,23 +109,23 @@ describe("BoxComponent", function () {
 			containerBB.set({paddingLeft:0.1});
 			render();
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.1 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.1 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(0.9 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(0.9 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( 0.05 );
-			expect( imprecise( containerBB.centerX ) ).equals( 0.05 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( 0.05 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( 0.05 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( 0 );
-			expect( imprecise( containerBB.centerY ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( 0 );
 
 		});
 
@@ -135,23 +135,23 @@ describe("BoxComponent", function () {
 			containerBB.set({paddingLeft:0.1, paddingRight:0.3});
 			render();
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.4 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.4 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(0.6 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(0.6 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( -0.1 );
-			expect( imprecise( containerBB.centerX ) ).equals( -0.1 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( -0.1 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( -0.1 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( 0 );
-			expect( imprecise( containerBB.centerY ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( 0 );
 
 		});
 
@@ -161,23 +161,23 @@ describe("BoxComponent", function () {
 			containerBB.set({paddingLeft:0.3, paddingRight:0.1});
 			render();
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.4 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.4 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(0.6 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(0.6 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( 0.1 );
-			expect( imprecise( containerBB.centerX ) ).equals( 0.1 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( 0.1 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( 0.1 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( 0 );
-			expect( imprecise( containerBB.centerY ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( 0 );
 
 		});
 
@@ -187,23 +187,23 @@ describe("BoxComponent", function () {
 			containerBB.set({paddingTop:0.1});
 			render();
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.1 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.1 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(0.9 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(0.9 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( 0 );
-			expect( imprecise( containerBB.centerX ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( 0 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( -0.05 );
-			expect( imprecise( containerBB.centerY ) ).equals( -0.05 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( -0.05 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( -0.05 );
 
 		});
 
@@ -213,23 +213,23 @@ describe("BoxComponent", function () {
 			containerBB.set({paddingTop:0.1, paddingBottom:0.3});
 			render();
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.4 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.4 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(0.6 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(0.6 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( 0 );
-			expect( imprecise( containerBB.centerX ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( 0 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( 0.1 );
-			expect( imprecise( containerBB.centerY ) ).equals( 0.1 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( 0.1 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( 0.1 );
 
 		});
 
@@ -239,23 +239,23 @@ describe("BoxComponent", function () {
 			containerBB.set({paddingTop:0.3, paddingBottom:0.1});
 			render();
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.4 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.4 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(0.6 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(0.6 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( 0 );
-			expect( imprecise( containerBB.centerX ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( 0 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( -0.1 );
-			expect( imprecise( containerBB.centerY ) ).equals( -0.1 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( -0.1 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( -0.1 );
 
 		});
 
@@ -270,23 +270,23 @@ describe("BoxComponent", function () {
 			render();
 
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.2 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.2 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.2 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.2 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(0.8 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(0.8 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(0.8 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(0.8 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( 0 );
-			expect( imprecise( containerBB.centerX ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( 0 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( 0 );
-			expect( imprecise( containerBB.centerY ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( 0 );
 
 		});
 
@@ -296,23 +296,23 @@ describe("BoxComponent", function () {
 			containerBB.set({borderLeftWidth:0.1});
 			render();
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.1 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.1 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(0.9 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(0.9 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( 0.05 );
-			expect( imprecise( containerBB.centerX ) ).equals( 0.05 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( 0.05 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( 0.05 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( 0 );
-			expect( imprecise( containerBB.centerY ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( 0 );
 
 		});
 
@@ -322,23 +322,23 @@ describe("BoxComponent", function () {
 			containerBB.set({borderLeftWidth:0.1, borderRightWidth:0.3});
 			render();
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.4 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.4 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(0.6 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(0.6 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( -0.1 );
-			expect( imprecise( containerBB.centerX ) ).equals( -0.1 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( -0.1 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( -0.1 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( 0 );
-			expect( imprecise( containerBB.centerY ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( 0 );
 
 		});
 
@@ -348,23 +348,23 @@ describe("BoxComponent", function () {
 			containerBB.set({borderLeftWidth:0.3, borderRightWidth:0.1});
 			render();
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.4 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.4 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(0.6 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(0.6 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( 0.1 );
-			expect( imprecise( containerBB.centerX ) ).equals( 0.1 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( 0.1 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( 0.1 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( 0 );
-			expect( imprecise( containerBB.centerY ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( 0 );
 
 		});
 
@@ -374,23 +374,23 @@ describe("BoxComponent", function () {
 			containerBB.set({borderTopWidth:0.1});
 			render();
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.1 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.1 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(0.9 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(0.9 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( 0 );
-			expect( imprecise( containerBB.centerX ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( 0 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( -0.05 );
-			expect( imprecise( containerBB.centerY ) ).equals( -0.05 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( -0.05 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( -0.05 );
 
 		});
 
@@ -400,23 +400,23 @@ describe("BoxComponent", function () {
 			containerBB.set({borderTopWidth:0.1, borderBottomWidth:0.3});
 			render();
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.4 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.4 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(0.6 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(0.6 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( 0 );
-			expect( imprecise( containerBB.centerX ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( 0 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( 0.1 );
-			expect( imprecise( containerBB.centerY ) ).equals( 0.1 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( 0.1 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( 0.1 );
 
 		});
 
@@ -426,23 +426,23 @@ describe("BoxComponent", function () {
 			containerBB.set({borderTopWidth:0.3, borderBottomWidth:0.1});
 			render();
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.4 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.4 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(0.6 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(0.6 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( 0 );
-			expect( imprecise( containerBB.centerX ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( 0 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( -0.1 );
-			expect( imprecise( containerBB.centerY ) ).equals( -0.1 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( -0.1 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( -0.1 );
 
 		});
 
@@ -452,23 +452,23 @@ describe("BoxComponent", function () {
 			containerBB.set({borderLeftWidth:0.1,paddingLeft:0.1});
 			render();
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.2 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.2 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(0.8 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(0.8 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( 0.1 );
-			expect( imprecise( containerBB.centerX ) ).equals( 0.1 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( 0.1 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( 0.1 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( 0 );
-			expect( imprecise( containerBB.centerY ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( 0 );
 
 		});
 
@@ -478,23 +478,23 @@ describe("BoxComponent", function () {
 			containerBB.set({borderLeftWidth:0.1,paddingLeft:0.2});
 			render();
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.3 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.3 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(0.7 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(0.7 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( 0.15 );
-			expect( imprecise( containerBB.centerX ) ).equals( 0.15 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( 0.15 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( 0.15 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( 0 );
-			expect( imprecise( containerBB.centerY ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( 0 );
 
 		});
 
@@ -504,23 +504,23 @@ describe("BoxComponent", function () {
 			containerBB.set({borderLeftWidth:0.1,paddingRight:0.2});
 			render();
 
-			expect( imprecise( containerCB.offsetWidth ) ).equals(1.3 );
-			expect( imprecise( containerBB.offsetWidth ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetWidth ) ).equals(1.3 );
+			expect( imprecise( containerBB._bounds._offsetWidth ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.offsetHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._offsetHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._offsetHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.innerWidth ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerWidth ) ).equals(0.7 );
+			expect( imprecise( containerCB._bounds._innerWidth ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerWidth ) ).equals(0.7 );
 
-			expect( imprecise( containerCB.innerHeight ) ).equals(1.0 );
-			expect( imprecise( containerBB.innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerCB._bounds._innerHeight ) ).equals(1.0 );
+			expect( imprecise( containerBB._bounds._innerHeight ) ).equals(1.0 );
 
-			expect( imprecise( containerCB.centerX ) ).equals( -0.05 );
-			expect( imprecise( containerBB.centerX ) ).equals( -0.05 );
+			expect( imprecise( containerCB._bounds._centerX ) ).equals( -0.05 );
+			expect( imprecise( containerBB._bounds._centerX ) ).equals( -0.05 );
 
-			expect( imprecise( containerCB.centerY ) ).equals( 0 );
-			expect( imprecise( containerBB.centerY ) ).equals( 0 );
+			expect( imprecise( containerCB._bounds._centerY ) ).equals( 0 );
+			expect( imprecise( containerBB._bounds._centerY ) ).equals( 0 );
 
 		});
 
diff --git a/tests/specs/core/mesh-ui-component.js b/tests/specs/core/mesh-ui-component.js
index 06d824bf..a89ff236 100644
--- a/tests/specs/core/mesh-ui-component.js
+++ b/tests/specs/core/mesh-ui-component.js
@@ -37,83 +37,95 @@ describe("MeshUIComponent", function () {
 		it('Margins should work in duplicated 4 dimensions', ()=>{
 
 			container.set({margin:0.1});
-			expect(container._margin.x).equals(container._margin.y);
-			expect(container._margin.y).equals(container._margin.z);
-			expect(container._margin.z).equals(container._margin.w);
-			expect(container._margin.w).equals(0.1);
+			expect( container._margin._needsUpdate ).equals(true);
+			ThreeMeshUI.update();
+			expect( container._margin._needsUpdate ).equals(false);
+
+			expect(container._margin._value.x).equals(container._margin._value.y);
+			expect(container._margin._value.y).equals(container._margin._value.z);
+			expect(container._margin._value.z).equals(container._margin._value.w);
+			expect(container._margin._value.w).equals(0.1);
 
 		});
 
 		it('Margins should work in duplicated 2 dimensions', ()=>{
 
 			container.set({margin:'0.1 0.2'});
-			expect(container._margin.x).equals(container._margin.z);
-			expect(container._margin.y).equals(container._margin.w);
-			expect(container._margin.y).equals(0.2);
-			expect(container._margin.x).equals(0.1);
+			ThreeMeshUI.update();
+			expect(container._margin._value.x).equals(container._margin._value.z);
+			expect(container._margin._value.y).equals(container._margin._value.w);
+			expect(container._margin._value.y).equals(0.2);
+			expect(container._margin._value.x).equals(0.1);
 
 		});
 
 		it('Margins should work in duplicated 2 dimensions array', ()=>{
 
 			container.set({margin:[0.2,0.1]});
-			expect(container._margin.x).equals(container._margin.z);
-			expect(container._margin.y).equals(container._margin.w);
-			expect(container._margin.y).equals(0.1);
-			expect(container._margin.x).equals(0.2);
+			ThreeMeshUI.update();
+			expect(container._margin._value.x).equals(container._margin._value.z);
+			expect(container._margin._value.y).equals(container._margin._value.w);
+			expect(container._margin._value.y).equals(0.1);
+			expect(container._margin._value.x).equals(0.2);
 
 		});
 
 		it('Margins should work in 4 dimensions', ()=>{
 
 			container.set({margin:'0.1 0.2 0.3 0.4'});
-			expect(container._margin.x).equals(0.1);
-			expect(container._margin.y).equals(0.2);
-			expect(container._margin.z).equals(0.3);
-			expect(container._margin.w).equals(0.4);
+			ThreeMeshUI.update();
+			expect(container._margin._value.x).equals(0.1);
+			expect(container._margin._value.y).equals(0.2);
+			expect(container._margin._value.z).equals(0.3);
+			expect(container._margin._value.w).equals(0.4);
 
 		});
 
 		it('Margins should work with top', ()=>{
 
 			container.set({marginTop:0});
-			expect(container._margin.x).equals(0);
+			ThreeMeshUI.update();
+
+			expect(container._margin._value.x).equals(0);
 			// while other remains
-			expect(container._margin.y).equals(0.2);
-			expect(container._margin.z).equals(0.3);
-			expect(container._margin.w).equals(0.4);
+			expect(container._margin._value.y).equals(0.2);
+			expect(container._margin._value.z).equals(0.3);
+			expect(container._margin._value.w).equals(0.4);
 
 		});
 
 		it('Margins should work with right', ()=>{
 
 			container.set({marginRight:0});
-			expect(container._margin.x).equals(0);
-			expect(container._margin.y).equals(0);
+			ThreeMeshUI.update();
+			expect(container._margin._value.x).equals(0);
+			expect(container._margin._value.y).equals(0);
 			// while other remains
-			expect(container._margin.z).equals(0.3);
-			expect(container._margin.w).equals(0.4);
+			expect(container._margin._value.z).equals(0.3);
+			expect(container._margin._value.w).equals(0.4);
 
 		});
 
 		it('Margins should work with bottom', ()=>{
 
 			container.set({marginBottom:0});
-			expect(container._margin.x).equals(0);
-			expect(container._margin.y).equals(0);
-			expect(container._margin.z).equals(0);
+			ThreeMeshUI.update();
+			expect(container._margin._value.x).equals(0);
+			expect(container._margin._value.y).equals(0);
+			expect(container._margin._value.z).equals(0);
 			// while other remains
-			expect(container._margin.w).equals(0.4);
+			expect(container._margin._value.w).equals(0.4);
 
 		});
 
 		it('Margins should work with left', ()=>{
 
 			container.set({marginLeft:0});
-			expect(container._margin.x).equals(0);
-			expect(container._margin.y).equals(0);
-			expect(container._margin.z).equals(0);
-			expect(container._margin.w).equals(0);
+			ThreeMeshUI.update();
+			expect(container._margin._value.x).equals(0);
+			expect(container._margin._value.y).equals(0);
+			expect(container._margin._value.z).equals(0);
+			expect(container._margin._value.w).equals(0);
 
 		});
 
@@ -128,83 +140,91 @@ describe("MeshUIComponent", function () {
 		it('Paddings should work in duplicated 4 dimensions', ()=>{
 
 			container.set({padding:0.1});
-			expect(container._padding.x).equals(container._padding.y);
-			expect(container._padding.y).equals(container._padding.z);
-			expect(container._padding.z).equals(container._padding.w);
-			expect(container._padding.w).equals(0.1);
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(container._padding._value.y);
+			expect(container._padding._value.y).equals(container._padding._value.z);
+			expect(container._padding._value.z).equals(container._padding._value.w);
+			expect(container._padding._value.w).equals(0.1);
 
 		});
 
 		it('Paddings should work in duplicated 2 dimensions', ()=>{
 
 			container.set({padding:'0.1 0.2'});
-			expect(container._padding.x).equals(container._padding.z);
-			expect(container._padding.y).equals(container._padding.w);
-			expect(container._padding.y).equals(0.2);
-			expect(container._padding.x).equals(0.1);
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(container._padding._value.z);
+			expect(container._padding._value.y).equals(container._padding._value.w);
+			expect(container._padding._value.y).equals(0.2);
+			expect(container._padding._value.x).equals(0.1);
 
 		});
 
 		it('Paddings should work in duplicated 2 dimensions array', ()=>{
 
 			container.set({padding:[0.2,0.1]});
-			expect(container._padding.x).equals(container._padding.z);
-			expect(container._padding.y).equals(container._padding.w);
-			expect(container._padding.y).equals(0.1);
-			expect(container._padding.x).equals(0.2);
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(container._padding._value.z);
+			expect(container._padding._value.y).equals(container._padding._value.w);
+			expect(container._padding._value.y).equals(0.1);
+			expect(container._padding._value.x).equals(0.2);
 
 		});
 
 		it('Paddings should work in 4 dimensions', ()=>{
 
 			container.set({padding:'0.1 0.2 0.3 0.4'});
-			expect(container._padding.x).equals(0.1);
-			expect(container._padding.y).equals(0.2);
-			expect(container._padding.z).equals(0.3);
-			expect(container._padding.w).equals(0.4);
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(0.1);
+			expect(container._padding._value.y).equals(0.2);
+			expect(container._padding._value.z).equals(0.3);
+			expect(container._padding._value.w).equals(0.4);
 
 		});
 
 		it('Paddings should work with top', ()=>{
 
 			container.set({paddingTop:0});
-			expect(container._padding.x).equals(0);
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(0);
 			// while other remains
-			expect(container._padding.y).equals(0.2);
-			expect(container._padding.z).equals(0.3);
-			expect(container._padding.w).equals(0.4);
+			expect(container._padding._value.y).equals(0.2);
+			expect(container._padding._value.z).equals(0.3);
+			expect(container._padding._value.w).equals(0.4);
 
 		});
 
 		it('Paddings should work with right', ()=>{
 
 			container.set({paddingRight:0});
-			expect(container._padding.x).equals(0);
-			expect(container._padding.y).equals(0);
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(0);
+			expect(container._padding._value.y).equals(0);
 			// while other remains
-			expect(container._padding.z).equals(0.3);
-			expect(container._padding.w).equals(0.4);
+			expect(container._padding._value.z).equals(0.3);
+			expect(container._padding._value.w).equals(0.4);
 
 		});
 
 		it('Paddings should work with bottom', ()=>{
 
 			container.set({paddingBottom:0});
-			expect(container._padding.x).equals(0);
-			expect(container._padding.y).equals(0);
-			expect(container._padding.z).equals(0);
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(0);
+			expect(container._padding._value.y).equals(0);
+			expect(container._padding._value.z).equals(0);
 			// while other remains
-			expect(container._padding.w).equals(0.4);
+			expect(container._padding._value.w).equals(0.4);
 
 		});
 
 		it('Paddings should work with left', ()=>{
 
 			container.set({paddingLeft:0});
-			expect(container._padding.x).equals(0);
-			expect(container._padding.y).equals(0);
-			expect(container._padding.z).equals(0);
-			expect(container._padding.w).equals(0);
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(0);
+			expect(container._padding._value.y).equals(0);
+			expect(container._padding._value.z).equals(0);
+			expect(container._padding._value.w).equals(0);
 
 		});
 
@@ -219,83 +239,95 @@ describe("MeshUIComponent", function () {
 		it('Border Widths should work in duplicated 4 dimensions', ()=>{
 
 			container.set({borderWidth:0.1});
-			expect(container._borderWidth.x).equals(container._borderWidth.y);
-			expect(container._borderWidth.y).equals(container._borderWidth.z);
-			expect(container._borderWidth.z).equals(container._borderWidth.w);
-			expect(container._borderWidth.w).equals(0.1);
+			ThreeMeshUI.update();
+			expect(container._borderWidth._value.x).equals(container._borderWidth._value.y);
+			expect(container._borderWidth._value.y).equals(container._borderWidth._value.z);
+			expect(container._borderWidth._value.z).equals(container._borderWidth._value.w);
+			expect(container._borderWidth._value.w).equals(0.1);
 
 		});
 
 		it('Border Widths should work in duplicated 2 dimensions', ()=>{
 
 			container.set({borderWidth:'0.1 0.2'});
-			expect(container._borderWidth.x).equals(container._borderWidth.z);
-			expect(container._borderWidth.y).equals(container._borderWidth.w);
-			expect(container._borderWidth.y).equals(0.2);
-			expect(container._borderWidth.x).equals(0.1);
+			ThreeMeshUI.update();
+			expect(container._borderWidth._value.x).equals(container._borderWidth._value.z);
+			expect(container._borderWidth._value.y).equals(container._borderWidth._value.w);
+			expect(container._borderWidth._value.y).equals(0.2);
+			expect(container._borderWidth._value.x).equals(0.1);
 
 		});
 
 		it('Border Widths should work in duplicated 2 dimensions array', ()=>{
 
 			container.set({borderWidth:[0.2,0.1]});
-			expect(container._borderWidth.x).equals(container._borderWidth.z);
-			expect(container._borderWidth.y).equals(container._borderWidth.w);
-			expect(container._borderWidth.y).equals(0.1);
-			expect(container._borderWidth.x).equals(0.2);
+			ThreeMeshUI.update();
+			expect(container._borderWidth._value.x).equals(container._borderWidth._value.z);
+			expect(container._borderWidth._value.y).equals(container._borderWidth._value.w);
+			expect(container._borderWidth._value.y).equals(0.1);
+			expect(container._borderWidth._value.x).equals(0.2);
 
 		});
 
 		it('Border Widths should work in 4 dimensions', ()=>{
 
 			container.set({borderWidth:'0.1 0.2 0.3 0.4'});
-			expect(container._borderWidth.x).equals(0.1);
-			expect(container._borderWidth.y).equals(0.2);
-			expect(container._borderWidth.z).equals(0.3);
-			expect(container._borderWidth.w).equals(0.4);
+			ThreeMeshUI.update();
+			expect(container._borderWidth._value.x).equals(0.1);
+			expect(container._borderWidth._value.y).equals(0.2);
+			expect(container._borderWidth._value.z).equals(0.3);
+			expect(container._borderWidth._value.w).equals(0.4);
 
 		});
 
 		it('Border Widths should work with top', ()=>{
 
 			container.set({borderTopWidth:0});
-			expect(container._borderWidth.x).equals(0);
+			ThreeMeshUI.update();
+
+			expect(container._borderWidth._value.x).equals(0);
 			// while other remains
-			expect(container._borderWidth.y).equals(0.2);
-			expect(container._borderWidth.z).equals(0.3);
-			expect(container._borderWidth.w).equals(0.4);
+			expect(container._borderWidth._value.y).equals(0.2);
+			expect(container._borderWidth._value.z).equals(0.3);
+			expect(container._borderWidth._value.w).equals(0.4);
 
 		});
 
 		it('Border Widths should work with right', ()=>{
 
 			container.set({borderRightWidth:0});
-			expect(container._borderWidth.x).equals(0);
-			expect(container._borderWidth.y).equals(0);
+			ThreeMeshUI.update();
+
+			expect(container._borderWidth._value.x).equals(0);
+			expect(container._borderWidth._value.y).equals(0);
 			// while other remains
-			expect(container._borderWidth.z).equals(0.3);
-			expect(container._borderWidth.w).equals(0.4);
+			expect(container._borderWidth._value.z).equals(0.3);
+			expect(container._borderWidth._value.w).equals(0.4);
 
 		});
 
 		it('Border Widths should work with bottom', ()=>{
 
 			container.set({borderBottomWidth:0});
-			expect(container._borderWidth.x).equals(0);
-			expect(container._borderWidth.y).equals(0);
-			expect(container._borderWidth.z).equals(0);
+			ThreeMeshUI.update();
+
+			expect(container._borderWidth._value.x).equals(0);
+			expect(container._borderWidth._value.y).equals(0);
+			expect(container._borderWidth._value.z).equals(0);
 			// while other remains
-			expect(container._borderWidth.w).equals(0.4);
+			expect(container._borderWidth._value.w).equals(0.4);
 
 		});
 
 		it('Border Widths should work with left', ()=>{
 
 			container.set({borderLeftWidth:0});
-			expect(container._borderWidth.x).equals(0);
-			expect(container._borderWidth.y).equals(0);
-			expect(container._borderWidth.z).equals(0);
-			expect(container._borderWidth.w).equals(0);
+			ThreeMeshUI.update();
+
+			expect(container._borderWidth._value.x).equals(0);
+			expect(container._borderWidth._value.y).equals(0);
+			expect(container._borderWidth._value.z).equals(0);
+			expect(container._borderWidth._value.w).equals(0);
 
 		});
 
diff --git a/tests/specs/core/properties.js b/tests/specs/core/properties.js
new file mode 100644
index 00000000..87e750b5
--- /dev/null
+++ b/tests/specs/core/properties.js
@@ -0,0 +1,342 @@
+import { buildThreeSetup } from '../../utils/TestThree.js';
+import { preloadFonts } from '../../utils/TestFonts.js';
+import { fiveBlockContainer } from '../../utils/TestStructure.js';
+import { imprecise } from '../../utils/TestNumber.js';
+
+/**
+ * JOBS : Check that changing a property cascade update and process of other properties
+ * // @TODO :
+ */
+describe("MeshUIComponent", function () {
+
+
+	let scene, camera, renderer, render;
+	let fontFamily;
+
+	before( function ( done ) {
+
+		( { scene, camera, renderer, render } = buildThreeSetup() );
+		fontFamily = preloadFonts( done );
+
+	} );
+
+	let container, child1, child2, child3, child4, child5;
+
+
+
+	before( function () {
+
+		//build a container with 5 children blocks
+		( { container, child1, child2, child3, child4, child5 } = fiveBlockContainer( scene ) );
+
+	} );
+
+
+	/**
+	 * Job:
+	 * Being sure properties are correctly updated
+	 */
+	describe( "Margins", function () {
+
+		it('Margins should work in duplicated 4 dimensions', ()=>{
+
+			container.set({margin:0.1});
+			expect( container._margin._needsUpdate ).equals(true);
+			ThreeMeshUI.update();
+			expect( container._margin._needsUpdate ).equals(false);
+
+			expect(container._margin._value.x).equals(container._margin._value.y);
+			expect(container._margin._value.y).equals(container._margin._value.z);
+			expect(container._margin._value.z).equals(container._margin._value.w);
+			expect(container._margin._value.w).equals(0.1);
+
+		});
+
+		it('Margins should work in duplicated 2 dimensions', ()=>{
+
+			container.set({margin:'0.1 0.2'});
+			ThreeMeshUI.update();
+			expect(container._margin._value.x).equals(container._margin._value.z);
+			expect(container._margin._value.y).equals(container._margin._value.w);
+			expect(container._margin._value.y).equals(0.2);
+			expect(container._margin._value.x).equals(0.1);
+
+		});
+
+		it('Margins should work in duplicated 2 dimensions array', ()=>{
+
+			container.set({margin:[0.2,0.1]});
+			ThreeMeshUI.update();
+			expect(container._margin._value.x).equals(container._margin._value.z);
+			expect(container._margin._value.y).equals(container._margin._value.w);
+			expect(container._margin._value.y).equals(0.1);
+			expect(container._margin._value.x).equals(0.2);
+
+		});
+
+		it('Margins should work in 4 dimensions', ()=>{
+
+			container.set({margin:'0.1 0.2 0.3 0.4'});
+			ThreeMeshUI.update();
+			expect(container._margin._value.x).equals(0.1);
+			expect(container._margin._value.y).equals(0.2);
+			expect(container._margin._value.z).equals(0.3);
+			expect(container._margin._value.w).equals(0.4);
+
+		});
+
+		it('Margins should work with top', ()=>{
+
+			container.set({marginTop:0});
+			ThreeMeshUI.update();
+
+			expect(container._margin._value.x).equals(0);
+			// while other remains
+			expect(container._margin._value.y).equals(0.2);
+			expect(container._margin._value.z).equals(0.3);
+			expect(container._margin._value.w).equals(0.4);
+
+		});
+
+		it('Margins should work with right', ()=>{
+
+			container.set({marginRight:0});
+			ThreeMeshUI.update();
+			expect(container._margin._value.x).equals(0);
+			expect(container._margin._value.y).equals(0);
+			// while other remains
+			expect(container._margin._value.z).equals(0.3);
+			expect(container._margin._value.w).equals(0.4);
+
+		});
+
+		it('Margins should work with bottom', ()=>{
+
+			container.set({marginBottom:0});
+			ThreeMeshUI.update();
+			expect(container._margin._value.x).equals(0);
+			expect(container._margin._value.y).equals(0);
+			expect(container._margin._value.z).equals(0);
+			// while other remains
+			expect(container._margin._value.w).equals(0.4);
+
+		});
+
+		it('Margins should work with left', ()=>{
+
+			container.set({marginLeft:0});
+			ThreeMeshUI.update();
+			expect(container._margin._value.x).equals(0);
+			expect(container._margin._value.y).equals(0);
+			expect(container._margin._value.z).equals(0);
+			expect(container._margin._value.w).equals(0);
+
+		});
+
+
+	} );
+
+
+	//padding
+
+	describe( "Paddings", function () {
+
+		it('Paddings should work in duplicated 4 dimensions', ()=>{
+
+			container.set({padding:0.1});
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(container._padding._value.y);
+			expect(container._padding._value.y).equals(container._padding._value.z);
+			expect(container._padding._value.z).equals(container._padding._value.w);
+			expect(container._padding._value.w).equals(0.1);
+
+		});
+
+		it('Paddings should work in duplicated 2 dimensions', ()=>{
+
+			container.set({padding:'0.1 0.2'});
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(container._padding._value.z);
+			expect(container._padding._value.y).equals(container._padding._value.w);
+			expect(container._padding._value.y).equals(0.2);
+			expect(container._padding._value.x).equals(0.1);
+
+		});
+
+		it('Paddings should work in duplicated 2 dimensions array', ()=>{
+
+			container.set({padding:[0.2,0.1]});
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(container._padding._value.z);
+			expect(container._padding._value.y).equals(container._padding._value.w);
+			expect(container._padding._value.y).equals(0.1);
+			expect(container._padding._value.x).equals(0.2);
+
+		});
+
+		it('Paddings should work in 4 dimensions', ()=>{
+
+			container.set({padding:'0.1 0.2 0.3 0.4'});
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(0.1);
+			expect(container._padding._value.y).equals(0.2);
+			expect(container._padding._value.z).equals(0.3);
+			expect(container._padding._value.w).equals(0.4);
+
+		});
+
+		it('Paddings should work with top', ()=>{
+
+			container.set({paddingTop:0});
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(0);
+			// while other remains
+			expect(container._padding._value.y).equals(0.2);
+			expect(container._padding._value.z).equals(0.3);
+			expect(container._padding._value.w).equals(0.4);
+
+		});
+
+		it('Paddings should work with right', ()=>{
+
+			container.set({paddingRight:0});
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(0);
+			expect(container._padding._value.y).equals(0);
+			// while other remains
+			expect(container._padding._value.z).equals(0.3);
+			expect(container._padding._value.w).equals(0.4);
+
+		});
+
+		it('Paddings should work with bottom', ()=>{
+
+			container.set({paddingBottom:0});
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(0);
+			expect(container._padding._value.y).equals(0);
+			expect(container._padding._value.z).equals(0);
+			// while other remains
+			expect(container._padding._value.w).equals(0.4);
+
+		});
+
+		it('Paddings should work with left', ()=>{
+
+			container.set({paddingLeft:0});
+			ThreeMeshUI.update();
+			expect(container._padding._value.x).equals(0);
+			expect(container._padding._value.y).equals(0);
+			expect(container._padding._value.z).equals(0);
+			expect(container._padding._value.w).equals(0);
+
+		});
+
+
+	} );
+
+
+	// Borders
+
+	describe( "Border Widths", function () {
+
+		it('Border Widths should work in duplicated 4 dimensions', ()=>{
+
+			container.set({borderWidth:0.1});
+			ThreeMeshUI.update();
+			expect(container._borderWidth._value.x).equals(container._borderWidth._value.y);
+			expect(container._borderWidth._value.y).equals(container._borderWidth._value.z);
+			expect(container._borderWidth._value.z).equals(container._borderWidth._value.w);
+			expect(container._borderWidth._value.w).equals(0.1);
+
+		});
+
+		it('Border Widths should work in duplicated 2 dimensions', ()=>{
+
+			container.set({borderWidth:'0.1 0.2'});
+			ThreeMeshUI.update();
+			expect(container._borderWidth._value.x).equals(container._borderWidth._value.z);
+			expect(container._borderWidth._value.y).equals(container._borderWidth._value.w);
+			expect(container._borderWidth._value.y).equals(0.2);
+			expect(container._borderWidth._value.x).equals(0.1);
+
+		});
+
+		it('Border Widths should work in duplicated 2 dimensions array', ()=>{
+
+			container.set({borderWidth:[0.2,0.1]});
+			ThreeMeshUI.update();
+			expect(container._borderWidth._value.x).equals(container._borderWidth._value.z);
+			expect(container._borderWidth._value.y).equals(container._borderWidth._value.w);
+			expect(container._borderWidth._value.y).equals(0.1);
+			expect(container._borderWidth._value.x).equals(0.2);
+
+		});
+
+		it('Border Widths should work in 4 dimensions', ()=>{
+
+			container.set({borderWidth:'0.1 0.2 0.3 0.4'});
+			ThreeMeshUI.update();
+			expect(container._borderWidth._value.x).equals(0.1);
+			expect(container._borderWidth._value.y).equals(0.2);
+			expect(container._borderWidth._value.z).equals(0.3);
+			expect(container._borderWidth._value.w).equals(0.4);
+
+		});
+
+		it('Border Widths should work with top', ()=>{
+
+			container.set({borderTopWidth:0});
+			ThreeMeshUI.update();
+
+			expect(container._borderWidth._value.x).equals(0);
+			// while other remains
+			expect(container._borderWidth._value.y).equals(0.2);
+			expect(container._borderWidth._value.z).equals(0.3);
+			expect(container._borderWidth._value.w).equals(0.4);
+
+		});
+
+		it('Border Widths should work with right', ()=>{
+
+			container.set({borderRightWidth:0});
+			ThreeMeshUI.update();
+
+			expect(container._borderWidth._value.x).equals(0);
+			expect(container._borderWidth._value.y).equals(0);
+			// while other remains
+			expect(container._borderWidth._value.z).equals(0.3);
+			expect(container._borderWidth._value.w).equals(0.4);
+
+		});
+
+		it('Border Widths should work with bottom', ()=>{
+
+			container.set({borderBottomWidth:0});
+			ThreeMeshUI.update();
+
+			expect(container._borderWidth._value.x).equals(0);
+			expect(container._borderWidth._value.y).equals(0);
+			expect(container._borderWidth._value.z).equals(0);
+			// while other remains
+			expect(container._borderWidth._value.w).equals(0.4);
+
+		});
+
+		it('Border Widths should work with left', ()=>{
+
+			container.set({borderLeftWidth:0});
+			ThreeMeshUI.update();
+
+			expect(container._borderWidth._value.x).equals(0);
+			expect(container._borderWidth._value.y).equals(0);
+			expect(container._borderWidth._value.z).equals(0);
+			expect(container._borderWidth._value.w).equals(0);
+
+		});
+
+
+	} );
+
+
+});
diff --git a/tests/specs/utils/block-layout/align-items.js b/tests/specs/utils/block-layout/align-items.js
index 823d0ce3..63df3773 100644
--- a/tests/specs/utils/block-layout/align-items.js
+++ b/tests/specs/utils/block-layout/align-items.js
@@ -35,118 +35,118 @@ describe( 'AlignItems', function () {
 	describe( '.START', function () {
 
 		beforeEach( () => {
-			container.set( { contentDirection: 'column', justifyContent: 'center', alignItems: 'start' } );
+			container.set( { flexDirection: 'column', justifyContent: 'center', alignItems: 'start' } );
 			render();
 		} );
 
 		it( 'Items should snap to half their size', () => {
 
 			// columns -> x snap align
-			expect( child1.position.x ).equals( -container.width / 2 + child1.width / 2 );
-			expect( child2.position.x ).equals( -container.width / 2 + child2.width / 2 );
-			expect( child3.position.x ).equals( -container.width / 2 + child3.width / 2 );
-			expect( child4.position.x ).equals( -container.width / 2 + child4.width / 2 );
-			expect( child5.position.x ).equals( -container.width / 2 + child5.width / 2 );
+			expect( child1.position.x ).equals( -container._width._value / 2 + child1._width._value / 2 );
+			expect( child2.position.x ).equals( -container._width._value / 2 + child2._width._value / 2 );
+			expect( child3.position.x ).equals( -container._width._value / 2 + child3._width._value / 2 );
+			expect( child4.position.x ).equals( -container._width._value / 2 + child4._width._value / 2 );
+			expect( child5.position.x ).equals( -container._width._value / 2 + child5._width._value / 2 );
 
 			container.set( { justifyContent: 'start' } );
 			render();
 
-			expect( child1.position.x ).equals( -container.width / 2 + child1.width / 2 );
-			expect( child2.position.x ).equals( -container.width / 2 + child2.width / 2 );
-			expect( child3.position.x ).equals( -container.width / 2 + child3.width / 2 );
-			expect( child4.position.x ).equals( -container.width / 2 + child4.width / 2 );
-			expect( child5.position.x ).equals( -container.width / 2 + child5.width / 2 );
+			expect( child1.position.x ).equals( -container._width._value / 2 + child1._width._value / 2 );
+			expect( child2.position.x ).equals( -container._width._value / 2 + child2._width._value / 2 );
+			expect( child3.position.x ).equals( -container._width._value / 2 + child3._width._value / 2 );
+			expect( child4.position.x ).equals( -container._width._value / 2 + child4._width._value / 2 );
+			expect( child5.position.x ).equals( -container._width._value / 2 + child5._width._value / 2 );
 
 			container.set( { justifyContent: 'end' } );
 			render();
 
-			expect( child1.position.x ).equals( -container.width / 2 + child1.width / 2 );
-			expect( child2.position.x ).equals( -container.width / 2 + child2.width / 2 );
-			expect( child3.position.x ).equals( -container.width / 2 + child3.width / 2 );
-			expect( child4.position.x ).equals( -container.width / 2 + child4.width / 2 );
-			expect( child5.position.x ).equals( -container.width / 2 + child5.width / 2 );
+			expect( child1.position.x ).equals( -container._width._value / 2 + child1._width._value / 2 );
+			expect( child2.position.x ).equals( -container._width._value / 2 + child2._width._value / 2 );
+			expect( child3.position.x ).equals( -container._width._value / 2 + child3._width._value / 2 );
+			expect( child4.position.x ).equals( -container._width._value / 2 + child4._width._value / 2 );
+			expect( child5.position.x ).equals( -container._width._value / 2 + child5._width._value / 2 );
 
 			container.set( { justifyContent: 'space-around' } );
 			render();
 
-			expect( child1.position.x ).equals( -container.width / 2 + child1.width / 2 );
-			expect( child2.position.x ).equals( -container.width / 2 + child2.width / 2 );
-			expect( child3.position.x ).equals( -container.width / 2 + child3.width / 2 );
-			expect( child4.position.x ).equals( -container.width / 2 + child4.width / 2 );
-			expect( child5.position.x ).equals( -container.width / 2 + child5.width / 2 );
+			expect( child1.position.x ).equals( -container._width._value / 2 + child1._width._value / 2 );
+			expect( child2.position.x ).equals( -container._width._value / 2 + child2._width._value / 2 );
+			expect( child3.position.x ).equals( -container._width._value / 2 + child3._width._value / 2 );
+			expect( child4.position.x ).equals( -container._width._value / 2 + child4._width._value / 2 );
+			expect( child5.position.x ).equals( -container._width._value / 2 + child5._width._value / 2 );
 
 			container.set( { justifyContent: 'space-evenly' } );
 			render();
 
-			expect( child1.position.x ).equals( -container.width / 2 + child1.width / 2 );
-			expect( child2.position.x ).equals( -container.width / 2 + child2.width / 2 );
-			expect( child3.position.x ).equals( -container.width / 2 + child3.width / 2 );
-			expect( child4.position.x ).equals( -container.width / 2 + child4.width / 2 );
-			expect( child5.position.x ).equals( -container.width / 2 + child5.width / 2 );
+			expect( child1.position.x ).equals( -container._width._value / 2 + child1._width._value / 2 );
+			expect( child2.position.x ).equals( -container._width._value / 2 + child2._width._value / 2 );
+			expect( child3.position.x ).equals( -container._width._value / 2 + child3._width._value / 2 );
+			expect( child4.position.x ).equals( -container._width._value / 2 + child4._width._value / 2 );
+			expect( child5.position.x ).equals( -container._width._value / 2 + child5._width._value / 2 );
 
 			container.set( { justifyContent: 'space-between' } );
 			render();
 
-			expect( child1.position.x ).equals( -container.width / 2 + child1.width / 2 );
-			expect( child2.position.x ).equals( -container.width / 2 + child2.width / 2 );
-			expect( child3.position.x ).equals( -container.width / 2 + child3.width / 2 );
-			expect( child4.position.x ).equals( -container.width / 2 + child4.width / 2 );
-			expect( child5.position.x ).equals( -container.width / 2 + child5.width / 2 );
+			expect( child1.position.x ).equals( -container._width._value / 2 + child1._width._value / 2 );
+			expect( child2.position.x ).equals( -container._width._value / 2 + child2._width._value / 2 );
+			expect( child3.position.x ).equals( -container._width._value / 2 + child3._width._value / 2 );
+			expect( child4.position.x ).equals( -container._width._value / 2 + child4._width._value / 2 );
+			expect( child5.position.x ).equals( -container._width._value / 2 + child5._width._value / 2 );
 
 			// row -> y snap align
-			container.set( { contentDirection: 'row', justifyContent: 'center' } );
+			container.set( { flexDirection: 'row', justifyContent: 'center' } );
 			render();
 
-			expect( child1.position.y ).equals( container.height / 2 - child1.height / 2 );
-			expect( child2.position.y ).equals( container.height / 2 - child2.height / 2 );
-			expect( child3.position.y ).equals( container.height / 2 - child3.height / 2 );
-			expect( child4.position.y ).equals( container.height / 2 - child4.height / 2 );
-			expect( child5.position.y ).equals( container.height / 2 - child5.height / 2 );
+			expect( child1.position.y ).equals( container._height._value / 2 - child1._height._value / 2 );
+			expect( child2.position.y ).equals( container._height._value / 2 - child2._height._value / 2 );
+			expect( child3.position.y ).equals( container._height._value / 2 - child3._height._value / 2 );
+			expect( child4.position.y ).equals( container._height._value / 2 - child4._height._value / 2 );
+			expect( child5.position.y ).equals( container._height._value / 2 - child5._height._value / 2 );
 
 			container.set( { justifyContent: 'start' } );
 			render();
 
-			expect( child1.position.y ).equals( container.height / 2 - child1.height / 2 );
-			expect( child2.position.y ).equals( container.height / 2 - child2.height / 2 );
-			expect( child3.position.y ).equals( container.height / 2 - child3.height / 2 );
-			expect( child4.position.y ).equals( container.height / 2 - child4.height / 2 );
-			expect( child5.position.y ).equals( container.height / 2 - child5.height / 2 );
+			expect( child1.position.y ).equals( container._height._value / 2 - child1._height._value / 2 );
+			expect( child2.position.y ).equals( container._height._value / 2 - child2._height._value / 2 );
+			expect( child3.position.y ).equals( container._height._value / 2 - child3._height._value / 2 );
+			expect( child4.position.y ).equals( container._height._value / 2 - child4._height._value / 2 );
+			expect( child5.position.y ).equals( container._height._value / 2 - child5._height._value / 2 );
 
 			container.set( { justifyContent: 'end' } );
 			render();
 
-			expect( child1.position.y ).equals( container.height / 2 - child1.height / 2 );
-			expect( child2.position.y ).equals( container.height / 2 - child2.height / 2 );
-			expect( child3.position.y ).equals( container.height / 2 - child3.height / 2 );
-			expect( child4.position.y ).equals( container.height / 2 - child4.height / 2 );
-			expect( child5.position.y ).equals( container.height / 2 - child5.height / 2 );
+			expect( child1.position.y ).equals( container._height._value / 2 - child1._height._value / 2 );
+			expect( child2.position.y ).equals( container._height._value / 2 - child2._height._value / 2 );
+			expect( child3.position.y ).equals( container._height._value / 2 - child3._height._value / 2 );
+			expect( child4.position.y ).equals( container._height._value / 2 - child4._height._value / 2 );
+			expect( child5.position.y ).equals( container._height._value / 2 - child5._height._value / 2 );
 
 			container.set( { justifyContent: 'space-around' } );
 			render();
 
-			expect( child1.position.y ).equals( container.height / 2 - child1.height / 2 );
-			expect( child2.position.y ).equals( container.height / 2 - child2.height / 2 );
-			expect( child3.position.y ).equals( container.height / 2 - child3.height / 2 );
-			expect( child4.position.y ).equals( container.height / 2 - child4.height / 2 );
-			expect( child5.position.y ).equals( container.height / 2 - child5.height / 2 );
+			expect( child1.position.y ).equals( container._height._value / 2 - child1._height._value / 2 );
+			expect( child2.position.y ).equals( container._height._value / 2 - child2._height._value / 2 );
+			expect( child3.position.y ).equals( container._height._value / 2 - child3._height._value / 2 );
+			expect( child4.position.y ).equals( container._height._value / 2 - child4._height._value / 2 );
+			expect( child5.position.y ).equals( container._height._value / 2 - child5._height._value / 2 );
 
 			container.set( { justifyContent: 'space-evenly' } );
 			render();
 
-			expect( child1.position.y ).equals( container.height / 2 - child1.height / 2 );
-			expect( child2.position.y ).equals( container.height / 2 - child2.height / 2 );
-			expect( child3.position.y ).equals( container.height / 2 - child3.height / 2 );
-			expect( child4.position.y ).equals( container.height / 2 - child4.height / 2 );
-			expect( child5.position.y ).equals( container.height / 2 - child5.height / 2 );
+			expect( child1.position.y ).equals( container._height._value / 2 - child1._height._value / 2 );
+			expect( child2.position.y ).equals( container._height._value / 2 - child2._height._value / 2 );
+			expect( child3.position.y ).equals( container._height._value / 2 - child3._height._value / 2 );
+			expect( child4.position.y ).equals( container._height._value / 2 - child4._height._value / 2 );
+			expect( child5.position.y ).equals( container._height._value / 2 - child5._height._value / 2 );
 
 			container.set( { justifyContent: 'space-between' } );
 			render();
 
-			expect( child1.position.y ).equals( container.height / 2 - child1.height / 2 );
-			expect( child2.position.y ).equals( container.height / 2 - child2.height / 2 );
-			expect( child3.position.y ).equals( container.height / 2 - child3.height / 2 );
-			expect( child4.position.y ).equals( container.height / 2 - child4.height / 2 );
-			expect( child5.position.y ).equals( container.height / 2 - child5.height / 2 );
+			expect( child1.position.y ).equals( container._height._value / 2 - child1._height._value / 2 );
+			expect( child2.position.y ).equals( container._height._value / 2 - child2._height._value / 2 );
+			expect( child3.position.y ).equals( container._height._value / 2 - child3._height._value / 2 );
+			expect( child4.position.y ).equals( container._height._value / 2 - child4._height._value / 2 );
+			expect( child5.position.y ).equals( container._height._value / 2 - child5._height._value / 2 );
 		} );
 
 	} );
@@ -154,118 +154,118 @@ describe( 'AlignItems', function () {
 	describe( '.END', () => {
 
 		beforeEach( () => {
-			container.set( { contentDirection: 'column', justifyContent: 'center', alignItems: 'end' } );
+			container.set( { flexDirection: 'column', justifyContent: 'center', alignItems: 'end' } );
 			render();
 		} );
 
 		it( 'Items should snap to half their size', () => {
 
 			// columns -> x snap align
-			expect( child1.position.x ).equals( container.width / 2 - child1.width / 2 );
-			expect( child2.position.x ).equals( container.width / 2 - child2.width / 2 );
-			expect( child3.position.x ).equals( container.width / 2 - child3.width / 2 );
-			expect( child4.position.x ).equals( container.width / 2 - child4.width / 2 );
-			expect( child5.position.x ).equals( container.width / 2 - child5.width / 2 );
+			expect( child1.position.x ).equals( container._width._value / 2 - child1._width._value / 2 );
+			expect( child2.position.x ).equals( container._width._value / 2 - child2._width._value / 2 );
+			expect( child3.position.x ).equals( container._width._value / 2 - child3._width._value / 2 );
+			expect( child4.position.x ).equals( container._width._value / 2 - child4._width._value / 2 );
+			expect( child5.position.x ).equals( container._width._value / 2 - child5._width._value / 2 );
 
 			container.set( { justifyContent: 'start' } );
 			render();
 
-			expect( child1.position.x ).equals( container.width / 2 - child1.width / 2 );
-			expect( child2.position.x ).equals( container.width / 2 - child2.width / 2 );
-			expect( child3.position.x ).equals( container.width / 2 - child3.width / 2 );
-			expect( child4.position.x ).equals( container.width / 2 - child4.width / 2 );
-			expect( child5.position.x ).equals( container.width / 2 - child5.width / 2 );
+			expect( child1.position.x ).equals( container._width._value / 2 - child1._width._value / 2 );
+			expect( child2.position.x ).equals( container._width._value / 2 - child2._width._value / 2 );
+			expect( child3.position.x ).equals( container._width._value / 2 - child3._width._value / 2 );
+			expect( child4.position.x ).equals( container._width._value / 2 - child4._width._value / 2 );
+			expect( child5.position.x ).equals( container._width._value / 2 - child5._width._value / 2 );
 
 			container.set( { justifyContent: 'end' } );
 			render();
 
-			expect( child1.position.x ).equals( container.width / 2 - child1.width / 2 );
-			expect( child2.position.x ).equals( container.width / 2 - child2.width / 2 );
-			expect( child3.position.x ).equals( container.width / 2 - child3.width / 2 );
-			expect( child4.position.x ).equals( container.width / 2 - child4.width / 2 );
-			expect( child5.position.x ).equals( container.width / 2 - child5.width / 2 );
+			expect( child1.position.x ).equals( container._width._value / 2 - child1._width._value / 2 );
+			expect( child2.position.x ).equals( container._width._value / 2 - child2._width._value / 2 );
+			expect( child3.position.x ).equals( container._width._value / 2 - child3._width._value / 2 );
+			expect( child4.position.x ).equals( container._width._value / 2 - child4._width._value / 2 );
+			expect( child5.position.x ).equals( container._width._value / 2 - child5._width._value / 2 );
 
 			container.set( { justifyContent: 'space-around' } );
 			render();
 
-			expect( child1.position.x ).equals( container.width / 2 - child1.width / 2 );
-			expect( child2.position.x ).equals( container.width / 2 - child2.width / 2 );
-			expect( child3.position.x ).equals( container.width / 2 - child3.width / 2 );
-			expect( child4.position.x ).equals( container.width / 2 - child4.width / 2 );
-			expect( child5.position.x ).equals( container.width / 2 - child5.width / 2 );
+			expect( child1.position.x ).equals( container._width._value / 2 - child1._width._value / 2 );
+			expect( child2.position.x ).equals( container._width._value / 2 - child2._width._value / 2 );
+			expect( child3.position.x ).equals( container._width._value / 2 - child3._width._value / 2 );
+			expect( child4.position.x ).equals( container._width._value / 2 - child4._width._value / 2 );
+			expect( child5.position.x ).equals( container._width._value / 2 - child5._width._value / 2 );
 
 			container.set( { justifyContent: 'space-evenly' } );
 			render();
 
-			expect( child1.position.x ).equals( container.width / 2 - child1.width / 2 );
-			expect( child2.position.x ).equals( container.width / 2 - child2.width / 2 );
-			expect( child3.position.x ).equals( container.width / 2 - child3.width / 2 );
-			expect( child4.position.x ).equals( container.width / 2 - child4.width / 2 );
-			expect( child5.position.x ).equals( container.width / 2 - child5.width / 2 );
+			expect( child1.position.x ).equals( container._width._value / 2 - child1._width._value / 2 );
+			expect( child2.position.x ).equals( container._width._value / 2 - child2._width._value / 2 );
+			expect( child3.position.x ).equals( container._width._value / 2 - child3._width._value / 2 );
+			expect( child4.position.x ).equals( container._width._value / 2 - child4._width._value / 2 );
+			expect( child5.position.x ).equals( container._width._value / 2 - child5._width._value / 2 );
 
 			container.set( { justifyContent: 'space-between' } );
 			render();
 
-			expect( child1.position.x ).equals( container.width / 2 - child1.width / 2 );
-			expect( child2.position.x ).equals( container.width / 2 - child2.width / 2 );
-			expect( child3.position.x ).equals( container.width / 2 - child3.width / 2 );
-			expect( child4.position.x ).equals( container.width / 2 - child4.width / 2 );
-			expect( child5.position.x ).equals( container.width / 2 - child5.width / 2 );
+			expect( child1.position.x ).equals( container._width._value / 2 - child1._width._value / 2 );
+			expect( child2.position.x ).equals( container._width._value / 2 - child2._width._value / 2 );
+			expect( child3.position.x ).equals( container._width._value / 2 - child3._width._value / 2 );
+			expect( child4.position.x ).equals( container._width._value / 2 - child4._width._value / 2 );
+			expect( child5.position.x ).equals( container._width._value / 2 - child5._width._value / 2 );
 
 			// row -> y snap align
-			container.set( { contentDirection: 'row', justifyContent: 'center' } );
+			container.set( { flexDirection: 'row', justifyContent: 'center' } );
 			render();
 
-			expect( child1.position.y ).equals( -container.height / 2 + child1.height / 2 );
-			expect( child2.position.y ).equals( -container.height / 2 + child2.height / 2 );
-			expect( child3.position.y ).equals( -container.height / 2 + child3.height / 2 );
-			expect( child4.position.y ).equals( -container.height / 2 + child4.height / 2 );
-			expect( child5.position.y ).equals( -container.height / 2 + child5.height / 2 );
+			expect( child1.position.y ).equals( -container._height._value / 2 + child1._height._value / 2 );
+			expect( child2.position.y ).equals( -container._height._value / 2 + child2._height._value / 2 );
+			expect( child3.position.y ).equals( -container._height._value / 2 + child3._height._value / 2 );
+			expect( child4.position.y ).equals( -container._height._value / 2 + child4._height._value / 2 );
+			expect( child5.position.y ).equals( -container._height._value / 2 + child5._height._value / 2 );
 
 			container.set( { justifyContent: 'start' } );
 			render();
 
-			expect( child1.position.y ).equals( -container.height / 2 + child1.height / 2 );
-			expect( child2.position.y ).equals( -container.height / 2 + child2.height / 2 );
-			expect( child3.position.y ).equals( -container.height / 2 + child3.height / 2 );
-			expect( child4.position.y ).equals( -container.height / 2 + child4.height / 2 );
-			expect( child5.position.y ).equals( -container.height / 2 + child5.height / 2 );
+			expect( child1.position.y ).equals( -container._height._value / 2 + child1._height._value / 2 );
+			expect( child2.position.y ).equals( -container._height._value / 2 + child2._height._value / 2 );
+			expect( child3.position.y ).equals( -container._height._value / 2 + child3._height._value / 2 );
+			expect( child4.position.y ).equals( -container._height._value / 2 + child4._height._value / 2 );
+			expect( child5.position.y ).equals( -container._height._value / 2 + child5._height._value / 2 );
 
 			container.set( { justifyContent: 'end' } );
 			render();
 
-			expect( child1.position.y ).equals( -container.height / 2 + child1.height / 2 );
-			expect( child2.position.y ).equals( -container.height / 2 + child2.height / 2 );
-			expect( child3.position.y ).equals( -container.height / 2 + child3.height / 2 );
-			expect( child4.position.y ).equals( -container.height / 2 + child4.height / 2 );
-			expect( child5.position.y ).equals( -container.height / 2 + child5.height / 2 );
+			expect( child1.position.y ).equals( -container._height._value / 2 + child1._height._value / 2 );
+			expect( child2.position.y ).equals( -container._height._value / 2 + child2._height._value / 2 );
+			expect( child3.position.y ).equals( -container._height._value / 2 + child3._height._value / 2 );
+			expect( child4.position.y ).equals( -container._height._value / 2 + child4._height._value / 2 );
+			expect( child5.position.y ).equals( -container._height._value / 2 + child5._height._value / 2 );
 
 			container.set( { justifyContent: 'space-around' } );
 			render();
 
-			expect( child1.position.y ).equals( -container.height / 2 + child1.height / 2 );
-			expect( child2.position.y ).equals( -container.height / 2 + child2.height / 2 );
-			expect( child3.position.y ).equals( -container.height / 2 + child3.height / 2 );
-			expect( child4.position.y ).equals( -container.height / 2 + child4.height / 2 );
-			expect( child5.position.y ).equals( -container.height / 2 + child5.height / 2 );
+			expect( child1.position.y ).equals( -container._height._value / 2 + child1._height._value / 2 );
+			expect( child2.position.y ).equals( -container._height._value / 2 + child2._height._value / 2 );
+			expect( child3.position.y ).equals( -container._height._value / 2 + child3._height._value / 2 );
+			expect( child4.position.y ).equals( -container._height._value / 2 + child4._height._value / 2 );
+			expect( child5.position.y ).equals( -container._height._value / 2 + child5._height._value / 2 );
 
 			container.set( { justifyContent: 'space-evenly' } );
 			render();
 
-			expect( child1.position.y ).equals( -container.height / 2 + child1.height / 2 );
-			expect( child2.position.y ).equals( -container.height / 2 + child2.height / 2 );
-			expect( child3.position.y ).equals( -container.height / 2 + child3.height / 2 );
-			expect( child4.position.y ).equals( -container.height / 2 + child4.height / 2 );
-			expect( child5.position.y ).equals( -container.height / 2 + child5.height / 2 );
+			expect( child1.position.y ).equals( -container._height._value / 2 + child1._height._value / 2 );
+			expect( child2.position.y ).equals( -container._height._value / 2 + child2._height._value / 2 );
+			expect( child3.position.y ).equals( -container._height._value / 2 + child3._height._value / 2 );
+			expect( child4.position.y ).equals( -container._height._value / 2 + child4._height._value / 2 );
+			expect( child5.position.y ).equals( -container._height._value / 2 + child5._height._value / 2 );
 
 			container.set( { justifyContent: 'space-between' } );
 			render();
 
-			expect( child1.position.y ).equals( -container.height / 2 + child1.height / 2 );
-			expect( child2.position.y ).equals( -container.height / 2 + child2.height / 2 );
-			expect( child3.position.y ).equals( -container.height / 2 + child3.height / 2 );
-			expect( child4.position.y ).equals( -container.height / 2 + child4.height / 2 );
-			expect( child5.position.y ).equals( -container.height / 2 + child5.height / 2 );
+			expect( child1.position.y ).equals( -container._height._value / 2 + child1._height._value / 2 );
+			expect( child2.position.y ).equals( -container._height._value / 2 + child2._height._value / 2 );
+			expect( child3.position.y ).equals( -container._height._value / 2 + child3._height._value / 2 );
+			expect( child4.position.y ).equals( -container._height._value / 2 + child4._height._value / 2 );
+			expect( child5.position.y ).equals( -container._height._value / 2 + child5._height._value / 2 );
 		} );
 
 	} );
@@ -273,7 +273,7 @@ describe( 'AlignItems', function () {
 	describe( '.CENTER', () => {
 
 		beforeEach( () => {
-			container.set( { contentDirection: 'column', justifyContent: 'center', alignItems: 'center' } );
+			container.set( { flexDirection: 'column', justifyContent: 'center', alignItems: 'center' } );
 			render();
 		} );
 
@@ -332,7 +332,7 @@ describe( 'AlignItems', function () {
 			expect( child5.position.x ).equals( 0 );
 
 			// row -> y snap align
-			container.set( { contentDirection: 'row', justifyContent: 'center' } );
+			container.set( { flexDirection: 'row', justifyContent: 'center' } );
 			render();
 
 			expect( child1.position.y ).equals( 0 );
@@ -392,7 +392,14 @@ describe( 'AlignItems', function () {
 	describe( '.STRETCH', () => {
 
 		beforeEach( () => {
-			container.set( { contentDirection: 'column', justifyContent: 'center', alignItems: 'stretch' } );
+			container.set( { flexDirection: 'column', justifyContent: 'center', alignItems: 'stretch' } );
+
+			// child1 keep its fixed size
+			child2.set({width:'auto',height:'auto'});
+			child3.set({width:'auto',height:'auto'});
+			child4.set({width:'auto',height:'auto'});
+			child5.set({width:'auto',height:'auto'});
+
 			render();
 		} );
 
@@ -451,7 +458,7 @@ describe( 'AlignItems', function () {
 			expect( child5.position.x ).equals( 0 );
 
 			// row -> y snap align
-			container.set( { contentDirection: 'row', justifyContent: 'center' } );
+			container.set( { flexDirection: 'row', justifyContent: 'center' } );
 			render();
 
 			expect( child1.position.y ).equals( 0 );
@@ -509,111 +516,118 @@ describe( 'AlignItems', function () {
 		it( 'Items should fill their parent size', () => {
 
 			// columns -> x snap align
-			expect( child1.getOffsetWidth() ).equals( container.width );
-			expect( child2.getOffsetWidth() ).equals( container.width );
-			expect( child3.getOffsetWidth() ).equals( container.width );
-			expect( child4.getOffsetWidth() ).equals( container.width );
-			expect( child5.getOffsetWidth() ).equals( container.width );
+			expect( child1._bounds._offsetWidth ).equals( 0.1 );
+			expect( child2._bounds._offsetWidth ).equals( container._width._value );
+			expect( child3._bounds._offsetWidth ).equals( container._width._value );
+			expect( child4._bounds._offsetWidth ).equals( container._width._value );
+			expect( child5._bounds._offsetWidth ).equals( container._width._value );
 
 			container.set( { justifyContent: 'start' } );
 			render();
 
-			expect( child1.getOffsetWidth() ).equals( container.width );
-			expect( child2.getOffsetWidth() ).equals( container.width );
-			expect( child3.getOffsetWidth() ).equals( container.width );
-			expect( child4.getOffsetWidth() ).equals( container.width );
-			expect( child5.getOffsetWidth() ).equals( container.width );
+			expect( child1._bounds._offsetWidth ).equals( 0.1 );
+			expect( child2._bounds._offsetWidth ).equals( container._width._value );
+			expect( child3._bounds._offsetWidth ).equals( container._width._value );
+			expect( child4._bounds._offsetWidth ).equals( container._width._value );
+			expect( child5._bounds._offsetWidth ).equals( container._width._value );
 
 			container.set( { justifyContent: 'end' } );
 			render();
 
-			expect( child1.getOffsetWidth() ).equals( container.width );
-			expect( child2.getOffsetWidth() ).equals( container.width );
-			expect( child3.getOffsetWidth() ).equals( container.width );
-			expect( child4.getOffsetWidth() ).equals( container.width );
-			expect( child5.getOffsetWidth() ).equals( container.width );
+			expect( child1._bounds._offsetWidth ).equals( 0.1 );
+			expect( child2._bounds._offsetWidth ).equals( container._width._value );
+			expect( child3._bounds._offsetWidth ).equals( container._width._value );
+			expect( child4._bounds._offsetWidth ).equals( container._width._value );
+			expect( child5._bounds._offsetWidth ).equals( container._width._value );
 
 			container.set( { justifyContent: 'space-around' } );
 			render();
 
-			expect( child1.getOffsetWidth() ).equals( container.width );
-			expect( child2.getOffsetWidth() ).equals( container.width );
-			expect( child3.getOffsetWidth() ).equals( container.width );
-			expect( child4.getOffsetWidth() ).equals( container.width );
-			expect( child5.getOffsetWidth() ).equals( container.width );
+			expect( child1._bounds._offsetWidth ).equals( 0.1 );
+			expect( child2._bounds._offsetWidth ).equals( container._width._value );
+			expect( child3._bounds._offsetWidth ).equals( container._width._value );
+			expect( child4._bounds._offsetWidth ).equals( container._width._value );
+			expect( child5._bounds._offsetWidth ).equals( container._width._value );
 
 			container.set( { justifyContent: 'space-evenly' } );
 			render();
 
-			expect( child1.getOffsetWidth() ).equals( container.width );
-			expect( child2.getOffsetWidth() ).equals( container.width );
-			expect( child3.getOffsetWidth() ).equals( container.width );
-			expect( child4.getOffsetWidth() ).equals( container.width );
-			expect( child5.getOffsetWidth() ).equals( container.width );
+			expect( child1._bounds._offsetWidth ).equals( 0.1 );
+			expect( child2._bounds._offsetWidth ).equals( container._width._value );
+			expect( child3._bounds._offsetWidth ).equals( container._width._value );
+			expect( child4._bounds._offsetWidth ).equals( container._width._value );
+			expect( child5._bounds._offsetWidth ).equals( container._width._value );
 
 			container.set( { justifyContent: 'space-between' } );
 			render();
 
-			expect( child1.getOffsetWidth() ).equals( container.width );
-			expect( child2.getOffsetWidth() ).equals( container.width );
-			expect( child3.getOffsetWidth() ).equals( container.width );
-			expect( child4.getOffsetWidth() ).equals( container.width );
-			expect( child5.getOffsetWidth() ).equals( container.width );
+			expect( child1._bounds._offsetWidth ).equals( 0.1 );
+			expect( child2._bounds._offsetWidth ).equals( container._width._value );
+			expect( child3._bounds._offsetWidth ).equals( container._width._value );
+			expect( child4._bounds._offsetWidth ).equals( container._width._value );
+			expect( child5._bounds._offsetWidth ).equals( container._width._value );
 
 			// row -> y snap align
-			container.set( { contentDirection: 'row', justifyContent: 'center' } );
+			container.set( { flexDirection: 'row', justifyContent: 'center' } );
 			render();
 
-			expect( child1.getOffsetHeight() ).equals( container.height );
-			expect( child2.getOffsetHeight() ).equals( container.height );
-			expect( child3.getOffsetHeight() ).equals( container.height );
-			expect( child4.getOffsetHeight() ).equals( container.height );
-			expect( child5.getOffsetHeight() ).equals( container.height );
+			expect( child1._bounds._offsetHeight  ).equals( 0.1 );
+			expect( child2._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child3._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child4._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child5._bounds._offsetHeight  ).equals( container._height._value );
 
 			container.set( { justifyContent: 'start' } );
 			render();
 
-			expect( child1.getOffsetHeight() ).equals( container.height );
-			expect( child2.getOffsetHeight() ).equals( container.height );
-			expect( child3.getOffsetHeight() ).equals( container.height );
-			expect( child4.getOffsetHeight() ).equals( container.height );
-			expect( child5.getOffsetHeight() ).equals( container.height );
+			expect( child1._bounds._offsetHeight  ).equals( 0.1 );
+			expect( child2._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child3._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child4._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child5._bounds._offsetHeight  ).equals( container._height._value );
 
 			container.set( { justifyContent: 'end' } );
 			render();
 
-			expect( child1.getOffsetHeight() ).equals( container.height );
-			expect( child2.getOffsetHeight() ).equals( container.height );
-			expect( child3.getOffsetHeight() ).equals( container.height );
-			expect( child4.getOffsetHeight() ).equals( container.height );
-			expect( child5.getOffsetHeight() ).equals( container.height );
+			expect( child1._bounds._offsetHeight  ).equals( 0.1 );
+			expect( child2._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child3._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child4._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child5._bounds._offsetHeight  ).equals( container._height._value );
 
 			container.set( { justifyContent: 'space-around' } );
 			render();
 
-			expect( child1.getOffsetHeight() ).equals( container.height );
-			expect( child2.getOffsetHeight() ).equals( container.height );
-			expect( child3.getOffsetHeight() ).equals( container.height );
-			expect( child4.getOffsetHeight() ).equals( container.height );
-			expect( child5.getOffsetHeight() ).equals( container.height );
+			expect( child1._bounds._offsetHeight  ).equals( 0.1 );
+			expect( child2._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child3._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child4._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child5._bounds._offsetHeight  ).equals( container._height._value );
 
 			container.set( { justifyContent: 'space-evenly' } );
 			render();
 
-			expect( child1.getOffsetHeight() ).equals( container.height );
-			expect( child2.getOffsetHeight() ).equals( container.height );
-			expect( child3.getOffsetHeight() ).equals( container.height );
-			expect( child4.getOffsetHeight() ).equals( container.height );
-			expect( child5.getOffsetHeight() ).equals( container.height );
+			expect( child1._bounds._offsetHeight  ).equals( 0.1 );
+			expect( child2._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child3._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child4._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child5._bounds._offsetHeight  ).equals( container._height._value );
 
 			container.set( { justifyContent: 'space-between' } );
 			render();
 
-			expect( child1.getOffsetHeight() ).equals( container.height );
-			expect( child2.getOffsetHeight() ).equals( container.height );
-			expect( child3.getOffsetHeight() ).equals( container.height );
-			expect( child4.getOffsetHeight() ).equals( container.height );
-			expect( child5.getOffsetHeight() ).equals( container.height );
+			expect( child1._bounds._offsetHeight  ).equals( 0.1 );
+			expect( child2._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child3._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child4._bounds._offsetHeight  ).equals( container._height._value );
+			expect( child5._bounds._offsetHeight  ).equals( container._height._value );
+
+			// restore
+			child2.set({width:0.1});
+			child3.set({width:0.1});
+			child4.set({width:0.1});
+			child5.set({width:0.1});
+
 		} );
 
 	} );
diff --git a/tests/specs/utils/block-layout/cases/column-center--reverse.js b/tests/specs/utils/block-layout/cases/column-center--reverse.js
index 5acd3845..c699571c 100644
--- a/tests/specs/utils/block-layout/cases/column-center--reverse.js
+++ b/tests/specs/utils/block-layout/cases/column-center--reverse.js
@@ -3,7 +3,7 @@ import { preloadFonts } from '../../../../utils/TestFonts.js';
 import { fiveBlockContainer } from '../../../../utils/TestStructure.js';
 import { imprecise } from '../../../../utils/TestNumber.js';
 
-describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"center"}', function () {
+describe('Layout Case : {flexDirection:"column-reverse", justifyContent:"center"}', function () {
 
 	let scene, camera, renderer, render;
 	let fontFamily;
@@ -35,8 +35,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"cent
 
 	beforeEach( function () {
 
-		containerBB.set({contentDirection: 'column-reverse', justifyContent:'center'});
-		containerCB.set({contentDirection: 'column-reverse', justifyContent:'center'});
+		containerBB.set({flexDirection: 'column-reverse', justifyContent:'center'});
+		containerCB.set({flexDirection: 'column-reverse', justifyContent:'center'});
 
 
 
@@ -47,8 +47,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"cent
 
 	it("Third child should snap on container center", function () {
 
-		expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY );
-		expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY );
+		expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY );
+		expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY );
 
 	});
 
@@ -62,8 +62,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"cent
 
 		render();
 
-		expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY + ( - child3BB._margin.x + child3BB._margin.z) / 2 );
-		expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY + ( - child3CB._margin.x + child3CB._margin.z) / 2 );
+		expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY + ( - child3BB._margin._value.x + child3BB._margin._value.z) / 2 );
+		expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY + ( - child3CB._margin._value.x + child3CB._margin._value.z) / 2 );
 	});
 
 	it("Third child should snap on container center minus margin mixed", function () {
@@ -77,8 +77,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"cent
 
 		render();
 
-		expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY + ( - child3BB._margin.x + child3BB._margin.z ) / 2);
-		expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY + ( - child3CB._margin.x + child3CB._margin.z ) / 2);
+		expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY + ( - child3BB._margin._value.x + child3BB._margin._value.z ) / 2);
+		expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY + ( - child3CB._margin._value.x + child3CB._margin._value.z ) / 2);
 	});
 
 	describe('+ {alignItems:"center"}', function() {
@@ -94,8 +94,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"cent
 			render();
 
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX );
 		});
 
 		it("Any child should snap on container center minus margin", function () {
@@ -108,8 +108,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"cent
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX + ( - child3BB._margin.y + child3BB._margin.w) / 2 );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX + ( - child3CB._margin.y + child3CB._margin.w) / 2 );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -122,8 +122,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"cent
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX + ( - child3BB._margin.y + child3BB._margin.w ) / 2);
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX + ( - child3CB._margin.y + child3CB._margin.w ) / 2);
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX + ( - child3BB._margin._value.y + child3BB._margin._value.w ) / 2);
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX + ( - child3CB._margin._value.y + child3CB._margin._value.w ) / 2);
 		});
 
 	});
@@ -140,8 +140,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"cent
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX - containerBB.offsetWidth/2 + child3BB.offsetWidth/2 );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX - containerCB.offsetWidth/2 + child3CB.offsetWidth/2 );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child3BB._bounds._offsetWidth/2 );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child3CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container left minus margin", function () {
@@ -154,8 +154,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"cent
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child3BB.offsetWidth/2 + child3BB._margin.w );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child3CB.offsetWidth/2 + child3CB._margin.w );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child3BB._bounds._offsetWidth/2 + child3BB._margin._value.w );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child3CB._bounds._offsetWidth/2 + child3CB._margin._value.w );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -168,8 +168,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"cent
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child3BB.offsetWidth/2 + child3BB._margin.w );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child3CB.offsetWidth/2 + child3CB._margin.w );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child3BB._bounds._offsetWidth/2 + child3BB._margin._value.w );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child3CB._bounds._offsetWidth/2 + child3CB._margin._value.w );
 		});
 
 	});
@@ -187,8 +187,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"cent
 			render();
 
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX + containerBB.offsetWidth/2 - child3BB.offsetWidth/2 );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX + containerCB.offsetWidth/2 - child3CB.offsetWidth/2 );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child3BB._bounds._offsetWidth/2 );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child3CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container right minus margin", function () {
@@ -201,8 +201,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"cent
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child3BB.offsetWidth/2 - child3BB._margin.y );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child3CB.offsetWidth/2 - child3CB._margin.y );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child3BB._bounds._offsetWidth/2 - child3BB._margin._value.y );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child3CB._bounds._offsetWidth/2 - child3CB._margin._value.y );
 		});
 
 		it("Any child should snap on container right minus margin mixed", function () {
@@ -215,8 +215,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"cent
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child3BB.offsetWidth/2 - child3BB._margin.y );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child3CB.offsetWidth/2 - child3CB._margin.y );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child3BB._bounds._offsetWidth/2 - child3BB._margin._value.y );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child3CB._bounds._offsetWidth/2 - child3CB._margin._value.y );
 		});
 
 	});
diff --git a/tests/specs/utils/block-layout/cases/column-center.js b/tests/specs/utils/block-layout/cases/column-center.js
index 95f391e2..5308ccce 100644
--- a/tests/specs/utils/block-layout/cases/column-center.js
+++ b/tests/specs/utils/block-layout/cases/column-center.js
@@ -3,7 +3,7 @@ import { preloadFonts } from '../../../../utils/TestFonts.js';
 import { fiveBlockContainer } from '../../../../utils/TestStructure.js';
 import { imprecise } from '../../../../utils/TestNumber.js';
 
-describe('Layout Case : {contentDirection:"column", justifyContent:"center"}', function () {
+describe('Layout Case : {flexDirection:"column", justifyContent:"center"}', function () {
 
 	let scene, camera, renderer, render;
 	let fontFamily;
@@ -35,8 +35,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"center"}', f
 
 	beforeEach( function () {
 
-		containerBB.set({contentDirection: 'column', justifyContent:'center'});
-		containerCB.set({contentDirection: 'column', justifyContent:'center'});
+		containerBB.set({flexDirection: 'column', justifyContent:'center'});
+		containerCB.set({flexDirection: 'column', justifyContent:'center'});
 
 
 
@@ -46,8 +46,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"center"}', f
 
 	it("Third child should snap on container center", function () {
 
-		expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY );
-		expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY );
+		expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY );
+		expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY );
 
 	});
 
@@ -60,8 +60,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"center"}', f
 
 		render();
 
-		expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY + ( - child3BB._margin.x + child3BB._margin.z) / 2 );
-		expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY + ( - child3CB._margin.x + child3CB._margin.z) / 2 );
+		expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY + ( - child3BB._margin._value.x + child3BB._margin._value.z) / 2 );
+		expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY + ( - child3CB._margin._value.x + child3CB._margin._value.z) / 2 );
 	});
 
 	it("Third child should snap on container center minus margin mixed", function () {
@@ -74,8 +74,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"center"}', f
 
 		render();
 
-		expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY + ( - child3BB._margin.x + child3BB._margin.z ) / 2);
-		expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY + ( - child3CB._margin.x + child3CB._margin.z ) / 2);
+		expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY + ( - child3BB._margin._value.x + child3BB._margin._value.z ) / 2);
+		expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY + ( - child3CB._margin._value.x + child3CB._margin._value.z ) / 2);
 	});
 
 	describe('+ {alignItems:"center"}', function() {
@@ -91,8 +91,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"center"}', f
 			render();
 
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX );
 		});
 
 		it("Any child should snap on container center minus margin", function () {
@@ -102,8 +102,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"center"}', f
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX + ( - child3BB._margin.y + child3BB._margin.w) / 2 );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX + ( - child3CB._margin.y + child3CB._margin.w) / 2 );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX + ( - child3BB._margin._value.y + child3BB._margin._value.w) / 2 );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX + ( - child3CB._margin._value.y + child3CB._margin._value.w) / 2 );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -113,8 +113,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"center"}', f
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX + ( - child3BB._margin.y + child3BB._margin.w ) / 2);
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX + ( - child3CB._margin.y + child3CB._margin.w ) / 2);
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX + ( - child3BB._margin._value.y + child3BB._margin._value.w ) / 2);
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX + ( - child3CB._margin._value.y + child3CB._margin._value.w ) / 2);
 		});
 
 	});
@@ -131,8 +131,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"center"}', f
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX - containerBB.offsetWidth/2 + child3BB.offsetWidth/2 );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX - containerCB.offsetWidth/2 + child3CB.offsetWidth/2 );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child3BB._bounds._offsetWidth/2 );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child3CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container left minus margin", function () {
@@ -142,8 +142,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"center"}', f
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child3BB.offsetWidth/2 + child3BB._margin.w );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child3CB.offsetWidth/2 + child3CB._margin.w );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child3BB._bounds._offsetWidth/2 + child3BB._margin._value.w );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child3CB._bounds._offsetWidth/2 + child3CB._margin._value.w );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -153,8 +153,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"center"}', f
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child3BB.offsetWidth/2 + child3BB._margin.w );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child3CB.offsetWidth/2 + child3CB._margin.w );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child3BB._bounds._offsetWidth/2 + child3BB._margin._value.w );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child3CB._bounds._offsetWidth/2 + child3CB._margin._value.w );
 		});
 
 	});
@@ -171,8 +171,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"center"}', f
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX + containerBB.offsetWidth/2 - child3BB.offsetWidth/2 );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX + containerCB.offsetWidth/2 - child3CB.offsetWidth/2 );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child3BB._bounds._offsetWidth/2 );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child3CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container right minus margin", function () {
@@ -182,8 +182,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"center"}', f
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child3BB.offsetWidth/2 - child3BB._margin.y );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child3CB.offsetWidth/2 - child3CB._margin.y );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child3BB._bounds._offsetWidth/2 - child3BB._margin._value.y );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child3CB._bounds._offsetWidth/2 - child3CB._margin._value.y );
 		});
 
 		it("Any child should snap on container right minus margin mixed", function () {
@@ -193,8 +193,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"center"}', f
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child3BB.offsetWidth/2 - child3BB._margin.y );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child3CB.offsetWidth/2 - child3CB._margin.y );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child3BB._bounds._offsetWidth/2 - child3BB._margin._value.y );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child3CB._bounds._offsetWidth/2 - child3CB._margin._value.y );
 		});
 
 	});
diff --git a/tests/specs/utils/block-layout/cases/column-end--reverse.js b/tests/specs/utils/block-layout/cases/column-end--reverse.js
index e8bd657c..142edc8a 100644
--- a/tests/specs/utils/block-layout/cases/column-end--reverse.js
+++ b/tests/specs/utils/block-layout/cases/column-end--reverse.js
@@ -3,7 +3,7 @@ import { preloadFonts } from '../../../../utils/TestFonts.js';
 import { fiveBlockContainer } from '../../../../utils/TestStructure.js';
 import { imprecise } from '../../../../utils/TestNumber.js';
 
-describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"end"}', function () {
+describe('Layout Case : {flexDirection:"column-reverse", justifyContent:"end"}', function () {
 
 	let scene, camera, renderer, render;
 	let fontFamily;
@@ -35,8 +35,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"end"
 
 	beforeEach( function () {
 
-		containerBB.set({contentDirection: 'column-reverse', justifyContent:'end'});
-		containerCB.set({contentDirection: 'column-reverse', justifyContent:'end'});
+		containerBB.set({flexDirection: 'column-reverse', justifyContent:'end'});
+		containerCB.set({flexDirection: 'column-reverse', justifyContent:'end'});
 
 
 
@@ -47,11 +47,11 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"end"
 
 	it("Last child should snap on top on container", function () {
 
-		const containerTopBB = containerBB.centerY + containerBB.offsetHeight / 2;
-		const containerTopCB = containerCB.centerY + containerCB.offsetHeight / 2;
+		const containerTopBB = containerBB._bounds._centerY + containerBB._bounds._offsetHeight / 2;
+		const containerTopCB = containerCB._bounds._centerY + containerCB._bounds._offsetHeight / 2;
 
-		expect( imprecise( child5BB.position.y) ).equals( containerTopBB - child5BB.offsetHeight / 2 );
-		expect( imprecise( child5CB.position.y) ).equals( containerTopCB - child5CB.offsetHeight / 2 );
+		expect( imprecise( child5BB.position.y) ).equals( containerTopBB - child5BB._bounds._offsetHeight / 2 );
+		expect( imprecise( child5CB.position.y) ).equals( containerTopCB - child5CB._bounds._offsetHeight / 2 );
 	});
 
 	it("Last child should snap on top on container minus margin", function () {
@@ -64,11 +64,11 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"end"
 
 		render();
 
-		const containerTopBB = containerBB.centerY + containerBB.offsetHeight / 2;
-		const containerTopCB = containerCB.centerY + containerCB.offsetHeight / 2;
+		const containerTopBB = containerBB._bounds._centerY + containerBB._bounds._offsetHeight / 2;
+		const containerTopCB = containerCB._bounds._centerY + containerCB._bounds._offsetHeight / 2;
 
-		expect( imprecise( child5BB.position.y) ).equals( containerTopBB - child5BB.offsetHeight / 2 - child5BB._margin.x);
-		expect( imprecise( child5CB.position.y) ).equals( containerTopCB - child5CB.offsetHeight / 2 - child5CB._margin.x);
+		expect( imprecise( child5BB.position.y) ).equals( containerTopBB - child5BB._bounds._offsetHeight / 2 - child5BB._margin._value.x);
+		expect( imprecise( child5CB.position.y) ).equals( containerTopCB - child5CB._bounds._offsetHeight / 2 - child5CB._margin._value.x);
 	});
 
 
@@ -84,8 +84,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"end"
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX );
 		});
 
 
@@ -99,8 +99,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"end"
 
 			render();
 
-			expect( imprecise( child5BB.position.x) ).equals( containerBB.centerX + ( - child5BB._margin.y + child5BB._margin.w) / 2 );
-			expect( imprecise( child5CB.position.x) ).equals( containerCB.centerX + ( - child5CB._margin.y + child5CB._margin.w) / 2 );
+			expect( imprecise( child5BB.position.x) ).equals( containerBB._bounds._centerX + ( - child5BB._margin._value.y + child5BB._margin._value.w) / 2 );
+			expect( imprecise( child5CB.position.x) ).equals( containerCB._bounds._centerX + ( - child5CB._margin._value.y + child5CB._margin._value.w) / 2 );
 
 		});
 
@@ -115,8 +115,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"end"
 
 			render();
 
-			expect( imprecise( child5BB.position.x) ).equals( containerBB.centerX + ( - child5BB._margin.y + child5BB._margin.w ) / 2);
-			expect( imprecise( child5CB.position.x) ).equals( containerCB.centerX + ( - child5CB._margin.y + child5CB._margin.w ) / 2);
+			expect( imprecise( child5BB.position.x) ).equals( containerBB._bounds._centerX + ( - child5BB._margin._value.y + child5BB._margin._value.w ) / 2);
+			expect( imprecise( child5CB.position.x) ).equals( containerCB._bounds._centerX + ( - child5CB._margin._value.y + child5CB._margin._value.w ) / 2);
 		});
 
 	});
@@ -134,8 +134,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"end"
 			render();
 
 
-			expect( imprecise( child5BB.position.x) ).equals( containerBB.centerX - containerBB.offsetWidth/2 + child5BB.offsetWidth/2 );
-			expect( imprecise( child5CB.position.x) ).equals( containerCB.centerX - containerCB.offsetWidth/2 + child5CB.offsetWidth/2 );
+			expect( imprecise( child5BB.position.x) ).equals( containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child5BB._bounds._offsetWidth/2 );
+			expect( imprecise( child5CB.position.x) ).equals( containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child5CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container left minus margin", function () {
@@ -148,8 +148,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"end"
 
 			render();
 
-			expect( imprecise( child5BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child5BB.offsetWidth/2 + child5BB._margin.w );
-			expect( imprecise( child5CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child5CB.offsetWidth/2 + child5CB._margin.w );
+			expect( imprecise( child5BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child5BB._bounds._offsetWidth/2 + child5BB._margin._value.w );
+			expect( imprecise( child5CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child5CB._bounds._offsetWidth/2 + child5CB._margin._value.w );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -162,8 +162,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"end"
 
 			render();
 
-			expect( imprecise( child5BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child5BB.offsetWidth/2 + child5BB._margin.w );
-			expect( imprecise( child5CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child5CB.offsetWidth/2 + child5CB._margin.w );
+			expect( imprecise( child5BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child5BB._bounds._offsetWidth/2 + child5BB._margin._value.w );
+			expect( imprecise( child5CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child5CB._bounds._offsetWidth/2 + child5CB._margin._value.w );
 		});
 
 	});
@@ -181,8 +181,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"end"
 			render();
 
 
-			expect( imprecise( child5BB.position.x) ).equals( containerBB.centerX + containerBB.offsetWidth/2 - child5BB.offsetWidth/2 );
-			expect( imprecise( child5CB.position.x) ).equals( containerCB.centerX + containerCB.offsetWidth/2 - child5CB.offsetWidth/2 );
+			expect( imprecise( child5BB.position.x) ).equals( containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child5BB._bounds._offsetWidth/2 );
+			expect( imprecise( child5CB.position.x) ).equals( containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child5CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container right minus margin", function () {
@@ -195,8 +195,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"end"
 
 			render();
 
-			expect( imprecise( child5BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child5BB.offsetWidth/2 - child5BB._margin.y );
-			expect( imprecise( child5CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child5CB.offsetWidth/2 - child5CB._margin.y );
+			expect( imprecise( child5BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child5BB._bounds._offsetWidth/2 - child5BB._margin._value.y );
+			expect( imprecise( child5CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child5CB._bounds._offsetWidth/2 - child5CB._margin._value.y );
 		});
 
 		it("Any child should snap on container right minus margin mixed", function () {
@@ -209,8 +209,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"end"
 
 			render();
 
-			expect( imprecise( child5BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child5BB.offsetWidth/2 - child5BB._margin.y );
-			expect( imprecise( child5CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child5CB.offsetWidth/2 - child5CB._margin.y );
+			expect( imprecise( child5BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child5BB._bounds._offsetWidth/2 - child5BB._margin._value.y );
+			expect( imprecise( child5CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child5CB._bounds._offsetWidth/2 - child5CB._margin._value.y );
 		});
 
 	});
diff --git a/tests/specs/utils/block-layout/cases/column-end.js b/tests/specs/utils/block-layout/cases/column-end.js
index 3783a4d9..0cf4549e 100644
--- a/tests/specs/utils/block-layout/cases/column-end.js
+++ b/tests/specs/utils/block-layout/cases/column-end.js
@@ -3,7 +3,7 @@ import { preloadFonts } from '../../../../utils/TestFonts.js';
 import { fiveBlockContainer } from '../../../../utils/TestStructure.js';
 import { imprecise } from '../../../../utils/TestNumber.js';
 
-describe('Layout Case : {contentDirection:"column", justifyContent:"end"}', function () {
+describe('Layout Case : {flexDirection:"column", justifyContent:"end"}', function () {
 
 	let scene, camera, renderer, render;
 	let fontFamily;
@@ -35,8 +35,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"end"}', func
 
 	beforeEach( function () {
 
-		containerBB.set({contentDirection: 'column', justifyContent:'end'});
-		containerCB.set({contentDirection: 'column', justifyContent:'end'});
+		containerBB.set({flexDirection: 'column', justifyContent:'end'});
+		containerCB.set({flexDirection: 'column', justifyContent:'end'});
 
 
 
@@ -47,11 +47,11 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"end"}', func
 
 	it("Last child should snap on bottom on container", function () {
 
-		const containerBottomBB = containerBB.centerY - containerBB.offsetHeight / 2;
-		const containerBottomCB = containerCB.centerY - containerCB.offsetHeight / 2;
+		const containerBottomBB = containerBB._bounds._centerY - containerBB._bounds._offsetHeight / 2;
+		const containerBottomCB = containerCB._bounds._centerY - containerCB._bounds._offsetHeight / 2;
 
-		expect( imprecise( child5BB.position.y) ).equals( containerBottomBB + child5BB.offsetHeight / 2 );
-		expect( imprecise( child5CB.position.y) ).equals( containerBottomCB + child5CB.offsetHeight / 2 );
+		expect( imprecise( child5BB.position.y) ).equals( containerBottomBB + child5BB._bounds._offsetHeight / 2 );
+		expect( imprecise( child5CB.position.y) ).equals( containerBottomCB + child5CB._bounds._offsetHeight / 2 );
 	});
 
 	it("Last child should snap on top on container minus margin", function () {
@@ -64,11 +64,11 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"end"}', func
 
 		render();
 
-		const containerBottomBB = containerBB.centerY - containerBB.offsetHeight / 2;
-		const containerBottomCB = containerCB.centerY - containerCB.offsetHeight / 2;
+		const containerBottomBB = containerBB._bounds._centerY - containerBB._bounds._offsetHeight / 2;
+		const containerBottomCB = containerCB._bounds._centerY - containerCB._bounds._offsetHeight / 2;
 
-		expect( imprecise( child5BB.position.y) ).equals( containerBottomBB + child5BB.offsetHeight / 2 + child5BB._margin.z);
-		expect( imprecise( child5CB.position.y) ).equals( containerBottomCB + child5CB.offsetHeight / 2 + child5CB._margin.z);
+		expect( imprecise( child5BB.position.y) ).equals( containerBottomBB + child5BB._bounds._offsetHeight / 2 + child5BB._margin._value.z);
+		expect( imprecise( child5CB.position.y) ).equals( containerBottomCB + child5CB._bounds._offsetHeight / 2 + child5CB._margin._value.z);
 	});
 
 
@@ -84,8 +84,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"end"}', func
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX );
 		});
 
 
@@ -99,8 +99,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"end"}', func
 
 			render();
 
-			expect( imprecise( child5BB.position.x) ).equals( containerBB.centerX + ( - child5BB._margin.y + child5BB._margin.w) / 2 );
-			expect( imprecise( child5CB.position.x) ).equals( containerCB.centerX + ( - child5CB._margin.y + child5CB._margin.w) / 2 );
+			expect( imprecise( child5BB.position.x) ).equals( containerBB._bounds._centerX + ( - child5BB._margin._value.y + child5BB._margin._value.w) / 2 );
+			expect( imprecise( child5CB.position.x) ).equals( containerCB._bounds._centerX + ( - child5CB._margin._value.y + child5CB._margin._value.w) / 2 );
 
 		});
 
@@ -115,8 +115,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"end"}', func
 
 			render();
 
-			expect( imprecise( child5BB.position.x) ).equals( containerBB.centerX + ( - child5BB._margin.y + child5BB._margin.w ) / 2);
-			expect( imprecise( child5CB.position.x) ).equals( containerCB.centerX + ( - child5CB._margin.y + child5CB._margin.w ) / 2);
+			expect( imprecise( child5BB.position.x) ).equals( containerBB._bounds._centerX + ( - child5BB._margin._value.y + child5BB._margin._value.w ) / 2);
+			expect( imprecise( child5CB.position.x) ).equals( containerCB._bounds._centerX + ( - child5CB._margin._value.y + child5CB._margin._value.w ) / 2);
 		});
 
 	});
@@ -134,8 +134,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"end"}', func
 			render();
 
 
-			expect( imprecise( child5BB.position.x) ).equals( containerBB.centerX - containerBB.offsetWidth/2 + child5BB.offsetWidth/2 );
-			expect( imprecise( child5CB.position.x) ).equals( containerCB.centerX - containerCB.offsetWidth/2 + child5CB.offsetWidth/2 );
+			expect( imprecise( child5BB.position.x) ).equals( containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child5BB._bounds._offsetWidth/2 );
+			expect( imprecise( child5CB.position.x) ).equals( containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child5CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container left minus margin", function () {
@@ -148,8 +148,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"end"}', func
 
 			render();
 
-			expect( imprecise( child5BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child5BB.offsetWidth/2 + child5BB._margin.w );
-			expect( imprecise( child5CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child5CB.offsetWidth/2 + child5CB._margin.w );
+			expect( imprecise( child5BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child5BB._bounds._offsetWidth/2 + child5BB._margin._value.w );
+			expect( imprecise( child5CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child5CB._bounds._offsetWidth/2 + child5CB._margin._value.w );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -162,8 +162,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"end"}', func
 
 			render();
 
-			expect( imprecise( child5BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child5BB.offsetWidth/2 + child5BB._margin.w );
-			expect( imprecise( child5CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child5CB.offsetWidth/2 + child5CB._margin.w );
+			expect( imprecise( child5BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child5BB._bounds._offsetWidth/2 + child5BB._margin._value.w );
+			expect( imprecise( child5CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child5CB._bounds._offsetWidth/2 + child5CB._margin._value.w );
 		});
 
 	});
@@ -181,8 +181,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"end"}', func
 			render();
 
 
-			expect( imprecise( child5BB.position.x) ).equals( containerBB.centerX + containerBB.offsetWidth/2 - child5BB.offsetWidth/2 );
-			expect( imprecise( child5CB.position.x) ).equals( containerCB.centerX + containerCB.offsetWidth/2 - child5CB.offsetWidth/2 );
+			expect( imprecise( child5BB.position.x) ).equals( containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child5BB._bounds._offsetWidth/2 );
+			expect( imprecise( child5CB.position.x) ).equals( containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child5CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container right minus margin", function () {
@@ -195,8 +195,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"end"}', func
 
 			render();
 
-			expect( imprecise( child5BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child5BB.offsetWidth/2 - child5BB._margin.y );
-			expect( imprecise( child5CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child5CB.offsetWidth/2 - child5CB._margin.y );
+			expect( imprecise( child5BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child5BB._bounds._offsetWidth/2 - child5BB._margin._value.y );
+			expect( imprecise( child5CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child5CB._bounds._offsetWidth/2 - child5CB._margin._value.y );
 		});
 
 		it("Any child should snap on container right minus margin mixed", function () {
@@ -209,8 +209,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"end"}', func
 
 			render();
 
-			expect( imprecise( child5BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child5BB.offsetWidth/2 - child5BB._margin.y );
-			expect( imprecise( child5CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child5CB.offsetWidth/2 - child5CB._margin.y );
+			expect( imprecise( child5BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child5BB._bounds._offsetWidth/2 - child5BB._margin._value.y );
+			expect( imprecise( child5CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child5CB._bounds._offsetWidth/2 - child5CB._margin._value.y );
 		});
 
 	});
diff --git a/tests/specs/utils/block-layout/cases/column-space-between--reverse.js b/tests/specs/utils/block-layout/cases/column-space-between--reverse.js
index c77502dd..f84d29cc 100644
--- a/tests/specs/utils/block-layout/cases/column-space-between--reverse.js
+++ b/tests/specs/utils/block-layout/cases/column-space-between--reverse.js
@@ -3,7 +3,7 @@ import { preloadFonts } from '../../../../utils/TestFonts.js';
 import { fiveBlockContainer } from '../../../../utils/TestStructure.js';
 import { imprecise } from '../../../../utils/TestNumber.js';
 
-describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"space-between"}', function () {
+describe('Layout Case : {flexDirection:"column-reverse", justifyContent:"space-between"}', function () {
 
 	let scene, camera, renderer, render;
 	let fontFamily;
@@ -35,8 +35,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"spac
 
 	beforeEach( function () {
 
-		containerBB.set({contentDirection: 'column-reverse', justifyContent:'space-between'});
-		containerCB.set({contentDirection: 'column-reverse', justifyContent:'space-between'});
+		containerBB.set({flexDirection: 'column-reverse', justifyContent:'space-between'});
+		containerCB.set({flexDirection: 'column-reverse', justifyContent:'space-between'});
 
 		child1BB.set({margin:0})
 		child1CB.set({margin:0})
@@ -53,8 +53,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"spac
 
 	it("Third child should snap on container center", function () {
 
-		expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY );
-		expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY );
+		expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY );
+		expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY );
 
 	});
 
@@ -68,8 +68,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"spac
 
 		render();
 
-		expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY + ( - child3BB._margin.x + child3BB._margin.z) / 2 );
-		expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY + ( - child3CB._margin.x + child3CB._margin.z) / 2 );
+		expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY + ( - child3BB._margin._value.x + child3BB._margin._value.z) / 2 );
+		expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY + ( - child3CB._margin._value.x + child3CB._margin._value.z) / 2 );
 	});
 
 	it("Third child should snap on container center minus margin mixed", function () {
@@ -82,14 +82,14 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"spac
 
 		render();
 
-		expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY + ( - child3BB._margin.x + child3BB._margin.z ) / 2);
-		expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY + ( - child3CB._margin.x + child3CB._margin.z ) / 2);
+		expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY + ( - child3BB._margin._value.x + child3BB._margin._value.z ) / 2);
+		expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY + ( - child3CB._margin._value.x + child3CB._margin._value.z ) / 2);
 	});
 
 	it("Last child should snap on container top", function () {
 
-		expect( imprecise( child5BB.position.y) ).equals( containerBB.centerY + containerBB.innerHeight/2 - child5BB.offsetHeight/2);
-		expect( imprecise( child5CB.position.y) ).equals( containerCB.centerY + containerCB.innerHeight/2 - child5CB.offsetHeight/2);
+		expect( imprecise( child5BB.position.y) ).equals( containerBB._bounds._centerY + containerBB._bounds._innerHeight/2 - child5BB._bounds._offsetHeight/2);
+		expect( imprecise( child5CB.position.y) ).equals( containerCB._bounds._centerY + containerCB._bounds._innerHeight/2 - child5CB._bounds._offsetHeight/2);
 
 	});
 
@@ -103,15 +103,15 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"spac
 
 		render();
 
-		expect( imprecise( child5BB.position.y) ).equals( containerBB.centerY + containerBB.innerHeight/2 - child5BB.offsetHeight/2 - 0.1);
-		expect( imprecise( child5CB.position.y) ).equals( containerCB.centerY + containerCB.innerHeight/2 - child5CB.offsetHeight/2 - 0.1);
+		expect( imprecise( child5BB.position.y) ).equals( containerBB._bounds._centerY + containerBB._bounds._innerHeight/2 - child5BB._bounds._offsetHeight/2 - 0.1);
+		expect( imprecise( child5CB.position.y) ).equals( containerCB._bounds._centerY + containerCB._bounds._innerHeight/2 - child5CB._bounds._offsetHeight/2 - 0.1);
 
 	});
 
 	it("First child should snap on container bottom", function () {
 
-		expect( imprecise( child1BB.position.y) ).equals( containerBB.centerY - containerBB.innerHeight/2 + child1BB.offsetHeight/2);
-		expect( imprecise( child1CB.position.y) ).equals( containerCB.centerY - containerCB.innerHeight/2 + child1CB.offsetHeight/2);
+		expect( imprecise( child1BB.position.y) ).equals( containerBB._bounds._centerY - containerBB._bounds._innerHeight/2 + child1BB._bounds._offsetHeight/2);
+		expect( imprecise( child1CB.position.y) ).equals( containerCB._bounds._centerY - containerCB._bounds._innerHeight/2 + child1CB._bounds._offsetHeight/2);
 
 	});
 
@@ -125,8 +125,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"spac
 
 		render();
 
-		expect( imprecise( child1BB.position.y) ).equals( containerBB.centerY - containerBB.innerHeight/2 + child1BB.offsetHeight/2 + 0.1);
-		expect( imprecise( child1CB.position.y) ).equals( containerCB.centerY - containerCB.innerHeight/2 + child1CB.offsetHeight/2 + 0.1);
+		expect( imprecise( child1BB.position.y) ).equals( containerBB._bounds._centerY - containerBB._bounds._innerHeight/2 + child1BB._bounds._offsetHeight/2 + 0.1);
+		expect( imprecise( child1CB.position.y) ).equals( containerCB._bounds._centerY - containerCB._bounds._innerHeight/2 + child1CB._bounds._offsetHeight/2 + 0.1);
 
 	});
 
@@ -143,8 +143,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"spac
 			render();
 
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX );
 		});
 
 		it("Any child should snap on container center minus margin", function () {
@@ -157,8 +157,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"spac
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX + ( - child3BB._margin.y + child3BB._margin.w) / 2 );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX + ( - child3CB._margin.y + child3CB._margin.w) / 2 );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX + ( - child3BB._margin._value.y + child3BB._margin._value.w) / 2 );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX + ( - child3CB._margin._value.y + child3CB._margin._value.w) / 2 );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -171,8 +171,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"spac
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX + ( - child3BB._margin.y + child3BB._margin.w ) / 2);
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX + ( - child3CB._margin.y + child3CB._margin.w ) / 2);
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX + ( - child3BB._margin._value.y + child3BB._margin._value.w ) / 2);
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX + ( - child3CB._margin._value.y + child3CB._margin._value.w ) / 2);
 		});
 
 	});
@@ -189,8 +189,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"spac
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX - containerBB.offsetWidth/2 + child3BB.offsetWidth/2 );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX - containerCB.offsetWidth/2 + child3CB.offsetWidth/2 );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child3BB._bounds._offsetWidth/2 );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child3CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container left minus margin", function () {
@@ -203,8 +203,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"spac
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child3BB.offsetWidth/2 + child3BB._margin.w );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child3CB.offsetWidth/2 + child3CB._margin.w );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child3BB._bounds._offsetWidth/2 + child3BB._margin._value.w );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child3CB._bounds._offsetWidth/2 + child3CB._margin._value.w );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -217,8 +217,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"spac
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child3BB.offsetWidth/2 + child3BB._margin.w );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child3CB.offsetWidth/2 + child3CB._margin.w );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child3BB._bounds._offsetWidth/2 + child3BB._margin._value.w );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child3CB._bounds._offsetWidth/2 + child3CB._margin._value.w );
 		});
 
 	});
@@ -236,8 +236,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"spac
 			render();
 
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX + containerBB.offsetWidth/2 - child3BB.offsetWidth/2 );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX + containerCB.offsetWidth/2 - child3CB.offsetWidth/2 );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child3BB._bounds._offsetWidth/2 );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child3CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container right minus margin", function () {
@@ -250,8 +250,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"spac
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child3BB.offsetWidth/2 - child3BB._margin.y );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child3CB.offsetWidth/2 - child3CB._margin.y );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child3BB._bounds._offsetWidth/2 - child3BB._margin._value.y );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child3CB._bounds._offsetWidth/2 - child3CB._margin._value.y );
 		});
 
 		it("Any child should snap on container right minus margin mixed", function () {
@@ -264,8 +264,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"spac
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child3BB.offsetWidth/2 - child3BB._margin.y );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child3CB.offsetWidth/2 - child3CB._margin.y );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child3BB._bounds._offsetWidth/2 - child3BB._margin._value.y );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child3CB._bounds._offsetWidth/2 - child3CB._margin._value.y );
 		});
 
 	});
diff --git a/tests/specs/utils/block-layout/cases/column-space-between.js b/tests/specs/utils/block-layout/cases/column-space-between.js
index 832dd382..d671a91f 100644
--- a/tests/specs/utils/block-layout/cases/column-space-between.js
+++ b/tests/specs/utils/block-layout/cases/column-space-between.js
@@ -3,7 +3,7 @@ import { preloadFonts } from '../../../../utils/TestFonts.js';
 import { fiveBlockContainer } from '../../../../utils/TestStructure.js';
 import { imprecise } from '../../../../utils/TestNumber.js';
 
-describe('Layout Case : {contentDirection:"column", justifyContent:"space-between"}', function () {
+describe('Layout Case : {flexDirection:"column", justifyContent:"space-between"}', function () {
 
 	let scene, camera, renderer, render;
 	let fontFamily;
@@ -35,8 +35,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"space-betwee
 
 	beforeEach( function () {
 
-		containerBB.set({contentDirection: 'column', justifyContent:'space-between'});
-		containerCB.set({contentDirection: 'column', justifyContent:'space-between'});
+		containerBB.set({flexDirection: 'column', justifyContent:'space-between'});
+		containerCB.set({flexDirection: 'column', justifyContent:'space-between'});
 
 		child1BB.set({margin:0})
 		child1CB.set({margin:0})
@@ -53,8 +53,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"space-betwee
 
 	it("Third child should snap on container center", function () {
 
-		expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY );
-		expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY );
+		expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY );
+		expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY );
 
 	});
 
@@ -68,8 +68,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"space-betwee
 
 		render();
 
-		expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY + ( - child3BB._margin.x + child3BB._margin.z) / 2 );
-		expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY + ( - child3CB._margin.x + child3CB._margin.z) / 2 );
+		expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY + ( - child3BB._margin._value.x + child3BB._margin._value.z) / 2 );
+		expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY + ( - child3CB._margin._value.x + child3CB._margin._value.z) / 2 );
 	});
 
 	it("Third child should snap on container center minus margin mixed", function () {
@@ -82,14 +82,14 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"space-betwee
 
 		render();
 
-		expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY + ( - child3BB._margin.x + child3BB._margin.z ) / 2);
-		expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY + ( - child3CB._margin.x + child3CB._margin.z ) / 2);
+		expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY + ( - child3BB._margin._value.x + child3BB._margin._value.z ) / 2);
+		expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY + ( - child3CB._margin._value.x + child3CB._margin._value.z ) / 2);
 	});
 
 	it("First child should snap on container top", function () {
 
-		expect( imprecise( child1BB.position.y) ).equals( containerBB.centerY + containerBB.innerHeight/2 - child1BB.offsetHeight/2);
-		expect( imprecise( child1CB.position.y) ).equals( containerCB.centerY + containerCB.innerHeight/2 - child1CB.offsetHeight/2);
+		expect( imprecise( child1BB.position.y) ).equals( containerBB._bounds._centerY + containerBB._bounds._innerHeight/2 - child1BB._bounds._offsetHeight/2);
+		expect( imprecise( child1CB.position.y) ).equals( containerCB._bounds._centerY + containerCB._bounds._innerHeight/2 - child1CB._bounds._offsetHeight/2);
 
 	});
 
@@ -103,15 +103,15 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"space-betwee
 
 		render();
 
-		expect( imprecise( child1BB.position.y) ).equals( containerBB.centerY + containerBB.innerHeight/2 - child1BB.offsetHeight/2 - 0.1);
-		expect( imprecise( child1CB.position.y) ).equals( containerCB.centerY + containerCB.innerHeight/2 - child1CB.offsetHeight/2 - 0.1);
+		expect( imprecise( child1BB.position.y) ).equals( containerBB._bounds._centerY + containerBB._bounds._innerHeight/2 - child1BB._bounds._offsetHeight/2 - 0.1);
+		expect( imprecise( child1CB.position.y) ).equals( containerCB._bounds._centerY + containerCB._bounds._innerHeight/2 - child1CB._bounds._offsetHeight/2 - 0.1);
 
 	});
 
 	it("Last child should snap on container bottom", function () {
 
-		expect( imprecise( child5BB.position.y) ).equals( containerBB.centerY - containerBB.innerHeight/2 + child5BB.offsetHeight/2);
-		expect( imprecise( child5CB.position.y) ).equals( containerCB.centerY - containerCB.innerHeight/2 + child5CB.offsetHeight/2);
+		expect( imprecise( child5BB.position.y) ).equals( containerBB._bounds._centerY - containerBB._bounds._innerHeight/2 + child5BB._bounds._offsetHeight/2);
+		expect( imprecise( child5CB.position.y) ).equals( containerCB._bounds._centerY - containerCB._bounds._innerHeight/2 + child5CB._bounds._offsetHeight/2);
 
 	});
 
@@ -125,8 +125,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"space-betwee
 
 		render();
 
-		expect( imprecise( child5BB.position.y) ).equals( containerBB.centerY - containerBB.innerHeight/2 + child5BB.offsetHeight/2 + 0.1);
-		expect( imprecise( child5CB.position.y) ).equals( containerCB.centerY - containerCB.innerHeight/2 + child5CB.offsetHeight/2 + 0.1);
+		expect( imprecise( child5BB.position.y) ).equals( containerBB._bounds._centerY - containerBB._bounds._innerHeight/2 + child5BB._bounds._offsetHeight/2 + 0.1);
+		expect( imprecise( child5CB.position.y) ).equals( containerCB._bounds._centerY - containerCB._bounds._innerHeight/2 + child5CB._bounds._offsetHeight/2 + 0.1);
 
 	});
 
@@ -143,8 +143,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"space-betwee
 			render();
 
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX );
 		});
 
 		it("Any child should snap on container center minus margin", function () {
@@ -157,8 +157,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"space-betwee
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX + ( - child3BB._margin.y + child3BB._margin.w) / 2 );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX + ( - child3CB._margin.y + child3CB._margin.w) / 2 );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX + ( - child3BB._margin._value.y + child3BB._margin._value.w) / 2 );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX + ( - child3CB._margin._value.y + child3CB._margin._value.w) / 2 );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -171,8 +171,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"space-betwee
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX + ( - child3BB._margin.y + child3BB._margin.w ) / 2);
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX + ( - child3CB._margin.y + child3CB._margin.w ) / 2);
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX + ( - child3BB._margin._value.y + child3BB._margin._value.w ) / 2);
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX + ( - child3CB._margin._value.y + child3CB._margin._value.w ) / 2);
 		});
 
 	});
@@ -189,8 +189,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"space-betwee
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX - containerBB.offsetWidth/2 + child3BB.offsetWidth/2 );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX - containerCB.offsetWidth/2 + child3CB.offsetWidth/2 );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child3BB._bounds._offsetWidth/2 );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child3CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container left minus margin", function () {
@@ -203,8 +203,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"space-betwee
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child3BB.offsetWidth/2 + child3BB._margin.w );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child3CB.offsetWidth/2 + child3CB._margin.w );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child3BB._bounds._offsetWidth/2 + child3BB._margin._value.w );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child3CB._bounds._offsetWidth/2 + child3CB._margin._value.w );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -217,8 +217,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"space-betwee
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child3BB.offsetWidth/2 + child3BB._margin.w );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child3CB.offsetWidth/2 + child3CB._margin.w );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child3BB._bounds._offsetWidth/2 + child3BB._margin._value.w );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child3CB._bounds._offsetWidth/2 + child3CB._margin._value.w );
 		});
 
 	});
@@ -236,8 +236,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"space-betwee
 			render();
 
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX + containerBB.offsetWidth/2 - child3BB.offsetWidth/2 );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX + containerCB.offsetWidth/2 - child3CB.offsetWidth/2 );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child3BB._bounds._offsetWidth/2 );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child3CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container right minus margin", function () {
@@ -250,8 +250,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"space-betwee
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child3BB.offsetWidth/2 - child3BB._margin.y );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child3CB.offsetWidth/2 - child3CB._margin.y );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child3BB._bounds._offsetWidth/2 - child3BB._margin._value.y );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child3CB._bounds._offsetWidth/2 - child3CB._margin._value.y );
 		});
 
 		it("Any child should snap on container right minus margin mixed", function () {
@@ -264,8 +264,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"space-betwee
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child3BB.offsetWidth/2 - child3BB._margin.y );
-			expect( imprecise( child3CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child3CB.offsetWidth/2 - child3CB._margin.y );
+			expect( imprecise( child3BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child3BB._bounds._offsetWidth/2 - child3BB._margin._value.y );
+			expect( imprecise( child3CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child3CB._bounds._offsetWidth/2 - child3CB._margin._value.y );
 		});
 
 	});
diff --git a/tests/specs/utils/block-layout/cases/column-start--reverse.js b/tests/specs/utils/block-layout/cases/column-start--reverse.js
index 030a0a9d..41ac3999 100644
--- a/tests/specs/utils/block-layout/cases/column-start--reverse.js
+++ b/tests/specs/utils/block-layout/cases/column-start--reverse.js
@@ -3,7 +3,7 @@ import { preloadFonts } from '../../../../utils/TestFonts.js';
 import { fiveBlockContainer } from '../../../../utils/TestStructure.js';
 import { imprecise } from '../../../../utils/TestNumber.js';
 
-describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"start"}', function () {
+describe('Layout Case : {flexDirection:"column-reverse", justifyContent:"start"}', function () {
 
 	let scene, camera, renderer, render;
 	let fontFamily;
@@ -35,8 +35,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"star
 
 	beforeEach( function () {
 
-		containerBB.set({contentDirection: 'column-reverse', justifyContent:'start'});
-		containerCB.set({contentDirection: 'column-reverse', justifyContent:'start'});
+		containerBB.set({flexDirection: 'column-reverse', justifyContent:'start'});
+		containerCB.set({flexDirection: 'column-reverse', justifyContent:'start'});
 
 
 
@@ -47,11 +47,11 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"star
 
 	it("First child should snap on bottom on container", function () {
 
-		const containerBottomBB = containerBB.centerY - containerBB.offsetHeight / 2;
-		const containerBottomCB = containerCB.centerY - containerCB.offsetHeight / 2;
+		const containerBottomBB = containerBB._bounds._centerY - containerBB._bounds._offsetHeight / 2;
+		const containerBottomCB = containerCB._bounds._centerY - containerCB._bounds._offsetHeight / 2;
 
-		expect( imprecise( child1BB.position.y) ).equals( containerBottomBB + child1BB.offsetHeight / 2 );
-		expect( imprecise( child1CB.position.y) ).equals( containerBottomCB + child1CB.offsetHeight / 2 );
+		expect( imprecise( child1BB.position.y) ).equals( containerBottomBB + child1BB._bounds._offsetHeight / 2 );
+		expect( imprecise( child1CB.position.y) ).equals( containerBottomCB + child1CB._bounds._offsetHeight / 2 );
 	});
 
 	it("First child should snap on top on container minus margin", function () {
@@ -64,11 +64,11 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"star
 
 		render();
 
-		const containerBottomBB = containerBB.centerY - containerBB.offsetHeight / 2;
-		const containerBottomCB = containerCB.centerY - containerCB.offsetHeight / 2;
+		const containerBottomBB = containerBB._bounds._centerY - containerBB._bounds._offsetHeight / 2;
+		const containerBottomCB = containerCB._bounds._centerY - containerCB._bounds._offsetHeight / 2;
 
-		expect( imprecise( child1BB.position.y) ).equals( containerBottomBB + child1BB.offsetHeight / 2 + child1BB._margin.z);
-		expect( imprecise( child1CB.position.y) ).equals( containerBottomCB + child1CB.offsetHeight / 2 + child1CB._margin.z);
+		expect( imprecise( child1BB.position.y) ).equals( containerBottomBB + child1BB._bounds._offsetHeight / 2 + child1BB._margin._value.z);
+		expect( imprecise( child1CB.position.y) ).equals( containerBottomCB + child1CB._bounds._offsetHeight / 2 + child1CB._margin._value.z);
 
 	});
 
@@ -84,8 +84,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"star
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX );
 		});
 
 
@@ -99,8 +99,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"star
 
 			render();
 
-			expect( imprecise( child1BB.position.x) ).equals( containerBB.centerX + ( - child1BB._margin.y + child1BB._margin.w) / 2 );
-			expect( imprecise( child1CB.position.x) ).equals( containerCB.centerX + ( - child1CB._margin.y + child1CB._margin.w) / 2 );
+			expect( imprecise( child1BB.position.x) ).equals( containerBB._bounds._centerX + ( - child1BB._margin._value.y + child1BB._margin._value.w) / 2 );
+			expect( imprecise( child1CB.position.x) ).equals( containerCB._bounds._centerX + ( - child1CB._margin._value.y + child1CB._margin._value.w) / 2 );
 
 		});
 
@@ -115,8 +115,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"star
 
 			render();
 
-			expect( imprecise( child1BB.position.x) ).equals( containerBB.centerX + ( - child1BB._margin.y + child1BB._margin.w ) / 2);
-			expect( imprecise( child1CB.position.x) ).equals( containerCB.centerX + ( - child1CB._margin.y + child1CB._margin.w ) / 2);
+			expect( imprecise( child1BB.position.x) ).equals( containerBB._bounds._centerX + ( - child1BB._margin._value.y + child1BB._margin._value.w ) / 2);
+			expect( imprecise( child1CB.position.x) ).equals( containerCB._bounds._centerX + ( - child1CB._margin._value.y + child1CB._margin._value.w ) / 2);
 		});
 
 	});
@@ -134,8 +134,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"star
 			render();
 
 
-			expect( imprecise( child1BB.position.x) ).equals( containerBB.centerX - containerBB.offsetWidth/2 + child1BB.offsetWidth/2 );
-			expect( imprecise( child1CB.position.x) ).equals( containerCB.centerX - containerCB.offsetWidth/2 + child1CB.offsetWidth/2 );
+			expect( imprecise( child1BB.position.x) ).equals( containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child1BB._bounds._offsetWidth/2 );
+			expect( imprecise( child1CB.position.x) ).equals( containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child1CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container left minus margin", function () {
@@ -148,8 +148,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"star
 
 			render();
 
-			expect( imprecise( child1BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child1BB.offsetWidth/2 + child1BB._margin.w );
-			expect( imprecise( child1CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child1CB.offsetWidth/2 + child1CB._margin.w );
+			expect( imprecise( child1BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child1BB._bounds._offsetWidth/2 + child1BB._margin._value.w );
+			expect( imprecise( child1CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child1CB._bounds._offsetWidth/2 + child1CB._margin._value.w );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -162,8 +162,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"star
 
 			render();
 
-			expect( imprecise( child1BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child1BB.offsetWidth/2 + child1BB._margin.w );
-			expect( imprecise( child1CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child1CB.offsetWidth/2 + child1CB._margin.w );
+			expect( imprecise( child1BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child1BB._bounds._offsetWidth/2 + child1BB._margin._value.w );
+			expect( imprecise( child1CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child1CB._bounds._offsetWidth/2 + child1CB._margin._value.w );
 		});
 
 	});
@@ -181,8 +181,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"star
 			render();
 
 
-			expect( imprecise( child1BB.position.x) ).equals( containerBB.centerX + containerBB.offsetWidth/2 - child1BB.offsetWidth/2 );
-			expect( imprecise( child1CB.position.x) ).equals( containerCB.centerX + containerCB.offsetWidth/2 - child1CB.offsetWidth/2 );
+			expect( imprecise( child1BB.position.x) ).equals( containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child1BB._bounds._offsetWidth/2 );
+			expect( imprecise( child1CB.position.x) ).equals( containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child1CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container right minus margin", function () {
@@ -195,8 +195,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"star
 
 			render();
 
-			expect( imprecise( child1BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child1BB.offsetWidth/2 - child1BB._margin.y );
-			expect( imprecise( child1CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child1CB.offsetWidth/2 - child1CB._margin.y );
+			expect( imprecise( child1BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child1BB._bounds._offsetWidth/2 - child1BB._margin._value.y );
+			expect( imprecise( child1CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child1CB._bounds._offsetWidth/2 - child1CB._margin._value.y );
 		});
 
 		it("Any child should snap on container right minus margin mixed", function () {
@@ -209,8 +209,8 @@ describe('Layout Case : {contentDirection:"column-reverse", justifyContent:"star
 
 			render();
 
-			expect( imprecise( child1BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child1BB.offsetWidth/2 - child1BB._margin.y );
-			expect( imprecise( child1CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child1CB.offsetWidth/2 - child1CB._margin.y );
+			expect( imprecise( child1BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child1BB._bounds._offsetWidth/2 - child1BB._margin._value.y );
+			expect( imprecise( child1CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child1CB._bounds._offsetWidth/2 - child1CB._margin._value.y );
 		});
 
 	});
diff --git a/tests/specs/utils/block-layout/cases/column-start.js b/tests/specs/utils/block-layout/cases/column-start.js
index da49bdde..34deb73d 100644
--- a/tests/specs/utils/block-layout/cases/column-start.js
+++ b/tests/specs/utils/block-layout/cases/column-start.js
@@ -3,7 +3,7 @@ import { preloadFonts } from '../../../../utils/TestFonts.js';
 import { fiveBlockContainer } from '../../../../utils/TestStructure.js';
 import { imprecise } from '../../../../utils/TestNumber.js';
 
-describe('Layout Case : {contentDirection:"column", justifyContent:"start"}', function () {
+describe('Layout Case : {flexDirection:"column", justifyContent:"start"}', function () {
 
 	let scene, camera, renderer, render;
 	let fontFamily;
@@ -35,8 +35,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"start"}', fu
 
 	beforeEach( function () {
 
-		containerBB.set({contentDirection: 'column', justifyContent:'start'});
-		containerCB.set({contentDirection: 'column', justifyContent:'start'});
+		containerBB.set({flexDirection: 'column', justifyContent:'start'});
+		containerCB.set({flexDirection: 'column', justifyContent:'start'});
 
 
 
@@ -47,11 +47,11 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"start"}', fu
 
 	it("First child should snap on top on container", function () {
 
-		const containerTopBB = containerBB.centerY + containerBB.innerHeight / 2;
-		const containerTopCB = containerCB.centerY + containerCB.innerHeight / 2;
+		const containerTopBB = containerBB._bounds._centerY + containerBB._bounds._innerHeight / 2;
+		const containerTopCB = containerCB._bounds._centerY + containerCB._bounds._innerHeight / 2;
 
-		expect( imprecise( child1BB.position.y) ).equals( containerTopBB - child1BB.offsetHeight / 2 );
-		expect( imprecise( child1CB.position.y) ).equals( containerTopCB - child1CB.offsetHeight / 2 );
+		expect( imprecise( child1BB.position.y) ).equals( containerTopBB - child1BB._bounds._offsetHeight / 2 );
+		expect( imprecise( child1CB.position.y) ).equals( containerTopCB - child1CB._bounds._offsetHeight / 2 );
 	});
 
 	it("First child should snap on top on container minus margin", function () {
@@ -64,11 +64,11 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"start"}', fu
 
 		render();
 
-		const containerTopBB = containerBB.centerY + containerBB.offsetHeight / 2;
-		const containerTopCB = containerCB.centerY + containerCB.offsetHeight / 2;
+		const containerTopBB = containerBB._bounds._centerY + containerBB._bounds._offsetHeight / 2;
+		const containerTopCB = containerCB._bounds._centerY + containerCB._bounds._offsetHeight / 2;
 
-		expect( imprecise( child1BB.position.y) ).equals( containerTopBB - child1BB.offsetHeight / 2 - child1BB._margin.x);
-		expect( imprecise( child1CB.position.y) ).equals( containerTopCB - child1CB.offsetHeight / 2 - child1CB._margin.x);
+		expect( imprecise( child1BB.position.y) ).equals( containerTopBB - child1BB._bounds._offsetHeight / 2 - child1BB._margin._value.x);
+		expect( imprecise( child1CB.position.y) ).equals( containerTopCB - child1CB._bounds._offsetHeight / 2 - child1CB._margin._value.x);
 	});
 
 
@@ -84,8 +84,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"start"}', fu
 
 			render();
 
-			expect( imprecise( child3BB.position.x) ).equals( containerBB.centerX );
-			expect( imprecise( child3CB.position.x) ).equals( containerCB.centerX );
+			expect( imprecise( child3BB.position.x) ).equals( containerBB._bounds._centerX );
+			expect( imprecise( child3CB.position.x) ).equals( containerCB._bounds._centerX );
 		});
 
 
@@ -99,8 +99,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"start"}', fu
 
 			render();
 
-			expect( imprecise( child1BB.position.x) ).equals( containerBB.centerX + ( - child1BB._margin.y + child1BB._margin.w) / 2 );
-			expect( imprecise( child1CB.position.x) ).equals( containerCB.centerX + ( - child1CB._margin.y + child1CB._margin.w) / 2 );
+			expect( imprecise( child1BB.position.x) ).equals( containerBB._bounds._centerX + ( - child1BB._margin._value.y + child1BB._margin._value.w) / 2 );
+			expect( imprecise( child1CB.position.x) ).equals( containerCB._bounds._centerX + ( - child1CB._margin._value.y + child1CB._margin._value.w) / 2 );
 
 		});
 
@@ -115,8 +115,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"start"}', fu
 
 			render();
 
-			expect( imprecise( child1BB.position.x) ).equals( containerBB.centerX + ( - child1BB._margin.y + child1BB._margin.w ) / 2);
-			expect( imprecise( child1CB.position.x) ).equals( containerCB.centerX + ( - child1CB._margin.y + child1CB._margin.w ) / 2);
+			expect( imprecise( child1BB.position.x) ).equals( containerBB._bounds._centerX + ( - child1BB._margin._value.y + child1BB._margin._value.w ) / 2);
+			expect( imprecise( child1CB.position.x) ).equals( containerCB._bounds._centerX + ( - child1CB._margin._value.y + child1CB._margin._value.w ) / 2);
 		});
 
 	});
@@ -134,8 +134,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"start"}', fu
 			render();
 
 
-			expect( imprecise( child1BB.position.x) ).equals( containerBB.centerX - containerBB.offsetWidth/2 + child1BB.offsetWidth/2 );
-			expect( imprecise( child1CB.position.x) ).equals( containerCB.centerX - containerCB.offsetWidth/2 + child1CB.offsetWidth/2 );
+			expect( imprecise( child1BB.position.x) ).equals( containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child1BB._bounds._offsetWidth/2 );
+			expect( imprecise( child1CB.position.x) ).equals( containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child1CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container left minus margin", function () {
@@ -148,8 +148,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"start"}', fu
 
 			render();
 
-			expect( imprecise( child1BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child1BB.offsetWidth/2 + child1BB._margin.w );
-			expect( imprecise( child1CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child1CB.offsetWidth/2 + child1CB._margin.w );
+			expect( imprecise( child1BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child1BB._bounds._offsetWidth/2 + child1BB._margin._value.w );
+			expect( imprecise( child1CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child1CB._bounds._offsetWidth/2 + child1CB._margin._value.w );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -162,8 +162,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"start"}', fu
 
 			render();
 
-			expect( imprecise( child1BB.position.x) ).equals(containerBB.centerX - containerBB.offsetWidth/2 + child1BB.offsetWidth/2 + child1BB._margin.w );
-			expect( imprecise( child1CB.position.x) ).equals(containerCB.centerX - containerCB.offsetWidth/2 + child1CB.offsetWidth/2 + child1CB._margin.w );
+			expect( imprecise( child1BB.position.x) ).equals(containerBB._bounds._centerX - containerBB._bounds._offsetWidth/2 + child1BB._bounds._offsetWidth/2 + child1BB._margin._value.w );
+			expect( imprecise( child1CB.position.x) ).equals(containerCB._bounds._centerX - containerCB._bounds._offsetWidth/2 + child1CB._bounds._offsetWidth/2 + child1CB._margin._value.w );
 		});
 
 	});
@@ -181,8 +181,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"start"}', fu
 			render();
 
 
-			expect( imprecise( child1BB.position.x) ).equals( containerBB.centerX + containerBB.offsetWidth/2 - child1BB.offsetWidth/2 );
-			expect( imprecise( child1CB.position.x) ).equals( containerCB.centerX + containerCB.offsetWidth/2 - child1CB.offsetWidth/2 );
+			expect( imprecise( child1BB.position.x) ).equals( containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child1BB._bounds._offsetWidth/2 );
+			expect( imprecise( child1CB.position.x) ).equals( containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child1CB._bounds._offsetWidth/2 );
 		});
 
 		it("Any child should snap on container right minus margin", function () {
@@ -195,8 +195,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"start"}', fu
 
 			render();
 
-			expect( imprecise( child1BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child1BB.offsetWidth/2 - child1BB._margin.y );
-			expect( imprecise( child1CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child1CB.offsetWidth/2 - child1CB._margin.y );
+			expect( imprecise( child1BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child1BB._bounds._offsetWidth/2 - child1BB._margin._value.y );
+			expect( imprecise( child1CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child1CB._bounds._offsetWidth/2 - child1CB._margin._value.y );
 		});
 
 		it("Any child should snap on container right minus margin mixed", function () {
@@ -209,8 +209,8 @@ describe('Layout Case : {contentDirection:"column", justifyContent:"start"}', fu
 
 			render();
 
-			expect( imprecise( child1BB.position.x) ).equals(containerBB.centerX + containerBB.offsetWidth/2 - child1BB.offsetWidth/2 - child1BB._margin.y );
-			expect( imprecise( child1CB.position.x) ).equals(containerCB.centerX + containerCB.offsetWidth/2 - child1CB.offsetWidth/2 - child1CB._margin.y );
+			expect( imprecise( child1BB.position.x) ).equals(containerBB._bounds._centerX + containerBB._bounds._offsetWidth/2 - child1BB._bounds._offsetWidth/2 - child1BB._margin._value.y );
+			expect( imprecise( child1CB.position.x) ).equals(containerCB._bounds._centerX + containerCB._bounds._offsetWidth/2 - child1CB._bounds._offsetWidth/2 - child1CB._margin._value.y );
 		});
 
 	});
diff --git a/tests/specs/utils/block-layout/cases/row-center--reverse.js b/tests/specs/utils/block-layout/cases/row-center--reverse.js
index 6720a7b5..fd4eefa7 100644
--- a/tests/specs/utils/block-layout/cases/row-center--reverse.js
+++ b/tests/specs/utils/block-layout/cases/row-center--reverse.js
@@ -3,7 +3,7 @@ import { preloadFonts } from '../../../../utils/TestFonts.js';
 import { fiveBlockContainer } from '../../../../utils/TestStructure.js';
 import { imprecise } from '../../../../utils/TestNumber.js';
 
-describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"center"}', function () {
+describe('Layout Case : {flexDirection:"row-reverse", justifyContent:"center"}', function () {
 
 	let scene, camera, renderer, render;
 	let fontFamily;
@@ -35,8 +35,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"center"
 
 	beforeEach( function () {
 
-		containerBB.set({contentDirection: 'row-reverse', justifyContent:'center'});
-		containerCB.set({contentDirection: 'row-reverse', justifyContent:'center'});
+		containerBB.set({flexDirection: 'row-reverse', justifyContent:'center'});
+		containerCB.set({flexDirection: 'row-reverse', justifyContent:'center'});
 
 
 
@@ -75,8 +75,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"center"
 
 		render();
 
-		expect( imprecise( child3BB.position.x) ).equals( ( child3BB._margin.w - child3BB._margin.y) / 2);
-		expect( imprecise( child3CB.position.x) ).equals( ( child3CB._margin.w - child3CB._margin.y) / 2 );
+		expect( imprecise( child3BB.position.x) ).equals( ( child3BB._margin._value.w - child3BB._margin._value.y) / 2);
+		expect( imprecise( child3CB.position.x) ).equals( ( child3CB._margin._value.w - child3CB._margin._value.y) / 2 );
 	});
 
 
@@ -92,8 +92,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"center"
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY );
-			expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY );
+			expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY );
+			expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY );
 		});
 
 
@@ -107,8 +107,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"center"
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY + ( - child3BB._margin.x + child3BB._margin.z) / 2 );
-			expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY + ( - child3CB._margin.x + child3CB._margin.z) / 2 );
+			expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY + ( - child3BB._margin._value.x + child3BB._margin._value.z) / 2 );
+			expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY + ( - child3CB._margin._value.x + child3CB._margin._value.z) / 2 );
 
 		});
 
@@ -123,8 +123,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"center"
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY + ( - child3BB._margin.x + child3BB._margin.z ) / 2);
-			expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY + ( - child3CB._margin.x + child3CB._margin.z ) / 2);
+			expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY + ( - child3BB._margin._value.x + child3BB._margin._value.z ) / 2);
+			expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY + ( - child3CB._margin._value.x + child3CB._margin._value.z ) / 2);
 		});
 
 	});
@@ -142,8 +142,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"center"
 			render();
 
 
-			expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY + containerBB.offsetHeight/2 - child3BB.offsetHeight/2 );
-			expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY + containerCB.offsetHeight/2 - child3CB.offsetHeight/2 );
+			expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child3BB._bounds._offsetHeight/2 );
+			expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child3CB._bounds._offsetHeight/2 );
 		});
 
 		it("Any child should snap on container top minus margin", function () {
@@ -156,8 +156,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"center"
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals(containerBB.centerY + containerBB.offsetHeight/2 - child3BB.offsetHeight/2 - child3BB._margin.x );
-			expect( imprecise( child3CB.position.y) ).equals(containerCB.centerY + containerCB.offsetHeight/2 - child3CB.offsetHeight/2 - child3CB._margin.x );
+			expect( imprecise( child3BB.position.y) ).equals(containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child3BB._bounds._offsetHeight/2 - child3BB._margin._value.x );
+			expect( imprecise( child3CB.position.y) ).equals(containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child3CB._bounds._offsetHeight/2 - child3CB._margin._value.x );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -170,8 +170,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"center"
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals(containerBB.centerY + containerBB.offsetHeight/2 - child3BB.offsetHeight/2 - child3BB._margin.x );
-			expect( imprecise( child3CB.position.y) ).equals(containerCB.centerY + containerCB.offsetHeight/2 - child3CB.offsetHeight/2 - child3CB._margin.x );
+			expect( imprecise( child3BB.position.y) ).equals(containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child3BB._bounds._offsetHeight/2 - child3BB._margin._value.x );
+			expect( imprecise( child3CB.position.y) ).equals(containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child3CB._bounds._offsetHeight/2 - child3CB._margin._value.x );
 		});
 
 	});
@@ -189,8 +189,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"center"
 			render();
 
 
-			expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY - containerBB.offsetHeight/2 + child3BB.offsetHeight/2 );
-			expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY - containerCB.offsetHeight/2 + child3CB.offsetHeight/2 );
+			expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child3BB._bounds._offsetHeight/2 );
+			expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child3CB._bounds._offsetHeight/2 );
 		});
 
 		it("Any child should snap on container bottom minus margin", function () {
@@ -203,8 +203,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"center"
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals(containerBB.centerY - containerBB.offsetHeight/2 + child3BB.offsetHeight/2 + child3BB._margin.z );
-			expect( imprecise( child3CB.position.y) ).equals(containerCB.centerY - containerCB.offsetHeight/2 + child3CB.offsetHeight/2 + child3CB._margin.z );
+			expect( imprecise( child3BB.position.y) ).equals(containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child3BB._bounds._offsetHeight/2 + child3BB._margin._value.z );
+			expect( imprecise( child3CB.position.y) ).equals(containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child3CB._bounds._offsetHeight/2 + child3CB._margin._value.z );
 		});
 
 		it("Any child should snap on container right minus margin mixed", function () {
@@ -217,8 +217,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"center"
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals(containerBB.centerY - containerBB.offsetHeight/2 + child3BB.offsetHeight/2 + child3BB._margin.z );
-			expect( imprecise( child3CB.position.y) ).equals(containerCB.centerY - containerCB.offsetHeight/2 + child3CB.offsetHeight/2 + child3CB._margin.z );
+			expect( imprecise( child3BB.position.y) ).equals(containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child3BB._bounds._offsetHeight/2 + child3BB._margin._value.z );
+			expect( imprecise( child3CB.position.y) ).equals(containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child3CB._bounds._offsetHeight/2 + child3CB._margin._value.z );
 		});
 
 	});
diff --git a/tests/specs/utils/block-layout/cases/row-center.js b/tests/specs/utils/block-layout/cases/row-center.js
index 8ad223ea..bb9f1939 100644
--- a/tests/specs/utils/block-layout/cases/row-center.js
+++ b/tests/specs/utils/block-layout/cases/row-center.js
@@ -3,7 +3,7 @@ import { preloadFonts } from '../../../../utils/TestFonts.js';
 import { fiveBlockContainer } from '../../../../utils/TestStructure.js';
 import { imprecise } from '../../../../utils/TestNumber.js';
 
-describe('Layout Case : {contentDirection:"row", justifyContent:"center"}', function () {
+describe('Layout Case : {flexDirection:"row", justifyContent:"center"}', function () {
 
 	let scene, camera, renderer, render;
 	let fontFamily;
@@ -35,8 +35,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"center"}', func
 
 	beforeEach( function () {
 
-		containerBB.set({contentDirection: 'row', justifyContent:'center'});
-		containerCB.set({contentDirection: 'row', justifyContent:'center'});
+		containerBB.set({flexDirection: 'row', justifyContent:'center'});
+		containerCB.set({flexDirection: 'row', justifyContent:'center'});
 
 
 
@@ -75,8 +75,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"center"}', func
 
 		render();
 
-		expect( imprecise( child3BB.position.x) ).equals( ( child3BB._margin.w - child3BB._margin.y) / 2);
-		expect( imprecise( child3CB.position.x) ).equals( ( child3CB._margin.w - child3CB._margin.y) / 2 );
+		expect( imprecise( child3BB.position.x) ).equals( ( child3BB._margin._value.w - child3BB._margin._value.y) / 2);
+		expect( imprecise( child3CB.position.x) ).equals( ( child3CB._margin._value.w - child3CB._margin._value.y) / 2 );
 	});
 
 
@@ -92,8 +92,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"center"}', func
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY );
-			expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY );
+			expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY );
+			expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY );
 		});
 
 
@@ -107,8 +107,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"center"}', func
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY + ( - child3BB._margin.x + child3BB._margin.z) / 2 );
-			expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY + ( - child3CB._margin.x + child3CB._margin.z) / 2 );
+			expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY + ( - child3BB._margin._value.x + child3BB._margin._value.z) / 2 );
+			expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY + ( - child3CB._margin._value.x + child3CB._margin._value.z) / 2 );
 
 		});
 
@@ -123,8 +123,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"center"}', func
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY + ( - child3BB._margin.x + child3BB._margin.z ) / 2);
-			expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY + ( - child3CB._margin.x + child3CB._margin.z ) / 2);
+			expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY + ( - child3BB._margin._value.x + child3BB._margin._value.z ) / 2);
+			expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY + ( - child3CB._margin._value.x + child3CB._margin._value.z ) / 2);
 		});
 
 	});
@@ -142,8 +142,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"center"}', func
 			render();
 
 
-			expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY + containerBB.offsetHeight/2 - child3BB.offsetHeight/2 );
-			expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY + containerCB.offsetHeight/2 - child3CB.offsetHeight/2 );
+			expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child3BB._bounds._offsetHeight/2 );
+			expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child3CB._bounds._offsetHeight/2 );
 		});
 
 		it("Any child should snap on container top minus margin", function () {
@@ -156,8 +156,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"center"}', func
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals(containerBB.centerY + containerBB.offsetHeight/2 - child3BB.offsetHeight/2 - child3BB._margin.x );
-			expect( imprecise( child3CB.position.y) ).equals(containerCB.centerY + containerCB.offsetHeight/2 - child3CB.offsetHeight/2 - child3CB._margin.x );
+			expect( imprecise( child3BB.position.y) ).equals(containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child3BB._bounds._offsetHeight/2 - child3BB._margin._value.x );
+			expect( imprecise( child3CB.position.y) ).equals(containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child3CB._bounds._offsetHeight/2 - child3CB._margin._value.x );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -170,8 +170,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"center"}', func
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals(containerBB.centerY + containerBB.offsetHeight/2 - child3BB.offsetHeight/2 - child3BB._margin.x );
-			expect( imprecise( child3CB.position.y) ).equals(containerCB.centerY + containerCB.offsetHeight/2 - child3CB.offsetHeight/2 - child3CB._margin.x );
+			expect( imprecise( child3BB.position.y) ).equals(containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child3BB._bounds._offsetHeight/2 - child3BB._margin._value.x );
+			expect( imprecise( child3CB.position.y) ).equals(containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child3CB._bounds._offsetHeight/2 - child3CB._margin._value.x );
 		});
 
 	});
@@ -189,8 +189,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"center"}', func
 			render();
 
 
-			expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY - containerBB.offsetHeight/2 + child3BB.offsetHeight/2 );
-			expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY - containerCB.offsetHeight/2 + child3CB.offsetHeight/2 );
+			expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child3BB._bounds._offsetHeight/2 );
+			expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child3CB._bounds._offsetHeight/2 );
 		});
 
 		it("Any child should snap on container bottom minus margin", function () {
@@ -203,8 +203,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"center"}', func
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals(containerBB.centerY - containerBB.offsetHeight/2 + child3BB.offsetHeight/2 + child3BB._margin.z );
-			expect( imprecise( child3CB.position.y) ).equals(containerCB.centerY - containerCB.offsetHeight/2 + child3CB.offsetHeight/2 + child3CB._margin.z );
+			expect( imprecise( child3BB.position.y) ).equals(containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child3BB._bounds._offsetHeight/2 + child3BB._margin._value.z );
+			expect( imprecise( child3CB.position.y) ).equals(containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child3CB._bounds._offsetHeight/2 + child3CB._margin._value.z );
 		});
 
 		it("Any child should snap on container right minus margin mixed", function () {
@@ -217,8 +217,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"center"}', func
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals(containerBB.centerY - containerBB.offsetHeight/2 + child3BB.offsetHeight/2 + child3BB._margin.z );
-			expect( imprecise( child3CB.position.y) ).equals(containerCB.centerY - containerCB.offsetHeight/2 + child3CB.offsetHeight/2 + child3CB._margin.z );
+			expect( imprecise( child3BB.position.y) ).equals(containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child3BB._bounds._offsetHeight/2 + child3BB._margin._value.z );
+			expect( imprecise( child3CB.position.y) ).equals(containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child3CB._bounds._offsetHeight/2 + child3CB._margin._value.z );
 		});
 
 	});
diff --git a/tests/specs/utils/block-layout/cases/row-end--reverse.js b/tests/specs/utils/block-layout/cases/row-end--reverse.js
index 4a536cc1..6403efdf 100644
--- a/tests/specs/utils/block-layout/cases/row-end--reverse.js
+++ b/tests/specs/utils/block-layout/cases/row-end--reverse.js
@@ -3,7 +3,7 @@ import { preloadFonts } from '../../../../utils/TestFonts.js';
 import { fiveBlockContainer } from '../../../../utils/TestStructure.js';
 import { imprecise } from '../../../../utils/TestNumber.js';
 
-describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"end"}', function () {
+describe('Layout Case : {flexDirection:"row-reverse", justifyContent:"end"}', function () {
 
 	let scene, camera, renderer, render;
 	let fontFamily;
@@ -35,8 +35,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"end"}',
 
 	beforeEach( function () {
 
-		containerBB.set({contentDirection: 'row-reverse', justifyContent:'end'});
-		containerCB.set({contentDirection: 'row-reverse', justifyContent:'end'});
+		containerBB.set({flexDirection: 'row-reverse', justifyContent:'end'});
+		containerCB.set({flexDirection: 'row-reverse', justifyContent:'end'});
 
 
 
@@ -47,11 +47,11 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"end"}',
 
 	it("Last child should snap on left on container", function () {
 
-		const containerLeftBB = containerBB.centerX - containerBB.innerWidth / 2;
-		const containerLeftCB = containerCB.centerX - containerCB.innerWidth / 2;
+		const containerLeftBB = containerBB._bounds._centerX - containerBB._bounds._innerWidth / 2;
+		const containerLeftCB = containerCB._bounds._centerX - containerCB._bounds._innerWidth / 2;
 
-		expect( imprecise( child5BB.position.x) ).equals( containerLeftBB + child5BB.offsetWidth / 2 );
-		expect( imprecise( child5CB.position.x) ).equals( containerLeftCB + child5CB.offsetWidth / 2 );
+		expect( imprecise( child5BB.position.x) ).equals( containerLeftBB + child5BB._bounds._offsetWidth / 2 );
+		expect( imprecise( child5CB.position.x) ).equals( containerLeftCB + child5CB._bounds._offsetWidth / 2 );
 	});
 
 	it("Last child should snap on left on container minus margin", function () {
@@ -64,11 +64,11 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"end"}',
 
 		render();
 
-		const containerLeftBB = containerBB.centerY - containerBB.innerWidth / 2;
-		const containerLeftCB = containerCB.centerY - containerCB.innerWidth / 2;
+		const containerLeftBB = containerBB._bounds._centerY - containerBB._bounds._innerWidth / 2;
+		const containerLeftCB = containerCB._bounds._centerY - containerCB._bounds._innerWidth / 2;
 
-		expect( imprecise( child5BB.position.x) ).equals( containerLeftBB + child5BB.offsetWidth / 2 + child5BB._margin.w);
-		expect( imprecise( child5CB.position.x) ).equals( containerLeftCB + child5CB.offsetWidth / 2 + child5CB._margin.w);
+		expect( imprecise( child5BB.position.x) ).equals( containerLeftBB + child5BB._bounds._offsetWidth / 2 + child5BB._margin._value.w);
+		expect( imprecise( child5CB.position.x) ).equals( containerLeftCB + child5CB._bounds._offsetWidth / 2 + child5CB._margin._value.w);
 	});
 
 
@@ -84,8 +84,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"end"}',
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY );
-			expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY );
+			expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY );
+			expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY );
 		});
 
 
@@ -99,8 +99,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"end"}',
 
 			render();
 
-			expect( imprecise( child5BB.position.y) ).equals( containerBB.centerY + ( - child5BB._margin.x + child5BB._margin.z) / 2 );
-			expect( imprecise( child5CB.position.y) ).equals( containerCB.centerY + ( - child5CB._margin.x + child5CB._margin.z) / 2 );
+			expect( imprecise( child5BB.position.y) ).equals( containerBB._bounds._centerY + ( - child5BB._margin._value.x + child5BB._margin._value.z) / 2 );
+			expect( imprecise( child5CB.position.y) ).equals( containerCB._bounds._centerY + ( - child5CB._margin._value.x + child5CB._margin._value.z) / 2 );
 
 		});
 
@@ -115,8 +115,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"end"}',
 
 			render();
 
-			expect( imprecise( child5BB.position.y) ).equals( containerBB.centerY + ( - child5BB._margin.x + child5BB._margin.z ) / 2);
-			expect( imprecise( child5CB.position.y) ).equals( containerCB.centerY + ( - child5CB._margin.x + child5CB._margin.z ) / 2);
+			expect( imprecise( child5BB.position.y) ).equals( containerBB._bounds._centerY + ( - child5BB._margin._value.x + child5BB._margin._value.z ) / 2);
+			expect( imprecise( child5CB.position.y) ).equals( containerCB._bounds._centerY + ( - child5CB._margin._value.x + child5CB._margin._value.z ) / 2);
 		});
 
 	});
@@ -134,8 +134,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"end"}',
 			render();
 
 
-			expect( imprecise( child5BB.position.y) ).equals( containerBB.centerY + containerBB.offsetHeight/2 - child5BB.offsetHeight/2 );
-			expect( imprecise( child5CB.position.y) ).equals( containerCB.centerY + containerCB.offsetHeight/2 - child5CB.offsetHeight/2 );
+			expect( imprecise( child5BB.position.y) ).equals( containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child5BB._bounds._offsetHeight/2 );
+			expect( imprecise( child5CB.position.y) ).equals( containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child5CB._bounds._offsetHeight/2 );
 		});
 
 		it("Any child should snap on container top minus margin", function () {
@@ -148,8 +148,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"end"}',
 
 			render();
 
-			expect( imprecise( child5BB.position.y) ).equals(containerBB.centerY + containerBB.offsetHeight/2 - child5BB.offsetHeight/2 - child5BB._margin.x );
-			expect( imprecise( child5CB.position.y) ).equals(containerCB.centerY + containerCB.offsetHeight/2 - child5CB.offsetHeight/2 - child5CB._margin.x );
+			expect( imprecise( child5BB.position.y) ).equals(containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child5BB._bounds._offsetHeight/2 - child5BB._margin._value.x );
+			expect( imprecise( child5CB.position.y) ).equals(containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child5CB._bounds._offsetHeight/2 - child5CB._margin._value.x );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -162,8 +162,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"end"}',
 
 			render();
 
-			expect( imprecise( child5BB.position.y) ).equals(containerBB.centerY + containerBB.offsetHeight/2 - child5BB.offsetHeight/2 - child5BB._margin.x );
-			expect( imprecise( child5CB.position.y) ).equals(containerCB.centerY + containerCB.offsetHeight/2 - child5CB.offsetHeight/2 - child5CB._margin.x );
+			expect( imprecise( child5BB.position.y) ).equals(containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child5BB._bounds._offsetHeight/2 - child5BB._margin._value.x );
+			expect( imprecise( child5CB.position.y) ).equals(containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child5CB._bounds._offsetHeight/2 - child5CB._margin._value.x );
 		});
 
 	});
@@ -181,8 +181,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"end"}',
 			render();
 
 
-			expect( imprecise( child5BB.position.y) ).equals( containerBB.centerY - containerBB.offsetHeight/2 + child5BB.offsetHeight/2 );
-			expect( imprecise( child5CB.position.y) ).equals( containerCB.centerY - containerCB.offsetHeight/2 + child5CB.offsetHeight/2 );
+			expect( imprecise( child5BB.position.y) ).equals( containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child5BB._bounds._offsetHeight/2 );
+			expect( imprecise( child5CB.position.y) ).equals( containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child5CB._bounds._offsetHeight/2 );
 		});
 
 		it("Any child should snap on container bottom minus margin", function () {
@@ -195,8 +195,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"end"}',
 
 			render();
 
-			expect( imprecise( child1BB.position.y) ).equals(containerBB.centerY - containerBB.offsetHeight/2 + child1BB.offsetHeight/2 + child1BB._margin.z );
-			expect( imprecise( child1CB.position.y) ).equals(containerCB.centerY - containerCB.offsetHeight/2 + child1CB.offsetHeight/2 + child1CB._margin.z );
+			expect( imprecise( child1BB.position.y) ).equals(containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child1BB._bounds._offsetHeight/2 + child1BB._margin._value.z );
+			expect( imprecise( child1CB.position.y) ).equals(containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child1CB._bounds._offsetHeight/2 + child1CB._margin._value.z );
 		});
 
 		it("Any child should snap on container right minus margin mixed", function () {
@@ -209,8 +209,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"end"}',
 
 			render();
 
-			expect( imprecise( child1BB.position.y) ).equals(containerBB.centerY - containerBB.offsetHeight/2 + child1BB.offsetHeight/2 + child1BB._margin.z );
-			expect( imprecise( child1CB.position.y) ).equals(containerCB.centerY - containerCB.offsetHeight/2 + child1CB.offsetHeight/2 + child1CB._margin.z );
+			expect( imprecise( child1BB.position.y) ).equals(containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child1BB._bounds._offsetHeight/2 + child1BB._margin._value.z );
+			expect( imprecise( child1CB.position.y) ).equals(containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child1CB._bounds._offsetHeight/2 + child1CB._margin._value.z );
 		});
 
 	});
diff --git a/tests/specs/utils/block-layout/cases/row-end.js b/tests/specs/utils/block-layout/cases/row-end.js
index 60d019c0..be1d3cc2 100644
--- a/tests/specs/utils/block-layout/cases/row-end.js
+++ b/tests/specs/utils/block-layout/cases/row-end.js
@@ -3,7 +3,7 @@ import { preloadFonts } from '../../../../utils/TestFonts.js';
 import { fiveBlockContainer } from '../../../../utils/TestStructure.js';
 import { imprecise } from '../../../../utils/TestNumber.js';
 
-describe('Layout Case : {contentDirection:"row", justifyContent:"end"}', function () {
+describe('Layout Case : {flexDirection:"row", justifyContent:"end"}', function () {
 
 	let scene, camera, renderer, render;
 	let fontFamily;
@@ -35,8 +35,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"end"}', functio
 
 	beforeEach( function () {
 
-		containerBB.set({contentDirection: 'row', justifyContent:'end'});
-		containerCB.set({contentDirection: 'row', justifyContent:'end'});
+		containerBB.set({flexDirection: 'row', justifyContent:'end'});
+		containerCB.set({flexDirection: 'row', justifyContent:'end'});
 
 
 
@@ -47,11 +47,11 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"end"}', functio
 
 	it("Last child should snap on right on container", function () {
 
-		const containerRightBB = containerBB.centerX + containerBB.innerWidth / 2;
-		const containerRightCB = containerCB.centerX + containerCB.innerWidth / 2;
+		const containerRightBB = containerBB._bounds._centerX + containerBB._bounds._innerWidth / 2;
+		const containerRightCB = containerCB._bounds._centerX + containerCB._bounds._innerWidth / 2;
 
-		expect( imprecise( child5BB.position.x) ).equals( containerRightBB - child5BB.offsetWidth / 2 );
-		expect( imprecise( child5CB.position.x) ).equals( containerRightCB - child5CB.offsetWidth / 2 );
+		expect( imprecise( child5BB.position.x) ).equals( containerRightBB - child5BB._bounds._offsetWidth / 2 );
+		expect( imprecise( child5CB.position.x) ).equals( containerRightCB - child5CB._bounds._offsetWidth / 2 );
 	});
 
 	it("Last child should snap on right on container minus margin", function () {
@@ -64,11 +64,11 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"end"}', functio
 
 		render();
 
-		const containerRightBB = containerBB.centerY + containerBB.innerWidth / 2;
-		const containerRightCB = containerCB.centerY + containerCB.innerWidth / 2;
+		const containerRightBB = containerBB._bounds._centerY + containerBB._bounds._innerWidth / 2;
+		const containerRightCB = containerCB._bounds._centerY + containerCB._bounds._innerWidth / 2;
 
-		expect( imprecise( child5BB.position.x) ).equals( containerRightBB - child5BB.offsetWidth / 2 - child5BB._margin.y);
-		expect( imprecise( child5CB.position.x) ).equals( containerRightCB - child5CB.offsetWidth / 2 - child5CB._margin.y);
+		expect( imprecise( child5BB.position.x) ).equals( containerRightBB - child5BB._bounds._offsetWidth / 2 - child5BB._margin._value.y);
+		expect( imprecise( child5CB.position.x) ).equals( containerRightCB - child5CB._bounds._offsetWidth / 2 - child5CB._margin._value.y);
 	});
 
 
@@ -84,8 +84,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"end"}', functio
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY );
-			expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY );
+			expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY );
+			expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY );
 		});
 
 
@@ -99,8 +99,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"end"}', functio
 
 			render();
 
-			expect( imprecise( child5BB.position.y) ).equals( containerBB.centerY + ( - child5BB._margin.x + child5BB._margin.z) / 2 );
-			expect( imprecise( child5CB.position.y) ).equals( containerCB.centerY + ( - child5CB._margin.x + child5CB._margin.z) / 2 );
+			expect( imprecise( child5BB.position.y) ).equals( containerBB._bounds._centerY + ( - child5BB._margin._value.x + child5BB._margin._value.z) / 2 );
+			expect( imprecise( child5CB.position.y) ).equals( containerCB._bounds._centerY + ( - child5CB._margin._value.x + child5CB._margin._value.z) / 2 );
 
 		});
 
@@ -115,8 +115,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"end"}', functio
 
 			render();
 
-			expect( imprecise( child5BB.position.y) ).equals( containerBB.centerY + ( - child5BB._margin.x + child5BB._margin.z ) / 2);
-			expect( imprecise( child5CB.position.y) ).equals( containerCB.centerY + ( - child5CB._margin.x + child5CB._margin.z ) / 2);
+			expect( imprecise( child5BB.position.y) ).equals( containerBB._bounds._centerY + ( - child5BB._margin._value.x + child5BB._margin._value.z ) / 2);
+			expect( imprecise( child5CB.position.y) ).equals( containerCB._bounds._centerY + ( - child5CB._margin._value.x + child5CB._margin._value.z ) / 2);
 		});
 
 	});
@@ -134,8 +134,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"end"}', functio
 			render();
 
 
-			expect( imprecise( child5BB.position.y) ).equals( containerBB.centerY + containerBB.offsetHeight/2 - child5BB.offsetHeight/2 );
-			expect( imprecise( child5CB.position.y) ).equals( containerCB.centerY + containerCB.offsetHeight/2 - child5CB.offsetHeight/2 );
+			expect( imprecise( child5BB.position.y) ).equals( containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child5BB._bounds._offsetHeight/2 );
+			expect( imprecise( child5CB.position.y) ).equals( containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child5CB._bounds._offsetHeight/2 );
 		});
 
 		it("Any child should snap on container top minus margin", function () {
@@ -148,8 +148,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"end"}', functio
 
 			render();
 
-			expect( imprecise( child5BB.position.y) ).equals(containerBB.centerY + containerBB.offsetHeight/2 - child5BB.offsetHeight/2 - child5BB._margin.x );
-			expect( imprecise( child5CB.position.y) ).equals(containerCB.centerY + containerCB.offsetHeight/2 - child5CB.offsetHeight/2 - child5CB._margin.x );
+			expect( imprecise( child5BB.position.y) ).equals(containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child5BB._bounds._offsetHeight/2 - child5BB._margin._value.x );
+			expect( imprecise( child5CB.position.y) ).equals(containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child5CB._bounds._offsetHeight/2 - child5CB._margin._value.x );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -162,8 +162,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"end"}', functio
 
 			render();
 
-			expect( imprecise( child5BB.position.y) ).equals(containerBB.centerY + containerBB.offsetHeight/2 - child5BB.offsetHeight/2 - child5BB._margin.x );
-			expect( imprecise( child5CB.position.y) ).equals(containerCB.centerY + containerCB.offsetHeight/2 - child5CB.offsetHeight/2 - child5CB._margin.x );
+			expect( imprecise( child5BB.position.y) ).equals(containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child5BB._bounds._offsetHeight/2 - child5BB._margin._value.x );
+			expect( imprecise( child5CB.position.y) ).equals(containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child5CB._bounds._offsetHeight/2 - child5CB._margin._value.x );
 		});
 
 	});
@@ -181,8 +181,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"end"}', functio
 			render();
 
 
-			expect( imprecise( child5BB.position.y) ).equals( containerBB.centerY - containerBB.offsetHeight/2 + child5BB.offsetHeight/2 );
-			expect( imprecise( child5CB.position.y) ).equals( containerCB.centerY - containerCB.offsetHeight/2 + child5CB.offsetHeight/2 );
+			expect( imprecise( child5BB.position.y) ).equals( containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child5BB._bounds._offsetHeight/2 );
+			expect( imprecise( child5CB.position.y) ).equals( containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child5CB._bounds._offsetHeight/2 );
 		});
 
 		it("Any child should snap on container bottom minus margin", function () {
@@ -195,8 +195,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"end"}', functio
 
 			render();
 
-			expect( imprecise( child5BB.position.y) ).equals(containerBB.centerY - containerBB.offsetHeight/2 + child5BB.offsetHeight/2 + child5BB._margin.z );
-			expect( imprecise( child5CB.position.y) ).equals(containerCB.centerY - containerCB.offsetHeight/2 + child5CB.offsetHeight/2 + child5CB._margin.z );
+			expect( imprecise( child5BB.position.y) ).equals(containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child5BB._bounds._offsetHeight/2 + child5BB._margin._value.z );
+			expect( imprecise( child5CB.position.y) ).equals(containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child5CB._bounds._offsetHeight/2 + child5CB._margin._value.z );
 		});
 
 		it("Any child should snap on container right minus margin mixed", function () {
@@ -209,8 +209,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"end"}', functio
 
 			render();
 
-			expect( imprecise( child5BB.position.y) ).equals(containerBB.centerY - containerBB.offsetHeight/2 + child5BB.offsetHeight/2 + child5BB._margin.z );
-			expect( imprecise( child5CB.position.y) ).equals(containerCB.centerY - containerCB.offsetHeight/2 + child5CB.offsetHeight/2 + child5CB._margin.z );
+			expect( imprecise( child5BB.position.y) ).equals(containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child5BB._bounds._offsetHeight/2 + child5BB._margin._value.z );
+			expect( imprecise( child5CB.position.y) ).equals(containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child5CB._bounds._offsetHeight/2 + child5CB._margin._value.z );
 		});
 
 	});
diff --git a/tests/specs/utils/block-layout/cases/row-start--reverse.js b/tests/specs/utils/block-layout/cases/row-start--reverse.js
index 833d4614..b7a263bd 100644
--- a/tests/specs/utils/block-layout/cases/row-start--reverse.js
+++ b/tests/specs/utils/block-layout/cases/row-start--reverse.js
@@ -3,7 +3,7 @@ import { preloadFonts } from '../../../../utils/TestFonts.js';
 import { fiveBlockContainer } from '../../../../utils/TestStructure.js';
 import { imprecise } from '../../../../utils/TestNumber.js';
 
-describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"start"}', function () {
+describe('Layout Case : {flexDirection:"row-reverse", justifyContent:"start"}', function () {
 
 	let scene, camera, renderer, render;
 	let fontFamily;
@@ -35,8 +35,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"start"}
 
 	beforeEach( function () {
 
-		containerBB.set({contentDirection: 'row-reverse', justifyContent:'start'});
-		containerCB.set({contentDirection: 'row-reverse', justifyContent:'start'});
+		containerBB.set({flexDirection: 'row-reverse', justifyContent:'start'});
+		containerCB.set({flexDirection: 'row-reverse', justifyContent:'start'});
 
 
 
@@ -47,11 +47,11 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"start"}
 
 	it("First child should snap on right on container", function () {
 
-		const containerRightBB = containerBB.centerX + containerBB.innerWidth / 2;
-		const containerRightCB = containerCB.centerX + containerCB.innerWidth / 2;
+		const containerRightBB = containerBB._bounds._centerX + containerBB._bounds._innerWidth / 2;
+		const containerRightCB = containerCB._bounds._centerX + containerCB._bounds._innerWidth / 2;
 
-		expect( imprecise( child1BB.position.x) ).equals( containerRightBB - child1BB.offsetWidth / 2 );
-		expect( imprecise( child1CB.position.x) ).equals( containerRightCB - child1CB.offsetWidth / 2 );
+		expect( imprecise( child1BB.position.x) ).equals( containerRightBB - child1BB._bounds._offsetWidth / 2 );
+		expect( imprecise( child1CB.position.x) ).equals( containerRightCB - child1CB._bounds._offsetWidth / 2 );
 	});
 
 	it("First child should snap on right on container minus margin", function () {
@@ -64,11 +64,11 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"start"}
 
 		render();
 
-		const containerRightBB = containerBB.centerY + containerBB.innerWidth / 2;
-		const containerRightCB = containerCB.centerY + containerCB.innerWidth / 2;
+		const containerRightBB = containerBB._bounds._centerY + containerBB._bounds._innerWidth / 2;
+		const containerRightCB = containerCB._bounds._centerY + containerCB._bounds._innerWidth / 2;
 
-		expect( imprecise( child1BB.position.x) ).equals( containerRightBB - child1BB.offsetWidth / 2 - child1BB._margin.y);
-		expect( imprecise( child1CB.position.x) ).equals( containerRightCB - child1CB.offsetWidth / 2 - child1CB._margin.y);
+		expect( imprecise( child1BB.position.x) ).equals( containerRightBB - child1BB._bounds._offsetWidth / 2 - child1BB._margin._value.y);
+		expect( imprecise( child1CB.position.x) ).equals( containerRightCB - child1CB._bounds._offsetWidth / 2 - child1CB._margin._value.y);
 	});
 
 
@@ -84,8 +84,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"start"}
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY );
-			expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY );
+			expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY );
+			expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY );
 		});
 
 
@@ -99,8 +99,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"start"}
 
 			render();
 
-			expect( imprecise( child1BB.position.y) ).equals( containerBB.centerY + ( - child1BB._margin.x + child1BB._margin.z) / 2 );
-			expect( imprecise( child1CB.position.y) ).equals( containerCB.centerY + ( - child1CB._margin.x + child1CB._margin.z) / 2 );
+			expect( imprecise( child1BB.position.y) ).equals( containerBB._bounds._centerY + ( - child1BB._margin._value.x + child1BB._margin._value.z) / 2 );
+			expect( imprecise( child1CB.position.y) ).equals( containerCB._bounds._centerY + ( - child1CB._margin._value.x + child1CB._margin._value.z) / 2 );
 
 		});
 
@@ -115,8 +115,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"start"}
 
 			render();
 
-			expect( imprecise( child1BB.position.y) ).equals( containerBB.centerY + ( - child1BB._margin.x + child1BB._margin.z ) / 2);
-			expect( imprecise( child1CB.position.y) ).equals( containerCB.centerY + ( - child1CB._margin.x + child1CB._margin.z ) / 2);
+			expect( imprecise( child1BB.position.y) ).equals( containerBB._bounds._centerY + ( - child1BB._margin._value.x + child1BB._margin._value.z ) / 2);
+			expect( imprecise( child1CB.position.y) ).equals( containerCB._bounds._centerY + ( - child1CB._margin._value.x + child1CB._margin._value.z ) / 2);
 		});
 
 	});
@@ -134,8 +134,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"start"}
 			render();
 
 
-			expect( imprecise( child1BB.position.y) ).equals( containerBB.centerY + containerBB.offsetHeight/2 - child1BB.offsetHeight/2 );
-			expect( imprecise( child1CB.position.y) ).equals( containerCB.centerY + containerCB.offsetHeight/2 - child1CB.offsetHeight/2 );
+			expect( imprecise( child1BB.position.y) ).equals( containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child1BB._bounds._offsetHeight/2 );
+			expect( imprecise( child1CB.position.y) ).equals( containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child1CB._bounds._offsetHeight/2 );
 		});
 
 		it("Any child should snap on container top minus margin", function () {
@@ -148,8 +148,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"start"}
 
 			render();
 
-			expect( imprecise( child1BB.position.y) ).equals(containerBB.centerY + containerBB.offsetHeight/2 - child1BB.offsetHeight/2 - child1BB._margin.x );
-			expect( imprecise( child1CB.position.y) ).equals(containerCB.centerY + containerCB.offsetHeight/2 - child1CB.offsetHeight/2 - child1CB._margin.x );
+			expect( imprecise( child1BB.position.y) ).equals(containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child1BB._bounds._offsetHeight/2 - child1BB._margin._value.x );
+			expect( imprecise( child1CB.position.y) ).equals(containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child1CB._bounds._offsetHeight/2 - child1CB._margin._value.x );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -162,8 +162,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"start"}
 
 			render();
 
-			expect( imprecise( child1BB.position.y) ).equals(containerBB.centerY + containerBB.offsetHeight/2 - child1BB.offsetHeight/2 - child1BB._margin.x );
-			expect( imprecise( child1CB.position.y) ).equals(containerCB.centerY + containerCB.offsetHeight/2 - child1CB.offsetHeight/2 - child1CB._margin.x );
+			expect( imprecise( child1BB.position.y) ).equals(containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child1BB._bounds._offsetHeight/2 - child1BB._margin._value.x );
+			expect( imprecise( child1CB.position.y) ).equals(containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child1CB._bounds._offsetHeight/2 - child1CB._margin._value.x );
 		});
 
 	});
@@ -181,8 +181,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"start"}
 			render();
 
 
-			expect( imprecise( child1BB.position.y) ).equals( containerBB.centerY - containerBB.offsetHeight/2 + child1BB.offsetHeight/2 );
-			expect( imprecise( child1CB.position.y) ).equals( containerCB.centerY - containerCB.offsetHeight/2 + child1CB.offsetHeight/2 );
+			expect( imprecise( child1BB.position.y) ).equals( containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child1BB._bounds._offsetHeight/2 );
+			expect( imprecise( child1CB.position.y) ).equals( containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child1CB._bounds._offsetHeight/2 );
 		});
 
 		it("Any child should snap on container bottom minus margin", function () {
@@ -195,8 +195,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"start"}
 
 			render();
 
-			expect( imprecise( child1BB.position.y) ).equals(containerBB.centerY - containerBB.offsetHeight/2 + child1BB.offsetHeight/2 + child1BB._margin.z );
-			expect( imprecise( child1CB.position.y) ).equals(containerCB.centerY - containerCB.offsetHeight/2 + child1CB.offsetHeight/2 + child1CB._margin.z );
+			expect( imprecise( child1BB.position.y) ).equals(containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child1BB._bounds._offsetHeight/2 + child1BB._margin._value.z );
+			expect( imprecise( child1CB.position.y) ).equals(containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child1CB._bounds._offsetHeight/2 + child1CB._margin._value.z );
 		});
 
 		it("Any child should snap on container right minus margin mixed", function () {
@@ -209,8 +209,8 @@ describe('Layout Case : {contentDirection:"row-reverse", justifyContent:"start"}
 
 			render();
 
-			expect( imprecise( child1BB.position.y) ).equals(containerBB.centerY - containerBB.offsetHeight/2 + child1BB.offsetHeight/2 + child1BB._margin.z );
-			expect( imprecise( child1CB.position.y) ).equals(containerCB.centerY - containerCB.offsetHeight/2 + child1CB.offsetHeight/2 + child1CB._margin.z );
+			expect( imprecise( child1BB.position.y) ).equals(containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child1BB._bounds._offsetHeight/2 + child1BB._margin._value.z );
+			expect( imprecise( child1CB.position.y) ).equals(containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child1CB._bounds._offsetHeight/2 + child1CB._margin._value.z );
 		});
 
 	});
diff --git a/tests/specs/utils/block-layout/cases/row-start.js b/tests/specs/utils/block-layout/cases/row-start.js
index 929a1f61..df925f3c 100644
--- a/tests/specs/utils/block-layout/cases/row-start.js
+++ b/tests/specs/utils/block-layout/cases/row-start.js
@@ -3,7 +3,7 @@ import { preloadFonts } from '../../../../utils/TestFonts.js';
 import { fiveBlockContainer } from '../../../../utils/TestStructure.js';
 import { imprecise } from '../../../../utils/TestNumber.js';
 
-describe('Layout Case : {contentDirection:"row", justifyContent:"start"}', function () {
+describe('Layout Case : {flexDirection:"row", justifyContent:"start"}', function () {
 
 	let scene, camera, renderer, render;
 	let fontFamily;
@@ -35,8 +35,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"start"}', funct
 
 	beforeEach( function () {
 
-		containerBB.set({contentDirection: 'row', justifyContent:'start'});
-		containerCB.set({contentDirection: 'row', justifyContent:'start'});
+		containerBB.set({flexDirection: 'row', justifyContent:'start'});
+		containerCB.set({flexDirection: 'row', justifyContent:'start'});
 
 
 
@@ -47,11 +47,11 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"start"}', funct
 
 	it("First child should snap on left on container", function () {
 
-		const containerLeftBB = containerBB.centerX - containerBB.innerWidth / 2;
-		const containerLeftCB = containerCB.centerX - containerCB.innerWidth / 2;
+		const containerLeftBB = containerBB._bounds._centerX - containerBB._bounds._innerWidth / 2;
+		const containerLeftCB = containerCB._bounds._centerX - containerCB._bounds._innerWidth / 2;
 
-		expect( imprecise( child1BB.position.x) ).equals( containerLeftBB + child1BB.offsetWidth / 2 );
-		expect( imprecise( child1CB.position.x) ).equals( containerLeftCB + child1CB.offsetWidth / 2 );
+		expect( imprecise( child1BB.position.x) ).equals( containerLeftBB + child1BB._bounds._offsetWidth / 2 );
+		expect( imprecise( child1CB.position.x) ).equals( containerLeftCB + child1CB._bounds._offsetWidth / 2 );
 	});
 
 	it("First child should snap on left on container minus margin", function () {
@@ -64,11 +64,11 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"start"}', funct
 
 		render();
 
-		const containerLeftBB = containerBB.centerY - containerBB.innerWidth / 2;
-		const containerLeftCB = containerCB.centerY - containerCB.innerWidth / 2;
+		const containerLeftBB = containerBB._bounds._centerY - containerBB._bounds._innerWidth / 2;
+		const containerLeftCB = containerCB._bounds._centerY - containerCB._bounds._innerWidth / 2;
 
-		expect( imprecise( child1BB.position.x) ).equals( containerLeftBB + child1BB.offsetWidth / 2 + child1BB._margin.w);
-		expect( imprecise( child1CB.position.x) ).equals( containerLeftCB + child1CB.offsetWidth / 2 + child1CB._margin.w);
+		expect( imprecise( child1BB.position.x) ).equals( containerLeftBB + child1BB._bounds._offsetWidth / 2 + child1BB._margin._value.w);
+		expect( imprecise( child1CB.position.x) ).equals( containerLeftCB + child1CB._bounds._offsetWidth / 2 + child1CB._margin._value.w);
 	});
 
 
@@ -84,8 +84,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"start"}', funct
 
 			render();
 
-			expect( imprecise( child3BB.position.y) ).equals( containerBB.centerY );
-			expect( imprecise( child3CB.position.y) ).equals( containerCB.centerY );
+			expect( imprecise( child3BB.position.y) ).equals( containerBB._bounds._centerY );
+			expect( imprecise( child3CB.position.y) ).equals( containerCB._bounds._centerY );
 		});
 
 
@@ -99,8 +99,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"start"}', funct
 
 			render();
 
-			expect( imprecise( child1BB.position.y) ).equals( containerBB.centerY + ( - child1BB._margin.x + child1BB._margin.z) / 2 );
-			expect( imprecise( child1CB.position.y) ).equals( containerCB.centerY + ( - child1CB._margin.x + child1CB._margin.z) / 2 );
+			expect( imprecise( child1BB.position.y) ).equals( containerBB._bounds._centerY + ( - child1BB._margin._value.x + child1BB._margin._value.z) / 2 );
+			expect( imprecise( child1CB.position.y) ).equals( containerCB._bounds._centerY + ( - child1CB._margin._value.x + child1CB._margin._value.z) / 2 );
 
 		});
 
@@ -115,8 +115,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"start"}', funct
 
 			render();
 
-			expect( imprecise( child1BB.position.y) ).equals( containerBB.centerY + ( - child1BB._margin.x + child1BB._margin.z ) / 2);
-			expect( imprecise( child1CB.position.y) ).equals( containerCB.centerY + ( - child1CB._margin.x + child1CB._margin.z ) / 2);
+			expect( imprecise( child1BB.position.y) ).equals( containerBB._bounds._centerY + ( - child1BB._margin._value.x + child1BB._margin._value.z ) / 2);
+			expect( imprecise( child1CB.position.y) ).equals( containerCB._bounds._centerY + ( - child1CB._margin._value.x + child1CB._margin._value.z ) / 2);
 		});
 
 	});
@@ -134,8 +134,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"start"}', funct
 			render();
 
 
-			expect( imprecise( child1BB.position.y) ).equals( containerBB.centerY + containerBB.offsetHeight/2 - child1BB.offsetHeight/2 );
-			expect( imprecise( child1CB.position.y) ).equals( containerCB.centerY + containerCB.offsetHeight/2 - child1CB.offsetHeight/2 );
+			expect( imprecise( child1BB.position.y) ).equals( containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child1BB._bounds._offsetHeight/2 );
+			expect( imprecise( child1CB.position.y) ).equals( containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child1CB._bounds._offsetHeight/2 );
 		});
 
 		it("Any child should snap on container top minus margin", function () {
@@ -148,8 +148,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"start"}', funct
 
 			render();
 
-			expect( imprecise( child1BB.position.y) ).equals(containerBB.centerY + containerBB.offsetHeight/2 - child1BB.offsetHeight/2 - child1BB._margin.x );
-			expect( imprecise( child1CB.position.y) ).equals(containerCB.centerY + containerCB.offsetHeight/2 - child1CB.offsetHeight/2 - child1CB._margin.x );
+			expect( imprecise( child1BB.position.y) ).equals(containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child1BB._bounds._offsetHeight/2 - child1BB._margin._value.x );
+			expect( imprecise( child1CB.position.y) ).equals(containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child1CB._bounds._offsetHeight/2 - child1CB._margin._value.x );
 		});
 
 		it("Any child should snap on container center minus margin mixed", function () {
@@ -162,8 +162,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"start"}', funct
 
 			render();
 
-			expect( imprecise( child1BB.position.y) ).equals(containerBB.centerY + containerBB.offsetHeight/2 - child1BB.offsetHeight/2 - child1BB._margin.x );
-			expect( imprecise( child1CB.position.y) ).equals(containerCB.centerY + containerCB.offsetHeight/2 - child1CB.offsetHeight/2 - child1CB._margin.x );
+			expect( imprecise( child1BB.position.y) ).equals(containerBB._bounds._centerY + containerBB._bounds._offsetHeight/2 - child1BB._bounds._offsetHeight/2 - child1BB._margin._value.x );
+			expect( imprecise( child1CB.position.y) ).equals(containerCB._bounds._centerY + containerCB._bounds._offsetHeight/2 - child1CB._bounds._offsetHeight/2 - child1CB._margin._value.x );
 		});
 
 	});
@@ -181,8 +181,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"start"}', funct
 			render();
 
 
-			expect( imprecise( child1BB.position.y) ).equals( containerBB.centerY - containerBB.offsetHeight/2 + child1BB.offsetHeight/2 );
-			expect( imprecise( child1CB.position.y) ).equals( containerCB.centerY - containerCB.offsetHeight/2 + child1CB.offsetHeight/2 );
+			expect( imprecise( child1BB.position.y) ).equals( containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child1BB._bounds._offsetHeight/2 );
+			expect( imprecise( child1CB.position.y) ).equals( containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child1CB._bounds._offsetHeight/2 );
 		});
 
 		it("Any child should snap on container bottom minus margin", function () {
@@ -195,8 +195,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"start"}', funct
 
 			render();
 
-			expect( imprecise( child1BB.position.y) ).equals(containerBB.centerY - containerBB.offsetHeight/2 + child1BB.offsetHeight/2 + child1BB._margin.z );
-			expect( imprecise( child1CB.position.y) ).equals(containerCB.centerY - containerCB.offsetHeight/2 + child1CB.offsetHeight/2 + child1CB._margin.z );
+			expect( imprecise( child1BB.position.y) ).equals(containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child1BB._bounds._offsetHeight/2 + child1BB._margin._value.z );
+			expect( imprecise( child1CB.position.y) ).equals(containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child1CB._bounds._offsetHeight/2 + child1CB._margin._value.z );
 		});
 
 		it("Any child should snap on container right minus margin mixed", function () {
@@ -209,8 +209,8 @@ describe('Layout Case : {contentDirection:"row", justifyContent:"start"}', funct
 
 			render();
 
-			expect( imprecise( child1BB.position.y) ).equals(containerBB.centerY - containerBB.offsetHeight/2 + child1BB.offsetHeight/2 + child1BB._margin.z );
-			expect( imprecise( child1CB.position.y) ).equals(containerCB.centerY - containerCB.offsetHeight/2 + child1CB.offsetHeight/2 + child1CB._margin.z );
+			expect( imprecise( child1BB.position.y) ).equals(containerBB._bounds._centerY - containerBB._bounds._offsetHeight/2 + child1BB._bounds._offsetHeight/2 + child1BB._margin._value.z );
+			expect( imprecise( child1CB.position.y) ).equals(containerCB._bounds._centerY - containerCB._bounds._offsetHeight/2 + child1CB._bounds._offsetHeight/2 + child1CB._margin._value.z );
 		});
 
 	});
diff --git a/tests/specs/utils/block-layout/content-direction.js b/tests/specs/utils/block-layout/content-direction.js
index 14f4b63a..77a429ec 100644
--- a/tests/specs/utils/block-layout/content-direction.js
+++ b/tests/specs/utils/block-layout/content-direction.js
@@ -4,7 +4,7 @@ import { fiveBlockContainer } from '../../../utils/TestStructure.js';
 import { imprecise } from '../../../utils/TestNumber.js';
 
 
-describe("ContentDirection", function () {
+describe("flexDirection", function () {
 
 	let scene, camera, renderer, render;
 	let fontFamily;
@@ -30,7 +30,7 @@ describe("ContentDirection", function () {
 	describe(".COLUMN", function() {
 
 		before( () => {
-			container.set({contentDirection: 'column'});
+			container.set({flexDirection: 'column'});
 			render();
 		})
 
@@ -46,7 +46,7 @@ describe("ContentDirection", function () {
 		it("Vertical distance between children should be respected", function () {
 
 			let yDelta = child1.position.y - child2.position.y;
-			let hDelta = ( child1.getOffsetHeight() / 2 ) + ( child2.getOffsetHeight() / 2 );
+			let hDelta = ( child1._bounds._offsetHeight  / 2 ) + ( child2._bounds._offsetHeight  / 2 );
 			expect( imprecise( yDelta ) ).equals( hDelta );
 
 		});
@@ -58,7 +58,7 @@ describe("ContentDirection", function () {
 			render();
 
 			let yDelta = child1.position.y - child2.position.y;
-			let hDelta = ( child1.getOffsetHeight() / 2 ) + ( child2.getOffsetHeight() / 2 );
+			let hDelta = ( child1._bounds._offsetHeight  / 2 ) + ( child2._bounds._offsetHeight  / 2 );
 
 			expect( yDelta ).equals( hDelta + addedMargin );
 		});
@@ -68,7 +68,7 @@ describe("ContentDirection", function () {
 	describe(".COLUMN_REVERSE", function() {
 
 		before( () => {
-			container.set({contentDirection: 'column-reverse'});
+			container.set({flexDirection: 'column-reverse'});
 			child1.set({margin:0});
 			render();
 		})
@@ -85,7 +85,7 @@ describe("ContentDirection", function () {
 		it("Vertical distance between children should be respected", function () {
 
 			let yDelta = child2.position.y - child1.position.y;
-			let hDelta = ( child1.getOffsetHeight() / 2 ) + ( child2.getOffsetHeight() / 2 );
+			let hDelta = ( child1._bounds._offsetHeight  / 2 ) + ( child2._bounds._offsetHeight  / 2 );
 			expect( imprecise( yDelta ) ).equals( imprecise( hDelta ) );
 
 		});
@@ -97,7 +97,7 @@ describe("ContentDirection", function () {
 			render();
 
 			let yDelta = child2.position.y - child1.position.y;
-			let hDelta = ( child1.getOffsetHeight() / 2 ) + ( child2.getOffsetHeight() / 2 );
+			let hDelta = ( child1._bounds._offsetHeight  / 2 ) + ( child2._bounds._offsetHeight  / 2 );
 
 			expect( imprecise( yDelta ) ).equals( hDelta + addedMargin );
 		});
@@ -107,7 +107,7 @@ describe("ContentDirection", function () {
 	describe(".ROW", function() {
 
 		before( () => {
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			child1.set({margin:0});
 			render();
 		})
@@ -124,7 +124,7 @@ describe("ContentDirection", function () {
 		it("Horizontal distance between children should be respected", function () {
 
 			let xDelta = child2.position.x - child1.position.x;
-			let wDelta = ( child1.getOffsetWidth() / 2 ) + ( child2.getOffsetWidth() / 2 );
+			let wDelta = ( child1._bounds._offsetWidth / 2 ) + ( child2._bounds._offsetWidth / 2 );
 			expect( imprecise( xDelta ) ).equals( wDelta );
 
 		});
@@ -136,7 +136,7 @@ describe("ContentDirection", function () {
 			render();
 
 			let xDelta = child2.position.x - child1.position.x;
-			let wDelta = ( child1.getOffsetWidth() / 2 ) + ( child2.getOffsetWidth() / 2 );
+			let wDelta = ( child1._bounds._offsetWidth / 2 ) + ( child2._bounds._offsetWidth / 2 );
 
 			expect( imprecise( xDelta ) ).equals( wDelta + addedMargin );
 		});
@@ -145,7 +145,7 @@ describe("ContentDirection", function () {
 	describe(".ROW_REVERSE", function() {
 
 		before( () => {
-			container.set({contentDirection: 'row-reverse'});
+			container.set({flexDirection: 'row-reverse'});
 			child1.set({margin:0});
 			render();
 		})
@@ -162,7 +162,7 @@ describe("ContentDirection", function () {
 		it("Horizontal distance between children should be respected", function () {
 
 			let xDelta = child1.position.x - child2.position.x;
-			let wDelta = ( child1.getOffsetWidth() / 2 ) + ( child2.getOffsetWidth() / 2 );
+			let wDelta = ( child1._bounds._offsetWidth / 2 ) + ( child2._bounds._offsetWidth / 2 );
 			expect( imprecise( xDelta ) ).equals( wDelta );
 
 		});
@@ -174,7 +174,7 @@ describe("ContentDirection", function () {
 			render();
 
 			let xDelta = child1.position.x - child2.position.x;
-			let wDelta = ( child1.getOffsetWidth() / 2 ) + ( child2.getOffsetWidth() / 2 );
+			let wDelta = ( child1._bounds._offsetWidth / 2 ) + ( child2._bounds._offsetWidth / 2 );
 
 			expect( imprecise( xDelta ) ).equals( wDelta + addedMargin );
 		});
diff --git a/tests/specs/utils/block-layout/justify-content.js b/tests/specs/utils/block-layout/justify-content.js
index 1aec1ff1..a4f53767 100644
--- a/tests/specs/utils/block-layout/justify-content.js
+++ b/tests/specs/utils/block-layout/justify-content.js
@@ -28,7 +28,7 @@ describe("JustifyContent", function () {
 
 	beforeEach( function () {
 
-		container.set({contentDirection: 'column'});
+		container.set({flexDirection: 'column'});
 
 	});
 
@@ -37,7 +37,7 @@ describe("JustifyContent", function () {
 
 		beforeEach( () => {
 
-			container.set({contentDirection:'column', justifyContent: 'start'});
+			container.set({flexDirection:'column', justifyContent: 'start'});
 			render();
 
 		})
@@ -52,7 +52,7 @@ describe("JustifyContent", function () {
 			const dyChild5 = container.position.y - child5.position.y;
 			expect(dyChild1*dyChild1).greaterThan(dyChild5*dyChild5);
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 			// row -> horizontal -> x diffs
@@ -70,7 +70,7 @@ describe("JustifyContent", function () {
 			expect( child3.position.x ).equals( child4.position.x );
 			expect( child4.position.x ).equals( child5.position.x );
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 			// row -> horizontal -> y shared
@@ -88,7 +88,7 @@ describe("JustifyContent", function () {
 
 		beforeEach( () => {
 
-			container.set({contentDirection:'column', justifyContent: 'end'});
+			container.set({flexDirection:'column', justifyContent: 'end'});
 			render();
 
 		})
@@ -103,7 +103,7 @@ describe("JustifyContent", function () {
 			const dyChild5 = container.position.y - child5.position.y;
 			expect(dyChild1*dyChild1).lessThan(dyChild5*dyChild5);
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 			// row -> horizontal -> x diffs
@@ -121,7 +121,7 @@ describe("JustifyContent", function () {
 			expect( child3.position.x ).equals( child4.position.x );
 			expect( child4.position.x ).equals( child5.position.x );
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 			// row -> horizontal -> y shared
@@ -138,7 +138,7 @@ describe("JustifyContent", function () {
 	describe(".CENTER", function() {
 
 		beforeEach( () => {
-			container.set({contentDirection:'column', justifyContent: 'center'});
+			container.set({flexDirection:'column', justifyContent: 'center'});
 			render();
 		})
 
@@ -148,7 +148,7 @@ describe("JustifyContent", function () {
 			// row -> horizontal -> y center
 			expect( imprecise( child3.position.y ) ).equals(0 );
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 			// row -> horizontal -> x center
@@ -168,7 +168,7 @@ describe("JustifyContent", function () {
 			const dyChild5 = container.position.y - child5.position.y;
 			expect(imprecise( dyChild1*dyChild1 ) ).equals(imprecise( dyChild5*dyChild5 ) );
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 			// row -> horizontal -> x diffs
@@ -190,7 +190,7 @@ describe("JustifyContent", function () {
 			expect( child3.position.x ).equals( child4.position.x );
 			expect( child4.position.x ).equals( child5.position.x );
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 			// row -> horizontal -> y shared
@@ -207,7 +207,7 @@ describe("JustifyContent", function () {
 	describe(".SPACE_EVENLY", function() {
 
 		beforeEach( () => {
-			container.set({contentDirection:'column', justifyContent: 'space-evenly'});
+			container.set({flexDirection:'column', justifyContent: 'space-evenly'});
 			render();
 		})
 
@@ -217,7 +217,7 @@ describe("JustifyContent", function () {
 			// row -> horizontal -> y center
 			expect( imprecise( child3.position.y ) ).equals(0 );
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 			// row -> horizontal -> x center
@@ -233,13 +233,13 @@ describe("JustifyContent", function () {
 			const dyChild4to5 = child5.position.y - child4.position.y;
 			expect( imprecise( dyChild1to2*dyChild1to2 ) ).equals( imprecise( dyChild4to5*dyChild4to5 ) );
 
-			const dyBorderTop = -container.getOffsetHeight()/2 + child1.position.y;
-			const dyBorderBottom = container.getOffsetHeight()/2 + child5.position.y;
+			const dyBorderTop = -container._bounds._offsetHeight /2 + child1.position.y;
+			const dyBorderBottom = container._bounds._offsetHeight /2 + child5.position.y;
 
 			expect( imprecise( dyBorderTop*dyBorderTop )  ).equals( imprecise( dyBorderBottom*dyBorderBottom  ) );
-			expect( imprecise( dyBorderTop - child1.height/2 )  ).equals( imprecise( dyChild1to2 )  );
+			expect( imprecise( dyBorderTop - child1._height._value/2 )  ).equals( imprecise( dyChild1to2 )  );
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 
@@ -248,11 +248,11 @@ describe("JustifyContent", function () {
 			const dxChild4to5 = child5.position.x - child4.position.x;
 			expect(imprecise( dxChild1to2*dxChild1to2 ) ).equals( imprecise( dxChild4to5*dxChild4to5 ) );
 
-			const dxBorderLeft = container.getOffsetWidth()/2 + child1.position.x;
-			const dxBorderRight = -container.getOffsetWidth()/2 + child5.position.x;
+			const dxBorderLeft = container._bounds._offsetWidth/2 + child1.position.x;
+			const dxBorderRight = -container._bounds._offsetWidth/2 + child5.position.x;
 
 			expect( imprecise( dxBorderLeft*dxBorderLeft )  ).equals( imprecise( dxBorderRight*dxBorderRight )  );
-			expect( imprecise( dxBorderLeft + child1.width/2  ) ).equals( imprecise( dxChild1to2 )  );
+			expect( imprecise( dxBorderLeft + child1._width._value/2  ) ).equals( imprecise( dxChild1to2 )  );
 
 		});
 
@@ -264,7 +264,7 @@ describe("JustifyContent", function () {
 			expect( child3.position.x ).equals( child4.position.x );
 			expect( child4.position.x ).equals( child5.position.x );
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 			// row -> horizontal -> y shared
@@ -281,7 +281,7 @@ describe("JustifyContent", function () {
 	describe(".SPACE_AROUND", function() {
 
 		beforeEach( () => {
-			container.set({contentDirection:'column', justifyContent: 'space-around'});
+			container.set({flexDirection:'column', justifyContent: 'space-around'});
 			render();
 		})
 
@@ -291,7 +291,7 @@ describe("JustifyContent", function () {
 			// row -> horizontal -> y center
 			expect( imprecise( child3.position.y ) ).equals(0 );
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 			// row -> horizontal -> x center
@@ -308,15 +308,15 @@ describe("JustifyContent", function () {
 			expect(imprecise( dyChild1to2*dyChild1to2 ) ).equals( imprecise( dyChild4to5*dyChild4to5 ) );
 
 			// prevent precision issue
-			let dyBorderTop = -container.getOffsetHeight()/2 + child1.position.y;
+			let dyBorderTop = -container._bounds._offsetHeight /2 + child1.position.y;
 			dyBorderTop = parseFloat(dyBorderTop.toFixed(4));
-			let dyBorderBottom = container.getOffsetHeight()/2 + child5.position.y;
+			let dyBorderBottom = container._bounds._offsetHeight /2 + child5.position.y;
 			dyBorderBottom = parseFloat(dyBorderBottom.toFixed(4));
 
 			expect( imprecise( dyBorderTop*dyBorderTop ) ).equals( imprecise( dyBorderBottom*dyBorderBottom ) );
 			expect( imprecise( dyBorderTop ) ).equals( imprecise( dyChild1to2 / 2 ) );
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 
@@ -326,9 +326,9 @@ describe("JustifyContent", function () {
 			expect(imprecise( dxChild1to2*dxChild1to2 ) ).equals(imprecise( dxChild4to5*dxChild4to5 ));
 
 			// prevent precision issue
-			let dxBorderLeft = container.getOffsetWidth()/2 + child1.position.x;
+			let dxBorderLeft = container._bounds._offsetWidth/2 + child1.position.x;
 			dxBorderLeft = parseFloat(dxBorderLeft.toFixed(4));
-			let dxBorderRight = -container.getOffsetWidth()/2 + child5.position.x;
+			let dxBorderRight = -container._bounds._offsetWidth/2 + child5.position.x;
 			dxBorderRight = parseFloat(dxBorderRight.toFixed(4));
 
 			expect( imprecise( dxBorderLeft*dxBorderLeft ) ).equals( imprecise( dxBorderRight*dxBorderRight ) );
@@ -344,7 +344,7 @@ describe("JustifyContent", function () {
 			expect( child3.position.x ).equals( child4.position.x );
 			expect( child4.position.x ).equals( child5.position.x );
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 			// row -> horizontal -> y shared
@@ -361,7 +361,7 @@ describe("JustifyContent", function () {
 	describe(".SPACE_BETWEEN", function() {
 
 		beforeEach( () => {
-			container.set({contentDirection:'column', justifyContent: 'space-between'});
+			container.set({flexDirection:'column', justifyContent: 'space-between'});
 			render();
 		})
 
@@ -371,7 +371,7 @@ describe("JustifyContent", function () {
 			// row -> horizontal -> y center
 			expect( imprecise(child3.position.y) ).equals(0 );
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 			// row -> horizontal -> x center
@@ -384,22 +384,22 @@ describe("JustifyContent", function () {
 			// column -> vertical -> y diffs
 
 			// prevent precision issue
-			const dyBorderTop = -container.getOffsetHeight()/2 + child1.position.y;
-			const dyBorderBottom = container.getOffsetHeight()/2 + child5.position.y;
+			const dyBorderTop = -container._bounds._offsetHeight /2 + child1.position.y;
+			const dyBorderBottom = container._bounds._offsetHeight /2 + child5.position.y;
 
-			expect( Math.abs( imprecise(dyBorderTop) ) ).equals( child1.height/2 );
-			expect( Math.abs( imprecise(dyBorderBottom) ) ).equals( child5.height/2 );
+			expect( Math.abs( imprecise(dyBorderTop) ) ).equals( child1._height._value/2 );
+			expect( Math.abs( imprecise(dyBorderBottom) ) ).equals( child5._height._value/2 );
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 
 			// column -> vertical -> x diffs
-			const dxBorderLeft = container.getOffsetWidth()/2 + child1.position.x;
-			const dxBorderRight = -container.getOffsetWidth()/2 + child5.position.x;
+			const dxBorderLeft = container._bounds._offsetWidth/2 + child1.position.x;
+			const dxBorderRight = -container._bounds._offsetWidth/2 + child5.position.x;
 
-			expect( Math.abs( imprecise( dxBorderLeft ) ) ).equals( child1.width/2 );
-			expect( Math.abs( imprecise( dxBorderRight ) ) ).equals( child5.width/2 );
+			expect( Math.abs( imprecise( dxBorderLeft ) ) ).equals( child1._width._value/2 );
+			expect( Math.abs( imprecise( dxBorderRight ) ) ).equals( child5._width._value/2 );
 
 		});
 
@@ -411,7 +411,7 @@ describe("JustifyContent", function () {
 			expect( child3.position.x ).equals( child4.position.x );
 			expect( child4.position.x ).equals( child5.position.x );
 
-			container.set({contentDirection: 'row'});
+			container.set({flexDirection: 'row'});
 			render();
 
 			// row -> horizontal -> y shared
diff --git a/tests/utils/TestStructure.js b/tests/utils/TestStructure.js
index cb9b7be5..24770349 100644
--- a/tests/utils/TestStructure.js
+++ b/tests/utils/TestStructure.js
@@ -2,8 +2,8 @@
 
 export const oneBlockContainer = function ( scene ) {
 
-	const container = new ThreeMeshUI.Block({ width: 1, height:1 });
-	const child1 = new ThreeMeshUI.Block({ width: 0.1, height: 0.1 });
+	const container = new ThreeMeshUI.Block( { width: 1, height: 1 } );
+	const child1 = new ThreeMeshUI.Block( { width: 0.1, height: 0.1 } );
 
 	container.add( child1 );
 	scene.add( container );
@@ -27,3 +27,81 @@ export const fiveBlockContainer = function ( scene ) {
 	return { container, child1, child2, child3, child4, child5 };
 
 }
+
+export const threeParentContainers = function ( scene ) {
+
+	const root = new ThreeMeshUI.Block({ width: 1, height:1 });
+	const parent1 = new ThreeMeshUI.Block({ width: 0.1, height: 0.1 });
+	const parent2 = new ThreeMeshUI.Block({ width: 0.1, height: 0.1 });
+	const parent3 = new ThreeMeshUI.Block({ width: 0.1, height: 0.1 });
+
+	root.add( parent1, parent2, parent3 );
+	scene.add( root );
+
+	return { root, parent1, parent2, parent3 };
+
+}
+
+export const addThreeParagraphs = function( container ) {
+
+	const p1 = new ThreeMeshUI.Block({ width: 0.1, height: 0.1 });
+	p1.pasteAttributes("p");
+
+	const span1 = new ThreeMeshUI.Text({});
+	span1.pasteAttributes('span');
+
+	p1.add( span1 );
+
+	const p2 = new ThreeMeshUI.Block({ width: 0.1, height: 0.1 });
+	p2.pasteAttributes("p");
+
+	const span2 = new ThreeMeshUI.Text({});
+	span2.pasteAttributes('span');
+
+	p2.add( span2 );
+
+	const p3 = new ThreeMeshUI.Block({ width: 0.1, height: 0.1 });
+	p3.pasteAttributes("p");
+
+	const span3 = new ThreeMeshUI.Text({});
+	span3.pasteAttributes('span');
+
+	p3.add( span3 );
+
+	container.add( p1, p2, p3 );
+
+	return { p1, p2, p3 };
+
+}
+
+export const addThreeLinks = function( container ) {
+
+	const l1 = new ThreeMeshUI.Block({ width: 0.1, height: 0.1 });
+	l1.pasteAttributes("a");
+
+	const span1 = new ThreeMeshUI.Text({});
+	span1.pasteAttributes('span');
+
+	l1.add( span1 );
+
+	const l2 = new ThreeMeshUI.Block({ width: 0.1, height: 0.1 });
+	l2.pasteAttributes("a");
+
+	const span2 = new ThreeMeshUI.Text({});
+	span2.pasteAttributes('span');
+
+	l2.add( span2 );
+
+	const l3 = new ThreeMeshUI.Block({ width: 0.1, height: 0.1 });
+	l3.pasteAttributes("a");
+
+	const span3 = new ThreeMeshUI.Text({});
+	span3.pasteAttributes('span');
+
+	l3.add( span3 );
+
+	container.add( l1, l2, l3 );
+
+	return { l1, l2, l3 };
+
+}
diff --git a/tests/utils/TestThree.js b/tests/utils/TestThree.js
index 7ce77fc6..4dcd7171 100644
--- a/tests/utils/TestThree.js
+++ b/tests/utils/TestThree.js
@@ -5,7 +5,7 @@ export const buildThreeSetup = function (){
 	const scene = new THREE.Scene();
 
 	const WIDTH = window.innerWidth;
-	const HEIGHT = window.innerHeight;
+	const HEIGHT = window._innerHeight;
 	const camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 0.1, 100 );
 
 	const renderer = new THREE.WebGLRenderer();
@@ -18,7 +18,7 @@ export const buildThreeSetup = function (){
 
 	const render = () => {
 		ThreeMeshUI.update();
-		renderer.render( scene, camera );
+		// renderer.render( scene, camera );
 	}
 
 	return { renderer, scene, camera, render };
diff --git a/config/webpack.config.js b/webpack.config.js
similarity index 100%
rename from config/webpack.config.js
rename to webpack.config.js