@babylonjs/inspector 5.14.0 → 5.15.1

package/dist/babylon.inspector.bundle.max.js

@@ -52913,11 +52913,11 @@ class QuaternionLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compone
         eulerDegrees.x = core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.Tools.ToDegrees(eulerDegrees.x);
         eulerDegrees.y = core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.Tools.ToDegrees(eulerDegrees.y);
         eulerDegrees.z = core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.Tools.ToDegrees(eulerDegrees.z);
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "vector3Line" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "firstLine", title: this.props.label + " (Using Quaternion)" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "label" }, { children: this.props.label + " (Using Quaternion)" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "vector" }, { children: [!this.props.useEuler && `X: ${quat.x.toFixed(1)}, Y: ${quat.y.toFixed(1)}, Z: ${quat.z.toFixed(1)}, W: ${quat.w.toFixed(1)}`, this.props.useEuler && `X: ${eulerDegrees.x.toFixed(2)}, Y: ${eulerDegrees.y.toFixed(2)}, Z: ${eulerDegrees.z.toFixed(2)}`] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "expand", onClick: () => this.switchExpandState() }, { children: chevron }))] })), this.state.isExpanded && !this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "x", value: quat.x, onChange: (value) => this.updateStateX(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "y", value: quat.y, onChange: (value) => this.updateStateY(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "z", value: quat.z, onChange: (value) => this.updateStateZ(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "w", value: quat.w, onChange: (value) => this.updateStateW(value) })] }))), this.state.isExpanded && this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { label: "x", target: eulerDegrees, propertyName: "x", onChange: (value) => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "vector3Line" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "firstLine", title: this.props.label + " (Using Quaternion)" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "label" }, { children: this.props.label + " (Using Quaternion)" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "vector" }, { children: [!this.props.useEuler && `X: ${quat.x.toFixed(1)}, Y: ${quat.y.toFixed(1)}, Z: ${quat.z.toFixed(1)}, W: ${quat.w.toFixed(1)}`, this.props.useEuler && `X: ${eulerDegrees.x.toFixed(2)}, Y: ${eulerDegrees.y.toFixed(2)}, Z: ${eulerDegrees.z.toFixed(2)}`] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "expand", onClick: () => this.switchExpandState() }, { children: chevron }))] })), this.state.isExpanded && !this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "x", value: quat.x, onChange: (value) => this.updateStateX(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "y", value: quat.y, onChange: (value) => this.updateStateY(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "z", value: quat.z, onChange: (value) => this.updateStateZ(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "w", value: quat.w, onChange: (value) => this.updateStateW(value) })] }))), this.state.isExpanded && this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "x", target: eulerDegrees, propertyName: "x", onChange: (value) => {
                                 this.updateStateEulerX(value);
-                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { label: "y", target: eulerDegrees, propertyName: "y", onChange: (value) => {
+                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "y", target: eulerDegrees, propertyName: "y", onChange: (value) => {
                                 this.updateStateEulerY(value);
-                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { label: "z", target: eulerDegrees, propertyName: "z", onChange: (value) => {
+                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "z", target: eulerDegrees, propertyName: "z", onChange: (value) => {
                                 this.updateStateEulerZ(value);
                             } })] })))] })));
     }
@@ -54193,7 +54193,7 @@ class AnimationGroupGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
             this._animationCurveEditorContext.useTargetAnimations = true;
             this._animationCurveEditorContext.rootAnimationGroup = animationGroup;
         }
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "GENERAL" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Class", value: animationGroup.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: animationGroup, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "CONTROLS" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__.ButtonLineComponent, { label: playButtonText, onClick: () => this.playOrPause() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Speed ratio", minimum: 0, maximum: 10, step: 0.1, target: animationGroup, propertyName: "speedRatio", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { ref: this._timelineRef, label: "Current frame", minimum: animationGroup.from, maximum: animationGroup.to, step: (animationGroup.to - animationGroup.from) / 1000.0, directValue: this.state.currentFrame, onInput: (value) => this.onCurrentFrameChange(value) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "INFOS" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Animation count", value: animationGroup.targetedAnimations.length.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_curveEditor_animationCurveEditorComponent__WEBPACK_IMPORTED_MODULE_8__.AnimationCurveEditorComponent, { globalState: this.props.globalState, context: this._animationCurveEditorContext }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "From", value: animationGroup.from.toFixed(2) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "To", value: animationGroup.to.toFixed(2) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Unique ID", value: animationGroup.uniqueId.toString() })] }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "GENERAL" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Class", value: animationGroup.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: animationGroup, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "CONTROLS" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__.ButtonLineComponent, { label: playButtonText, onClick: () => this.playOrPause() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Speed ratio", minimum: 0, maximum: 10, step: 0.1, target: animationGroup, propertyName: "speedRatio", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, ref: this._timelineRef, label: "Current frame", minimum: animationGroup.from, maximum: animationGroup.to, step: (animationGroup.to - animationGroup.from) / 1000.0, directValue: this.state.currentFrame, onInput: (value) => this.onCurrentFrameChange(value) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "INFOS" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Animation count", value: animationGroup.targetedAnimations.length.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_curveEditor_animationCurveEditorComponent__WEBPACK_IMPORTED_MODULE_8__.AnimationCurveEditorComponent, { globalState: this.props.globalState, context: this._animationCurveEditorContext }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "From", value: animationGroup.from.toFixed(2) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "To", value: animationGroup.to.toFixed(2) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Unique ID", value: animationGroup.uniqueId.toString() })] }))] })));
     }
 }
 
@@ -54360,7 +54360,7 @@ class AnimationGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
                                         animatablesForTarget.forEach((at) => {
                                             at.loopAnimation = value;
                                         });
-                                    }, isSelected: () => this._animationControl.loop }), this._isPlaying && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { ref: this._timelineRef, label: "Current frame", minimum: this._animationControl.from, maximum: this._animationControl.to, step: (this._animationControl.to - this._animationControl.from) / 1000.0, directValue: this.state.currentFrame, onInput: (value) => this.onCurrentFrameChange(value) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__.ButtonLineComponent, { label: this._isPlaying ? "Stop" : "Play", onClick: () => this.playOrPause() }), (this._ranges.length > 0 || (this._animations && this._animations.length > 0)) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Enable override", onSelect: (value) => {
+                                    }, isSelected: () => this._animationControl.loop }), this._isPlaying && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, ref: this._timelineRef, label: "Current frame", minimum: this._animationControl.from, maximum: this._animationControl.to, step: (this._animationControl.to - this._animationControl.from) / 1000.0, directValue: this.state.currentFrame, onInput: (value) => this.onCurrentFrameChange(value) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__.ButtonLineComponent, { label: this._isPlaying ? "Stop" : "Play", onClick: () => this.playOrPause() }), (this._ranges.length > 0 || (this._animations && this._animations.length > 0)) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Enable override", onSelect: (value) => {
                                                 if (value) {
                                                     animatableAsAny.animationPropertiesOverride = new core_Animations_animationPropertiesOverride__WEBPACK_IMPORTED_MODULE_5__.AnimationPropertiesOverride();
                                                     animatableAsAny.animationPropertiesOverride.blendingSpeed = 0.05;
@@ -54369,7 +54369,7 @@ class AnimationGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
                                                     animatableAsAny.animationPropertiesOverride = null;
                                                 }
                                                 this.forceUpdate();
-                                            }, isSelected: () => animatableAsAny.animationPropertiesOverride != null, onValueChanged: () => this.forceUpdate() }), animatableAsAny.animationPropertiesOverride != null && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Enable blending", target: animatableAsAny.animationPropertiesOverride, propertyName: "enableBlending", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { label: "Blending speed", target: animatableAsAny.animationPropertiesOverride, propertyName: "blendingSpeed", minimum: 0, maximum: 0.1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] }))] })))] }))] }));
+                                            }, isSelected: () => animatableAsAny.animationPropertiesOverride != null, onValueChanged: () => this.forceUpdate() }), animatableAsAny.animationPropertiesOverride != null && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Enable blending", target: animatableAsAny.animationPropertiesOverride, propertyName: "enableBlending", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Blending speed", target: animatableAsAny.animationPropertiesOverride, propertyName: "blendingSpeed", minimum: 0, maximum: 0.1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] }))] })))] }))] }));
     }
 }
 
@@ -58472,7 +58472,7 @@ class ArcRotateCameraPropertyGridComponent extends react__WEBPACK_IMPORTED_MODUL
     }
     render() {
         const camera = this.props.camera;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonCameraPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonCameraPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, camera: camera, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "TRANSFORMS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_7__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Target", target: camera, propertyName: "target", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Alpha", useEuler: this.props.globalState.onlyUseEulers, target: camera, propertyName: "alpha", minimum: camera.lowerAlphaLimit || 0, maximum: camera.upperAlphaLimit || 2 * Math.PI, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Beta", useEuler: this.props.globalState.onlyUseEulers, target: camera, propertyName: "beta", minimum: camera.lowerAlphaLimit || 0, maximum: camera.upperBetaLimit || 2 * Math.PI, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Radius", target: camera, propertyName: "radius", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "CONTROLS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Angular sensitivity X", target: camera, propertyName: "angularSensibilityX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Angular sensitivity Y", target: camera, propertyName: "angularSensibilityY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Panning sensitivity", target: camera, propertyName: "panningSensibility", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Pinch delta percentage", target: camera, propertyName: "pinchDeltaPercentage", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Wheel delta percentage", target: camera, propertyName: "wheelDeltaPercentage", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Speed", target: camera, propertyName: "speed", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "COLLISIONS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__.CheckBoxLineComponent, { label: "Check collisions", target: camera, propertyName: "checkCollisions", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_7__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Collision radius", target: camera, propertyName: "collisionRadius", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LIMITS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Lower alpha limit", target: camera, propertyName: "lowerAlphaLimit", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Upper alpha limit", target: camera, propertyName: "upperAlphaLimit", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Lower beta limit", target: camera, propertyName: "lowerBetaLimit", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Upper beta limit", target: camera, propertyName: "upperBetaLimit", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Lower radius limit", target: camera, propertyName: "lowerRadiusLimit", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Upper radius limit", target: camera, propertyName: "upperRadiusLimit", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "BEHAVIORS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__.CheckBoxLineComponent, { label: "Auto rotation", target: camera, propertyName: "useAutoRotationBehavior", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__.CheckBoxLineComponent, { label: "Bouncing", target: camera, propertyName: "useBouncingBehavior", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__.CheckBoxLineComponent, { label: "Framing", target: camera, propertyName: "useFramingBehavior", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonCameraPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonCameraPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, camera: camera, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "TRANSFORMS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_7__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Target", target: camera, propertyName: "target", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Alpha", useEuler: this.props.globalState.onlyUseEulers, target: camera, propertyName: "alpha", minimum: camera.lowerAlphaLimit || 0, maximum: camera.upperAlphaLimit || 2 * Math.PI, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Beta", useEuler: this.props.globalState.onlyUseEulers, target: camera, propertyName: "beta", minimum: camera.lowerAlphaLimit || 0, maximum: camera.upperBetaLimit || 2 * Math.PI, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Radius", target: camera, propertyName: "radius", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "CONTROLS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Angular sensitivity X", target: camera, propertyName: "angularSensibilityX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Angular sensitivity Y", target: camera, propertyName: "angularSensibilityY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Panning sensitivity", target: camera, propertyName: "panningSensibility", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Pinch delta percentage", target: camera, propertyName: "pinchDeltaPercentage", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Wheel delta percentage", target: camera, propertyName: "wheelDeltaPercentage", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Speed", target: camera, propertyName: "speed", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "COLLISIONS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__.CheckBoxLineComponent, { label: "Check collisions", target: camera, propertyName: "checkCollisions", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_7__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Collision radius", target: camera, propertyName: "collisionRadius", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LIMITS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Lower alpha limit", target: camera, propertyName: "lowerAlphaLimit", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Upper alpha limit", target: camera, propertyName: "upperAlphaLimit", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Lower beta limit", target: camera, propertyName: "lowerBetaLimit", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Upper beta limit", target: camera, propertyName: "upperBetaLimit", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Lower radius limit", target: camera, propertyName: "lowerRadiusLimit", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Upper radius limit", target: camera, propertyName: "upperRadiusLimit", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "BEHAVIORS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__.CheckBoxLineComponent, { label: "Auto rotation", target: camera, propertyName: "useAutoRotationBehavior", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__.CheckBoxLineComponent, { label: "Bouncing", target: camera, propertyName: "useBouncingBehavior", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__.CheckBoxLineComponent, { label: "Framing", target: camera, propertyName: "useFramingBehavior", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
     }
 }
 
@@ -58530,7 +58530,7 @@ class CommonCameraPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1
             { label: "Perspective", value: core_Cameras_camera__WEBPACK_IMPORTED_MODULE_2__.Camera.PERSPECTIVE_CAMERA },
             { label: "Orthographic", value: core_Cameras_camera__WEBPACK_IMPORTED_MODULE_2__.Camera.ORTHOGRAPHIC_CAMERA },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_customPropertyGridComponent__WEBPACK_IMPORTED_MODULE_8__.CustomPropertyGridComponent, { globalState: this.props.globalState, target: camera, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextLineComponent, { label: "ID", value: camera.id }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_10__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: camera, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextLineComponent, { label: "Unique ID", value: camera.uniqueId.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextLineComponent, { label: "Class", value: camera.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Near plane", target: camera, propertyName: "minZ", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_parentPropertyGridComponent__WEBPACK_IMPORTED_MODULE_13__.ParentPropertyGridComponent, { globalState: this.props.globalState, node: camera, lockObject: this.props.lockObject }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Far plane", target: camera, propertyName: "maxZ", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Inertia", target: camera, propertyName: "inertia", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_hexLineComponent__WEBPACK_IMPORTED_MODULE_12__.HexLineComponent, { isInteger: true, lockObject: this.props.lockObject, label: "Layer mask", target: camera, propertyName: "layerMask", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Mode", options: modeOptions, target: camera, propertyName: "mode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) }), camera.mode === core_Cameras_camera__WEBPACK_IMPORTED_MODULE_2__.Camera.PERSPECTIVE_CAMERA && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Field of view", target: camera, useEuler: this.props.globalState.onlyUseEulers, propertyName: "fov", minimum: 0.1, maximum: Math.PI, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), camera.mode === core_Cameras_camera__WEBPACK_IMPORTED_MODULE_2__.Camera.ORTHOGRAPHIC_CAMERA && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Left", target: camera, propertyName: "orthoLeft", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), camera.mode === core_Cameras_camera__WEBPACK_IMPORTED_MODULE_2__.Camera.ORTHOGRAPHIC_CAMERA && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Top", target: camera, propertyName: "orthoTop", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), camera.mode === core_Cameras_camera__WEBPACK_IMPORTED_MODULE_2__.Camera.ORTHOGRAPHIC_CAMERA && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Right", target: camera, propertyName: "orthoRight", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), camera.mode === core_Cameras_camera__WEBPACK_IMPORTED_MODULE_2__.Camera.ORTHOGRAPHIC_CAMERA && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Bottom", target: camera, propertyName: "orthoBottom", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: "Dispose", onClick: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_customPropertyGridComponent__WEBPACK_IMPORTED_MODULE_8__.CustomPropertyGridComponent, { globalState: this.props.globalState, target: camera, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextLineComponent, { label: "ID", value: camera.id }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_10__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: camera, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextLineComponent, { label: "Unique ID", value: camera.uniqueId.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextLineComponent, { label: "Class", value: camera.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Near plane", target: camera, propertyName: "minZ", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_parentPropertyGridComponent__WEBPACK_IMPORTED_MODULE_13__.ParentPropertyGridComponent, { globalState: this.props.globalState, node: camera, lockObject: this.props.lockObject }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Far plane", target: camera, propertyName: "maxZ", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Inertia", target: camera, propertyName: "inertia", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_hexLineComponent__WEBPACK_IMPORTED_MODULE_12__.HexLineComponent, { isInteger: true, lockObject: this.props.lockObject, label: "Layer mask", target: camera, propertyName: "layerMask", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Mode", options: modeOptions, target: camera, propertyName: "mode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) }), camera.mode === core_Cameras_camera__WEBPACK_IMPORTED_MODULE_2__.Camera.PERSPECTIVE_CAMERA && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Field of view", target: camera, useEuler: this.props.globalState.onlyUseEulers, propertyName: "fov", minimum: 0.1, maximum: Math.PI, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), camera.mode === core_Cameras_camera__WEBPACK_IMPORTED_MODULE_2__.Camera.ORTHOGRAPHIC_CAMERA && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Left", target: camera, propertyName: "orthoLeft", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), camera.mode === core_Cameras_camera__WEBPACK_IMPORTED_MODULE_2__.Camera.ORTHOGRAPHIC_CAMERA && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Top", target: camera, propertyName: "orthoTop", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), camera.mode === core_Cameras_camera__WEBPACK_IMPORTED_MODULE_2__.Camera.ORTHOGRAPHIC_CAMERA && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Right", target: camera, propertyName: "orthoRight", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), camera.mode === core_Cameras_camera__WEBPACK_IMPORTED_MODULE_2__.Camera.ORTHOGRAPHIC_CAMERA && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Bottom", target: camera, propertyName: "orthoBottom", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: "Dispose", onClick: () => {
                                 camera.dispose();
                                 this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
                             } })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_animations_animationPropertyGridComponent__WEBPACK_IMPORTED_MODULE_11__.AnimationGridComponent, { globalState: this.props.globalState, animatable: camera, scene: camera.getScene(), lockObject: this.props.lockObject })] }));
@@ -58725,7 +58725,7 @@ class CustomPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
             case core_Misc_iInspectable__WEBPACK_IMPORTED_MODULE_3__.InspectableType.Checkbox:
                 return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__.CheckBoxLineComponent, { label: inspectable.label, target: this.props.target, propertyName: inspectable.propertyName, onPropertyChangedObservable: this.props.onPropertyChangedObservable }, inspectable.label));
             case core_Misc_iInspectable__WEBPACK_IMPORTED_MODULE_3__.InspectableType.Slider:
-                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: inspectable.label, target: this.props.target, propertyName: inspectable.propertyName, step: inspectable.step !== undefined ? inspectable.step : 0.1, minimum: inspectable.min !== undefined ? inspectable.min : 0, maximum: inspectable.max !== undefined ? inspectable.max : 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }, inspectable.label));
+                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: inspectable.label, target: this.props.target, propertyName: inspectable.propertyName, step: inspectable.step !== undefined ? inspectable.step : 0.1, minimum: inspectable.min !== undefined ? inspectable.min : 0, maximum: inspectable.max !== undefined ? inspectable.max : 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }, inspectable.label));
             case core_Misc_iInspectable__WEBPACK_IMPORTED_MODULE_3__.InspectableType.Vector3:
                 return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_6__.Vector3LineComponent, { lockObject: this.props.lockObject, label: inspectable.label, target: this.props.target, propertyName: inspectable.propertyName, onPropertyChangedObservable: this.props.onPropertyChangedObservable }, inspectable.label));
             case core_Misc_iInspectable__WEBPACK_IMPORTED_MODULE_3__.InspectableType.Quaternion:
@@ -58836,7 +58836,7 @@ class LayerPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Comp
     }
     render() {
         const layer = this.props.layer;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "pane" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Class", value: layer.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: layer, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Intensity", target: layer, propertyName: "intensity", minimum: 0, maximum: 2, step: 0.01, decimalCount: 2, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Blur Kernel Size", target: layer, propertyName: "blurKernelSize", minimum: 0, maximum: 64, step: 1, decimalCount: 0, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })) })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "pane" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Class", value: layer.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: layer, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Intensity", target: layer, propertyName: "intensity", minimum: 0, maximum: 2, step: 0.01, decimalCount: 2, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Blur Kernel Size", target: layer, propertyName: "blurKernelSize", minimum: 0, maximum: 64, step: 1, decimalCount: 0, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })) })));
     }
 }
 
@@ -59000,17 +59000,17 @@ class CommonShadowLightPropertyGridComponent extends react__WEBPACK_IMPORTED_MOD
         ];
         const near = camera ? camera.minZ : 0, far = camera ? camera.maxZ : 0;
         const filter = generator ? generator.filter : 0;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SHADOWS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Shadows enabled", target: light, propertyName: "shadowEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), !csmGenerator && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Shadows near plane", target: light, propertyName: "shadowMinZ", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Shadows far plane", target: light, propertyName: "shadowMaxZ", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })), generator == null && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SHADOW GENERATOR", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Type", options: typeGeneratorOptions, target: internals, propertyName: "generatorType" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Map size", options: mapSizeOptions, target: internals, propertyName: "mapSize" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_8__.ButtonLineComponent, { label: "Create generator", onClick: () => this.createShadowGenerator() })] }))), generator !== null && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SHADOW GENERATOR", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_8__.ButtonLineComponent, { label: "Dispose generator", onClick: () => this.disposeShadowGenerator() }), csmGenerator && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Num cascades", options: numCascadesOptions, target: generator, propertyName: "numCascades", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Debug mode", target: generator, propertyName: "debug", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Stabilize cascades", target: generator, propertyName: "stabilizeCascades", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { label: "Lambda", minimum: 0, maximum: 1.0, step: 0.01, target: generator, propertyName: "lambda", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { label: "Cascade blend", minimum: 0, maximum: 1.0, step: 0.01, target: generator, propertyName: "cascadeBlendPercentage", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Depth clamp", target: generator, propertyName: "depthClamp", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Auto-Calc depth bounds", target: generator, propertyName: "autoCalcDepthBounds", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { label: "Shadow MaxZ", minimum: near, maximum: far, step: 0.5, target: generator, propertyName: "shadowMaxZ", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, digits: 4, step: "0.0001", label: "Bias", target: generator, propertyName: "bias", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Normal bias", target: generator, propertyName: "normalBias", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { label: "Darkness", target: generator, minimum: 0, maximum: 1, step: 0.01, propertyName: "darkness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Allow transparent shadows", target: generator, propertyName: "transparencyShadow", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Filter", options: blurModeOptions, onSelect: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SHADOWS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Shadows enabled", target: light, propertyName: "shadowEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), !csmGenerator && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Shadows near plane", target: light, propertyName: "shadowMinZ", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Shadows far plane", target: light, propertyName: "shadowMaxZ", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })), generator == null && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SHADOW GENERATOR", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Type", options: typeGeneratorOptions, target: internals, propertyName: "generatorType" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Map size", options: mapSizeOptions, target: internals, propertyName: "mapSize" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_8__.ButtonLineComponent, { label: "Create generator", onClick: () => this.createShadowGenerator() })] }))), generator !== null && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SHADOW GENERATOR", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_8__.ButtonLineComponent, { label: "Dispose generator", onClick: () => this.disposeShadowGenerator() }), csmGenerator && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Num cascades", options: numCascadesOptions, target: generator, propertyName: "numCascades", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Debug mode", target: generator, propertyName: "debug", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Stabilize cascades", target: generator, propertyName: "stabilizeCascades", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Lambda", minimum: 0, maximum: 1.0, step: 0.01, target: generator, propertyName: "lambda", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Cascade blend", minimum: 0, maximum: 1.0, step: 0.01, target: generator, propertyName: "cascadeBlendPercentage", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Depth clamp", target: generator, propertyName: "depthClamp", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Auto-Calc depth bounds", target: generator, propertyName: "autoCalcDepthBounds", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Shadow MaxZ", minimum: near, maximum: far, step: 0.5, target: generator, propertyName: "shadowMaxZ", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, digits: 4, step: "0.0001", label: "Bias", target: generator, propertyName: "bias", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Normal bias", target: generator, propertyName: "normalBias", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Darkness", target: generator, minimum: 0, maximum: 1, step: 0.01, propertyName: "darkness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Allow transparent shadows", target: generator, propertyName: "transparencyShadow", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Filter", options: blurModeOptions, onSelect: () => {
                                 this.forceUpdate();
                             }, target: generator, propertyName: "filter", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_PCF || filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_PCSS) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Filtering quality", options: filteringQualityOptions, onSelect: () => {
                                 this.forceUpdate();
