@babylonjs/node-editor 5.19.0 → 5.22.0

package/dist/babylon.nodeEditor.max.js

@@ -171,12 +171,47 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, "#node-editor-graph-root {\n  display: grid;\n  grid-template-rows: calc(100% - 120px) 120px;\n  height: 100%;\n  width: 100%;\n  background: #464646;\n  font: 14px \"acumin-pro\"; }\n  #node-editor-graph-root.popup {\n    grid-template-columns: 100%;\n    overflow: hidden; }\n  #node-editor-graph-root .wait-screen {\n    display: grid;\n    justify-content: center;\n    align-content: center;\n    height: 100%;\n    width: 100%;\n    background: #464646;\n    opacity: 0.95;\n    color: white;\n    font: 24px \"acumin-pro\";\n    position: absolute;\n    top: 0;\n    left: 0; }\n    #node-editor-graph-root .wait-screen.hidden {\n      visibility: hidden; }\n  #node-editor-graph-root #nodeList {\n    grid-row: 1 / span 2;\n    grid-column: 1; }\n  #node-editor-graph-root #leftGrab {\n    grid-row: 1 / span 2;\n    grid-column: 2;\n    cursor: ew-resize; }\n  #node-editor-graph-root #rightGrab {\n    grid-row: 1 / span 2;\n    grid-column: 4;\n    cursor: ew-resize; }\n  #node-editor-graph-root .diagram-container {\n    grid-row: 1;\n    grid-column: 3;\n    background: #5f5b60;\n    width: 100%;\n    height: 100%; }\n    #node-editor-graph-root .diagram-container .diagram {\n      display: none;\n      width: 100%;\n      height: 100%; }\n  #node-editor-graph-root .right-panel {\n    grid-row: 1 / span 2;\n    grid-column: 5;\n    display: grid;\n    grid-template-rows: 1fr 40px auto 40px;\n    grid-template-columns: 100%;\n    height: 100%;\n    overflow-y: auto; }\n  #node-editor-graph-root #propertyTab {\n    grid-row: 1;\n    grid-column: 1; }\n  #node-editor-graph-root .button {\n    display: grid;\n    justify-content: center;\n    align-content: center;\n    height: auto;\n    width: calc(100% / 7);\n    cursor: pointer; }\n    #node-editor-graph-root .button:hover {\n      background: #337ab7;\n      color: white;\n      opacity: 0.8; }\n    #node-editor-graph-root .button.selected {\n      background: #337ab7;\n      color: white; }\n    #node-editor-graph-root .button.align {\n      justify-content: stretch;\n      text-align: center; }\n  #node-editor-graph-root #preview-mesh-bar {\n    grid-row: 2;\n    grid-column: 1;\n    display: grid;\n    grid-template-columns: auto 1fr 40px 40px 40px;\n    align-items: center;\n    font-size: 18px;\n    background-color: #555555; }\n    #node-editor-graph-root #preview-mesh-bar #file-picker {\n      display: none; }\n    #node-editor-graph-root #preview-mesh-bar .listLine {\n      grid-column: 1;\n      height: 40px;\n      display: grid;\n      grid-template-columns: 0px 1fr; }\n      #node-editor-graph-root #preview-mesh-bar .listLine .label {\n        grid-column: 1;\n        display: flex;\n        align-items: center;\n        font-size: 14px; }\n      #node-editor-graph-root #preview-mesh-bar .listLine .options {\n        grid-column: 2;\n        display: flex;\n        align-items: center;\n        margin-left: 5px; }\n        #node-editor-graph-root #preview-mesh-bar .listLine .options select {\n          width: 115px; }\n    #node-editor-graph-root #preview-mesh-bar .button {\n      color: #ffffff;\n      width: 40px;\n      height: 40px;\n      transform-origin: 50% 50%; }\n      #node-editor-graph-root #preview-mesh-bar .button:active {\n        transform: scale(0.9); }\n      #node-editor-graph-root #preview-mesh-bar .button:hover {\n        background: #3f3461; }\n      #node-editor-graph-root #preview-mesh-bar .button.selected {\n        background: #9379e6; }\n      #node-editor-graph-root #preview-mesh-bar .button img {\n        height: 24px;\n        width: 24px; }\n    #node-editor-graph-root #preview-mesh-bar #play-button {\n      grid-column: 3; }\n    #node-editor-graph-root #preview-mesh-bar #color-picker-button {\n      grid-column: 4;\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: 100%; }\n      #node-editor-graph-root #preview-mesh-bar #color-picker-button img {\n        height: 24px;\n        width: 24px; }\n      #node-editor-graph-root #preview-mesh-bar #color-picker-button #color-picker-image {\n        padding-left: 7px;\n        padding-bottom: 38px; }\n      #node-editor-graph-root #preview-mesh-bar #color-picker-button #color-picker {\n        transform: scale(0);\n        grid-column: 1;\n        grid-row: 1; }\n      #node-editor-graph-root #preview-mesh-bar #color-picker-button #color-picker-label {\n        width: 100%;\n        background: transparent;\n        cursor: pointer; }\n    #node-editor-graph-root #preview-mesh-bar #preview-new-window {\n      grid-column: 5; }\n    #node-editor-graph-root #preview-mesh-bar select {\n      background-color: #a3a3a3;\n      color: #333333; }\n  #node-editor-graph-root #preview-config-bar {\n    grid-row: 4;\n    grid-column: 1;\n    display: grid;\n    grid-template-columns: 40px 40px 40px 1fr 40px 40px;\n    color: white;\n    align-items: center;\n    font-size: 18px; }\n    #node-editor-graph-root #preview-config-bar.extended {\n      grid-template-columns: 1fr; }\n    #node-editor-graph-root #preview-config-bar .listLine {\n      padding-left: 5px;\n      height: 30px;\n      display: grid;\n      grid-template-columns: 1fr auto; }\n      #node-editor-graph-root #preview-config-bar .listLine .label {\n        grid-column: 1;\n        display: flex;\n        align-items: center;\n        font-size: 14px; }\n      #node-editor-graph-root #preview-config-bar .listLine .options {\n        grid-column: 2;\n        display: flex;\n        align-items: center;\n        margin-right: 5px; }\n        #node-editor-graph-root #preview-config-bar .listLine .options select {\n          width: 115px; }\n    #node-editor-graph-root #preview-config-bar .button {\n      width: 40px;\n      grid-row: 1;\n      height: 40px;\n      transform-origin: 50% 50%; }\n      #node-editor-graph-root #preview-config-bar .button:hover {\n        background: #3f3461; }\n      #node-editor-graph-root #preview-config-bar .button.selected {\n        background: #9379e6; }\n      #node-editor-graph-root #preview-config-bar .button:active {\n        transform: scale(0.9); }\n      #node-editor-graph-root #preview-config-bar .button img {\n        height: auto;\n        width: 100%; }\n      #node-editor-graph-root #preview-config-bar .button.back-face {\n        grid-column: 6; }\n      #node-editor-graph-root #preview-config-bar .button.depth-pass {\n        grid-column: 5 / 6; }\n      #node-editor-graph-root #preview-config-bar .button.hemispheric-light {\n        grid-column: 3 / 4; }\n      #node-editor-graph-root #preview-config-bar .button.direction-light-1 {\n        grid-column: 2 / 3; }\n      #node-editor-graph-root #preview-config-bar .button.direction-light-0 {\n        grid-column: 1 / 2; }\n  #node-editor-graph-root #preview {\n    border-top: 1px solid #555555;\n    grid-row: 3;\n    grid-column: 1;\n    width: 100%;\n    display: grid;\n    outline: 0 !important;\n    padding: 0 !important;\n    user-select: none;\n    overflow: hidden; }\n    #node-editor-graph-root #preview #preview-canvas {\n      width: 100%;\n      height: 100%;\n      outline: 0 !important;\n      padding: 0 !important;\n      grid-row: 1;\n      grid-column: 1; }\n    #node-editor-graph-root #preview .waitPanel {\n      width: 100%;\n      height: 100%;\n      grid-row: 1;\n      grid-column: 1;\n      color: white;\n      font-size: 18px;\n      align-content: center;\n      justify-content: center;\n      background: rgba(20, 20, 20, 0.95);\n      z-index: 10;\n      display: grid;\n      transition: opacity 250ms; }\n      #node-editor-graph-root #preview .waitPanel.hidden {\n        opacity: 0;\n        pointer-events: none; }\n  #node-editor-graph-root .blocker {\n    visibility: hidden;\n    position: absolute;\n    width: calc(100% - 40px);\n    height: 100%;\n    top: 0;\n    left: 0;\n    background: rgba(20, 20, 20, 0.95);\n    font-family: \"acumin-pro\";\n    color: white;\n    font-size: 24px;\n    display: grid;\n    align-content: center;\n    justify-content: center;\n    user-select: none;\n    padding: 20px;\n    text-align: center; }\n  #node-editor-graph-root #log-console {\n    grid-row: 2;\n    grid-column: 3; }\n\n.dialog-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.6);\n  display: grid;\n  font-family: \"acumin-pro\";\n  top: 0; }\n  .dialog-container .dialog {\n    align-self: center;\n    justify-self: center;\n    min-height: 140px;\n    max-width: 400px;\n    border-radius: 10px;\n    background: white;\n    display: grid;\n    grid-template-columns: 100%;\n    grid-template-rows: calc(100% - 50px) 50px; }\n    .dialog-container .dialog .dialog-message {\n      grid-row: 1;\n      grid-column: 1;\n      margin-top: 20px;\n      padding: 10px;\n      font-size: 18px;\n      color: black; }\n    .dialog-container .dialog .dialog-buttons {\n      grid-row: 2;\n      grid-column: 1;\n      display: grid;\n      grid-template-rows: 100%;\n      grid-template-columns: 100%;\n      color: white; }\n      .dialog-container .dialog .dialog-buttons .dialog-button-ok {\n        cursor: pointer;\n        justify-self: center;\n        background: green;\n        min-width: 80px;\n        justify-content: center;\n        display: grid;\n        align-content: center;\n        align-self: center;\n        height: 35px;\n        border-radius: 10px; }\n        .dialog-container .dialog .dialog-buttons .dialog-button-ok:hover {\n          opacity: 0.8; }\n        .dialog-container .dialog .dialog-buttons .dialog-button-ok.error {\n          background: red; }\n", "",{"version":3,"sources":["webpack://./../../../tools/nodeEditor/dist/main.scss"],"names":[],"mappings":"AAAA;EACI,aAAa;EACb,4CAA4C;EAC5C,YAAY;EACZ,WAAW;EACX,mBAAmB;EACnB,uBAAuB,EAAA;EAN3B;IASQ,2BAA2B;IAC3B,gBAAgB,EAAA;EAVxB;IAcQ,aAAa;IACb,uBAAuB;IACvB,qBAAqB;IACrB,YAAY;IACZ,WAAW;IACX,mBAAmB;IACnB,aAAa;IACb,YAAY;IACZ,uBAAuB;IACvB,kBAAkB;IAClB,MAAM;IACN,OAAO,EAAA;IAzBf;MA4BY,kBAAkB,EAAA;EA5B9B;IAiCQ,oBAAoB;IACpB,cAAc,EAAA;EAlCtB;IAsCQ,oBAAoB;IACpB,cAAc;IACd,iBAAiB,EAAA;EAxCzB;IA4CQ,oBAAoB;IACpB,cAAc;IACd,iBAAiB,EAAA;EA9CzB;IAkDQ,WAAW;IACX,cAAc;IACd,mBAAmB;IACnB,WAAW;IACX,YAAY,EAAA;IAtDpB;MAyDY,aAAa;MACb,WAAW;MACX,YAAY,EAAA;EA3DxB;IAgEQ,oBAAoB;IACpB,cAAc;IACd,aAAa;IACb,sCAAsC;IACtC,2BAA2B;IAC3B,YAAY;IACZ,gBAAgB,EAAA;EAtExB;IA0EQ,WAAW;IACX,cAAc,EAAA;EA3EtB;IA+EQ,aAAa;IACb,uBAAuB;IACvB,qBAAqB;IACrB,YAAY;IACZ,qBAAqB;IACrB,eAAe,EAAA;IApFvB;MAuFY,mBAA6B;MAC7B,YAAY;MACZ,YAAY,EAAA;IAzFxB;MA6FY,mBAA6B;MAC7B,YAAY,EAAA;IA9FxB;MAkGY,wBAAwB;MACxB,kBAAkB,EAAA;EAnG9B;IAwGQ,WAAW;IACX,cAAc;IACd,aAAa;IACb,8CAA8C;IAC9C,mBAAmB;IACnB,eAAe;IACf,yBAAyB,EAAA;IA9GjC;MAiHY,aAAa,EAAA;IAjHzB;MAqHY,cAAc;MACd,YAAY;MACZ,aAAa;MACb,8BAA8B,EAAA;MAxH1C;QA2HgB,cAAc;QACd,aAAa;QACb,mBAAmB;QACnB,eAAe,EAAA;MA9H/B;QAkIgB,cAAc;QAEd,aAAa;QACb,mBAAmB;QACnB,gBAAgB,EAAA;QAtIhC;UAyIoB,YAAY,EAAA;IAzIhC;MA+IY,cAAc;MACd,WAAW;MACX,YAAY;MACZ,yBAAyB,EAAA;MAlJrC;QAqJgB,qBAAqB,EAAA;MArJrC;QAyJgB,mBAAmB,EAAA;MAzJnC;QA6JgB,mBAAmB,EAAA;MA7JnC;QAiKgB,YAAY;QACZ,WAAW,EAAA;IAlK3B;MAuKY,cAAc,EAAA;IAvK1B;MA2KY,cAAc;MACd,aAAa;MACb,2BAA2B;MAC3B,wBAAwB,EAAA;MA9KpC;QAiLgB,YAAY;QACZ,WAAW,EAAA;MAlL3B;QAqLgB,iBAAiB;QACjB,oBAAoB,EAAA;MAtLpC;QA0LgB,mBAAmB;QACnB,cAAc;QACd,WAAW,EAAA;MA5L3B;QAgMgB,WAAW;QACX,uBAAuB;QACvB,eAAe,EAAA;IAlM/B;MAuMY,cAAc,EAAA;IAvM1B;MA2MY,yBAAyB;MACzB,cAAc,EAAA;EA5M1B;IAiNQ,WAAW;IACX,cAAc;IACd,aAAa;IACb,mDAAmD;IACnD,YAAY;IACZ,mBAAmB;IACnB,eAAe,EAAA;IAvNvB;MA0NY,0BAA0B,EAAA;IA1NtC;MA8NY,iBAAiB;MACjB,YAAY;MACZ,aAAa;MACb,+BAA+B,EAAA;MAjO3C;QAoOgB,cAAc;QACd,aAAa;QACb,mBAAmB;QACnB,eAAe,EAAA;MAvO/B;QA2OgB,cAAc;QAEd,aAAa;QACb,mBAAmB;QACnB,iBAAiB,EAAA;QA/OjC;UAkPoB,YAAY,EAAA;IAlPhC;MAwPY,WAAW;MACX,WAAW;MACX,YAAY;MACZ,yBAAyB,EAAA;MA3PrC;QA8PgB,mBAAmB,EAAA;MA9PnC;QAkQgB,mBAAmB,EAAA;MAlQnC;QAsQgB,qBAAqB,EAAA;MAtQrC;QA0QgB,YAAY;QACZ,WAAW,EAAA;MA3Q3B;QA+QgB,cAAc,EAAA;MA/Q9B;QAmRgB,kBAAkB,EAAA;MAnRlC;QAuRgB,kBAAkB,EAAA;MAvRlC;QA0RgB,kBAAkB,EAAA;MA1RlC;QA6RgB,kBAAkB,EAAA;EA7RlC;IAmSQ,6BAAqC;IACrC,WAAW;IACX,cAAc;IACd,WAAW;IACX,aAAa;IACb,qBAAqB;IACrB,qBAAqB;IACrB,iBAAiB;IACjB,gBAAgB,EAAA;IA3SxB;MA8SY,WAAW;MACX,YAAY;MACZ,qBAAqB;MACrB,qBAAqB;MACrB,WAAW;MACX,cAAc,EAAA;IAnT1B;MAuTY,WAAW;MACX,YAAY;MACZ,WAAW;MACX,cAAc;MACd,YAAY;MACZ,eAAe;MACf,qBAAqB;MACrB,uBAAuB;MACvB,kCAAkC;MAClC,WAAW;MACX,aAAa;MACb,yBAAyB,EAAA;MAlUrC;QAqUgB,UAAU;QACV,oBAAoB,EAAA;EAtUpC;IA4UQ,kBAAkB;IAClB,kBAAkB;IAClB,wBAAwB;IACxB,YAAY;IACZ,MAAM;IACN,OAAO;IAEP,kCAAkC;IAClC,yBAAyB;IACzB,YAAY;IACZ,eAAe;IAEf,aAAa;IACb,qBAAqB;IACrB,uBAAuB;IAEvB,iBAAiB;IAEjB,aAAa;IACb,kBAAkB,EAAA;EA/V1B;IAmWQ,WAAW;IACX,cAAc,EAAA;;AAItB;EACI,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,8BAAoC;EACpC,aAAa;EACb,yBAAyB;EACzB,MAAM,EAAA;EAPV;IAUQ,kBAAkB;IAClB,oBAAoB;IACpB,iBAAiB;IACjB,gBAAgB;IAChB,mBAAmB;IACnB,iBAAiB;IAEjB,aAAa;IACb,2BAA2B;IAC3B,0CAA0C,EAAA;IAnBlD;MAsBY,WAAW;MACX,cAAc;MACd,gBAAgB;MAChB,aAAa;MACb,eAAe;MACf,YAAY,EAAA;IA3BxB;MA+BY,WAAW;MACX,cAAc;MACd,aAAa;MACb,wBAAwB;MACxB,2BAA2B;MAC3B,YAAY,EAAA;MApCxB;QAuCgB,eAAe;QACf,oBAAoB;QACpB,iBAAiB;QACjB,eAAe;QACf,uBAAuB;QACvB,aAAa;QACb,qBAAqB;QACrB,kBAAkB;QAClB,YAAY;QACZ,mBAAmB,EAAA;QAhDnC;UAmDoB,YAAY,EAAA;QAnDhC;UAuDoB,eAAe,EAAA","sourcesContent":["#node-editor-graph-root {\r\n    display: grid;\r\n    grid-template-rows: calc(100% - 120px) 120px;\r\n    height: 100%;\r\n    width: 100%;\r\n    background: #464646;\r\n    font: 14px \"acumin-pro\";\r\n\r\n    &.popup {\r\n        grid-template-columns: 100%;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .wait-screen {\r\n        display: grid;\r\n        justify-content: center;\r\n        align-content: center;\r\n        height: 100%;\r\n        width: 100%;\r\n        background: #464646;\r\n        opacity: 0.95;\r\n        color: white;\r\n        font: 24px \"acumin-pro\";\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n\r\n        &.hidden {\r\n            visibility: hidden;\r\n        }\r\n    }\r\n\r\n    #nodeList {\r\n        grid-row: 1 / span 2;\r\n        grid-column: 1;\r\n    }\r\n\r\n    #leftGrab {\r\n        grid-row: 1 / span 2;\r\n        grid-column: 2;\r\n        cursor: ew-resize;\r\n    }\r\n\r\n    #rightGrab {\r\n        grid-row: 1 / span 2;\r\n        grid-column: 4;\r\n        cursor: ew-resize;\r\n    }\r\n\r\n    .diagram-container {\r\n        grid-row: 1;\r\n        grid-column: 3;\r\n        background: #5f5b60;\r\n        width: 100%;\r\n        height: 100%;\r\n\r\n        .diagram {\r\n            display: none;\r\n            width: 100%;\r\n            height: 100%;\r\n        }\r\n    }\r\n\r\n    .right-panel {\r\n        grid-row: 1 / span 2;\r\n        grid-column: 5;\r\n        display: grid;\r\n        grid-template-rows: 1fr 40px auto 40px;\r\n        grid-template-columns: 100%;\r\n        height: 100%;\r\n        overflow-y: auto;\r\n    }\r\n\r\n    #propertyTab {\r\n        grid-row: 1;\r\n        grid-column: 1;\r\n    }\r\n\r\n    .button {\r\n        display: grid;\r\n        justify-content: center;\r\n        align-content: center;\r\n        height: auto;\r\n        width: calc(100% / 7);\r\n        cursor: pointer;\r\n\r\n        &:hover {\r\n            background: rgb(51, 122, 183);\r\n            color: white;\r\n            opacity: 0.8;\r\n        }\r\n\r\n        &.selected {\r\n            background: rgb(51, 122, 183);\r\n            color: white;\r\n        }\r\n\r\n        &.align {\r\n            justify-content: stretch;\r\n            text-align: center;\r\n        }\r\n    }\r\n\r\n    #preview-mesh-bar {\r\n        grid-row: 2;\r\n        grid-column: 1;\r\n        display: grid;\r\n        grid-template-columns: auto 1fr 40px 40px 40px;\r\n        align-items: center;\r\n        font-size: 18px;\r\n        background-color: #555555;\r\n\r\n        #file-picker {\r\n            display: none;\r\n        }\r\n\r\n        .listLine {\r\n            grid-column: 1;\r\n            height: 40px;\r\n            display: grid;\r\n            grid-template-columns: 0px 1fr;\r\n\r\n            .label {\r\n                grid-column: 1;\r\n                display: flex;\r\n                align-items: center;\r\n                font-size: 14px;\r\n            }\r\n\r\n            .options {\r\n                grid-column: 2;\r\n\r\n                display: flex;\r\n                align-items: center;\r\n                margin-left: 5px;\r\n\r\n                select {\r\n                    width: 115px;\r\n                }\r\n            }\r\n        }\r\n\r\n        .button {\r\n            color: #ffffff;\r\n            width: 40px;\r\n            height: 40px;\r\n            transform-origin: 50% 50%;\r\n\r\n            &:active {\r\n                transform: scale(0.9);\r\n            }\r\n\r\n            &:hover {\r\n                background: #3f3461;\r\n            }\r\n\r\n            &.selected {\r\n                background: #9379e6;\r\n            }\r\n\r\n            img {\r\n                height: 24px;\r\n                width: 24px;\r\n            }\r\n        }\r\n\r\n        #play-button {\r\n            grid-column: 3;\r\n        }\r\n\r\n        #color-picker-button {\r\n            grid-column: 4;\r\n            display: grid;\r\n            grid-template-columns: 100%;\r\n            grid-template-rows: 100%;\r\n\r\n            img {\r\n                height: 24px;\r\n                width: 24px;\r\n            }\r\n            #color-picker-image {\r\n                padding-left: 7px;\r\n                padding-bottom: 38px;\r\n            }\r\n\r\n            #color-picker {\r\n                transform: scale(0);\r\n                grid-column: 1;\r\n                grid-row: 1;\r\n            }\r\n\r\n            #color-picker-label {\r\n                width: 100%;\r\n                background: transparent;\r\n                cursor: pointer;\r\n            }\r\n        }\r\n\r\n        #preview-new-window {\r\n            grid-column: 5;\r\n        }\r\n\r\n        select {\r\n            background-color: #a3a3a3;\r\n            color: #333333;\r\n        }\r\n    }\r\n\r\n    #preview-config-bar {\r\n        grid-row: 4;\r\n        grid-column: 1;\r\n        display: grid;\r\n        grid-template-columns: 40px 40px 40px 1fr 40px 40px;\r\n        color: white;\r\n        align-items: center;\r\n        font-size: 18px;\r\n\r\n        &.extended {\r\n            grid-template-columns: 1fr;\r\n        }\r\n\r\n        .listLine {\r\n            padding-left: 5px;\r\n            height: 30px;\r\n            display: grid;\r\n            grid-template-columns: 1fr auto;\r\n\r\n            .label {\r\n                grid-column: 1;\r\n                display: flex;\r\n                align-items: center;\r\n                font-size: 14px;\r\n            }\r\n\r\n            .options {\r\n                grid-column: 2;\r\n\r\n                display: flex;\r\n                align-items: center;\r\n                margin-right: 5px;\r\n\r\n                select {\r\n                    width: 115px;\r\n                }\r\n            }\r\n        }\r\n\r\n        .button {\r\n            width: 40px;\r\n            grid-row: 1;\r\n            height: 40px;\r\n            transform-origin: 50% 50%;\r\n\r\n            &:hover {\r\n                background: #3f3461;\r\n            }\r\n\r\n            &.selected {\r\n                background: #9379e6;\r\n            }\r\n\r\n            &:active {\r\n                transform: scale(0.9);\r\n            }\r\n\r\n            img {\r\n                height: auto;\r\n                width: 100%;\r\n            }\r\n\r\n            &.back-face {\r\n                grid-column: 6;\r\n            }\r\n\r\n            &.depth-pass {\r\n                grid-column: 5 / 6;\r\n            }\r\n\r\n            &.hemispheric-light {\r\n                grid-column: 3 / 4;\r\n            }\r\n            &.direction-light-1 {\r\n                grid-column: 2 / 3;\r\n            }\r\n            &.direction-light-0 {\r\n                grid-column: 1 / 2;\r\n            }\r\n        }\r\n    }\r\n\r\n    #preview {\r\n        border-top: 1px solid rgb(85, 85, 85);\r\n        grid-row: 3;\r\n        grid-column: 1;\r\n        width: 100%;\r\n        display: grid;\r\n        outline: 0 !important;\r\n        padding: 0 !important;\r\n        user-select: none;\r\n        overflow: hidden;\r\n\r\n        #preview-canvas {\r\n            width: 100%;\r\n            height: 100%;\r\n            outline: 0 !important;\r\n            padding: 0 !important;\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n        }\r\n\r\n        .waitPanel {\r\n            width: 100%;\r\n            height: 100%;\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n            color: white;\r\n            font-size: 18px;\r\n            align-content: center;\r\n            justify-content: center;\r\n            background: rgba(20, 20, 20, 0.95);\r\n            z-index: 10;\r\n            display: grid;\r\n            transition: opacity 250ms;\r\n\r\n            &.hidden {\r\n                opacity: 0;\r\n                pointer-events: none;\r\n            }\r\n        }\r\n    }\r\n\r\n    .blocker {\r\n        visibility: hidden;\r\n        position: absolute;\r\n        width: calc(100% - 40px);\r\n        height: 100%;\r\n        top: 0;\r\n        left: 0;\r\n\r\n        background: rgba(20, 20, 20, 0.95);\r\n        font-family: \"acumin-pro\";\r\n        color: white;\r\n        font-size: 24px;\r\n\r\n        display: grid;\r\n        align-content: center;\r\n        justify-content: center;\r\n\r\n        user-select: none;\r\n\r\n        padding: 20px;\r\n        text-align: center;\r\n    }\r\n\r\n    #log-console {\r\n        grid-row: 2;\r\n        grid-column: 3;\r\n    }\r\n}\r\n\r\n.dialog-container {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: rgba(0.1, 0.1, 0.1, 0.6);\r\n    display: grid;\r\n    font-family: \"acumin-pro\";\r\n    top: 0;\r\n\r\n    .dialog {\r\n        align-self: center;\r\n        justify-self: center;\r\n        min-height: 140px;\r\n        max-width: 400px;\r\n        border-radius: 10px;\r\n        background: white;\r\n\r\n        display: grid;\r\n        grid-template-columns: 100%;\r\n        grid-template-rows: calc(100% - 50px) 50px;\r\n\r\n        .dialog-message {\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n            margin-top: 20px;\r\n            padding: 10px;\r\n            font-size: 18px;\r\n            color: black;\r\n        }\r\n\r\n        .dialog-buttons {\r\n            grid-row: 2;\r\n            grid-column: 1;\r\n            display: grid;\r\n            grid-template-rows: 100%;\r\n            grid-template-columns: 100%;\r\n            color: white;\r\n\r\n            .dialog-button-ok {\r\n                cursor: pointer;\r\n                justify-self: center;\r\n                background: green;\r\n                min-width: 80px;\r\n                justify-content: center;\r\n                display: grid;\r\n                align-content: center;\r\n                align-self: center;\r\n                height: 35px;\r\n                border-radius: 10px;\r\n\r\n                &:hover {\r\n                    opacity: 0.8;\r\n                }\r\n\r\n                &.error {\r\n                    background: red;\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, "#node-editor-graph-root {\n  display: grid;\n  grid-template-rows: calc(100% - 120px) 120px;\n  height: 100%;\n  width: 100%;\n  background: #464646;\n  font: 14px \"acumin-pro\"; }\n  #node-editor-graph-root.popup {\n    grid-template-columns: 100%;\n    overflow: hidden; }\n  #node-editor-graph-root .wait-screen {\n    display: grid;\n    justify-content: center;\n    align-content: center;\n    height: 100%;\n    width: 100%;\n    background: #464646;\n    opacity: 0.95;\n    color: white;\n    font: 24px \"acumin-pro\";\n    position: absolute;\n    top: 0;\n    left: 0; }\n    #node-editor-graph-root .wait-screen.hidden {\n      visibility: hidden; }\n  #node-editor-graph-root #nodeList {\n    grid-row: 1 / span 2;\n    grid-column: 1; }\n  #node-editor-graph-root #leftGrab {\n    grid-row: 1 / span 2;\n    grid-column: 2;\n    cursor: ew-resize; }\n  #node-editor-graph-root #rightGrab {\n    grid-row: 1 / span 2;\n    grid-column: 4;\n    cursor: ew-resize; }\n  #node-editor-graph-root .diagram-container {\n    grid-row: 1;\n    grid-column: 3;\n    background: #5f5b60;\n    width: 100%;\n    height: 100%; }\n    #node-editor-graph-root .diagram-container .diagram {\n      display: none;\n      width: 100%;\n      height: 100%; }\n  #node-editor-graph-root .right-panel {\n    grid-row: 1 / span 2;\n    grid-column: 5;\n    display: grid;\n    grid-template-rows: 1fr 40px auto 40px;\n    grid-template-columns: 100%;\n    height: 100%;\n    overflow-y: auto; }\n  #node-editor-graph-root #propertyTab {\n    grid-row: 1;\n    grid-column: 1; }\n  #node-editor-graph-root .button {\n    display: grid;\n    justify-content: center;\n    align-content: center;\n    height: auto;\n    width: calc(100% / 7);\n    cursor: pointer; }\n    #node-editor-graph-root .button:hover {\n      background: #337ab7;\n      color: white;\n      opacity: 0.8; }\n    #node-editor-graph-root .button.selected {\n      background: #337ab7;\n      color: white; }\n    #node-editor-graph-root .button.align {\n      justify-content: stretch;\n      text-align: center; }\n  #node-editor-graph-root #preview-mesh-bar {\n    grid-row: 2;\n    grid-column: 1;\n    display: grid;\n    grid-template-columns: auto 1fr 40px 40px 40px;\n    align-items: center;\n    font-size: 18px;\n    background-color: #555555; }\n    #node-editor-graph-root #preview-mesh-bar #file-picker {\n      display: none; }\n    #node-editor-graph-root #preview-mesh-bar .listLine {\n      grid-column: 1;\n      height: 40px;\n      display: grid;\n      grid-template-columns: 0px 1fr; }\n      #node-editor-graph-root #preview-mesh-bar .listLine .label {\n        grid-column: 1;\n        display: flex;\n        align-items: center;\n        font-size: 14px; }\n      #node-editor-graph-root #preview-mesh-bar .listLine .options {\n        grid-column: 2;\n        display: flex;\n        align-items: center;\n        margin-left: 5px; }\n        #node-editor-graph-root #preview-mesh-bar .listLine .options select {\n          width: 115px; }\n    #node-editor-graph-root #preview-mesh-bar .button {\n      color: #ffffff;\n      width: 40px;\n      height: 40px;\n      transform-origin: 50% 50%; }\n      #node-editor-graph-root #preview-mesh-bar .button:active {\n        transform: scale(0.9); }\n      #node-editor-graph-root #preview-mesh-bar .button:hover {\n        background: #3f3461; }\n      #node-editor-graph-root #preview-mesh-bar .button.selected {\n        background: #9379e6; }\n      #node-editor-graph-root #preview-mesh-bar .button img {\n        height: 24px;\n        width: 24px; }\n    #node-editor-graph-root #preview-mesh-bar #play-button {\n      grid-column: 3; }\n    #node-editor-graph-root #preview-mesh-bar #color-picker-button {\n      grid-column: 4;\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: 100%; }\n      #node-editor-graph-root #preview-mesh-bar #color-picker-button img {\n        height: 24px;\n        width: 24px; }\n      #node-editor-graph-root #preview-mesh-bar #color-picker-button #color-picker-image {\n        padding-left: 7px;\n        padding-bottom: 38px; }\n      #node-editor-graph-root #preview-mesh-bar #color-picker-button #color-picker {\n        transform: scale(0);\n        grid-column: 1;\n        grid-row: 1; }\n      #node-editor-graph-root #preview-mesh-bar #color-picker-button #color-picker-label {\n        width: 100%;\n        background: transparent;\n        cursor: pointer; }\n    #node-editor-graph-root #preview-mesh-bar #preview-new-window {\n      grid-column: 5; }\n    #node-editor-graph-root #preview-mesh-bar select {\n      background-color: #a3a3a3;\n      color: #333333; }\n  #node-editor-graph-root #preview-config-bar {\n    grid-row: 4;\n    grid-column: 1;\n    display: grid;\n    grid-template-columns: 40px 40px 40px 1fr 40px 40px;\n    color: white;\n    align-items: center;\n    font-size: 18px; }\n    #node-editor-graph-root #preview-config-bar.extended {\n      grid-template-columns: 1fr; }\n    #node-editor-graph-root #preview-config-bar .listLine {\n      padding-left: 5px;\n      height: 30px;\n      display: grid;\n      grid-template-columns: 1fr auto; }\n      #node-editor-graph-root #preview-config-bar .listLine .label {\n        grid-column: 1;\n        display: flex;\n        align-items: center;\n        font-size: 14px; }\n      #node-editor-graph-root #preview-config-bar .listLine .options {\n        grid-column: 2;\n        display: flex;\n        align-items: center;\n        margin-right: 5px; }\n        #node-editor-graph-root #preview-config-bar .listLine .options select {\n          width: 115px; }\n    #node-editor-graph-root #preview-config-bar .button {\n      width: 40px;\n      grid-row: 1;\n      height: 40px;\n      transform-origin: 50% 50%; }\n      #node-editor-graph-root #preview-config-bar .button:hover {\n        background: #3f3461; }\n      #node-editor-graph-root #preview-config-bar .button.selected {\n        background: #9379e6; }\n      #node-editor-graph-root #preview-config-bar .button:active {\n        transform: scale(0.9); }\n      #node-editor-graph-root #preview-config-bar .button img {\n        height: auto;\n        width: 100%; }\n      #node-editor-graph-root #preview-config-bar .button.back-face {\n        grid-column: 6; }\n      #node-editor-graph-root #preview-config-bar .button.depth-pass {\n        grid-column: 5 / 6; }\n      #node-editor-graph-root #preview-config-bar .button.hemispheric-light {\n        grid-column: 3 / 4; }\n      #node-editor-graph-root #preview-config-bar .button.direction-light-1 {\n        grid-column: 2 / 3; }\n      #node-editor-graph-root #preview-config-bar .button.direction-light-0 {\n        grid-column: 1 / 2; }\n  #node-editor-graph-root #preview {\n    border-top: 1px solid #555555;\n    grid-row: 3;\n    grid-column: 1;\n    width: 100%;\n    display: grid;\n    outline: 0 !important;\n    padding: 0 !important;\n    user-select: none;\n    overflow: hidden; }\n    #node-editor-graph-root #preview #preview-canvas {\n      width: 100%;\n      height: 100%;\n      outline: 0 !important;\n      padding: 0 !important;\n      grid-row: 1;\n      grid-column: 1; }\n    #node-editor-graph-root #preview .waitPanel {\n      width: 100%;\n      height: 100%;\n      grid-row: 1;\n      grid-column: 1;\n      color: white;\n      font-size: 18px;\n      align-content: center;\n      justify-content: center;\n      background: rgba(20, 20, 20, 0.95);\n      z-index: 10;\n      display: grid;\n      transition: opacity 250ms; }\n      #node-editor-graph-root #preview .waitPanel.hidden {\n        opacity: 0;\n        pointer-events: none; }\n  #node-editor-graph-root .blocker {\n    visibility: hidden;\n    position: absolute;\n    width: calc(100% - 40px);\n    height: 100%;\n    top: 0;\n    left: 0;\n    background: rgba(20, 20, 20, 0.95);\n    font-family: \"acumin-pro\";\n    color: white;\n    font-size: 24px;\n    display: grid;\n    align-content: center;\n    justify-content: center;\n    user-select: none;\n    padding: 20px;\n    text-align: center; }\n  #node-editor-graph-root #log-console {\n    grid-row: 2;\n    grid-column: 3; }\n", "",{"version":3,"sources":["webpack://./../../../tools/nodeEditor/dist/main.scss"],"names":[],"mappings":"AAAA;EACI,aAAa;EACb,4CAA4C;EAC5C,YAAY;EACZ,WAAW;EACX,mBAAmB;EACnB,uBAAuB,EAAA;EAN3B;IASQ,2BAA2B;IAC3B,gBAAgB,EAAA;EAVxB;IAcQ,aAAa;IACb,uBAAuB;IACvB,qBAAqB;IACrB,YAAY;IACZ,WAAW;IACX,mBAAmB;IACnB,aAAa;IACb,YAAY;IACZ,uBAAuB;IACvB,kBAAkB;IAClB,MAAM;IACN,OAAO,EAAA;IAzBf;MA4BY,kBAAkB,EAAA;EA5B9B;IAiCQ,oBAAoB;IACpB,cAAc,EAAA;EAlCtB;IAsCQ,oBAAoB;IACpB,cAAc;IACd,iBAAiB,EAAA;EAxCzB;IA4CQ,oBAAoB;IACpB,cAAc;IACd,iBAAiB,EAAA;EA9CzB;IAkDQ,WAAW;IACX,cAAc;IACd,mBAAmB;IACnB,WAAW;IACX,YAAY,EAAA;IAtDpB;MAyDY,aAAa;MACb,WAAW;MACX,YAAY,EAAA;EA3DxB;IAgEQ,oBAAoB;IACpB,cAAc;IACd,aAAa;IACb,sCAAsC;IACtC,2BAA2B;IAC3B,YAAY;IACZ,gBAAgB,EAAA;EAtExB;IA0EQ,WAAW;IACX,cAAc,EAAA;EA3EtB;IA+EQ,aAAa;IACb,uBAAuB;IACvB,qBAAqB;IACrB,YAAY;IACZ,qBAAqB;IACrB,eAAe,EAAA;IApFvB;MAuFY,mBAA6B;MAC7B,YAAY;MACZ,YAAY,EAAA;IAzFxB;MA6FY,mBAA6B;MAC7B,YAAY,EAAA;IA9FxB;MAkGY,wBAAwB;MACxB,kBAAkB,EAAA;EAnG9B;IAwGQ,WAAW;IACX,cAAc;IACd,aAAa;IACb,8CAA8C;IAC9C,mBAAmB;IACnB,eAAe;IACf,yBAAyB,EAAA;IA9GjC;MAiHY,aAAa,EAAA;IAjHzB;MAqHY,cAAc;MACd,YAAY;MACZ,aAAa;MACb,8BAA8B,EAAA;MAxH1C;QA2HgB,cAAc;QACd,aAAa;QACb,mBAAmB;QACnB,eAAe,EAAA;MA9H/B;QAkIgB,cAAc;QAEd,aAAa;QACb,mBAAmB;QACnB,gBAAgB,EAAA;QAtIhC;UAyIoB,YAAY,EAAA;IAzIhC;MA+IY,cAAc;MACd,WAAW;MACX,YAAY;MACZ,yBAAyB,EAAA;MAlJrC;QAqJgB,qBAAqB,EAAA;MArJrC;QAyJgB,mBAAmB,EAAA;MAzJnC;QA6JgB,mBAAmB,EAAA;MA7JnC;QAiKgB,YAAY;QACZ,WAAW,EAAA;IAlK3B;MAuKY,cAAc,EAAA;IAvK1B;MA2KY,cAAc;MACd,aAAa;MACb,2BAA2B;MAC3B,wBAAwB,EAAA;MA9KpC;QAiLgB,YAAY;QACZ,WAAW,EAAA;MAlL3B;QAqLgB,iBAAiB;QACjB,oBAAoB,EAAA;MAtLpC;QA0LgB,mBAAmB;QACnB,cAAc;QACd,WAAW,EAAA;MA5L3B;QAgMgB,WAAW;QACX,uBAAuB;QACvB,eAAe,EAAA;IAlM/B;MAuMY,cAAc,EAAA;IAvM1B;MA2MY,yBAAyB;MACzB,cAAc,EAAA;EA5M1B;IAiNQ,WAAW;IACX,cAAc;IACd,aAAa;IACb,mDAAmD;IACnD,YAAY;IACZ,mBAAmB;IACnB,eAAe,EAAA;IAvNvB;MA0NY,0BAA0B,EAAA;IA1NtC;MA8NY,iBAAiB;MACjB,YAAY;MACZ,aAAa;MACb,+BAA+B,EAAA;MAjO3C;QAoOgB,cAAc;QACd,aAAa;QACb,mBAAmB;QACnB,eAAe,EAAA;MAvO/B;QA2OgB,cAAc;QAEd,aAAa;QACb,mBAAmB;QACnB,iBAAiB,EAAA;QA/OjC;UAkPoB,YAAY,EAAA;IAlPhC;MAwPY,WAAW;MACX,WAAW;MACX,YAAY;MACZ,yBAAyB,EAAA;MA3PrC;QA8PgB,mBAAmB,EAAA;MA9PnC;QAkQgB,mBAAmB,EAAA;MAlQnC;QAsQgB,qBAAqB,EAAA;MAtQrC;QA0QgB,YAAY;QACZ,WAAW,EAAA;MA3Q3B;QA+QgB,cAAc,EAAA;MA/Q9B;QAmRgB,kBAAkB,EAAA;MAnRlC;QAuRgB,kBAAkB,EAAA;MAvRlC;QA0RgB,kBAAkB,EAAA;MA1RlC;QA6RgB,kBAAkB,EAAA;EA7RlC;IAmSQ,6BAAqC;IACrC,WAAW;IACX,cAAc;IACd,WAAW;IACX,aAAa;IACb,qBAAqB;IACrB,qBAAqB;IACrB,iBAAiB;IACjB,gBAAgB,EAAA;IA3SxB;MA8SY,WAAW;MACX,YAAY;MACZ,qBAAqB;MACrB,qBAAqB;MACrB,WAAW;MACX,cAAc,EAAA;IAnT1B;MAuTY,WAAW;MACX,YAAY;MACZ,WAAW;MACX,cAAc;MACd,YAAY;MACZ,eAAe;MACf,qBAAqB;MACrB,uBAAuB;MACvB,kCAAkC;MAClC,WAAW;MACX,aAAa;MACb,yBAAyB,EAAA;MAlUrC;QAqUgB,UAAU;QACV,oBAAoB,EAAA;EAtUpC;IA4UQ,kBAAkB;IAClB,kBAAkB;IAClB,wBAAwB;IACxB,YAAY;IACZ,MAAM;IACN,OAAO;IAEP,kCAAkC;IAClC,yBAAyB;IACzB,YAAY;IACZ,eAAe;IAEf,aAAa;IACb,qBAAqB;IACrB,uBAAuB;IAEvB,iBAAiB;IAEjB,aAAa;IACb,kBAAkB,EAAA;EA/V1B;IAmWQ,WAAW;IACX,cAAc,EAAA","sourcesContent":["#node-editor-graph-root {\r\n    display: grid;\r\n    grid-template-rows: calc(100% - 120px) 120px;\r\n    height: 100%;\r\n    width: 100%;\r\n    background: #464646;\r\n    font: 14px \"acumin-pro\";\r\n\r\n    &.popup {\r\n        grid-template-columns: 100%;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .wait-screen {\r\n        display: grid;\r\n        justify-content: center;\r\n        align-content: center;\r\n        height: 100%;\r\n        width: 100%;\r\n        background: #464646;\r\n        opacity: 0.95;\r\n        color: white;\r\n        font: 24px \"acumin-pro\";\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n\r\n        &.hidden {\r\n            visibility: hidden;\r\n        }\r\n    }\r\n\r\n    #nodeList {\r\n        grid-row: 1 / span 2;\r\n        grid-column: 1;\r\n    }\r\n\r\n    #leftGrab {\r\n        grid-row: 1 / span 2;\r\n        grid-column: 2;\r\n        cursor: ew-resize;\r\n    }\r\n\r\n    #rightGrab {\r\n        grid-row: 1 / span 2;\r\n        grid-column: 4;\r\n        cursor: ew-resize;\r\n    }\r\n\r\n    .diagram-container {\r\n        grid-row: 1;\r\n        grid-column: 3;\r\n        background: #5f5b60;\r\n        width: 100%;\r\n        height: 100%;\r\n\r\n        .diagram {\r\n            display: none;\r\n            width: 100%;\r\n            height: 100%;\r\n        }\r\n    }\r\n\r\n    .right-panel {\r\n        grid-row: 1 / span 2;\r\n        grid-column: 5;\r\n        display: grid;\r\n        grid-template-rows: 1fr 40px auto 40px;\r\n        grid-template-columns: 100%;\r\n        height: 100%;\r\n        overflow-y: auto;\r\n    }\r\n\r\n    #propertyTab {\r\n        grid-row: 1;\r\n        grid-column: 1;\r\n    }\r\n\r\n    .button {\r\n        display: grid;\r\n        justify-content: center;\r\n        align-content: center;\r\n        height: auto;\r\n        width: calc(100% / 7);\r\n        cursor: pointer;\r\n\r\n        &:hover {\r\n            background: rgb(51, 122, 183);\r\n            color: white;\r\n            opacity: 0.8;\r\n        }\r\n\r\n        &.selected {\r\n            background: rgb(51, 122, 183);\r\n            color: white;\r\n        }\r\n\r\n        &.align {\r\n            justify-content: stretch;\r\n            text-align: center;\r\n        }\r\n    }\r\n\r\n    #preview-mesh-bar {\r\n        grid-row: 2;\r\n        grid-column: 1;\r\n        display: grid;\r\n        grid-template-columns: auto 1fr 40px 40px 40px;\r\n        align-items: center;\r\n        font-size: 18px;\r\n        background-color: #555555;\r\n\r\n        #file-picker {\r\n            display: none;\r\n        }\r\n\r\n        .listLine {\r\n            grid-column: 1;\r\n            height: 40px;\r\n            display: grid;\r\n            grid-template-columns: 0px 1fr;\r\n\r\n            .label {\r\n                grid-column: 1;\r\n                display: flex;\r\n                align-items: center;\r\n                font-size: 14px;\r\n            }\r\n\r\n            .options {\r\n                grid-column: 2;\r\n\r\n                display: flex;\r\n                align-items: center;\r\n                margin-left: 5px;\r\n\r\n                select {\r\n                    width: 115px;\r\n                }\r\n            }\r\n        }\r\n\r\n        .button {\r\n            color: #ffffff;\r\n            width: 40px;\r\n            height: 40px;\r\n            transform-origin: 50% 50%;\r\n\r\n            &:active {\r\n                transform: scale(0.9);\r\n            }\r\n\r\n            &:hover {\r\n                background: #3f3461;\r\n            }\r\n\r\n            &.selected {\r\n                background: #9379e6;\r\n            }\r\n\r\n            img {\r\n                height: 24px;\r\n                width: 24px;\r\n            }\r\n        }\r\n\r\n        #play-button {\r\n            grid-column: 3;\r\n        }\r\n\r\n        #color-picker-button {\r\n            grid-column: 4;\r\n            display: grid;\r\n            grid-template-columns: 100%;\r\n            grid-template-rows: 100%;\r\n\r\n            img {\r\n                height: 24px;\r\n                width: 24px;\r\n            }\r\n            #color-picker-image {\r\n                padding-left: 7px;\r\n                padding-bottom: 38px;\r\n            }\r\n\r\n            #color-picker {\r\n                transform: scale(0);\r\n                grid-column: 1;\r\n                grid-row: 1;\r\n            }\r\n\r\n            #color-picker-label {\r\n                width: 100%;\r\n                background: transparent;\r\n                cursor: pointer;\r\n            }\r\n        }\r\n\r\n        #preview-new-window {\r\n            grid-column: 5;\r\n        }\r\n\r\n        select {\r\n            background-color: #a3a3a3;\r\n            color: #333333;\r\n        }\r\n    }\r\n\r\n    #preview-config-bar {\r\n        grid-row: 4;\r\n        grid-column: 1;\r\n        display: grid;\r\n        grid-template-columns: 40px 40px 40px 1fr 40px 40px;\r\n        color: white;\r\n        align-items: center;\r\n        font-size: 18px;\r\n\r\n        &.extended {\r\n            grid-template-columns: 1fr;\r\n        }\r\n\r\n        .listLine {\r\n            padding-left: 5px;\r\n            height: 30px;\r\n            display: grid;\r\n            grid-template-columns: 1fr auto;\r\n\r\n            .label {\r\n                grid-column: 1;\r\n                display: flex;\r\n                align-items: center;\r\n                font-size: 14px;\r\n            }\r\n\r\n            .options {\r\n                grid-column: 2;\r\n\r\n                display: flex;\r\n                align-items: center;\r\n                margin-right: 5px;\r\n\r\n                select {\r\n                    width: 115px;\r\n                }\r\n            }\r\n        }\r\n\r\n        .button {\r\n            width: 40px;\r\n            grid-row: 1;\r\n            height: 40px;\r\n            transform-origin: 50% 50%;\r\n\r\n            &:hover {\r\n                background: #3f3461;\r\n            }\r\n\r\n            &.selected {\r\n                background: #9379e6;\r\n            }\r\n\r\n            &:active {\r\n                transform: scale(0.9);\r\n            }\r\n\r\n            img {\r\n                height: auto;\r\n                width: 100%;\r\n            }\r\n\r\n            &.back-face {\r\n                grid-column: 6;\r\n            }\r\n\r\n            &.depth-pass {\r\n                grid-column: 5 / 6;\r\n            }\r\n\r\n            &.hemispheric-light {\r\n                grid-column: 3 / 4;\r\n            }\r\n            &.direction-light-1 {\r\n                grid-column: 2 / 3;\r\n            }\r\n            &.direction-light-0 {\r\n                grid-column: 1 / 2;\r\n            }\r\n        }\r\n    }\r\n\r\n    #preview {\r\n        border-top: 1px solid rgb(85, 85, 85);\r\n        grid-row: 3;\r\n        grid-column: 1;\r\n        width: 100%;\r\n        display: grid;\r\n        outline: 0 !important;\r\n        padding: 0 !important;\r\n        user-select: none;\r\n        overflow: hidden;\r\n\r\n        #preview-canvas {\r\n            width: 100%;\r\n            height: 100%;\r\n            outline: 0 !important;\r\n            padding: 0 !important;\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n        }\r\n\r\n        .waitPanel {\r\n            width: 100%;\r\n            height: 100%;\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n            color: white;\r\n            font-size: 18px;\r\n            align-content: center;\r\n            justify-content: center;\r\n            background: rgba(20, 20, 20, 0.95);\r\n            z-index: 10;\r\n            display: grid;\r\n            transition: opacity 250ms;\r\n\r\n            &.hidden {\r\n                opacity: 0;\r\n                pointer-events: none;\r\n            }\r\n        }\r\n    }\r\n\r\n    .blocker {\r\n        visibility: hidden;\r\n        position: absolute;\r\n        width: calc(100% - 40px);\r\n        height: 100%;\r\n        top: 0;\r\n        left: 0;\r\n\r\n        background: rgba(20, 20, 20, 0.95);\r\n        font-family: \"acumin-pro\";\r\n        color: white;\r\n        font-size: 24px;\r\n\r\n        display: grid;\r\n        align-content: center;\r\n        justify-content: center;\r\n\r\n        user-select: none;\r\n\r\n        padding: 20px;\r\n        text-align: center;\r\n    }\r\n\r\n    #log-console {\r\n        grid-row: 2;\r\n        grid-column: 3;\r\n    }\r\n}\r\n"],"sourceRoot":""}]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {};
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ "../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss":
+/*!*******************************************************************************************************************************************************************************************************************************************!*\
+  !*** ../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss ***!
+  \*******************************************************************************************************************************************************************************************************************************************/
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/sourceMaps.js */ "../../../../node_modules/css-loader/dist/runtime/sourceMaps.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/api.js */ "../../../../node_modules/css-loader/dist/runtime/api.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".stbiu24JbUBfHNSSYhSR {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.6);\n  display: grid;\n  font-family: \"acumin-pro\";\n  top: 0; }\n  .stbiu24JbUBfHNSSYhSR .fCGAiNfXRhhXF8hQPpct {\n    align-self: center;\n    justify-self: center;\n    min-height: 140px;\n    max-width: 400px;\n    border-radius: 10px;\n    background: white;\n    padding: 10px;\n    display: grid;\n    grid-template-columns: 100%;\n    grid-template-rows: 1fr 50px; }\n    .stbiu24JbUBfHNSSYhSR .fCGAiNfXRhhXF8hQPpct .yRrm4hWjzyu4RnCc412h {\n      grid-row: 1;\n      grid-column: 1;\n      margin-top: 20px;\n      padding: 10px;\n      font-size: 18px;\n      color: black; }\n    .stbiu24JbUBfHNSSYhSR .fCGAiNfXRhhXF8hQPpct .c5hG_qW6gImPmY2mRXUf {\n      grid-row: 2;\n      grid-column: 1;\n      display: grid;\n      grid-template-rows: 100%;\n      grid-template-columns: 100%;\n      color: white; }\n      .stbiu24JbUBfHNSSYhSR .fCGAiNfXRhhXF8hQPpct .c5hG_qW6gImPmY2mRXUf .TaDL8j02NlDZlEf6mraY {\n        cursor: pointer;\n        justify-self: center;\n        background: green;\n        min-width: 80px;\n        justify-content: center;\n        display: grid;\n        align-content: center;\n        align-self: center;\n        height: 35px;\n        border-radius: 10px; }\n        .stbiu24JbUBfHNSSYhSR .fCGAiNfXRhhXF8hQPpct .c5hG_qW6gImPmY2mRXUf .TaDL8j02NlDZlEf6mraY:hover {\n          opacity: 0.8; }\n        .stbiu24JbUBfHNSSYhSR .fCGAiNfXRhhXF8hQPpct .c5hG_qW6gImPmY2mRXUf .TaDL8j02NlDZlEf6mraY.gWN6zWjwiaTlrWBw3gRR {\n          background: red; }\n", "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss"],"names":[],"mappings":"AAAA;EACI,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,8BAAoC;EACpC,aAAa;EACb,yBAAyB;EACzB,MAAM,EAAA;EAPV;IAUQ,kBAAkB;IAClB,oBAAoB;IACpB,iBAAiB;IACjB,gBAAgB;IAChB,mBAAmB;IACnB,iBAAiB;IACjB,aAAa;IAEb,aAAa;IACb,2BAA2B;IAC3B,4BAA4B,EAAA;IApBpC;MAuBY,WAAW;MACX,cAAc;MACd,gBAAgB;MAChB,aAAa;MACb,eAAe;MACf,YAAY,EAAA;IA5BxB;MAgCY,WAAW;MACX,cAAc;MACd,aAAa;MACb,wBAAwB;MACxB,2BAA2B;MAC3B,YAAY,EAAA;MArCxB;QAwCgB,eAAe;QACf,oBAAoB;QACpB,iBAAiB;QACjB,eAAe;QACf,uBAAuB;QACvB,aAAa;QACb,qBAAqB;QACrB,kBAAkB;QAClB,YAAY;QACZ,mBAAmB,EAAA;QAjDnC;UAoDoB,YAAY,EAAA;QApDhC;UAwDoB,eAAe,EAAA","sourcesContent":[":local .dialog-container {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: rgba(0.1, 0.1, 0.1, 0.6);\r\n    display: grid;\r\n    font-family: \"acumin-pro\";\r\n    top: 0;\r\n\r\n    .dialog {\r\n        align-self: center;\r\n        justify-self: center;\r\n        min-height: 140px;\r\n        max-width: 400px;\r\n        border-radius: 10px;\r\n        background: white;\r\n        padding: 10px;\r\n\r\n        display: grid;\r\n        grid-template-columns: 100%;\r\n        grid-template-rows: 1fr 50px;\r\n\r\n        .dialog-message {\r\n            grid-row: 1;\r\n            grid-column: 1;\r\n            margin-top: 20px;\r\n            padding: 10px;\r\n            font-size: 18px;\r\n            color: black;\r\n        }\r\n\r\n        .dialog-buttons {\r\n            grid-row: 2;\r\n            grid-column: 1;\r\n            display: grid;\r\n            grid-template-rows: 100%;\r\n            grid-template-columns: 100%;\r\n            color: white;\r\n\r\n            .dialog-button-ok {\r\n                cursor: pointer;\r\n                justify-self: center;\r\n                background: green;\r\n                min-width: 80px;\r\n                justify-content: center;\r\n                display: grid;\r\n                align-content: center;\r\n                align-self: center;\r\n                height: 35px;\r\n                border-radius: 10px;\r\n\r\n                &:hover {\r\n                    opacity: 0.8;\r\n                }\r\n\r\n                &.error {\r\n                    background: red;\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n"],"sourceRoot":""}]);
+// Exports
+___CSS_LOADER_EXPORT___.locals = {
+	"dialog-container": "stbiu24JbUBfHNSSYhSR",
+	"dialog": "fCGAiNfXRhhXF8hQPpct",
+	"dialog-message": "yRrm4hWjzyu4RnCc412h",
+	"dialog-buttons": "c5hG_qW6gImPmY2mRXUf",
+	"dialog-button-ok": "TaDL8j02NlDZlEf6mraY",
+	"error": "gWN6zWjwiaTlrWBw3gRR"
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ "../../../../node_modules/@fortawesome/fontawesome-svg-core/index.es.js":
@@ -61471,7 +61506,7 @@ class ColorComponentEntry extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         }
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-component" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-component-value" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: 1, className: "numeric-input", value: this.props.value, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value), disabled: this.props.disabled }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-component-label" }, { children: this.props.label }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-component", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-component-value", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: 1, className: "numeric-input", value: this.props.value, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value), disabled: this.props.disabled }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-component-label", children: this.props.label })] }));
     }
 }
 
