From a9a0dd9cf306a31ee7e9955fada2737af1f6447b Mon Sep 17 00:00:00 2001
From: Geoffroy Baccarini <gbaccarini@talend.com>
Date: Fri, 29 Mar 2024 11:04:15 +0100
Subject: [PATCH 1/4] fix(TMC-27716): fix firefox height for fieldset

---
 .changeset/chatty-cherries-do.md                             | 5 +++++
 .../src/components/Form/Fieldset/Fieldset.module.scss        | 3 +--
 2 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/chatty-cherries-do.md

diff --git a/.changeset/chatty-cherries-do.md b/.changeset/chatty-cherries-do.md
new file mode 100644
index 00000000000..a3610da0556
--- /dev/null
+++ b/.changeset/chatty-cherries-do.md
@@ -0,0 +1,5 @@
+---
+"@talend/design-system": patch
+---
+
+TMC-27716 - Fix firefox fieldset height
diff --git a/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss b/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss
index 380e681e673..f6fc9a238d6 100644
--- a/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss
+++ b/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss
@@ -3,9 +3,8 @@
 .fieldset {
 	padding: 0;
 	border: none;
-	display: flex;
-	flex-flow: column;
 	gap: tokens.$coral-spacing-s;
+	display: grid;
 }
 
 .legend {

From 61e944428bef772576509eda00f9d37540cb5418 Mon Sep 17 00:00:00 2001
From: Geoffroy Baccarini <gbaccarini@talend.com>
Date: Fri, 29 Mar 2024 11:23:40 +0100
Subject: [PATCH 2/4] use display contents

---
 .../src/components/Form/Fieldset/Fieldset.module.scss          | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss b/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss
index f6fc9a238d6..49c25ca3b49 100644
--- a/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss
+++ b/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss
@@ -3,8 +3,7 @@
 .fieldset {
 	padding: 0;
 	border: none;
-	gap: tokens.$coral-spacing-s;
-	display: grid;
+	display: contents;
 }
 
 .legend {

From 3e0159a9615889e631847699c051bcfff40a5809 Mon Sep 17 00:00:00 2001
From: Geoffroy Baccarini <gbaccarini@talend.com>
Date: Fri, 29 Mar 2024 11:47:02 +0100
Subject: [PATCH 3/4] less painfull fix

---
 .../src/components/Form/Fieldset/Fieldset.module.scss  |  7 ++++++-
 .../src/components/Form/Fieldset/Fieldset.tsx          | 10 ++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss b/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss
index 49c25ca3b49..89d3c439174 100644
--- a/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss
+++ b/packages/design-system/src/components/Form/Fieldset/Fieldset.module.scss
@@ -3,7 +3,6 @@
 .fieldset {
 	padding: 0;
 	border: none;
-	display: contents;
 }
 
 .legend {
@@ -12,3 +11,9 @@
 	font: tokens.$coral-heading-m;
 	margin: 0;
 }
+
+.fieldset-content {
+	display: flex;
+	flex-flow: column;
+	gap: tokens.$coral-spacing-s;
+}
diff --git a/packages/design-system/src/components/Form/Fieldset/Fieldset.tsx b/packages/design-system/src/components/Form/Fieldset/Fieldset.tsx
index 0743f6cd214..e99986fcb78 100644
--- a/packages/design-system/src/components/Form/Fieldset/Fieldset.tsx
+++ b/packages/design-system/src/components/Form/Fieldset/Fieldset.tsx
@@ -1,5 +1,5 @@
 import { Children, cloneElement, forwardRef } from 'react';
-import type { Ref, FieldsetHTMLAttributes } from 'react';
+import type { FieldsetHTMLAttributes, Ref } from 'react';
 import { isElement } from 'react-is';
 
 import styles from './Fieldset.module.scss';
@@ -28,9 +28,11 @@ const Fieldset = forwardRef(
 						{required && '*'}
 					</legend>
 				)}
-				{Children.toArray(children).map(child =>
-					isElement(child) ? cloneElement(child, childrenProps) : child,
-				)}
+				<div className={styles['fieldset-content']}>
+					{Children.toArray(children).map(child =>
+						isElement(child) ? cloneElement(child, childrenProps) : child,
+					)}
+				</div>
 			</fieldset>
 		);
 	},

From 5d699630977b3e64b7baa10e67529c768bab9125 Mon Sep 17 00:00:00 2001
From: Geoffroy Baccarini <gbaccarini@talend.com>
Date: Fri, 29 Mar 2024 14:22:19 +0100
Subject: [PATCH 4/4] fix tests

---
 .../__snapshots__/ComponentForm.test.js.snap  | 160 ++---
 .../Form/__snapshots__/Form.test.tsx.snap     | 568 ++++++++---------
 .../Array.component.test.js.snap              | 594 +++++++++---------
 .../Columns.component.test.js.snap            | 230 +++----
 .../Fieldset.component.test.js.snap           |  58 +-
 .../__snapshots__/Tabs.component.test.js.snap | 114 ++--
 6 files changed, 882 insertions(+), 842 deletions(-)