-                            }, target: generator, propertyName: "filteringQuality", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_PCSS && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { label: "Penumbra ratio", minimum: 0, maximum: 0.5, step: 0.001, target: generator, propertyName: "contactHardeningLightSizeUVRatio", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), !csmGenerator && (filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_BLUREXPONENTIALSHADOWMAP || filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_BLURCLOSEEXPONENTIALSHADOWMAP) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Use kernel blur", target: generator, propertyName: "useKernelBlur", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable })), generator instanceof core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator &&
+                            }, target: generator, propertyName: "filteringQuality", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_PCSS && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Penumbra ratio", minimum: 0, maximum: 0.5, step: 0.001, target: generator, propertyName: "contactHardeningLightSizeUVRatio", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), !csmGenerator && (filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_BLUREXPONENTIALSHADOWMAP || filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_BLURCLOSEEXPONENTIALSHADOWMAP) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Use kernel blur", target: generator, propertyName: "useKernelBlur", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable })), generator instanceof core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator &&
                             (filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_BLUREXPONENTIALSHADOWMAP || filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_BLURCLOSEEXPONENTIALSHADOWMAP) &&
-                            !generator.useKernelBlur && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { label: "Blur box offset", target: generator, propertyName: "blurBoxOffset", minimum: 1, maximum: 64, step: 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), generator instanceof core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator &&
+                            !generator.useKernelBlur && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Blur box offset", target: generator, propertyName: "blurBoxOffset", minimum: 1, maximum: 64, step: 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), generator instanceof core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator &&
                             (filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_BLUREXPONENTIALSHADOWMAP || filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_BLURCLOSEEXPONENTIALSHADOWMAP) &&
-                            generator.useKernelBlur && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { label: "Blur kernel", target: generator, propertyName: "blurKernel", minimum: 1, maximum: 64, step: 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), generator instanceof core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator &&
+                            generator.useKernelBlur && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Blur kernel", target: generator, propertyName: "blurKernel", minimum: 1, maximum: 64, step: 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), generator instanceof core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator &&
                             (filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_BLUREXPONENTIALSHADOWMAP || filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_EXPONENTIALSHADOWMAP) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Depth scale", target: generator, propertyName: "depthScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), generator instanceof core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator &&
-                            (filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_BLUREXPONENTIALSHADOWMAP || filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_EXPONENTIALSHADOWMAP) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { label: "Blur scale", target: generator, propertyName: "blurScale", minimum: 1, maximum: 4, step: 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), csmGenerator && filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_PCSS && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { label: "Penumbra darkness", minimum: 0, maximum: 1.0, step: 0.01, target: generator, propertyName: "penumbraDarkness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }))] })))] }));
+                            (filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_BLUREXPONENTIALSHADOWMAP || filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_EXPONENTIALSHADOWMAP) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Blur scale", target: generator, propertyName: "blurScale", minimum: 1, maximum: 4, step: 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), csmGenerator && filter === core_Lights_Shadows_shadowGenerator__WEBPACK_IMPORTED_MODULE_6__.ShadowGenerator.FILTER_PCSS && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Penumbra darkness", minimum: 0, maximum: 1.0, step: 0.01, target: generator, propertyName: "penumbraDarkness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }))] })))] }));
     }
 }
 
@@ -59232,11 +59232,11 @@ class BackgroundMaterialPropertyGridComponent extends react__WEBPACK_IMPORTED_MO
     renderTextures() {
         const material = this.props.material;
         const onDebugSelectionChangeObservable = this._onDebugSelectionChangeObservable;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "TEXTURES", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_8__.TextureLinkLineComponent, { label: "Diffuse", texture: material.diffuseTexture, material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_8__.TextureLinkLineComponent, { label: "Reflection", texture: material.reflectionTexture, material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: onDebugSelectionChangeObservable }), material.reflectionTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Reflection blur", target: material, propertyName: "reflectionBlur", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "TEXTURES", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_8__.TextureLinkLineComponent, { label: "Diffuse", texture: material.diffuseTexture, material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_8__.TextureLinkLineComponent, { label: "Reflection", texture: material.reflectionTexture, material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: onDebugSelectionChangeObservable }), material.reflectionTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Reflection blur", target: material, propertyName: "reflectionBlur", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }))] })));
     }
     render() {
         const material = this.props.material;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonMaterialPropertyGridComponent__WEBPACK_IMPORTED_MODULE_7__.CommonMaterialPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, material: material, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LIGHTING & COLORS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Primary", target: material, propertyName: "primaryColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Shadow level", target: material, propertyName: "primaryColorShadowLevel", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Highlight level", target: material, propertyName: "primaryColorHighlightLevel", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), this.renderTextures(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "RENDERING", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enable noise", target: material, propertyName: "enableNoise", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Opacity fresnel", target: material, propertyName: "opacityFresnel", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Reflection fresnel", target: material, propertyName: "reflectionFresnel", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Reflection amount", target: material, propertyName: "reflectionAmount", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonMaterialPropertyGridComponent__WEBPACK_IMPORTED_MODULE_7__.CommonMaterialPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, material: material, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LIGHTING & COLORS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Primary", target: material, propertyName: "primaryColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Shadow level", target: material, propertyName: "primaryColorShadowLevel", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Highlight level", target: material, propertyName: "primaryColorHighlightLevel", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), this.renderTextures(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "RENDERING", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enable noise", target: material, propertyName: "enableNoise", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Opacity fresnel", target: material, propertyName: "opacityFresnel", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Reflection fresnel", target: material, propertyName: "reflectionFresnel", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Reflection amount", target: material, propertyName: "reflectionAmount", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
     }
 }
 
@@ -59345,10 +59345,10 @@ class CommonMaterialPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE
             { label: "Incr wrap", value: core_Materials_material__WEBPACK_IMPORTED_MODULE_2__.Constants.INCR_WRAP },
             { label: "Decr wrap", value: core_Materials_material__WEBPACK_IMPORTED_MODULE_2__.Constants.DECR_WRAP },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_customPropertyGridComponent__WEBPACK_IMPORTED_MODULE_8__.CustomPropertyGridComponent, { globalState: this.props.globalState, target: material, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_5__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextLineComponent, { label: "ID", value: material.id }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_10__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: material, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextLineComponent, { label: "Unique ID", value: material.uniqueId.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextLineComponent, { label: "Class", value: material.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Backface culling", target: material, propertyName: "backFaceCulling", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Orientation", options: orientationOptions, target: material, propertyName: "sideOrientation", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Disable lighting", target: material, propertyName: "disableLighting", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Disable color write", target: material, propertyName: "disableColorWrite", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Disable depth write", target: material, propertyName: "disableDepthWrite", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Depth function", options: depthfunctionOptions, target: material, propertyName: "depthFunction", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ depthFunction: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Need depth pre-pass", target: material, propertyName: "needDepthPrePass", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Wireframe", target: material, propertyName: "wireframe", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Point cloud", target: material, propertyName: "pointsCloud", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { label: "Point size", target: material, propertyName: "pointSize", minimum: 0, maximum: 100, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { label: "Z-offset Factor", target: material, propertyName: "zOffset", minimum: -10, maximum: 10, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { label: "Z-offset Units", target: material, propertyName: "zOffsetUnits", minimum: -10, maximum: 10, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: "Dispose", onClick: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_customPropertyGridComponent__WEBPACK_IMPORTED_MODULE_8__.CustomPropertyGridComponent, { globalState: this.props.globalState, target: material, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_5__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextLineComponent, { label: "ID", value: material.id }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_10__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: material, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextLineComponent, { label: "Unique ID", value: material.uniqueId.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextLineComponent, { label: "Class", value: material.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Backface culling", target: material, propertyName: "backFaceCulling", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Orientation", options: orientationOptions, target: material, propertyName: "sideOrientation", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Disable lighting", target: material, propertyName: "disableLighting", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Disable color write", target: material, propertyName: "disableColorWrite", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Disable depth write", target: material, propertyName: "disableDepthWrite", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Depth function", options: depthfunctionOptions, target: material, propertyName: "depthFunction", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ depthFunction: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Need depth pre-pass", target: material, propertyName: "needDepthPrePass", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Wireframe", target: material, propertyName: "wireframe", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Point cloud", target: material, propertyName: "pointsCloud", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Point size", target: material, propertyName: "pointSize", minimum: 0, maximum: 100, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Z-offset Factor", target: material, propertyName: "zOffset", minimum: -10, maximum: 10, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Z-offset Units", target: material, propertyName: "zOffsetUnits", minimum: -10, maximum: 10, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: "Dispose", onClick: () => {
                                 material.dispose();
                                 this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
-                            } })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_5__.LineContainerComponent, Object.assign({ title: "TRANSPARENCY", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { label: "Alpha", target: material, propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.transparencyMode !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { allowNullValue: true, label: "Transparency mode", options: transparencyModeOptions, target: material, propertyName: "transparencyMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ transparencyMode: value }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Alpha mode", options: alphaModeOptions, target: material, propertyName: "alphaMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ alphaMode: value }) }), material.diffuseTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Diffuse texture has alpha", target: material.diffuseTexture, propertyName: "hasAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.useAlphaFromDiffuseTexture !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Use alpha from diffuse texture", target: material, propertyName: "useAlphaFromDiffuseTexture", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.albedoTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Albedo texture has alpha", target: material.albedoTexture, propertyName: "hasAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.useAlphaFromAlbedoTexture !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Use alpha from albedo texture", target: material, propertyName: "useAlphaFromAlbedoTexture", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Separate culling pass", target: material, propertyName: "separateCullingPass", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), material.stencil && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_5__.LineContainerComponent, Object.assign({ title: "STENCIL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Enabled", target: material.stencil, propertyName: "enabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_hexLineComponent__WEBPACK_IMPORTED_MODULE_12__.HexLineComponent, { isInteger: true, lockObject: this.props.lockObject, label: "Mask", target: material.stencil, propertyName: "mask", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Function", options: stencilFunctionOptions, target: material.stencil, propertyName: "func", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ stencilFunction: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_13__.FloatLineComponent, { isInteger: true, lockObject: this.props.lockObject, label: "Function reference", target: material.stencil, propertyName: "funcRef", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_hexLineComponent__WEBPACK_IMPORTED_MODULE_12__.HexLineComponent, { isInteger: true, lockObject: this.props.lockObject, label: "Function mask", target: material.stencil, propertyName: "funcMask", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Op stencil fail", options: stencilOperationOptions, target: material.stencil, propertyName: "opStencilFail", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ opStencilFail: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Op depth fail", options: stencilOperationOptions, target: material.stencil, propertyName: "opDepthFail", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ opDepthFail: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Op stencil+depth pass", options: stencilOperationOptions, target: material.stencil, propertyName: "opStencilDepthPass", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ opStencilDepthPass: value }) })] })) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_animations_animationPropertyGridComponent__WEBPACK_IMPORTED_MODULE_11__.AnimationGridComponent, { globalState: this.props.globalState, animatable: material, scene: material.getScene(), lockObject: this.props.lockObject })] }));
+                            } })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_5__.LineContainerComponent, Object.assign({ title: "TRANSPARENCY", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Alpha", target: material, propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.transparencyMode !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { allowNullValue: true, label: "Transparency mode", options: transparencyModeOptions, target: material, propertyName: "transparencyMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ transparencyMode: value }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Alpha mode", options: alphaModeOptions, target: material, propertyName: "alphaMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ alphaMode: value }) }), material.diffuseTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Diffuse texture has alpha", target: material.diffuseTexture, propertyName: "hasAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.useAlphaFromDiffuseTexture !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Use alpha from diffuse texture", target: material, propertyName: "useAlphaFromDiffuseTexture", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.albedoTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Albedo texture has alpha", target: material.albedoTexture, propertyName: "hasAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.useAlphaFromAlbedoTexture !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Use alpha from albedo texture", target: material, propertyName: "useAlphaFromAlbedoTexture", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Separate culling pass", target: material, propertyName: "separateCullingPass", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), material.stencil && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_5__.LineContainerComponent, Object.assign({ title: "STENCIL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Enabled", target: material.stencil, propertyName: "enabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_hexLineComponent__WEBPACK_IMPORTED_MODULE_12__.HexLineComponent, { isInteger: true, lockObject: this.props.lockObject, label: "Mask", target: material.stencil, propertyName: "mask", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Function", options: stencilFunctionOptions, target: material.stencil, propertyName: "func", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ stencilFunction: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_13__.FloatLineComponent, { isInteger: true, lockObject: this.props.lockObject, label: "Function reference", target: material.stencil, propertyName: "funcRef", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_hexLineComponent__WEBPACK_IMPORTED_MODULE_12__.HexLineComponent, { isInteger: true, lockObject: this.props.lockObject, label: "Function mask", target: material.stencil, propertyName: "funcMask", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Op stencil fail", options: stencilOperationOptions, target: material.stencil, propertyName: "opStencilFail", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ opStencilFail: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Op depth fail", options: stencilOperationOptions, target: material.stencil, propertyName: "opDepthFail", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ opDepthFail: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Op stencil+depth pass", options: stencilOperationOptions, target: material.stencil, propertyName: "opStencilDepthPass", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ opStencilDepthPass: value }) })] })) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_animations_animationPropertyGridComponent__WEBPACK_IMPORTED_MODULE_11__.AnimationGridComponent, { globalState: this.props.globalState, animatable: material, scene: material.getScene(), lockObject: this.props.lockObject })] }));
     }
 }
 
@@ -59502,7 +59502,7 @@ class NodeMaterialPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1
         switch (block.type) {
             case core_Misc_observable__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialBlockConnectionPointTypes.Float: {
                 const cantDisplaySlider = isNaN(block.min) || isNaN(block.max) || block.min === block.max;
-                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [block.isBoolean && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: block.name, target: block, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable }, block.name)), !block.isBoolean && cantDisplaySlider && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { lockObject: this.props.lockObject, label: block.name, target: block, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable }, block.name)), !block.isBoolean && !cantDisplaySlider && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_13__.SliderLineComponent, { label: block.name, target: block, propertyName: "value", step: (block.max - block.min) / 100.0, minimum: block.min, maximum: block.max, onPropertyChangedObservable: this.props.onPropertyChangedObservable }, block.name))] }, block.name));
+                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [block.isBoolean && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: block.name, target: block, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable }, block.name)), !block.isBoolean && cantDisplaySlider && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { lockObject: this.props.lockObject, label: block.name, target: block, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable }, block.name)), !block.isBoolean && !cantDisplaySlider && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_13__.SliderLineComponent, { lockObject: this.props.lockObject, label: block.name, target: block, propertyName: "value", step: (block.max - block.min) / 100.0, minimum: block.min, maximum: block.max, onPropertyChangedObservable: this.props.onPropertyChangedObservable }, block.name))] }, block.name));
             }
             case core_Misc_observable__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialBlockConnectionPointTypes.Color3:
                 return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__.Color3LineComponent, { lockObject: this.props.lockObject, label: block.name, target: block, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable }, block.name));
