mobx-view-model-devtools 0.0.18 → 0.0.19

package/index.js

@@ -1,4 +1,4 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode('/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--font-weight-semibold:600;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.static_g5P-G{position:static}.container_ueeVi{width:100%}@media(min-width:40rem){.container_ueeVi{max-width:40rem}}@media(min-width:48rem){.container_ueeVi{max-width:48rem}}@media(min-width:64rem){.container_ueeVi{max-width:64rem}}@media(min-width:80rem){.container_ueeVi{max-width:80rem}}@media(min-width:96rem){.container_ueeVi{max-width:96rem}}.blur_9rZ6A{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}.rootContainer_Z8gey *{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px}.vmButton_Xr1Q6{z-index:99;width:calc(var(--spacing)*9);height:calc(var(--spacing)*9);cursor:pointer;border-radius:var(--radius-lg);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));position:fixed}.vmButton_Xr1Q6[data-position=top-right],.vmButton_Xr1Q6[data-position=undefined]{top:calc(var(--spacing)*3);right:calc(var(--spacing)*3)}:is(.vmButton_Xr1Q6[data-position=top-right],.vmButton_Xr1Q6[data-position=undefined]).opened_gewqL{top:calc(var(--spacing)*-10)}.vmButton_Xr1Q6[data-position=top-left]{top:calc(var(--spacing)*3);left:calc(var(--spacing)*3)}.vmButton_Xr1Q6[data-position=top-left].opened_gewqL{top:calc(var(--spacing)*-10)}.vmButton_Xr1Q6[data-position=bottom-left]{bottom:calc(var(--spacing)*3);left:calc(var(--spacing)*3)}.vmButton_Xr1Q6[data-position=bottom-left].opened_gewqL{bottom:calc(var(--spacing)*-10)}.vmButton_Xr1Q6[data-position=bottom-right]{right:calc(var(--spacing)*3);bottom:calc(var(--spacing)*3)}.vmButton_Xr1Q6[data-position=bottom-right].opened_gewqL{bottom:calc(var(--spacing)*-10)}.vmButton_Xr1Q6>img{pointer-events:none;inset:calc(var(--spacing)*0);border-radius:var(--radius-lg);position:absolute}.vmButton_Xr1Q6>div{pointer-events:none;inset:calc(var(--spacing)*0);border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:2px;border-color:#00000057;position:absolute}.vmButton_Xr1Q6>span{pointer-events:none;top:calc(var(--spacing)*-1);left:calc(var(--spacing)*-1);border-radius:var(--radius-lg);padding:calc(var(--spacing)*.5);--tw-leading:1;--tw-font-weight:var(--font-weight-semibold);font-size:12px;line-height:1;font-weight:var(--font-weight-semibold);color:#2aff0a;background-color:#005c26cf;display:flex;position:absolute}.vmButton_Xr1Q6.opened_gewqL{pointer-events:none}.vmButton_Xr1Q6:not(.isConnected_tjs3F){--tw-grayscale:grayscale(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.closePopupButton_-08HG{width:28px;padding:6px}.baseActions_pkHeO{flex-direction:row;align-items:center;gap:4px;height:16px;margin-left:6px;margin-right:auto;display:flex}.hierarchyButton_h3FD7{border-radius:6px;width:18px;height:18px;padding:2px}.hierarchyButton_h3FD7.active_4JTx5{background:#f0f0f01f}.vmPopup_Q4l4j{z-index:99;border-radius:var(--radius-lg);width:calc(100vw - 34px);max-width:520px;height:calc(100vh - 24px);position:fixed}.vmPopup_Q4l4j[data-position=top-right],.vmPopup_Q4l4j[data-position=undefined]{top:calc(var(--spacing)*3);right:calc(var(--spacing)*3)}.vmPopup_Q4l4j[data-position=top-left]{top:calc(var(--spacing)*3);left:calc(var(--spacing)*3)}.vmPopup_Q4l4j[data-position=bottom-left]{bottom:calc(var(--spacing)*3);left:calc(var(--spacing)*3)}.vmPopup_Q4l4j[data-position=bottom-right]{right:calc(var(--spacing)*3);bottom:calc(var(--spacing)*3)}.vmContent_VAE7p{color:#ccc;background-color:#1e1e1e;flex-direction:column;display:flex;overflow:auto}.vmContent_VAE7p>header{height:calc(var(--spacing)*8);padding-left:calc(var(--spacing)*2);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);justify-content:space-between;align-items:center;display:flex}.vmContentInput_zbDAW{display:flex;position:relative}.vmContentInput_zbDAW>svg{pointer-events:none;opacity:.7;width:16px;position:absolute;inset:50% 0;transform:translate(6px,-50%)}.vmContentInput_zbDAW>input{text-overflow:ellipsis;background:#343434;border-radius:4px;outline:0;width:100%;padding:3px 26px;font-size:14px}.vmContentInput_zbDAW>button{opacity:.6;width:16px;display:none;position:absolute;top:50%;right:6px;transform:translate(4px,-50%)}.vmContentInput_zbDAW.filled_-3YUt>svg{opacity:.9}.vmContentInput_zbDAW.filled_-3YUt>button{display:block}.vmContentTree_BB36O{padding-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*2);scrollbar-width:thin;scrollbar-color:#81818170 #1e1e1e;flex-direction:column;display:flex;overflow:auto}.vmContentTree_BB36O:hover{scrollbar-color:#818181 #1e1e1e}.line_Xgaua.vmTreeItem_t-7jc{padding-left:calc(0px + (var(--level)*20px));z-index:1;position:sticky;top:-8px}.line_Xgaua.vmTreeItem_t-7jc>header{z-index:1;cursor:pointer;align-items:center;gap:calc(var(--spacing)*1);text-overflow:ellipsis;white-space:nowrap;background-color:#1e1e1e;margin-block:auto;display:flex;overflow:hidden}.line_Xgaua.vmTreeItem_t-7jc>header>label{background:#0f6013;border-radius:4px;padding:0 4px}.line_Xgaua.vmTreeItem_t-7jc>header>span{color:#5ab65e;text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.line_Xgaua.vmTreeItem_t-7jc.extrasItem_MI9Fa>header>label{background:#6b6902}.line_Xgaua.vmTreeItem_t-7jc:not([data-fitted=true])>header{opacity:.6}.vmContentFilters_No1QW{background:#1e1e1e;width:100%;padding:0 8px}.propertyMeta_XxYHc{text-overflow:ellipsis;white-space:nowrap;color:#616161;overflow:hidden}.propertyMeta_XxYHc.small_Ipy6s{font-size:10px;line-height:15px}.propertyValue_s9qHJ{text-overflow:ellipsis;white-space:nowrap;color:#616161;overflow:hidden}.propertyValue_s9qHJ:has(+.property-name_2-sJi){margin-right:calc(var(--spacing)*1)}.line_Xgaua{text-overflow:ellipsis;white-space:nowrap;white-space:pre;height:22px;padding-left:calc(28px + (var(--level)*15px));background:#1e1e1e;flex-direction:row;align-items:center;font-size:14px;display:flex;position:relative;overflow:hidden}.line_Xgaua.expandable_2LUhL{cursor:pointer}.property_eoWZv[data-fitted=false]{opacity:.5}.property_eoWZv.instance_B-kEn>.propertyValue_s9qHJ{color:#ba82be}:is(.property_eoWZv.primitive_5yfCy.boolean_TwUVp,.property_eoWZv.primitive_5yfCy.number_AVdzm,.property_eoWZv.primitive_5yfCy.object_kn8wQ,.property_eoWZv.primitive_5yfCy.undefined_SMcns,.property_eoWZv.primitive_5yfCy.bigint_ZrO3O,.property_eoWZv.primitive_5yfCy.symbol_9GN4U)>.propertyValue_s9qHJ{color:#5999cd}.property_eoWZv.primitive_5yfCy.string_m1Kkx>.propertyValue_s9qHJ{color:#af7249}.expandButton_EObqt{color:#a0a0a0;cursor:pointer;width:16px;height:16px;font-weight:700;opacity:1!important}.expandButton_EObqt.expanded_uFpb7{color:#b8b8b8;transform:rotate(90deg)}.expandButton_EObqt.disabled_IDojS{opacity:.35!important}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode(".root_Xsw1F{display:contents}.root_Xsw1F *{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px}.vmButton_Xr1Q6{position:fixed;z-index:999999;width:36px;height:36px;cursor:pointer;border-radius:8px;transition:all .15s ease-in-out}.vmButton_Xr1Q6[data-position=top-right],.vmButton_Xr1Q6[data-position=undefined]{top:12px;right:12px}.vmButton_Xr1Q6[data-position=top-right].opened_gewqL,.vmButton_Xr1Q6[data-position=undefined].opened_gewqL{top:-40px}.vmButton_Xr1Q6[data-position=top-left]{top:12px;left:12px}.vmButton_Xr1Q6[data-position=top-left].opened_gewqL{top:-40px}.vmButton_Xr1Q6[data-position=bottom-left]{bottom:12px;left:12px}.vmButton_Xr1Q6[data-position=bottom-left].opened_gewqL{bottom:-40px}.vmButton_Xr1Q6[data-position=bottom-right]{bottom:12px;right:12px}.vmButton_Xr1Q6[data-position=bottom-right].opened_gewqL{bottom:-40px}.vmButton_Xr1Q6>img{pointer-events:none;position:absolute;inset:0;border-radius:8px}.vmButton_Xr1Q6>div{transition:all .15s ease-in-out;position:absolute;inset:0;border-radius:8px;border:2px solid #00000057}.vmButton_Xr1Q6>span{left:-4px;top:-4px;pointer-events:none;position:absolute;display:flex;border-radius:8px;background:#005c26cf;padding:2px;font-weight:600;font-size:12px;line-height:12px;color:#2aff0a}.vmButton_Xr1Q6.opened_gewqL{pointer-events:none}.vmButton_Xr1Q6:not(.isConnected_tjs3F){filter:grayscale(1)}.closePopupButton_-08HG{width:28px;padding:6px}.hierarchyButton_h3FD7{width:18px;height:18px;padding:2px;border-radius:6px}.hierarchyButton_h3FD7.active_4JTx5{background:#f0f0f01f}.vmPopup_Q4l4j{position:fixed;z-index:999999;width:520px;border-radius:8px;height:calc(100vh - 24px);width:calc(100vw - 34px);max-width:520px}.vmPopup_Q4l4j[data-position=top-right],.vmPopup_Q4l4j[data-position=undefined]{top:12px;right:12px}.vmPopup_Q4l4j[data-position=top-left]{top:12px;left:12px}.vmPopup_Q4l4j[data-position=bottom-left]{bottom:12px;left:12px}.vmPopup_Q4l4j[data-position=bottom-right]{bottom:12px;right:12px}.treeItemHeader_9gR6Q{display:flex;align-items:center;gap:4px;margin:auto 0;cursor:pointer;background:#1e1e1e;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.treeItemLabel_eiMgP{padding:0 4px;border-radius:4px}.treeItemMetaText_cmfX0{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.treeItem_sRXPA{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:pre;background:#1e1e1e;height:22px;display:flex;flex-direction:row;align-items:center;padding-left:calc(0px + (var(--level) * 20px));position:sticky;top:-8px;z-index:1}.treeItem_sRXPA:not([data-fitted=true])>header{opacity:.6}.vmTreeItem_t-7jc .treeItemLabel_eiMgP{background:#0f6013}.vmTreeItem_t-7jc .treeItemMetaText_cmfX0{color:#5ab65e}.extrasItem_MI9Fa .treeItemLabel_eiMgP{background:#6b6902}.expandButton_EObqt{color:#a0a0a0;opacity:1!important;width:16px;height:16px;font-weight:700;cursor:pointer}.expandButton_EObqt.expanded_uFpb7{color:#b8b8b8;transform:rotate(90deg)}.expandButton_EObqt.disabled_IDojS{opacity:.35!important}.iconToggleButton_R48wm{display:flex;align-items:center;gap:2px;position:relative;height:20px;outline:none}.activePosition_IXsRn{position:absolute;height:16px;width:16px;padding:1px;box-sizing:content-box;background:#515151;border-radius:4px;transition:all 149ms ease;transform:translate(calc(20px * var(--index)))}.option_a5IcR{padding:1px;z-index:1;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.option_a5IcR>svg{width:14px;height:14px}.property_tyrFk{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:pre;background:#1e1e1e;height:22px;display:flex;flex-direction:row;align-items:center;position:relative;color:#616161;padding-left:calc(28px + (var(--level) * 15px))}.property_tyrFk.expandable_ZtNTw{cursor:pointer}.property_tyrFk[data-fitted=false]{opacity:.5}.property_tyrFk.instance_aPKFv{--value-color: rgb(186 130 190)}.property_tyrFk.primitive_mOPtu.boolean_H-c-u,.property_tyrFk.primitive_mOPtu.number_Mk-lR,.property_tyrFk.primitive_mOPtu.object_rbtD2,.property_tyrFk.primitive_mOPtu.undefined_xHzJR,.property_tyrFk.primitive_mOPtu.bigint_vEvWZ,.property_tyrFk.primitive_mOPtu.symbol_izwyn{--value-color: rgb(89, 153, 205)}.primitive_mOPtu.string_qjuUu{--value-color: #af7249}.propertyName_gpj0H{color:#ccc}.propertyMeta_xSfkm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.propertyValue_QT-FH{color:var(--value-color, #616161);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.propertyValue_QT-FH:has(+.propertyName_gpj0H){margin-right:4px}.vmContent_TIK57{color:#ccc;background:#1e1e1e;overflow:auto;display:flex;flex-direction:column}.vmContentHeader_M1JNM{display:flex;justify-content:space-between;align-items:center;height:32px;padding-left:8px;font-weight:600}.vmContentHeaderLogo_FRJDO{width:16px;margin-right:6px}.vmContentHeaderTitle_lYmde{font-size:16px;margin-right:auto}.vmContentControlPanel_CgUN9{padding:0 8px;width:100%;background:#1e1e1e;display:flex;flex-direction:row;gap:4px}.vmContentControlPanelActions_lONbA{display:flex;flex-direction:row;align-items:center}.hiearchyToggleButton_0FTG-{display:flex}.vmContentHeaderBaseActions_qc7CI{display:flex;flex-direction:row;gap:4px;height:16px;align-items:center;margin-left:6px;margin-right:auto}.vmContentInput_29GM1{display:flex;position:relative;flex:1}.vmContentInput_29GM1>svg{position:absolute;width:16px;inset:50% 0;transform:translate(6px,-50%);pointer-events:none;opacity:.7}.vmContentInput_29GM1>input{background:#343434;border-radius:4px;outline:0;width:100%;padding:3px 26px;font-size:14px;text-overflow:ellipsis}.vmContentInput_29GM1>button{position:absolute;right:6px;width:16px;transform:translate(4px,-50%);top:50%;opacity:.6;display:none}.vmContentInput_29GM1.filled_6JZa0>svg{opacity:.9}.vmContentInput_29GM1.filled_6JZa0>button{display:block}.vmContentTree_BETR6{display:flex;flex-direction:column;padding:8px;overflow:auto;scrollbar-width:thin;scrollbar-color:#81818170 #1e1e1e}.vmContentTree_BETR6:hover{scrollbar-color:#818181 #1e1e1e}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
 function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
@@ -11603,11 +11603,11 @@ function requireReactDom_development() {
           return false;
         }
       }
