diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap
index 6bd04b31..e833f4ef 100644
--- a/tests/__snapshots__/demo.test.tsx.snap
+++ b/tests/__snapshots__/demo.test.tsx.snap
@@ -20027,9 +20027,83 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
   background-color: rgba(0, 0, 0, 0.02);
   margin: 2px;
   padding: 6px;
+  position: relative;
 }
 
 .emotion-3 {
+  position: absolute;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-4:hover {
+  color: rgba(0, 0, 0, 0.88);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: transparent;
+}
+
+.emotion-4:focus {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background-color: rgba(0, 0, 0, 0.02)!important;
+  border-color: #1677ff!important;
+  box-shadow: none;
+}
+
+.emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 8px;
+  min-width: 50px;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-6:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-6:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-7 {
+  min-width: 50px;
+}
+
+.emotion-8 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -20040,7 +20114,7 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
   clear: both;
 }
 
-.emotion-4 {
+.emotion-9 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -20048,15 +20122,15 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
   border: 0 solid rgba(5, 5, 5, 0.06);
 }
 
-.emotion-4:hover .studio-draggable-panel-toggle {
+.emotion-9:hover .studio-draggable-panel-toggle {
   opacity: 1;
 }
 
-.emotion-5 {
+.emotion-10 {
   overflow: hidden;
 }
 
-.emotion-6 {
+.emotion-11 {
   border-radius: 6px;
   box-sizing: border-box;
   background-color: rgba(0, 0, 0, 0.02);
@@ -20065,11 +20139,11 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
   padding: 6px;
 }
 
-.emotion-7 {
+.emotion-12 {
   position: relative;
 }
 
-.emotion-7::before {
+.emotion-12::before {
   position: absolute;
   z-index: 50;
   -webkit-transition: all 0.3s ease-in-out;
@@ -20077,18 +20151,18 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
   content: '';
 }
 
-.emotion-7:hover::before,
-.emotion-7:active::before {
+.emotion-12:hover::before,
+.emotion-12:active::before {
   background: #1677ff;
 }
 
-.emotion-7::before {
+.emotion-12::before {
   right: 50%;
   width: 2px;
   height: 100%;
 }
 
-.emotion-8 {
+.emotion-13 {
   border-radius: 6px;
   box-sizing: border-box;
   background-color: rgba(0, 0, 0, 0.02);
@@ -20100,11 +20174,11 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
   flex: 1;
 }
 
-.emotion-12 {
+.emotion-17 {
   position: relative;
 }
 
-.emotion-12::before {
+.emotion-17::before {
   position: absolute;
   z-index: 50;
   -webkit-transition: all 0.3s ease-in-out;
@@ -20112,18 +20186,18 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
   content: '';
 }
 
-.emotion-12:hover::before,
-.emotion-12:active::before {
+.emotion-17:hover::before,
+.emotion-17:active::before {
   background: #1677ff;
 }
 
-.emotion-12::before {
+.emotion-17::before {
   left: 50%;
   width: 2px;
   height: 100%;
 }
 
-.emotion-13 {
+.emotion-18 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -20131,11 +20205,11 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
   border: 0 solid rgba(5, 5, 5, 0.06);
 }
 
-.emotion-13:hover .studio-draggable-panel-toggle {
+.emotion-18:hover .studio-draggable-panel-toggle {
   opacity: 1;
 }
 
-.emotion-15 {
+.emotion-20 {
   border-radius: 6px;
   box-sizing: border-box;
   background-color: rgba(0, 0, 0, 0.02);
@@ -20144,11 +20218,11 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
   padding: 6px;
 }
 
-.emotion-16 {
+.emotion-21 {
   position: relative;
 }
 
-.emotion-16::before {
+.emotion-21::before {
   position: absolute;
   z-index: 50;
   -webkit-transition: all 0.3s ease-in-out;
@@ -20156,54 +20230,138 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
   content: '';
 }
 
-.emotion-16:hover::before,
-.emotion-16:active::before {
+.emotion-21:hover::before,
+.emotion-21:active::before {
   background: #1677ff;
 }
 
-.emotion-16::before {
+.emotion-21::before {
   top: 50%;
   height: 2px;
   width: 100%;
 }
 
-.emotion-17 {
-  height: 28px;
+.emotion-22 {
+  height: 36px;
   box-sizing: border-box;
   margin: 2px;
   border-radius: 6px;
   background-color: rgba(0, 0, 0, 0.02);
   padding: 6px;
+  position: relative;
 }
 
 <div>
   <div
     class="layoutkit-flexbox emotion-0 studio-layout emotion-1"
-    style="max-width: 100%;"
+    style="max-width: 100%; height: 600px;"
   >
     <div
       class="studio-layout-header studio-layout-flex-container emotion-2 studio-flex studio-flex-align-center studio-flex-justify-space-between"
     >
-      <div>
-        Icon
+      <div
+        class="headerAndFooterCenterChildren emotion-3"
+      >
+        <span
+          class="studio-input-group-wrapper emotion-4"
+          style="width: 250px;"
+        >
+          <span
+            class="studio-input-wrapper studio-input-group"
+          >
+            <span
+              class="studio-input-group-addon"
+            >
+              Options
+            </span>
+            <input
+              class="studio-input"
+              placeholder="Search For Some Little Options"
+              type="text"
+              value=""
+            />
+          </span>
+        </span>
       </div>
-      <div>
-        Extra
+      <div
+        class="headerAndFooterIcon emotion-5"
+      >
+        <button
+          class="studio-btn studio-btn-text studio-btn-icon-only studio-actionicon emotion-6 studio-dropdown-trigger"
+          type="button"
+        >
+          <span
+            class="studio-btn-icon"
+          >
+            <span
+              aria-label="menu-unfold"
+              class="anticon anticon-menu-unfold"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="menu-unfold"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 000-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0014.4 7z"
+                />
+              </svg>
+            </span>
+          </span>
+        </button>
+        EditorLayout
+      </div>
+      <div
+        class="headerAndFooterExtra emotion-7"
+      >
+        <div
+          class="studio-space studio-space-horizontal studio-space-align-center studio-space-gap-row-small studio-space-gap-col-small"
+        >
+          <div
+            class="studio-space-item"
+          >
+            <button
+              class="studio-btn studio-btn-primary"
+              type="button"
+            >
+              <span>
+                Save
+              </span>
+            </button>
+          </div>
+          <div
+            class="studio-space-item"
+          >
+            <button
+              class="studio-btn studio-btn-dashed"
+              type="button"
+            >
+              <span>
+                Export
+              </span>
+            </button>
+          </div>
+        </div>
       </div>
     </div>
     <div
-      class="studio-layout-container emotion-3"
+      class="studio-layout-container emotion-8 studio-flex"
     >
       <div
-        class="studio-draggable-panel studio-layout-left-pannel emotion-4"
+        class="studio-draggable-panel studio-layout-left-pannel emotion-9"
         style="border-right-width: 1px;"
       >
         <div
-          class="studio-draggable-panel-fixed emotion-5"
-          style="position: relative; user-select: auto; width: 300px; height: 100%; max-width: 500px; min-width: 200px; min-height: 200px; box-sizing: border-box; flex-shrink: 0;"
+          class="studio-draggable-panel-fixed emotion-10"
+          style="position: relative; user-select: auto; width: 200px; height: 100%; max-width: 500px; min-width: 100px; min-height: 100px; box-sizing: border-box; flex-shrink: 0;"
         >
           <div
-            class="studio-layout-pannel studio-layout-left-pannel emotion-6"
+            class="studio-layout-pannel studio-layout-left-pannel emotion-11"
           >
             <div>
               Left Pannel
@@ -20211,33 +20369,33 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
           </div>
           <div>
             <div
-              class="emotion-7 studio-draggable-panel-right-handle"
+              class="emotion-12 studio-draggable-panel-right-handle"
               style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
             />
           </div>
         </div>
       </div>
       <div
-        class="studio-layout-pannel studio-layout-center-pannel emotion-8"
+        class="studio-layout-pannel studio-layout-center-pannel emotion-13"
       >
         <div
           class=""
         />
       </div>
       <div
-        class="studio-draggable-panel studio-layout-right-pannel emotion-4"
+        class="studio-draggable-panel studio-layout-right-pannel emotion-9"
         style="border-left-width: 1px;"
       >
         <div
-          class="studio-draggable-panel-fixed emotion-5"
-          style="position: relative; user-select: auto; width: 300px; height: 100%; max-width: 500px; min-width: 200px; min-height: 200px; box-sizing: border-box; flex-shrink: 0;"
+          class="studio-draggable-panel-fixed emotion-10"
+          style="position: relative; user-select: auto; width: 200px; height: 100%; max-width: 500px; min-width: 100px; min-height: 100px; box-sizing: border-box; flex-shrink: 0;"
         >
           <div
-            class="studio-layout-pannel studio-layout-right-pannel emotion-6"
+            class="studio-layout-pannel studio-layout-right-pannel emotion-11"
           />
           <div>
             <div
-              class="emotion-12 studio-draggable-panel-left-handle"
+              class="emotion-17 studio-draggable-panel-left-handle"
               style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
             />
           </div>
@@ -20245,32 +20403,1391 @@ exports[`<Layout /> > renders basic.tsx correctly 1`] = `
       </div>
     </div>
     <div
-      class="studio-draggable-panel emotion-13"
+      class="studio-draggable-panel emotion-18"
       style="border-top-width: 1px;"
     >
       <div
-        class="studio-draggable-panel-fixed emotion-5"
-        style="position: relative; user-select: auto; width: 100%; height: 200px; max-height: 400px; min-width: 200px; min-height: 200px; box-sizing: border-box; flex-shrink: 0;"
+        class="studio-draggable-panel-fixed emotion-10"
+        style="position: relative; user-select: auto; width: 100%; height: 100px; max-height: 400px; min-width: 100px; min-height: 100px; box-sizing: border-box; flex-shrink: 0;"
       >
         <div
-          class="studio-layout-pannel emotion-15"
+          class="studio-layout-pannel emotion-20"
         />
         <div>
           <div
-            class="studio-draggable-panel-top-handle emotion-16"
+            class="studio-draggable-panel-top-handle emotion-21"
             style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
           />
         </div>
       </div>
     </div>
     <div
-      class="studio-layout-footer studio-layout-flex-container emotion-17 studio-flex studio-flex-align-center studio-flex-justify-space-between"
+      class="studio-layout-footer studio-layout-flex-container emotion-22 studio-flex studio-flex-align-center studio-flex-justify-space-between"
     >
-      <div>
-        Icon
+      <div
+        class="headerAndFooterCenterChildren emotion-3"
+      />
+      <div
+        class="headerAndFooterIcon emotion-5"
+      >
+        <button
+          class="studio-btn studio-btn-text studio-btn-icon-only studio-actionicon emotion-6 studio-dropdown-trigger"
+          type="button"
+        >
+          <span
+            class="studio-btn-icon"
+          >
+            <span
+              aria-label="cloud"
+              class="anticon anticon-cloud"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="cloud"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M811.4 418.7C765.6 297.9 648.9 212 512.2 212S258.8 297.8 213 418.6C127.3 441.1 64 519.1 64 612c0 110.5 89.5 200 199.9 200h496.2C870.5 812 960 722.5 960 612c0-92.7-63.1-170.7-148.6-193.3zm36.3 281a123.07 123.07 0 01-87.6 36.3H263.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 01140 612c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0166.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z"
+                />
+              </svg>
+            </span>
+          </span>
+        </button>
       </div>
-      <div>
-        Extra
+      <div
+        class="headerAndFooterExtra emotion-7"
+      >
+        <div
+          class="studio-space studio-space-horizontal studio-space-align-center"
+          style="flex-wrap: wrap; row-gap: 8px;"
+        >
+          <div
+            class="studio-space-item"
+          >
+            <span
+              class="studio-tag studio-tag-has-color"
+              style="background-color: rgb(85, 172, 238);"
+            >
+              <span
+                aria-label="twitter"
+                class="anticon anticon-twitter"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="twitter"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M928 254.3c-30.6 13.2-63.9 22.7-98.2 26.4a170.1 170.1 0 0075-94 336.64 336.64 0 01-108.2 41.2A170.1 170.1 0 00672 174c-94.5 0-170.5 76.6-170.5 170.6 0 13.2 1.6 26.4 4.2 39.1-141.5-7.4-267.7-75-351.6-178.5a169.32 169.32 0 00-23.2 86.1c0 59.2 30.1 111.4 76 142.1a172 172 0 01-77.1-21.7v2.1c0 82.9 58.6 151.6 136.7 167.4a180.6 180.6 0 01-44.9 5.8c-11.1 0-21.6-1.1-32.2-2.6C211 652 273.9 701.1 348.8 702.7c-58.6 45.9-132 72.9-211.7 72.9-14.3 0-27.5-.5-41.2-2.1C171.5 822 261.2 850 357.8 850 671.4 850 843 590.2 843 364.7c0-7.4 0-14.8-.5-22.2 33.2-24.3 62.3-54.4 85.5-88.2z"
+                  />
+                </svg>
+              </span>
+              <span>
+                Twitter
+              </span>
+            </span>
+          </div>
+          <div
+            class="studio-space-item"
+          >
+            <span
+              class="studio-tag studio-tag-has-color"
+              style="background-color: rgb(205, 32, 31);"
+            >
+              <span
+                aria-label="youtube"
+                class="anticon anticon-youtube"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="youtube"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M960 509.2c0-2.2 0-4.7-.1-7.6-.1-8.1-.3-17.2-.5-26.9-.8-27.9-2.2-55.7-4.4-81.9-3-36.1-7.4-66.2-13.4-88.8a139.52 139.52 0 00-98.3-98.5c-28.3-7.6-83.7-12.3-161.7-15.2-37.1-1.4-76.8-2.3-116.5-2.8-13.9-.2-26.8-.3-38.4-.4h-29.4c-11.6.1-24.5.2-38.4.4-39.7.5-79.4 1.4-116.5 2.8-78 3-133.5 7.7-161.7 15.2A139.35 139.35 0 0082.4 304C76.3 326.6 72 356.7 69 392.8c-2.2 26.2-3.6 54-4.4 81.9-.3 9.7-.4 18.8-.5 26.9 0 2.9-.1 5.4-.1 7.6v5.6c0 2.2 0 4.7.1 7.6.1 8.1.3 17.2.5 26.9.8 27.9 2.2 55.7 4.4 81.9 3 36.1 7.4 66.2 13.4 88.8 12.8 47.9 50.4 85.7 98.3 98.5 28.2 7.6 83.7 12.3 161.7 15.2 37.1 1.4 76.8 2.3 116.5 2.8 13.9.2 26.8.3 38.4.4h29.4c11.6-.1 24.5-.2 38.4-.4 39.7-.5 79.4-1.4 116.5-2.8 78-3 133.5-7.7 161.7-15.2 47.9-12.8 85.5-50.5 98.3-98.5 6.1-22.6 10.4-52.7 13.4-88.8 2.2-26.2 3.6-54 4.4-81.9.3-9.7.4-18.8.5-26.9 0-2.9.1-5.4.1-7.6v-5.6zm-72 5.2c0 2.1 0 4.4-.1 7.1-.1 7.8-.3 16.4-.5 25.7-.7 26.6-2.1 53.2-4.2 77.9-2.7 32.2-6.5 58.6-11.2 76.3-6.2 23.1-24.4 41.4-47.4 47.5-21 5.6-73.9 10.1-145.8 12.8-36.4 1.4-75.6 2.3-114.7 2.8-13.7.2-26.4.3-37.8.3h-28.6l-37.8-.3c-39.1-.5-78.2-1.4-114.7-2.8-71.9-2.8-124.9-7.2-145.8-12.8-23-6.2-41.2-24.4-47.4-47.5-4.7-17.7-8.5-44.1-11.2-76.3-2.1-24.7-3.4-51.3-4.2-77.9-.3-9.3-.4-18-.5-25.7 0-2.7-.1-5.1-.1-7.1v-4.8c0-2.1 0-4.4.1-7.1.1-7.8.3-16.4.5-25.7.7-26.6 2.1-53.2 4.2-77.9 2.7-32.2 6.5-58.6 11.2-76.3 6.2-23.1 24.4-41.4 47.4-47.5 21-5.6 73.9-10.1 145.8-12.8 36.4-1.4 75.6-2.3 114.7-2.8 13.7-.2 26.4-.3 37.8-.3h28.6l37.8.3c39.1.5 78.2 1.4 114.7 2.8 71.9 2.8 124.9 7.2 145.8 12.8 23 6.2 41.2 24.4 47.4 47.5 4.7 17.7 8.5 44.1 11.2 76.3 2.1 24.7 3.4 51.3 4.2 77.9.3 9.3.4 18 .5 25.7 0 2.7.1 5.1.1 7.1v4.8zM423 646l232-135-232-133z"
+                  />
+                </svg>
+              </span>
+              <span>
+                Youtube
+              </span>
+            </span>
+          </div>
+          <div
+            class="studio-space-item"
+          >
+            <span
+              class="studio-tag studio-tag-has-color"
+              style="background-color: rgb(59, 89, 153);"
+            >
+              <span
+                aria-label="facebook"
+                class="anticon anticon-facebook"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="facebook"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H663.9V602.2h104l15.6-120.7H663.9v-77.1c0-35 9.7-58.8 59.8-58.8h63.9v-108c-11.1-1.5-49-4.8-93.2-4.8-92.2 0-155.3 56.3-155.3 159.6v89H434.9v120.7h104.3V848H176V176h672v672z"
+                  />
+                </svg>
+              </span>
+              <span>
+                Facebook
+              </span>
+            </span>
+          </div>
+          <div
+            class="studio-space-item"
+          >
+            <span
+              class="studio-tag studio-tag-has-color"
+              style="background-color: rgb(85, 172, 238);"
+            >
+              <span
+                aria-label="linkedin"
+                class="anticon anticon-linkedin"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="linkedin"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M847.7 112H176.3c-35.5 0-64.3 28.8-64.3 64.3v671.4c0 35.5 28.8 64.3 64.3 64.3h671.4c35.5 0 64.3-28.8 64.3-64.3V176.3c0-35.5-28.8-64.3-64.3-64.3zm0 736c-447.8-.1-671.7-.2-671.7-.3.1-447.8.2-671.7.3-671.7 447.8.1 671.7.2 671.7.3-.1 447.8-.2 671.7-.3 671.7zM230.6 411.9h118.7v381.8H230.6zm59.4-52.2c37.9 0 68.8-30.8 68.8-68.8a68.8 68.8 0 10-137.6 0c-.1 38 30.7 68.8 68.8 68.8zm252.3 245.1c0-49.8 9.5-98 71.2-98 60.8 0 61.7 56.9 61.7 101.2v185.7h118.6V584.3c0-102.8-22.2-181.9-142.3-181.9-57.7 0-96.4 31.7-112.3 61.7h-1.6v-52.2H423.7v381.8h118.6V604.8z"
+                  />
+                </svg>
+              </span>
+              <span>
+                LinkedIn
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Layout /> > renders noLeftPannel.tsx correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-1 {
+  height: 100vh;
+  width: 100vw;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  overflow: hidden;
+  border-radius: 6px;
+}
+
+.emotion-1 .studio-draggable-panel {
+  border: none;
+}
+
+.emotion-2 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  clear: both;
+}
+
+.emotion-3 {
+  border-radius: 6px;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.02);
+  margin: 2px;
+  height: calc(100% - 4px);
+  padding: 6px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-4 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  position: relative;
+  border: 0 solid rgba(5, 5, 5, 0.06);
+}
+
+.emotion-4:hover .studio-draggable-panel-toggle {
+  opacity: 1;
+}
+
+.emotion-5 {
+  overflow: hidden;
+}
+
+.emotion-6 {
+  border-radius: 6px;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.02);
+  margin: 2px;
+  height: calc(100% - 4px);
+  padding: 6px;
+}
+
+.emotion-7 {
+  position: relative;
+}
+
+.emotion-7::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-7:hover::before,
+.emotion-7:active::before {
+  background: #1677ff;
+}
+
+.emotion-7::before {
+  left: 50%;
+  width: 2px;
+  height: 100%;
+}
+
+.emotion-8 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  position: relative;
+  border: 0 solid rgba(5, 5, 5, 0.06);
+}
+
+.emotion-8:hover .studio-draggable-panel-toggle {
+  opacity: 1;
+}
+
+.emotion-10 {
+  border-radius: 6px;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.02);
+  margin: 2px;
+  height: calc(100% - 4px);
+  padding: 6px;
+}
+
+.emotion-11 {
+  position: relative;
+}
+
+.emotion-11::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-11:hover::before,
+.emotion-11:active::before {
+  background: #1677ff;
+}
+
+.emotion-11::before {
+  top: 50%;
+  height: 2px;
+  width: 100%;
+}
+
+.emotion-12 {
+  height: 36px;
+  box-sizing: border-box;
+  margin: 2px;
+  border-radius: 6px;
+  background-color: rgba(0, 0, 0, 0.02);
+  padding: 6px;
+  position: relative;
+}
+
+.emotion-13 {
+  position: absolute;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 8px;
+  min-width: 50px;
+}
+
+.emotion-15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-15:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-15:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+<div>
+  <div
+    class="layoutkit-flexbox emotion-0 studio-layout emotion-1"
+    style="max-width: 100%; height: 600px;"
+  >
+    <div
+      class="studio-layout-container emotion-2 studio-flex"
+    >
+      <div
+        class="studio-layout-pannel studio-layout-center-pannel emotion-3"
+      >
+        <div
+          class=""
+        />
+      </div>
+      <div
+        class="studio-draggable-panel studio-layout-right-pannel emotion-4"
+        style="border-left-width: 1px;"
+      >
+        <div
+          class="studio-draggable-panel-fixed emotion-5"
+          style="position: relative; user-select: auto; width: 200px; height: 100%; max-width: 500px; min-width: 100px; min-height: 100px; box-sizing: border-box; flex-shrink: 0;"
+        >
+          <div
+            class="studio-layout-pannel studio-layout-right-pannel emotion-6"
+          />
+          <div>
+            <div
+              class="emotion-7 studio-draggable-panel-left-handle"
+              style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="studio-draggable-panel emotion-8"
+      style="border-top-width: 1px;"
+    >
+      <div
+        class="studio-draggable-panel-fixed emotion-5"
+        style="position: relative; user-select: auto; width: 100%; height: 100px; max-height: 400px; min-width: 100px; min-height: 100px; box-sizing: border-box; flex-shrink: 0;"
+      >
+        <div
+          class="studio-layout-pannel emotion-10"
+        />
+        <div>
+          <div
+            class="studio-draggable-panel-top-handle emotion-11"
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="studio-layout-footer studio-layout-flex-container emotion-12 studio-flex studio-flex-align-center studio-flex-justify-space-between"
+    >
+      <div
+        class="headerAndFooterCenterChildren emotion-13"
+      />
+      <div
+        class="headerAndFooterIcon emotion-14"
+      >
+        <button
+          class="studio-btn studio-btn-text studio-btn-icon-only studio-actionicon emotion-15"
+          type="button"
+        >
+          <span
+            class="studio-btn-icon"
+          >
+            <span
+              aria-label="menu-unfold"
+              class="anticon anticon-menu-unfold"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="menu-unfold"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 000-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0014.4 7z"
+                />
+              </svg>
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Layout /> > renders single.tsx correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-1 {
+  height: 100vh;
+  width: 100vw;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  overflow: hidden;
+  border-radius: 6px;
+}
+
+.emotion-1 .studio-draggable-panel {
+  border: none;
+}
+
+.emotion-2 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  clear: both;
+}
+
+.emotion-3 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  position: relative;
+  border: 0 solid rgba(5, 5, 5, 0.06);
+}
+
+.emotion-3:hover .studio-draggable-panel-toggle {
+  opacity: 1;
+}
+
+.emotion-4 {
+  overflow: hidden;
+}
+
+.emotion-5 {
+  border-radius: 6px;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.02);
+  margin: 2px;
+  height: calc(100% - 4px);
+  padding: 6px;
+}
+
+.emotion-6 {
+  position: relative;
+}
+
+.emotion-6::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-6:hover::before,
+.emotion-6:active::before {
+  background: #1677ff;
+}
+
+.emotion-6::before {
+  right: 50%;
+  width: 2px;
+  height: 100%;
+}
+
+.emotion-7 {
+  border-radius: 6px;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.02);
+  margin: 2px;
+  height: calc(100% - 4px);
+  padding: 6px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-11 {
+  position: relative;
+}
+
+.emotion-11::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-11:hover::before,
+.emotion-11:active::before {
+  background: #1677ff;
+}
+
+.emotion-11::before {
+  left: 50%;
+  width: 2px;
+  height: 100%;
+}
+
+.emotion-12 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  position: relative;
+  border: 0 solid rgba(5, 5, 5, 0.06);
+}
+
+.emotion-12:hover .studio-draggable-panel-toggle {
+  opacity: 1;
+}
+
+.emotion-14 {
+  border-radius: 6px;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.02);
+  margin: 2px;
+  height: calc(100% - 4px);
+  padding: 6px;
+}
+
+.emotion-15 {
+  position: relative;
+}
+
+.emotion-15::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-15:hover::before,
+.emotion-15:active::before {
+  background: #1677ff;
+}
+
+.emotion-15::before {
+  top: 50%;
+  height: 2px;
+  width: 100%;
+}
+
+<div>
+  <div
+    class="layoutkit-flexbox emotion-0 studio-layout emotion-1"
+    style="max-width: 100%; height: 600px;"
+  >
+    <div
+      class="studio-layout-container emotion-2 studio-flex"
+    >
+      <div
+        class="studio-draggable-panel studio-layout-left-pannel emotion-3"
+        style="border-right-width: 1px;"
+      >
+        <div
+          class="studio-draggable-panel-fixed emotion-4"
+          style="position: relative; user-select: auto; width: 200px; height: 100%; max-width: 500px; min-width: 100px; min-height: 100px; box-sizing: border-box; flex-shrink: 0;"
+        >
+          <div
+            class="studio-layout-pannel studio-layout-left-pannel emotion-5"
+          >
+            <div>
+              Left Pannel
+            </div>
+          </div>
+          <div>
+            <div
+              class="emotion-6 studio-draggable-panel-right-handle"
+              style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-layout-pannel studio-layout-center-pannel emotion-7"
+      >
+        <div
+          class=""
+        />
+      </div>
+      <div
+        class="studio-draggable-panel studio-layout-right-pannel emotion-3"
+        style="border-left-width: 1px;"
+      >
+        <div
+          class="studio-draggable-panel-fixed emotion-4"
+          style="position: relative; user-select: auto; width: 200px; height: 100%; max-width: 500px; min-width: 100px; min-height: 100px; box-sizing: border-box; flex-shrink: 0;"
+        >
+          <div
+            class="studio-layout-pannel studio-layout-right-pannel emotion-5"
+          />
+          <div>
+            <div
+              class="emotion-11 studio-draggable-panel-left-handle"
+              style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="studio-draggable-panel emotion-12"
+      style="border-top-width: 1px;"
+    >
+      <div
+        class="studio-draggable-panel-fixed emotion-4"
+        style="position: relative; user-select: auto; width: 100%; height: 100px; max-height: 400px; min-width: 100px; min-height: 100px; box-sizing: border-box; flex-shrink: 0;"
+      >
+        <div
+          class="studio-layout-pannel emotion-14"
+        />
+        <div>
+          <div
+            class="studio-draggable-panel-top-handle emotion-15"
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Layout /> > renders types.tsx correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-1 {
+  height: 100vh;
+  width: 100vw;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  overflow: hidden;
+  border-radius: 6px;
+}
+
+.emotion-1 .studio-draggable-panel {
+  border: none;
+}
+
+.emotion-2 {
+  box-sizing: border-box;
+  height: 48px;
+  min-height: 48px;
+  border-radius: 6px;
+  background-color: rgba(0, 0, 0, 0.02);
+  margin: 2px;
+  padding: 6px;
+  position: relative;
+}
+
+.emotion-3 {
+  position: absolute;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-4:hover {
+  color: rgba(0, 0, 0, 0.88);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: transparent;
+}
+
+.emotion-4:focus {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background-color: rgba(0, 0, 0, 0.02)!important;
+  border-color: #1677ff!important;
+  box-shadow: none;
+}
+
+.emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 8px;
+  min-width: 50px;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-6:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-6:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-7 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  clear: both;
+}
+
+.emotion-8 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  position: relative;
+  border: 0 solid rgba(5, 5, 5, 0.06);
+}
+
+.emotion-8:hover .studio-draggable-panel-toggle {
+  opacity: 1;
+}
+
+.emotion-9 {
+  overflow: hidden;
+}
+
+.emotion-10 {
+  border-radius: 6px;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.02);
+  margin: 2px;
+  height: calc(100% - 4px);
+  padding: 6px;
+}
+
+.emotion-11 {
+  position: relative;
+}
+
+.emotion-11::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-11:hover::before,
+.emotion-11:active::before {
+  background: #1677ff;
+}
+
+.emotion-11::before {
+  right: 50%;
+  width: 2px;
+  height: 100%;
+}
+
+.emotion-12 {
+  border-radius: 6px;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.02);
+  margin: 2px;
+  height: calc(100% - 4px);
+  padding: 6px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-16 {
+  position: relative;
+}
+
+.emotion-16::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-16:hover::before,
+.emotion-16:active::before {
+  background: #1677ff;
+}
+
+.emotion-16::before {
+  left: 50%;
+  width: 2px;
+  height: 100%;
+}
+
+.emotion-17 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  position: relative;
+  border: 0 solid rgba(5, 5, 5, 0.06);
+}
+
+.emotion-17:hover .studio-draggable-panel-toggle {
+  opacity: 1;
+}
+
+.emotion-19 {
+  border-radius: 6px;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.02);
+  margin: 2px;
+  height: calc(100% - 4px);
+  padding: 6px;
+}
+
+.emotion-20 {
+  position: relative;
+}
+
+.emotion-20::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-20:hover::before,
+.emotion-20:active::before {
+  background: #1677ff;
+}
+
+.emotion-20::before {
+  top: 50%;
+  height: 2px;
+  width: 100%;
+}
+
+.emotion-21 {
+  height: 36px;
+  box-sizing: border-box;
+  margin: 2px;
+  border-radius: 6px;
+  background-color: rgba(0, 0, 0, 0.02);
+  padding: 6px;
+  position: relative;
+}
+
+.emotion-25 {
+  min-width: 50px;
+}
+
+<div>
+  <div
+    class="studio-space studio-space-vertical studio-space-gap-row-small studio-space-gap-col-small"
+    style="max-width: 100%;"
+  >
+    <div
+      class="studio-space-item"
+    >
+      <div
+        class="studio-segmented"
+      >
+        <div
+          class="studio-segmented-group"
+        >
+          <label
+            class="studio-segmented-item"
+          >
+            <input
+              class="studio-segmented-item-input"
+              type="radio"
+            />
+            <div
+              class="studio-segmented-item-label"
+              title="Left&Right"
+            >
+              Left&Right
+            </div>
+          </label>
+          <label
+            class="studio-segmented-item"
+          >
+            <input
+              class="studio-segmented-item-input"
+              type="radio"
+            />
+            <div
+              class="studio-segmented-item-label"
+              title="LeftFull"
+            >
+              LeftFull
+            </div>
+          </label>
+          <label
+            class="studio-segmented-item"
+          >
+            <input
+              class="studio-segmented-item-input"
+              type="radio"
+            />
+            <div
+              class="studio-segmented-item-label"
+              title="RightFull"
+            >
+              RightFull
+            </div>
+          </label>
+          <label
+            class="studio-segmented-item studio-segmented-item-selected"
+          >
+            <input
+              checked=""
+              class="studio-segmented-item-input"
+              type="radio"
+            />
+            <div
+              class="studio-segmented-item-label"
+              title="Bottom"
+            >
+              Bottom
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>
+    <div
+      class="studio-space-item"
+    >
+      <div
+        class="layoutkit-flexbox emotion-0 studio-layout emotion-1"
+        style="max-width: 100%; height: 600px;"
+      >
+        <div
+          class="studio-layout-header studio-layout-flex-container emotion-2 studio-flex studio-flex-align-center studio-flex-justify-space-between"
+        >
+          <div
+            class="headerAndFooterCenterChildren emotion-3"
+          >
+            <span
+              class="studio-input-group-wrapper emotion-4"
+              style="width: 250px;"
+            >
+              <span
+                class="studio-input-wrapper studio-input-group"
+              >
+                <span
+                  class="studio-input-group-addon"
+                >
+                  Options
+                </span>
+                <input
+                  class="studio-input"
+                  placeholder="Search For Some Options"
+                  type="text"
+                  value=""
+                />
+              </span>
+            </span>
+          </div>
+          <div
+            class="headerAndFooterIcon emotion-5"
+          >
+            <button
+              class="studio-btn studio-btn-text studio-btn-icon-only studio-actionicon emotion-6 studio-dropdown-trigger"
+              type="button"
+            >
+              <span
+                class="studio-btn-icon"
+              >
+                <span
+                  aria-label="menu-unfold"
+                  class="anticon anticon-menu-unfold"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="menu-unfold"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 000-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0014.4 7z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+            EditorLayout
+          </div>
+        </div>
+        <div
+          class="studio-layout-container emotion-7 studio-flex"
+        >
+          <div
+            class="studio-draggable-panel studio-layout-left-pannel emotion-8"
+            style="border-right-width: 1px;"
+          >
+            <div
+              class="studio-draggable-panel-fixed emotion-9"
+              style="position: relative; user-select: auto; width: 200px; height: 100%; max-width: 500px; min-width: 100px; min-height: 100px; box-sizing: border-box; flex-shrink: 0;"
+            >
+              <div
+                class="studio-layout-pannel studio-layout-left-pannel emotion-10"
+              >
+                <div>
+                  Left Pannel
+                </div>
+              </div>
+              <div>
+                <div
+                  class="emotion-11 studio-draggable-panel-right-handle"
+                  style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="studio-layout-pannel studio-layout-center-pannel emotion-12"
+          >
+            <div
+              class=""
+            />
+          </div>
+          <div
+            class="studio-draggable-panel studio-layout-right-pannel emotion-8"
+            style="border-left-width: 1px;"
+          >
+            <div
+              class="studio-draggable-panel-fixed emotion-9"
+              style="position: relative; user-select: auto; width: 200px; height: 100%; max-width: 500px; min-width: 100px; min-height: 100px; box-sizing: border-box; flex-shrink: 0;"
+            >
+              <div
+                class="studio-layout-pannel studio-layout-right-pannel emotion-10"
+              />
+              <div>
+                <div
+                  class="emotion-16 studio-draggable-panel-left-handle"
+                  style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="studio-draggable-panel emotion-17"
+          style="border-top-width: 1px;"
+        >
+          <div
+            class="studio-draggable-panel-fixed emotion-9"
+            style="position: relative; user-select: auto; width: 100%; height: 100px; max-height: 400px; min-width: 100px; min-height: 100px; box-sizing: border-box; flex-shrink: 0;"
+          >
+            <div
+              class="studio-layout-pannel emotion-19"
+            />
+            <div>
+              <div
+                class="studio-draggable-panel-top-handle emotion-20"
+                style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="studio-layout-footer studio-layout-flex-container emotion-21 studio-flex studio-flex-align-center studio-flex-justify-space-between"
+        >
+          <div
+            class="headerAndFooterCenterChildren emotion-3"
+          >
+            <div>
+              Footer
+            </div>
+          </div>
+          <div
+            class="headerAndFooterIcon emotion-5"
+          >
+            <button
+              class="studio-btn studio-btn-text studio-btn-icon-only studio-actionicon emotion-6 studio-dropdown-trigger"
+              type="button"
+            >
+              <span
+                class="studio-btn-icon"
+              >
+                <span
+                  aria-label="cloud"
+                  class="anticon anticon-cloud"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="cloud"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M811.4 418.7C765.6 297.9 648.9 212 512.2 212S258.8 297.8 213 418.6C127.3 441.1 64 519.1 64 612c0 110.5 89.5 200 199.9 200h496.2C870.5 812 960 722.5 960 612c0-92.7-63.1-170.7-148.6-193.3zm36.3 281a123.07 123.07 0 01-87.6 36.3H263.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 01140 612c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0166.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
+          <div
+            class="headerAndFooterExtra emotion-25"
+          >
+            <div
+              class="studio-space studio-space-horizontal studio-space-align-center"
+              style="flex-wrap: wrap; row-gap: 8px;"
+            >
+              <div
+                class="studio-space-item"
+              >
+                <span
+                  class="studio-tag studio-tag-has-color"
+                  style="background-color: rgb(85, 172, 238);"
+                >
+                  <span
+                    aria-label="twitter"
+                    class="anticon anticon-twitter"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="twitter"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M928 254.3c-30.6 13.2-63.9 22.7-98.2 26.4a170.1 170.1 0 0075-94 336.64 336.64 0 01-108.2 41.2A170.1 170.1 0 00672 174c-94.5 0-170.5 76.6-170.5 170.6 0 13.2 1.6 26.4 4.2 39.1-141.5-7.4-267.7-75-351.6-178.5a169.32 169.32 0 00-23.2 86.1c0 59.2 30.1 111.4 76 142.1a172 172 0 01-77.1-21.7v2.1c0 82.9 58.6 151.6 136.7 167.4a180.6 180.6 0 01-44.9 5.8c-11.1 0-21.6-1.1-32.2-2.6C211 652 273.9 701.1 348.8 702.7c-58.6 45.9-132 72.9-211.7 72.9-14.3 0-27.5-.5-41.2-2.1C171.5 822 261.2 850 357.8 850 671.4 850 843 590.2 843 364.7c0-7.4 0-14.8-.5-22.2 33.2-24.3 62.3-54.4 85.5-88.2z"
+                      />
+                    </svg>
+                  </span>
+                  <span>
+                    Twitter
+                  </span>
+                </span>
+              </div>
+              <div
+                class="studio-space-item"
+              >
+                <span
+                  class="studio-tag studio-tag-has-color"
+                  style="background-color: rgb(205, 32, 31);"
+                >
+                  <span
+                    aria-label="youtube"
+                    class="anticon anticon-youtube"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="youtube"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M960 509.2c0-2.2 0-4.7-.1-7.6-.1-8.1-.3-17.2-.5-26.9-.8-27.9-2.2-55.7-4.4-81.9-3-36.1-7.4-66.2-13.4-88.8a139.52 139.52 0 00-98.3-98.5c-28.3-7.6-83.7-12.3-161.7-15.2-37.1-1.4-76.8-2.3-116.5-2.8-13.9-.2-26.8-.3-38.4-.4h-29.4c-11.6.1-24.5.2-38.4.4-39.7.5-79.4 1.4-116.5 2.8-78 3-133.5 7.7-161.7 15.2A139.35 139.35 0 0082.4 304C76.3 326.6 72 356.7 69 392.8c-2.2 26.2-3.6 54-4.4 81.9-.3 9.7-.4 18.8-.5 26.9 0 2.9-.1 5.4-.1 7.6v5.6c0 2.2 0 4.7.1 7.6.1 8.1.3 17.2.5 26.9.8 27.9 2.2 55.7 4.4 81.9 3 36.1 7.4 66.2 13.4 88.8 12.8 47.9 50.4 85.7 98.3 98.5 28.2 7.6 83.7 12.3 161.7 15.2 37.1 1.4 76.8 2.3 116.5 2.8 13.9.2 26.8.3 38.4.4h29.4c11.6-.1 24.5-.2 38.4-.4 39.7-.5 79.4-1.4 116.5-2.8 78-3 133.5-7.7 161.7-15.2 47.9-12.8 85.5-50.5 98.3-98.5 6.1-22.6 10.4-52.7 13.4-88.8 2.2-26.2 3.6-54 4.4-81.9.3-9.7.4-18.8.5-26.9 0-2.9.1-5.4.1-7.6v-5.6zm-72 5.2c0 2.1 0 4.4-.1 7.1-.1 7.8-.3 16.4-.5 25.7-.7 26.6-2.1 53.2-4.2 77.9-2.7 32.2-6.5 58.6-11.2 76.3-6.2 23.1-24.4 41.4-47.4 47.5-21 5.6-73.9 10.1-145.8 12.8-36.4 1.4-75.6 2.3-114.7 2.8-13.7.2-26.4.3-37.8.3h-28.6l-37.8-.3c-39.1-.5-78.2-1.4-114.7-2.8-71.9-2.8-124.9-7.2-145.8-12.8-23-6.2-41.2-24.4-47.4-47.5-4.7-17.7-8.5-44.1-11.2-76.3-2.1-24.7-3.4-51.3-4.2-77.9-.3-9.3-.4-18-.5-25.7 0-2.7-.1-5.1-.1-7.1v-4.8c0-2.1 0-4.4.1-7.1.1-7.8.3-16.4.5-25.7.7-26.6 2.1-53.2 4.2-77.9 2.7-32.2 6.5-58.6 11.2-76.3 6.2-23.1 24.4-41.4 47.4-47.5 21-5.6 73.9-10.1 145.8-12.8 36.4-1.4 75.6-2.3 114.7-2.8 13.7-.2 26.4-.3 37.8-.3h28.6l37.8.3c39.1.5 78.2 1.4 114.7 2.8 71.9 2.8 124.9 7.2 145.8 12.8 23 6.2 41.2 24.4 47.4 47.5 4.7 17.7 8.5 44.1 11.2 76.3 2.1 24.7 3.4 51.3 4.2 77.9.3 9.3.4 18 .5 25.7 0 2.7.1 5.1.1 7.1v4.8zM423 646l232-135-232-133z"
+                      />
+                    </svg>
+                  </span>
+                  <span>
+                    Youtube
+                  </span>
+                </span>
+              </div>
+              <div
+                class="studio-space-item"
+              >
+                <span
+                  class="studio-tag studio-tag-has-color"
+                  style="background-color: rgb(59, 89, 153);"
+                >
+                  <span
+                    aria-label="facebook"
+                    class="anticon anticon-facebook"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="facebook"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H663.9V602.2h104l15.6-120.7H663.9v-77.1c0-35 9.7-58.8 59.8-58.8h63.9v-108c-11.1-1.5-49-4.8-93.2-4.8-92.2 0-155.3 56.3-155.3 159.6v89H434.9v120.7h104.3V848H176V176h672v672z"
+                      />
+                    </svg>
+                  </span>
+                  <span>
+                    Facebook
+                  </span>
+                </span>
+              </div>
+              <div
+                class="studio-space-item"
+              >
+                <span
+                  class="studio-tag studio-tag-has-color"
+                  style="background-color: rgb(85, 172, 238);"
+                >
+                  <span
+                    aria-label="linkedin"
+                    class="anticon anticon-linkedin"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="linkedin"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M847.7 112H176.3c-35.5 0-64.3 28.8-64.3 64.3v671.4c0 35.5 28.8 64.3 64.3 64.3h671.4c35.5 0 64.3-28.8 64.3-64.3V176.3c0-35.5-28.8-64.3-64.3-64.3zm0 736c-447.8-.1-671.7-.2-671.7-.3.1-447.8.2-671.7.3-671.7 447.8.1 671.7.2 671.7.3-.1 447.8-.2 671.7-.3 671.7zM230.6 411.9h118.7v381.8H230.6zm59.4-52.2c37.9 0 68.8-30.8 68.8-68.8a68.8 68.8 0 10-137.6 0c-.1 38 30.7 68.8 68.8 68.8zm252.3 245.1c0-49.8 9.5-98 71.2-98 60.8 0 61.7 56.9 61.7 101.2v185.7h118.6V584.3c0-102.8-22.2-181.9-142.3-181.9-57.7 0-96.4 31.7-112.3 61.7h-1.6v-52.2H423.7v381.8h118.6V604.8z"
+                      />
+                    </svg>
+                  </span>
+                  <span>
+                    LinkedIn
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>