@@ -59692,7 +59692,7 @@ class PBRMaterialPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1_
             material.sheen._saveRoughness = material.sheen.roughness;
             material.sheen.roughness = null;
         }
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonMaterialPropertyGridComponent__WEBPACK_IMPORTED_MODULE_8__.CommonMaterialPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, material: material, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), this.renderTextures(this._onDebugSelectionChangeObservable), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LIGHTING & COLORS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Albedo", target: material, propertyName: "albedoColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Reflectivity", target: material, propertyName: "reflectivityColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Micro-surface", target: material, propertyName: "microSurface", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Emissive", target: material, propertyName: "emissiveColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Ambient", target: material, propertyName: "ambientColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use physical light falloff", target: material, propertyName: "usePhysicalLightFalloff", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "METALLIC WORKFLOW", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Metallic", target: material, propertyName: "metallic", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Roughness", target: material, propertyName: "roughness", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Index of Refraction", target: material, propertyName: "indexOfRefraction", minimum: 1, maximum: 3, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "F0 Factor", target: material, propertyName: "metallicF0Factor", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Reflectance Color", target: material, propertyName: "metallicReflectanceColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use only metallic from MetallicReflectance texture", target: material, propertyName: "useOnlyMetallicFromMetallicReflectanceTexture", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "MetallicReflectance Texture", texture: material.metallicReflectanceTexture, onTextureCreated: (texture) => (material.metallicReflectanceTexture = texture), onTextureRemoved: () => (material.metallicReflectanceTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Reflectance Texture", texture: material.reflectanceTexture, onTextureCreated: (texture) => (material.reflectanceTexture = texture), onTextureRemoved: () => (material.reflectanceTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "CLEAR COAT", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: material.clearCoat, propertyName: "isEnabled", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.clearCoat.isEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "fragment" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Intensity", target: material.clearCoat, propertyName: "intensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Roughness", target: material.clearCoat, propertyName: "roughness", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "IOR", target: material.clearCoat, propertyName: "indexOfRefraction", minimum: 1.0, maximum: 3, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Remap F0", target: material.clearCoat, propertyName: "remapF0OnInterfaceChange", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Clear coat", texture: material.clearCoat.texture, onTextureCreated: (texture) => (material.clearCoat.texture = texture), onTextureRemoved: () => (material.clearCoat.texture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Roughness", texture: material.clearCoat.textureRoughness, onTextureCreated: (texture) => (material.clearCoat.textureRoughness = texture), onTextureRemoved: () => (material.clearCoat.textureRoughness = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Bump", texture: material.clearCoat.bumpTexture, onTextureCreated: (texture) => (material.clearCoat.bumpTexture = texture), onTextureRemoved: () => (material.clearCoat.bumpTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), material.clearCoat.bumpTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Bump strength", target: material.clearCoat.bumpTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use roughness from main texture", target: material.clearCoat, propertyName: "useRoughnessFromMainTexture", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Tint", target: material.clearCoat, propertyName: "isTintEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.clearCoat.isEnabled && material.clearCoat.isTintEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Tint Color", target: material.clearCoat, propertyName: "tintColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true })), material.clearCoat.isEnabled && material.clearCoat.isTintEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "At Distance", target: material.clearCoat, propertyName: "tintColorAtDistance", minimum: 0, maximum: 20, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.clearCoat.isEnabled && material.clearCoat.isTintEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Tint Thickness", target: material.clearCoat, propertyName: "tintThickness", minimum: 0, maximum: 20, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.clearCoat.isEnabled && material.clearCoat.isTintEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Tint", texture: material.clearCoat.tintTexture, onTextureCreated: (texture) => (material.clearCoat.tintTexture = texture), onTextureRemoved: () => (material.clearCoat.tintTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }))] })))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "IRIDESCENCE", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: material.iridescence, propertyName: "isEnabled", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.iridescence.isEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "fragment" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Intensity", target: material.iridescence, propertyName: "intensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "IOR", target: material.iridescence, propertyName: "indexOfRefraction", minimum: 1.0, maximum: 3, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Min Thickness", target: material.iridescence, propertyName: "minimumThickness", minimum: 0, maximum: 1000, step: 10, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Max Thickness", target: material.iridescence, propertyName: "maximumThickness", minimum: 0, maximum: 1000, step: 10, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Iridescence", texture: material.iridescence.texture, onTextureCreated: (texture) => (material.iridescence.texture = texture), onTextureRemoved: () => (material.iridescence.texture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Thickness", texture: material.iridescence.thicknessTexture, onTextureCreated: (texture) => (material.iridescence.thicknessTexture = texture), onTextureRemoved: () => (material.iridescence.thicknessTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable })] })))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "ANISOTROPIC", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: material.anisotropy, propertyName: "isEnabled", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.anisotropy.isEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "fragment" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Intensity", target: material.anisotropy, propertyName: "intensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector2LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector2LineComponent, { lockObject: this.props.lockObject, label: "Direction", target: material.anisotropy, propertyName: "direction", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Anisotropic", texture: material.anisotropy.texture, onTextureCreated: (texture) => (material.anisotropy.texture = texture), onTextureRemoved: () => (material.anisotropy.texture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable })] })))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "SHEEN", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: material.sheen, propertyName: "isEnabled", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.sheen.isEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "fragment" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Link to Albedo", target: material.sheen, propertyName: "linkSheenWithAlbedo", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Intensity", target: material.sheen, propertyName: "intensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Color", target: material.sheen, propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Sheen", texture: material.sheen.texture, onTextureCreated: (texture) => (material.sheen.texture = texture), onTextureRemoved: () => (material.sheen.texture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Roughness", texture: material.sheen.textureRoughness, onTextureCreated: (texture) => (material.sheen.textureRoughness = texture), onTextureRemoved: () => (material.sheen.textureRoughness = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use roughness", target: material.sheen, propertyName: "_useRoughness" }), material.sheen._useRoughness && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Roughness", target: material.sheen, propertyName: "roughness", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use roughness from main texture", target: material.sheen, propertyName: "useRoughnessFromMainTexture", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Albedo scaling", target: material.sheen, propertyName: "albedoScaling", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "SUBSURFACE", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Thickness", texture: material.subSurface.thicknessTexture, onTextureCreated: (texture) => (material.subSurface.thicknessTexture = texture), onTextureRemoved: () => (material.subSurface.thicknessTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Min Thickness", target: material.subSurface, propertyName: "minimumThickness", minimum: 0, maximum: 10, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Max Thickness", target: material.subSurface, propertyName: "maximumThickness", minimum: 0, maximum: 10, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Mask From Thickness", target: material.subSurface, propertyName: "useMaskFromThicknessTexture", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "glTF-Style Textures", target: material.subSurface, propertyName: "useGltfStyleTextures", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use Thickness as Depth", target: material.subSurface, propertyName: "useThicknessAsDepth", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Tint Color", target: material.subSurface, propertyName: "tintColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Scattering Enabled", target: material.subSurface, propertyName: "isScatteringEnabled", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.subSurface.isScatteringEnabled && material.getScene().prePassRenderer && material.getScene().subSurfaceConfiguration && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "fragment" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Meters per unit", target: material.getScene().subSurfaceConfiguration, propertyName: "metersPerUnit", minimum: 0.01, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }) }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Refraction Enabled", target: material.subSurface, propertyName: "isRefractionEnabled", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.subSurface.isRefractionEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "fragment" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Intensity", target: material.subSurface, propertyName: "refractionIntensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Refraction Intensity", texture: material.subSurface.refractionIntensityTexture, onTextureCreated: (texture) => (material.subSurface.refractionIntensityTexture = texture), onTextureRemoved: () => (material.subSurface.refractionIntensityTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Refraction", texture: material.subSurface.refractionTexture, onTextureCreated: (texture) => (material.subSurface.refractionTexture = texture), onTextureRemoved: () => (material.subSurface.refractionTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Volume Index of Refraction", target: material.subSurface, propertyName: "volumeIndexOfRefraction", minimum: 1, maximum: 3, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Tint at Distance", target: material.subSurface, propertyName: "tintColorAtDistance", minimum: 0, maximum: 10, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Link refraction with transparency", target: material.subSurface, propertyName: "linkRefractionWithTransparency", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use albedo to tint surface transparency", target: material.subSurface, propertyName: "useAlbedoToTintRefraction", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Translucency Enabled", target: material.subSurface, propertyName: "isTranslucencyEnabled", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.subSurface.isTranslucencyEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "fragment" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Intensity", target: material.subSurface, propertyName: "translucencyIntensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Diffusion Distance", target: material.subSurface, propertyName: "diffusionDistance", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use albedo to tint surface translucency", target: material.subSurface, propertyName: "useAlbedoToTintTranslucency", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LEVELS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Environment", target: material, propertyName: "environmentIntensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Specular", target: material, propertyName: "specularIntensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Emissive", target: material, propertyName: "emissiveIntensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Direct", target: material, propertyName: "directIntensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.bumpTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Bump strength", target: material.bumpTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.ambientTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Ambient strength", target: material, propertyName: "ambientTextureStrength", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.reflectionTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Reflection strength", target: material.reflectionTexture, propertyName: "level", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.clearCoat.texture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Clear coat", target: material.clearCoat.texture, propertyName: "level", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.clearCoat.bumpTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Clear coat bump", target: material.clearCoat.bumpTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.clearCoat.tintTexture && false /* level is not used for the clear coat tint texture */ && (0), material.anisotropy.texture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Anisotropic", target: material.anisotropy.texture, propertyName: "level", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.sheen.texture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Sheen", target: material.sheen.texture, propertyName: "level", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.subSurface.thicknessTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Thickness", target: material.subSurface.thicknessTexture, propertyName: "level", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.subSurface.refractionTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Refraction", target: material.subSurface.refractionTexture, propertyName: "level", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.detailMap.isEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Detailmap diffuse", target: material.detailMap, propertyName: "diffuseBlendLevel", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Detailmap bump", target: material.detailMap, propertyName: "bumpLevel", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Detailmap roughness", target: material.detailMap, propertyName: "roughnessBlendLevel", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "RENDERING", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Alpha from albedo", target: material, propertyName: "useAlphaFromAlbedoTexture", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Ambient in grayscale", target: material, propertyName: "useAmbientInGrayScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Radiance over alpha", target: material, propertyName: "useRadianceOverAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Micro-surface from ref. map alpha", target: material, propertyName: "useMicroSurfaceFromReflectivityMapAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Specular over alpha", target: material, propertyName: "useSpecularOverAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Specular anti-aliasing", target: material, propertyName: "enableSpecularAntiAliasing", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Realtime Filtering", target: material, propertyName: "realTimeFiltering", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { allowNullValue: true, label: "Realtime Filtering quality", options: realTimeFilteringQualityOptions, target: material, propertyName: "realTimeFilteringQuality", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "NORMAL MAP", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Invert X axis", target: material, propertyName: "invertNormalMapX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Invert Y axis", target: material, propertyName: "invertNormalMapY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "ADVANCED", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Energy Conservation", target: material.brdf, propertyName: "useEnergyConservation", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Spherical Harmonics", target: material.brdf, propertyName: "useSphericalHarmonics", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Radiance occlusion", target: material, propertyName: "useRadianceOcclusion", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Horizon occlusion ", target: material, propertyName: "useHorizonOcclusion", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Unlit", target: material, propertyName: "unlit", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "DEBUG", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Debug mode", options: debugMode, target: material, propertyName: "debugMode" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Split position", target: material, propertyName: "debugLimit", minimum: -1, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Output factor", target: material, propertyName: "debugFactor", minimum: 0, maximum: 5, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonMaterialPropertyGridComponent__WEBPACK_IMPORTED_MODULE_8__.CommonMaterialPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, material: material, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), this.renderTextures(this._onDebugSelectionChangeObservable), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LIGHTING & COLORS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Albedo", target: material, propertyName: "albedoColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Reflectivity", target: material, propertyName: "reflectivityColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Micro-surface", target: material, propertyName: "microSurface", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Emissive", target: material, propertyName: "emissiveColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Ambient", target: material, propertyName: "ambientColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use physical light falloff", target: material, propertyName: "usePhysicalLightFalloff", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "METALLIC WORKFLOW", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Metallic", target: material, propertyName: "metallic", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Roughness", target: material, propertyName: "roughness", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Index of Refraction", target: material, propertyName: "indexOfRefraction", minimum: 1, maximum: 3, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "F0 Factor", target: material, propertyName: "metallicF0Factor", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Reflectance Color", target: material, propertyName: "metallicReflectanceColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use only metallic from MetallicReflectance texture", target: material, propertyName: "useOnlyMetallicFromMetallicReflectanceTexture", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "MetallicReflectance Texture", texture: material.metallicReflectanceTexture, onTextureCreated: (texture) => (material.metallicReflectanceTexture = texture), onTextureRemoved: () => (material.metallicReflectanceTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Reflectance Texture", texture: material.reflectanceTexture, onTextureCreated: (texture) => (material.reflectanceTexture = texture), onTextureRemoved: () => (material.reflectanceTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "CLEAR COAT", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: material.clearCoat, propertyName: "isEnabled", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.clearCoat.isEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "fragment" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Intensity", target: material.clearCoat, propertyName: "intensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Roughness", target: material.clearCoat, propertyName: "roughness", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "IOR", target: material.clearCoat, propertyName: "indexOfRefraction", minimum: 1.0, maximum: 3, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Remap F0", target: material.clearCoat, propertyName: "remapF0OnInterfaceChange", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Clear coat", texture: material.clearCoat.texture, onTextureCreated: (texture) => (material.clearCoat.texture = texture), onTextureRemoved: () => (material.clearCoat.texture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Roughness", texture: material.clearCoat.textureRoughness, onTextureCreated: (texture) => (material.clearCoat.textureRoughness = texture), onTextureRemoved: () => (material.clearCoat.textureRoughness = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Bump", texture: material.clearCoat.bumpTexture, onTextureCreated: (texture) => (material.clearCoat.bumpTexture = texture), onTextureRemoved: () => (material.clearCoat.bumpTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), material.clearCoat.bumpTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Bump strength", target: material.clearCoat.bumpTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use roughness from main texture", target: material.clearCoat, propertyName: "useRoughnessFromMainTexture", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Tint", target: material.clearCoat, propertyName: "isTintEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.clearCoat.isEnabled && material.clearCoat.isTintEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Tint Color", target: material.clearCoat, propertyName: "tintColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true })), material.clearCoat.isEnabled && material.clearCoat.isTintEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "At Distance", target: material.clearCoat, propertyName: "tintColorAtDistance", minimum: 0, maximum: 20, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.clearCoat.isEnabled && material.clearCoat.isTintEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Tint Thickness", target: material.clearCoat, propertyName: "tintThickness", minimum: 0, maximum: 20, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.clearCoat.isEnabled && material.clearCoat.isTintEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Tint", texture: material.clearCoat.tintTexture, onTextureCreated: (texture) => (material.clearCoat.tintTexture = texture), onTextureRemoved: () => (material.clearCoat.tintTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }))] })))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "IRIDESCENCE", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: material.iridescence, propertyName: "isEnabled", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.iridescence.isEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "fragment" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Intensity", target: material.iridescence, propertyName: "intensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "IOR", target: material.iridescence, propertyName: "indexOfRefraction", minimum: 1.0, maximum: 3, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Min Thickness", target: material.iridescence, propertyName: "minimumThickness", minimum: 0, maximum: 1000, step: 10, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Max Thickness", target: material.iridescence, propertyName: "maximumThickness", minimum: 0, maximum: 1000, step: 10, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Iridescence", texture: material.iridescence.texture, onTextureCreated: (texture) => (material.iridescence.texture = texture), onTextureRemoved: () => (material.iridescence.texture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Thickness", texture: material.iridescence.thicknessTexture, onTextureCreated: (texture) => (material.iridescence.thicknessTexture = texture), onTextureRemoved: () => (material.iridescence.thicknessTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable })] })))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "ANISOTROPIC", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: material.anisotropy, propertyName: "isEnabled", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.anisotropy.isEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "fragment" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Intensity", target: material.anisotropy, propertyName: "intensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector2LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector2LineComponent, { lockObject: this.props.lockObject, label: "Direction", target: material.anisotropy, propertyName: "direction", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Anisotropic", texture: material.anisotropy.texture, onTextureCreated: (texture) => (material.anisotropy.texture = texture), onTextureRemoved: () => (material.anisotropy.texture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable })] })))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "SHEEN", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: material.sheen, propertyName: "isEnabled", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.sheen.isEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "fragment" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Link to Albedo", target: material.sheen, propertyName: "linkSheenWithAlbedo", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Intensity", target: material.sheen, propertyName: "intensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Color", target: material.sheen, propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Sheen", texture: material.sheen.texture, onTextureCreated: (texture) => (material.sheen.texture = texture), onTextureRemoved: () => (material.sheen.texture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Roughness", texture: material.sheen.textureRoughness, onTextureCreated: (texture) => (material.sheen.textureRoughness = texture), onTextureRemoved: () => (material.sheen.textureRoughness = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use roughness", target: material.sheen, propertyName: "_useRoughness" }), material.sheen._useRoughness && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Roughness", target: material.sheen, propertyName: "roughness", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use roughness from main texture", target: material.sheen, propertyName: "useRoughnessFromMainTexture", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Albedo scaling", target: material.sheen, propertyName: "albedoScaling", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "SUBSURFACE", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Thickness", texture: material.subSurface.thicknessTexture, onTextureCreated: (texture) => (material.subSurface.thicknessTexture = texture), onTextureRemoved: () => (material.subSurface.thicknessTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Min Thickness", target: material.subSurface, propertyName: "minimumThickness", minimum: 0, maximum: 10, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Max Thickness", target: material.subSurface, propertyName: "maximumThickness", minimum: 0, maximum: 10, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Mask From Thickness", target: material.subSurface, propertyName: "useMaskFromThicknessTexture", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "glTF-Style Textures", target: material.subSurface, propertyName: "useGltfStyleTextures", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use Thickness as Depth", target: material.subSurface, propertyName: "useThicknessAsDepth", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Tint Color", target: material.subSurface, propertyName: "tintColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Scattering Enabled", target: material.subSurface, propertyName: "isScatteringEnabled", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.subSurface.isScatteringEnabled && material.getScene().prePassRenderer && material.getScene().subSurfaceConfiguration && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "fragment" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Meters per unit", target: material.getScene().subSurfaceConfiguration, propertyName: "metersPerUnit", minimum: 0.01, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }) }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Refraction Enabled", target: material.subSurface, propertyName: "isRefractionEnabled", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.subSurface.isRefractionEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "fragment" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Intensity", target: material.subSurface, propertyName: "refractionIntensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Refraction Intensity", texture: material.subSurface.refractionIntensityTexture, onTextureCreated: (texture) => (material.subSurface.refractionIntensityTexture = texture), onTextureRemoved: () => (material.subSurface.refractionIntensityTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Refraction", texture: material.subSurface.refractionTexture, onTextureCreated: (texture) => (material.subSurface.refractionTexture = texture), onTextureRemoved: () => (material.subSurface.refractionTexture = null), material: material, onSelectionChangedObservable: this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: this._onDebugSelectionChangeObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Volume Index of Refraction", target: material.subSurface, propertyName: "volumeIndexOfRefraction", minimum: 1, maximum: 3, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Tint at Distance", target: material.subSurface, propertyName: "tintColorAtDistance", minimum: 0, maximum: 10, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Link refraction with transparency", target: material.subSurface, propertyName: "linkRefractionWithTransparency", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use albedo to tint surface transparency", target: material.subSurface, propertyName: "useAlbedoToTintRefraction", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Translucency Enabled", target: material.subSurface, propertyName: "isTranslucencyEnabled", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.subSurface.isTranslucencyEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "fragment" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Intensity", target: material.subSurface, propertyName: "translucencyIntensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Diffusion Distance", target: material.subSurface, propertyName: "diffusionDistance", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use albedo to tint surface translucency", target: material.subSurface, propertyName: "useAlbedoToTintTranslucency", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LEVELS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Environment", target: material, propertyName: "environmentIntensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Specular", target: material, propertyName: "specularIntensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Emissive", target: material, propertyName: "emissiveIntensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Direct", target: material, propertyName: "directIntensity", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), material.bumpTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Bump strength", target: material.bumpTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.ambientTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Ambient strength", target: material, propertyName: "ambientTextureStrength", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.reflectionTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Reflection strength", target: material.reflectionTexture, propertyName: "level", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.clearCoat.texture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Clear coat", target: material.clearCoat.texture, propertyName: "level", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.clearCoat.bumpTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Clear coat bump", target: material.clearCoat.bumpTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.clearCoat.tintTexture && false /* level is not used for the clear coat tint texture */ && (0), material.anisotropy.texture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Anisotropic", target: material.anisotropy.texture, propertyName: "level", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.sheen.texture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Sheen", target: material.sheen.texture, propertyName: "level", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.subSurface.thicknessTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Thickness", target: material.subSurface.thicknessTexture, propertyName: "level", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.subSurface.refractionTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Refraction", target: material.subSurface.refractionTexture, propertyName: "level", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.detailMap.isEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Detailmap diffuse", target: material.detailMap, propertyName: "diffuseBlendLevel", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Detailmap bump", target: material.detailMap, propertyName: "bumpLevel", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Detailmap roughness", target: material.detailMap, propertyName: "roughnessBlendLevel", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "RENDERING", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Alpha from albedo", target: material, propertyName: "useAlphaFromAlbedoTexture", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Ambient in grayscale", target: material, propertyName: "useAmbientInGrayScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Radiance over alpha", target: material, propertyName: "useRadianceOverAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Micro-surface from ref. map alpha", target: material, propertyName: "useMicroSurfaceFromReflectivityMapAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Specular over alpha", target: material, propertyName: "useSpecularOverAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Specular anti-aliasing", target: material, propertyName: "enableSpecularAntiAliasing", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Realtime Filtering", target: material, propertyName: "realTimeFiltering", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { allowNullValue: true, label: "Realtime Filtering quality", options: realTimeFilteringQualityOptions, target: material, propertyName: "realTimeFilteringQuality", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "NORMAL MAP", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Invert X axis", target: material, propertyName: "invertNormalMapX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Invert Y axis", target: material, propertyName: "invertNormalMapY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "ADVANCED", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Energy Conservation", target: material.brdf, propertyName: "useEnergyConservation", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Spherical Harmonics", target: material.brdf, propertyName: "useSphericalHarmonics", onValueChanged: () => this.forceUpdate(), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Radiance occlusion", target: material, propertyName: "useRadianceOcclusion", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Horizon occlusion ", target: material, propertyName: "useHorizonOcclusion", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Unlit", target: material, propertyName: "unlit", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "DEBUG", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Debug mode", options: debugMode, target: material, propertyName: "debugMode" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Split position", target: material, propertyName: "debugLimit", minimum: -1, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Output factor", target: material, propertyName: "debugFactor", minimum: 0, maximum: 5, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
     }
 }
 
@@ -59741,7 +59741,7 @@ class PBRMetallicRoughnessMaterialPropertyGridComponent extends react__WEBPACK_I
     }
     render() {
         const material = this.props.material;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonMaterialPropertyGridComponent__WEBPACK_IMPORTED_MODULE_6__.CommonMaterialPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, material: material, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), this.renderTextures(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LIGHTING & COLORS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Base", target: material, propertyName: "baseColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Emissive", target: material, propertyName: "emissiveColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LEVELS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Metallic", target: material, propertyName: "metallic", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Roughness", target: material, propertyName: "roughness", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "NORMAL MAP", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__.CheckBoxLineComponent, { label: "Invert X axis", target: material, propertyName: "invertNormalMapX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__.CheckBoxLineComponent, { label: "Invert Y axis", target: material, propertyName: "invertNormalMapY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonMaterialPropertyGridComponent__WEBPACK_IMPORTED_MODULE_6__.CommonMaterialPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, material: material, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), this.renderTextures(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LIGHTING & COLORS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Base", target: material, propertyName: "baseColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Emissive", target: material, propertyName: "emissiveColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LEVELS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Metallic", target: material, propertyName: "metallic", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Roughness", target: material, propertyName: "roughness", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "NORMAL MAP", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__.CheckBoxLineComponent, { label: "Invert X axis", target: material, propertyName: "invertNormalMapX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__.CheckBoxLineComponent, { label: "Invert Y axis", target: material, propertyName: "invertNormalMapY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
     }
 }
 
@@ -59790,7 +59790,7 @@ class PBRSpecularGlossinessMaterialPropertyGridComponent extends react__WEBPACK_
     }
     render() {
         const material = this.props.material;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonMaterialPropertyGridComponent__WEBPACK_IMPORTED_MODULE_6__.CommonMaterialPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, material: material, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), this.renderTextures(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LIGHTING & COLORS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Diffuse", target: material, propertyName: "diffuseColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Specular", target: material, propertyName: "specularColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LEVELS", closed: true, selection: this.props.globalState }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Glossiness", target: material, propertyName: "glossiness", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "NORMAL MAP", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__.CheckBoxLineComponent, { label: "Invert X axis", target: material, propertyName: "invertNormalMapX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__.CheckBoxLineComponent, { label: "Invert Y axis", target: material, propertyName: "invertNormalMapY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonMaterialPropertyGridComponent__WEBPACK_IMPORTED_MODULE_6__.CommonMaterialPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, material: material, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), this.renderTextures(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LIGHTING & COLORS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Diffuse", target: material, propertyName: "diffuseColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Specular", target: material, propertyName: "specularColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, isLinear: true })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LEVELS", closed: true, selection: this.props.globalState }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Glossiness", target: material, propertyName: "glossiness", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "NORMAL MAP", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__.CheckBoxLineComponent, { label: "Invert X axis", target: material, propertyName: "invertNormalMapX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__.CheckBoxLineComponent, { label: "Invert Y axis", target: material, propertyName: "invertNormalMapY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
     }
 }
 