@@ -61599,29 +61634,29 @@ class ColorPicker extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);
         const colorHexRef = colorRef.toHexString();
         const hasAlpha = this.props.color instanceof core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-container" + (this.props.linearhint ? " with-hints" : "") }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-saturation", onPointerMove: (e) => this.onSaturationPointerMove(e), onPointerDown: (e) => this.onSaturationPointerDown(e), onPointerUp: (e) => this.onSaturationPointerUp(e), ref: this._saturationRef, style: {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-container" + (this.props.linearhint ? " with-hints" : ""), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-saturation", onPointerMove: (e) => this.onSaturationPointerMove(e), onPointerDown: (e) => this.onSaturationPointerDown(e), onPointerUp: (e) => this.onSaturationPointerUp(e), ref: this._saturationRef, style: {
                         background: colorHexRef,
-                    } }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-saturation-white" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-saturation-black" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-saturation-cursor", style: {
+                    }, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-saturation-white" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-saturation-black" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-saturation-cursor", style: {
                                 top: `${-(hsv.b * 100) + 100}%`,
                                 left: `${hsv.g * 100}%`,
-                            } })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-hue" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hue-color", style: {
+                            } })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-hue", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hue-color", style: {
                                 background: colorHex,
-                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-hue-slider", ref: this._hueRef, onPointerMove: (e) => this.onHuePointerMove(e), onPointerDown: (e) => this.onHuePointerDown(e), onPointerUp: (e) => this.onHuePointerUp(e) }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hue-cursor", style: {
+                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hue-slider", ref: this._hueRef, onPointerMove: (e) => this.onHuePointerMove(e), onPointerDown: (e) => this.onHuePointerDown(e), onPointerUp: (e) => this.onHuePointerUp(e), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hue-cursor", style: {
                                     left: `${(hsv.r / 360.0) * 100}%`,
                                     border: `1px solid ` + colorHexRef,
-                                } }) }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-alpha" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-rgb" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "red" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "R", min: 0, max: 255, value: Math.round(this.state.color.r * 255), onChange: (value) => {
+                                } }) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-alpha" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-rgb", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "red", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "R", min: 0, max: 255, value: Math.round(this.state.color.r * 255), onChange: (value) => {
                                     this.state.color.r = value / 255.0;
                                     this.forceUpdate();
-                                } }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "green" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "G", min: 0, max: 255, value: Math.round(this.state.color.g * 255), onChange: (value) => {
+                                } }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "green", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "G", min: 0, max: 255, value: Math.round(this.state.color.g * 255), onChange: (value) => {
                                     this.state.color.g = value / 255.0;
                                     this.forceUpdate();
-                                } }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "blue" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "B", min: 0, max: 255, value: Math.round(this.state.color.b * 255), onChange: (value) => {
+                                } }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "blue", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "B", min: 0, max: 255, value: Math.round(this.state.color.b * 255), onChange: (value) => {
                                     this.state.color.b = value / 255.0;
                                     this.forceUpdate();
-                                } }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "alpha" + (hasAlpha ? "" : " grayed") }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "A", min: 0, max: 255, value: Math.round(this.state.alpha * 255), onChange: (value) => {
+                                } }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "alpha" + (hasAlpha ? "" : " grayed"), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "A", min: 0, max: 255, value: Math.round(this.state.alpha * 255), onChange: (value) => {
                                     this.setState({ alpha: value / 255.0 });
                                     this.forceUpdate();
-                                } }) }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker-hex" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-hex-label" }, { children: "Hex" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-hex-value" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_hexColor__WEBPACK_IMPORTED_MODULE_4__.HexColor, { lockObject: this.props.lockObject, expectedLength: hasAlpha ? 8 : 6, value: colorHex, onChange: (value) => {
+                                } }) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-hex", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hex-label", children: "Hex" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hex-value", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_hexColor__WEBPACK_IMPORTED_MODULE_4__.HexColor, { lockObject: this.props.lockObject, expectedLength: hasAlpha ? 8 : 6, value: colorHex, onChange: (value) => {
                                     if (hasAlpha) {
                                         const color4 = core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4.FromHexString(value);
                                         this.setState({ color: new core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3(color4.r, color4.g, color4.b), alpha: color4.a });
@@ -61629,7 +61664,7 @@ class ColorPicker extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                                     else {
                                         this.setState({ color: core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3.FromHexString(value) });
                                     }
-                                } }) }))] })), this.props.linearhint && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-warning" }, { children: "(Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))" })))] })));
+                                } }) })] }), this.props.linearhint && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-warning", children: "(Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))" }))] }));
     }
 }
 
