From 68fc7a6d617a4a9041092a7d1c6a2ff7320a06d4 Mon Sep 17 00:00:00 2001
From: Markus Voelter <voelter@acm.org>
Date: Fri, 10 Jan 2025 17:11:37 +0100
Subject: [PATCH] implemented Accordion Component and an example tree. Plus
 cosmetics.

---
 .../ReactDemoLanguage.editor.modelix.mps      | 106 +++++---
 .../models/ReactDemoLanguage.sandbox.m1.mps   |  57 +++++
 ...mponents.generator.templates@generator.mps | 237 +++++++++++++++---
 ...delix.mps.react.muicomponents.behavior.mps | 131 +++++++++-
 ...modelix.mps.react.muicomponents.editor.mps | 174 ++++++++++---
 ...elix.mps.react.muicomponents.structure.mps |  99 +++++++-
 .../org.modelix.mps.react.muicomponents.mpl   |   2 +
 .../models/org.modelix.mps.react.editor.mps   |  96 ++++---
 .../org.modelix.mps.react.structure.mps       |   3 +-
 9 files changed, 771 insertions(+), 134 deletions(-)

diff --git a/mps/modules/ReactDemoLanguage.editor/models/ReactDemoLanguage.editor.modelix.mps b/mps/modules/ReactDemoLanguage.editor/models/ReactDemoLanguage.editor.modelix.mps
index 9b8b627c..a2146f59 100644
--- a/mps/modules/ReactDemoLanguage.editor/models/ReactDemoLanguage.editor.modelix.mps
+++ b/mps/modules/ReactDemoLanguage.editor/models/ReactDemoLanguage.editor.modelix.mps
@@ -39,6 +39,14 @@
         <child id="5355184975881056561" name="parameters" index="2rHO5H" />
         <child id="5355184975881056562" name="component" index="2rHO5I" />
       </concept>
+      <concept id="2833354970324652966" name="org.modelix.mps.react.structure.When" flags="ng" index="1nAWFN">
+        <child id="2833354970324652969" name="else" index="1nAWFW" />
+        <child id="2833354970324652971" name="cases" index="1nAWFY" />
+      </concept>
+      <concept id="2833354970324652974" name="org.modelix.mps.react.structure.WhenCase" flags="ng" index="1nAWFV">
+        <child id="2833354970324652977" name="compnent" index="1nAWF$" />
+        <child id="2833354970324652975" name="condition" index="1nAWFU" />
+      </concept>
       <concept id="2833354970324905743" name="org.modelix.mps.react.structure.RenderNode" flags="ng" index="1nBVpq">
         <child id="2833354970324905746" name="nodeToRender" index="1nBVp7" />
       </concept>
@@ -64,14 +72,25 @@
       </concept>
     </language>
     <language id="09a61cec-0c2d-4a90-b590-25e493b12f35" name="org.modelix.mps.react.muicomponents">
-      <concept id="2879488090872882957" name="org.modelix.mps.react.muicomponents.structure.IContainerComponent" flags="ngI" index="2KxXw$">
+      <concept id="2879488090877505016" name="org.modelix.mps.react.muicomponents.structure.Box" flags="ng" index="2Kjlbh" />
+      <concept id="2879488090877505018" name="org.modelix.mps.react.muicomponents.structure.IContainerSingleComponent" flags="ngI" index="2Kjlbj">
+        <child id="2879488090877505021" name="child" index="2Kjlbk" />
+      </concept>
+      <concept id="2879488090875868026" name="org.modelix.mps.react.muicomponents.structure.Icon" flags="ng" index="2Kq$Lj">
+        <property id="2879488090875868027" name="name" index="2Kq$Li" />
+      </concept>
+      <concept id="2879488090875868019" name="org.modelix.mps.react.muicomponents.structure.Accordion" flags="ng" index="2Kq$Lq">
+        <child id="2879488090876606450" name="icon" index="2KnKzr" />
+        <child id="2879488090875868021" name="summary" index="2Kq$Ls" />
+      </concept>
+      <concept id="2879488090872882957" name="org.modelix.mps.react.muicomponents.structure.IContainerMultiComponent" flags="ngI" index="2KxXw$">
         <child id="2879488090859879792" name="children" index="2Ln$9p" />
       </concept>
       <concept id="2879488090869195431" name="org.modelix.mps.react.muicomponents.structure.Command" flags="ng" index="2KN1Qe">
         <child id="2879488090869195432" name="statements" index="2KN1Q1" />
       </concept>
       <concept id="2879488090867630820" name="org.modelix.mps.react.muicomponents.structure.ButtonLabelIcon" flags="ng" index="2KPZRd">
-        <property id="2879488090867630821" name="icon" index="2KPZRc" />
+        <child id="2879488090875870057" name="icon" index="2Kq$h0" />
       </concept>
       <concept id="2879488090865052965" name="org.modelix.mps.react.muicomponents.structure.Button" flags="ng" index="2L3P8c">
         <child id="2879488090869195443" name="command" index="2KN1Qq" />
@@ -89,6 +108,7 @@
         <child id="2879488090860989104" name="text" index="2Lilmp" />
       </concept>
       <concept id="2879488090859464565" name="org.modelix.mps.react.muicomponents.structure.Label" flags="ng" index="2Lk9xs">
+        <property id="2879488090875133144" name="style" index="2KoofL" />
         <child id="2879488090859488762" name="value" index="2Lk3Fj" />
       </concept>
       <concept id="2879488090859879787" name="org.modelix.mps.react.muicomponents.structure.LayoutHorizontal" flags="ng" index="2Ln$92" />
@@ -139,38 +159,61 @@
         <child id="540871147943773366" name="argument" index="25WWJ7" />
       </concept>
       <concept id="1160612413312" name="jetbrains.mps.baseLanguage.collections.structure.AddElementOperation" flags="nn" index="TSZUe" />
+      <concept id="1176501494711" name="jetbrains.mps.baseLanguage.collections.structure.IsNotEmptyOperation" flags="nn" index="3GX2aA" />
     </language>
   </registry>
   <node concept="gl9ry" id="2CeLAhmFoil">
     <property role="TrG5h" value="ReactDemo" />
     <node concept="gmrQT" id="2vPZMAnsypp" role="gmrQt">
       <ref role="3JBHV4" to="oyym:2vPZMAnpuJg" resolve="TreeNode" />
-      <node concept="2LhRxX" id="2vPZMAnsypw" role="gmrTS">
-        <property role="2LhGOR" value="20px" />
-        <node concept="2Ln$92" id="2vPZMAnturx" role="2Ln$9p">
-          <node concept="2Lk9xs" id="2vPZMAnsypy" role="2Ln$9p">
-            <node concept="Xl_RD" id="2vPZMAnsyp$" role="2Lk3Fj">
-              <property role="Xl_RC" value="TreeNode" />
+      <node concept="1nAWFN" id="2vPZMAnyUWT" role="gmrTS">
+        <node concept="1nAWFV" id="2vPZMAnF2mI" role="1nAWFY">
+          <node concept="2Kq$Lq" id="2vPZMAnF2pM" role="1nAWF$">
+            <node concept="rrkbs" id="2vPZMAnF2qe" role="2Ln$9p">
+              <property role="TrG5h" value="c" />
+              <node concept="2OqwBi" id="2vPZMAnF2qf" role="rrkk9">
+                <node concept="ggAI9" id="2vPZMAnF2qg" role="2Oq$k0" />
+                <node concept="3Tsc0h" id="2vPZMAnF2qh" role="2OqNvi">
+                  <ref role="3TtcxE" to="oyym:2vPZMAnpuJi" resolve="children" />
+                </node>
+              </node>
+              <node concept="1nBVpq" id="2vPZMAnF2qi" role="rrkkB">
+                <node concept="rqPyE" id="2vPZMAnF2qj" role="1nBVp7">
+                  <ref role="rqPyD" node="2vPZMAnF2qe" resolve="c" />
+                </node>
+              </node>
             </node>
-          </node>
-          <node concept="2Ly8ie" id="2vPZMAnturA" role="2Ln$9p">
-            <node concept="2Ly3GW" id="2vPZMAnturC" role="2Ly3GP">
-              <ref role="2Ly3GY" to="tpck:h0TrG11" resolve="name" />
-              <node concept="ggAI9" id="2vPZMAnturG" role="2Ly3GZ" />
+            <node concept="2Kq$Lj" id="2vPZMAnF2pN" role="2KnKzr">
+              <property role="2Kq$Li" value="mui.icons.ExpandMore" />
+            </node>
+            <node concept="2Lk9xs" id="2vPZMAnF2pQ" role="2Kq$Ls">
+              <property role="2KoofL" value="2vPZMAn_7Nn/bold" />
+              <node concept="2OqwBi" id="2vPZMAnF2pR" role="2Lk3Fj">
+                <node concept="ggAI9" id="2vPZMAnF2pS" role="2Oq$k0" />
+                <node concept="3TrcHB" id="2vPZMAnF2pT" role="2OqNvi">
+                  <ref role="3TsBF5" to="tpck:h0TrG11" resolve="name" />
+                </node>
+              </node>
             </node>
           </node>
-        </node>
-        <node concept="rrkbs" id="2vPZMAnturS" role="2Ln$9p">
-          <property role="TrG5h" value="c" />
-          <node concept="1nBVpq" id="2vPZMAntuNR" role="rrkkB">
-            <node concept="rqPyE" id="2vPZMAntuPO" role="1nBVp7">
-              <ref role="rqPyD" node="2vPZMAnturS" resolve="c" />
+          <node concept="2OqwBi" id="2vPZMAnGslA" role="1nAWFU">
+            <node concept="2OqwBi" id="2vPZMAnGslB" role="2Oq$k0">
+              <node concept="ggAI9" id="2vPZMAnGslC" role="2Oq$k0" />
+              <node concept="3Tsc0h" id="2vPZMAnGslD" role="2OqNvi">
+                <ref role="3TtcxE" to="oyym:2vPZMAnpuJi" resolve="children" />
+              </node>
             </node>
+            <node concept="3GX2aA" id="2vPZMAnGslE" role="2OqNvi" />
           </node>
-          <node concept="2OqwBi" id="2vPZMAntuAo" role="rrkk9">
-            <node concept="ggAI9" id="2vPZMAntus6" role="2Oq$k0" />
-            <node concept="3Tsc0h" id="2vPZMAntuJV" role="2OqNvi">
-              <ref role="3TtcxE" to="oyym:2vPZMAnpuJi" resolve="children" />
+        </node>
+        <node concept="2Kjlbh" id="2vPZMAnIH2O" role="1nAWFW">
+          <node concept="2Lk9xs" id="2vPZMAnzf2p" role="2Kjlbk">
+            <property role="2KoofL" value="2vPZMAn_7Nm/plain" />
+            <node concept="2OqwBi" id="2vPZMAnzfdC" role="2Lk3Fj">
+              <node concept="ggAI9" id="2vPZMAnzf5q" role="2Oq$k0" />
+              <node concept="3TrcHB" id="2vPZMAnzfw6" role="2OqNvi">
+                <ref role="3TsBF5" to="tpck:h0TrG11" resolve="name" />
+              </node>
             </node>
           </node>
         </node>
@@ -191,6 +234,7 @@
         </node>
         <node concept="2Ln$92" id="2vPZMAmPw0_" role="2Ln$9p">
           <node concept="2Lk9xs" id="2vPZMAmPw4D" role="2Ln$9p">
+            <property role="2KoofL" value="2vPZMAn_7Nm/plain" />
             <node concept="Xl_RD" id="2vPZMAmPw4K" role="2Lk3Fj">
               <property role="Xl_RC" value="Name of the thing" />
             </node>