@@ -59839,7 +59839,7 @@ class StandardMaterialPropertyGridComponent extends react__WEBPACK_IMPORTED_MODU
     }
     render() {
         const material = this.props.material;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonMaterialPropertyGridComponent__WEBPACK_IMPORTED_MODULE_6__.CommonMaterialPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, material: material, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), this.renderTextures(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LIGHTING & COLORS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Diffuse", target: material, propertyName: "diffuseColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Specular", target: material, propertyName: "specularColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Specular power", target: material, propertyName: "specularPower", minimum: 0, maximum: 128, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Emissive", target: material, propertyName: "emissiveColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Ambient", target: material, propertyName: "ambientColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__.CheckBoxLineComponent, { label: "Use specular over alpha", target: material, propertyName: "useSpecularOverAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LEVELS", closed: true, selection: this.props.globalState }, { children: [material.diffuseTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Diffuse level", target: material.diffuseTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.specularTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Specular level", target: material.specularTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.reflectionTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Reflection level", target: material.reflectionTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.refractionTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Refraction level", target: material.refractionTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.emissiveTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Emissive level", target: material.emissiveTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.bumpTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Bump level", target: material.bumpTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.opacityTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Opacity level", target: material.opacityTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.ambientTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Ambient level", target: material.ambientTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.lightmapTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Lightmap level", target: material.lightmapTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.detailMap.isEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Detailmap diffuse", target: material.detailMap, propertyName: "diffuseBlendLevel", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Detailmap bump", target: material.detailMap, propertyName: "bumpLevel", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "NORMAL MAP", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__.CheckBoxLineComponent, { label: "Invert X axis", target: material, propertyName: "invertNormalMapX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__.CheckBoxLineComponent, { label: "Invert Y axis", target: material, propertyName: "invertNormalMapY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonMaterialPropertyGridComponent__WEBPACK_IMPORTED_MODULE_6__.CommonMaterialPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, material: material, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), this.renderTextures(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LIGHTING & COLORS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Diffuse", target: material, propertyName: "diffuseColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Specular", target: material, propertyName: "specularColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Specular power", target: material, propertyName: "specularPower", minimum: 0, maximum: 128, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Emissive", target: material, propertyName: "emissiveColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Ambient", target: material, propertyName: "ambientColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__.CheckBoxLineComponent, { label: "Use specular over alpha", target: material, propertyName: "useSpecularOverAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "LEVELS", closed: true, selection: this.props.globalState }, { children: [material.diffuseTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Diffuse level", target: material.diffuseTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.specularTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Specular level", target: material.specularTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.reflectionTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Reflection level", target: material.reflectionTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.refractionTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Refraction level", target: material.refractionTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.emissiveTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Emissive level", target: material.emissiveTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.bumpTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Bump level", target: material.bumpTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.opacityTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Opacity level", target: material.opacityTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.ambientTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Ambient level", target: material.ambientTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.lightmapTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Lightmap level", target: material.lightmapTexture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), material.detailMap.isEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Detailmap diffuse", target: material.detailMap, propertyName: "diffuseBlendLevel", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Detailmap bump", target: material.detailMap, propertyName: "bumpLevel", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "NORMAL MAP", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__.CheckBoxLineComponent, { label: "Invert X axis", target: material, propertyName: "invertNormalMapX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__.CheckBoxLineComponent, { label: "Invert Y axis", target: material, propertyName: "invertNormalMapY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
     }
 }
 
@@ -60109,7 +60109,7 @@ class TexturePropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Co
                                 setTimeout(() => {
                                     this.props.globalState.onSelectionChangedObservable.notifyObservers(scene.getTextureByUniqueId(texture.uniqueId));
                                 });
-                            } })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Format", value: (_f = oformat === null || oformat === void 0 ? void 0 : oformat.label) !== null && _f !== void 0 ? _f : "unknown" }), !(oformat === null || oformat === void 0 ? void 0 : oformat.hideType) && !(oformat === null || oformat === void 0 ? void 0 : oformat.compressed) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Type", value: (_g = otype === null || otype === void 0 ? void 0 : otype.label) !== null && _g !== void 0 ? _g : "unknown" }), !!(oformat === null || oformat === void 0 ? void 0 : oformat.normalizable) && !(oformat === null || oformat === void 0 ? void 0 : oformat.compressed) && !!(otype === null || otype === void 0 ? void 0 : otype.normalizable) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Normalized", value: otype.normalizable ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Is compressed", value: (oformat === null || oformat === void 0 ? void 0 : oformat.compressed) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Use sRGB buffers", value: ((_h = texture._texture) === null || _h === void 0 ? void 0 : _h._useSRGBBuffer) ? "Yes" : "No" }), extension && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "File format", value: extension }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Unique ID", value: texture.uniqueId.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Internal Unique ID", value: ((_k = (_j = texture._texture) === null || _j === void 0 ? void 0 : _j.uniqueId) !== null && _k !== void 0 ? _k : "N/A").toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Class", value: textureClass }), count >= 0 && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Number of textures", value: count.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Has alpha", value: texture.hasAlpha ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Get alpha from RGB", target: texture, propertyName: "getAlphaFromRGB", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Is 3D", value: texture.is3D ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Is 2D array", value: texture.is2DArray ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Is cube", value: texture.isCube ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Is render target", value: texture.isRenderTarget ? "Yes" : "No" }), texture.isRenderTarget && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Depth/stencil texture format", value: (_l = oformatDepthStencil === null || oformatDepthStencil === void 0 ? void 0 : oformatDepthStencil.label) !== null && _l !== void 0 ? _l : "no" }), texture instanceof core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__.Texture && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Stored as inverted on Y", value: texture.invertY ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Has mipmaps", value: !texture.noMipmap ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { label: "UV set", target: texture, propertyName: "coordinatesIndex", minimum: 0, maximum: 3, step: 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 0 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_9__.OptionsLineComponent, { label: "Mode", options: coordinatesMode, target: texture, propertyName: "coordinatesMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => (texture.coordinatesMode = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { label: "Level", target: texture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), texture.updateSamplingMode && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_9__.OptionsLineComponent, { label: "Sampling", options: samplingMode, target: texture, noDirectUpdate: true, propertyName: "samplingMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => texture.updateSamplingMode(value) }))] })), texture.getScene() && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_animations_animationPropertyGridComponent__WEBPACK_IMPORTED_MODULE_16__.AnimationGridComponent, { globalState: this.props.globalState, animatable: texture, scene: texture.getScene(), lockObject: this.props.lockObject })), texture.rootContainer && this._adtInstrumentation && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "ADVANCED TEXTURE PROPERTIES", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_valueLineComponent__WEBPACK_IMPORTED_MODULE_11__.ValueLineComponent, { label: "Last layout time", value: this._adtInstrumentation.renderTimeCounter.current, units: "ms" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_valueLineComponent__WEBPACK_IMPORTED_MODULE_11__.ValueLineComponent, { label: "Last render time", value: this._adtInstrumentation.layoutTimeCounter.current, units: "ms" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { label: "Render scale", minimum: 0.1, maximum: 5, step: 0.1, target: texture, propertyName: "renderScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Premultiply alpha", target: texture, propertyName: "premulAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Ideal width", target: texture, propertyName: "idealWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Ideal height", target: texture, propertyName: "idealHeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Use smallest ideal", target: texture, propertyName: "useSmallestIdeal", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Render at ideal size", target: texture, propertyName: "renderAtIdealSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Invalidate Rect optimization", target: texture, propertyName: "useInvalidateRectOptimization", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "TRANSFORM", selection: this.props.globalState }, { children: [!texture.isCube && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "U offset", target: texture, propertyName: "uOffset", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "V offset", target: texture, propertyName: "vOffset", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "U scale", target: texture, propertyName: "uScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "V scale", target: texture, propertyName: "vScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "U angle", useEuler: this.props.globalState.onlyUseEulers, target: texture, propertyName: "uAng", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "V angle", useEuler: this.props.globalState.onlyUseEulers, target: texture, propertyName: "vAng", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "W angle", useEuler: this.props.globalState.onlyUseEulers, target: texture, propertyName: "wAng", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Clamp U", isSelected: () => texture.wrapU === core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__.Texture.CLAMP_ADDRESSMODE, onSelect: (value) => (texture.wrapU = value ? core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__.Texture.CLAMP_ADDRESSMODE : core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__.Texture.WRAP_ADDRESSMODE) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Clamp V", isSelected: () => texture.wrapV === core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__.Texture.CLAMP_ADDRESSMODE, onSelect: (value) => (texture.wrapV = value ? core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__.Texture.CLAMP_ADDRESSMODE : core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__.Texture.WRAP_ADDRESSMODE) })] })), texture.isCube && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { label: "Rotation Y", useEuler: this.props.globalState.onlyUseEulers, minimum: 0, maximum: 2 * Math.PI, step: 0.1, target: texture, propertyName: "rotationY" }) }))] }))] })));
+                            } })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Format", value: (_f = oformat === null || oformat === void 0 ? void 0 : oformat.label) !== null && _f !== void 0 ? _f : "unknown" }), !(oformat === null || oformat === void 0 ? void 0 : oformat.hideType) && !(oformat === null || oformat === void 0 ? void 0 : oformat.compressed) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Type", value: (_g = otype === null || otype === void 0 ? void 0 : otype.label) !== null && _g !== void 0 ? _g : "unknown" }), !!(oformat === null || oformat === void 0 ? void 0 : oformat.normalizable) && !(oformat === null || oformat === void 0 ? void 0 : oformat.compressed) && !!(otype === null || otype === void 0 ? void 0 : otype.normalizable) && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Normalized", value: otype.normalizable ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Is compressed", value: (oformat === null || oformat === void 0 ? void 0 : oformat.compressed) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Use sRGB buffers", value: ((_h = texture._texture) === null || _h === void 0 ? void 0 : _h._useSRGBBuffer) ? "Yes" : "No" }), extension && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "File format", value: extension }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Unique ID", value: texture.uniqueId.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Internal Unique ID", value: ((_k = (_j = texture._texture) === null || _j === void 0 ? void 0 : _j.uniqueId) !== null && _k !== void 0 ? _k : "N/A").toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Class", value: textureClass }), count >= 0 && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Number of textures", value: count.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Has alpha", value: texture.hasAlpha ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Get alpha from RGB", target: texture, propertyName: "getAlphaFromRGB", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Is 3D", value: texture.is3D ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Is 2D array", value: texture.is2DArray ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Is cube", value: texture.isCube ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Is render target", value: texture.isRenderTarget ? "Yes" : "No" }), texture.isRenderTarget && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Depth/stencil texture format", value: (_l = oformatDepthStencil === null || oformatDepthStencil === void 0 ? void 0 : oformatDepthStencil.label) !== null && _l !== void 0 ? _l : "no" }), texture instanceof core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__.Texture && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Stored as inverted on Y", value: texture.invertY ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Has mipmaps", value: !texture.noMipmap ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "UV set", target: texture, propertyName: "coordinatesIndex", minimum: 0, maximum: 3, step: 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 0 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_9__.OptionsLineComponent, { label: "Mode", options: coordinatesMode, target: texture, propertyName: "coordinatesMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => (texture.coordinatesMode = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Level", target: texture, propertyName: "level", minimum: 0, maximum: 2, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), texture.updateSamplingMode && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_9__.OptionsLineComponent, { label: "Sampling", options: samplingMode, target: texture, noDirectUpdate: true, propertyName: "samplingMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => texture.updateSamplingMode(value) }))] })), texture.getScene() && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_animations_animationPropertyGridComponent__WEBPACK_IMPORTED_MODULE_16__.AnimationGridComponent, { globalState: this.props.globalState, animatable: texture, scene: texture.getScene(), lockObject: this.props.lockObject })), texture.rootContainer && this._adtInstrumentation && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "ADVANCED TEXTURE PROPERTIES", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_valueLineComponent__WEBPACK_IMPORTED_MODULE_11__.ValueLineComponent, { label: "Last layout time", value: this._adtInstrumentation.renderTimeCounter.current, units: "ms" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_valueLineComponent__WEBPACK_IMPORTED_MODULE_11__.ValueLineComponent, { label: "Last render time", value: this._adtInstrumentation.layoutTimeCounter.current, units: "ms" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Render scale", minimum: 0.1, maximum: 5, step: 0.1, target: texture, propertyName: "renderScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Premultiply alpha", target: texture, propertyName: "premulAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Ideal width", target: texture, propertyName: "idealWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Ideal height", target: texture, propertyName: "idealHeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Use smallest ideal", target: texture, propertyName: "useSmallestIdeal", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Render at ideal size", target: texture, propertyName: "renderAtIdealSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Invalidate Rect optimization", target: texture, propertyName: "useInvalidateRectOptimization", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "TRANSFORM", selection: this.props.globalState }, { children: [!texture.isCube && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "U offset", target: texture, propertyName: "uOffset", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "V offset", target: texture, propertyName: "vOffset", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "U scale", target: texture, propertyName: "uScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "V scale", target: texture, propertyName: "vScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "U angle", useEuler: this.props.globalState.onlyUseEulers, target: texture, propertyName: "uAng", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "V angle", useEuler: this.props.globalState.onlyUseEulers, target: texture, propertyName: "vAng", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_8__.FloatLineComponent, { lockObject: this.props.lockObject, label: "W angle", useEuler: this.props.globalState.onlyUseEulers, target: texture, propertyName: "wAng", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Clamp U", isSelected: () => texture.wrapU === core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__.Texture.CLAMP_ADDRESSMODE, onSelect: (value) => (texture.wrapU = value ? core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__.Texture.CLAMP_ADDRESSMODE : core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__.Texture.WRAP_ADDRESSMODE) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Clamp V", isSelected: () => texture.wrapV === core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__.Texture.CLAMP_ADDRESSMODE, onSelect: (value) => (texture.wrapV = value ? core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__.Texture.CLAMP_ADDRESSMODE : core_Misc_tools__WEBPACK_IMPORTED_MODULE_2__.Texture.WRAP_ADDRESSMODE) })] })), texture.isCube && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Rotation Y", useEuler: this.props.globalState.onlyUseEulers, minimum: 0, maximum: 2 * Math.PI, step: 0.1, target: texture, propertyName: "rotationY" }) }))] }))] })));
     }
 }
 
@@ -62117,19 +62117,19 @@ class MeshPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
                             }, extractValue: () => (mesh.material ? sortedMaterials.indexOf(mesh.material) : -1), onPropertyChangedObservable: this.props.onPropertyChangedObservable })), mesh.isAnInstance && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Source", value: mesh.sourceMesh.name, onLink: () => this.onSourceMeshLink() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_13__.ButtonLineComponent, { label: "Dispose", onClick: () => {
                                 mesh.dispose();
                                 this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
-                            } })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonPropertyGridComponent__WEBPACK_IMPORTED_MODULE_16__.CommonPropertyGridComponent, { host: mesh, lockObject: this.props.lockObject, globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_variantsPropertyGridComponent__WEBPACK_IMPORTED_MODULE_17__.VariantsPropertyGridComponent, { host: mesh, lockObject: this.props.lockObject, globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "TRANSFORMS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_6__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Position", target: mesh, propertyName: "position", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), !mesh.rotationQuaternion && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_6__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Rotation", useEuler: this.props.globalState.onlyUseEulers, target: mesh, propertyName: "rotation", step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), mesh.rotationQuaternion && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_quaternionLineComponent__WEBPACK_IMPORTED_MODULE_8__.QuaternionLineComponent, { lockObject: this.props.lockObject, label: "Rotation", useEuler: this.props.globalState.onlyUseEulers, target: mesh, propertyName: "rotationQuaternion", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_6__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Scaling", target: mesh, propertyName: "scaling", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "DISPLAY", closed: true, selection: this.props.globalState }, { children: [!mesh.isAnInstance && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { label: "Visibility", target: mesh, propertyName: "visibility", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Alpha index", target: mesh, propertyName: "alphaIndex", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Receive shadows", target: mesh, propertyName: "receiveShadows", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.ColorKind) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use vertex colors", target: mesh, propertyName: "useVertexColors", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.ColorKind) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Has vertex alpha", target: mesh, propertyName: "hasVertexAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), scene.fogMode !== core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.Scene.FOGMODE_NONE && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Apply fog", target: mesh, propertyName: "applyFog", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), !mesh.parent && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Infinite distance", target: mesh, propertyName: "infiniteDistance", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { label: "Rendering group ID", decimalCount: 0, target: mesh, propertyName: "renderingGroupId", minimum: core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.RenderingManager.MIN_RENDERINGGROUPS, maximum: core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.RenderingManager.MAX_RENDERINGGROUPS - 1, step: 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_hexLineComponent__WEBPACK_IMPORTED_MODULE_18__.HexLineComponent, { isInteger: true, lockObject: this.props.lockObject, label: "Layer mask", target: mesh, propertyName: "layerMask", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), mesh.morphTargetManager != null && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "MORPH TARGETS", closed: true, selection: this.props.globalState }, { children: morphTargets.map((mt, i) => {
-                        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { label: mt.name, target: mt, propertyName: "influence", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }, i));
-                    }) }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_animations_animationPropertyGridComponent__WEBPACK_IMPORTED_MODULE_15__.AnimationGridComponent, { globalState: this.props.globalState, animatable: mesh, scene: mesh.getScene(), lockObject: this.props.lockObject }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "ADVANCED", closed: true, selection: this.props.globalState }, { children: [mesh.useBones && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Compute bones using shaders", target: mesh, propertyName: "computeBonesUsingShaders", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Collisions", target: mesh, propertyName: "checkCollisions", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Geometry ID", value: (_a = mesh.geometry) === null || _a === void 0 ? void 0 : _a.uniqueId.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has normals", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.NormalKind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has vertex colors", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.ColorKind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has UV set 0", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.UVKind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has UV set 1", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.UV2Kind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has UV set 2", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.UV3Kind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has UV set 3", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.UV4Kind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has tangents", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.TangentKind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has matrix weights", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.MatricesWeightsKind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has matrix indices", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.MatricesIndicesKind) ? "Yes" : "No" })] })), mesh.physicsImpostor != null && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "PHYSICS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Mass", target: mesh.physicsImpostor, propertyName: "mass", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Friction", target: mesh.physicsImpostor, propertyName: "friction", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Restitution", target: mesh.physicsImpostor, propertyName: "restitution", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Type", value: this.convertPhysicsTypeToString() })] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "OCCLUSIONS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_12__.OptionsLineComponent, { label: "Type", options: occlusionTypeOptions, target: mesh, propertyName: "occlusionType", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { label: "Retry count", minimum: -1, maximum: 10, decimalCount: 0, step: 1, target: mesh, propertyName: "occlusionRetryCount", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_12__.OptionsLineComponent, { label: "Algorithm", options: algorithmOptions, target: mesh, propertyName: "occlusionQueryAlgorithmType", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "EDGE RENDERING", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enable", target: mesh, isSelected: () => mesh.edgesRenderer != null, onSelect: (value) => {
+                            } })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonPropertyGridComponent__WEBPACK_IMPORTED_MODULE_16__.CommonPropertyGridComponent, { host: mesh, lockObject: this.props.lockObject, globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_variantsPropertyGridComponent__WEBPACK_IMPORTED_MODULE_17__.VariantsPropertyGridComponent, { host: mesh, lockObject: this.props.lockObject, globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "TRANSFORMS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_6__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Position", target: mesh, propertyName: "position", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), !mesh.rotationQuaternion && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_6__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Rotation", useEuler: this.props.globalState.onlyUseEulers, target: mesh, propertyName: "rotation", step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), mesh.rotationQuaternion && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_quaternionLineComponent__WEBPACK_IMPORTED_MODULE_8__.QuaternionLineComponent, { lockObject: this.props.lockObject, label: "Rotation", useEuler: this.props.globalState.onlyUseEulers, target: mesh, propertyName: "rotationQuaternion", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_6__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Scaling", target: mesh, propertyName: "scaling", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "DISPLAY", closed: true, selection: this.props.globalState }, { children: [!mesh.isAnInstance && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Visibility", target: mesh, propertyName: "visibility", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Alpha index", target: mesh, propertyName: "alphaIndex", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Receive shadows", target: mesh, propertyName: "receiveShadows", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.ColorKind) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use vertex colors", target: mesh, propertyName: "useVertexColors", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.ColorKind) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Has vertex alpha", target: mesh, propertyName: "hasVertexAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), scene.fogMode !== core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.Scene.FOGMODE_NONE && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Apply fog", target: mesh, propertyName: "applyFog", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), !mesh.parent && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Infinite distance", target: mesh, propertyName: "infiniteDistance", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Rendering group ID", decimalCount: 0, target: mesh, propertyName: "renderingGroupId", minimum: core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.RenderingManager.MIN_RENDERINGGROUPS, maximum: core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.RenderingManager.MAX_RENDERINGGROUPS - 1, step: 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_hexLineComponent__WEBPACK_IMPORTED_MODULE_18__.HexLineComponent, { isInteger: true, lockObject: this.props.lockObject, label: "Layer mask", target: mesh, propertyName: "layerMask", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), mesh.morphTargetManager != null && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "MORPH TARGETS", closed: true, selection: this.props.globalState }, { children: morphTargets.map((mt, i) => {
+                        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { lockObject: this.props.lockObject, label: mt.name, target: mt, propertyName: "influence", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }, i));
+                    }) }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_animations_animationPropertyGridComponent__WEBPACK_IMPORTED_MODULE_15__.AnimationGridComponent, { globalState: this.props.globalState, animatable: mesh, scene: mesh.getScene(), lockObject: this.props.lockObject }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "ADVANCED", closed: true, selection: this.props.globalState }, { children: [mesh.useBones && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Compute bones using shaders", target: mesh, propertyName: "computeBonesUsingShaders", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Collisions", target: mesh, propertyName: "checkCollisions", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Geometry ID", value: (_a = mesh.geometry) === null || _a === void 0 ? void 0 : _a.uniqueId.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has normals", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.NormalKind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has vertex colors", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.ColorKind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has UV set 0", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.UVKind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has UV set 1", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.UV2Kind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has UV set 2", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.UV3Kind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has UV set 3", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.UV4Kind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has tangents", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.TangentKind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has matrix weights", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.MatricesWeightsKind) ? "Yes" : "No" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Has matrix indices", value: mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.MatricesIndicesKind) ? "Yes" : "No" })] })), mesh.physicsImpostor != null && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "PHYSICS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Mass", target: mesh.physicsImpostor, propertyName: "mass", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Friction", target: mesh.physicsImpostor, propertyName: "friction", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Restitution", target: mesh.physicsImpostor, propertyName: "restitution", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Type", value: this.convertPhysicsTypeToString() })] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "OCCLUSIONS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_12__.OptionsLineComponent, { label: "Type", options: occlusionTypeOptions, target: mesh, propertyName: "occlusionType", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Retry count", minimum: -1, maximum: 10, decimalCount: 0, step: 1, target: mesh, propertyName: "occlusionRetryCount", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_12__.OptionsLineComponent, { label: "Algorithm", options: algorithmOptions, target: mesh, propertyName: "occlusionQueryAlgorithmType", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "EDGE RENDERING", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enable", target: mesh, isSelected: () => mesh.edgesRenderer != null, onSelect: (value) => {
                                 if (value) {
                                     mesh.enableEdgesRendering();
                                 }
                                 else {
                                     mesh.disableEdgesRendering();
                                 }
-                            }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { label: "Edge width", minimum: 0, maximum: 10, step: 0.1, target: mesh, propertyName: "edgesWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_11__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Edge color", target: mesh, propertyName: "edgesColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), !mesh.isAnInstance && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "OUTLINE & OVERLAY", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Render overlay", target: mesh, propertyName: "renderOverlay", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_11__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Overlay color", target: mesh, propertyName: "overlayColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Render outline", target: mesh, propertyName: "renderOutline", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_11__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Outline color", target: mesh, propertyName: "outlineColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "DEBUG", closed: true, selection: this.props.globalState }, { children: [!mesh.isAnInstance && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Display normals", isSelected: () => displayNormals, onSelect: () => this.displayNormals() }), !mesh.isAnInstance && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Display vertex colors", isSelected: () => displayVertexColors, onSelect: () => this.displayVertexColors() })), mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.NormalKind) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Render vertex normals", isSelected: () => renderNormalVectors, onSelect: () => this.renderNormalVectors() })), !mesh.isAnInstance && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Render wireframe over mesh", isSelected: () => renderWireframeOver, onSelect: () => this.renderWireframeOver() })), !mesh.isAnInstance && mesh.skeleton && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Display BoneWeights", isSelected: () => displayBoneWeights, onSelect: () => this.displayBoneWeights() })), !mesh.isAnInstance && this.state.displayBoneWeights && mesh.skeleton && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_12__.OptionsLineComponent, { label: "Target Bone Name", options: targetBoneOptions, target: mesh.reservedDataStore, propertyName: "displayBoneIndex", noDirectUpdate: true, onSelect: (value) => {
+                            }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Edge width", minimum: 0, maximum: 10, step: 0.1, target: mesh, propertyName: "edgesWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_11__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Edge color", target: mesh, propertyName: "edgesColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), !mesh.isAnInstance && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "OUTLINE & OVERLAY", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Render overlay", target: mesh, propertyName: "renderOverlay", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_11__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Overlay color", target: mesh, propertyName: "overlayColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Render outline", target: mesh, propertyName: "renderOutline", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_11__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Outline color", target: mesh, propertyName: "outlineColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "DEBUG", closed: true, selection: this.props.globalState }, { children: [!mesh.isAnInstance && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Display normals", isSelected: () => displayNormals, onSelect: () => this.displayNormals() }), !mesh.isAnInstance && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Display vertex colors", isSelected: () => displayVertexColors, onSelect: () => this.displayVertexColors() })), mesh.isVerticesDataPresent(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.VertexBuffer.NormalKind) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Render vertex normals", isSelected: () => renderNormalVectors, onSelect: () => this.renderNormalVectors() })), !mesh.isAnInstance && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Render wireframe over mesh", isSelected: () => renderWireframeOver, onSelect: () => this.renderWireframeOver() })), !mesh.isAnInstance && mesh.skeleton && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Display BoneWeights", isSelected: () => displayBoneWeights, onSelect: () => this.displayBoneWeights() })), !mesh.isAnInstance && this.state.displayBoneWeights && mesh.skeleton && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_12__.OptionsLineComponent, { label: "Target Bone Name", options: targetBoneOptions, target: mesh.reservedDataStore, propertyName: "displayBoneIndex", noDirectUpdate: true, onSelect: (value) => {
                                 this.onBoneDisplayIndexChange(value);
                                 this.forceUpdate();