@@ -61693,6 +61728,65 @@ class HexColor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
 }
 
 
+/***/ }),
+
+/***/ "../../../dev/sharedUiComponents/dist/components/MessageDialog.js":
+/*!************************************************************************!*\
+  !*** ../../../dev/sharedUiComponents/dist/components/MessageDialog.js ***!
+  \************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "MessageDialog": () => (/* binding */ MessageDialog)
+/* harmony export */ });
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
+/* harmony import */ var _classNames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./classNames */ "../../../dev/sharedUiComponents/dist/components/classNames.js");
+/* harmony import */ var _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./MessageDialog.modules.scss */ "../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss");
+
+
+
+
+const MessageDialog = (props) => {
+    const [message, setMessage] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(props.message);
+    const [isError, setIsError] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(props.isError);
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {
+        setMessage(props.message);
+        setIsError(props.isError);
+    }, [props]);
+    if (!message) {
+        return null;
+    }
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: (0,_classNames__WEBPACK_IMPORTED_MODULE_2__.ClassNames)({ "dialog-container": true }, _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: (0,_classNames__WEBPACK_IMPORTED_MODULE_2__.ClassNames)({ dialog: true }, _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: (0,_classNames__WEBPACK_IMPORTED_MODULE_2__.ClassNames)({ "dialog-message": true }, _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]), children: message }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: (0,_classNames__WEBPACK_IMPORTED_MODULE_2__.ClassNames)({ "dialog-buttons": true }, _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: (0,_classNames__WEBPACK_IMPORTED_MODULE_2__.ClassNames)({ "dialog-button-ok": true, error: isError }, _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]), onClick: () => setMessage(""), children: "OK" }) })] }) }));
+};
+
+
+/***/ }),
+
+/***/ "../../../dev/sharedUiComponents/dist/components/classNames.js":
+/*!*********************************************************************!*\
+  !*** ../../../dev/sharedUiComponents/dist/components/classNames.js ***!
+  \*********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "ClassNames": () => (/* binding */ ClassNames)
+/* harmony export */ });
+function ClassNames(names, styleObject) {
+    let string = "";
+    for (const name in names) {
+        if (names[name]) {
+            string += styleObject[name] + " ";
+        }
+    }
+    return string;
+}
+
+
 /***/ }),
 
 /***/ "../../../dev/sharedUiComponents/dist/lines/buttonLineComponent.js":