diff --git a/packages/containers/src/ComponentForm/__snapshots__/ComponentForm.test.js.snap b/packages/containers/src/ComponentForm/__snapshots__/ComponentForm.test.js.snap
index ddf29f61419..0d535c1bebf 100644
--- a/packages/containers/src/ComponentForm/__snapshots__/ComponentForm.test.js.snap
+++ b/packages/containers/src/ComponentForm/__snapshots__/ComponentForm.test.js.snap
@@ -14,111 +14,115 @@ exports[`ComponentForm #render should render a UIForm 1`] = `
       Metadata
     </legend>
     <div
-      class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-    >
-      <label
-        class="theme-label"
-        for="_datasetMetadata_name"
-      >
-        Name
-      </label>
-      <div
-        class="theme-inputShell"
-      >
-        <input
-          aria-invalid="false"
-          class="theme-input"
-          id="_datasetMetadata_name"
-          type="text"
-          value=""
-        />
-      </div>
-    </div>
-    <div
-      aria-busy="false"
+      class="theme-fieldset-content"
     >
       <div
         class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
       >
         <label
           class="theme-label"
-          for="_datasetMetadata_type"
+          for="_datasetMetadata_name"
         >
-          Types
+          Name
         </label>
         <div
-          class="theme-tc-datalist-item"
-          tabindex="-1"
+          class="theme-inputShell"
         >
+          <input
+            aria-invalid="false"
+            class="theme-input"
+            id="_datasetMetadata_name"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        aria-busy="false"
+      >
+        <div
+          class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
+        >
+          <label
+            class="theme-label"
+            for="_datasetMetadata_type"
+          >
+            Types
+          </label>
           <div
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-owns="react-autowhatever-_datasetMetadata_type"
-            class="theme-tc-typeahead-container tc-typeahead-container theme-container tc-datalist-container tc-datalist"
-            role="combobox"
+            class="theme-tc-datalist-item"
+            tabindex="-1"
           >
             <div
-              class="tc-typeahead-typeahead-input-icon theme-typeahead-input-container theme-typeahead-input-caret"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="react-autowhatever-_datasetMetadata_type"
+              class="theme-tc-typeahead-container tc-typeahead-container theme-container tc-datalist-container tc-datalist"
+              role="combobox"
             >
               <div
-                class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
+                class="tc-typeahead-typeahead-input-icon theme-typeahead-input-container theme-typeahead-input-caret"
               >
-                <span
-                  class="theme-hidden"
+                <div
+                  class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
                 >
-                  <label
-                    class="theme-label"
-                    for="_datasetMetadata_type"
-                  />
-                </span>
+                  <span
+                    class="theme-hidden"
+                  >
+                    <label
+                      class="theme-label"
+                      for="_datasetMetadata_type"
+                    />
+                  </span>
+                  <div
+                    class="theme-inputShell"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="react-autowhatever-_datasetMetadata_type"
+                      aria-describedby="_datasetMetadata_type-description _datasetMetadata_type-error"
+                      aria-invalid="false"
+                      autocomplete="off"
+                      class="theme-input theme-typeahead-input tc-typeahead-typeahead-input"
+                      id="_datasetMetadata_type"
+                      type="text"
+                      value=""
+                    />
+                  </div>
+                </div>
                 <div
-                  class="theme-inputShell"
+                  class="icon-cls theme-icon-cls icon-caret theme-icon-caret"
                 >
-                  <input
-                    aria-autocomplete="list"
-                    aria-controls="react-autowhatever-_datasetMetadata_type"
-                    aria-describedby="_datasetMetadata_type-description _datasetMetadata_type-error"
-                    aria-invalid="false"
-                    autocomplete="off"
-                    class="theme-input theme-typeahead-input tc-typeahead-typeahead-input"
-                    id="_datasetMetadata_type"
-                    type="text"
-                    value=""
+                  <svg
+                    aria-hidden="true"
+                    class="tc-svg-icon tc-icon theme-svg tc-icon-name-talend-caret-down"
+                    focusable="false"
+                    name="talend-caret-down"
+                    pointer-events="none"
+                    shape-rendering="geometricPrecision"
                   />
                 </div>
               </div>
-              <div
-                class="icon-cls theme-icon-cls icon-caret theme-icon-caret"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="tc-svg-icon tc-icon theme-svg tc-icon-name-talend-caret-down"
-                  focusable="false"
-                  name="talend-caret-down"
-                  pointer-events="none"
-                  shape-rendering="geometricPrecision"
-                />
-              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-    >
-      <label
-        class="theme-label"
-        for="_datasetMetadata_description"
+      <div
+        class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
       >
-        Description
-      </label>
-      <textarea
-        aria-invalid="false"
-        class="theme-textarea"
-        id="_datasetMetadata_description"
-        rows="5"
-      />
+        <label
+          class="theme-label"
+          for="_datasetMetadata_description"
+        >
+          Description
+        </label>
+        <textarea
+          aria-invalid="false"
+          class="theme-textarea"
+          id="_datasetMetadata_description"
+          rows="5"
+        />
+      </div>
     </div>
   </fieldset>
   <div
diff --git a/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap b/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap
index 1fc078cf1b1..0ee376c907d 100644
--- a/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap
+++ b/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap
@@ -14,358 +14,362 @@ exports[`Form should render a11y html 1`] = `
         Complete your registration
       </legend>
       <div
-        class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
+        class="theme-fieldset-content"
       >
-        <label
-          class="theme-label"
-          for="field--mocked-uuid-0"
-        >
-          Input
-          *
-        </label>
         <div
-          class="theme-inputShell"
+          class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
         >
-          <input
-            class="theme-input"
-            id="field--mocked-uuid-0"
-            name="input"
-            required=""
-            type="text"
-          />
+          <label
+            class="theme-label"
+            for="field--mocked-uuid-0"
+          >
+            Input
+            *
+          </label>
+          <div
+            class="theme-inputShell"
+          >
+            <input
+              class="theme-input"
+              id="field--mocked-uuid-0"
+              name="input"
+              required=""
+              type="text"
+            />
+          </div>
         </div>
-      </div>
-      <div
-        class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-      >
-        <label
-          class="theme-label"
-          for="field--mocked-uuid-1"
-        >
-          Phone
-          *
-        </label>
         <div
-          class="theme-inputShell"
+          class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
         >
-          <input
-            class="theme-input"
-            id="field--mocked-uuid-1"
-            name="tel"
-            required=""
-            type="tel"
-          />
+          <label
+            class="theme-label"
+            for="field--mocked-uuid-1"
+          >
+            Phone
+            *
+          </label>
+          <div
+            class="theme-inputShell"
+          >
+            <input
+              class="theme-input"
+              id="field--mocked-uuid-1"
+              name="tel"
+              required=""
+              type="tel"
+            />
+          </div>
         </div>
-      </div>
-      <div
-        class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-      >
-        <label
-          class="theme-label"
-          for="field--mocked-uuid-2"
-        >
-          Amount
-        </label>
         <div
-          class="theme-inputShell"
+          class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
         >
-          <span
-            class="theme-affix"
+          <label
+            class="theme-label"
+            for="field--mocked-uuid-2"
+          >
+            Amount
+          </label>
+          <div
+            class="theme-inputShell"
           >
             <span