-                            } })), !mesh.isAnInstance && this.state.displayBoneWeights && mesh.skeleton && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { label: "Target Bone", decimalCount: 0, target: mesh.reservedDataStore, propertyName: "displayBoneIndex", minimum: 0, maximum: targetBoneOptions.length - 1 || 0, step: 1, onChange: (value) => {
+                            } })), !mesh.isAnInstance && this.state.displayBoneWeights && mesh.skeleton && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Target Bone", decimalCount: 0, target: mesh.reservedDataStore, propertyName: "displayBoneIndex", minimum: 0, maximum: targetBoneOptions.length - 1 || 0, step: 1, onChange: (value) => {
                                 this.onBoneDisplayIndexChange(value);
                                 this.forceUpdate();
                             } })), !mesh.isAnInstance && mesh.skeleton && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Display SkeletonMap", isSelected: () => displaySkeletonMap, onSelect: () => this.displaySkeletonMap() }))] }))] })));
@@ -62287,15 +62287,15 @@ class SkeletonPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.C
         ];
         let displayOptions;
         if (this._skeletonViewerDisplayOptions.displayMode > core_Debug_skeletonViewer__WEBPACK_IMPORTED_MODULE_6__.SkeletonViewer.DISPLAY_LINES) {
-            displayOptions = ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "DISPLAY OPTIONS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { label: "sphereBaseSize", target: this._skeletonViewerDisplayOptions, propertyName: "sphereBaseSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: (value) => {
+            displayOptions = ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "DISPLAY OPTIONS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { lockObject: this.props.lockObject, label: "sphereBaseSize", target: this._skeletonViewerDisplayOptions, propertyName: "sphereBaseSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: (value) => {
                             this.changeDisplayOptions("sphereBaseSize", value);
-                        } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { label: "sphereScaleUnit", target: this._skeletonViewerDisplayOptions, propertyName: "sphereScaleUnit", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: (value) => {
+                        } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { lockObject: this.props.lockObject, label: "sphereScaleUnit", target: this._skeletonViewerDisplayOptions, propertyName: "sphereScaleUnit", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: (value) => {
                             this.changeDisplayOptions("sphereScaleUnit", value);
-                        } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { label: "sphereFactor", target: this._skeletonViewerDisplayOptions, propertyName: "sphereFactor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: (value) => {
+                        } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { lockObject: this.props.lockObject, label: "sphereFactor", target: this._skeletonViewerDisplayOptions, propertyName: "sphereFactor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: (value) => {
                             this.changeDisplayOptions("sphereFactor", value);
-                        } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { label: "midStep", target: this._skeletonViewerDisplayOptions, propertyName: "midStep", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: (value) => {
+                        } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { lockObject: this.props.lockObject, label: "midStep", target: this._skeletonViewerDisplayOptions, propertyName: "midStep", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: (value) => {
                             this.changeDisplayOptions("midStep", value);
-                        } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { label: "midStepFactor", target: this._skeletonViewerDisplayOptions, propertyName: "midStepFactor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: (value) => {
+                        } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_9__.FloatLineComponent, { lockObject: this.props.lockObject, label: "midStepFactor", target: this._skeletonViewerDisplayOptions, propertyName: "midStepFactor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: (value) => {
                             this.changeDisplayOptions("midStepFactor", value);
                         } })] })));
         }
@@ -62562,7 +62562,7 @@ class ConeEmitterGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compon
     }
     render() {
         const emitter = this.props.emitter;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { label: "Radius range", target: emitter, propertyName: "radiusRange", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { label: "Height range", target: emitter, propertyName: "heightRange", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Emit from spawn point only", target: emitter, propertyName: "emitFromSpawnPointOnly", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { label: "Direction randomizer", target: emitter, propertyName: "directionRandomizer", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Radius range", target: emitter, propertyName: "radiusRange", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Height range", target: emitter, propertyName: "heightRange", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Emit from spawn point only", target: emitter, propertyName: "emitFromSpawnPointOnly", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Direction randomizer", target: emitter, propertyName: "directionRandomizer", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }));
     }
 }
 
@@ -62594,7 +62594,7 @@ class CylinderEmitterGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Co
     }
     render() {
         const emitter = this.props.emitter;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Radius", target: emitter, propertyName: "radius", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Height", target: emitter, propertyName: "height", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { label: "Radius range", target: emitter, propertyName: "radiusRange", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { label: "Direction randomizer", target: emitter, propertyName: "directionRandomizer", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Radius", target: emitter, propertyName: "radius", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Height", target: emitter, propertyName: "height", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Radius range", target: emitter, propertyName: "radiusRange", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Direction randomizer", target: emitter, propertyName: "directionRandomizer", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }));
     }
 }
 
@@ -62716,7 +62716,7 @@ class HemisphericEmitterGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__
     }
     render() {
         const emitter = this.props.emitter;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Radius", target: emitter, propertyName: "radius", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { label: "Radius range", target: emitter, propertyName: "radiusRange", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { label: "Direction randomizer", target: emitter, propertyName: "directionRandomizer", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Radius", target: emitter, propertyName: "radius", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Radius range", target: emitter, propertyName: "radiusRange", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Direction randomizer", target: emitter, propertyName: "directionRandomizer", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }));
     }
 }
 
@@ -62842,7 +62842,7 @@ class ParticleSystemPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE
             case "BoxParticleEmitter":
                 return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_boxEmitterGridComponent__WEBPACK_IMPORTED_MODULE_13__.BoxEmitterGridComponent, { lockObject: this.props.lockObject, globalState: this.props.globalState, emitter: system.particleEmitterType, onPropertyChangedObservable: this.props.onPropertyChangedObservable }));
             case "ConeParticleEmitter":
-                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_coneEmitterGridComponent__WEBPACK_IMPORTED_MODULE_14__.ConeEmitterGridComponent, { globalState: this.props.globalState, emitter: system.particleEmitterType, onPropertyChangedObservable: this.props.onPropertyChangedObservable }));
+                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_coneEmitterGridComponent__WEBPACK_IMPORTED_MODULE_14__.ConeEmitterGridComponent, { lockObject: this.props.lockObject, globalState: this.props.globalState, emitter: system.particleEmitterType, onPropertyChangedObservable: this.props.onPropertyChangedObservable }));
             case "CylinderParticleEmitter":
                 return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_cylinderEmitterGridComponent__WEBPACK_IMPORTED_MODULE_15__.CylinderEmitterGridComponent, { lockObject: this.props.lockObject, globalState: this.props.globalState, emitter: system.particleEmitterType, onPropertyChangedObservable: this.props.onPropertyChangedObservable }));
             case "HemisphericParticleEmitter":
@@ -63004,7 +63004,7 @@ class ParticleSystemPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE
         emitterOptions.push(...meshEmitters.map((v, i) => {
             return { label: v.name, value: i + 1 };
         }));
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_customPropertyGridComponent__WEBPACK_IMPORTED_MODULE_4__.CustomPropertyGridComponent, { globalState: this.props.globalState, target: system, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "ID", value: system.id }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_22__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: system, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Class", value: system.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Capacity", value: system.getCapacity().toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Active count", value: system.getActiveCount().toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextureLinkLineComponent, { label: "Texture", texture: system.particleTexture, onSelectionChangedObservable: this.props.onSelectionChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__.OptionsLineComponent, { label: "Blend mode", options: blendModeOptions, target: system, propertyName: "blendMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "World offset", target: system, propertyName: "worldOffset", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Gravity", target: system, propertyName: "gravity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_11__.CheckBoxLineComponent, { label: "Is billboard", target: system, propertyName: "isBillboardBased", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_11__.CheckBoxLineComponent, { label: "Is local", target: system, propertyName: "isLocal", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_11__.CheckBoxLineComponent, { label: "Force depth write", target: system, propertyName: "forceDepthWrite", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { label: "Update speed", target: system, propertyName: "updateSpeed", minimum: 0, maximum: 0.1, decimalCount: 3, step: 0.001, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "COMMANDS", selection: this.props.globalState }, { children: [this.renderControls(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_6__.ButtonLineComponent, { label: "Dispose", onClick: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_customPropertyGridComponent__WEBPACK_IMPORTED_MODULE_4__.CustomPropertyGridComponent, { globalState: this.props.globalState, target: system, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "ID", value: system.id }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_22__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: system, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Class", value: system.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Capacity", value: system.getCapacity().toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Active count", value: system.getActiveCount().toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextureLinkLineComponent, { label: "Texture", texture: system.particleTexture, onSelectionChangedObservable: this.props.onSelectionChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__.OptionsLineComponent, { label: "Blend mode", options: blendModeOptions, target: system, propertyName: "blendMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "World offset", target: system, propertyName: "worldOffset", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Gravity", target: system, propertyName: "gravity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_11__.CheckBoxLineComponent, { label: "Is billboard", target: system, propertyName: "isBillboardBased", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_11__.CheckBoxLineComponent, { label: "Is local", target: system, propertyName: "isLocal", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_11__.CheckBoxLineComponent, { label: "Force depth write", target: system, propertyName: "forceDepthWrite", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Update speed", target: system, propertyName: "updateSpeed", minimum: 0, maximum: 0.1, decimalCount: 3, step: 0.001, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "COMMANDS", selection: this.props.globalState }, { children: [this.renderControls(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_6__.ButtonLineComponent, { label: "Dispose", onClick: () => {
                                 this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
                                 system.dispose();
                             } })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "FILE", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_21__.FileButtonLineComponent, { label: "Load", onClick: (file) => this.loadFromFile(file), accept: ".json" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_6__.ButtonLineComponent, { label: "Save", onClick: () => this.saveToFile() })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SNIPPET", selection: this.props.globalState }, { children: [system.snippetId && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Snippet ID", value: system.snippetId }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_6__.ButtonLineComponent, { label: "Load from snippet server", onClick: () => this.loadFromSnippet() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_6__.ButtonLineComponent, { label: "Save to snippet server", onClick: () => this.saveToSnippet() })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "EMITTER", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__.OptionsLineComponent, { label: "Emitter", options: emitterOptions, target: system, propertyName: "emitter", noDirectUpdate: true, onSelect: (value) => {
@@ -63108,7 +63108,7 @@ class ParticleSystemPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE
                                                 system.addAlphaRemapGradient(0, 1, 1);
                                             }, host: system, codeRecorderPropertyName: "getAlphaRemapGradients()", mode: _valueGradientGridComponent__WEBPACK_IMPORTED_MODULE_20__.GradientGridMode.Factor, lockObject: this.props.lockObject })] }))] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "ROTATION", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Min angular speed", target: system, propertyName: "minAngularSpeed", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Max angular speed", target: system, propertyName: "maxAngularSpeed", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Min initial rotation", target: system, propertyName: "minInitialRotation", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Max initial rotation", target: system, propertyName: "maxInitialRotation", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_valueGradientGridComponent__WEBPACK_IMPORTED_MODULE_20__.ValueGradientGridComponent, { globalState: this.props.globalState, gradients: system.getAngularSpeedGradients(), label: "Angular speed gradients", docLink: "hhttps://doc.babylonjs.com/babylon101/particles#rotation", onCreateRequired: () => {
                                 system.addAngularSpeedGradient(0, 0.1, 0.1);
-                            }, host: system, codeRecorderPropertyName: "getAngularSpeedGradients()", mode: _valueGradientGridComponent__WEBPACK_IMPORTED_MODULE_20__.GradientGridMode.Factor, lockObject: this.props.lockObject })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SPRITESHEET", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_11__.CheckBoxLineComponent, { label: "Animation sheet enabled", target: system, propertyName: "isAnimationSheetEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { label: "First sprite index", isInteger: true, target: system, propertyName: "startSpriteCellID", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { label: "Last sprite index", isInteger: true, target: system, propertyName: "endSpriteCellID", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_11__.CheckBoxLineComponent, { label: "Animation Loop", target: system, propertyName: "spriteCellLoop", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_11__.CheckBoxLineComponent, { label: "Random start cell index", target: system, propertyName: "spriteRandomStartCell", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { label: "Cell width", isInteger: true, target: system, propertyName: "spriteCellWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { label: "Cell height", isInteger: true, target: system, propertyName: "spriteCellHeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { label: "Cell change speed", target: system, propertyName: "spriteCellChangeSpeed", minimum: 0, maximum: 10, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
+                            }, host: system, codeRecorderPropertyName: "getAngularSpeedGradients()", mode: _valueGradientGridComponent__WEBPACK_IMPORTED_MODULE_20__.GradientGridMode.Factor, lockObject: this.props.lockObject })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SPRITESHEET", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_11__.CheckBoxLineComponent, { label: "Animation sheet enabled", target: system, propertyName: "isAnimationSheetEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "First sprite index", isInteger: true, target: system, propertyName: "startSpriteCellID", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Last sprite index", isInteger: true, target: system, propertyName: "endSpriteCellID", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_11__.CheckBoxLineComponent, { label: "Animation Loop", target: system, propertyName: "spriteCellLoop", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_11__.CheckBoxLineComponent, { label: "Random start cell index", target: system, propertyName: "spriteRandomStartCell", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Cell width", isInteger: true, target: system, propertyName: "spriteCellWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Cell height", isInteger: true, target: system, propertyName: "spriteCellHeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Cell change speed", target: system, propertyName: "spriteCellChangeSpeed", minimum: 0, maximum: 10, step: 0.1, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
     }
 }
 
@@ -63170,7 +63170,7 @@ class SphereEmitterGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Comp
     }
     render() {
         const emitter = this.props.emitter;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_2__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Radius", target: emitter, propertyName: "radius", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Radius range", target: emitter, propertyName: "radiusRange", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Direction randomizer", target: emitter, propertyName: "directionRandomizer", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_2__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Radius", target: emitter, propertyName: "radius", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Radius range", target: emitter, propertyName: "radiusRange", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Direction randomizer", target: emitter, propertyName: "directionRandomizer", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }));
     }
 }
 
@@ -63324,7 +63324,7 @@ class CommonPostProcessPropertyGridComponent extends react__WEBPACK_IMPORTED_MOD
     }
     render() {
         const postProcess = this.props.postProcess;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Class", value: postProcess.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_8__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: postProcess, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), postProcess.width && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Width", value: postProcess.width.toString() }), postProcess.height && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Height", value: postProcess.height.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_2__.CheckBoxLineComponent, { label: "Auto clear", target: postProcess, propertyName: "autoClear", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), postProcess.clearColor && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Clear color", target: postProcess, propertyName: "clearColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_2__.CheckBoxLineComponent, { label: "Pixel perfect", target: postProcess, propertyName: "enablePixelPerfectMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_2__.CheckBoxLineComponent, { label: "Fullscreen viewport", target: postProcess, propertyName: "forceFullscreenViewport", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Samples", target: postProcess, propertyName: "samples", minimum: 1, maximum: 8, step: 1, decimalCount: 0, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_7__.ButtonLineComponent, { label: "Dispose", onClick: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Class", value: postProcess.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_8__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: postProcess, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), postProcess.width && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Width", value: postProcess.width.toString() }), postProcess.height && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Height", value: postProcess.height.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_2__.CheckBoxLineComponent, { label: "Auto clear", target: postProcess, propertyName: "autoClear", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), postProcess.clearColor && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Clear color", target: postProcess, propertyName: "clearColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_2__.CheckBoxLineComponent, { label: "Pixel perfect", target: postProcess, propertyName: "enablePixelPerfectMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_2__.CheckBoxLineComponent, { label: "Fullscreen viewport", target: postProcess, propertyName: "forceFullscreenViewport", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Samples", target: postProcess, propertyName: "samples", minimum: 1, maximum: 8, step: 1, decimalCount: 0, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_7__.ButtonLineComponent, { label: "Dispose", onClick: () => {
                             postProcess.dispose();
                             this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
                         } })] })) }));
@@ -63362,7 +63362,7 @@ class CommonRenderingPipelinePropertyGridComponent extends react__WEBPACK_IMPORT
     render() {
         const renderPipeline = this.props.renderPipeline;
         const renderPipelineAsAny = renderPipeline;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Name", value: renderPipeline.name }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Class", value: renderPipeline.getClassName() }), renderPipelineAsAny.samples !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { label: "Samples", minimum: 1, maximum: 8, step: 1, decimalCount: 0, target: renderPipeline, propertyName: "samples", onPropertyChangedObservable: this.props.onPropertyChangedObservable }))] })) }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Name", value: renderPipeline.name }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Class", value: renderPipeline.getClassName() }), renderPipelineAsAny.samples !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Samples", minimum: 1, maximum: 8, step: 1, decimalCount: 0, target: renderPipeline, propertyName: "samples", onPropertyChangedObservable: this.props.onPropertyChangedObservable }))] })) }));
     }
 }
 