@@ -256,6 +300,7 @@
       <property role="TrG5h" value="rr" />
       <node concept="2Ln$92" id="2vPZMAnl7aU" role="2rHO5I">
         <node concept="2Lk9xs" id="2vPZMAnl7aW" role="2Ln$9p">
+          <property role="2KoofL" value="2vPZMAn_7Nm/plain" />
           <node concept="3cpWs3" id="2vPZMAnl7aX" role="2Lk3Fj">
             <node concept="2OqwBi" id="2vPZMAnl7aY" role="3uHU7w">
               <node concept="2rHscw" id="2vPZMAnl7dt" role="2Oq$k0">
@@ -278,9 +323,6 @@
           </node>
         </node>
         <node concept="2L3P8c" id="2vPZMAnl7b6" role="2Ln$9p">
-          <node concept="2KPZRd" id="2vPZMAnl7b7" role="2L3P8e">
-            <property role="2KPZRc" value="mui.icons.Delete" />
-          </node>
           <node concept="2KN1Qe" id="2vPZMAnl7b8" role="2KN1Qq">
             <node concept="3clFbS" id="2vPZMAnl7b9" role="2KN1Q1">
               <node concept="3clFbF" id="2vPZMAnl7ba" role="3cqZAp">
@@ -293,6 +335,11 @@
               </node>
             </node>
           </node>
+          <node concept="2KPZRd" id="2vPZMAnEJvc" role="2L3P8e">
+            <node concept="2Kq$Lj" id="2vPZMAnEJvg" role="2Kq$h0">
+              <property role="2Kq$Li" value="mui.icons.Delete" />
+            </node>
+          </node>
         </node>
       </node>
       <node concept="2rzwrA" id="2vPZMAnkzyO" role="2rHO5H">
@@ -306,6 +353,7 @@
       <ref role="3JBHV4" to="oyym:2vPZMAmue7m" resolve="Element" />
       <node concept="2Ln$92" id="2vPZMAnl6TL" role="gmrTS">
         <node concept="2Lk9xs" id="2vPZMAnl6TM" role="2Ln$9p">
+          <property role="2KoofL" value="2vPZMAn_7Nm/plain" />
           <node concept="3cpWs3" id="2vPZMAnl6TN" role="2Lk3Fj">
             <node concept="2OqwBi" id="2vPZMAnl6TO" role="3uHU7w">
               <node concept="ggAI9" id="2vPZMAnl6TP" role="2Oq$k0" />
@@ -324,8 +372,10 @@
           </node>
         </node>
         <node concept="2L3P8c" id="2vPZMAnl6TW" role="2Ln$9p">
-          <node concept="2KPZRd" id="2vPZMAnl6TX" role="2L3P8e">
-            <property role="2KPZRc" value="mui.icons.Delete" />
+          <node concept="2KPZRd" id="2vPZMAnEJvw" role="2L3P8e">
+            <node concept="2Kq$Lj" id="2vPZMAnDoXN" role="2Kq$h0">
+              <property role="2Kq$Li" value="mui.icons.Delete" />
+            </node>
           </node>
           <node concept="2KN1Qe" id="2vPZMAnl6TY" role="2KN1Qq">
             <node concept="3clFbS" id="2vPZMAnl6TZ" role="2KN1Q1">
diff --git a/mps/modules/ReactDemoLanguage.sandbox/models/ReactDemoLanguage.sandbox.m1.mps b/mps/modules/ReactDemoLanguage.sandbox/models/ReactDemoLanguage.sandbox.m1.mps
index cca2020b..84b1e6cb 100644
--- a/mps/modules/ReactDemoLanguage.sandbox/models/ReactDemoLanguage.sandbox.m1.mps
+++ b/mps/modules/ReactDemoLanguage.sandbox/models/ReactDemoLanguage.sandbox.m1.mps
@@ -43,12 +43,69 @@
     <node concept="2K$1jT" id="2vPZMAnpySr" role="2K$1jV">
       <property role="TrG5h" value="N21" />
     </node>
+    <node concept="2K$1jT" id="2vPZMAnBVc9" role="2K$1jV">
+      <property role="TrG5h" value="N21" />
+    </node>
+    <node concept="2K$1jT" id="2vPZMAnBVca" role="2K$1jV">
+      <property role="TrG5h" value="N21" />
+      <node concept="2K$1jT" id="2vPZMAnBVcc" role="2K$1jV">
+        <property role="TrG5h" value="N22" />
+        <node concept="2K$1jT" id="2vPZMAnBVcd" role="2K$1jV">
+          <property role="TrG5h" value="N3" />
+        </node>
+      </node>
+      <node concept="2K$1jT" id="2vPZMAnBVce" role="2K$1jV">
+        <property role="TrG5h" value="N22" />
+        <node concept="2K$1jT" id="2vPZMAnBVcf" role="2K$1jV">
+          <property role="TrG5h" value="N3" />
+          <node concept="2K$1jT" id="2vPZMAnBVcg" role="2K$1jV">
+            <property role="TrG5h" value="N22" />
+            <node concept="2K$1jT" id="2vPZMAnBVch" role="2K$1jV">
+              <property role="TrG5h" value="N3" />
+            </node>
+          </node>
+          <node concept="2K$1jT" id="2vPZMAnBVci" role="2K$1jV">
+            <property role="TrG5h" value="N22" />
+            <node concept="2K$1jT" id="2vPZMAnBVcj" role="2K$1jV">
+              <property role="TrG5h" value="N3" />
+              <node concept="2K$1jT" id="2vPZMAnBVck" role="2K$1jV">
+                <property role="TrG5h" value="N22" />
+                <node concept="2K$1jT" id="2vPZMAnBVcl" role="2K$1jV">
+                  <property role="TrG5h" value="N3" />
+                </node>
+              </node>
+              <node concept="2K$1jT" id="2vPZMAnBVcm" role="2K$1jV">
+                <property role="TrG5h" value="N22" />
+                <node concept="2K$1jT" id="2vPZMAnBVcn" role="2K$1jV">
+                  <property role="TrG5h" value="N3" />
+                </node>
+              </node>
+            </node>
+          </node>
+        </node>
+      </node>
+    </node>
+    <node concept="2K$1jT" id="2vPZMAnBVcb" role="2K$1jV">
+      <property role="TrG5h" value="N21" />
+    </node>
     <node concept="2K$1jT" id="2vPZMAnpySq" role="2K$1jV">
       <property role="TrG5h" value="N22" />
       <node concept="2K$1jT" id="2vPZMAnpySs" role="2K$1jV">
         <property role="TrG5h" value="N3" />
       </node>
     </node>
+    <node concept="2K$1jT" id="2vPZMAnBVc5" role="2K$1jV">
+      <property role="TrG5h" value="N22" />
+      <node concept="2K$1jT" id="2vPZMAnBVc6" role="2K$1jV">
+        <property role="TrG5h" value="N3" />
+      </node>
+    </node>
+    <node concept="2K$1jT" id="2vPZMAnBVc7" role="2K$1jV">
+      <property role="TrG5h" value="N22" />
+      <node concept="2K$1jT" id="2vPZMAnBVc8" role="2K$1jV">
+        <property role="TrG5h" value="N3" />
+      </node>
+    </node>
   </node>
 </model>
 
diff --git a/mps/modules/org.modelix.mps.react.muicomponents/generator/templates/org.modelix.mps.react.muicomponents.generator.templates@generator.mps b/mps/modules/org.modelix.mps.react.muicomponents/generator/templates/org.modelix.mps.react.muicomponents.generator.templates@generator.mps
index 70a902e1..8869b721 100644
--- a/mps/modules/org.modelix.mps.react.muicomponents/generator/templates/org.modelix.mps.react.muicomponents.generator.templates@generator.mps
+++ b/mps/modules/org.modelix.mps.react.muicomponents/generator/templates/org.modelix.mps.react.muicomponents.generator.templates@generator.mps
@@ -4,14 +4,15 @@
   <languages>
     <use id="67accce2-9676-4728-9e9c-8b15ea30d924" name="org.modelix.mps.react" version="0" />
     <use id="b401a680-8325-4110-8fd3-84331ff25bef" name="jetbrains.mps.lang.generator" version="4" />
+    <use id="09a61cec-0c2d-4a90-b590-25e493b12f35" name="org.modelix.mps.react.muicomponents" version="0" />
     <devkit ref="a2eb3a43-fcc2-4200-80dc-c60110c4862d(jetbrains.mps.devkit.templates)" />
   </languages>
   <imports>
     <import index="zaxg" ref="r:c4183f14-1033-4ade-be7c-1beadb184134(org.modelix.mps.react.muicomponents.structure)" />
     <import index="8xo1" ref="r:41b64586-29ed-47f5-b907-44be07261bbc(org.modelix.mps.react.structure)" />
     <import index="oyym" ref="r:1570828e-e9a4-47ff-95d9-80c800704647(ReactDemoLanguage.structure)" />
+    <import index="tpck" ref="r:00000000-0000-4000-0000-011c89590288(jetbrains.mps.lang.core.structure)" />
     <import index="tpee" ref="r:00000000-0000-4000-0000-011c895902ca(jetbrains.mps.baseLanguage.structure)" implicit="true" />
-    <import index="tpck" ref="r:00000000-0000-4000-0000-011c89590288(jetbrains.mps.lang.core.structure)" implicit="true" />
   </imports>
   <registry>
     <language id="67accce2-9676-4728-9e9c-8b15ea30d924" name="org.modelix.mps.react">
@@ -58,6 +59,12 @@
         <property id="8876946878574187995" name="propertyName" index="gn1nW" />
         <child id="8876946878574187997" name="value" index="gn1nU" />
       </concept>
+      <concept id="8861973540082802718" name="org.modelix.mps.react.structure.ComponentPropertyValue" flags="ng" index="rtYR_">
+        <child id="8861973540082802734" name="component" index="rtYRl" />
+      </concept>
+      <concept id="2833354970324905743" name="org.modelix.mps.react.structure.RenderNode" flags="ng" index="1nBVpq">
+        <child id="2833354970324905746" name="nodeToRender" index="1nBVp7" />
+      </concept>
     </language>
     <language id="f3061a53-9226-4cc5-a443-f952ceaf5816" name="jetbrains.mps.baseLanguage">
       <concept id="1215693861676" name="jetbrains.mps.baseLanguage.structure.BaseAssignmentExpression" flags="nn" index="d038R">
@@ -88,6 +95,12 @@
         <child id="1081773367580" name="leftExpression" index="3uHU7B" />
       </concept>
     </language>
+    <language id="09a61cec-0c2d-4a90-b590-25e493b12f35" name="org.modelix.mps.react.muicomponents">
+      <concept id="2879488090859464565" name="org.modelix.mps.react.muicomponents.structure.Label" flags="ng" index="2Lk9xs">
+        <property id="2879488090875133144" name="style" index="2KoofL" />
+        <child id="2879488090859488762" name="value" index="2Lk3Fj" />
+      </concept>
+    </language>
     <language id="b401a680-8325-4110-8fd3-84331ff25bef" name="jetbrains.mps.lang.generator">
       <concept id="1114706874351" name="jetbrains.mps.lang.generator.structure.CopySrcNodeMacro" flags="ln" index="29HgVG">
         <child id="1168024447342" name="sourceNodeQuery" index="3NFExx" />
@@ -127,6 +140,12 @@
       </concept>
     </language>
     <language id="7866978e-a0f0-4cc7-81bc-4d213d9375e1" name="jetbrains.mps.lang.smodel">
+      <concept id="4705942098322609812" name="jetbrains.mps.lang.smodel.structure.EnumMember_IsOperation" flags="ng" index="21noJN">
+        <child id="4705942098322609813" name="member" index="21noJM" />
+      </concept>
+      <concept id="4705942098322467729" name="jetbrains.mps.lang.smodel.structure.EnumMemberReference" flags="ng" index="21nZrQ">
+        <reference id="4705942098322467736" name="decl" index="21nZrZ" />
+      </concept>
       <concept id="1177026924588" name="jetbrains.mps.lang.smodel.structure.RefConcept_Reference" flags="nn" index="chp4Y">
         <reference id="1177026940964" name="conceptDeclaration" index="cht4Q" />
       </concept>