-              class="theme-stack theme-justify-center theme-align-center theme-nowrap theme-row theme-inline theme-gap-x-XXS theme-gap-y-XXS"
+              class="theme-affix"
             >
-              $
+              <span
+                class="theme-stack theme-justify-center theme-align-center theme-nowrap theme-row theme-inline theme-gap-x-XXS theme-gap-y-XXS"
+              >
+                $
+              </span>
             </span>
-          </span>
-          <input
-            class="theme-input"
-            id="field--mocked-uuid-2"
-            name="amount"
-            type="number"
-          />
-          <span
-            class="theme-affix theme-affix_isSuffix"
-          >
+            <input
+              class="theme-input"
+              id="field--mocked-uuid-2"
+              name="amount"
+              type="number"
+            />
             <span
-              class="theme-stack theme-justify-center theme-align-center theme-nowrap theme-row theme-inline theme-gap-x-XXS theme-gap-y-XXS"
+              class="theme-affix theme-affix_isSuffix"
             >
-              .00
+              <span
+                class="theme-stack theme-justify-center theme-align-center theme-nowrap theme-row theme-inline theme-gap-x-XXS theme-gap-y-XXS"
+              >
+                .00
+              </span>
             </span>
-          </span>
+          </div>
         </div>
-      </div>
-      <div
-        class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-      >
-        <label
-          class="theme-label"
-          for="field--mocked-uuid-3"
+        <div
+          class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
         >
-          File
-        </label>
+          <label
+            class="theme-label"
+            for="field--mocked-uuid-3"
+          >
+            File
+          </label>
+          <div
+            aria-describedby="info--mocked-uuid-4"
+            class="theme-wrapper"
+          >
+            <div
+              class="theme-inputFile"
+              id="info--mocked-uuid-4"
+            >
+              <input
+                class="theme-inputFile__input theme-input"
+                id="field--mocked-uuid-3"
+                name="file"
+                type="file"
+              />
+              <div
+                class="theme-inputFile__text theme-text"
+              >
+                <svg
+                  aria-hidden="true"
+                  pointer-events="none"
+                  shape-rendering="geometricPrecision"
+                  style="width: 0.75rem; height: 0.75rem;"
+                >
+                  <use
+                    xlink:href="#upload:S"
+                  />
+                </svg>
+                 
+                <span>
+                  Drop your files or 
+                  <span
+                    class="theme-text__fakeLink"
+                  >
+                    browse
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
         <div
-          aria-describedby="info--mocked-uuid-4"
-          class="theme-wrapper"
+          class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
         >
+          <label
+            class="theme-label"
+            for="field--mocked-uuid-5"
+          >
+            Password
+          </label>
           <div
-            class="theme-inputFile"
-            id="info--mocked-uuid-4"
+            class="theme-inputShell"
           >
             <input
-              class="theme-inputFile__input theme-input"
-              id="field--mocked-uuid-3"
-              name="file"
-              type="file"
+              class="theme-input"
+              id="field--mocked-uuid-5"
+              name="password"
+              type="password"
             />
-            <div
-              class="theme-inputFile__text theme-text"
+            <button
+              aria-describedby="id-mocked-uuid-6"
+              aria-hidden="true"
+              class="theme-clickable theme-button"
+              data-testid="form.password.reveal"
+              tabindex="-1"
+              type="button"
             >
               <svg
                 aria-hidden="true"
                 pointer-events="none"
                 shape-rendering="geometricPrecision"
-                style="width: 0.75rem; height: 0.75rem;"
+                style="width: 1rem; height: 1rem;"
               >
                 <use
-                  xlink:href="#upload:S"
+                  xlink:href="#eye:M"
                 />
               </svg>
-               
-              <span>
-                Drop your files or 
-                <span
-                  class="theme-text__fakeLink"
-                >
-                  browse
-                </span>
-              </span>
-            </div>
+            </button>
           </div>
         </div>
-      </div>
-      <div
-        class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-      >
-        <label
-          class="theme-label"
-          for="field--mocked-uuid-5"
-        >
-          Password
-        </label>
         <div
-          class="theme-inputShell"
+          class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
         >
-          <input
-            class="theme-input"
-            id="field--mocked-uuid-5"
-            name="password"
-            type="password"
-          />
-          <button
-            aria-describedby="id-mocked-uuid-6"
-            aria-hidden="true"
-            class="theme-clickable theme-button"
-            data-testid="form.password.reveal"
-            tabindex="-1"
-            type="button"
+          <label
+            class="theme-label"
+            for="field--mocked-uuid-7"
           >
-            <svg
-              aria-hidden="true"
-              pointer-events="none"
-              shape-rendering="geometricPrecision"
-              style="width: 1rem; height: 1rem;"
+            Search
+          </label>
+          <div
+            class="theme-inputShell"
+          >
+            <span
+              class="theme-icon"
             >
-              <use
-                xlink:href="#eye:M"
-              />
-            </svg>
-          </button>
+              <svg
+                aria-hidden="true"
+                pointer-events="none"
+                shape-rendering="geometricPrecision"
+                style="width: 1rem; height: 1rem;"
+              >
+                <use
+                  xlink:href="#magnifying-glass:M"
+                />
+              </svg>
+            </span>
+            <input
+              class="theme-input"
+              id="field--mocked-uuid-7"
+              name="search"
+              type="search"
+            />
+          </div>
         </div>
-      </div>
-      <div
-        class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-      >
-        <label
-          class="theme-label"
-          for="field--mocked-uuid-7"
-        >
-          Search
-        </label>
         <div
-          class="theme-inputShell"
+          class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
         >
-          <span
-            class="theme-icon"
+          <label
+            class="theme-label"
+            for="field--mocked-uuid-8"
           >
-            <svg
-              aria-hidden="true"
-              pointer-events="none"
-              shape-rendering="geometricPrecision"
-              style="width: 1rem; height: 1rem;"
-            >
-              <use
-                xlink:href="#magnifying-glass:M"
-              />
-            </svg>
-          </span>
-          <input
-            class="theme-input"
-            id="field--mocked-uuid-7"
-            name="search"
-            type="search"
+            Textarea
+          </label>
+          <textarea
+            class="theme-textarea"
+            id="field--mocked-uuid-8"
+            name="textarea"
           />
         </div>