@@ -63418,7 +63418,7 @@ class DefaultRenderingPipelinePropertyGridComponent extends react__WEBPACK_IMPOR
             { label: "Multiply", value: core_Materials_imageProcessingConfiguration__WEBPACK_IMPORTED_MODULE_7__.ImageProcessingConfiguration.VIGNETTEMODE_MULTIPLY },
             { label: "Opaque", value: core_Materials_imageProcessingConfiguration__WEBPACK_IMPORTED_MODULE_7__.ImageProcessingConfiguration.VIGNETTEMODE_OPAQUE },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonRenderingPipelinePropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, renderPipeline: renderPipeline, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "BLOOM", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "bloomEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.bloomEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Threshold", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline, propertyName: "bloomThreshold", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Weight", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline, propertyName: "bloomWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Kernel", minimum: 0, maximum: 128, step: 1, target: renderPipeline, propertyName: "bloomKernel", onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 0 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Scale", minimum: 0, maximum: 1, step: 0.25, target: renderPipeline, propertyName: "bloomScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "CHROMATIC ABERRATION", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "chromaticAberrationEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.chromaticAberrationEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "aberrationAmount", minimum: 0, maximum: 128, step: 0.1, target: renderPipeline.chromaticAberration, propertyName: "aberrationAmount", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Radial intensity", minimum: 0, maximum: 1, step: 0.01, target: renderPipeline.chromaticAberration, propertyName: "radialIntensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector2LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector2LineComponent, { lockObject: this.props.lockObject, label: "Center", target: renderPipeline.chromaticAberration, propertyName: "centerPosition", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector2LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector2LineComponent, { lockObject: this.props.lockObject, label: "Direction", target: renderPipeline.chromaticAberration, propertyName: "direction", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "DEPTH OF FIELD", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "depthOfFieldEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.depthOfFieldEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Focal length", minimum: 0, maximum: camera.maxZ, step: 0.1, target: renderPipeline.depthOfField, propertyName: "focalLength", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "fStop", minimum: 0, maximum: 32, step: 0.1, target: renderPipeline.depthOfField, propertyName: "fStop", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Distance", minimum: 0, maximum: camera.maxZ, step: 0.1, target: renderPipeline.depthOfField, propertyName: "focusDistance", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Lens size", minimum: 0, maximum: 1000, step: 1, target: renderPipeline.depthOfField, propertyName: "lensSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 0 })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "FXAA", selection: this.props.globalState }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, propertyName: "fxaaEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "GLOW LAYER", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, propertyName: "glowLayerEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.glowLayerEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Blur kernel size", minimum: 1, maximum: 128, step: 1, decimalCount: 0, target: renderPipeline.glowLayer, propertyName: "blurKernelSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Intensity", minimum: 0, maximum: 10, step: 0.1, target: renderPipeline.glowLayer, propertyName: "intensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "GRAIN", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "grainEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.grainEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Animated", target: renderPipeline.grain, propertyName: "animated", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Intensity", minimum: 0, maximum: 50, step: 0.1, target: renderPipeline.grain, propertyName: "intensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "IMAGE PROCESSING", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "imageProcessingEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.imageProcessing && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: "Convert clear color to linear", onClick: () => (renderPipeline.scene.clearColor = renderPipeline.scene.clearColor.toLinearSpace()) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: "Convert clear color to gamma", onClick: () => (renderPipeline.scene.clearColor = renderPipeline.scene.clearColor.toGammaSpace()) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { minimum: 0, maximum: 4, step: 0.1, label: "Contrast", target: renderPipeline.imageProcessing, propertyName: "contrast", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { minimum: 0, maximum: 4, step: 0.1, label: "Exposure", target: renderPipeline.imageProcessing, propertyName: "exposure", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Tone mapping", target: renderPipeline.imageProcessing, propertyName: "toneMappingEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: "Tone mapping type", options: toneMappingOptions, target: renderPipeline.imageProcessing, propertyName: "toneMappingType", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Vignette", target: renderPipeline.imageProcessing, propertyName: "vignetteEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { minimum: 0, maximum: 4, step: 0.1, label: "Vignette weight", target: renderPipeline.imageProcessing, propertyName: "vignetteWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { minimum: 0, maximum: 1, step: 0.1, label: "Vignette stretch", target: renderPipeline.imageProcessing, propertyName: "vignetteStretch", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { minimum: 0, maximum: Math.PI, step: 0.1, label: "Vignette FOV", target: renderPipeline.imageProcessing, propertyName: "vignetteCameraFov", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { minimum: 0, maximum: 1, step: 0.1, label: "Vignette center X", target: renderPipeline.imageProcessing, propertyName: "vignetteCentreX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { minimum: 0, maximum: 1, step: 0.1, label: "Vignette center Y", target: renderPipeline.imageProcessing, propertyName: "vignetteCentreY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Vignette color", target: renderPipeline.imageProcessing, propertyName: "vignetteColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: "Vignette blend mode", options: vignetteModeOptions, target: renderPipeline.imageProcessing, propertyName: "vignetteBlendMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "SHARPEN", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "sharpenEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.sharpenEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Color amount", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline.sharpen, propertyName: "colorAmount", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Edge amount", minimum: 0, maximum: 5, step: 0.05, target: renderPipeline.sharpen, propertyName: "edgeAmount", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonRenderingPipelinePropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, renderPipeline: renderPipeline, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "BLOOM", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "bloomEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.bloomEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Threshold", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline, propertyName: "bloomThreshold", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Weight", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline, propertyName: "bloomWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Kernel", minimum: 0, maximum: 128, step: 1, target: renderPipeline, propertyName: "bloomKernel", onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 0 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Scale", minimum: 0, maximum: 1, step: 0.25, target: renderPipeline, propertyName: "bloomScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "CHROMATIC ABERRATION", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "chromaticAberrationEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.chromaticAberrationEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "aberrationAmount", minimum: 0, maximum: 128, step: 0.1, target: renderPipeline.chromaticAberration, propertyName: "aberrationAmount", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Radial intensity", minimum: 0, maximum: 1, step: 0.01, target: renderPipeline.chromaticAberration, propertyName: "radialIntensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector2LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector2LineComponent, { lockObject: this.props.lockObject, label: "Center", target: renderPipeline.chromaticAberration, propertyName: "centerPosition", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector2LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector2LineComponent, { lockObject: this.props.lockObject, label: "Direction", target: renderPipeline.chromaticAberration, propertyName: "direction", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "DEPTH OF FIELD", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "depthOfFieldEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.depthOfFieldEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Focal length", minimum: 0, maximum: camera.maxZ, step: 0.1, target: renderPipeline.depthOfField, propertyName: "focalLength", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "fStop", minimum: 0, maximum: 32, step: 0.1, target: renderPipeline.depthOfField, propertyName: "fStop", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Distance", minimum: 0, maximum: camera.maxZ, step: 0.1, target: renderPipeline.depthOfField, propertyName: "focusDistance", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Lens size", minimum: 0, maximum: 1000, step: 1, target: renderPipeline.depthOfField, propertyName: "lensSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 0 })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "FXAA", selection: this.props.globalState }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, propertyName: "fxaaEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "GLOW LAYER", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, propertyName: "glowLayerEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.glowLayerEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Blur kernel size", minimum: 1, maximum: 128, step: 1, decimalCount: 0, target: renderPipeline.glowLayer, propertyName: "blurKernelSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Intensity", minimum: 0, maximum: 10, step: 0.1, target: renderPipeline.glowLayer, propertyName: "intensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "GRAIN", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "grainEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.grainEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Animated", target: renderPipeline.grain, propertyName: "animated", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Intensity", minimum: 0, maximum: 50, step: 0.1, target: renderPipeline.grain, propertyName: "intensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "IMAGE PROCESSING", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "imageProcessingEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.imageProcessing && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: "Convert clear color to linear", onClick: () => (renderPipeline.scene.clearColor = renderPipeline.scene.clearColor.toLinearSpace()) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: "Convert clear color to gamma", onClick: () => (renderPipeline.scene.clearColor = renderPipeline.scene.clearColor.toGammaSpace()) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Contrast", target: renderPipeline.imageProcessing, propertyName: "contrast", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Exposure", target: renderPipeline.imageProcessing, propertyName: "exposure", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Tone mapping", target: renderPipeline.imageProcessing, propertyName: "toneMappingEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: "Tone mapping type", options: toneMappingOptions, target: renderPipeline.imageProcessing, propertyName: "toneMappingType", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Vignette", target: renderPipeline.imageProcessing, propertyName: "vignetteEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Vignette weight", target: renderPipeline.imageProcessing, propertyName: "vignetteWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette stretch", target: renderPipeline.imageProcessing, propertyName: "vignetteStretch", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: Math.PI, step: 0.1, label: "Vignette FOV", target: renderPipeline.imageProcessing, propertyName: "vignetteCameraFov", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette center X", target: renderPipeline.imageProcessing, propertyName: "vignetteCentreX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette center Y", target: renderPipeline.imageProcessing, propertyName: "vignetteCentreY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Vignette color", target: renderPipeline.imageProcessing, propertyName: "vignetteColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: "Vignette blend mode", options: vignetteModeOptions, target: renderPipeline.imageProcessing, propertyName: "vignetteBlendMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "SHARPEN", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Enabled", target: renderPipeline, onValueChanged: () => this.forceUpdate(), propertyName: "sharpenEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), renderPipeline.sharpenEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Color amount", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline.sharpen, propertyName: "colorAmount", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Edge amount", minimum: 0, maximum: 5, step: 0.05, target: renderPipeline.sharpen, propertyName: "edgeAmount", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] }))] })));
     }
 }
 
@@ -63454,7 +63454,7 @@ class LensRenderingPipelinePropertyGridComponent extends react__WEBPACK_IMPORTED
     }
     render() {
         const renderPipeline = this.props.renderPipeline;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonRenderingPipelinePropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, renderPipeline: renderPipeline, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "OPTIONS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Edge blur", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "edgeBlur", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Edge distortion", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "edgeDistortion", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Grain amount", minimum: 0, maximum: 1, step: 0.1, target: renderPipeline, propertyName: "grainAmount", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Chromatic aberration", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "chromaticAberration", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Darken out of focus", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "darkenOutOfFocus", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Blur noise", target: renderPipeline, propertyName: "blurNoise", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "DEPTH OF FIELD", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Aperture", minimum: 0, maximum: 10, step: 0.1, target: renderPipeline, propertyName: "dofAperture", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Distortion", minimum: 0, maximum: 1000, step: 0.1, target: renderPipeline, propertyName: "dofDistortion", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Pentagon bokeh", target: renderPipeline, propertyName: "pentagonBokeh", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Highlight gain", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "highlightsGain", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Highlight threshold", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "highlightsThreshold", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonRenderingPipelinePropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, renderPipeline: renderPipeline, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "OPTIONS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Edge blur", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "edgeBlur", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Edge distortion", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "edgeDistortion", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Grain amount", minimum: 0, maximum: 1, step: 0.1, target: renderPipeline, propertyName: "grainAmount", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Chromatic aberration", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "chromaticAberration", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Darken out of focus", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "darkenOutOfFocus", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Blur noise", target: renderPipeline, propertyName: "blurNoise", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "DEPTH OF FIELD", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Aperture", minimum: 0, maximum: 10, step: 0.1, target: renderPipeline, propertyName: "dofAperture", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Distortion", minimum: 0, maximum: 1000, step: 0.1, target: renderPipeline, propertyName: "dofDistortion", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Pentagon bokeh", target: renderPipeline, propertyName: "pentagonBokeh", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Highlight gain", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "highlightsGain", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Highlight threshold", minimum: 0, maximum: 5, step: 0.1, target: renderPipeline, propertyName: "highlightsThreshold", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
     }
 }
 
@@ -63557,7 +63557,7 @@ class SSAO2RenderingPipelinePropertyGridComponent extends react__WEBPACK_IMPORTE
     render() {
         const renderPipeline = this.props.renderPipeline;
         const camera = renderPipeline.scene.activeCamera;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonRenderingPipelinePropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, renderPipeline: renderPipeline, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "SSAO", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Strength", minimum: 0, maximum: 2, step: 0.05, target: renderPipeline, propertyName: "totalStrength", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Base", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline, propertyName: "base", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Max Z", minimum: 0, maximum: camera.maxZ, step: 1, target: renderPipeline, propertyName: "maxZ", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Min Z aspect", minimum: 0, maximum: 0.5, step: 0.01, target: renderPipeline, propertyName: "minZAspect", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Radius", minimum: 0, maximum: 10, step: 0.05, target: renderPipeline, propertyName: "radius", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonRenderingPipelinePropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, renderPipeline: renderPipeline, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "SSAO", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Strength", minimum: 0, maximum: 2, step: 0.05, target: renderPipeline, propertyName: "totalStrength", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Base", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline, propertyName: "base", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Max Z", minimum: 0, maximum: camera.maxZ, step: 1, target: renderPipeline, propertyName: "maxZ", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Min Z aspect", minimum: 0, maximum: 0.5, step: 0.01, target: renderPipeline, propertyName: "minZAspect", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Radius", minimum: 0, maximum: 10, step: 0.05, target: renderPipeline, propertyName: "radius", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
     }
 }
 
@@ -63591,7 +63591,7 @@ class SSAORenderingPipelinePropertyGridComponent extends react__WEBPACK_IMPORTED
     }
     render() {
         const renderPipeline = this.props.renderPipeline;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonRenderingPipelinePropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, renderPipeline: renderPipeline, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "SSAO", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Strength", minimum: 0, maximum: 2, step: 0.05, target: renderPipeline, propertyName: "totalStrength", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Base", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline, propertyName: "base", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Radius", minimum: 0.0001, maximum: 0.001, step: 0.0001, target: renderPipeline, propertyName: "radius", onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 4 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Area", minimum: 0.0001, maximum: 0.01, step: 0.0001, target: renderPipeline, propertyName: "area", onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 4 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { label: "Falloff", minimum: 0, maximum: 0.00001, step: 0.000001, target: renderPipeline, propertyName: "fallOff", onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 6 })] }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonRenderingPipelinePropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonRenderingPipelinePropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, renderPipeline: renderPipeline, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "SSAO", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Strength", minimum: 0, maximum: 2, step: 0.05, target: renderPipeline, propertyName: "totalStrength", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Base", minimum: 0, maximum: 1, step: 0.05, target: renderPipeline, propertyName: "base", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Radius", minimum: 0.0001, maximum: 0.001, step: 0.0001, target: renderPipeline, propertyName: "radius", onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 4 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Area", minimum: 0.0001, maximum: 0.01, step: 0.0001, target: renderPipeline, propertyName: "area", onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 4 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_3__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Falloff", minimum: 0, maximum: 0.00001, step: 0.000001, target: renderPipeline, propertyName: "fallOff", onPropertyChangedObservable: this.props.onPropertyChangedObservable, decimalCount: 6 })] }))] })));
     }
 }
 
@@ -63807,7 +63807,7 @@ class ScenePropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Comp
             { label: "Multiply", value: core_Misc_observable__WEBPACK_IMPORTED_MODULE_2__.ImageProcessingConfiguration.VIGNETTEMODE_MULTIPLY },
             { label: "Opaque", value: core_Misc_observable__WEBPACK_IMPORTED_MODULE_2__.ImageProcessingConfiguration.VIGNETTEMODE_OPAQUE },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "RENDERING MODE", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_radioLineComponent__WEBPACK_IMPORTED_MODULE_4__.RadioButtonLineComponent, { onSelectionChangedObservable: this._renderingModeGroupObservable, label: "Point", isSelected: () => scene.forcePointsCloud, onSelect: () => this.setRenderingModes(true, false) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_radioLineComponent__WEBPACK_IMPORTED_MODULE_4__.RadioButtonLineComponent, { onSelectionChangedObservable: this._renderingModeGroupObservable, label: "Wireframe", isSelected: () => scene.forceWireframe, onSelect: () => this.setRenderingModes(false, true) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_radioLineComponent__WEBPACK_IMPORTED_MODULE_4__.RadioButtonLineComponent, { onSelectionChangedObservable: this._renderingModeGroupObservable, label: "Solid", isSelected: () => !scene.forcePointsCloud && !scene.forceWireframe, onSelect: () => this.setRenderingModes(false, false) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "ENVIRONMENT", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Clear color", target: scene, propertyName: "clearColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Clear color enabled", target: scene, propertyName: "autoClear", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Ambient color", target: scene, propertyName: "ambientColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Environment texture (IBL)", isSelected: () => scene.environmentTexture != null, onSelect: () => this.switchIBL() }), scene.environmentTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Env. texture", texture: scene.environmentTexture, onSelectionChangedObservable: this.props.onSelectionChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_8__.FileButtonLineComponent, { label: "Update environment texture", onClick: (file) => this.updateEnvironmentTexture(file), accept: ".dds, .env" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { minimum: 0, maximum: 2, step: 0.01, label: "IBL Intensity", target: scene, propertyName: "environmentIntensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fogPropertyGridComponent__WEBPACK_IMPORTED_MODULE_7__.FogPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, scene: scene, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_animations_animationPropertyGridComponent__WEBPACK_IMPORTED_MODULE_15__.AnimationGridComponent, { globalState: this.props.globalState, animatable: scene, scene: scene, lockObject: this.props.lockObject }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "MATERIAL IMAGE PROCESSING", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { minimum: 0, maximum: 4, step: 0.1, label: "Contrast", target: imageProcessing, propertyName: "contrast", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { minimum: 0, maximum: 4, step: 0.1, label: "Exposure", target: imageProcessing, propertyName: "exposure", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Tone mapping", target: imageProcessing, propertyName: "toneMappingEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_13__.OptionsLineComponent, { label: "Tone mapping type", options: toneMappingOptions, target: imageProcessing, propertyName: "toneMappingType", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Vignette", target: imageProcessing, propertyName: "vignetteEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { minimum: 0, maximum: 4, step: 0.1, label: "Vignette weight", target: imageProcessing, propertyName: "vignetteWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { minimum: 0, maximum: 1, step: 0.1, label: "Vignette stretch", target: imageProcessing, propertyName: "vignetteStretch", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { minimum: 0, maximum: Math.PI, step: 0.1, label: "Vignette FOV", target: imageProcessing, propertyName: "vignetteCameraFov", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { minimum: 0, maximum: 1, step: 0.1, label: "Vignette center X", target: imageProcessing, propertyName: "vignetteCentreX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { minimum: 0, maximum: 1, step: 0.1, label: "Vignette center Y", target: imageProcessing, propertyName: "vignetteCentreY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Vignette color", target: imageProcessing, propertyName: "vignetteColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_13__.OptionsLineComponent, { label: "Vignette blend mode", options: vignetteModeOptions, target: imageProcessing, propertyName: "vignetteBlendMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) })] })), dummy !== null && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "PHYSICS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_11__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Time step", target: dummy, propertyName: "timeStep", onChange: (newValue) => this.updateTimeStep(newValue), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Gravity", target: dummy, propertyName: "gravity", onChange: (newValue) => this.updateGravity(newValue), onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "COLLISIONS", closed: true, selection: this.props.globalState }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Gravity", target: scene, propertyName: "gravity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "SHADOWS", closed: true, selection: this.props.globalState }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_14__.ButtonLineComponent, { label: "Normalize scene", onClick: () => this.normalizeScene() }) }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "RENDERING MODE", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_radioLineComponent__WEBPACK_IMPORTED_MODULE_4__.RadioButtonLineComponent, { onSelectionChangedObservable: this._renderingModeGroupObservable, label: "Point", isSelected: () => scene.forcePointsCloud, onSelect: () => this.setRenderingModes(true, false) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_radioLineComponent__WEBPACK_IMPORTED_MODULE_4__.RadioButtonLineComponent, { onSelectionChangedObservable: this._renderingModeGroupObservable, label: "Wireframe", isSelected: () => scene.forceWireframe, onSelect: () => this.setRenderingModes(false, true) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_radioLineComponent__WEBPACK_IMPORTED_MODULE_4__.RadioButtonLineComponent, { onSelectionChangedObservable: this._renderingModeGroupObservable, label: "Solid", isSelected: () => !scene.forcePointsCloud && !scene.forceWireframe, onSelect: () => this.setRenderingModes(false, false) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "ENVIRONMENT", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Clear color", target: scene, propertyName: "clearColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Clear color enabled", target: scene, propertyName: "autoClear", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Ambient color", target: scene, propertyName: "ambientColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Environment texture (IBL)", isSelected: () => scene.environmentTexture != null, onSelect: () => this.switchIBL() }), scene.environmentTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Env. texture", texture: scene.environmentTexture, onSelectionChangedObservable: this.props.onSelectionChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_8__.FileButtonLineComponent, { label: "Update environment texture", onClick: (file) => this.updateEnvironmentTexture(file), accept: ".dds, .env" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 2, step: 0.01, label: "IBL Intensity", target: scene, propertyName: "environmentIntensity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fogPropertyGridComponent__WEBPACK_IMPORTED_MODULE_7__.FogPropertyGridComponent, { globalState: this.props.globalState, lockObject: this.props.lockObject, scene: scene, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_animations_animationPropertyGridComponent__WEBPACK_IMPORTED_MODULE_15__.AnimationGridComponent, { globalState: this.props.globalState, animatable: scene, scene: scene, lockObject: this.props.lockObject }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "MATERIAL IMAGE PROCESSING", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Contrast", target: imageProcessing, propertyName: "contrast", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Exposure", target: imageProcessing, propertyName: "exposure", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Tone mapping", target: imageProcessing, propertyName: "toneMappingEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_13__.OptionsLineComponent, { label: "Tone mapping type", options: toneMappingOptions, target: imageProcessing, propertyName: "toneMappingType", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Vignette", target: imageProcessing, propertyName: "vignetteEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 4, step: 0.1, label: "Vignette weight", target: imageProcessing, propertyName: "vignetteWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette stretch", target: imageProcessing, propertyName: "vignetteStretch", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: Math.PI, step: 0.1, label: "Vignette FOV", target: imageProcessing, propertyName: "vignetteCameraFov", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette center X", target: imageProcessing, propertyName: "vignetteCentreX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_12__.SliderLineComponent, { lockObject: this.props.lockObject, minimum: 0, maximum: 1, step: 0.1, label: "Vignette center Y", target: imageProcessing, propertyName: "vignetteCentreY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.lockObject, label: "Vignette color", target: imageProcessing, propertyName: "vignetteColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_13__.OptionsLineComponent, { label: "Vignette blend mode", options: vignetteModeOptions, target: imageProcessing, propertyName: "vignetteBlendMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ mode: value }) })] })), dummy !== null && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "PHYSICS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_11__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Time step", target: dummy, propertyName: "timeStep", onChange: (newValue) => this.updateTimeStep(newValue), onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Gravity", target: dummy, propertyName: "gravity", onChange: (newValue) => this.updateGravity(newValue), onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "COLLISIONS", closed: true, selection: this.props.globalState }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_10__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Gravity", target: scene, propertyName: "gravity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "SHADOWS", closed: true, selection: this.props.globalState }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_14__.ButtonLineComponent, { label: "Normalize scene", onClick: () => this.normalizeScene() }) }))] })));
     }
 }
 