@@ -167,6 +186,93 @@
   </registry>
   <node concept="bUwia" id="2vPZMAmvnIA">
     <property role="TrG5h" value="main" />
+    <node concept="3aamgX" id="2vPZMAnGAIz" role="3acgRq">
+      <ref role="30HIoZ" to="zaxg:2vPZMAnBVdN" resolve="Accordion" />
+      <node concept="1Koe21" id="2vPZMAnGAMl" role="1lVwrX">
+        <node concept="gmrQT" id="2vPZMAnGAMp" role="1Koe22">
+          <ref role="3JBHV4" to="tpee:fz12cDA" resolve="ClassConcept" />
+          <node concept="gmrTC" id="2vPZMAny23u" role="gmrTS">
+            <property role="gmPZ6" value="mui.Accordion" />
+            <node concept="gmrTC" id="2vPZMAny23w" role="gn1nJ">
+              <property role="gmPZ6" value="mui.AccordionSummary" />
+              <node concept="2Lk9xs" id="2vPZMAn_rY8" role="gn1nJ">
+                <property role="2KoofL" value="2vPZMAn_7Nn/bold" />
+                <node concept="2OqwBi" id="2vPZMAn_s6y" role="2Lk3Fj">
+                  <node concept="ggAI9" id="2vPZMAn_rYk" role="2Oq$k0" />
+                  <node concept="3TrcHB" id="2vPZMAn_sfv" role="2OqNvi">
+                    <ref role="3TsBF5" to="tpck:h0TrG11" resolve="name" />
+                  </node>
+                </node>
+                <node concept="29HgVG" id="2vPZMAnGICg" role="lGtFl">
+                  <node concept="3NFfHV" id="2vPZMAnGICh" role="3NFExx">
+                    <node concept="3clFbS" id="2vPZMAnGICi" role="2VODD2">
+                      <node concept="3clFbF" id="2vPZMAnGICo" role="3cqZAp">
+                        <node concept="2OqwBi" id="2vPZMAnGICj" role="3clFbG">
+                          <node concept="3TrEf2" id="2vPZMAnGICm" role="2OqNvi">
+                            <ref role="3Tt5mk" to="zaxg:2vPZMAnBVdP" resolve="summary" />
+                          </node>
+                          <node concept="30H73N" id="2vPZMAnGICn" role="2Oq$k0" />
+                        </node>
+                      </node>
+                    </node>
+                  </node>
+                </node>
+              </node>
+              <node concept="gn1nE" id="2vPZMAnzL2R" role="gn1nH">
+                <property role="gn1nW" value="expandIcon" />
+                <node concept="rtYR_" id="2vPZMAnzL31" role="gn1nU">
+                  <node concept="gmrTC" id="2vPZMAnzL34" role="rtYRl">
+                    <property role="gmPZ6" value="mui.icons.ExpandMore" />
+                    <node concept="17Uvod" id="2vPZMAnGCIs" role="lGtFl">
+                      <property role="2qtEX9" value="componentType" />
+                      <property role="P4ACc" value="67accce2-9676-4728-9e9c-8b15ea30d924/8876946878573903439/8876946878573977569" />
+                      <node concept="3zFVjK" id="2vPZMAnGCIt" role="3zH0cK">
+                        <node concept="3clFbS" id="2vPZMAnGCIu" role="2VODD2">
+                          <node concept="3clFbF" id="2vPZMAnGDD3" role="3cqZAp">
+                            <node concept="2OqwBi" id="2vPZMAnGGoH" role="3clFbG">
+                              <node concept="2OqwBi" id="2vPZMAnGE7L" role="2Oq$k0">
+                                <node concept="30H73N" id="2vPZMAnGDD2" role="2Oq$k0" />
+                                <node concept="3TrEf2" id="2vPZMAnGFIN" role="2OqNvi">
+                                  <ref role="3Tt5mk" to="zaxg:2vPZMAnEJvM" resolve="icon" />
+                                </node>
+                              </node>
+                              <node concept="3TrcHB" id="2vPZMAnGHpp" role="2OqNvi">
+                                <ref role="3TsBF5" to="zaxg:2vPZMAnBVdV" resolve="name" />
+                              </node>
+                            </node>
+                          </node>
+                        </node>
+                      </node>
+                    </node>
+                  </node>
+                </node>
+              </node>
+            </node>
+            <node concept="gmrTC" id="2vPZMAny2kW" role="gn1nJ">
+              <property role="gmPZ6" value="mui.AccordionDetails" />
+              <node concept="1nBVpq" id="2vPZMAnGLpV" role="gn1nJ">
+                <node concept="ggAI9" id="2vPZMAnGLpX" role="1nBVp7" />
+                <node concept="2b32R4" id="2vPZMAnGLq3" role="lGtFl">
+                  <node concept="3JmXsc" id="2vPZMAnGLq6" role="2P8S$">
+                    <node concept="3clFbS" id="2vPZMAnGLq7" role="2VODD2">
+                      <node concept="3clFbF" id="2vPZMAnGLqd" role="3cqZAp">
+                        <node concept="2OqwBi" id="2vPZMAnGLq8" role="3clFbG">
+                          <node concept="3Tsc0h" id="2vPZMAnGLqb" role="2OqNvi">
+                            <ref role="3TtcxE" to="zaxg:2vPZMAmEVPK" resolve="children" />
+                          </node>
+                          <node concept="30H73N" id="2vPZMAnGLqc" role="2Oq$k0" />
+                        </node>
+                      </node>
+                    </node>
+                  </node>
+                </node>
+              </node>
+            </node>
+            <node concept="raruj" id="2vPZMAnGC1X" role="lGtFl" />
+          </node>
+        </node>
+      </node>
+    </node>
     <node concept="3aamgX" id="2vPZMAm$jBB" role="3acgRq">
       <ref role="30HIoZ" to="zaxg:2vPZMAmvnIB" resolve="TextBox" />
       <node concept="1Koe21" id="2vPZMAm$k04" role="1lVwrX">
@@ -441,7 +547,7 @@
       </node>
     </node>
     <node concept="3aamgX" id="2vPZMAmDmGr" role="3acgRq">
-      <ref role="30HIoZ" to="zaxg:2vPZMAmDmtP" resolve="Label" />
+      <ref role="30HIoZ" to="zaxg:2vPZMAnIaRS" resolve="Box" />
       <node concept="1Koe21" id="2vPZMAmDmGs" role="1lVwrX">
         <node concept="gmrQT" id="2vPZMAmDmGt" role="1Koe22">
           <ref role="3JBHV4" to="tpee:fz12cDA" resolve="ClassConcept" />
@@ -490,14 +596,6 @@
                     </node>
                   </node>
                 </node>
-                <node concept="gjbwy" id="2vPZMAmDH9c" role="gjbx_">
-                  <property role="gjbwO" value="typography" />
-                  <node concept="ghjhU" id="2vPZMAmDH9f" role="gjbwM">
-                    <node concept="Xl_RD" id="2vPZMAmDH9e" role="ghjhc">
-                      <property role="Xl_RC" value="body1" />
-                    </node>
-                  </node>
-                </node>
                 <node concept="gjbwy" id="2vPZMAmDH9t" role="gjbx_">
                   <property role="gjbwO" value="backgroundColor" />
                   <node concept="ghjhU" id="2vPZMAmDH9w" role="gjbwM">
@@ -510,24 +608,92 @@
             </node>
             <node concept="raruj" id="2vPZMAmDmHe" role="lGtFl" />
             <node concept="ggXia" id="2vPZMAmDHz9" role="gn1nJ">
-              <node concept="3cpWs3" id="2vPZMAmDJwy" role="ggXio">
-                <node concept="Xl_RD" id="2vPZMAmDJw_" role="3uHU7w">
+              <node concept="2OqwBi" id="2vPZMAnIsFw" role="ggXio">
+                <node concept="ggAI9" id="2vPZMAnIsmU" role="2Oq$k0" />
+                <node concept="3TrcHB" id="2vPZMAnItgU" role="2OqNvi">
+                  <ref role="3TsBF5" to="tpck:h0TrG11" resolve="name" />
+                </node>
+              </node>
+              <node concept="29HgVG" id="2vPZMAnIth8" role="lGtFl">
+                <node concept="3NFfHV" id="2vPZMAnIth9" role="3NFExx">
+                  <node concept="3clFbS" id="2vPZMAnItha" role="2VODD2">
+                    <node concept="3clFbF" id="2vPZMAnIthg" role="3cqZAp">
+                      <node concept="2OqwBi" id="2vPZMAnIthb" role="3clFbG">
+                        <node concept="3TrEf2" id="2vPZMAnIthe" role="2OqNvi">
+                          <ref role="3Tt5mk" to="zaxg:2vPZMAnIaRX" resolve="child" />
+                        </node>
+                        <node concept="30H73N" id="2vPZMAnIthf" role="2Oq$k0" />
+                      </node>
+                    </node>
+                  </node>
+                </node>
+              </node>
+            </node>
+          </node>
+        </node>
+      </node>
+    </node>
+    <node concept="3aamgX" id="2vPZMAn_Y3G" role="3acgRq">
+      <ref role="30HIoZ" to="zaxg:2vPZMAmDmtP" resolve="Label" />
+      <node concept="1Koe21" id="2vPZMAn_Y3H" role="1lVwrX">
+        <node concept="gmrQT" id="2vPZMAn_Y3I" role="1Koe22">
+          <ref role="3JBHV4" to="tpee:fz12cDA" resolve="ClassConcept" />
+          <node concept="gmrTC" id="2vPZMAn_Y3J" role="gmrTS">
+            <property role="gmPZ6" value="mui.Typography" />
+            <node concept="gn1nE" id="2vPZMAn_Y3K" role="gn1nH">
+              <property role="gn1nW" value="sx" />
+              <node concept="gjbvi" id="2vPZMAn_Y3L" role="gn1nU">
+                <node concept="gjbwy" id="2vPZMAn_Y3M" role="gjbx_">
+                  <property role="gjbwO" value="fontWeight" />
+                  <node concept="ghjhU" id="2vPZMAn_Y3N" role="gjbwM">
+                    <node concept="Xl_RD" id="2vPZMAn_Y3O" role="ghjhc">
+                      <property role="Xl_RC" value="bold" />
+                    </node>
+                  </node>
+                  <node concept="1W57fq" id="2vPZMAn_Y3P" role="lGtFl">
+                    <node concept="3IZrLx" id="2vPZMAn_Y3Q" role="3IZSJc">
+                      <node concept="3clFbS" id="2vPZMAn_Y3R" role="2VODD2">
+                        <node concept="3clFbF" id="2vPZMAn_Y3S" role="3cqZAp">
+                          <node concept="2OqwBi" id="2vPZMAn_Y3T" role="3clFbG">
+                            <node concept="2OqwBi" id="2vPZMAn_Y3U" role="2Oq$k0">
+                              <node concept="30H73N" id="2vPZMAn_Y3V" role="2Oq$k0" />
+                              <node concept="3TrcHB" id="2vPZMAn_Y3W" role="2OqNvi">
+                                <ref role="3TsBF5" to="zaxg:2vPZMAn_7No" resolve="style" />
+                              </node>
+                            </node>
+                            <node concept="21noJN" id="2vPZMAn_Y3X" role="2OqNvi">
+                              <node concept="21nZrQ" id="2vPZMAn_Y3Y" role="21noJM">
+                                <ref role="21nZrZ" to="zaxg:2vPZMAn_7Nn" resolve="bold" />
+                              </node>
+                            </node>
+                          </node>
+                        </node>
+                      </node>
+                    </node>
+                  </node>
+                </node>
+              </node>
+            </node>
+            <node concept="raruj" id="2vPZMAn_Y4k" role="lGtFl" />
+            <node concept="ggXia" id="2vPZMAn_Y4l" role="gn1nJ">
+              <node concept="3cpWs3" id="2vPZMAn_Y4m" role="ggXio">
+                <node concept="Xl_RD" id="2vPZMAn_Y4n" role="3uHU7w">
                   <property role="Xl_RC" value="" />
                 </node>