-      </div>
-      <div
-        class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-      >
-        <label
-          class="theme-label"
-          for="field--mocked-uuid-8"
-        >
-          Textarea
-        </label>
-        <textarea
-          class="theme-textarea"
-          id="field--mocked-uuid-8"
-          name="textarea"
-        />
-      </div>
-      <div
-        class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-      >
-        <label
-          class="theme-label"
-          for="field--mocked-uuid-9"
-        >
-          Select
-        </label>
         <div
-          class="theme-inputShell"
+          class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
         >
+          <label
+            class="theme-label"
+            for="field--mocked-uuid-9"
+          >
+            Select
+          </label>
           <div
-            class="theme-select__wrapper"
+            class="theme-inputShell"
           >
-            <select
-              class="theme-select"
-              id="field--mocked-uuid-9"
-              label="Select"
-              name="select"
-            >
-              <option
-                value=""
-              />
-              <option>
-                Foo
-              </option>
-              <option>
-                Bar
-              </option>
-            </select>
             <div
-              class="theme-select__icon"
+              class="theme-select__wrapper"
             >
-              <svg
-                aria-hidden="true"
-                pointer-events="none"
-                shape-rendering="geometricPrecision"
-                style="width: 0.75rem; height: 0.75rem;"
+              <select
+                class="theme-select"
+                id="field--mocked-uuid-9"
+                label="Select"
+                name="select"
               >
-                <use
-                  xlink:href="#chevron-down:S"
+                <option
+                  value=""
                 />
-              </svg>
+                <option>
+                  Foo
+                </option>
+                <option>
+                  Bar
+                </option>
+              </select>
+              <div
+                class="theme-select__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  pointer-events="none"
+                  shape-rendering="geometricPrecision"
+                  style="width: 0.75rem; height: 0.75rem;"
+                >
+                  <use
+                    xlink:href="#chevron-down:S"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <span
-        class="theme-switch theme-switch_checked"
-      >
-        <label
-          for="switch--mocked-uuid-10"
+        <span
+          class="theme-switch theme-switch_checked"
         >
-          <input
-            aria-checked="true"
-            checked=""
-            id="switch--mocked-uuid-10"
-            name="test-checkbox"
-            required=""
-            type="checkbox"
-          />
-          <span
-            class="theme-legend"
+          <label
+            for="switch--mocked-uuid-10"
           >
-            Checkbox
-            *
-          </span>
-        </label>
-      </span>
-      <span
-        class="theme-radio"
-      >
-        <input
-          checked=""
-          id="checkbox--mocked-uuid-11"
-          name="radio"
-          type="radio"
-        />
-        <label
-          class="theme-label theme-label_inline"
-          for="checkbox--mocked-uuid-11"
-        >
-          Radio
-        </label>
-      </span>
-      <span
-        class="theme-switch theme-switch_checked"
-      >
-        <label
-          for="switch--mocked-uuid-12"
+            <input
+              aria-checked="true"
+              checked=""
+              id="switch--mocked-uuid-10"
+              name="test-checkbox"
+              required=""
+              type="checkbox"
+            />
+            <span
+              class="theme-legend"
+            >
+              Checkbox
+              *
+            </span>
+          </label>
+        </span>
+        <span
+          class="theme-radio"
         >
           <input
-            aria-checked="true"
             checked=""
-            id="switch--mocked-uuid-12"
-            name="Switch"
-            type="checkbox"
+            id="checkbox--mocked-uuid-11"
+            name="radio"
+            type="radio"
           />
-          <span
-            class="theme-legend"
+          <label
+            class="theme-label theme-label_inline"
+            for="checkbox--mocked-uuid-11"
           >
-            Switch
-          </span>
-        </label>
-      </span>
-      <div
-        class="theme-buttons"
-      >
-        <div
-          class="theme-stack theme-justify-space-between theme-align-start theme-nowrap theme-row theme-block theme-gap-x-M theme-gap-y-M theme-padding-top-M theme-padding-right-0 theme-padding-bottom-M theme-padding-left-0"
+            Radio
+          </label>
+        </span>
+        <span
+          class="theme-switch theme-switch_checked"
         >
-          <button
-            aria-busy="false"
-            class="theme-clickable theme-button theme-secondary"
-            type="reset"
+          <label
+            for="switch--mocked-uuid-12"
           >
+            <input
+              aria-checked="true"
+              checked=""
+              id="switch--mocked-uuid-12"
+              name="Switch"
+              type="checkbox"
+            />
             <span
-              class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+              class="theme-legend"
             >
-              Reset
+              Switch
             </span>
-          </button>
-          <button
-            aria-busy="false"
-            class="theme-clickable theme-button theme-primary"
-            type="button"
+          </label>
+        </span>
+        <div
+          class="theme-buttons"
+        >
+          <div
+            class="theme-stack theme-justify-space-between theme-align-start theme-nowrap theme-row theme-block theme-gap-x-M theme-gap-y-M theme-padding-top-M theme-padding-right-0 theme-padding-bottom-M theme-padding-left-0"
           >
-            <span
-              class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+            <button
+              aria-busy="false"
+              class="theme-clickable theme-button theme-secondary"
+              type="reset"
             >