@@ -61715,7 +61809,7 @@ class ButtonLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         super(props);
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "buttonLine" + (this.props.isDisabled ? " disabled" : "") }, { 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)("button", Object.assign({ onClick: () => this.props.onClick() }, { children: this.props.label }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "buttonLine" + (this.props.isDisabled ? " disabled" : ""), 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)("button", { onClick: () => this.props.onClick(), children: this.props.label })] }));
     }
 }
 
@@ -61742,7 +61836,7 @@ __webpack_require__.r(__webpack_exports__);
 class Color3LineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     render() {
         const props = this.props;
-        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorLineComponent__WEBPACK_IMPORTED_MODULE_2__.ColorLineComponent, Object.assign({ disableAlpha: true }, props));
+        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorLineComponent__WEBPACK_IMPORTED_MODULE_2__.ColorLineComponent, { disableAlpha: true, ...props });
     }
 }
 
@@ -61769,7 +61863,7 @@ __webpack_require__.r(__webpack_exports__);
 class Color4LineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     render() {
         const props = this.props;
-        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorLineComponent__WEBPACK_IMPORTED_MODULE_2__.ColorLineComponent, Object.assign({}, props));
+        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorLineComponent__WEBPACK_IMPORTED_MODULE_2__.ColorLineComponent, { ...props });
     }
 }
 
@@ -61936,9 +62030,9 @@ class ColorLineComponent 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_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) => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color3Line", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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", { className: "label", title: this.props.label, children: this.props.label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { 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);
-                                } }) })), (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) }))] })))] })));
+                                } }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { 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", { className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand", children: chevron })] }), this.state.isExpanded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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) }))] }))] }));
     }
 }
 
@@ -62006,17 +62100,16 @@ class ColorPickerLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compon
         this.syncPositions();
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color-picker" }, { 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: "color-rect-background", ref: this._floatHostRef, onClick: () => this.setState({ pickerEnabled: true }) }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-rect", style: { background: this.state.hex } }) })), this.state.pickerEnabled && ((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__.jsx)("div", Object.assign({ className: "color-picker-cover", onClick: (evt) => {
-                            var _a, _b;
-                            if (evt.target !== ((_b = (_a = this._floatRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) === null || _b === void 0 ? void 0 : _b.querySelector(".color-picker-cover"))) {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker", 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", { className: "color-rect-background", ref: this._floatHostRef, onClick: () => this.setState({ pickerEnabled: true }), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-rect", style: { background: this.state.hex } }) }), this.state.pickerEnabled && ((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__.jsx)("div", { className: "color-picker-cover", onClick: (evt) => {
+                            if (evt.target !== this._floatRef.current?.ownerDocument?.querySelector(".color-picker-cover")) {
                                 return;
                             }
                             this.setState({ pickerEnabled: false });
-                        } }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color-picker-float", ref: this._floatRef }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__.ColorPicker, { lockObject: this.props.lockObject || {}, color: this.state.color, linearhint: this.props.linearHint, onColorChanged: (color) => {
+                        }, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-float", ref: this._floatRef, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__.ColorPicker, { lockObject: this.props.lockObject || {}, color: this.state.color, linearhint: this.props.linearHint, onColorChanged: (color) => {
                                     const hex = color.toHexString();
                                     this.setState({ hex, color });
                                     this.props.onColorChanged(hex);
-                                } }) })) })) }))] })));
+                                } }) }) }) }))] }));
     }
 }
 
@@ -62198,7 +62291,7 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         }
         const value = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_4__.conflictingValuesPlaceholder ? "" : this.state.value;
         const placeholder = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_4__.conflictingValuesPlaceholder ? _targetsProxy__WEBPACK_IMPORTED_MODULE_4__.conflictingValuesPlaceholder : "";
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [!this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: this.props.additionalClass ? this.props.additionalClass + " floatLine" : "floatLine" }, { 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" }), (!this.props.icon || this.props.label != "") && ((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: className }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step || this.props.isInteger ? "1" : "0.01", className: "numeric-input", onKeyDown: (evt) => this.onKeyDown(evt), value: value, onBlur: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [!this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: this.props.additionalClass ? this.props.additionalClass + " floatLine" : "floatLine", 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" }), (!this.props.icon || this.props.label != "") && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", title: this.props.label, children: this.props.label })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: className, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step || this.props.isInteger ? "1" : "0.01", className: "numeric-input", onKeyDown: (evt) => this.onKeyDown(evt), value: value, onBlur: () => {
                                         this.unlock();
                                         if (this.props.onEnter) {
                                             this.props.onEnter(this._store);
@@ -62213,7 +62306,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, { 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()) }))] }));
+                                    } }))] }), 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()) }))] }));
     }
 }
 
@@ -62247,29 +62340,26 @@ class InputArrowsComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             this.props.incrementValue(-event.movementY);
         };
         this._releaseListener = () => {
-            var _a, _b, _c, _d;
             this.props.setDragging(false);
-            (_a = this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.exitPointerLock();
-            (_b = this._arrowsRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.defaultView.removeEventListener("pointerup", this._releaseListener);
-            (_c = this._arrowsRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument.removeEventListener("pointerlockchange", this._lockChangeListener);
-            (_d = this._arrowsRef.current) === null || _d === void 0 ? void 0 : _d.ownerDocument.defaultView.removeEventListener("mousemove", this._drag);
+            this._arrowsRef.current?.ownerDocument.exitPointerLock();
+            this._arrowsRef.current?.ownerDocument.defaultView.removeEventListener("pointerup", this._releaseListener);
+            this._arrowsRef.current?.ownerDocument.removeEventListener("pointerlockchange", this._lockChangeListener);
+            this._arrowsRef.current?.ownerDocument.defaultView.removeEventListener("mousemove", this._drag);
         };
         this._lockChangeListener = () => {
-            var _a;
-            if (((_a = this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.pointerLockElement) !== this._arrowsRef.current) {
+            if (this._arrowsRef.current?.ownerDocument.pointerLockElement !== this._arrowsRef.current) {
                 this._releaseListener();
             }
         };
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "arrows", ref: this._arrowsRef, onPointerDown: () => {
-                var _a, _b, _c, _d;
-                (_a = this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.addEventListener("pointerlockchange", this._lockChangeListener);
-                (_b = this._arrowsRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.defaultView.addEventListener("pointerup", this._releaseListener);
-                (_c = this._arrowsRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument.defaultView.addEventListener("mousemove", this._drag);
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "arrows", ref: this._arrowsRef, onPointerDown: () => {
+                this._arrowsRef.current?.ownerDocument.addEventListener("pointerlockchange", this._lockChangeListener);
+                this._arrowsRef.current?.ownerDocument.defaultView.addEventListener("pointerup", this._releaseListener);
+                this._arrowsRef.current?.ownerDocument.defaultView.addEventListener("mousemove", this._drag);
                 this.props.setDragging(true);
-                (_d = this._arrowsRef.current) === null || _d === void 0 ? void 0 : _d.requestPointerLock();
-            }, onDragStart: (evt) => evt.preventDefault() }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "upArrowIcon", src: _valueUpArrowIcon_svg__WEBPACK_IMPORTED_MODULE_2__, alt: "Increase Value" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "downArrowIcon", src: _valueDownArrowIcon_svg__WEBPACK_IMPORTED_MODULE_3__, alt: "Increase Value" })] })));
+                this._arrowsRef.current?.requestPointerLock();
+            }, onDragStart: (evt) => evt.preventDefault(), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "upArrowIcon", src: _valueUpArrowIcon_svg__WEBPACK_IMPORTED_MODULE_2__, alt: "Increase Value" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "downArrowIcon", src: _valueDownArrowIcon_svg__WEBPACK_IMPORTED_MODULE_3__, alt: "Increase Value" })] }));
     }
 }
 
@@ -62383,7 +62473,7 @@ class MatrixLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             { label: "Rotation over Y axis", value: 2 },
             { label: "Rotation over Z axis", value: 3 },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "vector3Line" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "firstLine" }, { children: (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: "secondLine" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_optionsLineComponent__WEBPACK_IMPORTED_MODULE_4__.OptionsLineComponent, { label: "Mode", className: "no-right-margin", options: modeOptions, target: this, noDirectUpdate: true, propertyName: "", extractValue: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "vector3Line", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "firstLine", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", title: this.props.label, children: this.props.label }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "secondLine", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_optionsLineComponent__WEBPACK_IMPORTED_MODULE_4__.OptionsLineComponent, { label: "Mode", className: "no-right-margin", options: modeOptions, target: this, noDirectUpdate: true, propertyName: "", extractValue: () => {
                             return this.state.mode;
                         }, onSelect: (value) => {
                             this.props.target[this.props.propertyName] = core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.Matrix.Identity();
@@ -62393,7 +62483,7 @@ class MatrixLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                             if (this.props.onModeChange) {
                                 this.props.onModeChange(value);
                             }
-                        } }) })), this.state.mode === 0 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_vector4LineComponent__WEBPACK_IMPORTED_MODULE_3__.Vector4LineComponent, { lockObject: this.props.lockObject, label: "Row #0", value: this.state.value.getRow(0), onChange: (value) => this.updateRow(value, 0) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_vector4LineComponent__WEBPACK_IMPORTED_MODULE_3__.Vector4LineComponent, { lockObject: this.props.lockObject, label: "Row #1", value: this.state.value.getRow(1), onChange: (value) => this.updateRow(value, 1) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_vector4LineComponent__WEBPACK_IMPORTED_MODULE_3__.Vector4LineComponent, { lockObject: this.props.lockObject, label: "Row #2", value: this.state.value.getRow(2), onChange: (value) => this.updateRow(value, 2) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_vector4LineComponent__WEBPACK_IMPORTED_MODULE_3__.Vector4LineComponent, { lockObject: this.props.lockObject, label: "Row #3", value: this.state.value.getRow(3), onChange: (value) => this.updateRow(value, 3) })] }))), this.state.mode !== 0 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "secondLine" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Angle", lockObject: this.props.lockObject, minimum: 0, maximum: 2 * Math.PI, useEuler: true, step: 0.1, directValue: this.state.angle, onChange: (value) => this.updateBasedOnMode(value) }) })))] })));
+                        } }) }), this.state.mode === 0 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "secondLine", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_vector4LineComponent__WEBPACK_IMPORTED_MODULE_3__.Vector4LineComponent, { lockObject: this.props.lockObject, label: "Row #0", value: this.state.value.getRow(0), onChange: (value) => this.updateRow(value, 0) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_vector4LineComponent__WEBPACK_IMPORTED_MODULE_3__.Vector4LineComponent, { lockObject: this.props.lockObject, label: "Row #1", value: this.state.value.getRow(1), onChange: (value) => this.updateRow(value, 1) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_vector4LineComponent__WEBPACK_IMPORTED_MODULE_3__.Vector4LineComponent, { lockObject: this.props.lockObject, label: "Row #2", value: this.state.value.getRow(2), onChange: (value) => this.updateRow(value, 2) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_vector4LineComponent__WEBPACK_IMPORTED_MODULE_3__.Vector4LineComponent, { lockObject: this.props.lockObject, label: "Row #3", value: this.state.value.getRow(3), onChange: (value) => this.updateRow(value, 3) })] })), this.state.mode !== 0 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "secondLine", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sliderLineComponent__WEBPACK_IMPORTED_MODULE_5__.SliderLineComponent, { label: "Angle", lockObject: this.props.lockObject, minimum: 0, maximum: 2 * Math.PI, useEuler: true, step: 0.1, directValue: this.state.angle, onChange: (value) => this.updateBasedOnMode(value) }) }))] }));
     }
 }
 
@@ -62487,11 +62577,11 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         }
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "numeric" }, { 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" }), this.props.label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "numeric-label", title: this.props.label }, { children: `${this.props.label}: ` }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), onFocus: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "numeric", 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" }), this.props.label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "numeric-label", title: this.props.label, children: `${this.props.label}: ` })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), onFocus: () => {
                         if (this.props.lockObject) {
                             this.props.lockObject.lock = true;
                         }
-                    }, onBlur: () => this.onBlur() })] })));
+                    }, onBlur: () => this.onBlur() })] }));
     }
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -62580,10 +62670,9 @@ class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         this.raiseOnPropertyChanged(newValue, store);
     }
     render() {
-        var _a;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "listLine" + (this.props.className ? " " + this.props.className : "") }, { 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, color: "black", 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: "options" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("select", Object.assign({ onChange: (evt) => this.updateValue(evt.target.value), value: (_a = this.state.value) !== null && _a !== void 0 ? _a : "" }, { children: this.props.options.map((option, i) => {
-                            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("option", Object.assign({ selected: option.selected, value: option.value, title: option.label }, { children: option.label }), option.label + i));
-                        }) })) }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "listLine" + (this.props.className ? " " + this.props.className : ""), 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, color: "black", className: "icon" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", title: this.props.label, children: this.props.label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "options", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("select", { onChange: (evt) => this.updateValue(evt.target.value), value: this.state.value ?? "", children: this.props.options.map((option, i) => {
+                            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("option", { selected: option.selected, value: option.value, title: option.label, children: option.label }, option.label + i));
+                        }) }) })] }));
     }
 }
 
@@ -62686,13 +62775,13 @@ class SliderLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         return value;
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "sliderLine" }, { 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" }), (!this.props.icon || this.props.label != "") && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: this.props.margin ? "label withMargins" : "label", title: this.props.label }, { children: this.props.label }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, isInteger: this.props.decimalCount === 0, smallUI: true, label: "", target: this.state, digits: this.props.decimalCount === undefined ? 4 : this.props.decimalCount, propertyName: "value", min: this.props.minimum, max: this.props.maximum, onEnter: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "sliderLine", 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" }), (!this.props.icon || this.props.label != "") && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: this.props.margin ? "label withMargins" : "label", title: this.props.label, children: this.props.label })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, isInteger: this.props.decimalCount === 0, smallUI: true, label: "", target: this.state, digits: this.props.decimalCount === undefined ? 4 : this.props.decimalCount, propertyName: "value", min: this.props.minimum, max: this.props.maximum, onEnter: () => {
                         const changed = this.prepareDataToRead(this.state.value);
                         this.onChange(changed);
                     }, onChange: () => {
                         const changed = this.prepareDataToRead(this.state.value);
                         this.onChange(changed);
-                    }, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: this.props.unit }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "slider" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { className: "range", type: "range", step: this.props.step, min: this.prepareDataToRead(this.props.minimum), max: this.prepareDataToRead(this.props.maximum), value: this.prepareDataToRead(this.state.value), onInput: (evt) => this.onInput(evt.target.value), onChange: (evt) => this.onChange(evt.target.value) }) }))] })));
+                    }, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: this.props.unit }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "slider", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { className: "range", type: "range", step: this.props.step, min: this.prepareDataToRead(this.props.minimum), max: this.prepareDataToRead(this.props.maximum), value: this.prepareDataToRead(this.state.value), onInput: (evt) => this.onInput(evt.target.value), onChange: (evt) => this.onChange(evt.target.value) }) })] }));
     }
 }
 
@@ -62900,7 +62989,7 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
         const value = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_2__.conflictingValuesPlaceholder ? "" : this.state.value;
         const placeholder = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_2__.conflictingValuesPlaceholder ? _targetsProxy__WEBPACK_IMPORTED_MODULE_2__.conflictingValuesPlaceholder : this.props.placeholder || "";
         const step = this.props.step || (this.props.roundValues ? 1 : 0.01);
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: this.props.multilines ? "textInputArea" : this.props.unit !== undefined ? "textInputLine withUnits" : "textInputLine" }, { 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, color: "black", className: "icon" }), this.props.label !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "label", title: this.props.label }, { children: this.props.label }))), this.props.multilines && ((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__.jsx)("textarea", { value: this.state.value, onFocus: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: this.props.multilines ? "textInputArea" : this.props.unit !== undefined ? "textInputLine withUnits" : "textInputLine", 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, color: "black", className: "icon" }), this.props.label !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", title: this.props.label, children: this.props.label })), this.props.multilines && ((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__.jsx)("textarea", { value: this.state.value, onFocus: () => {
                             if (this.props.lockObject) {
                                 this.props.lockObject.lock = true;
                             }
@@ -62914,7 +63003,7 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
                             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: (evt) => {
+                        } }) })), !this.props.multilines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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;
                                 }
@@ -62923,7 +63012,7 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
                                 if (this.props.lockObject) {
                                     this.props.lockObject.lock = true;
                                 }
-                            }, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), placeholder: placeholder, type: this.props.numeric ? "number" : "text", step: step }), this.props.arrows && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_inputArrowsComponent__WEBPACK_IMPORTED_MODULE_3__.InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (dragging) => this.setState({ dragging }) }))] }))), this.props.unit] })));
+                            }, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), placeholder: placeholder, type: this.props.numeric ? "number" : "text", step: step }), this.props.arrows && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_inputArrowsComponent__WEBPACK_IMPORTED_MODULE_3__.InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (dragging) => this.setState({ dragging }) }))] })), this.props.unit] }));
     }
 }
 
@@ -62964,13 +63053,12 @@ class TextLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             return null;
         }
         if (this.props.onLink || this.props.url) {
-            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "link-value", title: this.props.value, onClick: () => this.onLink() }, { children: this.props.url ? "doc" : this.props.value || "no name" })));
+            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "link-value", title: this.props.value, onClick: () => this.onLink(), children: this.props.url ? "doc" : this.props.value || "no name" }));
         }
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "value", title: this.props.value, style: { color: this.props.color ? this.props.color : "" } }, { children: this.props.value || "no name" })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "value", title: this.props.value, style: { color: this.props.color ? this.props.color : "" }, children: this.props.value || "no name" }));
     }
     render() {
-        var _a, _b, _c;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: this.props.underline ? "textLine underline" : "textLine" + (this.props.additionalClass ? " " + this.props.additionalClass : "") }, { 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: (_b = (_a = this.props.tooltip) !== null && _a !== void 0 ? _a : this.props.label) !== null && _b !== void 0 ? _b : "" }, { children: (_c = this.props.label) !== null && _c !== void 0 ? _c : "" })), this.renderContent()] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: this.props.underline ? "textLine underline" : "textLine" + (this.props.additionalClass ? " " + this.props.additionalClass : ""), 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", { className: "label", title: this.props.tooltip ?? this.props.label ?? "", children: this.props.label ?? "" }), this.renderContent()] }));
     }
 }
 