-                <node concept="2OqwBi" id="2vPZMAmDHUM" role="3uHU7B">
-                  <node concept="ggAI9" id="2vPZMAmDHAi" role="2Oq$k0" />
-                  <node concept="3TrcHB" id="2vPZMAmDIwc" role="2OqNvi">
+                <node concept="2OqwBi" id="2vPZMAn_Y4o" role="3uHU7B">
+                  <node concept="ggAI9" id="2vPZMAn_Y4p" role="2Oq$k0" />
+                  <node concept="3TrcHB" id="2vPZMAn_Y4q" role="2OqNvi">
                     <ref role="3TsBF5" to="tpck:h0TrG11" resolve="name" />
                   </node>
-                  <node concept="29HgVG" id="2vPZMAmDJwW" role="lGtFl">
-                    <node concept="3NFfHV" id="2vPZMAmDJwX" role="3NFExx">
-                      <node concept="3clFbS" id="2vPZMAmDJwY" role="2VODD2">
-                        <node concept="3clFbF" id="2vPZMAmDJx4" role="3cqZAp">
-                          <node concept="2OqwBi" id="2vPZMAmDJwZ" role="3clFbG">
-                            <node concept="3TrEf2" id="2vPZMAmDJx2" role="2OqNvi">
+                  <node concept="29HgVG" id="2vPZMAn_Y4r" role="lGtFl">
+                    <node concept="3NFfHV" id="2vPZMAn_Y4s" role="3NFExx">
+                      <node concept="3clFbS" id="2vPZMAn_Y4t" role="2VODD2">
+                        <node concept="3clFbF" id="2vPZMAn_Y4u" role="3cqZAp">
+                          <node concept="2OqwBi" id="2vPZMAn_Y4v" role="3clFbG">
+                            <node concept="3TrEf2" id="2vPZMAn_Y4w" role="2OqNvi">
                               <ref role="3Tt5mk" to="zaxg:2vPZMAmDsnU" resolve="value" />
                             </node>
-                            <node concept="30H73N" id="2vPZMAmDJx3" role="2Oq$k0" />
+                            <node concept="30H73N" id="2vPZMAn_Y4x" role="2Oq$k0" />
                           </node>
                         </node>
                       </node>
@@ -748,20 +914,25 @@
                 <node concept="3zFVjK" id="2vPZMAn9KPr" role="3zH0cK">
                   <node concept="3clFbS" id="2vPZMAn9KPs" role="2VODD2">
                     <node concept="3clFbF" id="2vPZMAn9KPT" role="3cqZAp">
-                      <node concept="2OqwBi" id="2vPZMAn9MZk" role="3clFbG">
-                        <node concept="1PxgMI" id="2vPZMAn9Mxi" role="2Oq$k0">
-                          <node concept="chp4Y" id="2vPZMAn9Mya" role="3oSUPX">
-                            <ref role="cht4Q" to="zaxg:2vPZMAn8wb$" resolve="IconButtonLabel" />
-                          </node>
-                          <node concept="2OqwBi" id="2vPZMAn9LjH" role="1m5AlR">
-                            <node concept="30H73N" id="2vPZMAn9KPS" role="2Oq$k0" />
-                            <node concept="3TrEf2" id="2vPZMAn9LHF" role="2OqNvi">
-                              <ref role="3Tt5mk" to="zaxg:2vPZMAmYEOB" resolve="label" />
+                      <node concept="2OqwBi" id="2vPZMAnBZ3o" role="3clFbG">
+                        <node concept="2OqwBi" id="2vPZMAn9MZk" role="2Oq$k0">
+                          <node concept="1PxgMI" id="2vPZMAn9Mxi" role="2Oq$k0">
+                            <node concept="chp4Y" id="2vPZMAn9Mya" role="3oSUPX">
+                              <ref role="cht4Q" to="zaxg:2vPZMAn8wb$" resolve="ButtonLabelIcon" />
                             </node>
+                            <node concept="2OqwBi" id="2vPZMAn9LjH" role="1m5AlR">
+                              <node concept="30H73N" id="2vPZMAn9KPS" role="2Oq$k0" />
+                              <node concept="3TrEf2" id="2vPZMAn9LHF" role="2OqNvi">
+                                <ref role="3Tt5mk" to="zaxg:2vPZMAmYEOB" resolve="label" />
+                              </node>
+                            </node>
+                          </node>
+                          <node concept="3TrEf2" id="2vPZMAnBY$H" role="2OqNvi">
+                            <ref role="3Tt5mk" to="zaxg:2vPZMAnBVHD" resolve="icon" />
                           </node>
                         </node>
-                        <node concept="3TrcHB" id="2vPZMAn9NaD" role="2OqNvi">
-                          <ref role="3TsBF5" to="zaxg:2vPZMAn8wb_" resolve="icon" />
+                        <node concept="3TrcHB" id="2vPZMAnBZd_" role="2OqNvi">
+                          <ref role="3TsBF5" to="zaxg:2vPZMAnBVdV" resolve="name" />
                         </node>
                       </node>
                     </node>
diff --git a/mps/modules/org.modelix.mps.react.muicomponents/models/org.modelix.mps.react.muicomponents.behavior.mps b/mps/modules/org.modelix.mps.react.muicomponents/models/org.modelix.mps.react.muicomponents.behavior.mps
index 509f96e4..923dac3b 100644
--- a/mps/modules/org.modelix.mps.react.muicomponents/models/org.modelix.mps.react.muicomponents.behavior.mps
+++ b/mps/modules/org.modelix.mps.react.muicomponents/models/org.modelix.mps.react.muicomponents.behavior.mps
@@ -7,7 +7,7 @@
     <devkit ref="fbc25dd2-5da4-483a-8b19-70928e1b62d7(jetbrains.mps.devkit.general-purpose)" />
   </languages>
   <imports>
-    <import index="zaxg" ref="r:c4183f14-1033-4ade-be7c-1beadb184134(org.modelix.mps.react.muicomponents.structure)" implicit="true" />
+    <import index="zaxg" ref="r:c4183f14-1033-4ade-be7c-1beadb184134(org.modelix.mps.react.muicomponents.structure)" />
     <import index="tpee" ref="r:00000000-0000-4000-0000-011c895902ca(jetbrains.mps.baseLanguage.structure)" implicit="true" />
     <import index="8xo1" ref="r:41b64586-29ed-47f5-b907-44be07261bbc(org.modelix.mps.react.structure)" implicit="true" />
   </imports>
@@ -27,6 +27,10 @@
       <concept id="1225194691553" name="jetbrains.mps.lang.behavior.structure.ThisNodeExpression" flags="nn" index="13iPFW" />
     </language>
     <language id="f3061a53-9226-4cc5-a443-f952ceaf5816" name="jetbrains.mps.baseLanguage">
+      <concept id="1215693861676" name="jetbrains.mps.baseLanguage.structure.BaseAssignmentExpression" flags="nn" index="d038R">
+        <child id="1068498886297" name="rValue" index="37vLTx" />
+        <child id="1068498886295" name="lValue" index="37vLTJ" />
+      </concept>
       <concept id="1197027756228" name="jetbrains.mps.baseLanguage.structure.DotExpression" flags="nn" index="2OqwBi">
         <child id="1197027771414" name="operand" index="2Oq$k0" />
         <child id="1197027833540" name="operation" index="2OqNvi" />
@@ -34,11 +38,18 @@
       <concept id="1137021947720" name="jetbrains.mps.baseLanguage.structure.ConceptFunction" flags="in" index="2VMwT0">
         <child id="1137022507850" name="body" index="2VODD2" />
       </concept>
+      <concept id="1070475926800" name="jetbrains.mps.baseLanguage.structure.StringLiteral" flags="nn" index="Xl_RD">
+        <property id="1070475926801" name="value" index="Xl_RC" />
+      </concept>
       <concept id="1070534644030" name="jetbrains.mps.baseLanguage.structure.BooleanType" flags="in" index="10P_77" />
+      <concept id="1068431474542" name="jetbrains.mps.baseLanguage.structure.VariableDeclaration" flags="ng" index="33uBYm">
+        <child id="1068431790190" name="initializer" index="33vP2m" />
+      </concept>
       <concept id="1068498886296" name="jetbrains.mps.baseLanguage.structure.VariableReference" flags="nn" index="37vLTw">
         <reference id="1068581517664" name="variableDeclaration" index="3cqZAo" />
       </concept>
       <concept id="1068498886292" name="jetbrains.mps.baseLanguage.structure.ParameterDeclaration" flags="ir" index="37vLTG" />
+      <concept id="1068498886294" name="jetbrains.mps.baseLanguage.structure.AssignmentExpression" flags="nn" index="37vLTI" />
       <concept id="4972933694980447171" name="jetbrains.mps.baseLanguage.structure.BaseVariableDeclaration" flags="ng" index="19Szcq">
         <child id="5680397130376446158" name="type" index="1tU5fm" />
       </concept>
@@ -56,6 +67,10 @@
       <concept id="1068580320020" name="jetbrains.mps.baseLanguage.structure.IntegerConstant" flags="nn" index="3cmrfG">
         <property id="1068580320021" name="value" index="3cmrfH" />
       </concept>
+      <concept id="1068581242864" name="jetbrains.mps.baseLanguage.structure.LocalVariableDeclarationStatement" flags="nn" index="3cpWs8">
+        <child id="1068581242865" name="localVariableDeclaration" index="3cpWs9" />
+      </concept>
+      <concept id="1068581242863" name="jetbrains.mps.baseLanguage.structure.LocalVariableDeclaration" flags="nr" index="3cpWsn" />
       <concept id="1081506762703" name="jetbrains.mps.baseLanguage.structure.GreaterThanExpression" flags="nn" index="3eOSWO" />
       <concept id="1081773326031" name="jetbrains.mps.baseLanguage.structure.BinaryOperation" flags="nn" index="3uHJSO">
         <child id="1081773367579" name="rightExpression" index="3uHU7w" />
@@ -67,9 +82,22 @@
       <concept id="1146644602865" name="jetbrains.mps.baseLanguage.structure.PublicVisibility" flags="nn" index="3Tm1VV" />
     </language>
     <language id="7866978e-a0f0-4cc7-81bc-4d213d9375e1" name="jetbrains.mps.lang.smodel">
+      <concept id="4705942098322467729" name="jetbrains.mps.lang.smodel.structure.EnumMemberReference" flags="ng" index="21nZrQ">
+        <reference id="4705942098322467736" name="decl" index="21nZrZ" />
+      </concept>
+      <concept id="1140725362528" name="jetbrains.mps.lang.smodel.structure.Link_SetTargetOperation" flags="nn" index="2oxUTD">
+        <child id="1140725362529" name="linkTarget" index="2oxUTC" />
+      </concept>
+      <concept id="1138661924179" name="jetbrains.mps.lang.smodel.structure.Property_SetOperation" flags="nn" index="tyxLq">
+        <child id="1138662048170" name="value" index="tz02z" />
+      </concept>
+      <concept id="1138757581985" name="jetbrains.mps.lang.smodel.structure.Link_SetNewChildOperation" flags="nn" index="zfrQC" />
       <concept id="1138055754698" name="jetbrains.mps.lang.smodel.structure.SNodeType" flags="in" index="3Tqbb2">
         <reference id="1138405853777" name="concept" index="ehGHo" />
       </concept>