-              Submit
-            </span>
-          </button>
+              <span
+                class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+              >
+                Reset
+              </span>
+            </button>
+            <button
+              aria-busy="false"
+              class="theme-clickable theme-button theme-primary"
+              type="button"
+            >
+              <span
+                class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+              >
+                Submit
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </fieldset>
diff --git a/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/Array.component.test.js.snap b/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/Array.component.test.js.snap
index bc2639231f0..0570da83bb9 100644
--- a/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/Array.component.test.js.snap
+++ b/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/Array.component.test.js.snap
@@ -91,118 +91,122 @@ exports[`Array component should render array 1`] = `
           class="theme-fieldset"
         >
           <div
-            class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
+            class="theme-fieldset-content"
           >
-            <label
-              class="theme-label"
-              for="talend-array-0_comments_0_comments_0_name"
-            >
-              Name
-              *
-            </label>
             <div
-              class="theme-inputShell"
+              class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
             >
-              <input
-                aria-invalid="false"
-                aria-required="true"
-                class="theme-input"
-                id="talend-array-0_comments_0_comments_0_name"
-                required=""
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <div
-            class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-          >
-            <label
-              class="theme-label"
-              for="talend-array-0_comments_0_comments_0_email"
-            >
-              Email
-            </label>
-            <div
-              class="theme-inputShell"
-            >
-              <input
-                aria-invalid="false"
-                class="theme-input"
-                id="talend-array-0_comments_0_comments_0_email"
-                type="text"
-                value=""
-              />
+              <label
+                class="theme-label"
+                for="talend-array-0_comments_0_comments_0_name"
+              >
+                Name
+                *
+              </label>
+              <div
+                class="theme-inputShell"
+              >
+                <input
+                  aria-invalid="false"
+                  aria-required="true"
+                  class="theme-input"
+                  id="talend-array-0_comments_0_comments_0_name"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
             </div>
             <div
-              aria-live="polite"
-              class="theme-inlineMessage"
-              role="status"
+              class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
             >
-              <span
-                class="theme-icon theme-information__icon"
+              <label
+                class="theme-label"
+                for="talend-array-0_comments_0_comments_0_email"
               >
-                <svg
-                  aria-hidden="true"
-                  pointer-events="none"
-                  shape-rendering="geometricPrecision"
-                  style="width: 1rem; height: 1rem;"
-                >
-                  <use
-                    xlink:href="#information-filled:M"
-                  />
-                </svg>
-              </span>
-              <p
-                class="theme-inlineMessage__contents"
+                Email
+              </label>
+              <div
+                class="theme-inputShell"
               >
-                <span>
-                  Email will be used for evil.
+                <input
+                  aria-invalid="false"
+                  class="theme-input"
+                  id="talend-array-0_comments_0_comments_0_email"
+                  type="text"
+                  value=""
+                />
+              </div>
+              <div
+                aria-live="polite"
+                class="theme-inlineMessage"
+                role="status"
+              >
+                <span
+                  class="theme-icon theme-information__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    pointer-events="none"
+                    shape-rendering="geometricPrecision"
+                    style="width: 1rem; height: 1rem;"
+                  >
+                    <use
+                      xlink:href="#information-filled:M"
+                    />
+                  </svg>
                 </span>
-              </p>
+                <p
+                  class="theme-inlineMessage__contents"
+                >
+                  <span>
+                    Email will be used for evil.
+                  </span>
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-          >
-            <label
-              class="theme-label"
-              for="talend-array-0_comments_0_comments_0_comment"
-            >
-              Comment
-            </label>
-            <textarea
-              aria-invalid="false"
-              class="theme-textarea"
-              id="talend-array-0_comments_0_comments_0_comment"
-              rows="3"
-            />
             <div
-              aria-live="polite"
-              class="theme-inlineMessage"
-              role="status"
+              class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
             >
-              <span
-                class="theme-icon theme-information__icon"
+              <label
+                class="theme-label"
+                for="talend-array-0_comments_0_comments_0_comment"
               >
-                <svg
-                  aria-hidden="true"
-                  pointer-events="none"
-                  shape-rendering="geometricPrecision"
-                  style="width: 1rem; height: 1rem;"
-                >
-                  <use
-                    xlink:href="#information-filled:M"
-                  />
-                </svg>
-              </span>
-              <p
-                class="theme-inlineMessage__contents"
+                Comment
+              </label>
+              <textarea
+                aria-invalid="false"
+                class="theme-textarea"
+                id="talend-array-0_comments_0_comments_0_comment"
+                rows="3"
+              />
+              <div
+                aria-live="polite"
+                class="theme-inlineMessage"
+                role="status"
               >
-                <span>
-                  Don't be greedy!
+                <span
+                  class="theme-icon theme-information__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    pointer-events="none"
+                    shape-rendering="geometricPrecision"
+                    style="width: 1rem; height: 1rem;"
+                  >
+                    <use
+                      xlink:href="#information-filled:M"
+                    />
+                  </svg>
                 </span>
-              </p>
+                <p
+                  class="theme-inlineMessage__contents"
+                >
+                  <span>
+                    Don't be greedy!
+                  </span>
+                </p>
+              </div>
             </div>
           </div>
         </fieldset>
@@ -299,118 +303,122 @@ exports[`Array component should render array 1`] = `
           class="theme-fieldset"
         >
           <div
-            class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-          >
-            <label
-              class="theme-label"
-              for="talend-array-1_comments_1_comments_1_name"
-            >
-              Name
-              *
-            </label>
-            <div
-              class="theme-inputShell"
-            >
-              <input
-                aria-invalid="false"
-                aria-required="true"
-                class="theme-input"
-                id="talend-array-1_comments_1_comments_1_name"
-                required=""
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <div
-            class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
+            class="theme-fieldset-content"
           >
-            <label
-              class="theme-label"
-              for="talend-array-1_comments_1_comments_1_email"
-            >
-              Email
-            </label>
             <div
-              class="theme-inputShell"
+              class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
             >
-              <input
-                aria-invalid="false"
-                class="theme-input"
-                id="talend-array-1_comments_1_comments_1_email"
-                type="text"
-                value=""
-              />
+              <label
+                class="theme-label"
+                for="talend-array-1_comments_1_comments_1_name"
+              >
+                Name
+                *
+              </label>
+              <div
+                class="theme-inputShell"
+              >
+                <input
+                  aria-invalid="false"
+                  aria-required="true"
+                  class="theme-input"
+                  id="talend-array-1_comments_1_comments_1_name"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
             </div>
             <div
-              aria-live="polite"
-              class="theme-inlineMessage"
-              role="status"
+              class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
             >
-              <span
-                class="theme-icon theme-information__icon"
+              <label
+                class="theme-label"
+                for="talend-array-1_comments_1_comments_1_email"
               >