@@ -63049,7 +63137,7 @@ class Vector2LineComponent 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: [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__.jsxs)("div", Object.assign({ className: "firstLine", title: this.props.label }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "label" }, { children: this.props.label })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "vector" }, { children: `X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.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 && ((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_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "x", step: this.props.step, value: this.state.value.x, onChange: (value) => this.updateStateX(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "y", step: this.props.step, value: this.state.value.y, onChange: (value) => this.updateStateY(value) })] })))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "vector3Line", 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__.jsxs)("div", { className: "firstLine", title: this.props.label, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", children: this.props.label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "vector", children: `X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}` }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand", children: chevron })] }), this.state.isExpanded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "secondLine", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "x", step: this.props.step, value: this.state.value.x, onChange: (value) => this.updateStateX(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "y", step: this.props.step, value: this.state.value.y, onChange: (value) => this.updateStateY(value) })] }))] }));
     }
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -63145,8 +63233,8 @@ 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, { 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)) })] })))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "vector3Line", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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", { className: "label", title: this.props.label, children: this.props.label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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", { 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", { 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", { 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", { 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
@@ -63247,7 +63335,7 @@ class Vector4LineComponent 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__.jsx)("div", Object.assign({ className: "vector" }, { children: `X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}, Z: ${this.state.value.z.toFixed(2)}, W: ${this.state.value.w.toFixed(2)}` })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand" }, { children: chevron }))] })), (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_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "x", step: this.props.step, value: this.state.value.x, onChange: (value) => this.updateStateX(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "y", step: this.props.step, value: this.state.value.y, onChange: (value) => this.updateStateY(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "z", step: this.props.step, value: this.state.value.z, onChange: (value) => this.updateStateZ(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "w", step: this.props.step, value: this.state.value.w, onChange: (value) => this.updateStateW(value) })] }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "vector3Line", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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", { className: "label", title: this.props.label, children: this.props.label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "vector", children: `X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}, Z: ${this.state.value.z.toFixed(2)}, W: ${this.state.value.w.toFixed(2)}` }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand", children: chevron })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "secondLine", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "x", step: this.props.step, value: this.state.value.x, onChange: (value) => this.updateStateX(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "y", step: this.props.step, value: this.state.value.y, onChange: (value) => this.updateStateY(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "z", step: this.props.step, value: this.state.value.z, onChange: (value) => this.updateStateZ(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__.NumericInputComponent, { lockObject: this.props.lockObject, label: "w", step: this.props.step, value: this.state.value.w, onChange: (value) => this.updateStateW(value) })] })] }));
     }
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -63622,7 +63710,7 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         return false;
     }
     populateConnectedEntriesBeforeRemoval(item, items, inputs, outputs) {
-        inputs.push(...item.content.inputs.filter((i) => i.isConnected && items.every((selected) => { var _a; return selected.content.data !== ((_a = i.connectedPort) === null || _a === void 0 ? void 0 : _a.ownerData); })).map((i) => i.connectedPort));
+        inputs.push(...item.content.inputs.filter((i) => i.isConnected && items.every((selected) => selected.content.data !== i.connectedPort?.ownerData)).map((i) => i.connectedPort));
         outputs.push(...item.content.outputs
             .filter((i) => i.isConnected)
             .map((i) => i.endpoints)
@@ -63696,7 +63784,7 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             this.props.stateManager.onRebuildRequiredObservable.notifyObservers(false);
             return;
         }
-        if (!evt.ctrlKey || this.props.stateManager.lockObject.lock) {
+        if ((!evt.ctrlKey && !evt.metaKey) || this.props.stateManager.lockObject.lock) {
             return;
         }
         if (evt.key === "c" || evt.key === "C") {
@@ -64146,6 +64234,40 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
     }
     onDown(evt) {
         this._rootContainer.setPointerCapture(evt.pointerId);
+        // Port dragging
+        if (evt.nativeEvent.srcElement && evt.nativeEvent.srcElement.nodeName === "IMG") {
+            if (!this._candidateLink) {
+                const portElement = evt.nativeEvent.srcElement.parentElement.port;
+                if (this._altKeyIsPressed && (portElement.portData.isConnected || portElement.portData.hasEndpoints)) {
+                    const node = portElement.node;
+                    // Delete connection
+                    const links = node.getLinksForPortData(portElement.portData);
+                    links.forEach((link) => {
+                        link.dispose(false);
+                    });
+                    // Pick the first one as target port
+                    const targetNode = links[0].nodeA === node ? links[0].nodeB : links[0].nodeA;
+                    const targetPort = links[0].nodeA === node ? links[0].portB : links[0].portA;
+                    // Start a new one
+                    this._candidateLink = new _nodeLink__WEBPACK_IMPORTED_MODULE_4__.NodeLink(this, targetPort, targetNode);
+                }
+                else if (this._multiKeyIsPressed && (portElement.portData.isConnected || portElement.portData.hasEndpoints)) {
+                    const node = portElement.node;
+                    const links = node.getLinksForPortData(portElement.portData);
+                    // Pick the first one as target port
+                    const linkToConsider = this._selectedLink || links[0];
+                    const targetNode = linkToConsider.nodeA === node ? linkToConsider.nodeB : linkToConsider.nodeA;
+                    const targetPort = linkToConsider.nodeA === node ? linkToConsider.portB : linkToConsider.portA;
+                    // Start a new one
+                    this._candidateLink = new _nodeLink__WEBPACK_IMPORTED_MODULE_4__.NodeLink(this, targetPort, targetNode);
+                }
+                else {
+                    this._candidateLink = new _nodeLink__WEBPACK_IMPORTED_MODULE_4__.NodeLink(this, portElement, portElement.node);
+                }
+                this._candidateLinkedHasMoved = false;
+            }
+            return;
+        }
         // Selection?
         if (evt.currentTarget === this._hostCanvas && this._multiKeyIsPressed) {
             this._selectionBox = this.props.stateManager.hostDocument.createElement("div");
@@ -64174,15 +64296,6 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             this._frameCandidate.style.height = "0px";
             return;
         }
-        // Port dragging
-        if (evt.nativeEvent.srcElement && evt.nativeEvent.srcElement.nodeName === "IMG") {
-            if (!this._candidateLink) {
-                const portElement = evt.nativeEvent.srcElement.parentElement.port;
-                this._candidateLink = new _nodeLink__WEBPACK_IMPORTED_MODULE_4__.NodeLink(this, portElement, portElement.node);
-                this._candidateLinkedHasMoved = false;
-            }
-            return;
-        }
         this.props.stateManager.onSelectionChangedObservable.notifyObservers(null);
         this._mouseStartPointX = evt.clientX;
         this._mouseStartPointY = evt.clientY;
@@ -64304,6 +64417,9 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             }
             // No destination so let's spin a new input node
             const newDefaultInput = this.props.stateManager.createDefaultInputData(this.props.stateManager.data, this._candidateLink.portA.portData, this);
+            if (!newDefaultInput) {
+                return;
+            }
             const pointName = newDefaultInput.name;
             const emittedNodeData = newDefaultInput.data;
             pointA = emittedNodeData.getPortByName(pointName);
@@ -64320,8 +64436,7 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             emittedNodeData.inputs.forEach((portData) => {
                 if (portData.connectedPort) {
                     const existingNodes = this.nodes.filter((n) => {
-                        var _a;
-                        return n.content.data === ((_a = portData.connectedPort) === null || _a === void 0 ? void 0 : _a.ownerData);
+                        return n.content.data === portData.connectedPort?.ownerData;
                     });
                     const connectedNode = existingNodes[0];
                     if (connectedNode.x === 0 && connectedNode.y === 0) {
@@ -64387,7 +64502,7 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             });
         }
         this.connectNodes(nodeA, pointA, nodeB, pointB);
-        linksToNotifyForDispose === null || linksToNotifyForDispose === void 0 ? void 0 : linksToNotifyForDispose.forEach((link) => {
+        linksToNotifyForDispose?.forEach((link) => {
             link.onDisposedObservable.notifyObservers(link);
             link.onDisposedObservable.clear();
         });
@@ -64415,8 +64530,7 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         newNode.content.inputs.forEach((portData) => {
             if (portData.connectedPort) {
                 const existingNodes = this.nodes.filter((n) => {
-                    var _a;
-                    return n.content.data === ((_a = portData.connectedPort) === null || _a === void 0 ? void 0 : _a.ownerData);
+                    return n.content.data === portData.connectedPort?.ownerData;
                 });
                 const connectedNode = existingNodes[0];
                 if (connectedNode.x === 0 && connectedNode.y === 0) {
@@ -64477,7 +64591,7 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         this.stateManager.onSelectionChangedObservable.notifyObservers({ selection: frame });
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "graph-canvas", onWheel: (evt) => this.onWheel(evt), onPointerMove: (evt) => this.onMove(evt), onPointerDown: (evt) => this.onDown(evt), onPointerUp: (evt) => this.onUp(evt) }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "graph-container" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "graph-canvas-container" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "frame-container" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("svg", { id: "graph-svg-container" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "selection-container" })] })) })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "graph-canvas", onWheel: (evt) => this.onWheel(evt), onPointerMove: (evt) => this.onMove(evt), onPointerDown: (evt) => this.onDown(evt), onPointerUp: (evt) => this.onUp(evt), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "graph-container", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "graph-canvas-container" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "frame-container" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("svg", { id: "graph-svg-container" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "selection-container" })] }) }));
     }
 }
 GraphCanvasComponent.NodeWidth = 100;
@@ -65581,7 +65695,6 @@ class GraphFrame {
         this.ports.forEach((framePort) => framePort.node._refreshLinks());
     }
     _movePortUp(elementsArray, nodePort, framePortList) {
-        var _a;
         // update UI
         const indexInElementArray = elementsArray.findIndex((elem) => elem.dataset.framePortId === `${nodePort.framePortId}`);
         if (indexInElementArray === 0) {
@@ -65589,7 +65702,7 @@ class GraphFrame {
         }
         const secondPortElement = elementsArray[indexInElementArray];
         const firstPortElement = elementsArray[indexInElementArray - 1];
-        (_a = firstPortElement.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(secondPortElement, firstPortElement);
+        firstPortElement.parentElement?.insertBefore(secondPortElement, firstPortElement);
         // update Frame Port Container
         const indexInContainer = framePortList.findIndex((framePort) => framePort === nodePort);
         [framePortList[indexInContainer - 1], framePortList[indexInContainer]] = [framePortList[indexInContainer], framePortList[indexInContainer - 1]]; // swap idicies
@@ -65642,7 +65755,6 @@ class GraphFrame {
         this.ports.forEach((framePort) => framePort.node._refreshLinks());
     }
     _movePortDown(elementsArray, nodePort, framePortList) {
-        var _a;
         // update UI
         const indexInElementArray = elementsArray.findIndex((elem) => elem.dataset.framePortId === `${nodePort.framePortId}`);
         if (indexInElementArray === elementsArray.length - 1) {
@@ -65650,7 +65762,7 @@ class GraphFrame {
         }
         const firstPort = elementsArray[indexInElementArray];
         const secondPort = elementsArray[indexInElementArray + 1];
-        (_a = firstPort.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(secondPort, firstPort);
+        firstPort.parentElement?.insertBefore(secondPort, firstPort);
         // update Frame Port Container
         const indexInContainer = framePortList.findIndex((framePort) => framePort === nodePort);
         [framePortList[indexInContainer], framePortList[indexInContainer + 1]] = [framePortList[indexInContainer + 1], framePortList[indexInContainer]]; // swap idicies
@@ -65715,7 +65827,6 @@ class GraphFrame {
         this.element.style.height = `${frameElementHeight + heightModification}px`;
     }
     dispose() {
-        var _a;
         if (this._onSelectionChangedObserver) {
             this._ownerCanvas.stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
         }
@@ -65725,7 +65836,7 @@ class GraphFrame {
         if (this._onExposePortOnFrameObserver) {
             this._ownerCanvas.stateManager.onExposePortOnFrameObservable.remove(this._onExposePortOnFrameObserver);
         }
-        (_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
+        this.element.parentElement?.removeChild(this.element);
         this._ownerCanvas.frames.splice(this._ownerCanvas.frames.indexOf(this), 1);
         this.onExpandStateChanged.clear();
     }
@@ -66979,11 +67090,14 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 
 class BlockTools {
     static GetBlockFromString(data, scene, nodeMaterial) {
         switch (data) {
+            case "HeightToNormalBlock":
+                return new core_Materials_Node_Blocks_Fragment_discardBlock__WEBPACK_IMPORTED_MODULE_0__.HeightToNormalBlock("HeightToNormal");
             case "ElbowBlock":
                 return new core_Materials_Node_Blocks_Fragment_discardBlock__WEBPACK_IMPORTED_MODULE_0__.ElbowBlock("");
             case "TwirlBlock":
@@ -67593,9 +67707,9 @@ class LogComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         logConsole.scrollTop = logConsole.scrollHeight;
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "nme-log-console", ref: "log-console" }, { children: this.state.logs.map((l, i) => {
-                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "log" + (l.isError ? " error" : "") }, { children: l.time.getHours() + ":" + l.time.getMinutes() + ":" + l.time.getSeconds() + ": " + l.message }), i));
-            }) })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "nme-log-console", ref: "log-console", children: this.state.logs.map((l, i) => {
+                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "log" + (l.isError ? " error" : ""), children: l.time.getHours() + ":" + l.time.getMinutes() + ":" + l.time.getSeconds() + ": " + l.message }, i));
+            }) }));
     }
 }
 
@@ -67831,6 +67945,7 @@ class NodeListComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 "ColorBlock",
                 "InstanceColorBlock",
                 "NormalBlock",
+                "HeightToNormalBlock",
                 "TBNBlock",
                 "PerturbNormalBlock",
                 "NormalBlendBlock",
@@ -67929,12 +68044,12 @@ class NodeListComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 blockList.push(line);
             }
             if (blockList.length) {
-                blockMenu.push((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: key.replace("__", ": ").replace("_", " "), closed: false }, { children: blockList }), key + " blocks"));
+                blockMenu.push((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: key.replace("__", ": ").replace("_", " "), closed: false, children: blockList }, key + " blocks"));
             }
         }
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "nodeList" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "panes" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "filter" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "text", placeholder: "Filter", onFocus: () => (this.props.globalState.lockObject.lock = true), onBlur: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "nodeList", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "panes", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "filter", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "text", placeholder: "Filter", onFocus: () => (this.props.globalState.lockObject.lock = true), onBlur: () => {
                                     this.props.globalState.lockObject.lock = false;
-                                }, onChange: (evt) => this.filterContent(evt.target.value) }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "list-container" }, { children: blockMenu }))] })) })) })));
+                                }, onChange: (evt) => this.filterContent(evt.target.value) }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "list-container", children: blockMenu })] }) }) }));
     }
 }
 NodeListComponent._Tooltips = {
@@ -68083,6 +68198,7 @@ NodeListComponent._Tooltips = {
     TwirlBlock: "Apply a twirl rotation",
     ElbowBlock: "Passthrough block mostly used to organize your graph",
     ClipPlanesBlock: "A node that add clip planes support",
+    HeightToNormalBlock: "Convert a height map into a normal map",
 };
 
 
@@ -68168,24 +68284,24 @@ class PreviewAreaComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             { label: "OneOne", value: core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.ParticleSystem.BLENDMODE_ONEONE },
             { label: "Standard", value: core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.ParticleSystem.BLENDMODE_STANDARD },
         ];
-        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__.jsxs)("div", Object.assign({ id: "preview", style: { height: this.props.width + "px" } }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("canvas", { onPointerOver: this._onPointerOverCanvas, onPointerOut: this._onPointerOutCanvas, id: "preview-canvas" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "waitPanel" + (this.state.isLoading ? "" : " hidden") }, { children: "Please wait, loading..." }))] })), this.props.globalState.mode === core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Particle && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "preview-config-bar", className: "extended" }, { children: (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: this.props.globalState, propertyName: "particleSystemBlendMode", noDirectUpdate: true, onSelect: (value) => {
+        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__.jsxs)("div", { id: "preview", style: { height: this.props.width + "px" }, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("canvas", { onPointerOver: this._onPointerOverCanvas, onPointerOut: this._onPointerOutCanvas, id: "preview-canvas" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "waitPanel" + (this.state.isLoading ? "" : " hidden"), children: "Please wait, loading..." })] }), this.props.globalState.mode === core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Particle && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "preview-config-bar", className: "extended", children: (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: this.props.globalState, propertyName: "particleSystemBlendMode", noDirectUpdate: true, onSelect: (value) => {
                             this.changeParticleSystemBlendMode(value);
-                        } }) }))), this.props.globalState.mode === core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Material && ((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)("div", Object.assign({ id: "preview-config-bar" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ title: "Render without back face culling", onClick: () => this.changeBackFaceCulling(!this.props.globalState.backFaceCulling), className: "button back-face" + (!this.props.globalState.backFaceCulling ? " selected" : "") }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_doubleSided_svg__WEBPACK_IMPORTED_MODULE_3__, alt: "" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ title: "Render with depth pre-pass", onClick: () => this.changeDepthPrePass(!this.props.globalState.depthPrePass), className: "button depth-pass" + (this.props.globalState.depthPrePass ? " selected" : "") }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_depthPass_svg__WEBPACK_IMPORTED_MODULE_4__, alt: "" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ title: "Turn on/off hemispheric light", onClick: () => {
+                        } }) })), this.props.globalState.mode === core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Material && ((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)("div", { id: "preview-config-bar", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Render without back face culling", onClick: () => this.changeBackFaceCulling(!this.props.globalState.backFaceCulling), className: "button back-face" + (!this.props.globalState.backFaceCulling ? " selected" : ""), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_doubleSided_svg__WEBPACK_IMPORTED_MODULE_3__, alt: "" }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Render with depth pre-pass", onClick: () => this.changeDepthPrePass(!this.props.globalState.depthPrePass), className: "button depth-pass" + (this.props.globalState.depthPrePass ? " selected" : ""), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_depthPass_svg__WEBPACK_IMPORTED_MODULE_4__, alt: "" }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Turn on/off hemispheric light", onClick: () => {
                                     this.props.globalState.hemisphericLight = !this.props.globalState.hemisphericLight;
                                     core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.DataStorage.WriteBoolean("HemisphericLight", this.props.globalState.hemisphericLight);
                                     this.props.globalState.onLightUpdated.notifyObservers();
                                     this.forceUpdate();
-                                }, className: "button hemispheric-light" + (this.props.globalState.hemisphericLight ? " selected" : "") }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_omni_svg__WEBPACK_IMPORTED_MODULE_5__, alt: "" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ title: "Turn on/off direction light #1", onClick: () => {
+                                }, className: "button hemispheric-light" + (this.props.globalState.hemisphericLight ? " selected" : ""), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_omni_svg__WEBPACK_IMPORTED_MODULE_5__, alt: "" }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Turn on/off direction light #1", onClick: () => {
                                     this.props.globalState.directionalLight1 = !this.props.globalState.directionalLight1;
                                     core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.DataStorage.WriteBoolean("DirectionalLight1", this.props.globalState.directionalLight1);
                                     this.props.globalState.onLightUpdated.notifyObservers();
                                     this.forceUpdate();
-                                }, className: "button direction-light-1" + (this.props.globalState.directionalLight1 ? " selected" : "") }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_directionalRight_svg__WEBPACK_IMPORTED_MODULE_6__, alt: "" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ title: "Turn on/off direction light #0", onClick: () => {
+                                }, className: "button direction-light-1" + (this.props.globalState.directionalLight1 ? " selected" : ""), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_directionalRight_svg__WEBPACK_IMPORTED_MODULE_6__, alt: "" }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Turn on/off direction light #0", onClick: () => {
                                     this.props.globalState.directionalLight0 = !this.props.globalState.directionalLight0;
                                     core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_2__.DataStorage.WriteBoolean("DirectionalLight0", this.props.globalState.directionalLight0);
                                     this.props.globalState.onLightUpdated.notifyObservers();
                                     this.forceUpdate();
-                                }, className: "button direction-light-0" + (this.props.globalState.directionalLight0 ? " selected" : "") }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_directionalLeft_svg__WEBPACK_IMPORTED_MODULE_7__, alt: "" }) }))] })) }))] }));
+                                }, className: "button direction-light-0" + (this.props.globalState.directionalLight0 ? " selected" : ""), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_directionalLeft_svg__WEBPACK_IMPORTED_MODULE_7__, alt: "" }) })] }) }))] }));
     }
 }
 
@@ -68230,8 +68346,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-
-
 
 
 
@@ -68347,7 +68461,6 @@ class PreviewManager {
         }
     }
     _prepareScene() {
-        var _a, _b;
         this._camera.useFramingBehavior = this._globalState.mode === core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.NodeMaterialModes.Material;
         switch (this._globalState.mode) {
             case core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.NodeMaterialModes.Material: {
@@ -68381,7 +68494,7 @@ class PreviewManager {
             case core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.NodeMaterialModes.Particle: {
                 this._camera.radius = this._globalState.previewType === _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Explosion ? 50 : this._globalState.previewType === _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.DefaultParticleSystem ? 6 : 20;
                 this._camera.upperRadiusLimit = 5000;
-                this._globalState.particleSystemBlendMode = (_b = (_a = this._particleSystem) === null || _a === void 0 ? void 0 : _a.blendMode) !== null && _b !== void 0 ? _b : core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.ParticleSystem.BLENDMODE_STANDARD;
+                this._globalState.particleSystemBlendMode = this._particleSystem?.blendMode ?? core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.ParticleSystem.BLENDMODE_STANDARD;
                 break;
             }
         }
@@ -68419,13 +68532,16 @@ class PreviewManager {
             if (this._globalState.mode === core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.NodeMaterialModes.Material) {
                 switch (this._globalState.previewType) {
                     case _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Box:
-                        core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://models.babylonjs.com/", "roundedCube.glb", this._scene).then(() => {
+                        core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://assets.babylonjs.com/meshes/", "roundedCube.glb", this._scene).then(() => {
                             this._meshes.push(...this._scene.meshes);
                             this._prepareScene();
                         });
                         return;
                     case _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Sphere:
-                        this._meshes.push((0,core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.CreateSphere)("dummy-sphere", { segments: 32, diameter: 2 }, this._scene));
+                        core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://assets.babylonjs.com/meshes/", "previewSphere.glb", this._scene).then(() => {
+                            this._meshes.push(...this._scene.meshes);
+                            this._prepareScene();
+                        });
                         break;
                     case _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Torus:
                         this._meshes.push((0,core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.CreateTorus)("dummy-torus", {
@@ -68435,20 +68551,20 @@ class PreviewManager {
                         }, this._scene));
                         break;
                     case _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Cylinder:
-                        core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://models.babylonjs.com/", "roundedCylinder.glb", this._scene).then(() => {
+                        core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://assets.babylonjs.com/meshes/", "roundedCylinder.glb", this._scene).then(() => {
                             this._meshes.push(...this._scene.meshes);
                             this._prepareScene();
                         });
                         return;
                     case _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Plane: {
-                        const plane = (0,core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.CreateGround)("dummy-plane", { width: 2, height: 2, subdivisions: 128 }, this._scene);
-                        plane.scaling.y = -1;
-                        plane.rotation.x = Math.PI;
-                        this._meshes.push(plane);
+                        core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://assets.babylonjs.com/meshes/", "highPolyPlane.glb", this._scene).then(() => {
+                            this._meshes.push(...this._scene.meshes);
+                            this._prepareScene();
+                        });
                         break;
                     }
                     case _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.ShaderBall:
-                        core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://models.babylonjs.com/", "shaderBall.glb", this._scene).then(() => {
+                        core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://assets.babylonjs.com/meshes/", "shaderBall.glb", this._scene).then(() => {
                             this._meshes.push(...this._scene.meshes);
                             this._prepareScene();
                         });
@@ -68753,8 +68869,7 @@ class PreviewMeshControlComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
         this.props.globalState.onPreviewBackgroundChanged.notifyObservers();
     }
     changeBackgroundClick() {
-        var _a;
-        (_a = this._colorInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        this._colorInputRef.current?.click();
     }
     render() {
         const meshTypeOptions = [
@@ -68786,17 +68901,16 @@ class PreviewMeshControlComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
         }
         const options = this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Particle ? particleTypeOptions : meshTypeOptions;
         const accept = this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Particle ? ".json" : ".glb, .babylon, .obj";
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "preview-mesh-bar" }, { children: [(this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Material || this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Particle) && ((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_8__.OptionsLineComponent, { label: "", options: options, target: this.props.globalState, propertyName: "previewType", noDirectUpdate: true, onSelect: (value) => {
-                                var _a;
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "preview-mesh-bar", children: [(this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Material || this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Particle) && ((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_8__.OptionsLineComponent, { label: "", options: options, target: this.props.globalState, propertyName: "previewType", noDirectUpdate: true, onSelect: (value) => {
                                 if (value !== _previewType__WEBPACK_IMPORTED_MODULE_3__.PreviewType.Custom + 1) {
                                     this.changeMeshType(value);
                                 }
                                 else {
-                                    (_a = this._filePickerRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                                    this._filePickerRef.current?.click();
                                 }
-                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ style: {
+                            } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { style: {
                                 display: "none",
-                            }, title: "Preview with a custom mesh" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { ref: this._filePickerRef, id: "file-picker", type: "file", onChange: (evt) => this.useCustomMesh(evt), accept: accept }) }))] })), this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Material && ((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)("div", Object.assign({ title: "Turn-table animation", onClick: () => this.changeAnimation(), className: "button", id: "play-button" }, { children: this.props.globalState.rotatePreview ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_pauseIcon_svg__WEBPACK_IMPORTED_MODULE_6__, alt: "" }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_playIcon_svg__WEBPACK_IMPORTED_MODULE_7__, alt: "" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "color-picker-button", title: "Background color", className: "button align", onClick: (_) => this.changeBackgroundClick() }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_colorPicker_svg__WEBPACK_IMPORTED_MODULE_5__, alt: "", id: "color-picker-image" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { ref: this._colorInputRef, id: "color-picker", type: "color", value: this.props.globalState.backgroundColor.toHexString().slice(0, 7), onChange: (evt) => this.changeBackground(evt.target.value) })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ title: "Open preview in new window", id: "preview-new-window", onClick: () => this.onPopUp(), className: "button" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_popOut_svg__WEBPACK_IMPORTED_MODULE_4__, alt: "" }) }))] })));
+                            }, title: "Preview with a custom mesh", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { ref: this._filePickerRef, id: "file-picker", type: "file", onChange: (evt) => this.useCustomMesh(evt), accept: accept }) })] })), this.props.globalState.mode === core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialModes.Material && ((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)("div", { title: "Turn-table animation", onClick: () => this.changeAnimation(), className: "button", id: "play-button", children: this.props.globalState.rotatePreview ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_pauseIcon_svg__WEBPACK_IMPORTED_MODULE_6__, alt: "" }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_playIcon_svg__WEBPACK_IMPORTED_MODULE_7__, alt: "" }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "color-picker-button", title: "Background color", className: "button align", onClick: (_) => this.changeBackgroundClick(), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_colorPicker_svg__WEBPACK_IMPORTED_MODULE_5__, alt: "", id: "color-picker-image" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { ref: this._colorInputRef, id: "color-picker", type: "color", value: this.props.globalState.backgroundColor.toHexString().slice(0, 7), onChange: (evt) => this.changeBackground(evt.target.value) })] })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Open preview in new window", id: "preview-new-window", onClick: () => this.onPopUp(), className: "button", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _svgs_popOut_svg__WEBPACK_IMPORTED_MODULE_4__, alt: "" }) })] }));
     }
 }
 
@@ -68906,12 +69020,12 @@ class InputsPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Comp
         return null;
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "INPUTS" }, { children: this.props.inputs.map((ib) => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "INPUTS", children: this.props.inputs.map((ib) => {
                 if (!ib.isUniform || ib.isSystemValue || !ib.name) {
                     return null;
                 }
                 return this.renderInputBlock(ib);
-            }) })));
+            }) }));
     }
 }
 
@@ -69355,16 +69469,15 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         });
     }
     changeMode(value, force = false, loadDefault = true) {
-        var _a, _b;
         if (this.props.globalState.mode === value) {
             return false;
         }
         if (!force && !this.props.globalState.hostDocument.defaultView.confirm("Are your sure? You will lose your current changes (if any) if they are not saved!")) {
-            (_a = this._modeSelect.current) === null || _a === void 0 ? void 0 : _a.setValue(this.props.globalState.mode);
+            this._modeSelect.current?.setValue(this.props.globalState.mode);
             return false;
         }
         if (force) {
-            (_b = this._modeSelect.current) === null || _b === void 0 ? void 0 : _b.setValue(value);
+            this._modeSelect.current?.setValue(value);
         }
         if (loadDefault) {
             switch (value) {
@@ -69398,9 +69511,8 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         return true;
     }
     render() {
-        var _a, _b;
         if (this.state.currentNode) {
-            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "propertyTab" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "header" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "title" }, { children: "NODE MATERIAL EDITOR" }))] })), ((_a = this.state.currentNode) === null || _a === void 0 ? void 0 : _a.renderProperties()) || ((_b = this.state.currentNodePort) === null || _b === void 0 ? void 0 : _b.node.renderProperties())] })));
+            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "propertyTab", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "header", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "title", children: "NODE MATERIAL EDITOR" })] }), this.state.currentNode?.renderProperties() || this.state.currentNodePort?.node.renderProperties()] }));
         }
         if (this.state.currentFrameNodePort && this.state.currentFrame) {
             return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_graphSystem_properties_frameNodePortPropertyComponent__WEBPACK_IMPORTED_MODULE_9__.FrameNodePortPropertyTabComponent, { globalState: this.props.globalState, stateManager: this.props.globalState.stateManager, frame: this.state.currentFrame, frameNodePort: this.state.currentFrameNodePort }));
@@ -69427,7 +69539,7 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             { label: "Maximized", value: core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.Constants.ALPHA_MAXIMIZED },
             { label: "Pre-multiplied", value: core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.Constants.ALPHA_PREMULTIPLIED },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "propertyTab" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "header" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "title" }, { children: "NODE MATERIAL EDITOR" }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_26__.OptionsLineComponent, { ref: this._modeSelect, label: "Mode", target: this, extractValue: () => this.props.globalState.mode, options: modeList, onSelect: (value) => this.changeMode(value), propertyName: "" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_27__.TextLineComponent, { label: "Version", value: core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.Engine.Version }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_27__.TextLineComponent, { label: "Help", value: "doc.babylonjs.com", underline: true, onLink: () => this.props.globalState.hostDocument.defaultView.open("https://doc.babylonjs.com/how_to/node_material", "_blank") }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_19__.TextInputLineComponent, { label: "Comment", multilines: true, lockObject: this.props.globalState.lockObject, value: this.props.globalState.nodeMaterial.comment, target: this.props.globalState.nodeMaterial, propertyName: "comment" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_25__.ButtonLineComponent, { label: "Reset to default", onClick: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "propertyTab", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "header", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "title", children: "NODE MATERIAL EDITOR" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "GENERAL", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_26__.OptionsLineComponent, { ref: this._modeSelect, label: "Mode", target: this, extractValue: () => this.props.globalState.mode, options: modeList, onSelect: (value) => this.changeMode(value), propertyName: "" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_27__.TextLineComponent, { label: "Version", value: core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.Engine.Version }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_27__.TextLineComponent, { label: "Help", value: "doc.babylonjs.com", underline: true, onLink: () => this.props.globalState.hostDocument.defaultView.open("https://doc.babylonjs.com/how_to/node_material", "_blank") }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_19__.TextInputLineComponent, { label: "Comment", multilines: true, lockObject: this.props.globalState.lockObject, value: this.props.globalState.nodeMaterial.comment, target: this.props.globalState.nodeMaterial, propertyName: "comment" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_25__.ButtonLineComponent, { label: "Reset to default", onClick: () => {
                                         switch (this.props.globalState.mode) {
                                             case core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.NodeMaterialModes.Material:
                                                 this.props.globalState.nodeMaterial.setToDefault();
@@ -69443,11 +69555,11 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
                                                 break;
                                         }
                                         this.props.globalState.onResetRequiredObservable.notifyObservers(true);
-                                    } })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "UI" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_25__.ButtonLineComponent, { label: "Zoom to fit", onClick: () => {
+                                    } })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "UI", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_25__.ButtonLineComponent, { label: "Zoom to fit", onClick: () => {
                                         this.props.globalState.onZoomToFitRequiredObservable.notifyObservers();
                                     } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_25__.ButtonLineComponent, { label: "Reorganize", onClick: () => {
                                         this.props.globalState.onReOrganizedRequiredObservable.notifyObservers();
-                                    } })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "OPTIONS" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_7__.CheckBoxLineComponent, { label: "Embed textures when saving", isSelected: () => core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.DataStorage.ReadBoolean("EmbedTextures", true), onSelect: (value) => {
+                                    } })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "OPTIONS", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_7__.CheckBoxLineComponent, { label: "Embed textures when saving", isSelected: () => core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.DataStorage.ReadBoolean("EmbedTextures", true), onSelect: (value) => {
                                         core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.DataStorage.WriteBoolean("EmbedTextures", value);
                                     } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_29__.SliderLineComponent, { lockObject: this.props.lockObject, label: "Grid size", minimum: 0, maximum: 100, step: 5, decimalCount: 0, directValue: gridSize, onChange: (value) => {
                                         core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.DataStorage.WriteNumber("GridSize", value);
@@ -69456,7 +69568,7 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
                                     } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_7__.CheckBoxLineComponent, { label: "Show grid", isSelected: () => core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.DataStorage.ReadBoolean("ShowGrid", true), onSelect: (value) => {
                                         core_Misc_tools__WEBPACK_IMPORTED_MODULE_5__.DataStorage.WriteBoolean("ShowGrid", value);
                                         this.props.globalState.stateManager.onGridSizeChanged.notifyObservers();
-                                    } })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "FILE" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_4__.FileButtonLineComponent, { label: "Load", onClick: (file) => this.load(file), accept: ".json" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_25__.ButtonLineComponent, { label: "Save", onClick: () => {
+                                    } })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "FILE", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_4__.FileButtonLineComponent, { label: "Load", onClick: (file) => this.load(file), accept: ".json" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_25__.ButtonLineComponent, { label: "Save", onClick: () => {
                                         this.save();
                                     } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_25__.ButtonLineComponent, { label: "Generate code", onClick: () => {
                                         shared_ui_components_stringTools__WEBPACK_IMPORTED_MODULE_3__.StringTools.DownloadAsFile(this.props.globalState.hostDocument, this.props.globalState.nodeMaterial.generateCode(), "code.txt");
@@ -69465,9 +69577,9 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
                                         shared_ui_components_stringTools__WEBPACK_IMPORTED_MODULE_3__.StringTools.DownloadAsFile(this.props.globalState.hostDocument, this.props.globalState.nodeMaterial.compiledShaders, "shaders.txt");
                                     } }), this.props.globalState.customSave && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_25__.ButtonLineComponent, { label: this.props.globalState.customSave.label, isDisabled: this.state.uploadInProgress, onClick: () => {
                                         this.customSave();
-                                    } })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_4__.FileButtonLineComponent, { label: "Load Frame", uploadName: "frame-upload", onClick: (file) => this.loadFrame(file), accept: ".json" })] })), !this.props.globalState.customSave && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SNIPPET" }, { children: [this.props.globalState.nodeMaterial.snippetId && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_27__.TextLineComponent, { label: "Snippet ID", value: this.props.globalState.nodeMaterial.snippetId }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_25__.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_25__.ButtonLineComponent, { label: "Save to snippet server", onClick: () => {
+                                    } })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_4__.FileButtonLineComponent, { label: "Load Frame", uploadName: "frame-upload", onClick: (file) => this.loadFrame(file), accept: ".json" })] }), !this.props.globalState.customSave && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "SNIPPET", children: [this.props.globalState.nodeMaterial.snippetId && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_27__.TextLineComponent, { label: "Snippet ID", value: this.props.globalState.nodeMaterial.snippetId }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_25__.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_25__.ButtonLineComponent, { label: "Save to snippet server", onClick: () => {
                                         this.saveToSnippetServer();
-                                    } })] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "TRANSPARENCY" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_7__.CheckBoxLineComponent, { label: "Force alpha blending", target: this.props.globalState.nodeMaterial, propertyName: "forceAlphaBlending", onValueChanged: () => this.props.globalState.stateManager.onUpdateRequiredObservable.notifyObservers(null) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_26__.OptionsLineComponent, { label: "Alpha mode", options: alphaModeOptions, target: this.props.globalState.nodeMaterial, propertyName: "alphaMode", onSelect: () => this.props.globalState.stateManager.onUpdateRequiredObservable.notifyObservers(null) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_inputsPropertyTabComponent__WEBPACK_IMPORTED_MODULE_12__.InputsPropertyTabComponent, { lockObject: this.props.lockObject, globalState: this.props.globalState, inputs: this.props.globalState.nodeMaterial.getInputBlocks() })] })] })));
+                                    } })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "TRANSPARENCY", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_7__.CheckBoxLineComponent, { label: "Force alpha blending", target: this.props.globalState.nodeMaterial, propertyName: "forceAlphaBlending", onValueChanged: () => this.props.globalState.stateManager.onUpdateRequiredObservable.notifyObservers(null) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_26__.OptionsLineComponent, { label: "Alpha mode", options: alphaModeOptions, target: this.props.globalState.nodeMaterial, propertyName: "alphaMode", onSelect: () => this.props.globalState.stateManager.onUpdateRequiredObservable.notifyObservers(null) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_inputsPropertyTabComponent__WEBPACK_IMPORTED_MODULE_12__.InputsPropertyTabComponent, { lockObject: this.props.lockObject, globalState: this.props.globalState, inputs: this.props.globalState.nodeMaterial.getInputBlocks() })] })] }));
     }
 }
 
@@ -69583,7 +69695,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/propertyTab/propertyTabComponent */ "../../../tools/nodeEditor/dist/components/propertyTab/propertyTabComponent.js");
 /* harmony import */ var _portal__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./portal */ "../../../tools/nodeEditor/dist/portal.js");
 /* harmony import */ var _components_log_logComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/log/logComponent */ "../../../tools/nodeEditor/dist/components/log/logComponent.js");
-/* harmony import */ var _sharedComponents_messageDialog__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./sharedComponents/messageDialog */ "../../../tools/nodeEditor/dist/sharedComponents/messageDialog.js");
+/* harmony import */ var shared_ui_components_components_MessageDialog__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! shared-ui-components/components/MessageDialog */ "../../../dev/sharedUiComponents/dist/components/MessageDialog.js");
 /* harmony import */ var _blockTools__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./blockTools */ "../../../tools/nodeEditor/dist/blockTools.js");
 /* harmony import */ var _components_preview_previewManager__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/preview/previewManager */ "../../../tools/nodeEditor/dist/components/preview/previewManager.js");
 /* harmony import */ var _components_preview_previewMeshControlComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/preview/previewMeshControlComponent */ "../../../tools/nodeEditor/dist/components/preview/previewMeshControlComponent.js");
@@ -69667,7 +69779,10 @@ class GraphEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 handleResize: true,
                 enablePopup: true,
             };
-            const options = Object.assign({ embedHostWidth: "100%" }, userOptions);
+            const options = {
+                embedHostWidth: "100%",
+                ...userOptions,
+            };
             const popUpWindow = this.createPopupWindow("PREVIEW AREA", "_PreviewHostWindow");
             if (popUpWindow) {
                 popUpWindow.addEventListener("beforeunload", this.handleClosingPopUp);
@@ -69776,6 +69891,8 @@ class GraphEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         };
         this.state = {
             showPreviewPopUp: false,
+            message: "",
+            isError: true,
         };
         this._graphCanvasRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
         this._diagramContainerRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
@@ -69837,6 +69954,9 @@ class GraphEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 return this.appendBlock(clone, false);
             }, this.props.globalState.hostDocument.querySelector(".diagram-container"));
         });
+        this.props.globalState.stateManager.onErrorMessageDialogRequiredObservable.add((message) => {
+            this.setState({ message: message, isError: true });
+        });
     }
     appendBlock(dataToAppend, recursion = true) {
         return this._graphCanvas.createNodeFromObject(dataToAppend instanceof core_Materials_Node_nodeMaterialBlock__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialBlock ? shared_ui_components_nodeGraphSystem_typeLedger__WEBPACK_IMPORTED_MODULE_17__.TypeLedger.NodeDataBuilder(dataToAppend, this._graphCanvas) : dataToAppend, (block) => {
@@ -69937,12 +70057,10 @@ class GraphEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         });
     }
     showWaitScreen() {
-        var _a;
-        (_a = this.props.globalState.hostDocument.querySelector(".wait-screen")) === null || _a === void 0 ? void 0 : _a.classList.remove("hidden");
+        this.props.globalState.hostDocument.querySelector(".wait-screen")?.classList.remove("hidden");
     }
     hideWaitScreen() {
-        var _a;
-        (_a = this.props.globalState.hostDocument.querySelector(".wait-screen")) === null || _a === void 0 ? void 0 : _a.classList.add("hidden");
+        this.props.globalState.hostDocument.querySelector(".wait-screen")?.classList.add("hidden");
     }
     reOrganize(editorData = null, isImportingAFrame = false) {
         this.showWaitScreen();
@@ -70060,7 +70178,7 @@ class GraphEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         this.emitNewBlock(data, event.clientX - this._diagramContainer.offsetLeft, event.clientY - this._diagramContainer.offsetTop);
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_portal__WEBPACK_IMPORTED_MODULE_5__.Portal, Object.assign({ globalState: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "node-editor-graph-root", style: {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_portal__WEBPACK_IMPORTED_MODULE_5__.Portal, { globalState: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "node-editor-graph-root", style: {
                         gridTemplateColumns: this.buildColumnLayout(),
                     }, onMouseMove: (evt) => {
                         this._mouseLocationX = evt.pageX;
@@ -70070,13 +70188,13 @@ class GraphEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                             return;
                         }
                         this.props.globalState.lockObject.lock = false;
-                    } }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_nodeList_nodeListComponent__WEBPACK_IMPORTED_MODULE_3__.NodeListComponent, { globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "leftGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerUp: (evt) => this.onPointerUp(evt), onPointerMove: (evt) => this.resizeColumns(evt) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "diagram-container", ref: this._diagramContainerRef, onDrop: (event) => {
+                    }, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_nodeList_nodeListComponent__WEBPACK_IMPORTED_MODULE_3__.NodeListComponent, { globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "leftGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerUp: (evt) => this.onPointerUp(evt), onPointerMove: (evt) => this.resizeColumns(evt) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "diagram-container", ref: this._diagramContainerRef, onDrop: (event) => {
                                 this.dropNewBlock(event);
                             }, onDragOver: (event) => {
                                 event.preventDefault();
-                            } }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_nodeGraphSystem_graphCanvas__WEBPACK_IMPORTED_MODULE_16__.GraphCanvasComponent, { ref: this._graphCanvasRef, stateManager: this.props.globalState.stateManager, onEmitNewNode: (nodeData) => {
+                            }, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_nodeGraphSystem_graphCanvas__WEBPACK_IMPORTED_MODULE_16__.GraphCanvasComponent, { ref: this._graphCanvasRef, stateManager: this.props.globalState.stateManager, onEmitNewNode: (nodeData) => {
                                     return this.appendBlock(nodeData.data);
-                                } }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "rightGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerUp: (evt) => this.onPointerUp(evt), onPointerMove: (evt) => this.resizeColumns(evt, false) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "right-panel" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_4__.PropertyTabComponent, { lockObject: this.props.globalState.lockObject, globalState: this.props.globalState }), !this.state.showPreviewPopUp ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_preview_previewMeshControlComponent__WEBPACK_IMPORTED_MODULE_10__.PreviewMeshControlComponent, { globalState: this.props.globalState, togglePreviewAreaComponent: this.handlePopUp }) : null, !this.state.showPreviewPopUp ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_preview_previewAreaComponent__WEBPACK_IMPORTED_MODULE_11__.PreviewAreaComponent, { globalState: this.props.globalState, width: this._rightWidth }) : null] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_log_logComponent__WEBPACK_IMPORTED_MODULE_6__.LogComponent, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_messageDialog__WEBPACK_IMPORTED_MODULE_7__.MessageDialogComponent, { globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "blocker" }, { children: "Node Material Editor runs only on desktop" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "wait-screen hidden" }, { children: "Processing...please wait" }))] })));
+                                } }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "rightGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerUp: (evt) => this.onPointerUp(evt), onPointerMove: (evt) => this.resizeColumns(evt, false) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "right-panel", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_4__.PropertyTabComponent, { lockObject: this.props.globalState.lockObject, globalState: this.props.globalState }), !this.state.showPreviewPopUp ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_preview_previewMeshControlComponent__WEBPACK_IMPORTED_MODULE_10__.PreviewMeshControlComponent, { globalState: this.props.globalState, togglePreviewAreaComponent: this.handlePopUp }) : null, !this.state.showPreviewPopUp ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_preview_previewAreaComponent__WEBPACK_IMPORTED_MODULE_11__.PreviewAreaComponent, { globalState: this.props.globalState, width: this._rightWidth }) : null] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_log_logComponent__WEBPACK_IMPORTED_MODULE_6__.LogComponent, { globalState: this.props.globalState })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_components_MessageDialog__WEBPACK_IMPORTED_MODULE_7__.MessageDialog, { message: this.state.message, isError: this.state.isError }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "blocker", children: "Node Material Editor runs only on desktop" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "wait-screen hidden", children: "Processing...please wait" })] }));
     }
 }
 
@@ -70660,12 +70778,11 @@ class InputDisplayManager {
         return color;
     }
     updatePreviewContent(nodeData, contentArea) {
-        var _a, _b;
         let value = "";
         const inputBlock = nodeData.data;
         if (inputBlock.isAttribute) {
-            const attrVal = (_a = inputNameToAttributeValue[inputBlock.name]) !== null && _a !== void 0 ? _a : inputBlock.name;
-            const attrName = (_b = inputNameToAttributeName[inputBlock.name]) !== null && _b !== void 0 ? _b : "mesh";
+            const attrVal = inputNameToAttributeValue[inputBlock.name] ?? inputBlock.name;
+            const attrName = inputNameToAttributeName[inputBlock.name] ?? "mesh";
             value = attrName + "." + attrVal;
         }
         else if (inputBlock.isSystemValue) {
@@ -70996,7 +71113,7 @@ class ColorMergerPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__
             { label: "B", value: "b" },
             { label: "A", value: "a" },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_3__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SWIZZLES" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_4__.OptionsLineComponent, { label: "R", options: targetOptions, target: colorMergerBlock, propertyName: "rSwizzle", valuesAreStrings: true, onSelect: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_3__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "SWIZZLES", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_4__.OptionsLineComponent, { label: "R", options: targetOptions, target: colorMergerBlock, propertyName: "rSwizzle", valuesAreStrings: true, onSelect: () => {
                                 this.props.stateManager.onUpdateRequiredObservable.notifyObservers(colorMergerBlock);
                                 this.props.stateManager.onRebuildRequiredObservable.notifyObservers(true);
                                 this.forceUpdate();
@@ -71012,7 +71129,7 @@ class ColorMergerPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__
                                 this.props.stateManager.onUpdateRequiredObservable.notifyObservers(colorMergerBlock);
                                 this.props.stateManager.onRebuildRequiredObservable.notifyObservers(true);
                                 this.forceUpdate();
-                            } })] }))] }));
+                            } })] })] }));
     }
 }
 
@@ -71063,11 +71180,11 @@ class ConditionalPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__
         conditionOptions.sort((a, b) => {
             return a.label.localeCompare(b.label);
         });
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_4__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "PROPERTIES" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Condition", options: conditionOptions, target: conditionBlock, propertyName: "condition", onSelect: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_4__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "PROPERTIES", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Condition", options: conditionOptions, target: conditionBlock, propertyName: "condition", onSelect: () => {
                             this.props.stateManager.onUpdateRequiredObservable.notifyObservers(conditionBlock);
                             this.props.stateManager.onRebuildRequiredObservable.notifyObservers(true);
                             this.forceUpdate();
-                        } }) }))] }));
+                        } }) })] }));
     }
 }
 
@@ -71124,11 +71241,11 @@ class FrameNodePortPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1
         this.props.stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "propertyTab" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "header" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "title" }, { children: "NODE MATERIAL EDITOR" }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { label: "Port Name", lockObject: this.props.stateManager.lockObject, propertyName: "portName", target: this.props.frameNodePort }), this.props.frameNodePort.framePortPosition !== shared_ui_components_nodeGraphSystem_graphFrame__WEBPACK_IMPORTED_MODULE_4__.FramePortPosition.Top && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_6__.ButtonLineComponent, { label: "Move Port Up", onClick: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "propertyTab", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "header", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "title", children: "NODE MATERIAL EDITOR" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "GENERAL", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { label: "Port Name", lockObject: this.props.stateManager.lockObject, propertyName: "portName", target: this.props.frameNodePort }), this.props.frameNodePort.framePortPosition !== shared_ui_components_nodeGraphSystem_graphFrame__WEBPACK_IMPORTED_MODULE_4__.FramePortPosition.Top && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_6__.ButtonLineComponent, { label: "Move Port Up", onClick: () => {
                                     this.props.frame.moveFramePortUp(this.props.frameNodePort);
                                 } })), this.props.frameNodePort.framePortPosition !== shared_ui_components_nodeGraphSystem_graphFrame__WEBPACK_IMPORTED_MODULE_4__.FramePortPosition.Bottom && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_6__.ButtonLineComponent, { label: "Move Port Down", onClick: () => {
                                     this.props.frame.moveFramePortDown(this.props.frameNodePort);
-                                } }))] })) })] })));
+                                } }))] }) })] }));
     }
 }
 
@@ -71184,13 +71301,13 @@ class FramePropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
         configurableInputBlocks = configurableInputBlocks.sort((a, b) => {
             return a.name.localeCompare(b.name);
         });
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "propertyTab" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "header" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "title" }, { children: "NODE MATERIAL EDITOR" }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { label: "Name", propertyName: "name", lockObject: this.props.globalState.lockObject, target: this.props.frame }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.globalState.lockObject, label: "Color", target: this.props.frame, propertyName: "color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.globalState.lockObject, label: "Comments", propertyName: "comments", target: this.props.frame }), !this.props.frame.isCollapsed && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_6__.ButtonLineComponent, { label: "Collapse", onClick: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "propertyTab", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "header", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "title", children: "NODE MATERIAL EDITOR" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "GENERAL", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { label: "Name", propertyName: "name", lockObject: this.props.globalState.lockObject, target: this.props.frame }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__.Color3LineComponent, { lockObject: this.props.globalState.lockObject, label: "Color", target: this.props.frame, propertyName: "color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.globalState.lockObject, label: "Comments", propertyName: "comments", target: this.props.frame }), !this.props.frame.isCollapsed && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_6__.ButtonLineComponent, { label: "Collapse", onClick: () => {
                                         this.props.frame.isCollapsed = true;
                                     } })), this.props.frame.isCollapsed && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_6__.ButtonLineComponent, { label: "Expand", onClick: () => {
                                         this.props.frame.isCollapsed = false;
                                     } })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_6__.ButtonLineComponent, { label: "Export", onClick: () => {
                                         this.props.frame.export();
-                                    } })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_propertyTab_inputsPropertyTabComponent__WEBPACK_IMPORTED_MODULE_3__.InputsPropertyTabComponent, { lockObject: this.props.globalState.lockObject, globalState: this.props.globalState, inputs: configurableInputBlocks })] })] })));
+                                    } })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_propertyTab_inputsPropertyTabComponent__WEBPACK_IMPORTED_MODULE_3__.InputsPropertyTabComponent, { lockObject: this.props.globalState.lockObject, globalState: this.props.globalState, inputs: configurableInputBlocks })] })] }));
     }
 }
 
@@ -71253,7 +71370,7 @@ class GeneralPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
             { label: "Fragment", value: core_Materials_Node_nodeMaterialDecorator__WEBPACK_IMPORTED_MODULE_4__.NodeMaterialBlockTargets.Fragment },
         ];
         const block = this.props.nodeData.data;
-        return ((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)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL" }, { children: [(!block.isInput || !block.isAttribute) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { label: "Name", propertyName: "name", target: block, lockObject: this.props.stateManager.lockObject, onChange: () => this.props.stateManager.onUpdateRequiredObservable.notifyObservers(block), validator: (newName) => {
+        return ((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)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "GENERAL", children: [(!block.isInput || !block.isAttribute) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { label: "Name", propertyName: "name", target: block, lockObject: this.props.stateManager.lockObject, onChange: () => this.props.stateManager.onUpdateRequiredObservable.notifyObservers(block), validator: (newName) => {
                             if (!block.validateBlockName(newName)) {
                                 this.props.stateManager.onErrorMessageDialogRequiredObservable.notifyObservers(`"${newName}" is a reserved name, please choose another`);
                                 return false;
@@ -71263,7 +71380,7 @@ class GeneralPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
                             this.forceUpdate();
                             this.props.stateManager.onUpdateRequiredObservable.notifyObservers(block);
                             this.props.stateManager.onRebuildRequiredObservable.notifyObservers(true);
-                        } })), !block._originalTargetIsNeutral && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__.TextLineComponent, { label: "Target", value: core_Materials_Node_nodeMaterialDecorator__WEBPACK_IMPORTED_MODULE_4__.NodeMaterialBlockTargets[block.target] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__.TextLineComponent, { label: "Type", value: block.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { label: "Comments", propertyName: "comments", lockObject: this.props.stateManager.lockObject, target: block, onChange: () => this.props.stateManager.onUpdateRequiredObservable.notifyObservers(block) })] })) }));
+                        } })), !block._originalTargetIsNeutral && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__.TextLineComponent, { label: "Target", value: core_Materials_Node_nodeMaterialDecorator__WEBPACK_IMPORTED_MODULE_4__.NodeMaterialBlockTargets[block.target] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__.TextLineComponent, { label: "Type", value: block.getClassName() }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { label: "Comments", propertyName: "comments", lockObject: this.props.stateManager.lockObject, target: block, onChange: () => this.props.stateManager.onUpdateRequiredObservable.notifyObservers(block) })] }) }));
     }
 }
 class GenericPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
@@ -71271,17 +71388,16 @@ class GenericPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
         super(props);
     }
     forceRebuild(notifiers) {
-        var _a;
         if (!notifiers || notifiers.update) {
             this.props.stateManager.onUpdateRequiredObservable.notifyObservers(this.props.nodeData.data);
         }
         if (!notifiers || notifiers.rebuild) {
             this.props.stateManager.onRebuildRequiredObservable.notifyObservers(true);
         }
-        if (notifiers === null || notifiers === void 0 ? void 0 : notifiers.activatePreviewCommand) {
+        if (notifiers?.activatePreviewCommand) {
             this.props.stateManager.data.onPreviewCommandActivated.notifyObservers(true);
         }
-        (_a = notifiers === null || notifiers === void 0 ? void 0 : notifiers.callback) === null || _a === void 0 ? void 0 : _a.call(notifiers, this.props.stateManager.data.nodeMaterial.getScene());
+        notifiers?.callback?.(this.props.stateManager.data.nodeMaterial.getScene());
     }
     render() {
         const block = this.props.nodeData.data, propStore = block._propStore;
@@ -71325,7 +71441,7 @@ class GenericPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
                 }
             }
         }
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: groups.map((group) => ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: group }, { children: componentList[group] })))) }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: groups.map((group) => ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: group, children: componentList[group] }))) }));
     }
 }
 
@@ -71430,7 +71546,7 @@ class GradientPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Co
             { label: "None", value: 0 },
             { label: "Visible in the inspector", value: 1 },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_5__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "PROPERTIES" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Type", options: typeOptions, target: gradientBlock, noDirectUpdate: true, extractValue: (block) => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_5__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "PROPERTIES", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_7__.OptionsLineComponent, { label: "Type", options: typeOptions, target: gradientBlock, noDirectUpdate: true, extractValue: (block) => {
                             if (block.visibleInInspector) {
                                 return 1;
                             }
@@ -71450,9 +71566,9 @@ class GradientPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Co
                             this.forceUpdate();
                             this.props.stateManager.onUpdateRequiredObservable.notifyObservers(gradientBlock);
                             this.props.stateManager.onRebuildRequiredObservable.notifyObservers(true);
-                        }, propertyName: "" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "STEPS" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_6__.ButtonLineComponent, { label: "Add new step", onClick: () => this.addNewStep() }), gradientBlock.colorSteps.map((c, i) => {
+                        }, propertyName: "" }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "STEPS", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_6__.ButtonLineComponent, { label: "Add new step", onClick: () => this.addNewStep() }), gradientBlock.colorSteps.map((c, i) => {
                             return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gradientStepComponent__WEBPACK_IMPORTED_MODULE_4__.GradientStepComponent, { stateManager: this.props.stateManager, onCheckForReOrder: () => this.checkForReOrder(), onUpdateStep: () => this.forceRebuild(), lineIndex: i, step: c, onCopy: () => this.copyStep(c), onDelete: () => this.deleteStep(c) }, "step-" + i));
-                        })] }))] }));
+                        })] })] }));
     }
 }
 
@@ -71505,16 +71621,16 @@ class GradientStepComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
     }
     render() {
         const step = this.props.step;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "gradient-step" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "step" }, { children: `#${this.props.lineIndex}` })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__.ColorPickerLineComponent, { lockObject: this.props.stateManager.lockObject, value: step.color, onColorChanged: (color) => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "gradient-step", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "step", children: `#${this.props.lineIndex}` }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__.ColorPickerLineComponent, { lockObject: this.props.stateManager.lockObject, value: step.color, onColorChanged: (color) => {
                             this.updateColor(color);