+      <concept id="1138056022639" name="jetbrains.mps.lang.smodel.structure.SPropertyAccess" flags="nn" index="3TrcHB">
+        <reference id="1138056395725" name="property" index="3TsBF5" />
+      </concept>
       <concept id="1138056143562" name="jetbrains.mps.lang.smodel.structure.SLinkAccess" flags="nn" index="3TrEf2">
         <reference id="1138056516764" name="link" index="3Tt5mk" />
       </concept>
@@ -147,7 +175,7 @@
     </node>
   </node>
   <node concept="13h7C7" id="2vPZMAnsysh">
-    <ref role="13h7C2" to="zaxg:2vPZMAnsysd" resolve="IContainerComponent" />
+    <ref role="13h7C2" to="zaxg:2vPZMAnsysd" resolve="IContainerMultiComponent" />
     <node concept="13hLZK" id="2vPZMAnsysi" role="13h7CW">
       <node concept="3clFbS" id="2vPZMAnsysj" role="2VODD2" />
     </node>
@@ -184,5 +212,104 @@
       <node concept="3Tm1VV" id="2vPZMAnsysV" role="1B3o_S" />
     </node>
   </node>
+  <node concept="13h7C7" id="2vPZMAn_p7C">
+    <ref role="13h7C2" to="zaxg:2vPZMAmDmtP" resolve="Label" />
+    <node concept="13hLZK" id="2vPZMAn_p7D" role="13h7CW">
+      <node concept="3clFbS" id="2vPZMAn_p7E" role="2VODD2">
+        <node concept="3clFbF" id="2vPZMAn_p7W" role="3cqZAp">
+          <node concept="2OqwBi" id="2vPZMAn_pBw" role="3clFbG">
+            <node concept="2OqwBi" id="2vPZMAn_piU" role="2Oq$k0">
+              <node concept="13iPFW" id="2vPZMAn_p7V" role="2Oq$k0" />
+              <node concept="3TrcHB" id="2vPZMAn_ptB" role="2OqNvi">
+                <ref role="3TsBF5" to="zaxg:2vPZMAn_7No" resolve="style" />
+              </node>
+            </node>
+            <node concept="tyxLq" id="2vPZMAn_pLg" role="2OqNvi">
+              <node concept="21nZrQ" id="2vPZMAn_pLS" role="tz02z">
+                <ref role="21nZrZ" to="zaxg:2vPZMAn_7Nm" resolve="plain" />
+              </node>
+            </node>
+          </node>
+        </node>
+      </node>
+    </node>
+  </node>
+  <node concept="13h7C7" id="2vPZMAnEJvN">
+    <ref role="13h7C2" to="zaxg:2vPZMAnBVdN" resolve="Accordion" />
+    <node concept="13hLZK" id="2vPZMAnEJvO" role="13h7CW">
+      <node concept="3clFbS" id="2vPZMAnEJvP" role="2VODD2">
+        <node concept="3cpWs8" id="2vPZMAnEOb$" role="3cqZAp">
+          <node concept="3cpWsn" id="2vPZMAnEOb_" role="3cpWs9">
+            <property role="TrG5h" value="i" />
+            <node concept="3Tqbb2" id="2vPZMAnEObg" role="1tU5fm">
+              <ref role="ehGHo" to="zaxg:2vPZMAnBVdU" resolve="Icon" />
+            </node>
+            <node concept="2OqwBi" id="2vPZMAnEObA" role="33vP2m">
+              <node concept="2OqwBi" id="2vPZMAnEObB" role="2Oq$k0">
+                <node concept="13iPFW" id="2vPZMAnEObC" role="2Oq$k0" />
+                <node concept="3TrEf2" id="2vPZMAnEObD" role="2OqNvi">
+                  <ref role="3Tt5mk" to="zaxg:2vPZMAnEJvM" resolve="icon" />
+                </node>
+              </node>
+              <node concept="zfrQC" id="2vPZMAnEObE" role="2OqNvi" />
+            </node>
+          </node>
+        </node>
+        <node concept="3clFbF" id="2vPZMAnENrp" role="3cqZAp">
+          <node concept="37vLTI" id="2vPZMAnEPKJ" role="3clFbG">
+            <node concept="2OqwBi" id="2vPZMAnEOo7" role="37vLTJ">
+              <node concept="37vLTw" id="2vPZMAnEObF" role="2Oq$k0">
+                <ref role="3cqZAo" node="2vPZMAnEOb_" resolve="i" />
+              </node>
+              <node concept="3TrcHB" id="2vPZMAnEOvQ" role="2OqNvi">
+                <ref role="3TsBF5" to="zaxg:2vPZMAnBVdV" resolve="name" />
+              </node>
+            </node>
+            <node concept="Xl_RD" id="2vPZMAnENhx" role="37vLTx">
+              <property role="Xl_RC" value="mui.icons.ExpandMore" />
+            </node>
+          </node>
+        </node>
+      </node>
+    </node>
+  </node>
+  <node concept="13h7C7" id="2vPZMAnIaZk">
+    <ref role="13h7C2" to="zaxg:2vPZMAnIaRU" resolve="IContainerSingleComponent" />
+    <node concept="13i0hz" id="2vPZMAnIaZB" role="13h7CS">
+      <property role="13i0it" value="true" />
+      <property role="TrG5h" value="wrap" />
+      <ref role="13i0hy" node="2vPZMAnsyqb" resolve="wrap" />
+      <node concept="3clFbS" id="2vPZMAnIaZC" role="3clF47">
+        <node concept="3clFbF" id="2vPZMAnIaZD" role="3cqZAp">
+          <node concept="2OqwBi" id="2vPZMAnIaZE" role="3clFbG">
+            <node concept="2OqwBi" id="2vPZMAnIaZF" role="2Oq$k0">
+              <node concept="13iPFW" id="2vPZMAnIaZG" role="2Oq$k0" />
+              <node concept="3TrEf2" id="2vPZMAnIbyh" role="2OqNvi">
+                <ref role="3Tt5mk" to="zaxg:2vPZMAnIaRX" resolve="child" />
+              </node>
+            </node>
+            <node concept="2oxUTD" id="2vPZMAnIc4u" role="2OqNvi">
+              <node concept="37vLTw" id="2vPZMAnIc5L" role="2oxUTC">
+                <ref role="3cqZAo" node="2vPZMAnIaZK" resolve="wrapped" />
+              </node>
+            </node>
+          </node>
+        </node>
+      </node>
+      <node concept="37vLTG" id="2vPZMAnIaZK" role="3clF46">
+        <property role="TrG5h" value="wrapped" />
+        <node concept="3Tqbb2" id="2vPZMAnIaZL" role="1tU5fm">
+          <ref role="ehGHo" to="8xo1:7GLg2tFqfT1" resolve="IReactComponent" />
+        </node>
+      </node>
+      <node concept="3Tqbb2" id="2vPZMAnIaZM" role="3clF45">
+        <ref role="ehGHo" to="8xo1:7GLg2tFqfT1" resolve="IReactComponent" />
+      </node>
+      <node concept="3Tm1VV" id="2vPZMAnIaZN" role="1B3o_S" />
+    </node>
+    <node concept="13hLZK" id="2vPZMAnIaZl" role="13h7CW">
+      <node concept="3clFbS" id="2vPZMAnIaZm" role="2VODD2" />
+    </node>
+  </node>
 </model>
 
diff --git a/mps/modules/org.modelix.mps.react.muicomponents/models/org.modelix.mps.react.muicomponents.editor.mps b/mps/modules/org.modelix.mps.react.muicomponents/models/org.modelix.mps.react.muicomponents.editor.mps
index d6df4b62..e3d1a9dd 100644
--- a/mps/modules/org.modelix.mps.react.muicomponents/models/org.modelix.mps.react.muicomponents.editor.mps
+++ b/mps/modules/org.modelix.mps.react.muicomponents/models/org.modelix.mps.react.muicomponents.editor.mps
@@ -116,7 +116,7 @@
       <node concept="2iRfu4" id="2vPZMAmvsgz" role="2iSdaV" />
       <node concept="PMmxH" id="2vPZMAmvsgv" role="3EZMnx">
         <ref role="PMmxG" to="tpco:2wZex4PafBj" resolve="alias" />
-        <ref role="1k5W1q" to="vpip:2vPZMAmxCQO" resolve="RKeyword" />
+        <ref role="1k5W1q" to="vpip:2vPZMAnOoz_" resolve="RComponent" />
       </node>
       <node concept="3F1sOY" id="2vPZMAmvsgA" role="3EZMnx">
         <ref role="1NtTu8" to="zaxg:2vPZMAmvsgs" resolve="data" />
@@ -157,7 +157,25 @@
       <node concept="2iRfu4" id="2vPZMAmDmtX" role="2iSdaV" />
       <node concept="PMmxH" id="2vPZMAmDmtY" role="3EZMnx">
         <ref role="PMmxG" to="tpco:2wZex4PafBj" resolve="alias" />
-        <ref role="1k5W1q" to="vpip:2vPZMAmxCQO" resolve="RKeyword" />
+        <ref role="1k5W1q" to="vpip:2vPZMAnOoz_" resolve="RComponent" />
+      </node>
+      <node concept="3F0ifn" id="2vPZMAn_7Nq" role="3EZMnx">
+        <property role="3F0ifm" value="[" />
+        <node concept="11L4FC" id="2vPZMAn_7Ny" role="3F10Kt">
+          <property role="VOm3f" value="true" />
+        </node>
+        <node concept="11LMrY" id="2vPZMAn_7N$" role="3F10Kt">
+          <property role="VOm3f" value="true" />
+        </node>
+      </node>
+      <node concept="3F0A7n" id="2vPZMAn_7Nw" role="3EZMnx">
+        <ref role="1NtTu8" to="zaxg:2vPZMAn_7No" resolve="style" />
+      </node>
+      <node concept="3F0ifn" id="2vPZMAn_7Nt" role="3EZMnx">
+        <property role="3F0ifm" value="]" />
+        <node concept="11L4FC" id="2vPZMAn_7NA" role="3F10Kt">
+          <property role="VOm3f" value="true" />
+        </node>
       </node>
       <node concept="3F1sOY" id="2vPZMAmDmtZ" role="3EZMnx">
         <ref role="1NtTu8" to="zaxg:2vPZMAmDsnU" resolve="value" />
@@ -172,7 +190,7 @@
         <node concept="2iRfu4" id="2vPZMAmEWd4" role="2iSdaV" />
         <node concept="PMmxH" id="2vPZMAmEWd2" role="3EZMnx">
           <ref role="PMmxG" to="tpco:2wZex4PafBj" resolve="alias" />
-          <ref role="1k5W1q" to="vpip:2vPZMAmxCQO" resolve="RKeyword" />
+          <ref role="1k5W1q" to="vpip:2vPZMAnOoz_" resolve="RComponent" />
         </node>
         <node concept="3F0ifn" id="2vPZMAmEWd6" role="3EZMnx">
           <property role="3F0ifm" value="{" />
@@ -200,7 +218,7 @@
         <node concept="2iRfu4" id="2vPZMAmGCtr" role="2iSdaV" />
         <node concept="PMmxH" id="2vPZMAmGCts" role="3EZMnx">
           <ref role="PMmxG" to="tpco:2wZex4PafBj" resolve="alias" />
-          <ref role="1k5W1q" to="vpip:2vPZMAmxCQO" resolve="RKeyword" />
+          <ref role="1k5W1q" to="vpip:2vPZMAnOoz_" resolve="RComponent" />
         </node>
         <node concept="3F0A7n" id="2vPZMAmGN8z" role="3EZMnx">
           <property role="1O74Pk" value="true" />