-                <svg
-                  aria-hidden="true"
-                  pointer-events="none"
-                  shape-rendering="geometricPrecision"
-                  style="width: 1rem; height: 1rem;"
-                >
-                  <use
-                    xlink:href="#information-filled:M"
-                  />
-                </svg>
-              </span>
-              <p
-                class="theme-inlineMessage__contents"
+                Email
+              </label>
+              <div
+                class="theme-inputShell"
+              >
+                <input
+                  aria-invalid="false"
+                  class="theme-input"
+                  id="talend-array-1_comments_1_comments_1_email"
+                  type="text"
+                  value=""
+                />
+              </div>
+              <div
+                aria-live="polite"
+                class="theme-inlineMessage"
+                role="status"
               >
-                <span>
-                  Email will be used for evil.
+                <span
+                  class="theme-icon theme-information__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    pointer-events="none"
+                    shape-rendering="geometricPrecision"
+                    style="width: 1rem; height: 1rem;"
+                  >
+                    <use
+                      xlink:href="#information-filled:M"
+                    />
+                  </svg>
                 </span>
-              </p>
+                <p
+                  class="theme-inlineMessage__contents"
+                >
+                  <span>
+                    Email will be used for evil.
+                  </span>
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-          >
-            <label
-              class="theme-label"
-              for="talend-array-1_comments_1_comments_1_comment"
-            >
-              Comment
-            </label>
-            <textarea
-              aria-invalid="false"
-              class="theme-textarea"
-              id="talend-array-1_comments_1_comments_1_comment"
-              rows="3"
-            />
             <div
-              aria-live="polite"
-              class="theme-inlineMessage"
-              role="status"
+              class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
             >
-              <span
-                class="theme-icon theme-information__icon"
+              <label
+                class="theme-label"
+                for="talend-array-1_comments_1_comments_1_comment"
               >
-                <svg
-                  aria-hidden="true"
-                  pointer-events="none"
-                  shape-rendering="geometricPrecision"
-                  style="width: 1rem; height: 1rem;"
-                >
-                  <use
-                    xlink:href="#information-filled:M"
-                  />
-                </svg>
-              </span>
-              <p
-                class="theme-inlineMessage__contents"
+                Comment
+              </label>
+              <textarea
+                aria-invalid="false"
+                class="theme-textarea"
+                id="talend-array-1_comments_1_comments_1_comment"
+                rows="3"
+              />
+              <div
+                aria-live="polite"
+                class="theme-inlineMessage"
+                role="status"
               >
-                <span>
-                  Don't be greedy!
+                <span
+                  class="theme-icon theme-information__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    pointer-events="none"
+                    shape-rendering="geometricPrecision"
+                    style="width: 1rem; height: 1rem;"
+                  >
+                    <use
+                      xlink:href="#information-filled:M"
+                    />
+                  </svg>
                 </span>
-              </p>
+                <p
+                  class="theme-inlineMessage__contents"
+                >
+                  <span>
+                    Don't be greedy!
+                  </span>
+                </p>
+              </div>
             </div>
           </div>
         </fieldset>
@@ -508,118 +516,122 @@ exports[`Array component should render array 1`] = `
           class="theme-fieldset"
         >
           <div
-            class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
+            class="theme-fieldset-content"
           >
-            <label
-              class="theme-label"
-              for="talend-array-2_comments_2_comments_2_name"
-            >
-              Name
-              *
-            </label>
             <div
-              class="theme-inputShell"
-            >
-              <input
-                aria-invalid="false"
-                aria-required="true"
-                class="theme-input"
-                id="talend-array-2_comments_2_comments_2_name"
-                required=""
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <div
-            class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-          >
-            <label
-              class="theme-label"
-              for="talend-array-2_comments_2_comments_2_email"
+              class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
             >
-              Email
-            </label>
-            <div
-              class="theme-inputShell"
-            >
-              <input
-                aria-invalid="false"
-                class="theme-input"
-                id="talend-array-2_comments_2_comments_2_email"
-                type="text"
-                value=""
-              />
+              <label
+                class="theme-label"
+                for="talend-array-2_comments_2_comments_2_name"
+              >
+                Name
+                *
+              </label>
+              <div
+                class="theme-inputShell"
+              >
+                <input
+                  aria-invalid="false"
+                  aria-required="true"
+                  class="theme-input"
+                  id="talend-array-2_comments_2_comments_2_name"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
             </div>
             <div
-              aria-live="polite"
-              class="theme-inlineMessage"
-              role="status"
+              class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
             >
-              <span
-                class="theme-icon theme-information__icon"
+              <label
+                class="theme-label"
+                for="talend-array-2_comments_2_comments_2_email"
               >
-                <svg
-                  aria-hidden="true"
-                  pointer-events="none"
-                  shape-rendering="geometricPrecision"
-                  style="width: 1rem; height: 1rem;"
-                >
-                  <use
-                    xlink:href="#information-filled:M"
-                  />
-                </svg>
-              </span>
-              <p
-                class="theme-inlineMessage__contents"
+                Email
+              </label>
+              <div
+                class="theme-inputShell"
               >
-                <span>
-                  Email will be used for evil.
+                <input
+                  aria-invalid="false"
+                  class="theme-input"
+                  id="talend-array-2_comments_2_comments_2_email"
+                  type="text"
+                  value=""
+                />
+              </div>
+              <div
+                aria-live="polite"
+                class="theme-inlineMessage"
+                role="status"
+              >
+                <span
+                  class="theme-icon theme-information__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    pointer-events="none"
+                    shape-rendering="geometricPrecision"
+                    style="width: 1rem; height: 1rem;"
+                  >
+                    <use
+                      xlink:href="#information-filled:M"
+                    />
+                  </svg>
                 </span>
-              </p>
+                <p
+                  class="theme-inlineMessage__contents"
+                >
+                  <span>
+                    Email will be used for evil.
+                  </span>
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-          >
-            <label
-              class="theme-label"
-              for="talend-array-2_comments_2_comments_2_comment"
-            >
-              Comment
-            </label>
-            <textarea
-              aria-invalid="false"
-              class="theme-textarea"
-              id="talend-array-2_comments_2_comments_2_comment"
-              rows="3"
-            />
             <div
-              aria-live="polite"
-              class="theme-inlineMessage"
-              role="status"
+              class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
             >
-              <span
-                class="theme-icon theme-information__icon"
+              <label
+                class="theme-label"
+                for="talend-array-2_comments_2_comments_2_comment"
               >
-                <svg
-                  aria-hidden="true"
-                  pointer-events="none"
-                  shape-rendering="geometricPrecision"
-                  style="width: 1rem; height: 1rem;"
-                >
-                  <use
-                    xlink:href="#information-filled:M"
-                  />
-                </svg>
-              </span>
-              <p
-                class="theme-inlineMessage__contents"
+                Comment
+              </label>
+              <textarea
+                aria-invalid="false"
+                class="theme-textarea"
+                id="talend-array-2_comments_2_comments_2_comment"
+                rows="3"
+              />
+              <div
+                aria-live="polite"
+                class="theme-inlineMessage"
+                role="status"
               >
-                <span>
-                  Don't be greedy!
+                <span
+                  class="theme-icon theme-information__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    pointer-events="none"
+                    shape-rendering="geometricPrecision"
+                    style="width: 1rem; height: 1rem;"
+                  >
+                    <use
+                      xlink:href="#information-filled:M"
+                    />
+                  </svg>
                 </span>
-              </p>
+                <p
+                  class="theme-inlineMessage__contents"
+                >
+                  <span>
+                    Don't be greedy!
+                  </span>
+                </p>
+              </div>
             </div>
           </div>
         </fieldset>
diff --git a/packages/forms/src/UIForm/fieldsets/Columns/__snapshots__/Columns.component.test.js.snap b/packages/forms/src/UIForm/fieldsets/Columns/__snapshots__/Columns.component.test.js.snap
index 9d020bb8854..2a286903d8b 100644
--- a/packages/forms/src/UIForm/fieldsets/Columns/__snapshots__/Columns.component.test.js.snap
+++ b/packages/forms/src/UIForm/fieldsets/Columns/__snapshots__/Columns.component.test.js.snap
@@ -10,28 +10,134 @@ exports[`Columns widget should render columns 1`] = `
     My awesome columns
   </legend>
   <div