-      function onScheduleRoot(root2, children) {
+      function onScheduleRoot(root22, children) {
         {
           if (injectedHook && typeof injectedHook.onScheduleFiberRoot === "function") {
             try {
-              injectedHook.onScheduleFiberRoot(rendererID, root2, children);
+              injectedHook.onScheduleFiberRoot(rendererID, root22, children);
             } catch (err) {
               if (!hasLoggedError) {
                 hasLoggedError = true;
@@ -11617,10 +11617,10 @@ function requireReactDom_development() {
           }
         }
       }
-      function onCommitRoot(root2, eventPriority) {
+      function onCommitRoot(root22, eventPriority) {
         if (injectedHook && typeof injectedHook.onCommitFiberRoot === "function") {
           try {
-            var didError = (root2.current.flags & DidCapture) === DidCapture;
+            var didError = (root22.current.flags & DidCapture) === DidCapture;
             if (enableProfilerTimer) {
               var schedulerPriority;
               switch (eventPriority) {
@@ -11640,7 +11640,7 @@ function requireReactDom_development() {
                   schedulerPriority = NormalPriority;
                   break;
               }
-              injectedHook.onCommitFiberRoot(rendererID, root2, schedulerPriority, didError);
+              injectedHook.onCommitFiberRoot(rendererID, root22, schedulerPriority, didError);
             }
           } catch (err) {
             {
@@ -11652,10 +11652,10 @@ function requireReactDom_development() {
           }
         }
       }
-      function onPostCommitRoot(root2) {
+      function onPostCommitRoot(root22) {
         if (injectedHook && typeof injectedHook.onPostCommitFiberRoot === "function") {
           try {
-            injectedHook.onPostCommitFiberRoot(rendererID, root2);
+            injectedHook.onPostCommitFiberRoot(rendererID, root22);
           } catch (err) {
             {
               if (!hasLoggedError) {
@@ -12154,14 +12154,14 @@ function requireReactDom_development() {
             return lanes;
         }
       }
-      function getNextLanes(root2, wipLanes) {
-        var pendingLanes = root2.pendingLanes;
+      function getNextLanes(root22, wipLanes) {
+        var pendingLanes = root22.pendingLanes;
         if (pendingLanes === NoLanes) {
           return NoLanes;
         }
         var nextLanes = NoLanes;
-        var suspendedLanes = root2.suspendedLanes;
-        var pingedLanes = root2.pingedLanes;
+        var suspendedLanes = root22.suspendedLanes;
+        var pingedLanes = root22.pingedLanes;
         var nonIdlePendingLanes = pendingLanes & NonIdleLanes;
         if (nonIdlePendingLanes !== NoLanes) {
           var nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;
@@ -12205,9 +12205,9 @@ function requireReactDom_development() {
         if ((nextLanes & InputContinuousLane) !== NoLanes) {
           nextLanes |= pendingLanes & DefaultLane;
         }
-        var entangledLanes = root2.entangledLanes;
+        var entangledLanes = root22.entangledLanes;
         if (entangledLanes !== NoLanes) {
-          var entanglements = root2.entanglements;
+          var entanglements = root22.entanglements;
           var lanes = nextLanes & entangledLanes;
           while (lanes > 0) {
             var index2 = pickArbitraryLaneIndex(lanes);
@@ -12218,8 +12218,8 @@ function requireReactDom_development() {
         }
         return nextLanes;
       }
-      function getMostRecentEventTime(root2, lanes) {
-        var eventTimes = root2.eventTimes;
+      function getMostRecentEventTime(root22, lanes) {
+        var eventTimes = root22.eventTimes;
         var mostRecentEventTime = NoTimestamp;
         while (lanes > 0) {
           var index2 = pickArbitraryLaneIndex(lanes);
@@ -12276,11 +12276,11 @@ function requireReactDom_development() {
             return NoTimestamp;
         }
       }
-      function markStarvedLanesAsExpired(root2, currentTime) {
-        var pendingLanes = root2.pendingLanes;
-        var suspendedLanes = root2.suspendedLanes;
-        var pingedLanes = root2.pingedLanes;
-        var expirationTimes = root2.expirationTimes;
+      function markStarvedLanesAsExpired(root22, currentTime) {
+        var pendingLanes = root22.pendingLanes;
+        var suspendedLanes = root22.suspendedLanes;
+        var pingedLanes = root22.pingedLanes;
+        var expirationTimes = root22.expirationTimes;
         var lanes = pendingLanes;
         while (lanes > 0) {
           var index2 = pickArbitraryLaneIndex(lanes);
@@ -12291,16 +12291,16 @@ function requireReactDom_development() {
               expirationTimes[index2] = computeExpirationTime(lane, currentTime);
             }
           } else if (expirationTime <= currentTime) {
-            root2.expiredLanes |= lane;
+            root22.expiredLanes |= lane;
           }
           lanes &= ~lane;
         }
       }
-      function getHighestPriorityPendingLanes(root2) {
-        return getHighestPriorityLanes(root2.pendingLanes);
+      function getHighestPriorityPendingLanes(root22) {
+        return getHighestPriorityLanes(root22.pendingLanes);
       }
-      function getLanesToRetrySynchronouslyOnError(root2) {
-        var everythingButOffscreen = root2.pendingLanes & ~OffscreenLane;
+      function getLanesToRetrySynchronouslyOnError(root22) {
+        var everythingButOffscreen = root22.pendingLanes & ~OffscreenLane;
         if (everythingButOffscreen !== NoLanes) {
           return everythingButOffscreen;
         }
@@ -12325,12 +12325,12 @@ function requireReactDom_development() {
       function includesOnlyTransitions(lanes) {
         return (lanes & TransitionLanes) === lanes;
       }
-      function includesBlockingLane(root2, lanes) {
+      function includesBlockingLane(root22, lanes) {
         var SyncDefaultLanes = InputContinuousHydrationLane | InputContinuousLane | DefaultHydrationLane | DefaultLane;
         return (lanes & SyncDefaultLanes) !== NoLanes;
       }
-      function includesExpiredLane(root2, lanes) {
-        return (lanes & root2.expiredLanes) !== NoLanes;
+      function includesExpiredLane(root22, lanes) {
+        return (lanes & root22.expiredLanes) !== NoLanes;
       }
       function isTransitionLane(lane) {
         return (lane & TransitionLanes) !== NoLanes;
@@ -12391,20 +12391,20 @@ function requireReactDom_development() {
         }
         return laneMap;
       }
-      function markRootUpdated(root2, updateLane, eventTime) {
-        root2.pendingLanes |= updateLane;
+      function markRootUpdated(root22, updateLane, eventTime) {
+        root22.pendingLanes |= updateLane;
         if (updateLane !== IdleLane) {
-          root2.suspendedLanes = NoLanes;
-          root2.pingedLanes = NoLanes;
+          root22.suspendedLanes = NoLanes;
+          root22.pingedLanes = NoLanes;
         }
-        var eventTimes = root2.eventTimes;
+        var eventTimes = root22.eventTimes;
         var index2 = laneToIndex(updateLane);
         eventTimes[index2] = eventTime;
       }
-      function markRootSuspended(root2, suspendedLanes) {
-        root2.suspendedLanes |= suspendedLanes;
-        root2.pingedLanes &= ~suspendedLanes;
-        var expirationTimes = root2.expirationTimes;
+      function markRootSuspended(root22, suspendedLanes) {
+        root22.suspendedLanes |= suspendedLanes;
+        root22.pingedLanes &= ~suspendedLanes;
+        var expirationTimes = root22.expirationTimes;
         var lanes = suspendedLanes;
         while (lanes > 0) {
           var index2 = pickArbitraryLaneIndex(lanes);
@@ -12413,20 +12413,20 @@ function requireReactDom_development() {
           lanes &= ~lane;
         }
       }
-      function markRootPinged(root2, pingedLanes, eventTime) {
-        root2.pingedLanes |= root2.suspendedLanes & pingedLanes;
-      }
-      function markRootFinished(root2, remainingLanes) {
-        var noLongerPendingLanes = root2.pendingLanes & ~remainingLanes;
-        root2.pendingLanes = remainingLanes;
-        root2.suspendedLanes = NoLanes;
-        root2.pingedLanes = NoLanes;
-        root2.expiredLanes &= remainingLanes;
-        root2.mutableReadLanes &= remainingLanes;
-        root2.entangledLanes &= remainingLanes;
-        var entanglements = root2.entanglements;
-        var eventTimes = root2.eventTimes;
-        var expirationTimes = root2.expirationTimes;
+      function markRootPinged(root22, pingedLanes, eventTime) {
+        root22.pingedLanes |= root22.suspendedLanes & pingedLanes;
+      }
+      function markRootFinished(root22, remainingLanes) {
+        var noLongerPendingLanes = root22.pendingLanes & ~remainingLanes;
+        root22.pendingLanes = remainingLanes;
+        root22.suspendedLanes = NoLanes;
+        root22.pingedLanes = NoLanes;
+        root22.expiredLanes &= remainingLanes;
+        root22.mutableReadLanes &= remainingLanes;
+        root22.entangledLanes &= remainingLanes;
+        var entanglements = root22.entanglements;
+        var eventTimes = root22.eventTimes;
+        var expirationTimes = root22.expirationTimes;
         var lanes = noLongerPendingLanes;
         while (lanes > 0) {
           var index2 = pickArbitraryLaneIndex(lanes);
@@ -12437,9 +12437,9 @@ function requireReactDom_development() {
           lanes &= ~lane;
         }
       }
-      function markRootEntangled(root2, entangledLanes) {
-        var rootEntangledLanes = root2.entangledLanes |= entangledLanes;
-        var entanglements = root2.entanglements;
+      function markRootEntangled(root22, entangledLanes) {
+        var rootEntangledLanes = root22.entangledLanes |= entangledLanes;
+        var entanglements = root22.entanglements;
         var lanes = rootEntangledLanes;
         while (lanes) {
           var index2 = pickArbitraryLaneIndex(lanes);
@@ -12454,7 +12454,7 @@ function requireReactDom_development() {
           lanes &= ~lane;
         }
       }
-      function getBumpedLaneForHydration(root2, renderLanes2) {
+      function getBumpedLaneForHydration(root22, renderLanes2) {
         var renderLane = getHighestPriorityLane(renderLanes2);
         var lane;
         switch (renderLane) {
@@ -12494,16 +12494,16 @@ function requireReactDom_development() {
             lane = NoLane;
             break;
         }
-        if ((lane & (root2.suspendedLanes | renderLanes2)) !== NoLane) {
+        if ((lane & (root22.suspendedLanes | renderLanes2)) !== NoLane) {
           return NoLane;
         }
         return lane;
       }
-      function addFiberToLanesMap(root2, fiber, lanes) {
+      function addFiberToLanesMap(root22, fiber, lanes) {
         if (!isDevToolsPresent) {
           return;
         }
-        var pendingUpdatersLaneMap = root2.pendingUpdatersLaneMap;
+        var pendingUpdatersLaneMap = root22.pendingUpdatersLaneMap;
         while (lanes > 0) {
           var index2 = laneToIndex(lanes);
           var lane = 1 << index2;
@@ -12512,12 +12512,12 @@ function requireReactDom_development() {
           lanes &= ~lane;
         }
       }
-      function movePendingFibersToMemoized(root2, lanes) {
+      function movePendingFibersToMemoized(root22, lanes) {
         if (!isDevToolsPresent) {
           return;
         }
-        var pendingUpdatersLaneMap = root2.pendingUpdatersLaneMap;
-        var memoizedUpdaters = root2.memoizedUpdaters;
+        var pendingUpdatersLaneMap = root22.pendingUpdatersLaneMap;
+        var memoizedUpdaters = root22.memoizedUpdaters;
         while (lanes > 0) {
           var index2 = laneToIndex(lanes);
           var lane = 1 << index2;
@@ -12534,7 +12534,7 @@ function requireReactDom_development() {
           lanes &= ~lane;
         }
       }
-      function getTransitionsForLanes(root2, lanes) {
+      function getTransitionsForLanes(root22, lanes) {
         {
           return null;
         }
@@ -12581,8 +12581,8 @@ function requireReactDom_development() {
         }
         return IdleEventPriority;
       }
-      function isRootDehydrated(root2) {
-        var currentState = root2.current.memoizedState;
+      function isRootDehydrated(root22) {
+        var currentState = root22.current.memoizedState;
         return currentState.isDehydrated;
       }
       var _attemptSynchronousHydration;
@@ -12753,8 +12753,8 @@ function requireReactDom_development() {
                 return;
               }
             } else if (tag === HostRoot) {
-              var root2 = nearestMounted.stateNode;
-              if (isRootDehydrated(root2)) {
+              var root22 = nearestMounted.stateNode;
+              if (isRootDehydrated(root22)) {
                 queuedTarget.blockedOn = getContainerFromFiber(nearestMounted);
                 return;
               }
@@ -12904,25 +12904,25 @@ function requireReactDom_development() {
         }
         return listenerWrapper.bind(null, domEventName, eventSystemFlags, targetContainer);
       }
-      function dispatchDiscreteEvent(domEventName, eventSystemFlags, container2, nativeEvent) {
+      function dispatchDiscreteEvent(domEventName, eventSystemFlags, container, nativeEvent) {
         var previousPriority = getCurrentUpdatePriority();
         var prevTransition = ReactCurrentBatchConfig.transition;
         ReactCurrentBatchConfig.transition = null;
         try {
           setCurrentUpdatePriority(DiscreteEventPriority);
-          dispatchEvent(domEventName, eventSystemFlags, container2, nativeEvent);
+          dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
         } finally {
           setCurrentUpdatePriority(previousPriority);
           ReactCurrentBatchConfig.transition = prevTransition;
         }
       }
-      function dispatchContinuousEvent(domEventName, eventSystemFlags, container2, nativeEvent) {
+      function dispatchContinuousEvent(domEventName, eventSystemFlags, container, nativeEvent) {
         var previousPriority = getCurrentUpdatePriority();
         var prevTransition = ReactCurrentBatchConfig.transition;
         ReactCurrentBatchConfig.transition = null;
         try {
           setCurrentUpdatePriority(ContinuousEventPriority);
-          dispatchEvent(domEventName, eventSystemFlags, container2, nativeEvent);
+          dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
         } finally {
           setCurrentUpdatePriority(previousPriority);
           ReactCurrentBatchConfig.transition = prevTransition;
@@ -12988,8 +12988,8 @@ function requireReactDom_development() {
               }
               targetInst = null;
             } else if (tag === HostRoot) {
-              var root2 = nearestMounted.stateNode;
-              if (isRootDehydrated(root2)) {
+              var root22 = nearestMounted.stateNode;
+              if (isRootDehydrated(root22)) {
                 return getContainerFromFiber(nearestMounted);
               }
               targetInst = null;
@@ -13125,16 +13125,16 @@ function requireReactDom_development() {
         });
         return listener;
       }
-      var root = null;
+      var root2 = null;
       var startText = null;
       var fallbackText = null;
       function initialize(nativeEventTarget) {
-        root = nativeEventTarget;
+        root2 = nativeEventTarget;
         startText = getText();
         return true;
       }
       function reset() {
-        root = null;
+        root2 = null;
         startText = null;
         fallbackText = null;
       }
@@ -13164,10 +13164,10 @@ function requireReactDom_development() {
         return fallbackText;
       }
       function getText() {
-        if ("value" in root) {
-          return root.value;
+        if ("value" in root2) {
+          return root2.value;
         }
-        return root.textContent;
+        return root2.textContent;
       }
       function getEventCharCode(nativeEvent) {
         var charCode;
@@ -13997,8 +13997,8 @@ function requireReactDom_development() {
           node = node.parentNode;
         }
       }
-      function getNodeForCharacterOffset(root2, offset) {
-        var node = getLeafNode(root2);
+      function getNodeForCharacterOffset(root22, offset) {
+        var node = getLeafNode(root22);
         var nodeStart = 0;
         var nodeEnd = 0;
         while (node) {
@@ -14638,8 +14638,8 @@ function requireReactDom_development() {
               }
               var nodeTag = node.tag;
               if (nodeTag === HostRoot || nodeTag === HostPortal) {
-                var container2 = node.stateNode.containerInfo;
-                if (isMatchingRootContainer(container2, targetContainerNode)) {
+                var container = node.stateNode.containerInfo;
+                if (isMatchingRootContainer(container, targetContainerNode)) {
                   break;
                 }
                 if (nodeTag === HostPortal) {
@@ -14655,8 +14655,8 @@ function requireReactDom_development() {
                     grandNode = grandNode.return;
                   }
                 }
-                while (container2 !== null) {
-                  var parentNode = getClosestInstanceFromNode(container2);
+                while (container !== null) {
+                  var parentNode = getClosestInstanceFromNode(container);
                   if (parentNode === null) {
                     return;
                   }
@@ -14665,7 +14665,7 @@ function requireReactDom_development() {
                     node = ancestorInst = parentNode;
                     continue mainLoop;
                   }
-                  container2 = container2.parentNode;
+                  container = container.parentNode;
                 }
               }
               node = node.return;
@@ -15790,14 +15790,14 @@ function requireReactDom_development() {
           case DOCUMENT_NODE:
           case DOCUMENT_FRAGMENT_NODE: {
             type = nodeType === DOCUMENT_NODE ? "#document" : "#fragment";
-            var root2 = rootContainerInstance.documentElement;
-            namespace = root2 ? root2.namespaceURI : getChildNamespace(null, "");
+            var root22 = rootContainerInstance.documentElement;
+            namespace = root22 ? root22.namespaceURI : getChildNamespace(null, "");
             break;
           }
           default: {
-            var container2 = nodeType === COMMENT_NODE ? rootContainerInstance.parentNode : rootContainerInstance;
-            var ownNamespace = container2.namespaceURI || null;
-            type = container2.tagName;
+            var container = nodeType === COMMENT_NODE ? rootContainerInstance.parentNode : rootContainerInstance;
+            var ownNamespace = container.namespaceURI || null;
+            type = container.tagName;
             namespace = getChildNamespace(ownNamespace, type);
             break;
           }
@@ -15945,16 +15945,16 @@ function requireReactDom_development() {
       function appendChild(parentInstance, child) {
         parentInstance.appendChild(child);
       }
-      function appendChildToContainer(container2, child) {
+      function appendChildToContainer(container, child) {
         var parentNode;
-        if (container2.nodeType === COMMENT_NODE) {
-          parentNode = container2.parentNode;
-          parentNode.insertBefore(child, container2);
+        if (container.nodeType === COMMENT_NODE) {
+          parentNode = container.parentNode;
+          parentNode.insertBefore(child, container);
         } else {
-          parentNode = container2;
+          parentNode = container;
           parentNode.appendChild(child);
         }
-        var reactRootContainer = container2._reactRootContainer;
+        var reactRootContainer = container._reactRootContainer;
         if ((reactRootContainer === null || reactRootContainer === void 0) && parentNode.onclick === null) {
           trapClickOnNonInteractiveElement(parentNode);
         }
@@ -15962,21 +15962,21 @@ function requireReactDom_development() {
       function insertBefore(parentInstance, child, beforeChild) {
         parentInstance.insertBefore(child, beforeChild);
       }
-      function insertInContainerBefore(container2, child, beforeChild) {
-        if (container2.nodeType === COMMENT_NODE) {
-          container2.parentNode.insertBefore(child, beforeChild);
+      function insertInContainerBefore(container, child, beforeChild) {
+        if (container.nodeType === COMMENT_NODE) {
+          container.parentNode.insertBefore(child, beforeChild);
         } else {
-          container2.insertBefore(child, beforeChild);
+          container.insertBefore(child, beforeChild);
         }
       }
       function removeChild(parentInstance, child) {
         parentInstance.removeChild(child);
       }
-      function removeChildFromContainer(container2, child) {
-        if (container2.nodeType === COMMENT_NODE) {
-          container2.parentNode.removeChild(child);
+      function removeChildFromContainer(container, child) {
+        if (container.nodeType === COMMENT_NODE) {
+          container.parentNode.removeChild(child);
         } else {
-          container2.removeChild(child);
+          container.removeChild(child);
         }
       }
       function clearSuspenseBoundary(parentInstance, suspenseInstance) {
@@ -16003,13 +16003,13 @@ function requireReactDom_development() {
         } while (node);
         retryIfBlockedOn(suspenseInstance);
       }
-      function clearSuspenseBoundaryFromContainer(container2, suspenseInstance) {
-        if (container2.nodeType === COMMENT_NODE) {
-          clearSuspenseBoundary(container2.parentNode, suspenseInstance);
-        } else if (container2.nodeType === ELEMENT_NODE) {
-          clearSuspenseBoundary(container2, suspenseInstance);
+      function clearSuspenseBoundaryFromContainer(container, suspenseInstance) {
+        if (container.nodeType === COMMENT_NODE) {
+          clearSuspenseBoundary(container.parentNode, suspenseInstance);
+        } else if (container.nodeType === ELEMENT_NODE) {
+          clearSuspenseBoundary(container, suspenseInstance);
         }
-        retryIfBlockedOn(container2);
+        retryIfBlockedOn(container);
       }
       function hideInstance(instance2) {
         instance2 = instance2;
@@ -16032,12 +16032,12 @@ function requireReactDom_development() {
       function unhideTextInstance(textInstance, text2) {
         textInstance.nodeValue = text2;
       }
-      function clearContainer(container2) {
-        if (container2.nodeType === ELEMENT_NODE) {
-          container2.textContent = "";
-        } else if (container2.nodeType === DOCUMENT_NODE) {
-          if (container2.documentElement) {
-            container2.removeChild(container2.documentElement);
+      function clearContainer(container) {
+        if (container.nodeType === ELEMENT_NODE) {
+          container.textContent = "";
+        } else if (container.nodeType === DOCUMENT_NODE) {
+          if (container.documentElement) {
+            container.removeChild(container.documentElement);
           }
         }
       }
@@ -16175,8 +16175,8 @@ function requireReactDom_development() {
         }
         return null;
       }
-      function commitHydratedContainer(container2) {
-        retryIfBlockedOn(container2);
+      function commitHydratedContainer(container) {
+        retryIfBlockedOn(container);
       }
       function commitHydratedSuspenseInstance(suspenseInstance) {
         retryIfBlockedOn(suspenseInstance);
@@ -18417,8 +18417,8 @@ function requireReactDom_development() {
           parent = parent.return;
         }
         if (node.tag === HostRoot) {
-          var root2 = node.stateNode;
-          return root2;
+          var root22 = node.stateNode;
+          return root22;
         } else {
           return null;
         }
@@ -18499,7 +18499,7 @@ function requireReactDom_development() {
           return enqueueConcurrentClassUpdate(fiber, sharedQueue, update, lane);
         }
       }
-      function entangleTransitions(root2, fiber, lane) {
+      function entangleTransitions(root22, fiber, lane) {
         var updateQueue = fiber.updateQueue;
         if (updateQueue === null) {
           return;
@@ -18507,10 +18507,10 @@ function requireReactDom_development() {
         var sharedQueue = updateQueue.shared;
         if (isTransitionLane(lane)) {
           var queueLanes = sharedQueue.lanes;
-          queueLanes = intersectLanes(queueLanes, root2.pendingLanes);
+          queueLanes = intersectLanes(queueLanes, root22.pendingLanes);
           var newQueueLanes = mergeLanes(queueLanes, lane);
           sharedQueue.lanes = newQueueLanes;
-          markRootEntangled(root2, newQueueLanes);
+          markRootEntangled(root22, newQueueLanes);
         }
       }
       function enqueueCapturedUpdate(workInProgress2, capturedUpdate) {
@@ -18936,13 +18936,13 @@ function requireReactDom_development() {
         }
         workInProgressSources.length = 0;
       }
-      function registerMutableSourceForHydration(root2, mutableSource) {
+      function registerMutableSourceForHydration(root22, mutableSource) {
         var getVersion = mutableSource._getVersion;
         var version = getVersion(mutableSource._source);
-        if (root2.mutableSourceEagerHydrationData == null) {
-          root2.mutableSourceEagerHydrationData = [mutableSource, version];
+        if (root22.mutableSourceEagerHydrationData == null) {
+          root22.mutableSourceEagerHydrationData = [mutableSource, version];
         } else {
-          root2.mutableSourceEagerHydrationData.push(mutableSource, version);
+          root22.mutableSourceEagerHydrationData.push(mutableSource, version);
         }
       }
       var ReactCurrentDispatcher$1 = ReactSharedInternals.ReactCurrentDispatcher, ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig;
@@ -19411,11 +19411,11 @@ function requireReactDom_development() {
               }
             }
           }
-          var root2 = getWorkInProgressRoot();
-          if (root2 === null) {
+          var root22 = getWorkInProgressRoot();
+          if (root22 === null) {
             throw new Error("Expected a work-in-progress root. This is a bug in React. Please file an issue.");
           }
-          if (!includesBlockingLane(root2, renderLanes)) {
+          if (!includesBlockingLane(root22, renderLanes)) {
             pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
           }
         }
@@ -19456,11 +19456,11 @@ function requireReactDom_development() {
         workInProgressHook !== null && workInProgressHook.memoizedState.tag & HasEffect) {
           fiber.flags |= Passive;
           pushEffect(HasEffect | Passive$1, updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot), void 0, null);
-          var root2 = getWorkInProgressRoot();
-          if (root2 === null) {
+          var root22 = getWorkInProgressRoot();
+          if (root22 === null) {
             throw new Error("Expected a work-in-progress root. This is a bug in React. Please file an issue.");
           }
-          if (!includesBlockingLane(root2, renderLanes)) {
+          if (!includesBlockingLane(root22, renderLanes)) {
             pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
           }
         }
@@ -19512,9 +19512,9 @@ function requireReactDom_development() {
         }
       }
       function forceStoreRerender(fiber) {
-        var root2 = enqueueConcurrentRenderForLane(fiber, SyncLane);
-        if (root2 !== null) {
-          scheduleUpdateOnFiber(root2, fiber, SyncLane, NoTimestamp);
+        var root22 = enqueueConcurrentRenderForLane(fiber, SyncLane);
+        if (root22 !== null) {
+          scheduleUpdateOnFiber(root22, fiber, SyncLane, NoTimestamp);
         }
       }
       function mountState(initialState) {
@@ -19823,8 +19823,8 @@ function requireReactDom_development() {
       }
       function mountId() {
         var hook = mountWorkInProgressHook();
-        var root2 = getWorkInProgressRoot();
-        var identifierPrefix = root2.identifierPrefix;
+        var root22 = getWorkInProgressRoot();
+        var identifierPrefix = root22.identifierPrefix;
         var id;
         if (getIsHydrating()) {
           var treeId = getTreeId();
@@ -19863,11 +19863,11 @@ function requireReactDom_development() {
         if (isRenderPhaseUpdate(fiber)) {
           enqueueRenderPhaseUpdate(queue, update);
         } else {
-          var root2 = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
-          if (root2 !== null) {
+          var root22 = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
+          if (root22 !== null) {
             var eventTime = requestEventTime();
-            scheduleUpdateOnFiber(root2, fiber, lane, eventTime);
-            entangleTransitionUpdate(root2, queue, lane);
+            scheduleUpdateOnFiber(root22, fiber, lane, eventTime);
+            entangleTransitionUpdate(root22, queue, lane);
           }
         }
         markUpdateInDevTools(fiber, lane);
@@ -19915,11 +19915,11 @@ function requireReactDom_development() {
               }
             }
           }
-          var root2 = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
-          if (root2 !== null) {
+          var root22 = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
+          if (root22 !== null) {
             var eventTime = requestEventTime();
-            scheduleUpdateOnFiber(root2, fiber, lane, eventTime);
-            entangleTransitionUpdate(root2, queue, lane);
+            scheduleUpdateOnFiber(root22, fiber, lane, eventTime);
+            entangleTransitionUpdate(root22, queue, lane);
           }
         }
         markUpdateInDevTools(fiber, lane);
@@ -19939,13 +19939,13 @@ function requireReactDom_development() {
         }
         queue.pending = update;
       }
-      function entangleTransitionUpdate(root2, queue, lane) {
+      function entangleTransitionUpdate(root22, queue, lane) {
         if (isTransitionLane(lane)) {
           var queueLanes = queue.lanes;
-          queueLanes = intersectLanes(queueLanes, root2.pendingLanes);
+          queueLanes = intersectLanes(queueLanes, root22.pendingLanes);
           var newQueueLanes = mergeLanes(queueLanes, lane);
           queue.lanes = newQueueLanes;
-          markRootEntangled(root2, newQueueLanes);
+          markRootEntangled(root22, newQueueLanes);
         }
       }
       function markUpdateInDevTools(fiber, lane, action2) {
@@ -20833,8 +20833,8 @@ function requireReactDom_development() {
           while (parentFiber !== null) {
             switch (parentFiber.tag) {
               case HostRoot:
-                var root2 = parentFiber.stateNode;
-                root2.effectDuration += elapsedTime;
+                var root22 = parentFiber.stateNode;
+                root22.effectDuration += elapsedTime;
                 return;
               case Profiler:
                 var parentStateNode = parentFiber.stateNode;
@@ -20853,9 +20853,9 @@ function requireReactDom_development() {
           while (parentFiber !== null) {
             switch (parentFiber.tag) {
               case HostRoot:
-                var root2 = parentFiber.stateNode;
-                if (root2 !== null) {
-                  root2.passiveEffectDuration += elapsedTime;
+                var root22 = parentFiber.stateNode;
+                if (root22 !== null) {
+                  root22.passiveEffectDuration += elapsedTime;
                 }
                 return;
               case Profiler:
@@ -20980,10 +20980,10 @@ function requireReactDom_development() {
             }
             update.callback = callback;
           }
-          var root2 = enqueueUpdate(fiber, update, lane);
-          if (root2 !== null) {
-            scheduleUpdateOnFiber(root2, fiber, lane, eventTime);
-            entangleTransitions(root2, fiber, lane);
+          var root22 = enqueueUpdate(fiber, update, lane);
+          if (root22 !== null) {
+            scheduleUpdateOnFiber(root22, fiber, lane, eventTime);
+            entangleTransitions(root22, fiber, lane);
           }
           {
             markStateUpdateScheduled(fiber, lane);
@@ -21002,10 +21002,10 @@ function requireReactDom_development() {
             }
             update.callback = callback;
           }
-          var root2 = enqueueUpdate(fiber, update, lane);
-          if (root2 !== null) {
-            scheduleUpdateOnFiber(root2, fiber, lane, eventTime);
-            entangleTransitions(root2, fiber, lane);
+          var root22 = enqueueUpdate(fiber, update, lane);
+          if (root22 !== null) {
+            scheduleUpdateOnFiber(root22, fiber, lane, eventTime);
+            entangleTransitions(root22, fiber, lane);
           }
           {
             markStateUpdateScheduled(fiber, lane);
@@ -21023,10 +21023,10 @@ function requireReactDom_development() {
             }
             update.callback = callback;
           }
-          var root2 = enqueueUpdate(fiber, update, lane);
-          if (root2 !== null) {
-            scheduleUpdateOnFiber(root2, fiber, lane, eventTime);
-            entangleTransitions(root2, fiber, lane);
+          var root22 = enqueueUpdate(fiber, update, lane);
+          if (root22 !== null) {
+            scheduleUpdateOnFiber(root22, fiber, lane, eventTime);
+            entangleTransitions(root22, fiber, lane);
           }
           {
             markForceUpdateScheduled(fiber, lane);
@@ -21611,11 +21611,11 @@ function requireReactDom_development() {
         }
         return update;
       }
-      function attachPingListener(root2, wakeable, lanes) {
-        var pingCache = root2.pingCache;
+      function attachPingListener(root22, wakeable, lanes) {
+        var pingCache = root22.pingCache;
         var threadIDs;
         if (pingCache === null) {
-          pingCache = root2.pingCache = new PossiblyWeakMap$1();
+          pingCache = root22.pingCache = new PossiblyWeakMap$1();
           threadIDs = /* @__PURE__ */ new Set();
           pingCache.set(wakeable, threadIDs);
         } else {
@@ -21627,16 +21627,16 @@ function requireReactDom_development() {
         }
         if (!threadIDs.has(lanes)) {
           threadIDs.add(lanes);
-          var ping = pingSuspendedRoot.bind(null, root2, wakeable, lanes);
+          var ping = pingSuspendedRoot.bind(null, root22, wakeable, lanes);
           {
             if (isDevToolsPresent) {
-              restorePendingUpdaters(root2, lanes);
+              restorePendingUpdaters(root22, lanes);
             }
           }
           wakeable.then(ping, ping);
         }
       }
-      function attachRetryListener(suspenseBoundary, root2, wakeable, lanes) {
+      function attachRetryListener(suspenseBoundary, root22, wakeable, lanes) {
         var wakeables = suspenseBoundary.updateQueue;
         if (wakeables === null) {
           var updateQueue = /* @__PURE__ */ new Set();
@@ -21670,7 +21670,7 @@ function requireReactDom_development() {
         } while (node !== null);
         return null;
       }
-      function markSuspenseBoundaryShouldCapture(suspenseBoundary, returnFiber, sourceFiber, root2, rootRenderLanes) {
+      function markSuspenseBoundaryShouldCapture(suspenseBoundary, returnFiber, sourceFiber, root22, rootRenderLanes) {
         if ((suspenseBoundary.mode & ConcurrentMode) === NoMode) {
           if (suspenseBoundary === returnFiber) {
             suspenseBoundary.flags |= ShouldCapture;
@@ -21696,11 +21696,11 @@ function requireReactDom_development() {
         suspenseBoundary.lanes = rootRenderLanes;
         return suspenseBoundary;
       }
-      function throwException(root2, returnFiber, sourceFiber, value, rootRenderLanes) {
+      function throwException(root22, returnFiber, sourceFiber, value, rootRenderLanes) {
         sourceFiber.flags |= Incomplete;
         {
           if (isDevToolsPresent) {
-            restorePendingUpdaters(root2, rootRenderLanes);
+            restorePendingUpdaters(root22, rootRenderLanes);
           }
         }
         if (value !== null && typeof value === "object" && typeof value.then === "function") {
@@ -21714,15 +21714,15 @@ function requireReactDom_development() {
           var suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
           if (suspenseBoundary !== null) {
             suspenseBoundary.flags &= ~ForceClientRender;
-            markSuspenseBoundaryShouldCapture(suspenseBoundary, returnFiber, sourceFiber, root2, rootRenderLanes);
+            markSuspenseBoundaryShouldCapture(suspenseBoundary, returnFiber, sourceFiber, root22, rootRenderLanes);
             if (suspenseBoundary.mode & ConcurrentMode) {
-              attachPingListener(root2, wakeable, rootRenderLanes);
+              attachPingListener(root22, wakeable, rootRenderLanes);
             }
-            attachRetryListener(suspenseBoundary, root2, wakeable);
+            attachRetryListener(suspenseBoundary, root22, wakeable);
             return;
           } else {
             if (!includesSyncLane(rootRenderLanes)) {
-              attachPingListener(root2, wakeable, rootRenderLanes);
+              attachPingListener(root22, wakeable, rootRenderLanes);
               renderDidSuspendDelayIfPossible();
               return;
             }
@@ -21737,7 +21737,7 @@ function requireReactDom_development() {
               if ((_suspenseBoundary.flags & ShouldCapture) === NoFlags) {
                 _suspenseBoundary.flags |= ForceClientRender;
               }
-              markSuspenseBoundaryShouldCapture(_suspenseBoundary, returnFiber, sourceFiber, root2, rootRenderLanes);
+              markSuspenseBoundaryShouldCapture(_suspenseBoundary, returnFiber, sourceFiber, root22, rootRenderLanes);
               queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
               return;
             }
@@ -22240,13 +22240,13 @@ function requireReactDom_development() {
         return workInProgress2.child;
       }
       function pushHostRootContext(workInProgress2) {
-        var root2 = workInProgress2.stateNode;
-        if (root2.pendingContext) {
-          pushTopLevelContextObject(workInProgress2, root2.pendingContext, root2.pendingContext !== root2.context);
-        } else if (root2.context) {
-          pushTopLevelContextObject(workInProgress2, root2.context, false);
+        var root22 = workInProgress2.stateNode;
+        if (root22.pendingContext) {
+          pushTopLevelContextObject(workInProgress2, root22.pendingContext, root22.pendingContext !== root22.context);
+        } else if (root22.context) {
+          pushTopLevelContextObject(workInProgress2, root22.context, false);
         }
-        pushHostContainer(workInProgress2, root2.containerInfo);
+        pushHostContainer(workInProgress2, root22.containerInfo);
       }
       function updateHostRoot(current2, workInProgress2, renderLanes2) {
         pushHostRootContext(workInProgress2);
@@ -22847,14 +22847,14 @@ function requireReactDom_development() {
           }
           var hasContextChanged2 = includesSomeLane(renderLanes2, current2.childLanes);
           if (didReceiveUpdate || hasContextChanged2) {
-            var root2 = getWorkInProgressRoot();
-            if (root2 !== null) {
-              var attemptHydrationAtLane = getBumpedLaneForHydration(root2, renderLanes2);
+            var root22 = getWorkInProgressRoot();
+            if (root22 !== null) {
+              var attemptHydrationAtLane = getBumpedLaneForHydration(root22, renderLanes2);
               if (attemptHydrationAtLane !== NoLane && attemptHydrationAtLane !== suspenseState.retryLane) {
                 suspenseState.retryLane = attemptHydrationAtLane;
                 var eventTime = NoTimestamp;
                 enqueueConcurrentRenderForLane(current2, attemptHydrationAtLane);
-                scheduleUpdateOnFiber(root2, current2, attemptHydrationAtLane, eventTime);
+                scheduleUpdateOnFiber(root22, current2, attemptHydrationAtLane, eventTime);
               }
             }
             renderDidSuspendDelayIfPossible();
@@ -24267,8 +24267,8 @@ function requireReactDom_development() {
         }
       }
       var shouldFireAfterActiveInstanceBlur = false;
-      function commitBeforeMutationEffects(root2, firstChild) {
-        prepareForCommit(root2.containerInfo);
+      function commitBeforeMutationEffects(root22, firstChild) {
+        prepareForCommit(root22.containerInfo);
         nextEffect = firstChild;
         commitBeforeMutationEffects_begin();
         var shouldFire = shouldFireAfterActiveInstanceBlur;
@@ -24346,8 +24346,8 @@ function requireReactDom_development() {
             }
             case HostRoot: {
               {
-                var root2 = finishedWork.stateNode;
-                clearContainer(root2.containerInfo);
+                var root22 = finishedWork.stateNode;
+                clearContainer(root22.containerInfo);
               }
               break;
             }
@@ -24487,8 +24487,8 @@ function requireReactDom_development() {
                 outer: while (parentFiber !== null) {
                   switch (parentFiber.tag) {
                     case HostRoot:
-                      var root2 = parentFiber.stateNode;
-                      root2.passiveEffectDuration += passiveEffectDuration;
+                      var root22 = parentFiber.stateNode;
+                      root22.passiveEffectDuration += passiveEffectDuration;
                       break outer;
                     case Profiler:
                       var parentStateNode = parentFiber.stateNode;
@@ -24646,8 +24646,8 @@ function requireReactDom_development() {
                   outer: while (parentFiber !== null) {
                     switch (parentFiber.tag) {
                       case HostRoot:
-                        var root2 = parentFiber.stateNode;
-                        root2.effectDuration += effectDuration;
+                        var root22 = parentFiber.stateNode;
+                        root22.effectDuration += effectDuration;
                         break outer;
                       case Profiler:
                         var parentStateNode = parentFiber.stateNode;
@@ -24963,7 +24963,7 @@ function requireReactDom_development() {
       }
       var hostParent = null;
       var hostParentIsContainer = false;
-      function commitDeletionEffects(root2, returnFiber, deletedFiber) {
+      function commitDeletionEffects(root22, returnFiber, deletedFiber) {
         {
           var parent = returnFiber;
           findParent: while (parent !== null) {
@@ -24989,7 +24989,7 @@ function requireReactDom_development() {
           if (hostParent === null) {
             throw new Error("Expected to find a host parent. This error is likely caused by a bug in React. Please file an issue.");
           }
-          commitDeletionEffectsOnFiber(root2, returnFiber, deletedFiber);
+          commitDeletionEffectsOnFiber(root22, returnFiber, deletedFiber);
           hostParent = null;
           hostParentIsContainer = false;
         }
@@ -25172,22 +25172,22 @@ function requireReactDom_development() {
           });
         }
       }
-      function commitMutationEffects(root2, finishedWork, committedLanes) {
+      function commitMutationEffects(root22, finishedWork, committedLanes) {
         inProgressLanes = committedLanes;
-        inProgressRoot = root2;
+        inProgressRoot = root22;
         setCurrentFiber(finishedWork);
-        commitMutationEffectsOnFiber(finishedWork, root2);
+        commitMutationEffectsOnFiber(finishedWork, root22);
         setCurrentFiber(finishedWork);
         inProgressLanes = null;
         inProgressRoot = null;
       }
-      function recursivelyTraverseMutationEffects(root2, parentFiber, lanes) {
+      function recursivelyTraverseMutationEffects(root22, parentFiber, lanes) {
         var deletions = parentFiber.deletions;
         if (deletions !== null) {
           for (var i = 0; i < deletions.length; i++) {
             var childToDelete = deletions[i];
             try {
-              commitDeletionEffects(root2, parentFiber, childToDelete);
+              commitDeletionEffects(root22, parentFiber, childToDelete);
             } catch (error2) {
               captureCommitPhaseError(childToDelete, parentFiber, error2);
             }
@@ -25198,13 +25198,13 @@ function requireReactDom_development() {
           var child = parentFiber.child;
           while (child !== null) {
             setCurrentFiber(child);
-            commitMutationEffectsOnFiber(child, root2);
+            commitMutationEffectsOnFiber(child, root22);
             child = child.sibling;
           }
         }
         setCurrentFiber(prevDebugFiber);
       }
-      function commitMutationEffectsOnFiber(finishedWork, root2, lanes) {
+      function commitMutationEffectsOnFiber(finishedWork, root22, lanes) {
         var current2 = finishedWork.alternate;
         var flags = finishedWork.flags;
         switch (finishedWork.tag) {
@@ -25212,7 +25212,7 @@ function requireReactDom_development() {
           case ForwardRef:
           case MemoComponent:
           case SimpleMemoComponent: {
-            recursivelyTraverseMutationEffects(root2, finishedWork);
+            recursivelyTraverseMutationEffects(root22, finishedWork);
             commitReconciliationEffects(finishedWork);
             if (flags & Update) {
               try {
@@ -25240,7 +25240,7 @@ function requireReactDom_development() {
             return;
           }
           case ClassComponent: {
-            recursivelyTraverseMutationEffects(root2, finishedWork);
+            recursivelyTraverseMutationEffects(root22, finishedWork);
             commitReconciliationEffects(finishedWork);
             if (flags & Ref) {
               if (current2 !== null) {
@@ -25250,7 +25250,7 @@ function requireReactDom_development() {
             return;
           }
           case HostComponent: {
-            recursivelyTraverseMutationEffects(root2, finishedWork);
+            recursivelyTraverseMutationEffects(root22, finishedWork);
             commitReconciliationEffects(finishedWork);
             if (flags & Ref) {
               if (current2 !== null) {
@@ -25287,7 +25287,7 @@ function requireReactDom_development() {
             return;
           }
           case HostText: {
-            recursivelyTraverseMutationEffects(root2, finishedWork);
+            recursivelyTraverseMutationEffects(root22, finishedWork);
             commitReconciliationEffects(finishedWork);
             if (flags & Update) {
               {
@@ -25307,7 +25307,7 @@ function requireReactDom_development() {
             return;
           }
           case HostRoot: {
-            recursivelyTraverseMutationEffects(root2, finishedWork);
+            recursivelyTraverseMutationEffects(root22, finishedWork);
             commitReconciliationEffects(finishedWork);
             if (flags & Update) {
               {
@@ -25315,7 +25315,7 @@ function requireReactDom_development() {
                   var prevRootState = current2.memoizedState;
                   if (prevRootState.isDehydrated) {
                     try {
-                      commitHydratedContainer(root2.containerInfo);
+                      commitHydratedContainer(root22.containerInfo);
                     } catch (error2) {
                       captureCommitPhaseError(finishedWork, finishedWork.return, error2);
                     }
@@ -25326,12 +25326,12 @@ function requireReactDom_development() {
             return;
           }
           case HostPortal: {
-            recursivelyTraverseMutationEffects(root2, finishedWork);
+            recursivelyTraverseMutationEffects(root22, finishedWork);
             commitReconciliationEffects(finishedWork);
             return;
           }
           case SuspenseComponent: {
-            recursivelyTraverseMutationEffects(root2, finishedWork);
+            recursivelyTraverseMutationEffects(root22, finishedWork);
             commitReconciliationEffects(finishedWork);
             var offscreenFiber = finishedWork.child;
             if (offscreenFiber.flags & Visibility) {
@@ -25364,10 +25364,10 @@ function requireReactDom_development() {
             ) {
               var prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
               offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden || _wasHidden;
-              recursivelyTraverseMutationEffects(root2, finishedWork);
+              recursivelyTraverseMutationEffects(root22, finishedWork);
               offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
             } else {
-              recursivelyTraverseMutationEffects(root2, finishedWork);
+              recursivelyTraverseMutationEffects(root22, finishedWork);
             }
             commitReconciliationEffects(finishedWork);
             if (flags & Visibility) {
@@ -25398,7 +25398,7 @@ function requireReactDom_development() {
             return;
           }
           case SuspenseListComponent: {
-            recursivelyTraverseMutationEffects(root2, finishedWork);
+            recursivelyTraverseMutationEffects(root22, finishedWork);
             commitReconciliationEffects(finishedWork);
             if (flags & Update) {
               attachSuspenseRetryListeners(finishedWork);
@@ -25409,7 +25409,7 @@ function requireReactDom_development() {
             return;
           }
           default: {
-            recursivelyTraverseMutationEffects(root2, finishedWork);
+            recursivelyTraverseMutationEffects(root22, finishedWork);
             commitReconciliationEffects(finishedWork);
             return;
           }
@@ -25429,15 +25429,15 @@ function requireReactDom_development() {
           finishedWork.flags &= ~Hydrating;
         }
       }
-      function commitLayoutEffects(finishedWork, root2, committedLanes) {
+      function commitLayoutEffects(finishedWork, root22, committedLanes) {
         inProgressLanes = committedLanes;
-        inProgressRoot = root2;
+        inProgressRoot = root22;
         nextEffect = finishedWork;
-        commitLayoutEffects_begin(finishedWork, root2, committedLanes);
+        commitLayoutEffects_begin(finishedWork, root22, committedLanes);
         inProgressLanes = null;
         inProgressRoot = null;
       }
-      function commitLayoutEffects_begin(subtreeRoot, root2, committedLanes) {
+      function commitLayoutEffects_begin(subtreeRoot, root22, committedLanes) {
         var isModernRoot = (subtreeRoot.mode & ConcurrentMode) !== NoMode;
         while (nextEffect !== null) {
           var fiber = nextEffect;
@@ -25446,7 +25446,7 @@ function requireReactDom_development() {
             var isHidden = fiber.memoizedState !== null;
             var newOffscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
             if (newOffscreenSubtreeIsHidden) {
-              commitLayoutMountEffects_complete(subtreeRoot, root2, committedLanes);
+              commitLayoutMountEffects_complete(subtreeRoot, root22, committedLanes);
               continue;
             } else {
               var current2 = fiber.alternate;
@@ -25466,7 +25466,7 @@ function requireReactDom_development() {
                 commitLayoutEffects_begin(
                   child,
                   // New root; bubble back up to here and stop.
-                  root2,
+                  root22,
                   committedLanes
                 );
                 child = child.sibling;
@@ -25474,7 +25474,7 @@ function requireReactDom_development() {
               nextEffect = fiber;
               offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
               offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
-              commitLayoutMountEffects_complete(subtreeRoot, root2, committedLanes);
+              commitLayoutMountEffects_complete(subtreeRoot, root22, committedLanes);
               continue;
             }
           }
@@ -25482,18 +25482,18 @@ function requireReactDom_development() {
             firstChild.return = fiber;
             nextEffect = firstChild;
           } else {
-            commitLayoutMountEffects_complete(subtreeRoot, root2, committedLanes);
+            commitLayoutMountEffects_complete(subtreeRoot, root22, committedLanes);
           }
         }
       }
-      function commitLayoutMountEffects_complete(subtreeRoot, root2, committedLanes) {
+      function commitLayoutMountEffects_complete(subtreeRoot, root22, committedLanes) {
         while (nextEffect !== null) {
           var fiber = nextEffect;
           if ((fiber.flags & LayoutMask) !== NoFlags) {
             var current2 = fiber.alternate;
             setCurrentFiber(fiber);
             try {
-              commitLayoutEffectOnFiber(root2, current2, fiber, committedLanes);
+              commitLayoutEffectOnFiber(root22, current2, fiber, committedLanes);
             } catch (error2) {
               captureCommitPhaseError(fiber, fiber.return, error2);
             }
@@ -25620,11 +25620,11 @@ function requireReactDom_development() {
           nextEffect = fiber.return;
         }
       }
-      function commitPassiveMountEffects(root2, finishedWork, committedLanes, committedTransitions) {
+      function commitPassiveMountEffects(root22, finishedWork, committedLanes, committedTransitions) {
         nextEffect = finishedWork;
-        commitPassiveMountEffects_begin(finishedWork, root2, committedLanes, committedTransitions);
+        commitPassiveMountEffects_begin(finishedWork, root22, committedLanes, committedTransitions);
       }
-      function commitPassiveMountEffects_begin(subtreeRoot, root2, committedLanes, committedTransitions) {
+      function commitPassiveMountEffects_begin(subtreeRoot, root22, committedLanes, committedTransitions) {
         while (nextEffect !== null) {
           var fiber = nextEffect;
           var firstChild = fiber.child;
@@ -25632,17 +25632,17 @@ function requireReactDom_development() {
             firstChild.return = fiber;
             nextEffect = firstChild;
           } else {
-            commitPassiveMountEffects_complete(subtreeRoot, root2, committedLanes, committedTransitions);
+            commitPassiveMountEffects_complete(subtreeRoot, root22, committedLanes, committedTransitions);
           }
         }
       }
-      function commitPassiveMountEffects_complete(subtreeRoot, root2, committedLanes, committedTransitions) {
+      function commitPassiveMountEffects_complete(subtreeRoot, root22, committedLanes, committedTransitions) {
         while (nextEffect !== null) {
           var fiber = nextEffect;
           if ((fiber.flags & Passive) !== NoFlags) {
             setCurrentFiber(fiber);
             try {
-              commitPassiveMountOnFiber(root2, fiber, committedLanes, committedTransitions);
+              commitPassiveMountOnFiber(root22, fiber, committedLanes, committedTransitions);
             } catch (error2) {
               captureCommitPhaseError(fiber, fiber.return, error2);
             }
@@ -26039,7 +26039,7 @@ function requireReactDom_development() {
         }
         return claimNextRetryLane();
       }
-      function scheduleUpdateOnFiber(root2, fiber, lane, eventTime) {
+      function scheduleUpdateOnFiber(root22, fiber, lane, eventTime) {
         checkForNestedUpdates();
         {
           if (isRunningInsertionEffect) {
@@ -26051,25 +26051,25 @@ function requireReactDom_development() {
             didScheduleUpdateDuringPassiveEffects = true;
           }
         }
-        markRootUpdated(root2, lane, eventTime);
-        if ((executionContext & RenderContext) !== NoLanes && root2 === workInProgressRoot) {
+        markRootUpdated(root22, lane, eventTime);
+        if ((executionContext & RenderContext) !== NoLanes && root22 === workInProgressRoot) {
           warnAboutRenderPhaseUpdatesInDEV(fiber);
         } else {
           {
             if (isDevToolsPresent) {
-              addFiberToLanesMap(root2, fiber, lane);
+              addFiberToLanesMap(root22, fiber, lane);
             }
           }
           warnIfUpdatesNotWrappedWithActDEV(fiber);
-          if (root2 === workInProgressRoot) {
+          if (root22 === workInProgressRoot) {
             if ((executionContext & RenderContext) === NoContext) {
               workInProgressRootInterleavedUpdatedLanes = mergeLanes(workInProgressRootInterleavedUpdatedLanes, lane);
             }
             if (workInProgressRootExitStatus === RootSuspendedWithDelay) {
-              markRootSuspended$1(root2, workInProgressRootRenderLanes);
+              markRootSuspended$1(root22, workInProgressRootRenderLanes);
             }
           }
-          ensureRootIsScheduled(root2, eventTime);
+          ensureRootIsScheduled(root22, eventTime);
           if (lane === SyncLane && executionContext === NoContext && (fiber.mode & ConcurrentMode) === NoMode && // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
           !ReactCurrentActQueue$1.isBatchingLegacy) {
             resetRenderTimer();
@@ -26077,11 +26077,11 @@ function requireReactDom_development() {
           }
         }
       }
-      function scheduleInitialHydrationOnRoot(root2, lane, eventTime) {
-        var current2 = root2.current;
+      function scheduleInitialHydrationOnRoot(root22, lane, eventTime) {
+        var current2 = root22.current;
         current2.lanes = lane;
-        markRootUpdated(root2, lane, eventTime);
-        ensureRootIsScheduled(root2, eventTime);
+        markRootUpdated(root22, lane, eventTime);
+        ensureRootIsScheduled(root22, eventTime);
       }
       function isUnsafeClassRenderPhaseUpdate(fiber) {
         return (
@@ -26090,20 +26090,20 @@ function requireReactDom_development() {
           (executionContext & RenderContext) !== NoContext
         );
       }
-      function ensureRootIsScheduled(root2, currentTime) {
-        var existingCallbackNode = root2.callbackNode;
-        markStarvedLanesAsExpired(root2, currentTime);
-        var nextLanes = getNextLanes(root2, root2 === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes);
+      function ensureRootIsScheduled(root22, currentTime) {
+        var existingCallbackNode = root22.callbackNode;
+        markStarvedLanesAsExpired(root22, currentTime);
+        var nextLanes = getNextLanes(root22, root22 === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes);
         if (nextLanes === NoLanes) {
           if (existingCallbackNode !== null) {
             cancelCallback$1(existingCallbackNode);
           }
-          root2.callbackNode = null;
-          root2.callbackPriority = NoLane;
+          root22.callbackNode = null;
+          root22.callbackPriority = NoLane;
           return;
         }
         var newCallbackPriority = getHighestPriorityLane(nextLanes);
-        var existingCallbackPriority = root2.callbackPriority;
+        var existingCallbackPriority = root22.callbackPriority;
         if (existingCallbackPriority === newCallbackPriority && // Special case related to `act`. If the currently scheduled task is a
         // Scheduler task, rather than an `act` task, cancel it and re-scheduled
         // on the `act` queue.
@@ -26120,13 +26120,13 @@ function requireReactDom_development() {
         }
         var newCallbackNode;
         if (newCallbackPriority === SyncLane) {
-          if (root2.tag === LegacyRoot) {
+          if (root22.tag === LegacyRoot) {
             if (ReactCurrentActQueue$1.isBatchingLegacy !== null) {
               ReactCurrentActQueue$1.didScheduleLegacyUpdate = true;
             }
-            scheduleLegacySyncCallback(performSyncWorkOnRoot.bind(null, root2));
+            scheduleLegacySyncCallback(performSyncWorkOnRoot.bind(null, root22));
           } else {
-            scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root2));
+            scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root22));
           }
           {
             if (ReactCurrentActQueue$1.current !== null) {
@@ -26159,12 +26159,12 @@ function requireReactDom_development() {
               schedulerPriorityLevel = NormalPriority;
               break;
           }
-          newCallbackNode = scheduleCallback$1(schedulerPriorityLevel, performConcurrentWorkOnRoot.bind(null, root2));
+          newCallbackNode = scheduleCallback$1(schedulerPriorityLevel, performConcurrentWorkOnRoot.bind(null, root22));
         }
-        root2.callbackPriority = newCallbackPriority;
-        root2.callbackNode = newCallbackNode;
+        root22.callbackPriority = newCallbackPriority;
+        root22.callbackNode = newCallbackNode;
       }
-      function performConcurrentWorkOnRoot(root2, didTimeout) {
+      function performConcurrentWorkOnRoot(root22, didTimeout) {
         {
           resetNestedUpdateFlag();
         }
@@ -26173,77 +26173,77 @@ function requireReactDom_development() {
         if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
           throw new Error("Should not already be working.");
         }
-        var originalCallbackNode = root2.callbackNode;
+        var originalCallbackNode = root22.callbackNode;
         var didFlushPassiveEffects = flushPassiveEffects();
         if (didFlushPassiveEffects) {
-          if (root2.callbackNode !== originalCallbackNode) {
+          if (root22.callbackNode !== originalCallbackNode) {
             return null;
           }
         }
-        var lanes = getNextLanes(root2, root2 === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes);
+        var lanes = getNextLanes(root22, root22 === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes);
         if (lanes === NoLanes) {
           return null;
         }
-        var shouldTimeSlice = !includesBlockingLane(root2, lanes) && !includesExpiredLane(root2, lanes) && !didTimeout;
-        var exitStatus = shouldTimeSlice ? renderRootConcurrent(root2, lanes) : renderRootSync(root2, lanes);
+        var shouldTimeSlice = !includesBlockingLane(root22, lanes) && !includesExpiredLane(root22, lanes) && !didTimeout;
+        var exitStatus = shouldTimeSlice ? renderRootConcurrent(root22, lanes) : renderRootSync(root22, lanes);
         if (exitStatus !== RootInProgress) {
           if (exitStatus === RootErrored) {
-            var errorRetryLanes = getLanesToRetrySynchronouslyOnError(root2);
+            var errorRetryLanes = getLanesToRetrySynchronouslyOnError(root22);
             if (errorRetryLanes !== NoLanes) {
               lanes = errorRetryLanes;
-              exitStatus = recoverFromConcurrentError(root2, errorRetryLanes);
+              exitStatus = recoverFromConcurrentError(root22, errorRetryLanes);
             }
           }
           if (exitStatus === RootFatalErrored) {
             var fatalError = workInProgressRootFatalError;
-            prepareFreshStack(root2, NoLanes);
-            markRootSuspended$1(root2, lanes);
-            ensureRootIsScheduled(root2, now());
+            prepareFreshStack(root22, NoLanes);
+            markRootSuspended$1(root22, lanes);
+            ensureRootIsScheduled(root22, now());
             throw fatalError;
           }
           if (exitStatus === RootDidNotComplete) {
-            markRootSuspended$1(root2, lanes);
+            markRootSuspended$1(root22, lanes);
           } else {
-            var renderWasConcurrent = !includesBlockingLane(root2, lanes);
-            var finishedWork = root2.current.alternate;
+            var renderWasConcurrent = !includesBlockingLane(root22, lanes);
+            var finishedWork = root22.current.alternate;
             if (renderWasConcurrent && !isRenderConsistentWithExternalStores(finishedWork)) {
-              exitStatus = renderRootSync(root2, lanes);
+              exitStatus = renderRootSync(root22, lanes);
               if (exitStatus === RootErrored) {
-                var _errorRetryLanes = getLanesToRetrySynchronouslyOnError(root2);
+                var _errorRetryLanes = getLanesToRetrySynchronouslyOnError(root22);
                 if (_errorRetryLanes !== NoLanes) {
                   lanes = _errorRetryLanes;
-                  exitStatus = recoverFromConcurrentError(root2, _errorRetryLanes);
+                  exitStatus = recoverFromConcurrentError(root22, _errorRetryLanes);
                 }
               }
               if (exitStatus === RootFatalErrored) {
                 var _fatalError = workInProgressRootFatalError;
-                prepareFreshStack(root2, NoLanes);
-                markRootSuspended$1(root2, lanes);
-                ensureRootIsScheduled(root2, now());
+                prepareFreshStack(root22, NoLanes);
+                markRootSuspended$1(root22, lanes);
+                ensureRootIsScheduled(root22, now());
                 throw _fatalError;
               }
             }
-            root2.finishedWork = finishedWork;
-            root2.finishedLanes = lanes;
-            finishConcurrentRender(root2, exitStatus, lanes);
+            root22.finishedWork = finishedWork;
+            root22.finishedLanes = lanes;
+            finishConcurrentRender(root22, exitStatus, lanes);
           }
         }
-        ensureRootIsScheduled(root2, now());
-        if (root2.callbackNode === originalCallbackNode) {
-          return performConcurrentWorkOnRoot.bind(null, root2);
+        ensureRootIsScheduled(root22, now());
+        if (root22.callbackNode === originalCallbackNode) {
+          return performConcurrentWorkOnRoot.bind(null, root22);
         }
         return null;
       }
-      function recoverFromConcurrentError(root2, errorRetryLanes) {
+      function recoverFromConcurrentError(root22, errorRetryLanes) {
         var errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
-        if (isRootDehydrated(root2)) {
-          var rootWorkInProgress = prepareFreshStack(root2, errorRetryLanes);
+        if (isRootDehydrated(root22)) {
+          var rootWorkInProgress = prepareFreshStack(root22, errorRetryLanes);
           rootWorkInProgress.flags |= ForceClientRender;
           {
-            errorHydratingContainer(root2.containerInfo);
+            errorHydratingContainer(root22.containerInfo);
           }
         }
-        var exitStatus = renderRootSync(root2, errorRetryLanes);
+        var exitStatus = renderRootSync(root22, errorRetryLanes);
         if (exitStatus !== RootErrored) {
           var errorsFromSecondAttempt = workInProgressRootRecoverableErrors;
           workInProgressRootRecoverableErrors = errorsFromFirstAttempt;
@@ -26260,7 +26260,7 @@ function requireReactDom_development() {
           workInProgressRootRecoverableErrors.push.apply(workInProgressRootRecoverableErrors, errors2);
         }
       }
-      function finishConcurrentRender(root2, exitStatus, lanes) {
+      function finishConcurrentRender(root22, exitStatus, lanes) {
         switch (exitStatus) {
           case RootInProgress:
           case RootFatalErrored: {
@@ -26270,52 +26270,52 @@ function requireReactDom_development() {
           // statement, but eslint doesn't know about invariant, so it complains
           // if I do. eslint-disable-next-line no-fallthrough
           case RootErrored: {
-            commitRoot(root2, workInProgressRootRecoverableErrors, workInProgressTransitions);
+            commitRoot(root22, workInProgressRootRecoverableErrors, workInProgressTransitions);
             break;
           }
           case RootSuspended: {
-            markRootSuspended$1(root2, lanes);
+            markRootSuspended$1(root22, lanes);
             if (includesOnlyRetries(lanes) && // do not delay if we're inside an act() scope
             !shouldForceFlushFallbacksInDEV()) {
               var msUntilTimeout = globalMostRecentFallbackTime + FALLBACK_THROTTLE_MS - now();
               if (msUntilTimeout > 10) {
-                var nextLanes = getNextLanes(root2, NoLanes);
+                var nextLanes = getNextLanes(root22, NoLanes);
                 if (nextLanes !== NoLanes) {
                   break;
                 }
-                var suspendedLanes = root2.suspendedLanes;
+                var suspendedLanes = root22.suspendedLanes;
                 if (!isSubsetOfLanes(suspendedLanes, lanes)) {
                   requestEventTime();
-                  markRootPinged(root2, suspendedLanes);
+                  markRootPinged(root22, suspendedLanes);
                   break;
                 }
-                root2.timeoutHandle = scheduleTimeout(commitRoot.bind(null, root2, workInProgressRootRecoverableErrors, workInProgressTransitions), msUntilTimeout);
+                root22.timeoutHandle = scheduleTimeout(commitRoot.bind(null, root22, workInProgressRootRecoverableErrors, workInProgressTransitions), msUntilTimeout);
                 break;
               }
             }
-            commitRoot(root2, workInProgressRootRecoverableErrors, workInProgressTransitions);
+            commitRoot(root22, workInProgressRootRecoverableErrors, workInProgressTransitions);
             break;
           }
           case RootSuspendedWithDelay: {
-            markRootSuspended$1(root2, lanes);
+            markRootSuspended$1(root22, lanes);
             if (includesOnlyTransitions(lanes)) {
               break;
             }
             if (!shouldForceFlushFallbacksInDEV()) {
-              var mostRecentEventTime = getMostRecentEventTime(root2, lanes);
+              var mostRecentEventTime = getMostRecentEventTime(root22, lanes);
               var eventTimeMs = mostRecentEventTime;
               var timeElapsedMs = now() - eventTimeMs;
               var _msUntilTimeout = jnd(timeElapsedMs) - timeElapsedMs;
               if (_msUntilTimeout > 10) {
-                root2.timeoutHandle = scheduleTimeout(commitRoot.bind(null, root2, workInProgressRootRecoverableErrors, workInProgressTransitions), _msUntilTimeout);
+                root22.timeoutHandle = scheduleTimeout(commitRoot.bind(null, root22, workInProgressRootRecoverableErrors, workInProgressTransitions), _msUntilTimeout);
                 break;
               }
             }
-            commitRoot(root2, workInProgressRootRecoverableErrors, workInProgressTransitions);
+            commitRoot(root22, workInProgressRootRecoverableErrors, workInProgressTransitions);
             break;
           }
           case RootCompleted: {
-            commitRoot(root2, workInProgressRootRecoverableErrors, workInProgressTransitions);
+            commitRoot(root22, workInProgressRootRecoverableErrors, workInProgressTransitions);
             break;
           }
           default: {
@@ -26366,12 +26366,12 @@ function requireReactDom_development() {
         }
         return true;
       }
-      function markRootSuspended$1(root2, suspendedLanes) {
+      function markRootSuspended$1(root22, suspendedLanes) {
         suspendedLanes = removeLanes(suspendedLanes, workInProgressRootPingedLanes);
         suspendedLanes = removeLanes(suspendedLanes, workInProgressRootInterleavedUpdatedLanes);
-        markRootSuspended(root2, suspendedLanes);
+        markRootSuspended(root22, suspendedLanes);
       }
-      function performSyncWorkOnRoot(root2) {
+      function performSyncWorkOnRoot(root22) {
         {
           syncNestedUpdateFlag();
         }
@@ -26379,40 +26379,40 @@ function requireReactDom_development() {
           throw new Error("Should not already be working.");
         }
         flushPassiveEffects();
-        var lanes = getNextLanes(root2, NoLanes);
+        var lanes = getNextLanes(root22, NoLanes);
         if (!includesSomeLane(lanes, SyncLane)) {
-          ensureRootIsScheduled(root2, now());
+          ensureRootIsScheduled(root22, now());
           return null;
         }
-        var exitStatus = renderRootSync(root2, lanes);
-        if (root2.tag !== LegacyRoot && exitStatus === RootErrored) {
-          var errorRetryLanes = getLanesToRetrySynchronouslyOnError(root2);
+        var exitStatus = renderRootSync(root22, lanes);
+        if (root22.tag !== LegacyRoot && exitStatus === RootErrored) {
+          var errorRetryLanes = getLanesToRetrySynchronouslyOnError(root22);
           if (errorRetryLanes !== NoLanes) {
             lanes = errorRetryLanes;
-            exitStatus = recoverFromConcurrentError(root2, errorRetryLanes);
+            exitStatus = recoverFromConcurrentError(root22, errorRetryLanes);
           }
         }
         if (exitStatus === RootFatalErrored) {
           var fatalError = workInProgressRootFatalError;
-          prepareFreshStack(root2, NoLanes);
-          markRootSuspended$1(root2, lanes);
-          ensureRootIsScheduled(root2, now());
+          prepareFreshStack(root22, NoLanes);
+          markRootSuspended$1(root22, lanes);
+          ensureRootIsScheduled(root22, now());
           throw fatalError;
         }
         if (exitStatus === RootDidNotComplete) {
           throw new Error("Root did not complete. This is a bug in React.");
         }
-        var finishedWork = root2.current.alternate;
-        root2.finishedWork = finishedWork;
-        root2.finishedLanes = lanes;
-        commitRoot(root2, workInProgressRootRecoverableErrors, workInProgressTransitions);
-        ensureRootIsScheduled(root2, now());
+        var finishedWork = root22.current.alternate;
+        root22.finishedWork = finishedWork;
+        root22.finishedLanes = lanes;
+        commitRoot(root22, workInProgressRootRecoverableErrors, workInProgressTransitions);
+        ensureRootIsScheduled(root22, now());
         return null;
       }
-      function flushRoot(root2, lanes) {
+      function flushRoot(root22, lanes) {
         if (lanes !== NoLanes) {
-          markRootEntangled(root2, mergeLanes(lanes, SyncLane));
-          ensureRootIsScheduled(root2, now());
+          markRootEntangled(root22, mergeLanes(lanes, SyncLane));
+          ensureRootIsScheduled(root22, now());
           if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
             resetRenderTimer();
             flushSyncCallbacks();
@@ -26484,12 +26484,12 @@ function requireReactDom_development() {
         subtreeRenderLanes = subtreeRenderLanesCursor.current;
         pop2(subtreeRenderLanesCursor, fiber);
       }
-      function prepareFreshStack(root2, lanes) {
-        root2.finishedWork = null;
-        root2.finishedLanes = NoLanes;
-        var timeoutHandle = root2.timeoutHandle;
+      function prepareFreshStack(root22, lanes) {
+        root22.finishedWork = null;
+        root22.finishedLanes = NoLanes;
+        var timeoutHandle = root22.timeoutHandle;
         if (timeoutHandle !== noTimeout) {
-          root2.timeoutHandle = noTimeout;
+          root22.timeoutHandle = noTimeout;
           cancelTimeout(timeoutHandle);
         }
         if (workInProgress !== null) {
@@ -26500,8 +26500,8 @@ function requireReactDom_development() {
             interruptedWork = interruptedWork.return;
           }
         }
-        workInProgressRoot = root2;
-        var rootWorkInProgress = createWorkInProgress(root2.current, null);
+        workInProgressRoot = root22;
+        var rootWorkInProgress = createWorkInProgress(root22.current, null);
         workInProgress = rootWorkInProgress;
         workInProgressRootRenderLanes = subtreeRenderLanes = lanes;
         workInProgressRootExitStatus = RootInProgress;
@@ -26517,7 +26517,7 @@ function requireReactDom_development() {
         }
         return rootWorkInProgress;
       }
-      function handleError(root2, thrownValue) {
+      function handleError(root22, thrownValue) {
         do {
           var erroredWork = workInProgress;
           try {
@@ -26543,7 +26543,7 @@ function requireReactDom_development() {
                 markComponentErrored(erroredWork, thrownValue, workInProgressRootRenderLanes);
               }
             }
-            throwException(root2, erroredWork.return, erroredWork, thrownValue, workInProgressRootRenderLanes);
+            throwException(root22, erroredWork.return, erroredWork, thrownValue, workInProgressRootRenderLanes);
             completeUnitOfWork(erroredWork);
           } catch (yetAnotherThrownValue) {
             thrownValue = yetAnotherThrownValue;
@@ -26602,23 +26602,23 @@ function requireReactDom_development() {
       function renderHasNotSuspendedYet() {
         return workInProgressRootExitStatus === RootInProgress;
       }
-      function renderRootSync(root2, lanes) {
+      function renderRootSync(root22, lanes) {
         var prevExecutionContext = executionContext;
         executionContext |= RenderContext;
         var prevDispatcher = pushDispatcher();
-        if (workInProgressRoot !== root2 || workInProgressRootRenderLanes !== lanes) {
+        if (workInProgressRoot !== root22 || workInProgressRootRenderLanes !== lanes) {
           {
             if (isDevToolsPresent) {
-              var memoizedUpdaters = root2.memoizedUpdaters;
+              var memoizedUpdaters = root22.memoizedUpdaters;
               if (memoizedUpdaters.size > 0) {
-                restorePendingUpdaters(root2, workInProgressRootRenderLanes);
+                restorePendingUpdaters(root22, workInProgressRootRenderLanes);
                 memoizedUpdaters.clear();
               }
-              movePendingFibersToMemoized(root2, lanes);
+              movePendingFibersToMemoized(root22, lanes);
             }
           }
           workInProgressTransitions = getTransitionsForLanes();
-          prepareFreshStack(root2, lanes);
+          prepareFreshStack(root22, lanes);
         }
         {
           markRenderStarted(lanes);
@@ -26628,7 +26628,7 @@ function requireReactDom_development() {
             workLoopSync();
             break;
           } catch (thrownValue) {
-            handleError(root2, thrownValue);
+            handleError(root22, thrownValue);
           }
         } while (true);
         resetContextDependencies();
@@ -26649,24 +26649,24 @@ function requireReactDom_development() {
           performUnitOfWork(workInProgress);
         }
       }
-      function renderRootConcurrent(root2, lanes) {
+      function renderRootConcurrent(root22, lanes) {
         var prevExecutionContext = executionContext;
         executionContext |= RenderContext;
         var prevDispatcher = pushDispatcher();
-        if (workInProgressRoot !== root2 || workInProgressRootRenderLanes !== lanes) {
+        if (workInProgressRoot !== root22 || workInProgressRootRenderLanes !== lanes) {
           {
             if (isDevToolsPresent) {
-              var memoizedUpdaters = root2.memoizedUpdaters;
+              var memoizedUpdaters = root22.memoizedUpdaters;
               if (memoizedUpdaters.size > 0) {
-                restorePendingUpdaters(root2, workInProgressRootRenderLanes);
+                restorePendingUpdaters(root22, workInProgressRootRenderLanes);
                 memoizedUpdaters.clear();
               }
-              movePendingFibersToMemoized(root2, lanes);
+              movePendingFibersToMemoized(root22, lanes);
             }
           }
           workInProgressTransitions = getTransitionsForLanes();
           resetRenderTimer();
-          prepareFreshStack(root2, lanes);
+          prepareFreshStack(root22, lanes);
         }
         {
           markRenderStarted(lanes);
@@ -26676,7 +26676,7 @@ function requireReactDom_development() {
             workLoopConcurrent();
             break;
           } catch (thrownValue) {
-            handleError(root2, thrownValue);
+            handleError(root22, thrownValue);
           }
         } while (true);
         resetContextDependencies();
@@ -26780,20 +26780,20 @@ function requireReactDom_development() {
           workInProgressRootExitStatus = RootCompleted;
         }
       }
-      function commitRoot(root2, recoverableErrors, transitions) {
+      function commitRoot(root22, recoverableErrors, transitions) {
         var previousUpdateLanePriority = getCurrentUpdatePriority();
         var prevTransition = ReactCurrentBatchConfig$3.transition;
         try {
           ReactCurrentBatchConfig$3.transition = null;
           setCurrentUpdatePriority(DiscreteEventPriority);
-          commitRootImpl(root2, recoverableErrors, transitions, previousUpdateLanePriority);
+          commitRootImpl(root22, recoverableErrors, transitions, previousUpdateLanePriority);
         } finally {
           ReactCurrentBatchConfig$3.transition = prevTransition;
           setCurrentUpdatePriority(previousUpdateLanePriority);
         }
         return null;
       }
-      function commitRootImpl(root2, recoverableErrors, transitions, renderPriorityLevel) {
+      function commitRootImpl(root22, recoverableErrors, transitions, renderPriorityLevel) {
         do {
           flushPassiveEffects();
         } while (rootWithPendingPassiveEffects !== null);
@@ -26801,8 +26801,8 @@ function requireReactDom_development() {
         if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
           throw new Error("Should not already be working.");
         }
-        var finishedWork = root2.finishedWork;
-        var lanes = root2.finishedLanes;
+        var finishedWork = root22.finishedWork;
+        var lanes = root22.finishedLanes;
         {
           markCommitStarted(lanes);
         }
@@ -26818,16 +26818,16 @@ function requireReactDom_development() {
             }
           }
         }
-        root2.finishedWork = null;
-        root2.finishedLanes = NoLanes;
-        if (finishedWork === root2.current) {
+        root22.finishedWork = null;
+        root22.finishedLanes = NoLanes;
+        if (finishedWork === root22.current) {
           throw new Error("Cannot commit the same tree as before. This error is likely caused by a bug in React. Please file an issue.");
         }
-        root2.callbackNode = null;
-        root2.callbackPriority = NoLane;
+        root22.callbackNode = null;
+        root22.callbackPriority = NoLane;
         var remainingLanes = mergeLanes(finishedWork.lanes, finishedWork.childLanes);
-        markRootFinished(root2, remainingLanes);
-        if (root2 === workInProgressRoot) {
+        markRootFinished(root22, remainingLanes);
+        if (root22 === workInProgressRoot) {
           workInProgressRoot = null;
           workInProgress = null;
           workInProgressRootRenderLanes = NoLanes;
@@ -26852,17 +26852,17 @@ function requireReactDom_development() {
           var prevExecutionContext = executionContext;
           executionContext |= CommitContext;
           ReactCurrentOwner$2.current = null;
-          commitBeforeMutationEffects(root2, finishedWork);
+          commitBeforeMutationEffects(root22, finishedWork);
           {
             recordCommitTime();
           }
-          commitMutationEffects(root2, finishedWork, lanes);
-          resetAfterCommit(root2.containerInfo);
-          root2.current = finishedWork;
+          commitMutationEffects(root22, finishedWork, lanes);
+          resetAfterCommit(root22.containerInfo);
+          root22.current = finishedWork;
           {
             markLayoutEffectsStarted(lanes);
           }
-          commitLayoutEffects(finishedWork, root2, lanes);
+          commitLayoutEffects(finishedWork, root22, lanes);
           {
             markLayoutEffectsStopped();
           }
@@ -26871,7 +26871,7 @@ function requireReactDom_development() {
           setCurrentUpdatePriority(previousPriority);
           ReactCurrentBatchConfig$3.transition = prevTransition;
         } else {
-          root2.current = finishedWork;
+          root22.current = finishedWork;
           {
             recordCommitTime();
           }
@@ -26879,7 +26879,7 @@ function requireReactDom_development() {
         var rootDidHavePassiveEffects = rootDoesHavePassiveEffects;
         if (rootDoesHavePassiveEffects) {
           rootDoesHavePassiveEffects = false;
-          rootWithPendingPassiveEffects = root2;
+          rootWithPendingPassiveEffects = root22;
           pendingPassiveEffectsLanes = lanes;
         } else {
           {
@@ -26887,27 +26887,27 @@ function requireReactDom_development() {
             rootWithPassiveNestedUpdates = null;
           }
         }
-        remainingLanes = root2.pendingLanes;
+        remainingLanes = root22.pendingLanes;
         if (remainingLanes === NoLanes) {
           legacyErrorBoundariesThatAlreadyFailed = null;
         }
         {
           if (!rootDidHavePassiveEffects) {
-            commitDoubleInvokeEffectsInDEV(root2.current, false);
+            commitDoubleInvokeEffectsInDEV(root22.current, false);
           }
         }
         onCommitRoot(finishedWork.stateNode, renderPriorityLevel);
         {
           if (isDevToolsPresent) {
-            root2.memoizedUpdaters.clear();
+            root22.memoizedUpdaters.clear();
           }
         }
         {
           onCommitRoot$1();
         }
-        ensureRootIsScheduled(root2, now());
+        ensureRootIsScheduled(root22, now());
         if (recoverableErrors !== null) {
-          var onRecoverableError = root2.onRecoverableError;
+          var onRecoverableError = root22.onRecoverableError;
           for (var i = 0; i < recoverableErrors.length; i++) {
             var recoverableError = recoverableErrors[i];
             var componentStack = recoverableError.stack;
@@ -26924,19 +26924,19 @@ function requireReactDom_development() {
           firstUncaughtError = null;
           throw error$1;
         }
-        if (includesSomeLane(pendingPassiveEffectsLanes, SyncLane) && root2.tag !== LegacyRoot) {
+        if (includesSomeLane(pendingPassiveEffectsLanes, SyncLane) && root22.tag !== LegacyRoot) {
           flushPassiveEffects();
         }
-        remainingLanes = root2.pendingLanes;
+        remainingLanes = root22.pendingLanes;
         if (includesSomeLane(remainingLanes, SyncLane)) {
           {
             markNestedUpdateScheduled();
           }
-          if (root2 === rootWithNestedUpdates) {
+          if (root22 === rootWithNestedUpdates) {
             nestedUpdateCount++;
           } else {
             nestedUpdateCount = 0;
-            rootWithNestedUpdates = root2;
+            rootWithNestedUpdates = root22;
           }
         } else {
           nestedUpdateCount = 0;
@@ -26982,7 +26982,7 @@ function requireReactDom_development() {
         }
         var transitions = pendingPassiveTransitions;
         pendingPassiveTransitions = null;
-        var root2 = rootWithPendingPassiveEffects;
+        var root22 = rootWithPendingPassiveEffects;
         var lanes = pendingPassiveEffectsLanes;
         rootWithPendingPassiveEffects = null;
         pendingPassiveEffectsLanes = NoLanes;
@@ -26998,31 +26998,31 @@ function requireReactDom_development() {
         }
         var prevExecutionContext = executionContext;
         executionContext |= CommitContext;
-        commitPassiveUnmountEffects(root2.current);
-        commitPassiveMountEffects(root2, root2.current, lanes, transitions);
+        commitPassiveUnmountEffects(root22.current);
+        commitPassiveMountEffects(root22, root22.current, lanes, transitions);
         {
           var profilerEffects = pendingPassiveProfilerEffects;
           pendingPassiveProfilerEffects = [];
           for (var i = 0; i < profilerEffects.length; i++) {
             var _fiber = profilerEffects[i];
-            commitPassiveEffectDurations(root2, _fiber);
+            commitPassiveEffectDurations(root22, _fiber);
           }
         }
         {
           markPassiveEffectsStopped();
         }
         {
-          commitDoubleInvokeEffectsInDEV(root2.current, true);
+          commitDoubleInvokeEffectsInDEV(root22.current, true);
         }
         executionContext = prevExecutionContext;
         flushSyncCallbacks();
         {
           if (didScheduleUpdateDuringPassiveEffects) {
-            if (root2 === rootWithPassiveNestedUpdates) {
+            if (root22 === rootWithPassiveNestedUpdates) {
               nestedPassiveUpdateCount++;
             } else {
               nestedPassiveUpdateCount = 0;
-              rootWithPassiveNestedUpdates = root2;
+              rootWithPassiveNestedUpdates = root22;
             }
           } else {
             nestedPassiveUpdateCount = 0;
@@ -27030,9 +27030,9 @@ function requireReactDom_development() {
           isFlushingPassiveEffects = false;
           didScheduleUpdateDuringPassiveEffects = false;
         }
-        onPostCommitRoot(root2);
+        onPostCommitRoot(root22);
         {
-          var stateNode = root2.current.stateNode;
+          var stateNode = root22.current.stateNode;
           stateNode.effectDuration = 0;
           stateNode.passiveEffectDuration = 0;
         }
@@ -27058,11 +27058,11 @@ function requireReactDom_development() {
       function captureCommitPhaseErrorOnRoot(rootFiber, sourceFiber, error2) {
         var errorInfo = createCapturedValueAtFiber(error2, sourceFiber);
         var update = createRootErrorUpdate(rootFiber, errorInfo, SyncLane);
-        var root2 = enqueueUpdate(rootFiber, update, SyncLane);
+        var root22 = enqueueUpdate(rootFiber, update, SyncLane);
         var eventTime = requestEventTime();
-        if (root2 !== null) {
-          markRootUpdated(root2, SyncLane, eventTime);
-          ensureRootIsScheduled(root2, eventTime);
+        if (root22 !== null) {
+          markRootUpdated(root22, SyncLane, eventTime);
+          ensureRootIsScheduled(root22, eventTime);
         }
       }
       function captureCommitPhaseError(sourceFiber, nearestMountedAncestor, error$1) {
@@ -27088,11 +27088,11 @@ function requireReactDom_development() {
             if (typeof ctor.getDerivedStateFromError === "function" || typeof instance2.componentDidCatch === "function" && !isAlreadyFailedLegacyErrorBoundary(instance2)) {
               var errorInfo = createCapturedValueAtFiber(error$1, sourceFiber);
               var update = createClassErrorUpdate(fiber, errorInfo, SyncLane);
-              var root2 = enqueueUpdate(fiber, update, SyncLane);
+              var root22 = enqueueUpdate(fiber, update, SyncLane);
               var eventTime = requestEventTime();
-              if (root2 !== null) {
-                markRootUpdated(root2, SyncLane, eventTime);
-                ensureRootIsScheduled(root2, eventTime);
+              if (root22 !== null) {
+                markRootUpdated(root22, SyncLane, eventTime);
+                ensureRootIsScheduled(root22, eventTime);
               }
               return;
             }
@@ -27103,32 +27103,32 @@ function requireReactDom_development() {
           error("Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.\n\nError message:\n\n%s", error$1);
         }
       }
-      function pingSuspendedRoot(root2, wakeable, pingedLanes) {
-        var pingCache = root2.pingCache;
+      function pingSuspendedRoot(root22, wakeable, pingedLanes) {
+        var pingCache = root22.pingCache;
         if (pingCache !== null) {
           pingCache.delete(wakeable);
         }
         var eventTime = requestEventTime();
-        markRootPinged(root2, pingedLanes);
-        warnIfSuspenseResolutionNotWrappedWithActDEV(root2);
-        if (workInProgressRoot === root2 && isSubsetOfLanes(workInProgressRootRenderLanes, pingedLanes)) {
+        markRootPinged(root22, pingedLanes);
+        warnIfSuspenseResolutionNotWrappedWithActDEV(root22);
+        if (workInProgressRoot === root22 && isSubsetOfLanes(workInProgressRootRenderLanes, pingedLanes)) {
           if (workInProgressRootExitStatus === RootSuspendedWithDelay || workInProgressRootExitStatus === RootSuspended && includesOnlyRetries(workInProgressRootRenderLanes) && now() - globalMostRecentFallbackTime < FALLBACK_THROTTLE_MS) {
-            prepareFreshStack(root2, NoLanes);
+            prepareFreshStack(root22, NoLanes);
           } else {
             workInProgressRootPingedLanes = mergeLanes(workInProgressRootPingedLanes, pingedLanes);
           }
         }
-        ensureRootIsScheduled(root2, eventTime);
+        ensureRootIsScheduled(root22, eventTime);
       }
       function retryTimedOutBoundary(boundaryFiber, retryLane) {
         if (retryLane === NoLane) {
           retryLane = requestRetryLane(boundaryFiber);
         }
         var eventTime = requestEventTime();
-        var root2 = enqueueConcurrentRenderForLane(boundaryFiber, retryLane);
-        if (root2 !== null) {
-          markRootUpdated(root2, retryLane, eventTime);
-          ensureRootIsScheduled(root2, eventTime);
+        var root22 = enqueueConcurrentRenderForLane(boundaryFiber, retryLane);
+        if (root22 !== null) {
+          markRootUpdated(root22, retryLane, eventTime);
+          ensureRootIsScheduled(root22, eventTime);
         }
       }
       function retryDehydratedSuspenseBoundary(boundaryFiber) {
@@ -27317,12 +27317,12 @@ function requireReactDom_development() {
           }
         }
       }
-      function restorePendingUpdaters(root2, lanes) {
+      function restorePendingUpdaters(root22, lanes) {
         {
           if (isDevToolsPresent) {
-            var memoizedUpdaters = root2.memoizedUpdaters;
+            var memoizedUpdaters = root22.memoizedUpdaters;
             memoizedUpdaters.forEach(function(schedulingFiber) {
-              addFiberToLanesMap(root2, schedulingFiber, lanes);
+              addFiberToLanesMap(root22, schedulingFiber, lanes);
             });
           }
         }
@@ -27380,9 +27380,9 @@ function requireReactDom_development() {
           }
         }
       }
-      function warnIfSuspenseResolutionNotWrappedWithActDEV(root2) {
+      function warnIfSuspenseResolutionNotWrappedWithActDEV(root22) {
         {
-          if (root2.tag !== LegacyRoot && isConcurrentActEnvironment() && ReactCurrentActQueue$1.current === null) {
+          if (root22.tag !== LegacyRoot && isConcurrentActEnvironment() && ReactCurrentActQueue$1.current === null) {
             error("A suspended resource finished loading inside a test, but the event was not wrapped in act(...).\n\nWhen testing, code that resolves suspended data should be wrapped into act(...):\n\nact(() => {\n  /* finish loading suspended data */\n});\n/* assert on the output */\n\nThis ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act");
           }
         }
@@ -27506,7 +27506,7 @@ function requireReactDom_development() {
           failedBoundaries.add(fiber);
         }
       }
-      var scheduleRefresh = function(root2, update) {
+      var scheduleRefresh = function(root22, update) {
         {
           if (resolveFamily === null) {
             return;
@@ -27514,18 +27514,18 @@ function requireReactDom_development() {
           var staleFamilies = update.staleFamilies, updatedFamilies = update.updatedFamilies;
           flushPassiveEffects();
           flushSync(function() {
-            scheduleFibersWithFamiliesRecursively(root2.current, updatedFamilies, staleFamilies);
+            scheduleFibersWithFamiliesRecursively(root22.current, updatedFamilies, staleFamilies);
           });
         }
       };
-      var scheduleRoot = function(root2, element) {
+      var scheduleRoot = function(root22, element) {
         {
-          if (root2.context !== emptyContextObject) {
+          if (root22.context !== emptyContextObject) {
             return;
           }
           flushPassiveEffects();
           flushSync(function() {
-            updateContainer(element, root2, null, null);
+            updateContainer(element, root22, null, null);
           });
         }
       };
@@ -27584,13 +27584,13 @@ function requireReactDom_development() {
           }
         }
       }
-      var findHostInstancesForRefresh = function(root2, families) {
+      var findHostInstancesForRefresh = function(root22, families) {
         {
           var hostInstances = /* @__PURE__ */ new Set();
           var types = new Set(families.map(function(family) {
             return family.current;
           }));
-          findHostInstancesForMatchingFibersRecursively(root2.current, types, hostInstances);
+          findHostInstancesForMatchingFibersRecursively(root22.current, types, hostInstances);
           return hostInstances;
         }
       };
@@ -28143,10 +28143,10 @@ function requireReactDom_development() {
         }
       }
       function createFiberRoot(containerInfo, tag, hydrate2, initialChildren, hydrationCallbacks, isStrictMode, concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, transitionCallbacks) {
-        var root2 = new FiberRootNode(containerInfo, tag, hydrate2, identifierPrefix, onRecoverableError);
+        var root22 = new FiberRootNode(containerInfo, tag, hydrate2, identifierPrefix, onRecoverableError);
         var uninitializedFiber = createHostRootFiber(tag, isStrictMode);
-        root2.current = uninitializedFiber;
-        uninitializedFiber.stateNode = root2;
+        root22.current = uninitializedFiber;
+        uninitializedFiber.stateNode = root22;
         {
           var _initialState = {
             element: initialChildren,
@@ -28159,7 +28159,7 @@ function requireReactDom_development() {
           uninitializedFiber.memoizedState = _initialState;
         }
         initializeUpdateQueue(uninitializedFiber);
-        return root2;
+        return root22;
       }
       var ReactVersion = "18.3.1";
       function createPortal(children, containerInfo, implementation) {
@@ -28242,32 +28242,32 @@ function requireReactDom_development() {
       }
       function createHydrationContainer(initialChildren, callback, containerInfo, tag, hydrationCallbacks, isStrictMode, concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, transitionCallbacks) {
         var hydrate2 = true;
-        var root2 = createFiberRoot(containerInfo, tag, hydrate2, initialChildren, hydrationCallbacks, isStrictMode, concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError);
-        root2.context = getContextForSubtree(null);
-        var current2 = root2.current;
+        var root22 = createFiberRoot(containerInfo, tag, hydrate2, initialChildren, hydrationCallbacks, isStrictMode, concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError);
+        root22.context = getContextForSubtree(null);
+        var current2 = root22.current;
         var eventTime = requestEventTime();
         var lane = requestUpdateLane(current2);
         var update = createUpdate(eventTime, lane);
         update.callback = callback !== void 0 && callback !== null ? callback : null;
         enqueueUpdate(current2, update, lane);
-        scheduleInitialHydrationOnRoot(root2, lane, eventTime);
-        return root2;
+        scheduleInitialHydrationOnRoot(root22, lane, eventTime);
+        return root22;
       }
-      function updateContainer(element, container2, parentComponent, callback) {
+      function updateContainer(element, container, parentComponent, callback) {
         {
-          onScheduleRoot(container2, element);
+          onScheduleRoot(container, element);
         }
-        var current$1 = container2.current;
+        var current$1 = container.current;
         var eventTime = requestEventTime();
         var lane = requestUpdateLane(current$1);
         {
           markRenderScheduled(lane);
         }
         var context = getContextForSubtree(parentComponent);
-        if (container2.context === null) {
-          container2.context = context;
+        if (container.context === null) {
+          container.context = context;
         } else {
-          container2.pendingContext = context;
+          container.pendingContext = context;
         }
         {
           if (isRendering && current !== null && !didWarnAboutNestedUpdates) {
@@ -28288,15 +28288,15 @@ function requireReactDom_development() {
           }
           update.callback = callback;
         }
-        var root2 = enqueueUpdate(current$1, update, lane);
-        if (root2 !== null) {
-          scheduleUpdateOnFiber(root2, current$1, lane, eventTime);
-          entangleTransitions(root2, current$1, lane);
+        var root22 = enqueueUpdate(current$1, update, lane);
+        if (root22 !== null) {
+          scheduleUpdateOnFiber(root22, current$1, lane, eventTime);
+          entangleTransitions(root22, current$1, lane);
         }
         return lane;
       }
-      function getPublicRootInstance(container2) {
-        var containerFiber = container2.current;
+      function getPublicRootInstance(container) {
+        var containerFiber = container.current;
         if (!containerFiber.child) {
           return null;
         }
@@ -28310,10 +28310,10 @@ function requireReactDom_development() {
       function attemptSynchronousHydration$1(fiber) {
         switch (fiber.tag) {
           case HostRoot: {
-            var root2 = fiber.stateNode;
-            if (isRootDehydrated(root2)) {
-              var lanes = getHighestPriorityPendingLanes(root2);
-              flushRoot(root2, lanes);
+            var root22 = fiber.stateNode;
+            if (isRootDehydrated(root22)) {
+              var lanes = getHighestPriorityPendingLanes(root22);
+              flushRoot(root22, lanes);
             }
             break;
           }
@@ -28349,10 +28349,10 @@ function requireReactDom_development() {
           return;
         }
         var lane = SelectiveHydrationLane;
-        var root2 = enqueueConcurrentRenderForLane(fiber, lane);
-        if (root2 !== null) {
+        var root22 = enqueueConcurrentRenderForLane(fiber, lane);
+        if (root22 !== null) {
           var eventTime = requestEventTime();
-          scheduleUpdateOnFiber(root2, fiber, lane, eventTime);
+          scheduleUpdateOnFiber(root22, fiber, lane, eventTime);
         }
         markRetryLaneIfNotHydrated(fiber, lane);
       }
@@ -28361,10 +28361,10 @@ function requireReactDom_development() {
           return;
         }
         var lane = requestUpdateLane(fiber);
-        var root2 = enqueueConcurrentRenderForLane(fiber, lane);
-        if (root2 !== null) {
+        var root22 = enqueueConcurrentRenderForLane(fiber, lane);
+        if (root22 !== null) {
           var eventTime = requestEventTime();
-          scheduleUpdateOnFiber(root2, fiber, lane, eventTime);
+          scheduleUpdateOnFiber(root22, fiber, lane, eventTime);
         }
         markRetryLaneIfNotHydrated(fiber, lane);
       }
@@ -28477,9 +28477,9 @@ function requireReactDom_development() {
             hook.memoizedState = newState;
             hook.baseState = newState;
             fiber.memoizedProps = assign2({}, fiber.memoizedProps);
-            var root2 = enqueueConcurrentRenderForLane(fiber, SyncLane);
-            if (root2 !== null) {
-              scheduleUpdateOnFiber(root2, fiber, SyncLane, NoTimestamp);
+            var root22 = enqueueConcurrentRenderForLane(fiber, SyncLane);
+            if (root22 !== null) {
+              scheduleUpdateOnFiber(root22, fiber, SyncLane, NoTimestamp);
             }
           }
         };
@@ -28490,9 +28490,9 @@ function requireReactDom_development() {
             hook.memoizedState = newState;
             hook.baseState = newState;
             fiber.memoizedProps = assign2({}, fiber.memoizedProps);
-            var root2 = enqueueConcurrentRenderForLane(fiber, SyncLane);
-            if (root2 !== null) {
-              scheduleUpdateOnFiber(root2, fiber, SyncLane, NoTimestamp);
+            var root22 = enqueueConcurrentRenderForLane(fiber, SyncLane);
+            if (root22 !== null) {
+              scheduleUpdateOnFiber(root22, fiber, SyncLane, NoTimestamp);
             }
           }
         };
@@ -28503,9 +28503,9 @@ function requireReactDom_development() {
             hook.memoizedState = newState;
             hook.baseState = newState;
             fiber.memoizedProps = assign2({}, fiber.memoizedProps);
-            var root2 = enqueueConcurrentRenderForLane(fiber, SyncLane);
-            if (root2 !== null) {
-              scheduleUpdateOnFiber(root2, fiber, SyncLane, NoTimestamp);
+            var root22 = enqueueConcurrentRenderForLane(fiber, SyncLane);
+            if (root22 !== null) {
+              scheduleUpdateOnFiber(root22, fiber, SyncLane, NoTimestamp);
             }
           }
         };
@@ -28514,9 +28514,9 @@ function requireReactDom_development() {
           if (fiber.alternate) {
             fiber.alternate.pendingProps = fiber.pendingProps;
           }
-          var root2 = enqueueConcurrentRenderForLane(fiber, SyncLane);
-          if (root2 !== null) {
-            scheduleUpdateOnFiber(root2, fiber, SyncLane, NoTimestamp);
+          var root22 = enqueueConcurrentRenderForLane(fiber, SyncLane);
+          if (root22 !== null) {
+            scheduleUpdateOnFiber(root22, fiber, SyncLane, NoTimestamp);
           }
         };
         overridePropsDeletePath = function(fiber, path) {
@@ -28524,9 +28524,9 @@ function requireReactDom_development() {
           if (fiber.alternate) {
             fiber.alternate.pendingProps = fiber.pendingProps;
           }
-          var root2 = enqueueConcurrentRenderForLane(fiber, SyncLane);
-          if (root2 !== null) {
-            scheduleUpdateOnFiber(root2, fiber, SyncLane, NoTimestamp);
+          var root22 = enqueueConcurrentRenderForLane(fiber, SyncLane);
+          if (root22 !== null) {
+            scheduleUpdateOnFiber(root22, fiber, SyncLane, NoTimestamp);
           }
         };
         overridePropsRenamePath = function(fiber, oldPath, newPath) {
@@ -28534,15 +28534,15 @@ function requireReactDom_development() {
           if (fiber.alternate) {
             fiber.alternate.pendingProps = fiber.pendingProps;
           }
-          var root2 = enqueueConcurrentRenderForLane(fiber, SyncLane);
-          if (root2 !== null) {
-            scheduleUpdateOnFiber(root2, fiber, SyncLane, NoTimestamp);
+          var root22 = enqueueConcurrentRenderForLane(fiber, SyncLane);
+          if (root22 !== null) {
+            scheduleUpdateOnFiber(root22, fiber, SyncLane, NoTimestamp);
           }
         };
         scheduleUpdate = function(fiber) {
-          var root2 = enqueueConcurrentRenderForLane(fiber, SyncLane);
-          if (root2 !== null) {
-            scheduleUpdateOnFiber(root2, fiber, SyncLane, NoTimestamp);
+          var root22 = enqueueConcurrentRenderForLane(fiber, SyncLane);
+          if (root22 !== null) {
+            scheduleUpdateOnFiber(root22, fiber, SyncLane, NoTimestamp);
           }
         };
         setErrorHandler = function(newShouldErrorImpl) {
@@ -28608,8 +28608,8 @@ function requireReactDom_development() {
         this._internalRoot = internalRoot;
       }
       ReactDOMHydrationRoot.prototype.render = ReactDOMRoot.prototype.render = function(children) {
-        var root2 = this._internalRoot;
-        if (root2 === null) {
+        var root22 = this._internalRoot;
+        if (root22 === null) {
           throw new Error("Cannot update an unmounted root.");
         }
         {
@@ -28620,17 +28620,17 @@ function requireReactDom_development() {
           } else if (typeof arguments[1] !== "undefined") {
             error("You passed a second argument to root.render(...) but it only accepts one argument.");
           }
-          var container2 = root2.containerInfo;
-          if (container2.nodeType !== COMMENT_NODE) {
-            var hostInstance = findHostInstanceWithNoPortals(root2.current);
+          var container = root22.containerInfo;
+          if (container.nodeType !== COMMENT_NODE) {
+            var hostInstance = findHostInstanceWithNoPortals(root22.current);
             if (hostInstance) {
-              if (hostInstance.parentNode !== container2) {
+              if (hostInstance.parentNode !== container) {
                 error("render(...): It looks like the React-rendered content of the root container was removed without using React. This is not supported and will cause errors. Instead, call root.unmount() to empty a root's container.");
               }
             }
           }
         }
-        updateContainer(children, root2, null, null);
+        updateContainer(children, root22, null, null);
       };
       ReactDOMHydrationRoot.prototype.unmount = ReactDOMRoot.prototype.unmount = function() {
         {
@@ -28638,26 +28638,26 @@ function requireReactDom_development() {
             error("unmount(...): does not support a callback argument. To execute a side effect after rendering, declare it in a component body with useEffect().");
           }
         }
-        var root2 = this._internalRoot;
-        if (root2 !== null) {
+        var root22 = this._internalRoot;
+        if (root22 !== null) {
           this._internalRoot = null;
-          var container2 = root2.containerInfo;
+          var container = root22.containerInfo;
           {
             if (isAlreadyRendering()) {
               error("Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.");
             }
           }
           flushSync(function() {
-            updateContainer(null, root2, null, null);
+            updateContainer(null, root22, null, null);
           });
-          unmarkContainerAsRoot(container2);
+          unmarkContainerAsRoot(container);
         }
       };
-      function createRoot(container2, options2) {
-        if (!isValidContainer(container2)) {
+      function createRoot(container, options2) {
+        if (!isValidContainer(container)) {
           throw new Error("createRoot(...): Target container is not a DOM element.");
         }
-        warnIfReactDOMContainerInDEV(container2);
+        warnIfReactDOMContainerInDEV(container);
         var isStrictMode = false;
         var concurrentUpdatesByDefaultOverride = false;
         var identifierPrefix = "";
@@ -28685,11 +28685,11 @@ function requireReactDom_development() {
             options2.transitionCallbacks;
           }
         }
-        var root2 = createContainer(container2, ConcurrentRoot, null, isStrictMode, concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError);
-        markContainerAsRoot(root2.current, container2);
-        var rootContainerElement = container2.nodeType === COMMENT_NODE ? container2.parentNode : container2;
+        var root22 = createContainer(container, ConcurrentRoot, null, isStrictMode, concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError);
+        markContainerAsRoot(root22.current, container);
+        var rootContainerElement = container.nodeType === COMMENT_NODE ? container.parentNode : container;
         listenToAllSupportedEvents(rootContainerElement);
-        return new ReactDOMRoot(root2);
+        return new ReactDOMRoot(root22);
       }
       function ReactDOMHydrationRoot(internalRoot) {
         this._internalRoot = internalRoot;
@@ -28700,11 +28700,11 @@ function requireReactDom_development() {
         }
       }
       ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = scheduleHydration;
-      function hydrateRoot(container2, initialChildren, options2) {
-        if (!isValidContainer(container2)) {
+      function hydrateRoot(container, initialChildren, options2) {
+        if (!isValidContainer(container)) {
           throw new Error("hydrateRoot(...): Target container is not a DOM element.");
         }
-        warnIfReactDOMContainerInDEV(container2);
+        warnIfReactDOMContainerInDEV(container);
         {
           if (initialChildren === void 0) {
             error("Must provide initial children as second argument to hydrateRoot. Example usage: hydrateRoot(domContainer, <App />)");
@@ -28727,16 +28727,16 @@ function requireReactDom_development() {
             onRecoverableError = options2.onRecoverableError;
           }
         }
-        var root2 = createHydrationContainer(initialChildren, null, container2, ConcurrentRoot, hydrationCallbacks, isStrictMode, concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError);
-        markContainerAsRoot(root2.current, container2);
-        listenToAllSupportedEvents(container2);
+        var root22 = createHydrationContainer(initialChildren, null, container, ConcurrentRoot, hydrationCallbacks, isStrictMode, concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError);
+        markContainerAsRoot(root22.current, container);
+        listenToAllSupportedEvents(container);
         if (mutableSources) {
           for (var i = 0; i < mutableSources.length; i++) {
             var mutableSource = mutableSources[i];
-            registerMutableSourceForHydration(root2, mutableSource);
+            registerMutableSourceForHydration(root22, mutableSource);
           }
         }
-        return new ReactDOMHydrationRoot(root2);
+        return new ReactDOMHydrationRoot(root22);
       }
       function isValidContainer(node) {
         return !!(node && (node.nodeType === ELEMENT_NODE || node.nodeType === DOCUMENT_NODE || node.nodeType === DOCUMENT_FRAGMENT_NODE || false));
@@ -28744,13 +28744,13 @@ function requireReactDom_development() {
       function isValidContainerLegacy(node) {
         return !!(node && (node.nodeType === ELEMENT_NODE || node.nodeType === DOCUMENT_NODE || node.nodeType === DOCUMENT_FRAGMENT_NODE || node.nodeType === COMMENT_NODE && node.nodeValue === " react-mount-point-unstable "));
       }
-      function warnIfReactDOMContainerInDEV(container2) {
+      function warnIfReactDOMContainerInDEV(container) {
         {
-          if (container2.nodeType === ELEMENT_NODE && container2.tagName && container2.tagName.toUpperCase() === "BODY") {
+          if (container.nodeType === ELEMENT_NODE && container.tagName && container.tagName.toUpperCase() === "BODY") {
             error("createRoot(): Creating roots directly with document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try using a container element created for your app.");
           }
-          if (isContainerMarkedAsRoot(container2)) {
-            if (container2._reactRootContainer) {
+          if (isContainerMarkedAsRoot(container)) {
+            if (container._reactRootContainer) {
               error("You are calling ReactDOMClient.createRoot() on a container that was previously passed to ReactDOM.render(). This is not supported.");
             } else {
               error("You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.");
@@ -28761,51 +28761,51 @@ function requireReactDom_development() {
       var ReactCurrentOwner$3 = ReactSharedInternals.ReactCurrentOwner;
       var topLevelUpdateWarnings;
       {
-        topLevelUpdateWarnings = function(container2) {
-          if (container2._reactRootContainer && container2.nodeType !== COMMENT_NODE) {
-            var hostInstance = findHostInstanceWithNoPortals(container2._reactRootContainer.current);
+        topLevelUpdateWarnings = function(container) {
+          if (container._reactRootContainer && container.nodeType !== COMMENT_NODE) {
+            var hostInstance = findHostInstanceWithNoPortals(container._reactRootContainer.current);
             if (hostInstance) {
-              if (hostInstance.parentNode !== container2) {
+              if (hostInstance.parentNode !== container) {
                 error("render(...): It looks like the React-rendered content of this container was removed without using React. This is not supported and will cause errors. Instead, call ReactDOM.unmountComponentAtNode to empty a container.");
               }
             }
           }
-          var isRootRenderedBySomeReact = !!container2._reactRootContainer;
-          var rootEl = getReactRootElementInContainer(container2);
+          var isRootRenderedBySomeReact = !!container._reactRootContainer;
+          var rootEl = getReactRootElementInContainer(container);
           var hasNonRootReactChild = !!(rootEl && getInstanceFromNode(rootEl));
           if (hasNonRootReactChild && !isRootRenderedBySomeReact) {
             error("render(...): Replacing React-rendered children with a new root component. If you intended to update the children of this node, you should instead have the existing children update their state and render the new components instead of calling ReactDOM.render.");
           }
-          if (container2.nodeType === ELEMENT_NODE && container2.tagName && container2.tagName.toUpperCase() === "BODY") {
+          if (container.nodeType === ELEMENT_NODE && container.tagName && container.tagName.toUpperCase() === "BODY") {
             error("render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.");
           }
         };
       }
-      function getReactRootElementInContainer(container2) {
-        if (!container2) {
+      function getReactRootElementInContainer(container) {
+        if (!container) {
           return null;
         }
-        if (container2.nodeType === DOCUMENT_NODE) {
-          return container2.documentElement;
+        if (container.nodeType === DOCUMENT_NODE) {
+          return container.documentElement;
         } else {
-          return container2.firstChild;
+          return container.firstChild;
         }
       }
       function noopOnRecoverableError() {
       }
-      function legacyCreateRootFromDOMContainer(container2, initialChildren, parentComponent, callback, isHydrationContainer) {
+      function legacyCreateRootFromDOMContainer(container, initialChildren, parentComponent, callback, isHydrationContainer) {
         if (isHydrationContainer) {
           if (typeof callback === "function") {
             var originalCallback = callback;
             callback = function() {
-              var instance2 = getPublicRootInstance(root2);
+              var instance2 = getPublicRootInstance(root22);
               originalCallback.call(instance2);
             };
           }
-          var root2 = createHydrationContainer(
+          var root22 = createHydrationContainer(
             initialChildren,
             callback,
-            container2,
+            container,
             LegacyRoot,
             null,
             // hydrationCallbacks
@@ -28817,16 +28817,16 @@ function requireReactDom_development() {
             // identifierPrefix
             noopOnRecoverableError
           );
-          container2._reactRootContainer = root2;
-          markContainerAsRoot(root2.current, container2);
-          var rootContainerElement = container2.nodeType === COMMENT_NODE ? container2.parentNode : container2;
+          container._reactRootContainer = root22;
+          markContainerAsRoot(root22.current, container);
+          var rootContainerElement = container.nodeType === COMMENT_NODE ? container.parentNode : container;
           listenToAllSupportedEvents(rootContainerElement);
           flushSync();
-          return root2;
+          return root22;
         } else {
           var rootSibling;
-          while (rootSibling = container2.lastChild) {
-            container2.removeChild(rootSibling);
+          while (rootSibling = container.lastChild) {
+            container.removeChild(rootSibling);
           }
           if (typeof callback === "function") {
             var _originalCallback = callback;
@@ -28836,7 +28836,7 @@ function requireReactDom_development() {
             };
           }
           var _root = createContainer(
-            container2,
+            container,
             LegacyRoot,
             null,
             // hydrationCallbacks
@@ -28848,9 +28848,9 @@ function requireReactDom_development() {
             // identifierPrefix
             noopOnRecoverableError
           );
-          container2._reactRootContainer = _root;
-          markContainerAsRoot(_root.current, container2);
-          var _rootContainerElement = container2.nodeType === COMMENT_NODE ? container2.parentNode : container2;
+          container._reactRootContainer = _root;
+          markContainerAsRoot(_root.current, container);
+          var _rootContainerElement = container.nodeType === COMMENT_NODE ? container.parentNode : container;
           listenToAllSupportedEvents(_rootContainerElement);
           flushSync(function() {
             updateContainer(initialChildren, _root, parentComponent, callback);
@@ -28865,27 +28865,27 @@ function requireReactDom_development() {
           }
         }
       }
-      function legacyRenderSubtreeIntoContainer(parentComponent, children, container2, forceHydrate, callback) {
+      function legacyRenderSubtreeIntoContainer(parentComponent, children, container, forceHydrate, callback) {
         {
-          topLevelUpdateWarnings(container2);
+          topLevelUpdateWarnings(container);
           warnOnInvalidCallback$1(callback === void 0 ? null : callback, "render");
         }
-        var maybeRoot = container2._reactRootContainer;
-        var root2;
+        var maybeRoot = container._reactRootContainer;
+        var root22;
         if (!maybeRoot) {
-          root2 = legacyCreateRootFromDOMContainer(container2, children, parentComponent, callback, forceHydrate);
+          root22 = legacyCreateRootFromDOMContainer(container, children, parentComponent, callback, forceHydrate);
         } else {
-          root2 = maybeRoot;
+          root22 = maybeRoot;
           if (typeof callback === "function") {
             var originalCallback = callback;
             callback = function() {
-              var instance2 = getPublicRootInstance(root2);
+              var instance2 = getPublicRootInstance(root22);
               originalCallback.call(instance2);
             };
           }
-          updateContainer(children, root2, parentComponent, callback);
+          updateContainer(children, root22, parentComponent, callback);
         }
-        return getPublicRootInstance(root2);
+        return getPublicRootInstance(root22);
       }
       var didWarnAboutFindDOMNode = false;
       function findDOMNode(componentOrElement) {
@@ -28913,35 +28913,35 @@ function requireReactDom_development() {
           return findHostInstanceWithWarning(componentOrElement, "findDOMNode");
         }
       }
-      function hydrate(element, container2, callback) {
+      function hydrate(element, container, callback) {
         {
           error("ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot");
         }
-        if (!isValidContainerLegacy(container2)) {
+        if (!isValidContainerLegacy(container)) {
           throw new Error("Target container is not a DOM element.");
         }
         {
-          var isModernRoot = isContainerMarkedAsRoot(container2) && container2._reactRootContainer === void 0;
+          var isModernRoot = isContainerMarkedAsRoot(container) && container._reactRootContainer === void 0;
           if (isModernRoot) {
             error("You are calling ReactDOM.hydrate() on a container that was previously passed to ReactDOMClient.createRoot(). This is not supported. Did you mean to call hydrateRoot(container, element)?");
           }
         }
-        return legacyRenderSubtreeIntoContainer(null, element, container2, true, callback);
+        return legacyRenderSubtreeIntoContainer(null, element, container, true, callback);
       }
-      function render(element, container2, callback) {
+      function render(element, container, callback) {
         {
           error("ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot");
         }
-        if (!isValidContainerLegacy(container2)) {
+        if (!isValidContainerLegacy(container)) {
           throw new Error("Target container is not a DOM element.");
         }
         {
-          var isModernRoot = isContainerMarkedAsRoot(container2) && container2._reactRootContainer === void 0;
+          var isModernRoot = isContainerMarkedAsRoot(container) && container._reactRootContainer === void 0;
           if (isModernRoot) {
             error("You are calling ReactDOM.render() on a container that was previously passed to ReactDOMClient.createRoot(). This is not supported. Did you mean to call root.render(element)?");
           }
         }
-        return legacyRenderSubtreeIntoContainer(null, element, container2, false, callback);
+        return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
       }
       function unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
         {
@@ -28956,42 +28956,42 @@ function requireReactDom_development() {
         return legacyRenderSubtreeIntoContainer(parentComponent, element, containerNode, false, callback);
       }
       var didWarnAboutUnmountComponentAtNode = false;
-      function unmountComponentAtNode(container2) {
+      function unmountComponentAtNode(container) {
         {
           if (!didWarnAboutUnmountComponentAtNode) {
             didWarnAboutUnmountComponentAtNode = true;
             error("unmountComponentAtNode is deprecated and will be removed in the next major release. Switch to the createRoot API. Learn more: https://reactjs.org/link/switch-to-createroot");
           }
         }
-        if (!isValidContainerLegacy(container2)) {
+        if (!isValidContainerLegacy(container)) {
           throw new Error("unmountComponentAtNode(...): Target container is not a DOM element.");
         }
         {
-          var isModernRoot = isContainerMarkedAsRoot(container2) && container2._reactRootContainer === void 0;
+          var isModernRoot = isContainerMarkedAsRoot(container) && container._reactRootContainer === void 0;
           if (isModernRoot) {
             error("You are calling ReactDOM.unmountComponentAtNode() on a container that was previously passed to ReactDOMClient.createRoot(). This is not supported. Did you mean to call root.unmount()?");
           }
         }
-        if (container2._reactRootContainer) {
+        if (container._reactRootContainer) {
           {
-            var rootEl = getReactRootElementInContainer(container2);
+            var rootEl = getReactRootElementInContainer(container);
             var renderedByDifferentReact = rootEl && !getInstanceFromNode(rootEl);
             if (renderedByDifferentReact) {
               error("unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React.");
             }
           }
           flushSync(function() {
-            legacyRenderSubtreeIntoContainer(null, null, container2, false, function() {
-              container2._reactRootContainer = null;
-              unmarkContainerAsRoot(container2);
+            legacyRenderSubtreeIntoContainer(null, null, container, false, function() {
+              container._reactRootContainer = null;
+              unmarkContainerAsRoot(container);
             });
           });
           return true;
         } else {
           {
-            var _rootEl = getReactRootElementInContainer(container2);
+            var _rootEl = getReactRootElementInContainer(container);
             var hasNonRootReactChild = !!(_rootEl && getInstanceFromNode(_rootEl));
-            var isContainerReactRoot = container2.nodeType === ELEMENT_NODE && isValidContainerLegacy(container2.parentNode) && !!container2.parentNode._reactRootContainer;
+            var isContainerReactRoot = container.nodeType === ELEMENT_NODE && isValidContainerLegacy(container.parentNode) && !!container.parentNode._reactRootContainer;
             if (hasNonRootReactChild) {
               error("unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. %s", isContainerReactRoot ? "You may have accidentally passed in a React root node instead of its container." : "Instead, have the parent component update its state and rerender in order to remove this component.");
             }
@@ -29013,12 +29013,12 @@ function requireReactDom_development() {
       }
       setRestoreImplementation(restoreControlledState$3);
       setBatchingImplementation(batchedUpdates$1, discreteUpdates, flushSync);
-      function createPortal$1(children, container2) {
+      function createPortal$1(children, container) {
         var key = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : null;
-        if (!isValidContainer(container2)) {
+        if (!isValidContainer(container)) {
           throw new Error("Target container is not a DOM element.");
         }
-        return createPortal(children, container2, null, key);
+        return createPortal(children, container, null, key);
       }
       function renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
         return unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback);
@@ -29029,21 +29029,21 @@ function requireReactDom_development() {
         // This is an array for better minification.
         Events: [getInstanceFromNode, getNodeFromInstance, getFiberCurrentPropsFromNode, enqueueStateRestore, restoreStateIfNeeded, batchedUpdates$1]
       };
-      function createRoot$1(container2, options2) {
+      function createRoot$1(container, options2) {
         {
           if (!Internals.usingClientEntryPoint && true) {
             error('You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".');
           }
         }
-        return createRoot(container2, options2);
+        return createRoot(container, options2);
       }
-      function hydrateRoot$1(container2, initialChildren, options2) {
+      function hydrateRoot$1(container, initialChildren, options2) {
         {
           if (!Internals.usingClientEntryPoint && true) {
             error('You are importing hydrateRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".');
           }
         }
-        return hydrateRoot(container2, initialChildren, options2);
+        return hydrateRoot(container, initialChildren, options2);
       }
       function flushSync$1(fn) {
         {
@@ -29764,7 +29764,7 @@ const _createHooksMap = function _createHooksMap2() {
 };
 function createDOMPurify() {
   let window2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : getGlobal();
-  const DOMPurify = (root) => createDOMPurify(root);
+  const DOMPurify = (root2) => createDOMPurify(root2);
   DOMPurify.version = "3.3.0";
   DOMPurify.removed = [];
   if (!window2 || !window2.document || window2.document.nodeType !== NODE_TYPE.document || !window2.Element) {
@@ -30167,10 +30167,10 @@ function createDOMPurify() {
     }
     return WHOLE_DOCUMENT ? doc.documentElement : body;
   };
-  const _createNodeIterator = function _createNodeIterator2(root) {
+  const _createNodeIterator = function _createNodeIterator2(root2) {
     return createNodeIterator.call(
-      root.ownerDocument || root,
-      root,
+      root2.ownerDocument || root2,
+      root2,
       // eslint-disable-next-line no-bitwise
       NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT | NodeFilter.SHOW_PROCESSING_INSTRUCTION | NodeFilter.SHOW_CDATA_SECTION,
       null
@@ -35330,79 +35330,34 @@ const getDefaultConfig = () => {
 };
 const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 const cx = (...args) => twMerge(clsx(...args));
-const container = "container_ueeVi";
-const blur = "blur_9rZ6A";
-const rootContainer = "rootContainer_Z8gey";
+const root = "root_Xsw1F";
 const vmButton = "vmButton_Xr1Q6";
 const opened = "opened_gewqL";
 const isConnected = "isConnected_tjs3F";
 const closePopupButton = "closePopupButton_-08HG";
-const baseActions = "baseActions_pkHeO";
-const hierarchyButton = "hierarchyButton_h3FD7";
-const active = "active_4JTx5";
 const vmPopup = "vmPopup_Q4l4j";
-const vmContent = "vmContent_VAE7p";
-const vmContentInput = "vmContentInput_zbDAW";
-const filled = "filled_-3YUt";
-const vmContentTree = "vmContentTree_BB36O";
-const line = "line_Xgaua";
+const treeItemHeader = "treeItemHeader_9gR6Q";
+const treeItemLabel = "treeItemLabel_eiMgP";
+const treeItemMetaText = "treeItemMetaText_cmfX0";
+const treeItem = "treeItem_sRXPA";
 const vmTreeItem = "vmTreeItem_t-7jc";
 const extrasItem = "extrasItem_MI9Fa";
-const vmContentFilters = "vmContentFilters_No1QW";
-const propertyMeta = "propertyMeta_XxYHc";
-const small = "small_Ipy6s";
-const propertyValue = "propertyValue_s9qHJ";
-const propertyName = "property-name_2-sJi";
-const expandable = "expandable_2LUhL";
-const property = "property_eoWZv";
-const instance = "instance_B-kEn";
-const primitive = "primitive_5yfCy";
-const boolean = "boolean_TwUVp";
-const number = "number_AVdzm";
-const object2 = "object_kn8wQ";
-const bigint = "bigint_ZrO3O";
-const symbol = "symbol_9GN4U";
-const string = "string_m1Kkx";
 const expandButton = "expandButton_EObqt";
 const expanded = "expanded_uFpb7";
 const disabled = "disabled_IDojS";
-const css = {
-  "static": "static_g5P-G",
-  container,
-  blur,
-  rootContainer,
+const css$3 = {
+  root,
   vmButton,
   opened,
   isConnected,
   closePopupButton,
-  baseActions,
-  hierarchyButton,
-  active,
   vmPopup,
-  vmContent,
-  vmContentInput,
-  filled,
-  vmContentTree,
-  line,
+  treeItemHeader,
+  treeItemLabel,
+  treeItemMetaText,
+  treeItem,
   vmTreeItem,
   extrasItem,
-  vmContentFilters,
-  propertyMeta,
-  small,
-  propertyValue,
-  "property-name": "property-name_2-sJi",
-  propertyName,
-  expandable,
-  property,
-  instance,
-  primitive,
-  boolean,
-  number,
-  object: object2,
-  "undefined": "undefined_SMcns",
-  bigint,
-  symbol,
-  string,
   expandButton,
   expanded,
   disabled
@@ -35413,10 +35368,10 @@ const VmDevtoolsButton = observer(() => {
     "button",
     {
       className: cx(
-        css.vmButton,
+        css$3.vmButton,
         {
-          [css.opened]: model.devtools.isPopupOpened,
-          [css.isConnected]: model.devtools.isActive
+          [css$3.opened]: model.devtools.isPopupOpened,
+          [css$3.isConnected]: model.devtools.isActive
         },
         model.devtools.config.buttonClassName
       ),
@@ -35450,6 +35405,31 @@ const VmDevtoolsButton = observer(() => {
     void 0
   );
 });
+const ChevronRight = (props) => reactExports.createElement(
+  "svg",
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", viewBox: "0 0 16 16" }, props),
+  reactExports.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M5.47 13.03a.75.75 0 0 1 0-1.06L9.44 8 5.47 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0", clipRule: "evenodd" })
+);
+const FolderTree = (props) => reactExports.createElement(
+  "svg",
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", viewBox: "0 0 16 16" }, props),
+  reactExports.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M7.5 13.5v-3A.5.5 0 0 1 8 10h.672a.5.5 0 0 1 .353.146l.414.415.44.439H13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H8a.5.5 0 0 1-.5-.5M6 13H4.5a3 3 0 0 1-3-3V1.25a.75.75 0 0 1 1.5 0V2a1.5 1.5 0 0 0 1.5 1.5H6v-1a2 2 0 0 1 2-2h.672a2 2 0 0 1 1.414.586l.414.414H13a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5H4.5A3 3 0 0 1 3 4.599V10a1.5 1.5 0 0 0 1.5 1.5H6v-1a2 2 0 0 1 2-2h.672a2 2 0 0 1 1.414.586l.414.414H13a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm1.5-8.75V5.5A.5.5 0 0 0 8 6h5a.5.5 0 0 0 .5-.5v-2A.5.5 0 0 0 13 3H9.879l-.44-.44-.414-.414A.5.5 0 0 0 8.672 2H8a.5.5 0 0 0-.5.5z", clipRule: "evenodd" })
+);
+const ListUl = (props) => reactExports.createElement(
+  "svg",
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", viewBox: "0 0 16 16" }, props),
+  reactExports.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M2.5 5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5m3.25-2a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5zm0 8.5a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5zM5 8a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 5 8M3.75 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0M2.5 13.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5", clipRule: "evenodd" })
+);
+const Magnifier = (props) => reactExports.createElement(
+  "svg",
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", viewBox: "0 0 16 16" }, props),
+  reactExports.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M11.5 7a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0m-.82 4.74a6 6 0 1 1 1.06-1.06l2.79 2.79a.75.75 0 1 1-1.06 1.06z", clipRule: "evenodd" })
+);
+const Xmark = (props) => reactExports.createElement(
+  "svg",
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", viewBox: "0 0 16 16" }, props),
+  reactExports.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M3.47 3.47a.75.75 0 0 1 1.06 0L8 6.94l3.47-3.47a.75.75 0 1 1 1.06 1.06L9.06 8l3.47 3.47a.75.75 0 1 1-1.06 1.06L8 9.06l-3.47 3.47a.75.75 0 0 1-1.06-1.06L6.94 8 3.47 4.53a.75.75 0 0 1 0-1.06", clipRule: "evenodd" })
+);
 const a = null, { min: u, max: h, abs: p, floor: v } = Math, g = (e, t, o) => u(o, h(t, e)), m = (e) => [...e].sort(((e2, t) => e2 - t)), _14 = "function" == typeof queueMicrotask ? queueMicrotask : (e) => {
   Promise.resolve().then(e);
 }, S = () => {
@@ -35784,48 +35764,77 @@ const a = null, { min: u, max: h, abs: p, floor: v } = Math, g = (e, t, o) => u(
   let w2 = jsxRuntimeExports.jsx(te, { ref: m2, scrollRef: S2 ? _15 : void 0, data: o, bufferSize: r2, itemSize: i, shift: s, horizontal: l, keepMounted: c, cache: d, ssrCount: a2, item: u2, onScroll: h2, onScrollEnd: p2, children: t });
   return S2 && (w2 = jsxRuntimeExports.jsx("div", { style: { display: "flex", flexDirection: "column", justifyContent: "flex-end", minHeight: "100%", overflow: "clip" }, children: w2 })), jsxRuntimeExports.jsx("div", { ref: _15, ...g2, style: { display: l ? "inline-block" : "block", [l ? "overflowX" : "overflowY"]: "auto", contain: "strict", width: "100%", height: "100%", ...v2 }, children: w2 });
 }));
-const Magnifier = () => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-  "path",
-  {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M11.5 7a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0m-.82 4.74a6 6 0 1 1 1.06-1.06l2.79 2.79a.75.75 0 1 1-1.06 1.06z",
-    clipRule: "evenodd"
-  },
-  void 0,
-  false,
-  {
-    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/icons/magnifier.tsx",
-    lineNumber: 3,
-    columnNumber: 5
-  },
-  void 0
-) }, void 0, false, {
-  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/icons/magnifier.tsx",
-  lineNumber: 2,
-  columnNumber: 3
-}, void 0);
-const XMark = () => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-  "path",
-  {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M3.47 3.47a.75.75 0 0 1 1.06 0L8 6.94l3.47-3.47a.75.75 0 1 1 1.06 1.06L9.06 8l3.47 3.47a.75.75 0 1 1-1.06 1.06L8 9.06l-3.47 3.47a.75.75 0 0 1-1.06-1.06L6.94 8 3.47 4.53a.75.75 0 0 1 0-1.06",
-    clipRule: "evenodd"
-  },
-  void 0,
-  false,
-  {
-    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/icons/x-mark.tsx",
-    lineNumber: 3,
-    columnNumber: 5
-  },
-  void 0
-) }, void 0, false, {
-  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/icons/x-mark.tsx",
-  lineNumber: 2,
-  columnNumber: 3
-}, void 0);
+const iconToggleButton = "iconToggleButton_R48wm";
+const activePosition = "activePosition_IXsRn";
+const option = "option_a5IcR";
+const css$2 = {
+  iconToggleButton,
+  activePosition,
+  option
+};
+const IconToggleButton = ({
+  value,
+  options,
+  className,
+  onUpdate
+}) => {
+  const optionNodes = [];
+  let activeIndex;
+  options.forEach((option2, i) => {
+    const { icon: Icon, value: optionValue } = option2;
+    const isActive = value === optionValue;
+    if (isActive) {
+      activeIndex = i;
+    }
+    optionNodes.push(
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css$2.option, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Icon, {}, void 0, false, {
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/shared/icon-toggle-button/index.tsx",
+        lineNumber: 30,
+        columnNumber: 9
+      }, void 0) }, i, false, {
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/shared/icon-toggle-button/index.tsx",
+        lineNumber: 29,
+        columnNumber: 7
+      }, void 0)
+    );
+  });
+  return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+    "button",
+    {
+      className: cx(css$2.iconToggleButton, className),
+      onClick: () => {
+        const nextOption = activeIndex !== void 0 && options[activeIndex + 1] || options[0];
+        onUpdate(nextOption.value);
+      },
+      children: [
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+          "div",
+          {
+            className: css$2.activePosition,
+            style: { "--index": activeIndex }
+          },
+          void 0,
+          false,
+          {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/shared/icon-toggle-button/index.tsx",
+            lineNumber: 44,
+            columnNumber: 7
+          },
+          void 0
+        ),
+        optionNodes
+      ]
+    },
+    void 0,
+    true,
+    {
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/shared/icon-toggle-button/index.tsx",
+      lineNumber: 36,
+      columnNumber: 5
+    },
+    void 0
+  );
+};
 const ignoredKeys = /* @__PURE__ */ new Set(["constructor"]);
 const ignoredPrototypes = /* @__PURE__ */ new Set([
   globalThis.Object.prototype,
@@ -35879,27 +35888,6 @@ function getAllKeys(instance2) {
   }
   return Array.from(keysSet);
 }
-const ChevronRight = () => /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-  "path",
-  {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M5.47 13.03a.75.75 0 0 1 0-1.06L9.44 8 5.47 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0",
-    clipRule: "evenodd"
-  },
-  void 0,
-  false,
-  {
-    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/icons/chevron-right.tsx",
-    lineNumber: 3,
-    columnNumber: 5
-  },
-  void 0
-) }, void 0, false, {
-  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/icons/chevron-right.tsx",
-  lineNumber: 2,
-  columnNumber: 3
-}, void 0);
 const ExpandButton = ({
   expandable: expandable2,
   expanded: expanded2,
@@ -35911,10 +35899,10 @@ const ExpandButton = ({
     "span",
     {
       onClick,
-      className: cx(css.expandButton, {
-        [css.expandable]: expandable2,
-        [css.expanded]: expanded2,
-        [css.disabled]: disabled2
+      className: cx(css$3.expandButton, {
+        [css$3.expandable]: expandable2,
+        [css$3.expanded]: expanded2,
+        [css$3.disabled]: disabled2
       }),
       children: (expandable2 || showIconAnyway) && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ChevronRight, {}, void 0, false, {
         fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/expand-button.tsx",
@@ -35932,6 +35920,35 @@ const ExpandButton = ({
     void 0
   );
 };
+const property = "property_tyrFk";
+const expandable = "expandable_ZtNTw";
+const instance = "instance_aPKFv";
+const primitive = "primitive_mOPtu";
+const boolean = "boolean_H-c-u";
+const number = "number_Mk-lR";
+const object2 = "object_rbtD2";
+const bigint = "bigint_vEvWZ";
+const symbol = "symbol_izwyn";
+const string = "string_qjuUu";
+const propertyName = "propertyName_gpj0H";
+const propertyMeta = "propertyMeta_xSfkm";
+const propertyValue = "propertyValue_QT-FH";
+const css$1 = {
+  property,
+  expandable,
+  instance,
+  primitive,
+  boolean,
+  number,
+  object: object2,
+  "undefined": "undefined_xHzJR",
+  bigint,
+  symbol,
+  string,
+  propertyName,
+  propertyMeta,
+  propertyValue
+};
 const ArrayProperty = observer((props) => {
   const { name: property2, value, model, extraRight } = props;
   const isExpanded = model.isPathExpanded(props.path);
@@ -35941,9 +35958,9 @@ const ArrayProperty = observer((props) => {
     /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
       "div",
       {
-        className: cx(css.line, css.property, css.array, {
-          [css.expandable]: isExpandable,
-          [css.expanded]: isExpanded
+        className: cx(css$1.property, css$1.array, {
+          [css$1.expandable]: isExpandable,
+          [css$1.expanded]: isExpanded
         }),
         style: { "--level": props.level, "--order": props.order },
         onClick: () => model.handleExpandPropertyClick(props.path),
@@ -35951,23 +35968,19 @@ const ArrayProperty = observer((props) => {
         "data-depth": String().padEnd(props.level, "-"),
         children: [
           property2 === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyName, children: property2 }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/array.tsx",
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyName, children: property2 }, void 0, false, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/array.tsx",
               lineNumber: 30,
               columnNumber: 13
             }, void 0),
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: ": " }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/array.tsx",
-              lineNumber: 31,
-              columnNumber: 13
-            }, void 0)
+            ": "
           ] }, void 0, true, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/array.tsx",
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/array.tsx",
             lineNumber: 29,
             columnNumber: 11
           }, void 0),
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyValue, children: isExpanded ? "[" : isExpandable ? "[...]" : `[]` }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/array.tsx",
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyValue, children: isExpanded ? "[" : isExpandable ? "[...]" : `[]` }, void 0, false, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/array.tsx",
             lineNumber: 34,
             columnNumber: 9
           }, void 0),
@@ -35977,7 +35990,7 @@ const ArrayProperty = observer((props) => {
       void 0,
       true,
       {
-        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/array.tsx",
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/array.tsx",
         lineNumber: 16,
         columnNumber: 7
       },
@@ -35994,46 +36007,38 @@ const ArrayProperty = observer((props) => {
           key,
           path: `${props.path}.${key}`,
           level: props.level + 1,
-          extraRight: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: `,` }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/array.tsx",
-            lineNumber: 50,
-            columnNumber: 27
-          }, void 0)
+          extraRight: ","
         }
       )),
       /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "div",
         {
-          className: cx(css.line, css.property),
+          className: css$1.property,
           style: {
             "--level": props.level,
             "--order": keys.length
           },
           children: [
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: `]` }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/array.tsx",
-              lineNumber: 62,
-              columnNumber: 13
-            }, void 0),
+            `]`,
             extraRight
           ]
         },
         void 0,
         true,
         {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/array.tsx",
+          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/array.tsx",
           lineNumber: 53,
           columnNumber: 11
         },
         void 0
       )
     ] }, void 0, true, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/array.tsx",
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/array.tsx",
       lineNumber: 40,
       columnNumber: 9
     }, void 0)
   ] }, void 0, true, {
-    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/array.tsx",
+    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/array.tsx",
     lineNumber: 15,
     columnNumber: 5
   }, void 0);
@@ -36047,29 +36052,25 @@ const FunctionProperty = observer((props) => {
   return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
     "div",
     {
-      className: cx(css.line, css.property, css.function),
+      className: cx(css$1.property, css$1.function),
       title: String(value),
       style: { "--level": props.level, "--order": props.order },
       "data-fitted": props.isFitted,
       "data-depth": String().padEnd(props.level, "-"),
       children: [
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyName, children: property2 }, void 0, false, {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/function.tsx",
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyName, children: property2 }, void 0, false, {
+          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/function.tsx",
           lineNumber: 25,
           columnNumber: 7
         }, void 0),
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: `(${argLabels.join(", ")})` }, void 0, false, {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/function.tsx",
-          lineNumber: 26,
-          columnNumber: 7
-        }, void 0),
+        `(${argLabels.join(", ")})`,
         extraRight
       ]
     },
     void 0,
     true,
     {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/function.tsx",
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/function.tsx",
       lineNumber: 16,
       columnNumber: 5
     },
@@ -36086,8 +36087,8 @@ const InstanceProperty = observer((props) => {
     /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
       "div",
       {
-        className: cx(css.line, css.property, css.instance, css.expandable, {
-          [css.expanded]: isExpanded
+        className: cx(css$1.property, css$1.instance, css$1.expandable, {
+          [css$1.expanded]: isExpanded
         }),
         style: { "--level": props.level, "--order": props.order },
         onClick: () => model.handleExpandPropertyClick(props.path),
@@ -36095,31 +36096,27 @@ const InstanceProperty = observer((props) => {
         "data-depth": String().padEnd(props.level, "-"),
         children: [
           name === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyName, children: name }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyName, children: name }, void 0, false, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
               lineNumber: 32,
               columnNumber: 13
             }, void 0),
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: ": " }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
-              lineNumber: 33,
-              columnNumber: 13
-            }, void 0)
+            ": "
           ] }, void 0, true, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
             lineNumber: 31,
             columnNumber: 11
           }, void 0),
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyValue, children: `${className}` }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyValue, children: `${className}` }, void 0, false, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
             lineNumber: 36,
             columnNumber: 9
           }, void 0),
-          isExpanded && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: [
+          isExpanded && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
             " ",
             `{`
           ] }, void 0, true, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
             lineNumber: 37,
             columnNumber: 24
           }, void 0),
@@ -36129,7 +36126,7 @@ const InstanceProperty = observer((props) => {
       void 0,
       true,
       {
-        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
         lineNumber: 19,
         columnNumber: 7
       },
@@ -36146,46 +36143,38 @@ const InstanceProperty = observer((props) => {
           key,
           path: `${props.path}.${key}`,
           level: props.level + 1,
-          extraRight: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: `,` }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
-            lineNumber: 51,
-            columnNumber: 27
-          }, void 0)
+          extraRight: `,`
         }
       )),
       /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "div",
         {
-          className: cx(css.line, css.property, css.instance),
+          className: cx(css$1.property, css$1.instance),
           style: {
             "--level": props.level,
             "--order": keys.length
           },
           children: [
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: `}` }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
-              lineNumber: 63,
-              columnNumber: 13
-            }, void 0),
+            `}`,
             extraRight
           ]
         },
         void 0,
         true,
         {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
+          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
           lineNumber: 54,
           columnNumber: 11
         },
         void 0
       )
     ] }, void 0, true, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
       lineNumber: 41,
       columnNumber: 9
     }, void 0)
   ] }, void 0, true, {
-    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/instance.tsx",
+    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/instance.tsx",
     lineNumber: 18,
     columnNumber: 5
   }, void 0);
@@ -36199,9 +36188,9 @@ const ObjectProperty = observer((props) => {
     /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
       "div",
       {
-        className: cx(css.line, css.property, css.object, {
-          [css.expandable]: isExpandable,
-          [css.expanded]: isExpanded
+        className: cx(css$1.property, css$1.object, {
+          [css$1.expandable]: isExpandable,
+          [css$1.expanded]: isExpanded
         }),
         style: { "--level": props.level, "--order": props.order },
         onClick: () => model.handleExpandPropertyClick(props.path),
@@ -36209,23 +36198,19 @@ const ObjectProperty = observer((props) => {
         "data-depth": String().padEnd(props.level, "-"),
         children: [
           name === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyName, children: name }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/object.tsx",
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyName, children: name }, void 0, false, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/object.tsx",
               lineNumber: 31,
               columnNumber: 13
             }, void 0),
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: ": " }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/object.tsx",
-              lineNumber: 32,
-              columnNumber: 13
-            }, void 0)
+            ": "
           ] }, void 0, true, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/object.tsx",
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/object.tsx",
             lineNumber: 30,
             columnNumber: 11
           }, void 0),
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyValue, children: isExpanded ? "{" : isExpandable ? "{...}" : `{}` }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/object.tsx",
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyValue, children: isExpanded ? "{" : isExpandable ? "{...}" : `{}` }, void 0, false, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/object.tsx",
             lineNumber: 35,
             columnNumber: 9
           }, void 0),
@@ -36235,7 +36220,7 @@ const ObjectProperty = observer((props) => {
       void 0,
       true,
       {
-        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/object.tsx",
+        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/object.tsx",
         lineNumber: 17,
         columnNumber: 7
       },
@@ -36252,46 +36237,38 @@ const ObjectProperty = observer((props) => {
           key,
           path: `${props.path}.${key}`,
           level: props.level + 1,
-          extraRight: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: `,` }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/object.tsx",
-            lineNumber: 51,
-            columnNumber: 27
-          }, void 0)
+          extraRight: ","
         }
       )),
       /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "div",
         {
-          className: cx(css.line, css.property),
+          className: css$1.property,
           style: {
             "--level": props.level,
             "--order": keys.length
           },
           children: [
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: `}` }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/object.tsx",
-              lineNumber: 63,
-              columnNumber: 13
-            }, void 0),
+            `}`,
             extraRight
           ]
         },
         void 0,
         true,
         {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/object.tsx",
+          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/object.tsx",
           lineNumber: 54,
           columnNumber: 11
         },
         void 0
       )
     ] }, void 0, true, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/object.tsx",
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/object.tsx",
       lineNumber: 41,
       columnNumber: 9
     }, void 0)
   ] }, void 0, true, {
-    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/object.tsx",
+    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/object.tsx",
     lineNumber: 16,
     columnNumber: 5
   }, void 0);
@@ -36302,30 +36279,26 @@ const PrimitiveProperty = observer((props) => {
   return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
     "div",
     {
-      className: cx(css.line, css.property, css.primitive, css[primitiveType]),
+      className: cx(css$1.property, css$1.primitive, css$1[primitiveType]),
       style: { "--level": props.level, "--order": props.order },
       "data-fitted": props.isFitted,
       title: String(value),
       "data-depth": String().padEnd(props.level, "-"),
       children: [
         name === void 0 ? null : /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyName, children: name }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/primitive.tsx",
+          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyName, children: name }, void 0, false, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/primitive.tsx",
             lineNumber: 23,
             columnNumber: 11
           }, void 0),
-          /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: ": " }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/primitive.tsx",
-            lineNumber: 24,
-            columnNumber: 11
-          }, void 0)
+          ": "
         ] }, void 0, true, {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/primitive.tsx",
+          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/primitive.tsx",
           lineNumber: 22,
           columnNumber: 9
         }, void 0),
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyValue, children: primitiveType === "symbol" ? `Symbol(${Symbol.keyFor(value) || ""})` : primitiveType === "string" ? `"${value}"` : `${value}` }, void 0, false, {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/primitive.tsx",
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$1.propertyValue, children: primitiveType === "symbol" ? `Symbol(${Symbol.keyFor(value) || ""})` : primitiveType === "string" ? `"${value}"` : `${value}` }, void 0, false, {
+          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/primitive.tsx",
           lineNumber: 27,
           columnNumber: 7
         }, void 0),
@@ -36335,7 +36308,7 @@ const PrimitiveProperty = observer((props) => {
     void 0,
     true,
     {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/primitive.tsx",
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/primitive.tsx",
       lineNumber: 12,
       columnNumber: 5
     },
@@ -36352,38 +36325,38 @@ const Property = observer((rootProps) => {
   };
   if (Array.isArray(value)) {
     return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ArrayProperty, { ...props }, void 0, false, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/index.tsx",
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/index.tsx",
       lineNumber: 36,
       columnNumber: 12
     }, void 0);
   }
   if (_exports.isObject(value) && value.constructor?.name && value.constructor.name !== "Object") {
     return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(InstanceProperty, { ...props }, void 0, false, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/index.tsx",
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/index.tsx",
       lineNumber: 44,
       columnNumber: 12
     }, void 0);
   } else if (_exports.isFunction(value)) {
     return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(FunctionProperty, { ...props }, void 0, false, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/index.tsx",
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/index.tsx",
       lineNumber: 46,
       columnNumber: 12
     }, void 0);
   } else if (_exports.isObject(value)) {
     return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ObjectProperty, { ...props }, void 0, false, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/index.tsx",
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/index.tsx",
       lineNumber: 48,
       columnNumber: 12
     }, void 0);
   } else if (valueType.startsWith("[object ") && value && typeof value === "object" && "constructor" in value) {
     return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(InstanceProperty, { ...props }, void 0, false, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/index.tsx",
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/index.tsx",
       lineNumber: 55,
       columnNumber: 12
     }, void 0);
   } else {
     return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(PrimitiveProperty, { ...props }, void 0, false, {
-      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/property/index.tsx",
+      fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/property/index.tsx",
       lineNumber: 57,
       columnNumber: 12
     }, void 0);
@@ -36399,30 +36372,19 @@ const ExtrasItemRender = withViewModel(
       /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "div",
         {
-          className: cx(css.line, css.vmTreeItem, css.extrasItem),
+          className: cx(css$3.treeItem, css$3.vmTreeItem, css$3.extrasItem),
           "data-fitted": "true",
           "data-depth": String().padEnd(depth, "-"),
           style: { "--level": depth },
-          children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("header", { children: [
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-              ExpandButton,
-              {
-                showIconAnyway: true,
-                expanded: true,
-                disabled: model.devtools.isAllVmsExpandedByDefault
-              },
-              void 0,
-              false,
-              {
-                fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extras-item-render/index.tsx",
-                lineNumber: 28,
-                columnNumber: 13
-              },
-              void 0
-            ),
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("label", { children: "Extras" }, void 0, false, {
+          children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("header", { className: css$3.treeItemHeader, children: [
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(ExpandButton, { showIconAnyway: true, expanded: true }, void 0, false, {
               fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extras-item-render/index.tsx",
-              lineNumber: 33,
+              lineNumber: 28,
+              columnNumber: 13
+            }, void 0),
+            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("label", { className: css$3.treeItemLabel, children: "Extras" }, void 0, false, {
+              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extras-item-render/index.tsx",
+              lineNumber: 29,
               columnNumber: 13
             }, void 0)
           ] }, void 0, true, {
@@ -36458,7 +36420,7 @@ const ExtrasItemRender = withViewModel(
         false,
         {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/extras-item-render/index.tsx",
-          lineNumber: 37,
+          lineNumber: 33,
           columnNumber: 11
         },
         void 0
@@ -36470,6 +36432,26 @@ const ExtrasItemRender = withViewModel(
     }, void 0);
   }
 );
+const vmContent = "vmContent_TIK57";
+const vmContentHeader = "vmContentHeader_M1JNM";
+const vmContentHeaderLogo = "vmContentHeaderLogo_FRJDO";
+const vmContentHeaderTitle = "vmContentHeaderTitle_lYmde";
+const vmContentControlPanel = "vmContentControlPanel_CgUN9";
+const vmContentControlPanelActions = "vmContentControlPanelActions_lONbA";
+const vmContentInput = "vmContentInput_29GM1";
+const filled = "filled_6JZa0";
+const vmContentTree = "vmContentTree_BETR6";
+const css = {
+  vmContent,
+  vmContentHeader,
+  vmContentHeaderLogo,
+  vmContentHeaderTitle,
+  vmContentControlPanel,
+  vmContentControlPanelActions,
+  vmContentInput,
+  filled,
+  vmContentTree
+};
 const VmTreeItemRender = withViewModel(
   VmTreeItemRenderVM,
   ({ model }) => {
@@ -36479,54 +36461,63 @@ const VmTreeItemRender = withViewModel(
       type: "vm",
       item: vmItem
     });
-    const depth = model.devtools.isHierarchyMode ? vmItem.depth : 0;
     return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(jsxDevRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
         "div",
         {
-          className: cx(css.line, css.vmTreeItem),
+          className: cx(css$3.treeItem, css$3.vmTreeItem),
           "data-fitted": itemSearchResult.isFittedByName || itemSearchResult.isFittedById,
-          "data-depth": String().padEnd(depth, "-"),
-          style: { "--level": depth },
-          children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("header", { onClick: () => model.handleVmItemHeaderClick(vmItem), children: [
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-              ExpandButton,
-              {
-                showIconAnyway: true,
-                expandable: vmItem.children.length > 0,
-                expanded: isExpanded,
-                disabled: model.devtools.isAllVmsExpandedByDefault
-              },
-              void 0,
-              false,
-              {
-                fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-                lineNumber: 33,
-                columnNumber: 13
-              },
-              void 0
-            ),
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("label", { title: vmItem.displayName, children: vmItem.displayName }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-              lineNumber: 39,
-              columnNumber: 13
-            }, void 0),
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { title: vmItem.vm.id, children: vmItem.vm.id }, void 0, false, {
+          "data-depth": String().padEnd(vmItem.depth, "-"),
+          style: { "--level": vmItem.depth },
+          children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+            "header",
+            {
+              className: css$3.treeItemHeader,
+              onClick: () => model.handleVmItemHeaderClick(vmItem),
+              children: [
+                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+                  ExpandButton,
+                  {
+                    showIconAnyway: model.devtools.presentationMode === "tree",
+                    expandable: model.devtools.isExpandable(vmItem),
+                    expanded: isExpanded
+                  },
+                  void 0,
+                  false,
+                  {
+                    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
+                    lineNumber: 34,
+                    columnNumber: 13
+                  },
+                  void 0
+                ),
+                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("label", { className: css$3.treeItemLabel, title: vmItem.displayName, children: vmItem.displayName }, void 0, false, {
+                  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
+                  lineNumber: 39,
+                  columnNumber: 13
+                }, void 0),
+                /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css$3.treeItemMetaText, title: vmItem.vm.id, children: vmItem.vm.id }, void 0, false, {
+                  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
+                  lineNumber: 42,
+                  columnNumber: 13
+                }, void 0)
+              ]
+            },
+            void 0,
+            true,
+            {
               fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-              lineNumber: 40,
-              columnNumber: 13
-            }, void 0)
-          ] }, void 0, true, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-            lineNumber: 32,
-            columnNumber: 11
-          }, void 0)
+              lineNumber: 30,
+              columnNumber: 11
+            },
+            void 0
+          )
         },
         void 0,
         false,
         {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-          lineNumber: 24,
+          lineNumber: 22,
           columnNumber: 9
         },
         void 0
@@ -36542,19 +36533,15 @@ const VmTreeItemRender = withViewModel(
             { type: "vm", item: vmItem },
             property2
           ),
-          extraRight: order !== arr.length - 1 && /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.propertyMeta, children: `,` }, void 0, false, {
-            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-            lineNumber: 56,
-            columnNumber: 17
-          }, void 0),
-          level: depth,
+          extraRight: order !== arr.length - 1 && `,`,
+          level: vmItem.depth,
           path: property2
         },
         property2,
         false,
         {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-          lineNumber: 44,
+          lineNumber: 48,
           columnNumber: 11
         },
         void 0
@@ -36575,7 +36562,7 @@ const VmTreeItemRender = withViewModel(
       ))
     ] }, void 0, true, {
       fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/vm-tree-item-render/index.tsx",
-      lineNumber: 23,
+      lineNumber: 21,
       columnNumber: 7
     }, void 0);
   }
@@ -36588,64 +36575,25 @@ const VmDevtoolsContent = observer(
   }) => {
     const model = useViewModel();
     return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { ...props, className: cx(css.vmContent, className), children: [
-      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("header", { children: [
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { children: "mobx-view-model devtools" }, void 0, false, {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-          lineNumber: 27,
-          columnNumber: 11
-        }, void 0),
-        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css.baseActions, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-          "button",
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("header", { className: css.vmContentHeader, children: [
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+          "img",
           {
-            className: cx(css.hierarchyButton, {
-              [css.active]: model.devtools.isHierarchyMode
-            }),
-            onClick: model.devtools.toggleHierarchyMode,
-            children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                fill: "none",
-                viewBox: "0 0 16 16",
-                children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-                  "path",
-                  {
-                    fill: "currentColor",
-                    "fill-rule": "evenodd",
-                    d: "M12.25 2.5h-8.5a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75m0 4.5H5v3.13c0 .69.56 1.25 1.25 1.25H7v-.13A2.25 2.25 0 0 1 9.25 9h3a2.25 2.25 0 0 1 2.25 2.25v1.5A2.25 2.25 0 0 1 12.25 15h-3a2.25 2.25 0 0 1-2.246-2.12H6.25a2.75 2.75 0 0 1-2.75-2.75V6.986a2.25 2.25 0 0 1-2-2.236v-1.5A2.25 2.25 0 0 1 3.75 1h8.5a2.25 2.25 0 0 1 2.25 2.25v1.5A2.25 2.25 0 0 1 12.25 7m-3 3.5h3a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-.75.75h-3a.75.75 0 0 1-.75-.75v-1.5a.75.75 0 0 1 .75-.75",
-                    "clip-rule": "evenodd"
-                  },
-                  void 0,
-                  false,
-                  {
-                    fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-                    lineNumber: 40,
-                    columnNumber: 17
-                  },
-                  void 0
-                )
-              },
-              void 0,
-              false,
-              {
-                fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-                lineNumber: 35,
-                columnNumber: 15
-              },
-              void 0
-            )
+            className: css.vmContentHeaderLogo,
+            src: model.devtools.logoUrl
           },
           void 0,
           false,
           {
             fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-            lineNumber: 29,
-            columnNumber: 13
+            lineNumber: 27,
+            columnNumber: 11
           },
           void 0
-        ) }, void 0, false, {
+        ),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("span", { className: css.vmContentHeaderTitle, children: "mobx-view-model devtools" }, void 0, false, {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-          lineNumber: 28,
+          lineNumber: 31,
           columnNumber: 11
         }, void 0),
         headerContent
@@ -36654,54 +36602,85 @@ const VmDevtoolsContent = observer(
         lineNumber: 26,
         columnNumber: 9
       }, void 0),
-      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css.vmContentFilters, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-        "div",
-        {
-          className: `${css.vmContentInput} ${model.devtools.searchEngine.isActive && css.filled}`,
-          children: [
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Magnifier, {}, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-              lineNumber: 55,
-              columnNumber: 13
-            }, void 0),
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
-              "input",
+      /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css.vmContentControlPanel, children: [
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("div", { className: css.vmContentControlPanelActions, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+          IconToggleButton,
+          {
+            onUpdate: model.devtools.handleChangePresentationMode,
+            options: [
               {
-                ref: model.devtools.searchEngine.searchInputRef,
-                autoFocus: true,
-                placeholder: "search by property path or ViewModel name"
+                value: "tree",
+                icon: FolderTree
               },
-              void 0,
-              false,
               {
+                value: "list",
+                icon: ListUl
+              }
+            ],
+            value: model.devtools.presentationMode
+          },
+          void 0,
+          false,
+          {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+            lineNumber: 38,
+            columnNumber: 13
+          },
+          void 0
+        ) }, void 0, false, {
+          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+          lineNumber: 37,
+          columnNumber: 11
+        }, void 0),
+        /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+          "div",
+          {
+            className: `${css.vmContentInput} ${model.devtools.searchEngine.isActive && css.filled}`,
+            children: [
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Magnifier, {}, void 0, false, {
                 fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
                 lineNumber: 56,
                 columnNumber: 13
-              },
-              void 0
-            ),
-            /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("button", { onClick: model.devtools.searchEngine.resetSearch, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(XMark, {}, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-              lineNumber: 62,
-              columnNumber: 15
-            }, void 0) }, void 0, false, {
-              fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-              lineNumber: 61,
-              columnNumber: 13
-            }, void 0)
-          ]
-        },
-        void 0,
-        true,
-        {
-          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-          lineNumber: 52,
-          columnNumber: 11
-        },
-        void 0
-      ) }, void 0, false, {
+              }, void 0),
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+                "input",
+                {
+                  ref: model.devtools.searchEngine.searchInputRef,
+                  autoFocus: true,
+                  placeholder: "search by property path or ViewModel name"
+                },
+                void 0,
+                false,
+                {
+                  fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                  lineNumber: 57,
+                  columnNumber: 13
+                },
+                void 0
+              ),
+              /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("button", { onClick: model.devtools.searchEngine.resetSearch, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Xmark, {}, void 0, false, {
+                fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                lineNumber: 63,
+                columnNumber: 15
+              }, void 0) }, void 0, false, {
+                fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+                lineNumber: 62,
+                columnNumber: 13
+              }, void 0)
+            ]
+          },
+          void 0,
+          true,
+          {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
+            lineNumber: 53,
+            columnNumber: 11
+          },
+          void 0
+        )
+      ] }, void 0, true, {
         fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-        lineNumber: 51,
+        lineNumber: 36,
         columnNumber: 9
       }, void 0),
       /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
@@ -36720,7 +36699,7 @@ const VmDevtoolsContent = observer(
               false,
               {
                 fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-                lineNumber: 72,
+                lineNumber: 73,
                 columnNumber: 13
               },
               void 0
@@ -36737,7 +36716,7 @@ const VmDevtoolsContent = observer(
               false,
               {
                 fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-                lineNumber: 78,
+                lineNumber: 79,
                 columnNumber: 13
               },
               void 0
@@ -36748,7 +36727,7 @@ const VmDevtoolsContent = observer(
         true,
         {
           fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-content/index.tsx",
-          lineNumber: 66,
+          lineNumber: 67,
           columnNumber: 9
         },
         void 0
@@ -36765,17 +36744,28 @@ const VmDevtoolsPopup = observer(() => {
   return /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
     VmDevtoolsContent,
     {
-      className: css.vmPopup,
+      className: css$3.vmPopup,
       "data-position": `${model.devtools.config.position}`,
-      headerContent: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV("button", { className: css.closePopupButton, onClick: model.handleClosePopupClick, children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(XMark, {}, void 0, false, {
-        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-popup/index.tsx",
-        lineNumber: 17,
-        columnNumber: 11
-      }, void 0) }, void 0, false, {
-        fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-popup/index.tsx",
-        lineNumber: 16,
-        columnNumber: 9
-      }, void 0)
+      headerContent: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(
+        "button",
+        {
+          className: css$3.closePopupButton,
+          onClick: model.handleClosePopupClick,
+          children: /* @__PURE__ */ jsxDevRuntimeExports.jsxDEV(Xmark, {}, void 0, false, {
+            fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-popup/index.tsx",
+            lineNumber: 20,
+            columnNumber: 11
+          }, void 0)
+        },
+        void 0,
+        false,
+        {
+          fileName: "/home/js2me/projects/open-source/mobx-view-model-devtools/src/ui/devtools-popup/index.tsx",
+          lineNumber: 16,
+          columnNumber: 9
+        },
+        void 0
+      )
     },
     void 0,
     false,
@@ -37227,7 +37217,7 @@ class ViewModelDevtools {
     this.projectVmStore = this.config.viewModels;
     this.expandedVmsSet = observable.set();
     this.isAllVmsExpandedByDefault = true;
-    this.isHierarchyMode = true;
+    this.presentationMode = "tree";
     this.expandedVmItemsPaths = observable.set();
     this.logoUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAACTFBMVEUvEQFCGQIuEQFAGALpZhjoZhlgJANAGALrZhiAMAR1KwNKHAJXIAM4FQFsKgWUNgL09PYvEQCgPARoJwNRHgL////U0dCoSRGSPgzFTQljKwl5MggjDQHm5ORWsU2JNATWWBC4SQxsMQysQAX6+vra2NbMUQtRJQxWLgu/SAXf3t62tLOyr6zCbTecSxmyQQLIxcDAvbqbmZaVeWeKc2WgRBB/OhCMOQu4QwPt7e/DuLCYz5NoOB2tqqdsaGVhW1NagUJtTjtkYCe8XyaRRRiHRRTi29XKyMfr0cG2p5yag3JfVElMR0GfcjBVMx/KWRnoYxXdXhRzQBB0OA3n6OrOzM2npKPLq5frs5TUpo2umounkHp3cm6mgWqBbGB8aVZzYVBXnktWT0eYY0BYZzOGazGmWi3IYid1QSOxTxZYSBQ6IBFFJA6lPAP/8uvR2s3qybbSwLW8q6G3nYigm4B8fHvxonW9kXWSjGhrgl5vZlpZqk+ZdE5cjE16fkzuh0q9eUetcUKAWEBpdj90bjg/PDfteDRZdTGwaS6sYCljVCl2TCflbCJZYSKlVSJfRh/dZB2OWR1nRhFfNRHO48zo1crjwamuv5SfqpSXtpGro4bEm4SMhoGFu3yQlHqFf3l5tHKtjHCFe2ageWLSimBnYFuue1hYlk1uikCCYT5XijqRWjdNPTLRcS5VVCC7WB3WYBtsTRYmHBNYPxLA3bzwv6LVsZ+4tJyQxYqHqHvVlnJzn2uegF39l1t1oEiKjzyAdjpeRDShaClCLR/JXT/FAAAABnRSTlP7uLgrtivDuZKUAAAElElEQVQ4yyWURXsbMRRFpyRF0vCM2a6ZmWPXYWqwTVKGMDRNUmZmZmZmZub+scrp3bzN+e65q8dMmQwBwqwKnLZTNrsVDW/Y8P3AgRJPKcK8ykHIMZOmMJMgAYAlimCwGQRsHdHpayOv2tsN4wJmIZTMEiSTGMgRQoCC/B5ZAYIu/fylIthsBlkAHCeZKaNChuE4yKkA2w2IAKtdhyNpWY76ZUwkFZkIUFmeNTPU6vUadSMOOg2htNWURRhRkwQBr9OlHXQNYTipbVHZ6tX5JiPGKgsgUBQWUgckMDX/woIFC+uwzEhcWz43J6ANVgEC+dpIrcJyEp8+MeR4k4hpz696PyTIdBMZ+jAv0RBqGXPUZkw1YT0AEtCFw/3NiVgiVbWMR5hCJnnZs5uB+PoeB4pk9OFaoM9adTVDXeXzGm7+9fI8AIwEsiwBV12BYIWZmCL6DIBGozGt8+6vCLmbOp8e0vF0uMKzrH7hnHii3GyGpgjiOcLr9QDubwlaFj3d9oD6GcIqQM1enVO25FobqD1x2IQIp/KAjPUtabCs7e/fHR7hGQAUDqKN4rz9fb/XrJrf76gzcuqexsY91xJaS2Pq7oNdNVaGZ4kElaWituXNaF50b3p8uoN451m02y6VaS1rkksXbwybGMJBSMBSSy5YPtqUs6zbse816HHn8jsuB91zGpNNi2/vyjAsYGmSWm080VblFj9WV589eylnSR7ZnHDnGrvvbNq2K8JgwALCJhtCFVsKjnwgftLnexsKxE4uHyiPB9ZV79s3uHuYwbSKA3e1oeYWn3GxO17lW34kblnke7F5SVCb8lUf6aibxSgYEAhS2mDfs1GuKqa98WLghltb5Tv+dX1obtdY5YBD384gpAIWbmkI9TR7Ve+awMrNe1eK1Hbw1voQbTr46PSrEsaOAVak+7F8d/OYz5sMiJc/uzQXB45Xfpo719L0tvrn85ISxmYFkFe7YmXdPaNecHSueO6cRrzV++TJDFF0rVt+pvVYEbIDs0RS2rKKLW2s0bgoJ7o077ZunT59hkajuXKm82XJBKRAs5R0l/VVnOWNxscB0eW63jt9AnJd6ch6JiCnwkJzyhJqqSjwDkdHXnSt3P7wPyQuNgkTkB1jOryrPth8v+Do7Oz8Vl+/6eD2CZ1LXKsXxtsp5EQAQph0B8vLl2FTpq7u6NEzxysfFiHRchsjq392CQN4IJkLa93xJd0Zkykbqct0vK6urOwtNlmWYgVFKQQh6yvsnl8fu0OLsD4dOXF6cO/eyu2910WNuGDnvfApqlPUwoYFq2bWr97D026driZ8uHVw8NeORz8uipoVK1wrdhZ1oHDvy8KF8zfqMUZpnW54uKbm8KFDf1pbWy+cn0lThFSWEG/WaOQF2SrbnbJ9Fo3H4xnJoKzDaNJTG90kQcIKCAAcLaVxGuz0B/k9HpssOJ0I20uKEGOGHCsIPAAoGnU6x52lfkPU7zfMNsjRUsFqmIAmmzmJIISBCpAgO6OCMC7T47H5BdqP2ikzlb5DxswBjAAhvFX2+2UrRgIyHDtwzGMoFexFZto/HbAJBdFwHOYAAAAASUVORK5CYII=";
     this.inputRef = createFocusableRef();
@@ -37239,11 +37229,11 @@ class ViewModelDevtools {
       isPopupOpened: observable.ref,
       isAllVmsExpandedByDefault: observable,
       projectVmStore: observable.ref,
-      isHierarchyMode: observable.ref,
+      presentationMode: observable.ref,
       extras: observable.ref,
       setStore: action,
       setExtras: action,
-      toggleHierarchyMode: action,
+      handleChangePresentationMode: action,
       handleExpandVmPropertyClick: action,
       handleExpandExtraPropertyClick: action,
       allVms: computed.struct,
@@ -37265,7 +37255,7 @@ class ViewModelDevtools {
   scrollContentRef;
   keyboardHandler;
   searchEngine;
-  isHierarchyMode;
+  presentationMode;
   expandedVmsSet;
   scrollListRef;
   autoscrollTimeout;
@@ -37285,7 +37275,8 @@ class ViewModelDevtools {
   get vmTree() {
     const flattenTreeItems = [];
     const result = [];
-    const createTreeItem = (vm, depth) => {
+    const createTreeItem = (vm, inputDepth) => {
+      const depth = this.presentationMode === "list" ? 0 : inputDepth;
       const alreadyExistVmTreeItem = flattenTreeItems.find(
         (it) => it.vm === vm
       );
@@ -37295,7 +37286,7 @@ class ViewModelDevtools {
       const vmParams = this.getVmParams(vm);
       const parentVm = vmParams?.parentViewModel || null;
       const displayName = vm.constructor.name;
-      const treeItem = {
+      const treeItem2 = {
         parent: parentVm ? createTreeItem(parentVm, depth - 1) : null,
         vm,
         displayName,
@@ -37308,13 +37299,13 @@ class ViewModelDevtools {
           id: (vm.id || "").toLowerCase().trim()
         }
       };
-      flattenTreeItems.push(treeItem);
+      flattenTreeItems.push(treeItem2);
       const collectedChildren = this.allVms.filter((maybeChildVm) => {
         const params = this.getVmParams(maybeChildVm);
         return params?.parentViewModel && params.parentViewModel === vm;
       }).map((childVm) => createTreeItem(childVm, depth + 1)).filter((it) => Boolean(it));
-      treeItem.children.push(...collectedChildren);
-      return treeItem;
+      treeItem2.children.push(...collectedChildren);
+      return treeItem2;
     };
     this.rootVms.forEach((vm) => {
       const item = createTreeItem(vm, 0);
@@ -37378,6 +37369,9 @@ class ViewModelDevtools {
       this.expandedVmsSet.add(vmItem.key);
     }
   }
+  isExpandable(vmItem) {
+    return vmItem.children.length > 0 && this.presentationMode !== "list";
+  }
   getVmParams(vm) {
     if ("vmParams" in vm) {
       return vm.vmParams;
@@ -37390,8 +37384,11 @@ class ViewModelDevtools {
   setExtras(extras) {
     this.extras = extras;
   }
-  toggleHierarchyMode = () => {
-    this.isHierarchyMode = !this.isHierarchyMode;
+  handleChangePresentationMode = (mode) => {
+    this.presentationMode = mode === "list" ? "list" : "tree";
+    this.isAllVmsExpandedByDefault = true;
+    this.expandedVmItemsPaths.clear();
+    this.expandedVmsSet.clear();
   };
   init() {
     reaction(
@@ -37430,25 +37427,24 @@ class ViewModelDevtools {
     );
   }
   render() {
-    let container2 = document.querySelector(
+    let container = document.querySelector(
       `#${this.containerId}`
     );
-    if (!container2) {
-      container2 = document.createElement("div");
-      container2.style = "display: contents;";
-      container2.className = css.rootContainer;
-      container2.id = this.containerId;
+    if (!container) {
+      container = document.createElement("div");
+      container.className = css$3.root;
+      container.id = this.containerId;
       if (document.body) {
-        document.body.appendChild(container2);
+        document.body.appendChild(container);
       } else {
         document.addEventListener("DOMContentLoaded", () => {
-          document.body.appendChild(container2);
+          document.body.appendChild(container);
         });
       }
       this.init();
     }
-    const root = clientExports.createRoot(container2);
-    root.render(reactExports.createElement(DevtoolsClient, { payload: { devtools: this } }));
+    const root2 = clientExports.createRoot(container);
+    root2.render(reactExports.createElement(DevtoolsClient, { payload: { devtools: this } }));
   }
   static _instance = null;
   static define(config) {