-                        } }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "step-value" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.stateManager.lockObject, smallUI: true, label: "", target: step, propertyName: "step", min: 0, max: 1, onEnter: () => {
+                        } }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "step-value", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: this.props.stateManager.lockObject, smallUI: true, label: "", target: step, propertyName: "step", min: 0, max: 1, onEnter: () => {
                             this.props.onUpdateStep();
                             this.props.onCheckForReOrder();
                             this.forceUpdate();
-                        } }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "step-slider" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { className: "range", type: "range", step: 0.01, min: 0, max: 1.0, value: step.step, onPointerUp: () => this.onPointerUp(), onChange: (evt) => this.updateStep(parseFloat(evt.target.value)) }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "gradient-copy", onClick: () => {
+                        } }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "step-slider", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { className: "range", type: "range", step: 0.01, min: 0, max: 1.0, value: step.step, onPointerUp: () => this.onPointerUp(), onChange: (evt) => this.updateStep(parseFloat(evt.target.value)) }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "gradient-copy", onClick: () => {
                         if (this.props.onCopy)
                             this.props.onCopy();
-                    }, title: "Copy Step" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "img", src: _sharedComponents_copy_svg__WEBPACK_IMPORTED_MODULE_4__ }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "gradient-delete", onClick: () => this.props.onDelete(), title: "Delete Step" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "img", src: _imgs_delete_svg__WEBPACK_IMPORTED_MODULE_3__ }) }))] })));
+                    }, title: "Copy Step", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "img", src: _sharedComponents_copy_svg__WEBPACK_IMPORTED_MODULE_4__ }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "gradient-delete", onClick: () => this.props.onDelete(), title: "Delete Step", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "img", src: _imgs_delete_svg__WEBPACK_IMPORTED_MODULE_3__ }) })] }));
     }
 }
 