-    class="theme-row theme-row_stretched"
-    data-form-row="true"
+    class="theme-fieldset-content"
   >
     <div
-      class="theme-item theme-align-auto theme-overflow-auto theme-fullWidth theme-grow theme-shrink"
+      class="theme-row theme-row_stretched"
+      data-form-row="true"
     >
-      <fieldset
-        class="theme-fieldset"
+      <div
+        class="theme-item theme-align-auto theme-overflow-auto theme-fullWidth theme-grow theme-shrink"
       >
-        <legend
-          class="theme-legend"
+        <fieldset
+          class="theme-fieldset"
         >
-          User Fieldset
-        </legend>
+          <legend
+            class="theme-legend"
+          >
+            User Fieldset
+          </legend>
+          <div
+            class="theme-fieldset-content"
+          >
+            <div
+              class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
+            >
+              <label
+                class="theme-label"
+                for="lastname"
+              >
+                Last Name (with description)
+              </label>
+              <div
+                class="theme-inputShell"
+              >
+                <input
+                  aria-invalid="false"
+                  class="theme-input"
+                  id="lastname"
+                  type="text"
+                  value=""
+                />
+              </div>
+              <div
+                aria-live="polite"
+                class="theme-inlineMessage"
+                role="status"
+              >
+                <span
+                  class="theme-icon theme-information__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    pointer-events="none"
+                    shape-rendering="geometricPrecision"
+                    style="width: 1rem; height: 1rem;"
+                  >
+                    <use
+                      xlink:href="#information-filled:M"
+                    />
+                  </svg>
+                </span>
+                <p
+                  class="theme-inlineMessage__contents"
+                >
+                  <span>
+                    Hint: this is the last name
+                  </span>
+                </p>
+              </div>
+            </div>
+            <div
+              class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
+            >
+              <label
+                class="theme-label"
+                for="firstname"
+              >
+                First Name (with placeholder)
+                *
+              </label>
+              <div
+                class="theme-inputShell"
+              >
+                <input
+                  aria-invalid="false"
+                  aria-required="true"
+                  class="theme-input"
+                  id="firstname"
+                  placeholder="Enter your firstname here"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <div
+              class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
+            >
+              <label
+                class="theme-label"
+                for="age"
+              >
+                Age
+              </label>
+              <div
+                class="theme-inputShell"
+              >
+                <input
+                  aria-invalid="false"
+                  class="theme-input"
+                  id="age"
+                  type="number"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+      <div
+        class="theme-item theme-align-auto theme-overflow-auto theme-fullWidth theme-grow theme-shrink"
+      >
         <div
           class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
         >
           <label
             class="theme-label"
-            for="lastname"
+            for="singleInput"
           >
-            Last Name (with description)
+            singleInput
           </label>
           <div
             class="theme-inputShell"
@@ -39,7 +145,7 @@ exports[`Columns widget should render columns 1`] = `
             <input
               aria-invalid="false"
               class="theme-input"
-              id="lastname"
+              id="singleInput"
               type="text"
               value=""
             />
@@ -67,109 +173,11 @@ exports[`Columns widget should render columns 1`] = `
               class="theme-inlineMessage__contents"
             >
               <span>
-                Hint: this is the last name
+                This one is a column composed by a single input
               </span>
             </p>
           </div>
         </div>