@@ -63853,7 +63853,7 @@ class SoundPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Comp
                             } })), !sound.isPlaying && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_5__.ButtonLineComponent, { label: "Play", onClick: () => {
                                 sound.play();
                                 this.forceUpdate();
-                            } })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { label: "Samples", target: sound, directValue: sound.getVolume(), onChange: (value) => {
+                            } })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_6__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Samples", target: sound, directValue: sound.getVolume(), onChange: (value) => {
                                 sound.setVolume(value);
                                 this.forceUpdate();
                             }, minimum: 0, maximum: 5, step: 0.1, decimalCount: 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_7__.CheckBoxLineComponent, { label: "Loop", target: sound, propertyName: "loop", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
@@ -64010,7 +64010,7 @@ class SpriteManagerPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
             { label: "Maximized", value: core_Sprites_spriteManager__WEBPACK_IMPORTED_MODULE_3__.Constants.ALPHA_MAXIMIZED },
             { label: "Pre-multiplied", value: core_Sprites_spriteManager__WEBPACK_IMPORTED_MODULE_3__.Constants.ALPHA_PREMULTIPLIED },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: spriteManager, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Unique ID", value: spriteManager.uniqueId.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Capacity", value: spriteManager.capacity.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Texture", texture: spriteManager.texture, onSelectionChangedObservable: this.props.onSelectionChangedObservable }), spriteManager.sprites.length < spriteManager.capacity && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_10__.ButtonLineComponent, { label: "Add new sprite", onClick: () => this.addNewSprite() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_10__.ButtonLineComponent, { label: "Dispose", onClick: () => this.disposeManager() })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "FILE", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_11__.FileButtonLineComponent, { label: "Load", onClick: (file) => this.loadFromFile(file), accept: ".json" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_10__.ButtonLineComponent, { label: "Save", onClick: () => this.saveToFile() })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SNIPPET", selection: this.props.globalState }, { children: [spriteManager.snippetId && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Snippet ID", value: spriteManager.snippetId }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_10__.ButtonLineComponent, { label: "Load from snippet server", onClick: () => this.loadFromSnippet() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_10__.ButtonLineComponent, { label: "Save to snippet server", onClick: () => this.saveToSnippet() })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "PROPERTIES", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Pickable", target: spriteManager, propertyName: "isPickable", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Fog enabled", target: spriteManager, propertyName: "fogEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "No depth write", target: spriteManager, propertyName: "disableDepthWrite", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_8__.SliderLineComponent, { label: "Rendering group ID", decimalCount: 0, target: spriteManager, propertyName: "renderingGroupId", minimum: core_Sprites_spriteManager__WEBPACK_IMPORTED_MODULE_3__.RenderingManager.MIN_RENDERINGGROUPS, maximum: core_Sprites_spriteManager__WEBPACK_IMPORTED_MODULE_3__.RenderingManager.MAX_RENDERINGGROUPS - 1, step: 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_12__.OptionsLineComponent, { label: "Alpha mode", options: alphaModeOptions, target: spriteManager, propertyName: "blendMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ blendMode: value }) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "CELLS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "Cell width", isInteger: true, target: spriteManager, propertyName: "cellWidth", min: 0, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "Cell height", isInteger: true, target: spriteManager, propertyName: "cellHeight", min: 0, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: spriteManager, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Unique ID", value: spriteManager.uniqueId.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Capacity", value: spriteManager.capacity.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_9__.TextureLinkLineComponent, { label: "Texture", texture: spriteManager.texture, onSelectionChangedObservable: this.props.onSelectionChangedObservable }), spriteManager.sprites.length < spriteManager.capacity && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_10__.ButtonLineComponent, { label: "Add new sprite", onClick: () => this.addNewSprite() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_10__.ButtonLineComponent, { label: "Dispose", onClick: () => this.disposeManager() })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "FILE", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_11__.FileButtonLineComponent, { label: "Load", onClick: (file) => this.loadFromFile(file), accept: ".json" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_10__.ButtonLineComponent, { label: "Save", onClick: () => this.saveToFile() })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SNIPPET", selection: this.props.globalState }, { children: [spriteManager.snippetId && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "Snippet ID", value: spriteManager.snippetId }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_10__.ButtonLineComponent, { label: "Load from snippet server", onClick: () => this.loadFromSnippet() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_10__.ButtonLineComponent, { label: "Save to snippet server", onClick: () => this.saveToSnippet() })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "PROPERTIES", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Pickable", target: spriteManager, propertyName: "isPickable", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Fog enabled", target: spriteManager, propertyName: "fogEnabled", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "No depth write", target: spriteManager, propertyName: "disableDepthWrite", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_8__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Rendering group ID", decimalCount: 0, target: spriteManager, propertyName: "renderingGroupId", minimum: core_Sprites_spriteManager__WEBPACK_IMPORTED_MODULE_3__.RenderingManager.MIN_RENDERINGGROUPS, maximum: core_Sprites_spriteManager__WEBPACK_IMPORTED_MODULE_3__.RenderingManager.MAX_RENDERINGGROUPS - 1, step: 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_12__.OptionsLineComponent, { label: "Alpha mode", options: alphaModeOptions, target: spriteManager, propertyName: "blendMode", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: (value) => this.setState({ blendMode: value }) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "CELLS", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Cell width", isInteger: true, target: spriteManager, propertyName: "cellWidth", min: 0, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Cell height", isInteger: true, target: spriteManager, propertyName: "cellHeight", min: 0, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
     }
 }
 
@@ -64147,13 +64147,13 @@ class SpritePropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
         else {
             maxCellCount = (textureSize.width / manager.cellWidth) * (textureSize.height / manager.cellHeight);
         }
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: sprite, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Unique ID", value: sprite.uniqueId.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Link to manager", value: manager.name, onLink: () => this.onManagerLink() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Visible", target: sprite, propertyName: "isVisible", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: "Dispose", onClick: () => this.disposeSprite() })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "PROPERTIES", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_6__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Position", target: sprite, propertyName: "position", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Pickable", target: sprite, propertyName: "isPickable", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use alpha for picking", target: sprite, propertyName: "useAlphaForPicking", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color4LineComponent__WEBPACK_IMPORTED_MODULE_11__.Color4LineComponent, { lockObject: this.props.lockObject, label: "Color", target: sprite, propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_8__.SliderLineComponent, { useEuler: this.props.globalState.onlyUseEulers, label: "Angle", target: sprite, propertyName: "angle", minimum: 0, maximum: 2 * Math.PI, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "CELL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("canvas", { ref: this._canvasRef, className: "preview", style: {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: sprite, propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Unique ID", value: sprite.uniqueId.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "Link to manager", value: manager.name, onLink: () => this.onManagerLink() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Visible", target: sprite, propertyName: "isVisible", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: "Dispose", onClick: () => this.disposeSprite() })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "PROPERTIES", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_6__.Vector3LineComponent, { lockObject: this.props.lockObject, label: "Position", target: sprite, propertyName: "position", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Pickable", target: sprite, propertyName: "isPickable", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Use alpha for picking", target: sprite, propertyName: "useAlphaForPicking", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color4LineComponent__WEBPACK_IMPORTED_MODULE_11__.Color4LineComponent, { lockObject: this.props.lockObject, label: "Color", target: sprite, propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_8__.SliderLineComponent, { lockObject: this.props.lockObject, useEuler: this.props.globalState.onlyUseEulers, label: "Angle", target: sprite, propertyName: "angle", minimum: 0, maximum: 2 * Math.PI, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "CELL", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("canvas", { ref: this._canvasRef, className: "preview", style: {
                                 margin: "auto",
                                 marginTop: "4px",
                                 marginBottom: "4px",
                                 display: "grid",
                                 height: "108px",
-                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_8__.SliderLineComponent, { label: "Cell index", decimalCount: 0, target: sprite, propertyName: "cellIndex", minimum: 0, maximum: maxCellCount, step: 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: () => this.forceUpdate() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Invert U axis", target: sprite, propertyName: "invertU", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Invert V axis", target: sprite, propertyName: "invertV", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SCALE", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "Width", lockObject: this.props.lockObject, target: sprite, propertyName: "width", min: 0, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "Height", lockObject: this.props.lockObject, target: sprite, propertyName: "height", min: 0, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "ANIMATION", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "Start cell", isInteger: true, lockObject: this.props.lockObject, target: sprite, propertyName: "fromIndex", min: 0, max: maxCellCount, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "End cell", isInteger: true, lockObject: this.props.lockObject, target: sprite, propertyName: "toIndex", min: 0, max: maxCellCount, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Loop", target: sprite, propertyName: "loopAnimation", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "Delay", lockObject: this.props.lockObject, target: sprite, propertyName: "delay", digits: 0, min: 0, isInteger: true, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: sprite.animationStarted ? "Stop" : "Start", onClick: () => this.switchPlayStopState() })] }))] })));
+                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_8__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Cell index", decimalCount: 0, target: sprite, propertyName: "cellIndex", minimum: 0, maximum: maxCellCount, step: 1, onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: () => this.forceUpdate() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Invert U axis", target: sprite, propertyName: "invertU", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Invert V axis", target: sprite, propertyName: "invertV", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SCALE", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "Width", lockObject: this.props.lockObject, target: sprite, propertyName: "width", min: 0, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "Height", lockObject: this.props.lockObject, target: sprite, propertyName: "height", min: 0, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "ANIMATION", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "Start cell", isInteger: true, lockObject: this.props.lockObject, target: sprite, propertyName: "fromIndex", min: 0, max: maxCellCount, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "End cell", isInteger: true, lockObject: this.props.lockObject, target: sprite, propertyName: "toIndex", min: 0, max: maxCellCount, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Loop", target: sprite, propertyName: "loopAnimation", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "Delay", lockObject: this.props.lockObject, target: sprite, propertyName: "delay", digits: 0, min: 0, isInteger: true, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_9__.ButtonLineComponent, { label: sprite.animationStarted ? "Stop" : "Start", onClick: () => this.switchPlayStopState() })] }))] })));
     }
 }
 
@@ -64439,7 +64439,7 @@ class GLTFComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 { label: "Auto", value: 0 },
                 { label: "Right handed", value: 1 },
             ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GLTF LOADER", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Always compute bounding box", target: loaderState, propertyName: "alwaysComputeBoundingBox" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Always compute skeleton root node", target: loaderState, propertyName: "alwaysComputeSkeletonRootNode" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Animation start mode", options: animationStartMode, target: loaderState, propertyName: "animationStartMode" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Capture performance counters", target: loaderState, propertyName: "capturePerformanceCounters" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Compile materials", target: loaderState, propertyName: "compileMaterials" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Compile shadow generators", target: loaderState, propertyName: "compileShadowGenerators" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Coordinate system", options: coordinateSystemMode, target: loaderState, propertyName: "coordinateSystemMode" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Create instances", target: loaderState, propertyName: "createInstances" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Enable logging", target: loaderState, propertyName: "loggingEnabled" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Load all materials", target: loaderState, propertyName: "loadAllMaterials" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { label: "Target FPS", target: loaderState, propertyName: "targetFps", isInteger: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Transparency as coverage", target: loaderState, propertyName: "transparencyAsCoverage" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Use clip plane", target: loaderState, propertyName: "useClipPlane" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Use sRGB buffers", target: loaderState, propertyName: "useSRGBBuffers" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Validate", target: loaderState, propertyName: "validate" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_messageLineComponent__WEBPACK_IMPORTED_MODULE_6__.MessageLineComponent, { text: "You need to reload your file to see these changes" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GLTF EXTENSIONS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "EXT_lights_image_based", isSelected: () => extensionStates["EXT_lights_image_based"].enabled, onSelect: (value) => (extensionStates["EXT_lights_image_based"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "EXT_mesh_gpu_instancing", isSelected: () => extensionStates["EXT_mesh_gpu_instancing"].enabled, onSelect: (value) => (extensionStates["EXT_mesh_gpu_instancing"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "EXT_texture_webp", isSelected: () => extensionStates["EXT_texture_webp"].enabled, onSelect: (value) => (extensionStates["EXT_texture_webp"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_draco_mesh_compression", isSelected: () => extensionStates["KHR_draco_mesh_compression"].enabled, onSelect: (value) => (extensionStates["KHR_draco_mesh_compression"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_pbrSpecularGloss...", isSelected: () => extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled, onSelect: (value) => (extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_clearcoat", isSelected: () => extensionStates["KHR_materials_clearcoat"].enabled, onSelect: (value) => (extensionStates["KHR_materials_clearcoat"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_iridescence", isSelected: () => extensionStates["KHR_materials_iridescence"].enabled, onSelect: (value) => (extensionStates["KHR_materials_iridescence"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_emissive_strength", isSelected: () => extensionStates["KHR_materials_emissive_strength"].enabled, onSelect: (value) => (extensionStates["KHR_materials_emissive_strength"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_ior", isSelected: () => extensionStates["KHR_materials_ior"].enabled, onSelect: (value) => (extensionStates["KHR_materials_ior"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_sheen", isSelected: () => extensionStates["KHR_materials_sheen"].enabled, onSelect: (value) => (extensionStates["KHR_materials_sheen"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_specular", isSelected: () => extensionStates["KHR_materials_specular"].enabled, onSelect: (value) => (extensionStates["KHR_materials_specular"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_unlit", isSelected: () => extensionStates["KHR_materials_unlit"].enabled, onSelect: (value) => (extensionStates["KHR_materials_unlit"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_variants", isSelected: () => extensionStates["KHR_materials_variants"].enabled, onSelect: (value) => (extensionStates["KHR_materials_variants"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_transmission", isSelected: () => extensionStates["KHR_materials_transmission"].enabled, onSelect: (value) => (extensionStates["KHR_materials_transmission"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_translucency", isSelected: () => extensionStates["KHR_materials_translucency"].enabled, onSelect: (value) => (extensionStates["KHR_materials_translucency"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_volume", isSelected: () => extensionStates["KHR_materials_volume"].enabled, onSelect: (value) => (extensionStates["KHR_materials_volume"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_mesh_quantization", isSelected: () => extensionStates["KHR_mesh_quantization"].enabled, onSelect: (value) => (extensionStates["KHR_mesh_quantization"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_lights_punctual", isSelected: () => extensionStates["KHR_lights_punctual"].enabled, onSelect: (value) => (extensionStates["KHR_lights_punctual"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_texture_basisu", isSelected: () => extensionStates["KHR_texture_basisu"].enabled, onSelect: (value) => (extensionStates["KHR_texture_basisu"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_texture_transform", isSelected: () => extensionStates["KHR_texture_transform"].enabled, onSelect: (value) => (extensionStates["KHR_texture_transform"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_xmp_json_ld", isSelected: () => extensionStates["KHR_xmp_json_ld"].enabled, onSelect: (value) => (extensionStates["KHR_xmp_json_ld"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "MSFT_lod", isSelected: () => extensionStates["MSFT_lod"].enabled, onSelect: (value) => (extensionStates["MSFT_lod"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { label: "Maximum LODs", target: extensionStates["MSFT_lod"], propertyName: "maxLODsToLoad", additionalClass: "gltf-extension-property", isInteger: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "MSFT_minecraftMesh", isSelected: () => extensionStates["MSFT_minecraftMesh"].enabled, onSelect: (value) => (extensionStates["MSFT_minecraftMesh"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "MSFT_sRGBFactors", isSelected: () => extensionStates["MSFT_sRGBFactors"].enabled, onSelect: (value) => (extensionStates["MSFT_sRGBFactors"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "MSFT_audio_emitter", isSelected: () => extensionStates["MSFT_audio_emitter"].enabled, onSelect: (value) => (extensionStates["MSFT_audio_emitter"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_messageLineComponent__WEBPACK_IMPORTED_MODULE_6__.MessageLineComponent, { text: "You need to reload your file to see these changes" })] })), this.props.globalState.validationResults && this.renderValidation()] }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GLTF LOADER", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Always compute bounding box", target: loaderState, propertyName: "alwaysComputeBoundingBox" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Always compute skeleton root node", target: loaderState, propertyName: "alwaysComputeSkeletonRootNode" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Animation start mode", options: animationStartMode, target: loaderState, propertyName: "animationStartMode" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Capture performance counters", target: loaderState, propertyName: "capturePerformanceCounters" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Compile materials", target: loaderState, propertyName: "compileMaterials" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Compile shadow generators", target: loaderState, propertyName: "compileShadowGenerators" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Coordinate system", options: coordinateSystemMode, target: loaderState, propertyName: "coordinateSystemMode" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Create instances", target: loaderState, propertyName: "createInstances" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Enable logging", target: loaderState, propertyName: "loggingEnabled" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Load all materials", target: loaderState, propertyName: "loadAllMaterials" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Target FPS", target: loaderState, propertyName: "targetFps", isInteger: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Transparency as coverage", target: loaderState, propertyName: "transparencyAsCoverage" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Use clip plane", target: loaderState, propertyName: "useClipPlane" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Use sRGB buffers", target: loaderState, propertyName: "useSRGBBuffers" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Validate", target: loaderState, propertyName: "validate" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_messageLineComponent__WEBPACK_IMPORTED_MODULE_6__.MessageLineComponent, { text: "You need to reload your file to see these changes" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GLTF EXTENSIONS", closed: true, selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "EXT_lights_image_based", isSelected: () => extensionStates["EXT_lights_image_based"].enabled, onSelect: (value) => (extensionStates["EXT_lights_image_based"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "EXT_mesh_gpu_instancing", isSelected: () => extensionStates["EXT_mesh_gpu_instancing"].enabled, onSelect: (value) => (extensionStates["EXT_mesh_gpu_instancing"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "EXT_texture_webp", isSelected: () => extensionStates["EXT_texture_webp"].enabled, onSelect: (value) => (extensionStates["EXT_texture_webp"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_draco_mesh_compression", isSelected: () => extensionStates["KHR_draco_mesh_compression"].enabled, onSelect: (value) => (extensionStates["KHR_draco_mesh_compression"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_pbrSpecularGloss...", isSelected: () => extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled, onSelect: (value) => (extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_clearcoat", isSelected: () => extensionStates["KHR_materials_clearcoat"].enabled, onSelect: (value) => (extensionStates["KHR_materials_clearcoat"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_iridescence", isSelected: () => extensionStates["KHR_materials_iridescence"].enabled, onSelect: (value) => (extensionStates["KHR_materials_iridescence"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_emissive_strength", isSelected: () => extensionStates["KHR_materials_emissive_strength"].enabled, onSelect: (value) => (extensionStates["KHR_materials_emissive_strength"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_ior", isSelected: () => extensionStates["KHR_materials_ior"].enabled, onSelect: (value) => (extensionStates["KHR_materials_ior"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_sheen", isSelected: () => extensionStates["KHR_materials_sheen"].enabled, onSelect: (value) => (extensionStates["KHR_materials_sheen"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_specular", isSelected: () => extensionStates["KHR_materials_specular"].enabled, onSelect: (value) => (extensionStates["KHR_materials_specular"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_unlit", isSelected: () => extensionStates["KHR_materials_unlit"].enabled, onSelect: (value) => (extensionStates["KHR_materials_unlit"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_variants", isSelected: () => extensionStates["KHR_materials_variants"].enabled, onSelect: (value) => (extensionStates["KHR_materials_variants"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_transmission", isSelected: () => extensionStates["KHR_materials_transmission"].enabled, onSelect: (value) => (extensionStates["KHR_materials_transmission"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_translucency", isSelected: () => extensionStates["KHR_materials_translucency"].enabled, onSelect: (value) => (extensionStates["KHR_materials_translucency"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_materials_volume", isSelected: () => extensionStates["KHR_materials_volume"].enabled, onSelect: (value) => (extensionStates["KHR_materials_volume"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_mesh_quantization", isSelected: () => extensionStates["KHR_mesh_quantization"].enabled, onSelect: (value) => (extensionStates["KHR_mesh_quantization"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_lights_punctual", isSelected: () => extensionStates["KHR_lights_punctual"].enabled, onSelect: (value) => (extensionStates["KHR_lights_punctual"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_texture_basisu", isSelected: () => extensionStates["KHR_texture_basisu"].enabled, onSelect: (value) => (extensionStates["KHR_texture_basisu"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_texture_transform", isSelected: () => extensionStates["KHR_texture_transform"].enabled, onSelect: (value) => (extensionStates["KHR_texture_transform"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "KHR_xmp_json_ld", isSelected: () => extensionStates["KHR_xmp_json_ld"].enabled, onSelect: (value) => (extensionStates["KHR_xmp_json_ld"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "MSFT_lod", isSelected: () => extensionStates["MSFT_lod"].enabled, onSelect: (value) => (extensionStates["MSFT_lod"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Maximum LODs", target: extensionStates["MSFT_lod"], propertyName: "maxLODsToLoad", additionalClass: "gltf-extension-property", isInteger: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "MSFT_minecraftMesh", isSelected: () => extensionStates["MSFT_minecraftMesh"].enabled, onSelect: (value) => (extensionStates["MSFT_minecraftMesh"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "MSFT_sRGBFactors", isSelected: () => extensionStates["MSFT_sRGBFactors"].enabled, onSelect: (value) => (extensionStates["MSFT_sRGBFactors"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "MSFT_audio_emitter", isSelected: () => extensionStates["MSFT_audio_emitter"].enabled, onSelect: (value) => (extensionStates["MSFT_audio_emitter"].enabled = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_messageLineComponent__WEBPACK_IMPORTED_MODULE_6__.MessageLineComponent, { text: "You need to reload your file to see these changes" })] })), this.props.globalState.validationResults && this.renderValidation()] }));
     }
 }
 
@@ -64752,15 +64752,15 @@ class ToolsTabComponent extends _paneComponent__WEBPACK_IMPORTED_MODULE_1__.Pane
             { label: "Sync", value: core_Misc_videoRecorder__WEBPACK_IMPORTED_MODULE_4__.SceneLoaderAnimationGroupLoadingMode.Sync },
             { label: "NoSync", value: core_Misc_videoRecorder__WEBPACK_IMPORTED_MODULE_4__.SceneLoaderAnimationGroupLoadingMode.NoSync },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "CAPTURE", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: "Screenshot", onClick: () => this.captureScreenshot() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: this.state.tag, onClick: () => this.recordVideo() })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "CAPTURE WITH RTT", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: "Capture", onClick: () => this.captureRender() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "vector3Line" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "Precision", target: this._screenShotSize, propertyName: "precision", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "Use Width/Height", onSelect: (value) => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "CAPTURE", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: "Screenshot", onClick: () => this.captureScreenshot() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: this.state.tag, onClick: () => this.recordVideo() })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "CAPTURE WITH RTT", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: "Capture", onClick: () => this.captureRender() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "vector3Line" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { lockObject: this._lockObject, label: "Precision", target: this._screenShotSize, propertyName: "precision", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "Use Width/Height", onSelect: (value) => {
                                         this._useWidthHeight = value;
                                         this.forceUpdate();
-                                    }, isSelected: () => this._useWidthHeight }), this._useWidthHeight && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_8__.NumericInputComponent, { lockObject: this._lockObject, label: "Width", precision: 0, step: 1, value: this._screenShotSize.width ? this._screenShotSize.width : 512, onChange: (value) => (this._screenShotSize.width = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_8__.NumericInputComponent, { lockObject: this._lockObject, label: "Height", precision: 0, step: 1, value: this._screenShotSize.height ? this._screenShotSize.height : 512, onChange: (value) => (this._screenShotSize.height = value) })] })))] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GIF", selection: this.props.globalState }, { children: [this._crunchingGIF && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_messageLineComponent__WEBPACK_IMPORTED_MODULE_13__.MessageLineComponent, { text: "Creating the GIF file..." }), !this._crunchingGIF && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: this._gifRecorder ? "Stop" : "Record", onClick: () => this.recordGIF() }), !this._crunchingGIF && !this._gifRecorder && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "Resolution", isInteger: true, target: this._gifOptions, propertyName: "width" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "Frequency (ms)", isInteger: true, target: this._gifOptions, propertyName: "frequency" })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "REPLAY", selection: this.props.globalState }, { children: [!this.props.globalState.recorder.isRecording && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: "Start recording", onClick: () => this.startRecording() }), this.props.globalState.recorder.isRecording && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_indentedTextLineComponent__WEBPACK_IMPORTED_MODULE_15__.IndentedTextLineComponent, { value: "Record in progress" }), this.props.globalState.recorder.isRecording && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: "Generate delta file", onClick: () => this.exportReplay() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_14__.FileButtonLineComponent, { label: `Apply delta file`, onClick: (file) => this.applyDelta(file), accept: ".json" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SCENE IMPORT", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_fileMultipleButtonLineComponent__WEBPACK_IMPORTED_MODULE_11__.FileMultipleButtonLineComponent, { label: "Import animations", accept: "gltf", onClick: (evt) => this.importAnimations(evt) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "Overwrite animations", target: sceneImportDefaults, propertyName: "overwriteAnimations", onSelect: (value) => {
+                                    }, isSelected: () => this._useWidthHeight }), this._useWidthHeight && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_8__.NumericInputComponent, { lockObject: this._lockObject, label: "Width", precision: 0, step: 1, value: this._screenShotSize.width ? this._screenShotSize.width : 512, onChange: (value) => (this._screenShotSize.width = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_8__.NumericInputComponent, { lockObject: this._lockObject, label: "Height", precision: 0, step: 1, value: this._screenShotSize.height ? this._screenShotSize.height : 512, onChange: (value) => (this._screenShotSize.height = value) })] })))] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GIF", selection: this.props.globalState }, { children: [this._crunchingGIF && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_messageLineComponent__WEBPACK_IMPORTED_MODULE_13__.MessageLineComponent, { text: "Creating the GIF file..." }), !this._crunchingGIF && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: this._gifRecorder ? "Stop" : "Record", onClick: () => this.recordGIF() }), !this._crunchingGIF && !this._gifRecorder && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { lockObject: this._lockObject, label: "Resolution", isInteger: true, target: this._gifOptions, propertyName: "width" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { lockObject: this._lockObject, label: "Frequency (ms)", isInteger: true, target: this._gifOptions, propertyName: "frequency" })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "REPLAY", selection: this.props.globalState }, { children: [!this.props.globalState.recorder.isRecording && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: "Start recording", onClick: () => this.startRecording() }), this.props.globalState.recorder.isRecording && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_indentedTextLineComponent__WEBPACK_IMPORTED_MODULE_15__.IndentedTextLineComponent, { value: "Record in progress" }), this.props.globalState.recorder.isRecording && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: "Generate delta file", onClick: () => this.exportReplay() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_14__.FileButtonLineComponent, { label: `Apply delta file`, onClick: (file) => this.applyDelta(file), accept: ".json" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SCENE IMPORT", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_fileMultipleButtonLineComponent__WEBPACK_IMPORTED_MODULE_11__.FileMultipleButtonLineComponent, { label: "Import animations", accept: "gltf", onClick: (evt) => this.importAnimations(evt) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "Overwrite animations", target: sceneImportDefaults, propertyName: "overwriteAnimations", onSelect: (value) => {
                                 sceneImportDefaults["overwriteAnimations"] = value;
                                 this.forceUpdate();
                             } }), sceneImportDefaults["overwriteAnimations"] === false && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_12__.OptionsLineComponent, { label: "Animation merge mode", options: animationGroupLoadingModes, target: sceneImportDefaults, propertyName: "animationGroupLoadingMode" }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SCENE EXPORT", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: "Export to Babylon", onClick: () => this.exportBabylon() }), !scene.getEngine().premultipliedAlpha && scene.environmentTexture && scene.environmentTexture._prefiltered && scene.activeCamera && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: "Generate .env texture", onClick: () => this.createEnvTexture() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_12__.OptionsLineComponent, { label: "Image type", options: envExportImageTypes, target: this._envOptions, propertyName: "imageTypeIndex", onSelect: () => {
                                         this.forceUpdate();
-                                    } }), this._envOptions.imageTypeIndex > 0 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { label: "Quality", isInteger: false, min: 0, max: 1, target: this._envOptions, propertyName: "imageQuality" }))] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GLTF EXPORT", selection: this.props.globalState }, { children: [this._isExportingGltf && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_10__.TextLineComponent, { label: "Please wait..exporting", ignoreValue: true }), !this._isExportingGltf && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "Export Disabled Nodes", isSelected: () => this._gltfExportOptions.exportDisabledNodes, onSelect: (value) => (this._gltfExportOptions.exportDisabledNodes = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "Export Skybox", isSelected: () => this._gltfExportOptions.exportSkyboxes, onSelect: (value) => (this._gltfExportOptions.exportSkyboxes = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "Export Cameras", isSelected: () => this._gltfExportOptions.exportCameras, onSelect: (value) => (this._gltfExportOptions.exportCameras = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "Export Lights", isSelected: () => this._gltfExportOptions.exportLights, onSelect: (value) => (this._gltfExportOptions.exportLights = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: "Export to GLB", onClick: () => this.exportGLTF() })] }))] })), loaders_glTF_glTFFileLoader__WEBPACK_IMPORTED_MODULE_19__.GLTFFileLoader && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_tools_gltfComponent__WEBPACK_IMPORTED_MODULE_5__.GLTFComponent, { scene: scene, globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "REFLECTOR", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_16__.TextInputLineComponent, { lockObject: this._lockObject, label: "Hostname", target: this, propertyName: "_reflectorHostname" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { lockObject: this._lockObject, label: "Port", target: this, propertyName: "_reflectorPort", isInteger: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: "Connect", onClick: () => this.connectReflector() })] }))] })));
+                                    } }), this._envOptions.imageTypeIndex > 0 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { lockObject: this._lockObject, label: "Quality", isInteger: false, min: 0, max: 1, target: this._envOptions, propertyName: "imageQuality" }))] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GLTF EXPORT", selection: this.props.globalState }, { children: [this._isExportingGltf && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_10__.TextLineComponent, { label: "Please wait..exporting", ignoreValue: true }), !this._isExportingGltf && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "Export Disabled Nodes", isSelected: () => this._gltfExportOptions.exportDisabledNodes, onSelect: (value) => (this._gltfExportOptions.exportDisabledNodes = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "Export Skybox", isSelected: () => this._gltfExportOptions.exportSkyboxes, onSelect: (value) => (this._gltfExportOptions.exportSkyboxes = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "Export Cameras", isSelected: () => this._gltfExportOptions.exportCameras, onSelect: (value) => (this._gltfExportOptions.exportCameras = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "Export Lights", isSelected: () => this._gltfExportOptions.exportLights, onSelect: (value) => (this._gltfExportOptions.exportLights = value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: "Export to GLB", onClick: () => this.exportGLTF() })] }))] })), loaders_glTF_glTFFileLoader__WEBPACK_IMPORTED_MODULE_19__.GLTFFileLoader && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_tools_gltfComponent__WEBPACK_IMPORTED_MODULE_5__.GLTFComponent, { lockObject: this._lockObject, scene: scene, globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(shared_ui_components_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "REFLECTOR", selection: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_16__.TextInputLineComponent, { lockObject: this._lockObject, label: "Hostname", target: this, propertyName: "_reflectorHostname" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { lockObject: this._lockObject, label: "Port", target: this, propertyName: "_reflectorPort", isInteger: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_3__.ButtonLineComponent, { label: "Connect", onClick: () => this.connectReflector() })] }))] })));
     }
 }
 
@@ -69719,7 +69719,12 @@ class HexColor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         }
         this.setState({ hex: valueString });
         if (valueString.length !== this.props.expectedLength) {
-            return;
+            if (this.props.expectedLength === 8 && valueString.length === 6) {
+                valueString = valueString + "FF";
+            }
+            else {
+                return;
+            }
         }
         this.props.onChange("#" + valueString);
     }