@@ -231,7 +249,7 @@
       <node concept="2iRfu4" id="2vPZMAmJaEQ" role="2iSdaV" />
       <node concept="3F0ifn" id="2vPZMAmJaEN" role="3EZMnx">
         <property role="3F0ifm" value="header" />
-        <ref role="1k5W1q" to="vpip:2vPZMAmxCQO" resolve="RKeyword" />
+        <ref role="1k5W1q" to="vpip:2vPZMAnOoz_" resolve="RComponent" />
       </node>
       <node concept="3F0ifn" id="2vPZMAmJaES" role="3EZMnx">
         <property role="3F0ifm" value="&lt;" />
@@ -263,7 +281,7 @@
     <ref role="1XX52x" to="zaxg:2vPZMAmMlUm" resolve="Space" />
     <node concept="PMmxH" id="2vPZMAmMpdT" role="2wV5jI">
       <ref role="PMmxG" to="tpco:2wZex4PafBj" resolve="alias" />
-      <ref role="1k5W1q" to="vpip:2vPZMAmxCQO" resolve="RKeyword" />
+      <ref role="1k5W1q" to="vpip:2vPZMAnOoz_" resolve="RComponent" />
     </node>
   </node>
   <node concept="24kQdi" id="2vPZMAmYEOd">
@@ -272,7 +290,7 @@
       <node concept="2iRfu4" id="2vPZMAmYEOh" role="2iSdaV" />
       <node concept="PMmxH" id="2vPZMAmYEOf" role="3EZMnx">
         <ref role="PMmxG" to="tpco:2wZex4PafBj" resolve="alias" />
-        <ref role="1k5W1q" to="vpip:2vPZMAmxCQO" resolve="RKeyword" />
+        <ref role="1k5W1q" to="vpip:2vPZMAnOoz_" resolve="RComponent" />
       </node>
       <node concept="3F0ifn" id="2vPZMAmYEOj" role="3EZMnx">
         <property role="3F0ifm" value="[" />
@@ -300,7 +318,7 @@
       <node concept="2iRfu4" id="2vPZMAmYWc6" role="2iSdaV" />
       <node concept="PMmxH" id="2vPZMAmYWc4" role="3EZMnx">
         <ref role="PMmxG" to="tpco:2wZex4PafBj" resolve="alias" />
-        <ref role="1k5W1q" to="vpip:2vPZMAmxCQO" resolve="RKeyword" />
+        <ref role="1k5W1q" to="vpip:2vPZMAnOoz_" resolve="RComponent" />
       </node>
       <node concept="3F1sOY" id="2vPZMAmYWc8" role="3EZMnx">
         <ref role="1NtTu8" to="zaxg:2vPZMAmYEOB" resolve="label" />
@@ -316,7 +334,7 @@
       <node concept="2iRfu4" id="2vPZMAn8wHb" role="2iSdaV" />
       <node concept="PMmxH" id="2vPZMAn8wHc" role="3EZMnx">
         <ref role="PMmxG" to="tpco:2wZex4PafBj" resolve="alias" />
-        <ref role="1k5W1q" to="vpip:2vPZMAmxCQO" resolve="RKeyword" />
+        <ref role="1k5W1q" to="vpip:2vPZMAnOoz_" resolve="RComponent" />
       </node>
       <node concept="3F0ifn" id="2vPZMAn8wHd" role="3EZMnx">
         <property role="3F0ifm" value="[" />
@@ -327,25 +345,8 @@
           <property role="VOm3f" value="true" />
         </node>
       </node>
-      <node concept="3F0A7n" id="2vPZMAn8wHg" role="3EZMnx">
-        <ref role="1NtTu8" to="zaxg:2vPZMAn8wb_" resolve="icon" />
-        <node concept="OXEIz" id="2vPZMAn8Fze" role="P5bDN">
-          <node concept="PvTIS" id="2vPZMAn8Fzf" role="OY2wv">
-            <node concept="MLZmj" id="2vPZMAn8Fzg" role="PvTIR">
-              <node concept="3clFbS" id="2vPZMAn8Fzh" role="2VODD2">
-                <node concept="3clFbF" id="2vPZMAn8FLU" role="3cqZAp">
-                  <node concept="2YIFZM" id="2vPZMAn8FN_" role="3clFbG">
-                    <ref role="37wK5l" to="vpip:2vPZMAn8yu1" resolve="listOfReactComponentNamesStartingWith" />
-                    <ref role="1Pybhc" to="vpip:2vPZMAn8x2M" resolve="ReactComponentProvider" />
-                    <node concept="Xl_RD" id="2vPZMAn8FP3" role="37wK5m">
-                      <property role="Xl_RC" value="mui.icons" />
-                    </node>
-                  </node>
-                </node>
-              </node>
-            </node>
-          </node>
-        </node>
+      <node concept="3F1sOY" id="2vPZMAnBVXu" role="3EZMnx">
+        <ref role="1NtTu8" to="zaxg:2vPZMAnBVHD" resolve="icon" />
       </node>
       <node concept="3F0ifn" id="2vPZMAn8wHh" role="3EZMnx">
         <property role="3F0ifm" value="]" />
@@ -435,5 +436,122 @@
       </node>
     </node>
   </node>
+  <node concept="24kQdi" id="2vPZMAnBVdW">
+    <ref role="1XX52x" to="zaxg:2vPZMAnBVdU" resolve="Icon" />
+    <node concept="3EZMnI" id="2vPZMAnBVdZ" role="2wV5jI">
+      <node concept="2iRfu4" id="2vPZMAnBVe0" role="2iSdaV" />
+      <node concept="PMmxH" id="2vPZMAnBVdY" role="3EZMnx">
+        <ref role="PMmxG" to="tpco:2wZex4PafBj" resolve="alias" />
+        <ref role="1k5W1q" to="vpip:2vPZMAmxCQO" resolve="RKeyword" />
+      </node>
+      <node concept="3F0ifn" id="2vPZMAnBVe2" role="3EZMnx">
+        <property role="3F0ifm" value="/" />
+        <node concept="11L4FC" id="2vPZMAnBVe8" role="3F10Kt">
+          <property role="VOm3f" value="true" />
+        </node>
+        <node concept="11LMrY" id="2vPZMAnBVea" role="3F10Kt">
+          <property role="VOm3f" value="true" />
+        </node>
+      </node>
+      <node concept="3F0A7n" id="2vPZMAnBVed" role="3EZMnx">
+        <ref role="1NtTu8" to="zaxg:2vPZMAnBVdV" resolve="name" />
+        <ref role="1k5W1q" to="vpip:2vPZMAnwE1f" resolve="RHTMLOrJsOrCSS" />
+        <node concept="OXEIz" id="2vPZMAnBVtQ" role="P5bDN">
+          <node concept="PvTIS" id="2vPZMAnBVtR" role="OY2wv">
+            <node concept="MLZmj" id="2vPZMAnBVtS" role="PvTIR">
+              <node concept="3clFbS" id="2vPZMAnBVtT" role="2VODD2">
+                <node concept="3clFbF" id="2vPZMAnBVtU" role="3cqZAp">
+                  <node concept="2YIFZM" id="2vPZMAnBVtV" role="3clFbG">
+                    <ref role="37wK5l" to="vpip:2vPZMAn8yu1" resolve="listOfReactComponentNamesStartingWith" />
+                    <ref role="1Pybhc" to="vpip:2vPZMAn8x2M" resolve="ReactComponentProvider" />
+                    <node concept="Xl_RD" id="2vPZMAnBVtW" role="37wK5m">
+                      <property role="Xl_RC" value="mui.icons" />
+                    </node>
+                  </node>
+                </node>
+              </node>
+            </node>
+          </node>
+        </node>
+      </node>
+      <node concept="3F0ifn" id="2vPZMAnBVe5" role="3EZMnx">
+        <property role="3F0ifm" value="/" />
+        <node concept="11L4FC" id="2vPZMAnBVe7" role="3F10Kt">
+          <property role="VOm3f" value="true" />
+        </node>
+      </node>
+    </node>
+  </node>
+  <node concept="24kQdi" id="2vPZMAnEQ4m">
+    <ref role="1XX52x" to="zaxg:2vPZMAnBVdN" resolve="Accordion" />
+    <node concept="3EZMnI" id="2vPZMAnEQ4p" role="2wV5jI">
+      <node concept="2iRfu4" id="2vPZMAnEQ4q" role="2iSdaV" />
+      <node concept="PMmxH" id="2vPZMAnEQ4o" role="3EZMnx">
+        <ref role="PMmxG" to="tpco:2wZex4PafBj" resolve="alias" />
+        <ref role="1k5W1q" to="vpip:2vPZMAnOoz_" resolve="RComponent" />
+      </node>
+      <node concept="3EZMnI" id="2vPZMAnEQ4$" role="3EZMnx">
+        <node concept="2iRkQZ" id="2vPZMAnEQ4_" role="2iSdaV" />
+        <node concept="3EZMnI" id="2vPZMAnEQ4K" role="3EZMnx">
+          <node concept="2iRfu4" id="2vPZMAnEQ4L" role="2iSdaV" />
+          <node concept="3F0ifn" id="2vPZMAnEQ4M" role="3EZMnx">
+            <property role="3F0ifm" value="icon:   " />
+            <ref role="1k5W1q" to="vpip:2vPZMAnQeIL" resolve="RComponentSub" />
+          </node>
+          <node concept="3F1sOY" id="2vPZMAnEQ4P" role="3EZMnx">
+            <ref role="1NtTu8" to="zaxg:2vPZMAnEJvM" resolve="icon" />
+          </node>
+        </node>
+        <node concept="3EZMnI" id="2vPZMAnEQ4y" role="3EZMnx">
+          <node concept="2iRfu4" id="2vPZMAnEQ4z" role="2iSdaV" />
+          <node concept="3F0ifn" id="2vPZMAnEQ4s" role="3EZMnx">
+            <property role="3F0ifm" value="summary:" />
+            <ref role="1k5W1q" to="vpip:2vPZMAnQeIL" resolve="RComponentSub" />
+          </node>
+          <node concept="3F1sOY" id="2vPZMAnEQ4v" role="3EZMnx">
+            <ref role="1NtTu8" to="zaxg:2vPZMAnBVdP" resolve="summary" />
+          </node>
+        </node>
+        <node concept="3EZMnI" id="2vPZMAnEQ4A" role="3EZMnx">
+          <node concept="2iRfu4" id="2vPZMAnEQ4B" role="2iSdaV" />
+          <node concept="3F0ifn" id="2vPZMAnEQ4C" role="3EZMnx">
+            <property role="3F0ifm" value="details:" />
+            <ref role="1k5W1q" to="vpip:2vPZMAnQeIL" resolve="RComponentSub" />
+          </node>
+          <node concept="3F2HdR" id="2vPZMAnEQ4F" role="3EZMnx">
+            <ref role="1NtTu8" to="zaxg:2vPZMAmEVPK" resolve="children" />
+            <node concept="2iRkQZ" id="2vPZMAnEQ4I" role="2czzBx" />
+          </node>
+        </node>
+      </node>
+    </node>
+  </node>
+  <node concept="24kQdi" id="2vPZMAnIc9d">
+    <ref role="1XX52x" to="zaxg:2vPZMAnIaRS" resolve="Box" />
+    <node concept="3EZMnI" id="2vPZMAnK4v$" role="2wV5jI">
+      <node concept="2iRkQZ" id="2vPZMAnK4v_" role="2iSdaV" />
+      <node concept="3EZMnI" id="2vPZMAnIc9k" role="3EZMnx">
+        <node concept="2iRfu4" id="2vPZMAnIc9l" role="2iSdaV" />
+        <node concept="PMmxH" id="2vPZMAnIc9j" role="3EZMnx">
+          <ref role="PMmxG" to="tpco:2wZex4PafBj" resolve="alias" />
+          <ref role="1k5W1q" to="vpip:2vPZMAnOoz_" resolve="RComponent" />
+        </node>
+        <node concept="3F0ifn" id="2vPZMAnIc9n" role="3EZMnx">
+          <property role="3F0ifm" value="{" />
+          <ref role="1k5W1q" to="vpip:2vPZMAmxCQO" resolve="RKeyword" />
+        </node>
+      </node>
+      <node concept="3EZMnI" id="2vPZMAnK4vB" role="3EZMnx">
+        <node concept="2iRfu4" id="2vPZMAnK4vC" role="2iSdaV" />
+        <node concept="3XFhqQ" id="2vPZMAnK4vE" role="3EZMnx" />
+        <node concept="3F1sOY" id="2vPZMAnIc9q" role="3EZMnx">
+          <ref role="1NtTu8" to="zaxg:2vPZMAnIaRX" resolve="child" />
+        </node>
+      </node>
+      <node concept="3F0ifn" id="2vPZMAnK4vA" role="3EZMnx">
+        <property role="3F0ifm" value="}" />
+      </node>
+    </node>
+  </node>
 </model>
 