@@ -71658,7 +71774,7 @@ class ImageSourcePropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__
             { label: "Linear/Nearest & linear mip", value: core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Texture.LINEAR_NEAREST_MIPLINEAR },
             { label: "Linear/Nearest & nearest mip", value: core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Texture.LINEAR_NEAREST_MIPNEAREST }, // 9
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_6__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "PROPERTIES" }, { children: [texture && 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", onSelect: (value) => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_6__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "PROPERTIES", children: [texture && 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", onSelect: (value) => {
                                 texture.updateSamplingMode(value);
                                 this.props.stateManager.onUpdateRequiredObservable.notifyObservers(block);
                             } })), texture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Clamp U", isSelected: () => texture.wrapU === core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Texture.CLAMP_ADDRESSMODE, onSelect: (value) => {
@@ -71681,11 +71797,11 @@ class ImageSourcePropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__
                                 this.props.stateManager.onUpdateRequiredObservable.notifyObservers(block);
                             } })), texture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_11__.SliderLineComponent, { lockObject: this.props.stateManager.lockObject, label: "Rotation W", target: texture, propertyName: "wAng", minimum: 0, maximum: Math.PI * 2, useEuler: true, step: 0.1, onChange: () => {
                                 this.props.stateManager.onUpdateRequiredObservable.notifyObservers(block);
-                            } }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "SOURCE" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Embed static texture", isSelected: () => this.state.isEmbedded, onSelect: (value) => {
+                            } }))] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "SOURCE", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Embed static texture", isSelected: () => this.state.isEmbedded, onSelect: (value) => {
                                 this.setState({ isEmbedded: value });
                                 this.imageSourceBlock.texture = null;
                                 this.updateAfterTextureLoad();
-                            } }), this.state.isEmbedded && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_2__.FileButtonLineComponent, { label: "Upload", onClick: (file) => this.replaceTexture(file), accept: ".jpg, .png, .tga, .dds, .env" }), !this.state.isEmbedded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.stateManager.lockObject, label: "Link", value: url, onChange: (newUrl) => this.replaceTextureWithUrl(newUrl) })), !this.state.isEmbedded && url && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_8__.ButtonLineComponent, { label: "Refresh", onClick: () => this.replaceTextureWithUrl(url + "?nocache=" + this._generateRandomForCache()) })), texture && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_8__.ButtonLineComponent, { label: "Remove", onClick: () => this.removeTexture() })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_6__.GenericPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData })] }));
+                            } }), this.state.isEmbedded && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_2__.FileButtonLineComponent, { label: "Upload", onClick: (file) => this.replaceTexture(file), accept: ".jpg, .png, .tga, .dds, .env" }), !this.state.isEmbedded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.stateManager.lockObject, label: "Link", value: url, onChange: (newUrl) => this.replaceTextureWithUrl(newUrl) })), !this.state.isEmbedded && url && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_8__.ButtonLineComponent, { label: "Refresh", onClick: () => this.replaceTextureWithUrl(url + "?nocache=" + this._generateRandomForCache()) })), texture && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_8__.ButtonLineComponent, { label: "Remove", onClick: () => this.removeTexture() })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_6__.GenericPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData })] }));
     }
 }
 
@@ -71894,7 +72010,7 @@ class InputPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
             { label: "Visible in the inspector", value: 1 },
             { label: "Constant", value: 2 },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_10__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_8__.LineContainerComponent, Object.assign({ title: "PROPERTIES" }, { children: [inputBlock.isUniform && !inputBlock.isSystemValue && inputBlock.animationType === core_Materials_Node_Enums_nodeMaterialBlockConnectionPointTypes__WEBPACK_IMPORTED_MODULE_9__.AnimatedInputBlockTypes.None && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_14__.OptionsLineComponent, { label: "Type", options: typeOptions, target: inputBlock, noDirectUpdate: true, extractValue: (block) => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_10__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_8__.LineContainerComponent, { title: "PROPERTIES", children: [inputBlock.isUniform && !inputBlock.isSystemValue && inputBlock.animationType === core_Materials_Node_Enums_nodeMaterialBlockConnectionPointTypes__WEBPACK_IMPORTED_MODULE_9__.AnimatedInputBlockTypes.None && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_14__.OptionsLineComponent, { label: "Type", options: typeOptions, target: inputBlock, noDirectUpdate: true, extractValue: (block) => {
                                 if (block.visibleInInspector) {
                                     return 1;
                                 }
@@ -71966,7 +72082,7 @@ class InputPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
                                 this.forceUpdate();
                                 this.props.stateManager.onUpdateRequiredObservable.notifyObservers(inputBlock);
                                 this.props.stateManager.onRebuildRequiredObservable.notifyObservers(true);
-                            } })), inputBlock.isUniform && !inputBlock.isSystemValue && inputBlock.animationType === core_Materials_Node_Enums_nodeMaterialBlockConnectionPointTypes__WEBPACK_IMPORTED_MODULE_9__.AnimatedInputBlockTypes.None && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_11__.CheckBoxLineComponent, { label: "Visible on frame", target: inputBlock, propertyName: "visibleOnFrame" }))] }))] }));
+                            } })), inputBlock.isUniform && !inputBlock.isSystemValue && inputBlock.animationType === core_Materials_Node_Enums_nodeMaterialBlockConnectionPointTypes__WEBPACK_IMPORTED_MODULE_9__.AnimatedInputBlockTypes.None && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_11__.CheckBoxLineComponent, { label: "Visible on frame", target: inputBlock, propertyName: "visibleOnFrame" }))] })] }));
     }
 }
 
@@ -72001,11 +72117,11 @@ class LightInformationPropertyTabComponent extends react__WEBPACK_IMPORTED_MODUL
             return { label: l.name, value: l.name };
         });
         const lightInformationBlock = this.props.nodeData.data;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_3__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "PROPERTIES" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_4__.OptionsLineComponent, { label: "Light", noDirectUpdate: true, valuesAreStrings: true, options: lightOptions, target: lightInformationBlock, propertyName: "name", extractValue: (target) => target.light.name, onSelect: (name) => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_3__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "PROPERTIES", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_4__.OptionsLineComponent, { label: "Light", noDirectUpdate: true, valuesAreStrings: true, options: lightOptions, target: lightInformationBlock, propertyName: "name", extractValue: (target) => target.light.name, onSelect: (name) => {
                             lightInformationBlock.light = scene.getLightByName(name);
                             this.forceUpdate();
                             this.props.stateManager.onRebuildRequiredObservable.notifyObservers(true);
-                        } }) }))] }));
+                        } }) })] }));
     }
 }
 
@@ -72041,7 +72157,7 @@ class LightPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
         });
         lightOptions.splice(0, 0, { label: "All", value: "" });
         const lightBlock = this.props.nodeData.data;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_3__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "PROPERTIES" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_4__.OptionsLineComponent, { label: "Light", defaultIfNull: 0, noDirectUpdate: true, valuesAreStrings: true, options: lightOptions, target: lightBlock, propertyName: "name", onSelect: (name) => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_3__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "PROPERTIES", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_4__.OptionsLineComponent, { label: "Light", defaultIfNull: 0, noDirectUpdate: true, valuesAreStrings: true, options: lightOptions, target: lightBlock, propertyName: "name", onSelect: (name) => {
                             if (name === "") {
                                 lightBlock.light = null;
                             }
@@ -72050,7 +72166,7 @@ class LightPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
                             }
                             this.forceUpdate();
                             this.props.stateManager.onRebuildRequiredObservable.notifyObservers(true);
-                        } }) }))] }));
+                        } }) })] }));
     }
 }
 