@@ -69976,10 +69981,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ "../../../../node_modules/@fortawesome/react-fontawesome/index.es.js");
 /* harmony import */ var _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @fortawesome/free-solid-svg-icons */ "../../../../node_modules/@fortawesome/free-solid-svg-icons/index.es.js");
 /* harmony import */ var _colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./colorPickerComponent */ "../../../dev/sharedUiComponents/dist/lines/colorPickerComponent.js");
-/* harmony import */ var _textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./textInputLineComponent */ "../../../dev/sharedUiComponents/dist/lines/textInputLineComponent.js");
-/* harmony import */ var _targetsProxy__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./targetsProxy */ "../../../dev/sharedUiComponents/dist/lines/targetsProxy.js");
-/* harmony import */ var _copy_svg__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./copy.svg */ "../../../dev/sharedUiComponents/dist/lines/copy.svg");
-
+/* harmony import */ var _targetsProxy__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./targetsProxy */ "../../../dev/sharedUiComponents/dist/lines/targetsProxy.js");
+/* harmony import */ var _copy_svg__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./copy.svg */ "../../../dev/sharedUiComponents/dist/lines/copy.svg");
 
 
 
@@ -70019,7 +70022,7 @@ class ColorLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         if (!property)
             return emptyColor;
         if (typeof property === "string") {
-            if (property === _targetsProxy__WEBPACK_IMPORTED_MODULE_8__.conflictingValuesPlaceholder) {
+            if (property === _targetsProxy__WEBPACK_IMPORTED_MODULE_7__.conflictingValuesPlaceholder) {
                 return emptyColor;
             }
             return this._convertToColor(property);
@@ -70121,9 +70124,7 @@ class ColorLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         const chevron = this.state.isExpanded ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__.FontAwesomeIcon, { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__.faMinus }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__.FontAwesomeIcon, { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__.faPlus });
         return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color3Line" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "firstLine" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "label", title: this.props.label }, { children: this.props.label })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color3" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__.ColorPickerLineComponent, { lockObject: this.props.lockObject, linearHint: this.props.isLinear, value: this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color, onColorChanged: (colorString) => {
                                     this.setColorFromString(colorString);
-                                } }) })), this.props.lockObject && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", value: this.state.color.toHexString(), onChange: (newValue) => {
-                                this.setColorFromString(newValue);
-                            }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "copy hoverIcon", onClick: () => this.copyToClipboard(), title: "Copy to clipboard" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _copy_svg__WEBPACK_IMPORTED_MODULE_9__, alt: "Copy" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand" }, { children: chevron }))] })), this.state.isExpanded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "r", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "g", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "b", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "a", value: this.state.color.a, onChange: (value) => this.updateStateA(value) }))] })))] })));
+                                } }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "copy hoverIcon", onClick: () => this.copyToClipboard(), title: "Copy to clipboard" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _copy_svg__WEBPACK_IMPORTED_MODULE_8__, alt: "Copy" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand" }, { children: chevron }))] })), this.state.isExpanded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "r", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "g", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "b", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "a", value: this.state.color.a, onChange: (value) => this.updateStateA(value) }))] })))] })));
     }
 }
 
@@ -70465,7 +70466,7 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                                             this.props.onDragStop(valueAsNumber);
                                         }
                                         this.setState({ dragging: newDragging });
-                                    } }))] })), this.props.unit] }))), this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { label: this.props.label, minimum: 0, maximum: 360, step: 0.1, directValue: core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Tools.ToDegrees(valueAsNumber), onChange: (value) => this.updateValue(core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Tools.ToRadians(value).toString()) }))] }));
+                                    } }))] })), this.props.unit] }))), this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { lockObject: this.props.lockObject, label: this.props.label, minimum: 0, maximum: 360, step: 0.1, directValue: core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Tools.ToDegrees(valueAsNumber), onChange: (value) => this.updateValue(core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Tools.ToRadians(value).toString()) }))] }));
     }
 }
 
@@ -71300,7 +71301,7 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
         }
         return 0;
     }
-    updateValue(value) {
+    updateValue(value, valueToValidate) {
         if (this.props.numbersOnly) {
             if (/[^0-9.\p\x%-]/g.test(value)) {
                 return;
@@ -71328,8 +71329,8 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
         }
         this._localChange = true;
         const store = this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName];
-        if (this.props.validator) {
-            if (this.props.validator(value) == false) {
+        if (this.props.validator && valueToValidate) {
+            if (this.props.validator(valueToValidate) == false) {
                 value = store;
             }
         }
@@ -71376,15 +71377,15 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
                             }
                             this.updateValue(this.state.value);
                         }, onBlur: (evt) => {
-                            this.updateValue(evt.target.value);
+                            this.updateValue(evt.target.value, evt.target.value);
                             if (this.props.lockObject) {
                                 this.props.lockObject.lock = false;
                             }
-                        } }) })), !this.props.multilines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: `value${this.props.noUnderline === true ? " noUnderline" : ""}${this.props.arrows ? " hasArrows" : ""}${this.state.dragging ? " dragging" : ""}` }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { value: value, onBlur: () => {
+                        } }) })), !this.props.multilines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: `value${this.props.noUnderline === true ? " noUnderline" : ""}${this.props.arrows ? " hasArrows" : ""}${this.state.dragging ? " dragging" : ""}` }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { value: value, onBlur: (evt) => {
                                 if (this.props.lockObject) {
                                     this.props.lockObject.lock = false;
                                 }
-                                this.updateValue((this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName]) || "");
+                                this.updateValue((this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName]) || "", evt.target.value);
                             }, onFocus: () => {
                                 if (this.props.lockObject) {
                                     this.props.lockObject.lock = true;
@@ -71641,7 +71642,7 @@ class Vector3LineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
     render() {
         const chevron = this.state.isExpanded ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_3__.FontAwesomeIcon, { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_4__.faMinus }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_3__.FontAwesomeIcon, { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_4__.faPlus });
         return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "vector3Line" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "firstLine" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "label", title: this.props.label }, { children: this.props.label })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "vector" }, { children: [!this.props.useEuler && `X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}, Z: ${this.state.value.z.toFixed(2)}`, this.props.useEuler &&
-                                    `X: ${core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.x).toFixed(2)}, Y: ${core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.y).toFixed(2)}, Z: ${core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.z).toFixed(2)}`] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand" }, { children: chevron }))] })), this.state.isExpanded && !this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { label: "x", lockObject: this.props.lockObject, step: this.props.step, value: this.state.value.x, onChange: (value) => this.updateStateX(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { label: "y", lockObject: this.props.lockObject, step: this.props.step, value: this.state.value.y, onChange: (value) => this.updateStateY(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { label: "z", lockObject: this.props.lockObject, step: this.props.step, value: this.state.value.z, onChange: (value) => this.updateStateZ(value) })] }))), this.state.isExpanded && this.props.useEuler && !this.props.noSlider && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { margin: true, label: "x", minimum: 0, maximum: 360, step: 0.1, directValue: core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.x), onChange: (value) => this.updateStateX(core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToRadians(value)) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { margin: true, label: "y", minimum: 0, maximum: 360, step: 0.1, directValue: core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.y), onChange: (value) => this.updateStateY(core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToRadians(value)) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { margin: true, label: "z", minimum: 0, maximum: 360, step: 0.1, directValue: core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.z), onChange: (value) => this.updateStateZ(core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToRadians(value)) })] }))), this.state.isExpanded && this.props.useEuler && this.props.noSlider && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "x", step: this.props.step, value: core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.x), onChange: (value) => this.updateStateX(core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToRadians(value)) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "y", step: this.props.step, value: core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.y), onChange: (value) => this.updateStateY(core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToRadians(value)) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "z", step: this.props.step, value: core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.z), onChange: (value) => this.updateStateZ(core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToRadians(value)) })] })))] })));
+                                    `X: ${core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.x).toFixed(2)}, Y: ${core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.y).toFixed(2)}, Z: ${core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.z).toFixed(2)}`] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand" }, { children: chevron }))] })), this.state.isExpanded && !this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { label: "x", lockObject: this.props.lockObject, step: this.props.step, value: this.state.value.x, onChange: (value) => this.updateStateX(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { label: "y", lockObject: this.props.lockObject, step: this.props.step, value: this.state.value.y, onChange: (value) => this.updateStateY(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { label: "z", lockObject: this.props.lockObject, step: this.props.step, value: this.state.value.z, onChange: (value) => this.updateStateZ(value) })] }))), this.state.isExpanded && this.props.useEuler && !this.props.noSlider && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, margin: true, label: "x", minimum: 0, maximum: 360, step: 0.1, directValue: core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.x), onChange: (value) => this.updateStateX(core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToRadians(value)) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, margin: true, label: "y", minimum: 0, maximum: 360, step: 0.1, directValue: core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.y), onChange: (value) => this.updateStateY(core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToRadians(value)) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, margin: true, label: "z", minimum: 0, maximum: 360, step: 0.1, directValue: core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.z), onChange: (value) => this.updateStateZ(core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToRadians(value)) })] }))), this.state.isExpanded && this.props.useEuler && this.props.noSlider && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "x", step: this.props.step, value: core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.x), onChange: (value) => this.updateStateX(core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToRadians(value)) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "y", step: this.props.step, value: core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.y), onChange: (value) => this.updateStateY(core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToRadians(value)) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "z", step: this.props.step, value: core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToDegrees(this.state.value.z), onChange: (value) => this.updateStateZ(core_Misc_tools__WEBPACK_IMPORTED_MODULE_6__.Tools.ToRadians(value)) })] })))] })));
     }
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -72000,7 +72001,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
             { label: "Bottom", value: gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__.Control.VERTICAL_ALIGNMENT_BOTTOM },
             { label: "Center", value: gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_4__.Control.VERTICAL_ALIGNMENT_CENTER },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Class", value: control.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Unique ID", value: control.uniqueId.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Alpha", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), control.color !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Color", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), control.background !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Background", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "background", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "ZIndex", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "zIndex", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), this.renderGridInformation(control), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "ALIGNMENT" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__.OptionsLineComponent, { label: "Horizontal", options: horizontalOptions, target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "horizontalAlignment", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__.OptionsLineComponent, { label: "Vertical", options: verticalOptions, target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "verticalAlignment", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "POSITION" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Left", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "left", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Top", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "top", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Width", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "width", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Height", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "height", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding left", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "paddingLeft", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding top", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "paddingTop", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding right", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "paddingRight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding bottom", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "paddingBottom", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "TRANSFORMATION", closed: true }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "ScaleX", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "scaleX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "ScaleY", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "scaleY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Rotation", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "rotation", minimum: 0, maximum: 2 * Math.PI, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Transform center X", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "transformCenterX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Transform center Y", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "transformCenterY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "FONT", closed: true }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Family", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "fontFamily", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Size", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "fontSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Weight", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "fontWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Style", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "fontStyle", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SHADOWS", closed: true }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Color", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "shadowColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Offset X", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "shadowOffsetX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Offset Y", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "shadowOffsetY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Blur", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "shadowBlur", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Class", value: control.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "Unique ID", value: control.uniqueId.toString() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Alpha", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), control.color !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Color", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), control.background !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Background", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "background", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "ZIndex", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "zIndex", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), this.renderGridInformation(control), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "ALIGNMENT" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__.OptionsLineComponent, { label: "Horizontal", options: horizontalOptions, target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "horizontalAlignment", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_8__.OptionsLineComponent, { label: "Vertical", options: verticalOptions, target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "verticalAlignment", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "POSITION" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Left", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "left", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Top", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "top", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Width", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "width", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Height", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "height", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding left", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "paddingLeft", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding top", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "paddingTop", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding right", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "paddingRight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding bottom", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "paddingBottom", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "TRANSFORMATION", closed: true }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "ScaleX", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "scaleX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "ScaleY", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "scaleY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Rotation", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "rotation", minimum: 0, maximum: 2 * Math.PI, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Transform center X", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "transformCenterX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Transform center Y", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "transformCenterY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "FONT", closed: true }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Family", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "fontFamily", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Size", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "fontSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Weight", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "fontWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Style", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "fontStyle", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SHADOWS", closed: true }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Color", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "shadowColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Offset X", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "shadowOffsetX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Offset Y", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "shadowOffsetY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Blur", target: (0,_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(controls, this.props.onPropertyChangedObservable), propertyName: "shadowBlur", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] }));
     }
 }
 
@@ -72252,7 +72253,7 @@ class InputTextPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.
     }
     render() {
         const inputText = this.props.inputText;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_tabs_propertyGrids_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, control: inputText, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "INPUTTEXT" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Text", target: inputText, propertyName: "text", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Prompt", target: inputText, propertyName: "promptMessage", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Max width", target: inputText, propertyName: "maxWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Highlight color", target: inputText, propertyName: "textHighlightColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Highligher opacity", minimum: 0, maximum: 1, step: 0.01, target: inputText, propertyName: "highligherOpacity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "On focus select all", target: inputText, propertyName: "onFocusSelectAll", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Focused background", target: inputText, propertyName: "focusedBackground", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Max width", target: inputText, propertyName: "maxWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Margin", target: inputText, propertyName: "margin", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Auto stretch width", target: inputText, propertyName: "autoStretchWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Thickness", target: inputText, propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Placeholder text", target: inputText, propertyName: "placeholderText", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Placeholder color", target: inputText, propertyName: "placeholderColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_tabs_propertyGrids_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, control: inputText, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_lines_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__.LineContainerComponent, Object.assign({ title: "INPUTTEXT" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Text", target: inputText, propertyName: "text", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Prompt", target: inputText, propertyName: "promptMessage", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Max width", target: inputText, propertyName: "maxWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Highlight color", target: inputText, propertyName: "textHighlightColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Highligher opacity", minimum: 0, maximum: 1, step: 0.01, target: inputText, propertyName: "highligherOpacity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "On focus select all", target: inputText, propertyName: "onFocusSelectAll", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Focused background", target: inputText, propertyName: "focusedBackground", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Max width", target: inputText, propertyName: "maxWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Margin", target: inputText, propertyName: "margin", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "Auto stretch width", target: inputText, propertyName: "autoStretchWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Thickness", target: inputText, propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Placeholder text", target: inputText, propertyName: "placeholderText", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "Placeholder color", target: inputText, propertyName: "placeholderColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }))] })));
     }
 }