diff --git a/mps/modules/org.modelix.mps.react.muicomponents/models/org.modelix.mps.react.muicomponents.structure.mps b/mps/modules/org.modelix.mps.react.muicomponents/models/org.modelix.mps.react.muicomponents.structure.mps
index 62e8e4f1..34170772 100644
--- a/mps/modules/org.modelix.mps.react.muicomponents/models/org.modelix.mps.react.muicomponents.structure.mps
+++ b/mps/modules/org.modelix.mps.react.muicomponents/models/org.modelix.mps.react.muicomponents.structure.mps
@@ -13,6 +13,15 @@
   </imports>
   <registry>
     <language id="c72da2b9-7cce-4447-8389-f407dc1158b7" name="jetbrains.mps.lang.structure">
+      <concept id="3348158742936976480" name="jetbrains.mps.lang.structure.structure.EnumerationMemberDeclaration" flags="ng" index="25R33">
+        <property id="1421157252384165432" name="memberId" index="3tVfz5" />
+      </concept>
+      <concept id="3348158742936976479" name="jetbrains.mps.lang.structure.structure.EnumerationDeclaration" flags="ng" index="25R3W">
+        <child id="3348158742936976577" name="members" index="25R1y" />
+      </concept>
+      <concept id="1082978164218" name="jetbrains.mps.lang.structure.structure.DataTypeDeclaration" flags="ng" index="AxPO6">
+        <property id="7791109065626895363" name="datatypeId" index="3F6X1D" />
+      </concept>
       <concept id="1169125787135" name="jetbrains.mps.lang.structure.structure.AbstractConceptDeclaration" flags="ig" index="PkWjJ">
         <property id="6714410169261853888" name="conceptId" index="EcuMT" />
         <property id="4628067390765956802" name="abstract" index="R5$K7" />
@@ -97,6 +106,11 @@
     <node concept="PrWs8" id="2vPZMAmDs9r" role="PzmwI">
       <ref role="PrY4T" node="2vPZMAmEVPG" resolve="IMUIComponent" />
     </node>
+    <node concept="1TJgyi" id="2vPZMAn_7No" role="1TKVEl">
+      <property role="IQ2nx" value="2879488090875133144" />
+      <property role="TrG5h" value="style" />
+      <ref role="AX2Wp" node="2vPZMAn_7Nl" resolve="LabelStyle" />
+    </node>
   </node>
   <node concept="1TIwiD" id="2vPZMAmEVPF">
     <property role="EcuMT" value="2879488090859879787" />
@@ -118,7 +132,7 @@
     <property role="EcuMT" value="2879488090859879790" />
     <property role="TrG5h" value="IMUILayoutComponent" />
     <node concept="PrWs8" id="2vPZMAmEVPJ" role="PrDN$">
-      <ref role="PrY4T" node="2vPZMAnsysd" resolve="IContainerComponent" />
+      <ref role="PrY4T" node="2vPZMAnsysd" resolve="IContainerMultiComponent" />
     </node>
   </node>
   <node concept="1TIwiD" id="2vPZMAmGCtk">
@@ -217,10 +231,12 @@
     <property role="TrG5h" value="ButtonLabelIcon" />
     <property role="34LRSv" value="icon" />
     <ref role="1TJDcQ" node="2vPZMAmYEOa" resolve="ButtonLabel" />
-    <node concept="1TJgyi" id="2vPZMAn8wb_" role="1TKVEl">
-      <property role="IQ2nx" value="2879488090867630821" />
-      <property role="TrG5h" value="icon" />
-      <ref role="AX2Wp" to="tpck:fKAOsGN" resolve="string" />
+    <node concept="1TJgyj" id="2vPZMAnBVHD" role="1TKVEi">
+      <property role="IQ2ns" value="2879488090875870057" />
+      <property role="20lmBu" value="fLJjDmT/aggregation" />
+      <property role="20kJfa" value="icon" />
+      <property role="20lbJX" value="fLJekj4/_1" />
+      <ref role="20lvS9" node="2vPZMAnBVdU" resolve="Icon" />
     </node>
   </node>
   <node concept="1TIwiD" id="2vPZMAneuaB">
@@ -242,7 +258,7 @@
   </node>
   <node concept="PlHQZ" id="2vPZMAnsysd">
     <property role="EcuMT" value="2879488090872882957" />
-    <property role="TrG5h" value="IContainerComponent" />
+    <property role="TrG5h" value="IContainerMultiComponent" />
     <node concept="PrWs8" id="2vPZMAnsyse" role="PrDN$">
       <ref role="PrY4T" node="2vPZMAmEVPG" resolve="IMUIComponent" />
     </node>
@@ -257,5 +273,76 @@
       <ref role="20lvS9" to="8xo1:7GLg2tFqfT1" resolve="IReactComponent" />
     </node>
   </node>
+  <node concept="25R3W" id="2vPZMAn_7Nl">
+    <property role="3F6X1D" value="2879488090875133141" />
+    <property role="TrG5h" value="LabelStyle" />
+    <node concept="25R33" id="2vPZMAn_7Nm" role="25R1y">
+      <property role="3tVfz5" value="2879488090875133142" />
+      <property role="TrG5h" value="plain" />
+    </node>
+    <node concept="25R33" id="2vPZMAn_7Nn" role="25R1y">
+      <property role="3tVfz5" value="2879488090875133143" />
+      <property role="TrG5h" value="bold" />
+    </node>
+  </node>
+  <node concept="1TIwiD" id="2vPZMAnBVdN">
+    <property role="EcuMT" value="2879488090875868019" />
+    <property role="TrG5h" value="Accordion" />
+    <property role="34LRSv" value="accordion" />
+    <ref role="1TJDcQ" to="tpck:gw2VY9q" />
+    <node concept="PrWs8" id="2vPZMAnBVdO" role="PzmwI">
+      <ref role="PrY4T" node="2vPZMAnsysd" resolve="IContainerMultiComponent" />
+    </node>
+    <node concept="1TJgyj" id="2vPZMAnEJvM" role="1TKVEi">
+      <property role="IQ2ns" value="2879488090876606450" />
+      <property role="20lmBu" value="fLJjDmT/aggregation" />
+      <property role="20kJfa" value="icon" />
+      <property role="20lbJX" value="fLJekj4/_1" />
+      <ref role="20lvS9" node="2vPZMAnBVdU" resolve="Icon" />
+    </node>
+    <node concept="1TJgyj" id="2vPZMAnBVdP" role="1TKVEi">
+      <property role="IQ2ns" value="2879488090875868021" />
+      <property role="20lmBu" value="fLJjDmT/aggregation" />
+      <property role="20kJfa" value="summary" />
+      <property role="20lbJX" value="fLJekj4/_1" />
+      <ref role="20lvS9" to="8xo1:7GLg2tFqfT1" resolve="IReactComponent" />
+    </node>
+  </node>
+  <node concept="1TIwiD" id="2vPZMAnBVdU">
+    <property role="EcuMT" value="2879488090875868026" />
+    <property role="TrG5h" value="Icon" />
+    <property role="34LRSv" value="icon" />
+    <ref role="1TJDcQ" to="tpck:gw2VY9q" />
+    <node concept="1TJgyi" id="2vPZMAnBVdV" role="1TKVEl">
+      <property role="IQ2nx" value="2879488090875868027" />
+      <property role="TrG5h" value="name" />
+      <ref role="AX2Wp" to="tpck:fKAOsGN" resolve="string" />
+    </node>
+  </node>
+  <node concept="1TIwiD" id="2vPZMAnIaRS">
+    <property role="EcuMT" value="2879488090877505016" />
+    <property role="TrG5h" value="Box" />
+    <property role="34LRSv" value="box" />
+    <ref role="1TJDcQ" to="tpck:gw2VY9q" />
+    <node concept="PrWs8" id="2vPZMAnIc9c" role="PzmwI">
+      <ref role="PrY4T" node="2vPZMAnIaRU" resolve="IContainerSingleComponent" />
+    </node>
+  </node>
+  <node concept="PlHQZ" id="2vPZMAnIaRU">
+    <property role="EcuMT" value="2879488090877505018" />
+    <property role="TrG5h" value="IContainerSingleComponent" />
+    <node concept="1TJgyj" id="2vPZMAnIaRX" role="1TKVEi">
+      <property role="IQ2ns" value="2879488090877505021" />
+      <property role="20lmBu" value="fLJjDmT/aggregation" />
+      <property role="20kJfa" value="child" />
+      <ref role="20lvS9" to="8xo1:7GLg2tFqfT1" resolve="IReactComponent" />
+    </node>
+    <node concept="PrWs8" id="2vPZMAnIaRV" role="PrDN$">
+      <ref role="PrY4T" node="2vPZMAmEVPG" resolve="IMUIComponent" />
+    </node>
+    <node concept="PrWs8" id="2vPZMAnIaRW" role="PrDN$">
+      <ref role="PrY4T" node="2vPZMAnsypR" resolve="ICanWrap" />
+    </node>
+  </node>
 </model>
 
diff --git a/mps/modules/org.modelix.mps.react.muicomponents/org.modelix.mps.react.muicomponents.mpl b/mps/modules/org.modelix.mps.react.muicomponents/org.modelix.mps.react.muicomponents.mpl
index d61d3142..cd8bdc40 100644
--- a/mps/modules/org.modelix.mps.react.muicomponents/org.modelix.mps.react.muicomponents.mpl
+++ b/mps/modules/org.modelix.mps.react.muicomponents/org.modelix.mps.react.muicomponents.mpl
@@ -26,6 +26,7 @@
       <external-templates />
       <dependencies>
         <dependency reexport="false">dce965c2-af99-4a0c-9895-485700f46864(ReactDemoLanguage)</dependency>
+        <dependency reexport="false">ceab5195-25ea-4f22-9b92-103b95ca8c0c(jetbrains.mps.lang.core)</dependency>
       </dependencies>
       <languageVersions>
         <language slang="l:f3061a53-9226-4cc5-a443-f952ceaf5816:jetbrains.mps.baseLanguage" version="12" />
@@ -45,6 +46,7 @@
         <language slang="l:c7fb639f-be78-4307-89b0-b5959c3fa8c8:jetbrains.mps.lang.text" version="0" />
         <language slang="l:9ded098b-ad6a-4657-bfd9-48636cfe8bc3:jetbrains.mps.lang.traceable" version="0" />
         <language slang="l:67accce2-9676-4728-9e9c-8b15ea30d924:org.modelix.mps.react" version="0" />
+        <language slang="l:09a61cec-0c2d-4a90-b590-25e493b12f35:org.modelix.mps.react.muicomponents" version="0" />
       </languageVersions>
       <dependencyVersions>
         <module reference="3f233e7f-b8a6-46d2-a57f-795d56775243(Annotations)" version="0" />