@@ -72093,7 +72209,7 @@ class NodePortPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Co
     }
     render() {
         const info = this.props.nodePort.hasLabel() ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [this.props.nodePort.hasLabel() && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.stateManager.lockObject, label: "Port Label", propertyName: "portName", target: this.props.nodePort })), this.props.nodePort.node.enclosingFrameId !== -1 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Expose Port on Frame", target: this.props.nodePort, isSelected: () => this.props.nodePort.exposedOnFrame, onSelect: (value) => this.toggleExposeOnFrame(value), propertyName: "exposedOnFrame", disabled: this.props.nodePort.disabled }))] })) : ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "This node is a constant input node and cannot be exposed to the frame.", value: " " }));
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "propertyTab" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "header" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "title" }, { children: "NODE MATERIAL EDITOR" }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "GENERAL" }, { children: info })) })] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "propertyTab", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "header", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "title", children: "NODE MATERIAL EDITOR" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "GENERAL", children: info }) })] }));
     }
 }
 
@@ -72316,7 +72432,7 @@ class TexturePropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
             { label: "Linear/Nearest & linear mip", value: core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Texture.LINEAR_NEAREST_MIPLINEAR },
             { label: "Linear/Nearest & nearest mip", value: core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Texture.LINEAR_NEAREST_MIPNEAREST }, // 9
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_6__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "PROPERTIES" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Auto select UV", propertyName: "autoSelectUV", target: block, onValueChanged: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_6__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "PROPERTIES", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Auto select UV", propertyName: "autoSelectUV", target: block, onValueChanged: () => {
                                 this.props.stateManager.onUpdateRequiredObservable.notifyObservers(block);
                             } }), !isInReflectionMode && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Convert to gamma space", propertyName: "convertToGammaSpace", target: block, onValueChanged: () => {
                                 this.props.stateManager.onUpdateRequiredObservable.notifyObservers(block);
@@ -72354,11 +72470,11 @@ class TexturePropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
                                 this.props.stateManager.onUpdateRequiredObservable.notifyObservers(block);
                             } })), texture && !isInReflectionMode && !isFrozenTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_11__.SliderLineComponent, { lockObject: this.props.stateManager.lockObject, label: "Rotation W", target: texture, propertyName: "wAng", minimum: 0, maximum: Math.PI * 2, useEuler: true, step: 0.1, onChange: () => {
                                 this.props.stateManager.onUpdateRequiredObservable.notifyObservers(block);
-                            } }))] })), !this.textureBlock.hasImageSource && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, Object.assign({ title: "SOURCE" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Embed static texture", isSelected: () => this.state.isEmbedded, onSelect: (value) => {
+                            } }))] }), !this.textureBlock.hasImageSource && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_4__.LineContainerComponent, { title: "SOURCE", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Embed static texture", isSelected: () => this.state.isEmbedded, onSelect: (value) => {
                                 this.setState({ isEmbedded: value });
                                 this.textureBlock.texture = null;
                                 this.updateAfterTextureLoad();
-                            } }), isInReflectionMode && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Load as cube texture", isSelected: () => this.state.loadAsCubeTexture, onSelect: (value) => this.setState({ loadAsCubeTexture: value }) })), isInReflectionMode && this.state.loadAsCubeTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Texture is prefiltered", isSelected: () => this.state.textureIsPrefiltered, onSelect: (value) => this.setState({ textureIsPrefiltered: value }) })), this.state.isEmbedded && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_2__.FileButtonLineComponent, { label: "Upload", onClick: (file) => this.replaceTexture(file), accept: ".jpg, .png, .tga, .dds, .env" }), !this.state.isEmbedded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.stateManager.lockObject, label: "Link", value: url, onChange: (newUrl) => this.replaceTextureWithUrl(newUrl) })), !this.state.isEmbedded && url && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_8__.ButtonLineComponent, { label: "Refresh", onClick: () => this.replaceTextureWithUrl(url + "?nocache=" + this._generateRandomForCache()) })), texture && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_8__.ButtonLineComponent, { label: "Remove", onClick: () => this.removeTexture() })] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_6__.GenericPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData })] }));
+                            } }), isInReflectionMode && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Load as cube texture", isSelected: () => this.state.loadAsCubeTexture, onSelect: (value) => this.setState({ loadAsCubeTexture: value }) })), isInReflectionMode && this.state.loadAsCubeTexture && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Texture is prefiltered", isSelected: () => this.state.textureIsPrefiltered, onSelect: (value) => this.setState({ textureIsPrefiltered: value }) })), this.state.isEmbedded && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_2__.FileButtonLineComponent, { label: "Upload", onClick: (file) => this.replaceTexture(file), accept: ".jpg, .png, .tga, .dds, .env" }), !this.state.isEmbedded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.stateManager.lockObject, label: "Link", value: url, onChange: (newUrl) => this.replaceTextureWithUrl(newUrl) })), !this.state.isEmbedded && url && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_8__.ButtonLineComponent, { label: "Refresh", onClick: () => this.replaceTextureWithUrl(url + "?nocache=" + this._generateRandomForCache()) })), texture && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_8__.ButtonLineComponent, { label: "Remove", onClick: () => this.removeTexture() })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_6__.GenericPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData })] }));
     }
 }
 
@@ -72391,7 +72507,7 @@ class TransformPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.C
         super(props);
     }
     render() {
-        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)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_4__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "PROPERTIES" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Transform as direction", onSelect: (value) => {
+        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)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_4__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "PROPERTIES", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "Transform as direction", onSelect: (value) => {
                             const transformBlock = this.props.nodeData.data;
                             if (value) {
                                 transformBlock.complementW = 0;
@@ -72400,7 +72516,7 @@ class TransformPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.C
                                 transformBlock.complementW = 1;
                             }
                             this.props.stateManager.onRebuildRequiredObservable.notifyObservers(true);
-                        }, isSelected: () => this.props.nodeData.data.complementW === 0 }) }))] }));
+                        }, isSelected: () => this.props.nodeData.data.complementW === 0 }) })] }));
     }
 }
 
@@ -72460,11 +72576,11 @@ class TrigonometryPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1_
         operationOptions.sort((a, b) => {
             return a.label.localeCompare(b.label);
         });
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_4__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "PROPERTIES" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Operation", options: operationOptions, target: trigonometryBlock, propertyName: "operation", onSelect: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_4__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "PROPERTIES", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: "Operation", options: operationOptions, target: trigonometryBlock, propertyName: "operation", onSelect: () => {
                             this.props.stateManager.onUpdateRequiredObservable.notifyObservers(trigonometryBlock);
                             this.props.stateManager.onRebuildRequiredObservable.notifyObservers(true);
                             this.forceUpdate();
-                        } }) }))] }));
+                        } }) })] }));
     }
 }
 
@@ -72504,7 +72620,7 @@ class VectorMergerPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1_
             { label: "Z", value: "z" },
             { label: "W", value: "w" },
         ];
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_3__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, Object.assign({ title: "SWIZZLES" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_4__.OptionsLineComponent, { label: "X", options: targetOptions, target: vectorMergerBlock, propertyName: "xSwizzle", valuesAreStrings: true, onSelect: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_3__.GeneralPropertyTabComponent, { stateManager: this.props.stateManager, nodeData: this.props.nodeData }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_sharedComponents_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__.LineContainerComponent, { title: "SWIZZLES", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_4__.OptionsLineComponent, { label: "X", options: targetOptions, target: vectorMergerBlock, propertyName: "xSwizzle", valuesAreStrings: true, onSelect: () => {
                                 this.props.stateManager.onUpdateRequiredObservable.notifyObservers(vectorMergerBlock);
                                 this.props.stateManager.onRebuildRequiredObservable.notifyObservers(true);
                                 this.forceUpdate();
@@ -72520,7 +72636,7 @@ class VectorMergerPropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1_
                                 this.props.stateManager.onUpdateRequiredObservable.notifyObservers(vectorMergerBlock);
                                 this.props.stateManager.onRebuildRequiredObservable.notifyObservers(true);
                                 this.forceUpdate();
-                            } })] }))] }));
+                            } })] })] }));
     }
 }
 
@@ -72551,6 +72667,9 @@ const RegisterDefaultInput = (stateManager) => {
         let pointName = "output";
         let emittedBlock;
         if (!customInputBlock) {
+            if (point.type === core_Materials_Node_Blocks_Input_inputBlock__WEBPACK_IMPORTED_MODULE_0__.NodeMaterialBlockConnectionPointTypes.AutoDetect) {
+                return null;
+            }
             emittedBlock = new core_Materials_Node_Blocks_Input_inputBlock__WEBPACK_IMPORTED_MODULE_0__.InputBlock(core_Materials_Node_Blocks_Input_inputBlock__WEBPACK_IMPORTED_MODULE_0__.NodeMaterialBlockConnectionPointTypes[point.type], undefined, point.type);
         }
         else {
@@ -73092,7 +73211,7 @@ class CheckBoxLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             this.state = { isSelected: this.props.target[this.props.propertyName] == true };
         }
         if (this.props.disabled) {
-            this.state = Object.assign(Object.assign({}, this.state), { isDisabled: this.props.disabled });
+            this.state = { ...this.state, isDisabled: this.props.disabled };
         }
     }
     shouldComponentUpdate(nextProps, nextState) {
@@ -73135,7 +73254,7 @@ class CheckBoxLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         this.setState({ isSelected: !this.state.isSelected });
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "checkBoxLine" }, { children: [(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: "checkBox" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "checkbox", id: "checkbox" + this._uniqueId, className: "cbx hidden", checked: this.state.isSelected, onChange: () => this.onChange(), disabled: !!this.props.disabled }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("label", { htmlFor: "checkbox" + this._uniqueId, className: `lbl${this.props.disabled ? " disabled" : ""}` })] }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "checkBoxLine", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", title: this.props.label, children: this.props.label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "checkBox", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "checkbox", id: "checkbox" + this._uniqueId, className: "cbx hidden", checked: this.state.isSelected, onChange: () => this.onChange(), disabled: !!this.props.disabled }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("label", { htmlFor: "checkbox" + this._uniqueId, className: `lbl${this.props.disabled ? " disabled" : ""}` })] })] }));
     }
 }
 CheckBoxLineComponent._UniqueIdSeed = 0;
@@ -73163,9 +73282,9 @@ class DraggableLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
         super(props);
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "draggableLine", title: this.props.tooltip, draggable: true, onDragStart: (event) => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "draggableLine", title: this.props.tooltip, draggable: true, onDragStart: (event) => {
                 event.dataTransfer.setData("babylonjs-material-node", this.props.data);
-            } }, { children: this.props.data.replace("Block", "") })));
+            }, children: this.props.data.replace("Block", "") }));
     }
 }
 
@@ -73192,12 +73311,11 @@ class DraggableLineWithButtonComponent extends react__WEBPACK_IMPORTED_MODULE_1_
         super(props);
     }
     render() {
-        var _a;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "draggableLine withButton", title: this.props.tooltip, draggable: true, onDragStart: (event) => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "draggableLine withButton", title: this.props.tooltip, draggable: true, onDragStart: (event) => {
                 event.dataTransfer.setData("babylonjs-material-node", this.props.data);
-            } }, { children: [this.props.data.substr(0, this.props.data.length - ((_a = this.props.lenSuffixToRemove) !== null && _a !== void 0 ? _a : 6)), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "icon", onClick: () => {
+            }, children: [this.props.data.substr(0, this.props.data.length - (this.props.lenSuffixToRemove ?? 6)), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "icon", onClick: () => {
                         this.props.onIconClick(this.props.data);
-                    }, title: this.props.iconTitle }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "img", title: this.props.iconTitle, src: this.props.iconImage }) }))] })));
+                    }, title: this.props.iconTitle, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "img", title: this.props.iconTitle, src: this.props.iconImage }) })] }));
     }
 }
 
@@ -73232,7 +73350,7 @@ class FileButtonLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compone
         evt.target.value = "";
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "buttonLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("label", Object.assign({ htmlFor: this.props.uploadName ? this.props.uploadName : "file-upload", className: "file-upload" }, { children: this.props.label })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { ref: this._uploadRef, id: this.props.uploadName ? this.props.uploadName : "file-upload", type: "file", accept: this.props.accept, onChange: (evt) => this.onChange(evt) })] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "buttonLine", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("label", { htmlFor: this.props.uploadName ? this.props.uploadName : "file-upload", className: "file-upload", children: this.props.label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { ref: this._uploadRef, id: this.props.uploadName ? this.props.uploadName : "file-upload", type: "file", accept: this.props.accept, onChange: (evt) => this.onChange(evt) })] }));
     }
 }
 
@@ -73272,13 +73390,13 @@ class LineContainerComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
     }
     renderHeader() {
         const className = this.state.isExpanded ? "collapse" : "collapse closed";
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "header", onClick: () => this.switchExpandedState() }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "title" }, { children: this.props.title })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: className }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "img", title: this.props.title, src: _imgs_downArrow_svg__WEBPACK_IMPORTED_MODULE_3__ }) }))] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "header", onClick: () => this.switchExpandedState(), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "title", children: this.props.title }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: className, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "img", title: this.props.title, src: _imgs_downArrow_svg__WEBPACK_IMPORTED_MODULE_3__ }) })] }));
     }
     render() {
         if (!this.state.isExpanded) {
-            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "paneContainer" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "paneContainer-content" }, { children: this.renderHeader() })) })));
+            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "paneContainer", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "paneContainer-content", children: this.renderHeader() }) }));
         }
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "paneContainer" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "paneContainer-content" }, { children: [this.renderHeader(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "paneList" }, { children: this.props.children }))] })) })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "paneContainer", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "paneContainer-content", children: [this.renderHeader(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "paneList", children: this.props.children })] }) }));
     }
 }
 
@@ -73323,41 +73441,7 @@ class LineWithFileButtonComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
         this.setState({ isExpanded: newState });
     }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "nonDraggableLine withButton" }, { children: [this.props.label, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "icon", title: this.props.title }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "img", src: this.props.iconImage }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "buttonLine", title: this.props.title }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("label", { htmlFor: this.props.uploadName ? this.props.uploadName : "file-upload", className: "file-upload" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { ref: this._uploadRef, id: this.props.uploadName ? this.props.uploadName : "file-upload", type: "file", accept: this.props.accept, onChange: (evt) => this.onChange(evt) })] }))] })));
-    }
-}
-
-
-/***/ }),
-
-/***/ "../../../tools/nodeEditor/dist/sharedComponents/messageDialog.js":
-/*!************************************************************************!*\
-  !*** ../../../tools/nodeEditor/dist/sharedComponents/messageDialog.js ***!
-  \************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "MessageDialogComponent": () => (/* binding */ MessageDialogComponent)
-/* harmony export */ });
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
-
-
-class MessageDialogComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
-    constructor(props) {
-        super(props);
-        this.state = { message: "", isError: false };
-        this.props.globalState.stateManager.onErrorMessageDialogRequiredObservable.add((message) => {
-            this.setState({ message: message, isError: true });
-        });
-    }
-    render() {
-        if (!this.state.message) {
-            return null;
-        }
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "dialog-container" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "dialog" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "dialog-message" }, { children: this.state.message })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "dialog-buttons" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "dialog-button-ok" + (this.state.isError ? " error" : ""), onClick: () => this.setState({ message: "" }) }, { children: "OK" })) }))] })) })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "nonDraggableLine withButton", children: [this.props.label, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "icon", title: this.props.title, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "img", src: this.props.iconImage }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "buttonLine", title: this.props.title, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("label", { htmlFor: this.props.uploadName ? this.props.uploadName : "file-upload", className: "file-upload" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { ref: this._uploadRef, id: this.props.uploadName ? this.props.uploadName : "file-upload", type: "file", accept: this.props.accept, onChange: (evt) => this.onChange(evt) })] })] }));
     }
 }
 
@@ -73592,7 +73676,7 @@ class TextureLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
     }
     render() {
         const texture = this.props.texture;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "textureLine" }, { children: [!this.props.hideChannelSelect && texture.isCube && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "control3D" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", Object.assign({ className: this.state.face === 0 ? "px command selected" : "px command", onClick: () => this.setState({ face: 0 }) }, { children: "PX" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", Object.assign({ className: this.state.face === 1 ? "nx command selected" : "nx command", onClick: () => this.setState({ face: 1 }) }, { children: "NX" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", Object.assign({ className: this.state.face === 2 ? "py command selected" : "py command", onClick: () => this.setState({ face: 2 }) }, { children: "PY" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", Object.assign({ className: this.state.face === 3 ? "ny command selected" : "ny command", onClick: () => this.setState({ face: 3 }) }, { children: "NY" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", Object.assign({ className: this.state.face === 4 ? "pz command selected" : "pz command", onClick: () => this.setState({ face: 4 }) }, { children: "PZ" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", Object.assign({ className: this.state.face === 5 ? "nz command selected" : "nz command", onClick: () => this.setState({ face: 5 }) }, { children: "NZ" }))] }))), !this.props.hideChannelSelect && !texture.isCube && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "control" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", Object.assign({ className: this.state.displayRed && !this.state.displayGreen ? "red command selected" : "red command", onClick: () => this.setState({ displayRed: true, displayGreen: false, displayBlue: false, displayAlpha: false }) }, { children: "R" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", Object.assign({ className: this.state.displayGreen && !this.state.displayBlue ? "green command selected" : "green command", onClick: () => this.setState({ displayRed: false, displayGreen: true, displayBlue: false, displayAlpha: false }) }, { children: "G" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", Object.assign({ className: this.state.displayBlue && !this.state.displayAlpha ? "blue command selected" : "blue command", onClick: () => this.setState({ displayRed: false, displayGreen: false, displayBlue: true, displayAlpha: false }) }, { children: "B" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", Object.assign({ className: this.state.displayAlpha && !this.state.displayRed ? "alpha command selected" : "alpha command", onClick: () => this.setState({ displayRed: false, displayGreen: false, displayBlue: false, displayAlpha: true }) }, { children: "A" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", Object.assign({ className: this.state.displayRed && this.state.displayGreen ? "all command selected" : "all command", onClick: () => this.setState({ displayRed: true, displayGreen: true, displayBlue: true, displayAlpha: true }) }, { children: "ALL" }))] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("canvas", { ref: this._canvasRef, className: "preview" })] })));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "textureLine", children: [!this.props.hideChannelSelect && texture.isCube && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "control3D", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", { className: this.state.face === 0 ? "px command selected" : "px command", onClick: () => this.setState({ face: 0 }), children: "PX" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", { className: this.state.face === 1 ? "nx command selected" : "nx command", onClick: () => this.setState({ face: 1 }), children: "NX" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", { className: this.state.face === 2 ? "py command selected" : "py command", onClick: () => this.setState({ face: 2 }), children: "PY" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", { className: this.state.face === 3 ? "ny command selected" : "ny command", onClick: () => this.setState({ face: 3 }), children: "NY" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", { className: this.state.face === 4 ? "pz command selected" : "pz command", onClick: () => this.setState({ face: 4 }), children: "PZ" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", { className: this.state.face === 5 ? "nz command selected" : "nz command", onClick: () => this.setState({ face: 5 }), children: "NZ" })] })), !this.props.hideChannelSelect && !texture.isCube && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "control", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", { className: this.state.displayRed && !this.state.displayGreen ? "red command selected" : "red command", onClick: () => this.setState({ displayRed: true, displayGreen: false, displayBlue: false, displayAlpha: false }), children: "R" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", { className: this.state.displayGreen && !this.state.displayBlue ? "green command selected" : "green command", onClick: () => this.setState({ displayRed: false, displayGreen: true, displayBlue: false, displayAlpha: false }), children: "G" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", { className: this.state.displayBlue && !this.state.displayAlpha ? "blue command selected" : "blue command", onClick: () => this.setState({ displayRed: false, displayGreen: false, displayBlue: true, displayAlpha: false }), children: "B" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", { className: this.state.displayAlpha && !this.state.displayRed ? "alpha command selected" : "alpha command", onClick: () => this.setState({ displayRed: false, displayGreen: false, displayBlue: false, displayAlpha: true }), children: "A" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", { className: this.state.displayRed && this.state.displayGreen ? "all command selected" : "all command", onClick: () => this.setState({ displayRed: true, displayGreen: true, displayBlue: true, displayAlpha: true }), children: "ALL" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("canvas", { ref: this._canvasRef, className: "preview" })] }));
     }
 }
 
@@ -73927,6 +74011,61 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
        /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_3_use_2_main_scss__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_3_use_2_main_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_3_use_2_main_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
 
 
+/***/ }),
+
+/***/ "../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss":
+/*!**********************************************************************************!*\
+  !*** ../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss ***!
+  \**********************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ "../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ "../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js */ "../../../../node_modules/style-loader/dist/runtime/insertBySelector.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ "../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ "../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ "../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_4_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_4_use_2_MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./MessageDialog.modules.scss */ "../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss");
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var options = {};
+
+options.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());
+options.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());
+
+      options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, "head");
+    
+options.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());
+options.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());
+
+var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_4_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_4_use_2_MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_6__["default"], options);
+
+
+
+
+       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_4_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_4_use_2_MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_4_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_4_use_2_MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_4_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_4_use_2_MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
+
+
 /***/ }),
 
 /***/ "../../../dev/sharedUiComponents/dist/lines/copy.svg":