-        <div
-          class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-        >
-          <label
-            class="theme-label"
-            for="firstname"
-          >
-            First Name (with placeholder)
-            *
-          </label>
-          <div
-            class="theme-inputShell"
-          >
-            <input
-              aria-invalid="false"
-              aria-required="true"
-              class="theme-input"
-              id="firstname"
-              placeholder="Enter your firstname here"
-              required=""
-              type="text"
-              value=""
-            />
-          </div>
-        </div>
-        <div
-          class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-        >
-          <label
-            class="theme-label"
-            for="age"
-          >
-            Age
-          </label>
-          <div
-            class="theme-inputShell"
-          >
-            <input
-              aria-invalid="false"
-              class="theme-input"
-              id="age"
-              type="number"
-              value=""
-            />
-          </div>
-        </div>
-      </fieldset>
-    </div>
-    <div
-      class="theme-item theme-align-auto theme-overflow-auto theme-fullWidth theme-grow theme-shrink"
-    >
-      <div
-        class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-      >
-        <label
-          class="theme-label"
-          for="singleInput"
-        >
-          singleInput
-        </label>
-        <div
-          class="theme-inputShell"
-        >
-          <input
-            aria-invalid="false"
-            class="theme-input"
-            id="singleInput"
-            type="text"
-            value=""
-          />
-        </div>
-        <div
-          aria-live="polite"
-          class="theme-inlineMessage"
-          role="status"
-        >
-          <span
-            class="theme-icon theme-information__icon"
-          >
-            <svg
-              aria-hidden="true"
-              pointer-events="none"
-              shape-rendering="geometricPrecision"
-              style="width: 1rem; height: 1rem;"
-            >
-              <use
-                xlink:href="#information-filled:M"
-              />
-            </svg>
-          </span>
-          <p
-            class="theme-inlineMessage__contents"
-          >
-            <span>
-              This one is a column composed by a single input
-            </span>
-          </p>
-        </div>
       </div>
     </div>
   </div>
diff --git a/packages/forms/src/UIForm/fieldsets/Fieldset/__snapshots__/Fieldset.component.test.js.snap b/packages/forms/src/UIForm/fieldsets/Fieldset/__snapshots__/Fieldset.component.test.js.snap
index c9372d1ddd2..cc0675826bd 100644
--- a/packages/forms/src/UIForm/fieldsets/Fieldset/__snapshots__/Fieldset.component.test.js.snap
+++ b/packages/forms/src/UIForm/fieldsets/Fieldset/__snapshots__/Fieldset.component.test.js.snap
@@ -10,41 +10,45 @@ exports[`Fieldset widget should render fieldset 1`] = `
     My fieldset
   </legend>
   <div
-    class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
+    class="theme-fieldset-content"
   >
-    <label
-      class="theme-label"
-      for="user_firstname"
-    />
     <div
-      class="theme-inputShell"
+      class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
     >
-      <input
-        aria-invalid="false"
-        class="theme-input"
-        id="user_firstname"
-        type="text"
-        value=""
+      <label
+        class="theme-label"
+        for="user_firstname"
       />
+      <div
+        class="theme-inputShell"
+      >
+        <input
+          aria-invalid="false"
+          class="theme-input"
+          id="user_firstname"
+          type="text"
+          value=""
+        />
+      </div>
     </div>
-  </div>
-  <div
-    class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-  >
-    <label
-      class="theme-label"
-      for="user_lastname"
-    />
     <div
-      class="theme-inputShell"
+      class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
     >
-      <input
-        aria-invalid="false"
-        class="theme-input"
-        id="user_lastname"
-        type="text"
-        value=""
+      <label
+        class="theme-label"
+        for="user_lastname"
       />
+      <div
+        class="theme-inputShell"
+      >
+        <input
+          aria-invalid="false"
+          class="theme-input"
+          id="user_lastname"
+          type="text"
+          value=""
+        />
+      </div>
     </div>
   </div>
 </fieldset>
diff --git a/packages/forms/src/UIForm/fieldsets/Tabs/__snapshots__/Tabs.component.test.js.snap b/packages/forms/src/UIForm/fieldsets/Tabs/__snapshots__/Tabs.component.test.js.snap
index 1f09efb2fde..96a7d637d0c 100644
--- a/packages/forms/src/UIForm/fieldsets/Tabs/__snapshots__/Tabs.component.test.js.snap
+++ b/packages/forms/src/UIForm/fieldsets/Tabs/__snapshots__/Tabs.component.test.js.snap
@@ -53,49 +53,53 @@ exports[`Tabs widget should render tabs 1`] = `
       <fieldset
         class="theme-fieldset"
       >
-        <span
-          class="theme-hidden"
-        >
-          <legend>
-            User
-          </legend>
-        </span>
         <div
-          class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
+          class="theme-fieldset-content"
         >
-          <label
-            class="theme-label"
-            for="user_firstname"
-          />
+          <span
+            class="theme-hidden"
+          >
+            <legend>
+              User
+            </legend>
+          </span>
           <div
-            class="theme-inputShell"
+            class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
           >
-            <input
-              aria-invalid="false"
-              class="theme-input"
-              id="user_firstname"
-              type="text"
-              value=""
+            <label
+              class="theme-label"
+              for="user_firstname"
             />
+            <div
+              class="theme-inputShell"
+            >
+              <input
+                aria-invalid="false"
+                class="theme-input"
+                id="user_firstname"
+                type="text"
+                value=""
+              />
+            </div>
           </div>
-        </div>
-        <div
-          class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
-        >
-          <label
-            class="theme-label"
-            for="user_lastname"
-          />
           <div
-            class="theme-inputShell"
+            class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
           >
-            <input
-              aria-invalid="false"
-              class="theme-input"
-              id="user_lastname"
-              type="text"
-              value=""
+            <label
+              class="theme-label"
+              for="user_lastname"
             />
+            <div
+              class="theme-inputShell"
+            >
+              <input
+                aria-invalid="false"
+                class="theme-input"
+                id="user_lastname"
+                type="text"
+                value=""
+              />
+            </div>
           </div>
         </div>
       </fieldset>
@@ -109,30 +113,34 @@ exports[`Tabs widget should render tabs 1`] = `
       <fieldset
         class="theme-fieldset"
       >
-        <span
-          class="theme-hidden"
-        >
-          <legend>
-            Other
-          </legend>
-        </span>
         <div
-          class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
+          class="theme-fieldset-content"
         >
-          <label
-            class="theme-label"
-            for="comment"
-          />
+          <span
+            class="theme-hidden"
+          >
+            <legend>
+              Other
+            </legend>
+          </span>
           <div
-            class="theme-inputShell"
+            class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
           >
-            <input
-              aria-invalid="false"
-              class="theme-input"
-              id="comment"
-              type="text"
-              value=""
+            <label
+              class="theme-label"
+              for="comment"
             />
+            <div
+              class="theme-inputShell"
+            >
+              <input
+                aria-invalid="false"
+                class="theme-input"
+                id="comment"
+                type="text"
+                value=""
+              />
+            </div>
           </div>
         </div>
       </fieldset>