diff --git a/mps/modules/org.modelix.mps.react/models/org.modelix.mps.react.editor.mps b/mps/modules/org.modelix.mps.react/models/org.modelix.mps.react.editor.mps
index 7b04d686..d5eab9af 100644
--- a/mps/modules/org.modelix.mps.react/models/org.modelix.mps.react.editor.mps
+++ b/mps/modules/org.modelix.mps.react/models/org.modelix.mps.react.editor.mps
@@ -13,6 +13,7 @@
     <import index="8xo1" ref="r:41b64586-29ed-47f5-b907-44be07261bbc(org.modelix.mps.react.structure)" />
     <import index="exr9" ref="1ed103c3-3aa6-49b7-9c21-6765ee11f224/java:jetbrains.mps.nodeEditor(MPS.Editor/)" />
     <import index="tpce" ref="r:00000000-0000-4000-0000-011c89590292(jetbrains.mps.lang.structure.structure)" />
+    <import index="z60i" ref="6354ebe7-c22a-4a0f-ac54-50b52ab9b065/java:java.awt(JDK/)" />
     <import index="tpck" ref="r:00000000-0000-4000-0000-011c89590288(jetbrains.mps.lang.core.structure)" implicit="true" />
     <import index="tpee" ref="r:00000000-0000-4000-0000-011c895902ca(jetbrains.mps.baseLanguage.structure)" implicit="true" />
     <import index="tp25" ref="r:00000000-0000-4000-0000-011c89590301(jetbrains.mps.lang.smodel.structure)" implicit="true" />
@@ -855,44 +856,32 @@
   </node>
   <node concept="24kQdi" id="1pvyisdcGK2">
     <ref role="1XX52x" to="8xo1:1pvyisdcGJV" resolve="ForEachComponent" />
-    <node concept="3EZMnI" id="1pvyisdcGK4" role="2wV5jI">
-      <node concept="3EZMnI" id="1pvyisdcGKd" role="3EZMnx">
-        <node concept="VPM3Z" id="1pvyisdcGKf" role="3F10Kt" />
-        <node concept="PMmxH" id="1pvyisdcGKn" role="3EZMnx">
-          <ref role="PMmxG" to="tpco:2wZex4PafBj" resolve="alias" />
-          <ref role="1k5W1q" node="2vPZMAmxCQO" resolve="RKeyword" />
-        </node>
-        <node concept="3F0A7n" id="1pvyisddSkW" role="3EZMnx">
-          <ref role="1NtTu8" to="tpck:h0TrG11" resolve="name" />
-        </node>
-        <node concept="3F0ifn" id="1pvyisdcGK$" role="3EZMnx">
-          <property role="3F0ifm" value="in" />
-          <ref role="1k5W1q" node="2vPZMAmxCQO" resolve="RKeyword" />
-        </node>
-        <node concept="3F1sOY" id="1pvyisdcGKR" role="3EZMnx">
-          <ref role="1NtTu8" to="8xo1:1pvyisdcGKI" resolve="input" />
-        </node>
-        <node concept="3F0ifn" id="1pvyisdcGL3" role="3EZMnx">
-          <property role="3F0ifm" value="{" />
-        </node>
-        <node concept="2iRfu4" id="1pvyisdcGKi" role="2iSdaV" />
+    <node concept="3EZMnI" id="1pvyisdcGKd" role="2wV5jI">
+      <node concept="VPM3Z" id="1pvyisdcGKf" role="3F10Kt" />
+      <node concept="PMmxH" id="1pvyisdcGKn" role="3EZMnx">
+        <ref role="PMmxG" to="tpco:2wZex4PafBj" resolve="alias" />
+        <ref role="1k5W1q" node="2vPZMAmxCQO" resolve="RKeyword" />
       </node>
-      <node concept="3EZMnI" id="1pvyisdcGLO" role="3EZMnx">
-        <node concept="VPM3Z" id="1pvyisdcGLQ" role="3F10Kt" />
-        <node concept="3XFhqQ" id="1pvyisdcGMa" role="3EZMnx" />
-        <node concept="3F1sOY" id="1pvyisdcGMg" role="3EZMnx">
-          <ref role="1NtTu8" to="8xo1:1pvyisdcGK0" resolve="component" />
-        </node>
-        <node concept="2iRfu4" id="1pvyisdcGLT" role="2iSdaV" />
+      <node concept="3F0A7n" id="1pvyisddSkW" role="3EZMnx">
+        <ref role="1NtTu8" to="tpck:h0TrG11" resolve="name" />
       </node>
-      <node concept="3EZMnI" id="1pvyisdcGLk" role="3EZMnx">
-        <node concept="VPM3Z" id="1pvyisdcGLm" role="3F10Kt" />
-        <node concept="3F0ifn" id="1pvyisdcGLo" role="3EZMnx">
-          <property role="3F0ifm" value="}" />
+      <node concept="3F0ifn" id="1pvyisdcGK$" role="3EZMnx">
+        <property role="3F0ifm" value="in" />
+        <ref role="1k5W1q" node="2vPZMAmxCQO" resolve="RKeyword" />
+      </node>
+      <node concept="3F1sOY" id="1pvyisdcGKR" role="3EZMnx">
+        <ref role="1NtTu8" to="8xo1:1pvyisdcGKI" resolve="input" />
+      </node>
+      <node concept="3F0ifn" id="1pvyisdcGL3" role="3EZMnx">
+        <property role="3F0ifm" value=":" />
+        <node concept="11L4FC" id="2vPZMAnNOE0" role="3F10Kt">
+          <property role="VOm3f" value="true" />
         </node>
-        <node concept="2iRfu4" id="1pvyisdcGLp" role="2iSdaV" />
       </node>
-      <node concept="2iRkQZ" id="1pvyisdcGKb" role="2iSdaV" />
+      <node concept="2iRfu4" id="1pvyisdcGKi" role="2iSdaV" />
+      <node concept="3F1sOY" id="1pvyisdcGMg" role="3EZMnx">
+        <ref role="1NtTu8" to="8xo1:1pvyisdcGK0" resolve="component" />
+      </node>
     </node>
   </node>
   <node concept="24kQdi" id="1pvyisddd6g">
@@ -912,8 +901,9 @@
     <node concept="3EZMnI" id="2ti6llKMteQ" role="2wV5jI">
       <node concept="3EZMnI" id="2ti6llKMteX" role="3EZMnx">
         <node concept="VPM3Z" id="2ti6llKMteZ" role="3F10Kt" />
-        <node concept="3F0ifn" id="2ti6llKMtf7" role="3EZMnx">
-          <property role="3F0ifm" value="when" />
+        <node concept="PMmxH" id="2vPZMAnKglm" role="3EZMnx">
+          <ref role="PMmxG" to="tpco:2wZex4PafBj" resolve="alias" />
+          <ref role="1k5W1q" node="2vPZMAmxCQO" resolve="RKeyword" />
         </node>
         <node concept="3F0ifn" id="2ti6llKMtfd" role="3EZMnx">
           <property role="3F0ifm" value="{" />
@@ -933,6 +923,7 @@
         <node concept="3XFhqQ" id="2ti6llKN8Q2" role="3EZMnx" />
         <node concept="3F0ifn" id="2ti6llKMSwE" role="3EZMnx">
           <property role="3F0ifm" value="else" />
+          <ref role="1k5W1q" node="2vPZMAmxCQO" resolve="RKeyword" />
         </node>
         <node concept="3F0ifn" id="2ti6llKMSx1" role="3EZMnx">
           <property role="3F0ifm" value="-&gt;" />
@@ -955,6 +946,10 @@
   <node concept="24kQdi" id="2ti6llKMSxe">
     <ref role="1XX52x" to="8xo1:2ti6llKMteI" resolve="WhenCase" />
     <node concept="3EZMnI" id="2ti6llKMSxg" role="2wV5jI">
+      <node concept="3F0ifn" id="2vPZMAnKN5W" role="3EZMnx">
+        <property role="3F0ifm" value="case" />
+        <ref role="1k5W1q" node="2vPZMAmxCQO" resolve="RKeyword" />
+      </node>
       <node concept="3F1sOY" id="2ti6llKMSxn" role="3EZMnx">
         <ref role="1NtTu8" to="8xo1:2ti6llKMteJ" resolve="condition" />
       </node>
@@ -1650,6 +1645,35 @@
         </node>
       </node>
     </node>
+    <node concept="14StLt" id="2vPZMAnOoz_" role="V601i">
+      <property role="TrG5h" value="RComponent" />
+      <node concept="Vb9p2" id="2vPZMAnOozA" role="3F10Kt">
+        <property role="Vbekb" value="g1_k_vY/BOLD" />
+      </node>
+      <node concept="VechU" id="2vPZMAnOozB" role="3F10Kt">
+        <node concept="1iSF2X" id="2vPZMAnOBl0" role="VblUZ">
+          <property role="1iTho6" value="1f77c4" />
+        </node>
+      </node>
+    </node>
+    <node concept="14StLt" id="2vPZMAnQeIL" role="V601i">
+      <property role="TrG5h" value="RComponentSub" />
+      <node concept="Vb9p2" id="2vPZMAnQeIM" role="3F10Kt" />
+      <node concept="VechU" id="2vPZMAnQeIN" role="3F10Kt">
+        <node concept="1iSF2X" id="2vPZMAnQeIO" role="VblUZ">
+          <property role="1iTho6" value="1f77c4" />
+        </node>
+      </node>
+    </node>
+    <node concept="14StLt" id="2vPZMAnFe33" role="V601i">
+      <property role="TrG5h" value="RSubKeyword" />
+      <node concept="Vb9p2" id="2vPZMAnFU24" role="3F10Kt" />
+      <node concept="VechU" id="2vPZMAnFe35" role="3F10Kt">
+        <node concept="1iSF2X" id="2vPZMAnFe36" role="VblUZ">
+          <property role="1iTho6" value="023E73" />
+        </node>
+      </node>
+    </node>
     <node concept="14StLt" id="2vPZMAmxCQV" role="V601i">
       <property role="TrG5h" value="RConcept" />
       <node concept="Vb9p2" id="2vPZMAmxCQW" role="3F10Kt">
diff --git a/mps/modules/org.modelix.mps.react/models/org.modelix.mps.react.structure.mps b/mps/modules/org.modelix.mps.react/models/org.modelix.mps.react.structure.mps
index 58820c3e..4bcbc4ae 100644
--- a/mps/modules/org.modelix.mps.react/models/org.modelix.mps.react.structure.mps
+++ b/mps/modules/org.modelix.mps.react/models/org.modelix.mps.react.structure.mps
@@ -369,7 +369,7 @@
   <node concept="1TIwiD" id="1pvyisdcGJV">
     <property role="EcuMT" value="1612157992440089595" />
     <property role="TrG5h" value="ForEachComponent" />
-    <property role="34LRSv" value="foreach" />
+    <property role="34LRSv" value="each" />
     <ref role="1TJDcQ" to="tpck:gw2VY9q" resolve="BaseConcept" />
     <node concept="1TJgyj" id="1pvyisdcGK0" role="1TKVEi">
       <property role="IQ2ns" value="1612157992440089600" />
@@ -431,6 +431,7 @@
   <node concept="1TIwiD" id="2ti6llKMteI">
     <property role="EcuMT" value="2833354970324652974" />
     <property role="TrG5h" value="WhenCase" />
+    <property role="34LRSv" value="case" />
     <ref role="1TJDcQ" to="tpck:gw2VY9q" resolve="BaseConcept" />
     <node concept="1TJgyj" id="2ti6llKMteJ" role="1TKVEi">
       <property role="IQ2ns" value="2833354970324652975" />