diff --git a/packages/core/content-type-builder/admin/src/components/AttributeIcon/index.js b/packages/core/content-type-builder/admin/src/components/AttributeIcon/index.js
index c0c37e443a..33b137ea28 100644
--- a/packages/core/content-type-builder/admin/src/components/AttributeIcon/index.js
+++ b/packages/core/content-type-builder/admin/src/components/AttributeIcon/index.js
@@ -53,10 +53,7 @@ const iconByTypes = {
 };
 
 const IconBox = styled(Box)`
-  width: ${pxToRem(32)};
-  height: ${pxToRem(24)};
   box-sizing: content-box;
-  flex-shrink: 0;
 `;
 
 const AttributeIcon = ({ type, customField, ...rest }) => {
@@ -76,7 +73,9 @@ const AttributeIcon = ({ type, customField, ...rest }) => {
     return null;
   }
 
-  return <IconBox as={Compo} {...rest} aria-hidden />;
+  return (
+    <IconBox height={pxToRem(24)} width={pxToRem(32)} shrink={0} as={Compo} {...rest} aria-hidden />
+  );
 };
 
 AttributeIcon.defaultProps = {
diff --git a/packages/core/content-type-builder/admin/src/components/AttributeOptions/tests/__snapshots__/index.test.js.snap b/packages/core/content-type-builder/admin/src/components/AttributeOptions/tests/__snapshots__/index.test.js.snap
index a9cf4266ef..174caa34cf 100644
--- a/packages/core/content-type-builder/admin/src/components/AttributeOptions/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/content-type-builder/admin/src/components/AttributeOptions/tests/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
-.c26 {
+.c27 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -39,11 +39,19 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c22 {
+.c21 {
+  width: 2rem;
+  height: 1.5rem;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c23 {
   padding-left: 16px;
 }
 
-.c25 {
+.c26 {
   padding-bottom: 4px;
   padding-left: 8px;
 }
@@ -117,14 +125,14 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
   color: #666687;
 }
 
-.c23 {
+.c24 {
   font-size: 0.875rem;
   line-height: 1.43;
   font-weight: 600;
   color: #32324d;
 }
 
-.c24 {
+.c25 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #666687;
@@ -175,9 +183,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
   max-width: 100%;
 }
 
-.c21 {
-  width: 2rem;
-  height: 1.5rem;
+.c22 {
   box-sizing: content-box;
 }
 
@@ -307,11 +313,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="c21"
+                            class="c21 c22"
                             fill="none"
-                            height="1em"
+                            height="1.5rem"
                             viewBox="0 0 32 24"
-                            width="1em"
+                            width="2rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <rect
@@ -329,13 +335,13 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                             />
                           </svg>
                           <div
-                            class="c22"
+                            class="c23"
                           >
                             <div
                               class="c20"
                             >
                               <span
-                                class="c23"
+                                class="c24"
                               >
                                 text
                               </span>
@@ -344,7 +350,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                               class="c20"
                             >
                               <span
-                                class="c24"
+                                class="c25"
                               >
                                 A type for modeling data
                               </span>
@@ -363,7 +369,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                     style="height: 100%;"
                   >
                     <div
-                      class="c25"
+                      class="c26"
                       style="height: 100%;"
                     >
                       <button
@@ -375,11 +381,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="c21"
+                            class="c21 c22"
                             fill="none"
-                            height="1em"
+                            height="1.5rem"
                             viewBox="0 0 32 24"
-                            width="1em"
+                            width="2rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <rect
@@ -397,13 +403,13 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                             />
                           </svg>
                           <div
-                            class="c22"
+                            class="c23"
                           >
                             <div
                               class="c20"
                             >
                               <span
-                                class="c23"
+                                class="c24"
                               >
                                 email
                               </span>
@@ -412,7 +418,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                               class="c20"
                             >
                               <span
-                                class="c24"
+                                class="c25"
                               >
                                 A type for modeling data
                               </span>
@@ -443,11 +449,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="c21"
+                            class="c21 c22"
                             fill="none"
-                            height="1em"
+                            height="1.5rem"
                             viewBox="0 0 32 24"
-                            width="1em"
+                            width="2rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <rect
@@ -467,13 +473,13 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                             />
                           </svg>
                           <div
-                            class="c22"
+                            class="c23"
                           >
                             <div
                               class="c20"
                             >
                               <span
-                                class="c23"
+                                class="c24"
                               >
                                 richtext
                               </span>
@@ -482,7 +488,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                               class="c20"
                             >
                               <span
-                                class="c24"
+                                class="c25"
                               >
                                 A type for modeling data
                               </span>
@@ -501,7 +507,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                     style="height: 100%;"
                   >
                     <div
-                      class="c25"
+                      class="c26"
                       style="height: 100%;"
                     >
                       <button
@@ -513,11 +519,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="c21"
+                            class="c21 c22"
                             fill="none"
-                            height="1em"
+                            height="1.5rem"
                             viewBox="0 0 32 24"
-                            width="1em"
+                            width="2rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
@@ -531,13 +537,13 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                             />
                           </svg>
                           <div
-                            class="c22"
+                            class="c23"
                           >
                             <div
                               class="c20"
                             >
                               <span
-                                class="c23"
+                                class="c24"
                               >
                                 password
                               </span>
@@ -546,7 +552,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                               class="c20"
                             >
                               <span
-                                class="c24"
+                                class="c25"
                               >
                                 A type for modeling data
                               </span>
@@ -577,11 +583,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="c21"
+                            class="c21 c22"
                             fill="none"
-                            height="1em"
+                            height="1.5rem"
                             viewBox="0 0 32 24"
-                            width="1em"
+                            width="2rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <rect
@@ -599,13 +605,13 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                             />
                           </svg>
                           <div
-                            class="c22"
+                            class="c23"
                           >
                             <div
                               class="c20"
                             >
                               <span
-                                class="c23"
+                                class="c24"
                               >
                                 number
                               </span>
@@ -614,7 +620,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                               class="c20"
                             >
                               <span
-                                class="c24"
+                                class="c25"
                               >
                                 A type for modeling data
                               </span>
@@ -633,7 +639,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                     style="height: 100%;"
                   >
                     <div
-                      class="c25"
+                      class="c26"
                       style="height: 100%;"
                     >
                       <button
@@ -645,11 +651,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="c21"
+                            class="c21 c22"
                             fill="none"
-                            height="1em"
+                            height="1.5rem"
                             viewBox="0 0 32 24"
-                            width="1em"
+                            width="2rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <rect
@@ -669,13 +675,13 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                             />
                           </svg>
                           <div
-                            class="c22"
+                            class="c23"
                           >
                             <div
                               class="c20"
                             >
                               <span
-                                class="c23"
+                                class="c24"
                               >
                                 enumeration
                               </span>
@@ -684,7 +690,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                               class="c20"
                             >
                               <span
-                                class="c24"
+                                class="c25"
                               >
                                 A type for modeling data
                               </span>
@@ -715,11 +721,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="c21"
+                            class="c21 c22"
                             fill="none"
-                            height="1em"
+                            height="1.5rem"
                             viewBox="0 0 32 24"
-                            width="1em"
+                            width="2rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
@@ -735,13 +741,13 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                             />
                           </svg>
                           <div
-                            class="c22"
+                            class="c23"
                           >
                             <div
                               class="c20"
                             >
                               <span
-                                class="c23"
+                                class="c24"
                               >
                                 date
                               </span>
@@ -750,7 +756,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                               class="c20"
                             >
                               <span
-                                class="c24"
+                                class="c25"
                               >
                                 A type for modeling data
                               </span>
@@ -769,7 +775,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                     style="height: 100%;"
                   >
                     <div
-                      class="c25"
+                      class="c26"
                       style="height: 100%;"
                     >
                       <button
@@ -781,11 +787,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="c21"
+                            class="c21 c22"
                             fill="none"
-                            height="1em"
+                            height="1.5rem"
                             viewBox="0 0 32 24"
-                            width="1em"
+                            width="2rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <rect
@@ -805,13 +811,13 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                             />
                           </svg>
                           <div
-                            class="c22"
+                            class="c23"
                           >
                             <div
                               class="c20"
                             >
                               <span
-                                class="c23"
+                                class="c24"
                               >
                                 media
                               </span>
@@ -820,7 +826,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                               class="c20"
                             >
                               <span
-                                class="c24"
+                                class="c25"
                               >
                                 A type for modeling data
                               </span>
@@ -851,11 +857,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="c21"
+                            class="c21 c22"
                             fill="none"
-                            height="1em"
+                            height="1.5rem"
                             viewBox="0 0 32 24"
-                            width="1em"
+                            width="2rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <rect
@@ -873,13 +879,13 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                             />
                           </svg>
                           <div
-                            class="c22"
+                            class="c23"
                           >
                             <div
                               class="c20"
                             >
                               <span
-                                class="c23"
+                                class="c24"
                               >
                                 boolean
                               </span>
@@ -888,7 +894,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                               class="c20"
                             >
                               <span
-                                class="c24"
+                                class="c25"
                               >
                                 A type for modeling data
                               </span>
@@ -907,7 +913,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                     style="height: 100%;"
                   >
                     <div
-                      class="c25"
+                      class="c26"
                       style="height: 100%;"
                     >
                       <button
@@ -919,11 +925,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="c21"
+                            class="c21 c22"
                             fill="none"
-                            height="1em"
+                            height="1.5rem"
                             viewBox="0 0 32 24"
-                            width="1em"
+                            width="2rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <rect
@@ -943,13 +949,13 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                             />
                           </svg>
                           <div
-                            class="c22"
+                            class="c23"
                           >
                             <div
                               class="c20"
                             >
                               <span
-                                class="c23"
+                                class="c24"
                               >
                                 json
                               </span>
@@ -958,7 +964,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                               class="c20"
                             >
                               <span
-                                class="c24"
+                                class="c25"
                               >
                                 A type for modeling data
                               </span>
@@ -989,11 +995,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="c21"
+                            class="c21 c22"
                             fill="none"
-                            height="1em"
+                            height="1.5rem"
                             viewBox="0 0 32 24"
-                            width="1em"
+                            width="2rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
@@ -1009,13 +1015,13 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                             />
                           </svg>
                           <div
-                            class="c22"
+                            class="c23"
                           >
                             <div
                               class="c20"
                             >
                               <span
-                                class="c23"
+                                class="c24"
                               >
                                 relation
                               </span>
@@ -1024,7 +1030,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                               class="c20"
                             >
                               <span
-                                class="c24"
+                                class="c25"
                               >
                                 A type for modeling data
                               </span>
@@ -1043,7 +1049,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                     style="height: 100%;"
                   >
                     <div
-                      class="c25"
+                      class="c26"
                       style="height: 100%;"
                     >
                       <button
@@ -1055,11 +1061,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="c21"
+                            class="c21 c22"
                             fill="none"
-                            height="1em"
+                            height="1.5rem"
                             viewBox="0 0 32 24"
-                            width="1em"
+                            width="2rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
@@ -1073,13 +1079,13 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                             />
                           </svg>
                           <div
-                            class="c22"
+                            class="c23"
                           >
                             <div
                               class="c20"
                             >
                               <span
-                                class="c23"
+                                class="c24"
                               >
                                 uid
                               </span>
@@ -1088,7 +1094,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                               class="c20"
                             >
                               <span
-                                class="c24"
+                                class="c25"
                               >
                                 A type for modeling data
                               </span>
@@ -1123,11 +1129,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="c21"
+                            class="c21 c22"
                             fill="none"
-                            height="1em"
+                            height="1.5rem"
                             viewBox="0 0 32 24"
-                            width="1em"
+                            width="2rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <rect
@@ -1151,13 +1157,13 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                             />
                           </svg>
                           <div
-                            class="c22"
+                            class="c23"
                           >
                             <div
                               class="c20"
                             >
                               <span
-                                class="c23"
+                                class="c24"
                               >
                                 component
                               </span>
@@ -1166,7 +1172,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                               class="c20"
                             >
                               <span
-                                class="c24"
+                                class="c25"
                               >
                                 A type for modeling data
                               </span>
@@ -1185,7 +1191,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                     style="height: 100%;"
                   >
                     <div
-                      class="c25"
+                      class="c26"
                       style="height: 100%;"
                     >
                       <button
@@ -1197,11 +1203,11 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="c21"
+                            class="c21 c22"
                             fill="none"
-                            height="1em"
+                            height="1.5rem"
                             viewBox="0 0 32 24"
-                            width="1em"
+                            width="2rem"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <rect
@@ -1219,13 +1225,13 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                             />
                           </svg>
                           <div
-                            class="c22"
+                            class="c23"
                           >
                             <div
                               class="c20"
                             >
                               <span
-                                class="c23"
+                                class="c24"
                               >
                                 dynamiczone
                               </span>
@@ -1234,7 +1240,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
                               class="c20"
                             >
                               <span
-                                class="c24"
+                                class="c25"
                               >
                                 A type for modeling data
                               </span>
@@ -1253,7 +1259,7 @@ exports[`<AttributeOptions /> renders and matches the snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c26"
+    class="c27"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap b/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap
index 71bef19aa0..66e595a53c 100644
--- a/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ListView /> renders and matches the snapshot 1`] = `
-.c63 {
+.c64 {
   font-size: 0.75rem;
   line-height: 1.33;
   display: block;
@@ -12,7 +12,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c55 {
+.c56 {
   padding-right: 16px;
   padding-left: 16px;
   border-radius: borderRadius;
@@ -21,20 +21,20 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   flex-shrink: 0;
 }
 
-.c58 {
+.c59 {
   background: #d9d8ff;
 }
 
-.c61 {
+.c62 {
   margin-top: 4px;
   max-width: 100%;
 }
 
-.c66 {
+.c67 {
   background: #dcdce4;
 }
 
-.c56 {
+.c57 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -55,7 +55,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   justify-content: center;
 }
 
-.c59 {
+.c60 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -73,7 +73,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   justify-content: center;
 }
 
-.c36 {
+.c37 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -125,36 +125,44 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   padding-left: 8px;
 }
 
-.c38 {
+.c31 {
+  width: 2rem;
+  height: 1.5rem;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c39 {
   padding-left: 24px;
 }
 
-.c41 {
+.c42 {
   padding-top: 16px;
   padding-bottom: 16px;
 }
 
-.c43 {
+.c44 {
   background: #dcdce4;
 }
 
-.c45 {
+.c46 {
   padding-left: 12px;
 }
 
-.c48 {
+.c49 {
   padding-left: 40px;
 }
 
-.c70 {
+.c71 {
   background: #d9d8ff;
 }
 
-.c72 {
+.c73 {
   background: #eaeaef;
 }
 
-.c74 {
+.c75 {
   background: #f0f0ff;
   padding: 20px;
 }
@@ -257,27 +265,27 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   color: #666687;
 }
 
-.c32 {
+.c33 {
   font-size: 0.875rem;
   line-height: 1.43;
   font-weight: 600;
   color: #32324d;
 }
 
-.c33 {
+.c34 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c46 {
+.c47 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #666687;
 }
 
-.c54 {
+.c55 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
@@ -293,12 +301,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   margin-top: 16px;
 }
 
-.c51 > * {
+.c52 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c51 > * + * {
+.c52 > * + * {
   margin-top: 4px;
 }
 
@@ -320,12 +328,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   margin-left: 16px;
 }
 
-.c34 > * {
+.c35 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c34 > * + * {
+.c35 > * + * {
   margin-left: 4px;
 }
 
@@ -613,7 +621,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   fill: #ffffff;
 }
 
-.c73 {
+.c74 {
   height: 1px;
   border: none;
   -webkit-flex-shrink: 0;
@@ -622,7 +630,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   margin: 0;
 }
 
-.c76 {
+.c77 {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 50%;
@@ -640,23 +648,23 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c76 svg {
+.c77 svg {
   height: 0.625rem;
   width: 0.625rem;
 }
 
-.c76 svg path {
+.c77 svg path {
   fill: #4945ff;
 }
 
-.c75 {
+.c76 {
   border-radius: 0 0 4px 4px;
   display: block;
   width: 100%;
   border: none;
 }
 
-.c35 {
+.c36 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -674,26 +682,26 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c35 svg > g,
-.c35 svg path {
+.c36 svg > g,
+.c36 svg path {
   fill: #8e8ea9;
 }
 
-.c35:hover svg > g,
-.c35:hover svg path {
+.c36:hover svg > g,
+.c36:hover svg path {
   fill: #666687;
 }
 
-.c35:active svg > g,
-.c35:active svg path {
+.c36:active svg > g,
+.c36:active svg path {
   fill: #a5a5ba;
 }
 
-.c35[aria-disabled='true'] {
+.c36[aria-disabled='true'] {
   background-color: #eaeaef;
 }
 
-.c35[aria-disabled='true'] svg path {
+.c36[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
@@ -757,47 +765,47 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   display: flex;
 }
 
-.c60 {
+.c61 {
   border-radius: 50%;
   color: #4945ff;
   height: 40px;
   width: 40px;
 }
 
-.c60 svg {
+.c61 svg {
   height: 20px;
   width: 20px;
 }
 
-.c67 {
+.c68 {
   border-radius: 50%;
   color: #666687;
   height: 40px;
   width: 40px;
 }
 
-.c67 svg {
+.c68 svg {
   height: 20px;
   width: 20px;
 }
 
-.c65 {
+.c66 {
   position: absolute;
   display: none;
   top: 5px;
   right: 0.5rem;
 }
 
-.c65 svg {
+.c66 svg {
   width: 0.625rem;
   height: 0.625rem;
 }
 
-.c65 svg path {
+.c66 svg path {
   fill: #4945ff;
 }
 
-.c57 {
+.c58 {
   width: 8.75rem;
   height: 5rem;
   position: relative;
@@ -807,51 +815,51 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   max-width: 100%;
 }
 
-.c57.active,
-.c57:focus,
-.c57:hover {
+.c58.active,
+.c58:focus,
+.c58:hover {
   border: 1px solid #d9d8ff;
   background: #f0f0ff;
 }
 
-.c57.active .c64,
-.c57:focus .c64,
-.c57:hover .c64 {
+.c58.active .c65,
+.c58:focus .c65,
+.c58:hover .c65 {
   display: block;
 }
 
-.c57.active .c62,
-.c57:focus .c62,
-.c57:hover .c62 {
+.c58.active .c63,
+.c58:focus .c63,
+.c58:hover .c63 {
   color: #4945ff;
 }
 
-.c57.active > div:first-child,
-.c57:focus > div:first-child,
-.c57:hover > div:first-child {
+.c58.active > div:first-child,
+.c58:focus > div:first-child,
+.c58:hover > div:first-child {
   background: #d9d8ff;
   color: #4945ff;
 }
 
-.c37.component-row,
-.c37.dynamiczone-row {
+.c38.component-row,
+.c38.dynamiczone-row {
   position: relative;
   border-top: none !important;
 }
 
-.c37.component-row table tr:first-child,
-.c37.dynamiczone-row table tr:first-child {
+.c38.component-row table tr:first-child,
+.c38.dynamiczone-row table tr:first-child {
   border-top: none;
 }
 
-.c37.component-row > td:first-of-type,
-.c37.dynamiczone-row > td:first-of-type {
+.c38.component-row > td:first-of-type,
+.c38.dynamiczone-row > td:first-of-type {
   padding: 0 0 0 1.25rem;
   position: relative;
 }
 
-.c37.component-row > td:first-of-type::before,
-.c37.dynamiczone-row > td:first-of-type::before {
+.c38.component-row > td:first-of-type::before,
+.c38.dynamiczone-row > td:first-of-type::before {
   content: '';
   width: 0.25rem;
   height: calc(100% - 40px);
@@ -862,29 +870,29 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background: #eaeaef;
 }
 
-.c37.dynamiczone-row > td:first-of-type {
+.c38.dynamiczone-row > td:first-of-type {
   padding: 0;
 }
 
-.c47.component-row,
-.c47.dynamiczone-row {
+.c48.component-row,
+.c48.dynamiczone-row {
   position: relative;
   border-top: none !important;
 }
 
-.c47.component-row table tr:first-child,
-.c47.dynamiczone-row table tr:first-child {
+.c48.component-row table tr:first-child,
+.c48.dynamiczone-row table tr:first-child {
   border-top: none;
 }
 
-.c47.component-row > td:first-of-type,
-.c47.dynamiczone-row > td:first-of-type {
+.c48.component-row > td:first-of-type,
+.c48.dynamiczone-row > td:first-of-type {
   padding: 0 0 0 1.25rem;
   position: relative;
 }
 
-.c47.component-row > td:first-of-type::before,
-.c47.dynamiczone-row > td:first-of-type::before {
+.c48.component-row > td:first-of-type::before,
+.c48.dynamiczone-row > td:first-of-type::before {
   content: '';
   width: 0.25rem;
   height: calc(100% - 40px);
@@ -895,11 +903,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background-color: #d9d8ff;
 }
 
-.c47.dynamiczone-row > td:first-of-type {
+.c48.dynamiczone-row > td:first-of-type {
   padding: 0;
 }
 
-.c53 {
+.c54 {
   width: 2rem;
   height: 2rem;
   padding: 0.5625rem;
@@ -907,11 +915,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c53 path {
+.c54 path {
   fill: #4945ff;
 }
 
-.c49 {
+.c50 {
   height: 5.625rem;
   position: absolute;
   width: 100%;
@@ -919,16 +927,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   left: 0;
 }
 
-.c50 {
+.c51 {
   width: 100%;
   overflow-x: auto;
 }
 
-.c68 {
+.c69 {
   padding-top: 5.625rem;
 }
 
-.c52 {
+.c53 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -979,7 +987,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   outline-offset: -4px;
 }
 
-.c44 {
+.c45 {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 50%;
@@ -997,16 +1005,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c44 svg {
+.c45 svg {
   height: 0.625rem;
   width: 0.625rem;
 }
 
-.c44 svg path {
+.c45 svg path {
   fill: #666687;
 }
 
-.c71 {
+.c72 {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 50%;
@@ -1024,16 +1032,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c71 svg {
+.c72 svg {
   height: 0.625rem;
   width: 0.625rem;
 }
 
-.c71 svg path {
+.c72 svg path {
   fill: #4945ff;
 }
 
-.c42 {
+.c43 {
   border-radius: 0 0 4px 4px;
   display: block;
   width: 100%;
@@ -1042,20 +1050,20 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   left: -0.25rem;
 }
 
-.c39 {
+.c40 {
   position: absolute;
   left: -1.125rem;
   top: 0px;
 }
 
-.c39:before {
+.c40:before {
   content: '';
   width: 0.25rem;
   height: 0.75rem;
   display: block;
 }
 
-.c40 {
+.c41 {
   position: relative;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1065,11 +1073,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   transform: translate(-0.5px,-1px);
 }
 
-.c40 * {
+.c41 * {
   fill: #eaeaef;
 }
 
-.c69 {
+.c70 {
   position: relative;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1079,7 +1087,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   transform: translate(-0.5px,-1px);
 }
 
-.c69 * {
+.c70 * {
   fill: #d9d8ff;
 }
 
@@ -1087,9 +1095,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
   position: relative;
 }
 
-.c31 {
-  width: 2rem;
-  height: 1.5rem;
+.c32 {
   box-sizing: content-box;
 }
 
@@ -1338,11 +1344,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                     >
                       <svg
                         aria-hidden="true"
-                        class="c0 c31"
+                        class="c0 c31 c32"
                         fill="none"
-                        height="1em"
+                        height="1.5rem"
                         viewBox="0 0 32 24"
-                        width="1em"
+                        width="2rem"
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <rect
@@ -1360,7 +1366,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <span
-                        class="c6 c32"
+                        class="c6 c33"
                       >
                         postal_code
                       </span>
@@ -1368,7 +1374,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c6 c33"
+                      class="c6 c34"
                     >
                       Text
                        
@@ -1381,19 +1387,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       role="button"
                     >
                       <div
-                        class="c0 c9 c34"
+                        class="c0 c9 c35"
                         spacing="1"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-1"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Edit postal_code
                             </span>
@@ -1419,12 +1425,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-3"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Delete postal_code
                             </span>
@@ -1461,11 +1467,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                     >
                       <svg
                         aria-hidden="true"
-                        class="c0 c31"
+                        class="c0 c31 c32"
                         fill="none"
-                        height="1em"
+                        height="1.5rem"
                         viewBox="0 0 32 24"
-                        width="1em"
+                        width="2rem"
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <path
@@ -1481,7 +1487,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <span
-                        class="c6 c32"
+                        class="c6 c33"
                       >
                         categories
                       </span>
@@ -1489,7 +1495,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c6 c33"
+                      class="c6 c34"
                     >
                       Relation with
                        
@@ -1508,19 +1514,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       role="button"
                     >
                       <div
-                        class="c0 c9 c34"
+                        class="c0 c9 c35"
                         spacing="1"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-5"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Edit categories
                             </span>
@@ -1546,12 +1552,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-7"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Delete categories
                             </span>
@@ -1588,11 +1594,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                     >
                       <svg
                         aria-hidden="true"
-                        class="c0 c31"
+                        class="c0 c31 c32"
                         fill="none"
-                        height="1em"
+                        height="1.5rem"
                         viewBox="0 0 32 24"
-                        width="1em"
+                        width="2rem"
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <rect
@@ -1612,7 +1618,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <span
-                        class="c6 c32"
+                        class="c6 c33"
                       >
                         cover
                       </span>
@@ -1620,7 +1626,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c6 c33"
+                      class="c6 c34"
                     >
                       Media
                        
@@ -1633,19 +1639,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       role="button"
                     >
                       <div
-                        class="c0 c9 c34"
+                        class="c0 c9 c35"
                         spacing="1"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-9"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Edit cover
                             </span>
@@ -1671,12 +1677,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-11"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Delete cover
                             </span>
@@ -1713,11 +1719,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                     >
                       <svg
                         aria-hidden="true"
-                        class="c0 c31"
+                        class="c0 c31 c32"
                         fill="none"
-                        height="1em"
+                        height="1.5rem"
                         viewBox="0 0 32 24"
-                        width="1em"
+                        width="2rem"
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <rect
@@ -1737,7 +1743,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <span
-                        class="c6 c32"
+                        class="c6 c33"
                       >
                         images
                       </span>
@@ -1745,7 +1751,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c6 c33"
+                      class="c6 c34"
                     >
                       Media
                        
@@ -1758,19 +1764,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       role="button"
                     >
                       <div
-                        class="c0 c9 c34"
+                        class="c0 c9 c35"
                         spacing="1"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-13"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Edit images
                             </span>
@@ -1796,12 +1802,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-15"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Delete images
                             </span>
@@ -1838,11 +1844,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                     >
                       <svg
                         aria-hidden="true"
-                        class="c0 c31"
+                        class="c0 c31 c32"
                         fill="none"
-                        height="1em"
+                        height="1.5rem"
                         viewBox="0 0 32 24"
-                        width="1em"
+                        width="2rem"
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <rect
@@ -1860,7 +1866,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <span
-                        class="c6 c32"
+                        class="c6 c33"
                       >
                         city
                       </span>
@@ -1868,7 +1874,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c6 c33"
+                      class="c6 c34"
                     >
                       Text
                        
@@ -1881,19 +1887,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       role="button"
                     >
                       <div
-                        class="c0 c9 c34"
+                        class="c0 c9 c35"
                         spacing="1"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-17"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Edit city
                             </span>
@@ -1919,12 +1925,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-19"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Delete city
                             </span>
@@ -1961,11 +1967,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                     >
                       <svg
                         aria-hidden="true"
-                        class="c0 c31"
+                        class="c0 c31 c32"
                         fill="none"
-                        height="1em"
+                        height="1.5rem"
                         viewBox="0 0 32 24"
-                        width="1em"
+                        width="2rem"
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <rect
@@ -1985,7 +1991,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <span
-                        class="c6 c32"
+                        class="c6 c33"
                       >
                         json
                       </span>
@@ -1993,7 +1999,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c6 c33"
+                      class="c6 c34"
                     >
                       JSON
                        
@@ -2006,19 +2012,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       role="button"
                     >
                       <div
-                        class="c0 c9 c34"
+                        class="c0 c9 c35"
                         spacing="1"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-21"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Edit json
                             </span>
@@ -2044,12 +2050,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-23"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Delete json
                             </span>
@@ -2086,11 +2092,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                     >
                       <svg
                         aria-hidden="true"
-                        class="c0 c31"
+                        class="c0 c31 c32"
                         fill="none"
-                        height="1em"
+                        height="1.5rem"
                         viewBox="0 0 32 24"
-                        width="1em"
+                        width="2rem"
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <path
@@ -2104,7 +2110,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <span
-                        class="c6 c32"
+                        class="c6 c33"
                       >
                         slug
                       </span>
@@ -2112,7 +2118,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c6 c33"
+                      class="c6 c34"
                     >
                       UID
                        
@@ -2125,19 +2131,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       role="button"
                     >
                       <div
-                        class="c0 c9 c34"
+                        class="c0 c9 c35"
                         spacing="1"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-25"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Edit slug
                             </span>
@@ -2163,12 +2169,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-27"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Delete slug
                             </span>
@@ -2205,11 +2211,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                     >
                       <svg
                         aria-hidden="true"
-                        class="c0 c31"
+                        class="c0 c31 c32"
                         fill="none"
-                        height="1em"
+                        height="1.5rem"
                         viewBox="0 0 32 24"
-                        width="1em"
+                        width="2rem"
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <rect
@@ -2233,7 +2239,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <span
-                        class="c6 c32"
+                        class="c6 c33"
                       >
                         notrepeat_req
                       </span>
@@ -2241,7 +2247,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c6 c33"
+                      class="c6 c34"
                     >
                       Component
                        
@@ -2254,19 +2260,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       role="button"
                     >
                       <div
-                        class="c0 c9 c34"
+                        class="c0 c9 c35"
                         spacing="1"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-29"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Edit notrepeat_req
                             </span>
@@ -2292,12 +2298,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-31"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Delete notrepeat_req
                             </span>
@@ -2322,7 +2328,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c37 component-row"
+                  class="c38 component-row"
                 >
                   <td
                     colspan="12"
@@ -2331,7 +2337,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       class="c0 c25"
                     >
                       <div
-                        class="c0 c38"
+                        class="c0 c39"
                       >
                         <table>
                           <tbody>
@@ -2343,10 +2349,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c0 c39"
+                                  class="c0 c40"
                                 >
                                   <svg
-                                    class="c40"
+                                    class="c41"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -2367,11 +2373,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="c0 c31"
+                                    class="c0 c31 c32"
                                     fill="none"
-                                    height="1em"
+                                    height="1.5rem"
                                     viewBox="0 0 32 24"
-                                    width="1em"
+                                    width="2rem"
                                     xmlns="http://www.w3.org/2000/svg"
                                   >
                                     <rect
@@ -2389,7 +2395,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     />
                                   </svg>
                                   <span
-                                    class="c6 c32"
+                                    class="c6 c33"
                                   >
                                     name
                                   </span>
@@ -2397,7 +2403,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                               <td>
                                 <span
-                                  class="c6 c33"
+                                  class="c6 c34"
                                 >
                                   Text
                                    
@@ -2410,19 +2416,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   role="button"
                                 >
                                   <div
-                                    class="c0 c9 c34"
+                                    class="c0 c9 c35"
                                     spacing="1"
                                   >
                                     <span>
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="tooltip-33"
-                                        class="c12 c35"
+                                        class="c12 c36"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c36"
+                                          class="c37"
                                         >
                                           Edit name
                                         </span>
@@ -2448,12 +2454,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="tooltip-35"
-                                        class="c12 c35"
+                                        class="c12 c36"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c36"
+                                          class="c37"
                                         >
                                           Delete name
                                         </span>
@@ -2485,10 +2491,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c0 c39"
+                                  class="c0 c40"
                                 >
                                   <svg
-                                    class="c40"
+                                    class="c41"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -2509,11 +2515,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="c0 c31"
+                                    class="c0 c31 c32"
                                     fill="none"
-                                    height="1em"
+                                    height="1.5rem"
                                     viewBox="0 0 32 24"
-                                    width="1em"
+                                    width="2rem"
                                     xmlns="http://www.w3.org/2000/svg"
                                   >
                                     <rect
@@ -2531,7 +2537,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     />
                                   </svg>
                                   <span
-                                    class="c6 c32"
+                                    class="c6 c33"
                                   >
                                     popo
                                   </span>
@@ -2539,7 +2545,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                               <td>
                                 <span
-                                  class="c6 c33"
+                                  class="c6 c34"
                                 >
                                   Text
                                    
@@ -2552,19 +2558,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   role="button"
                                 >
                                   <div
-                                    class="c0 c9 c34"
+                                    class="c0 c9 c35"
                                     spacing="1"
                                   >
                                     <span>
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="tooltip-37"
-                                        class="c12 c35"
+                                        class="c12 c36"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c36"
+                                          class="c37"
                                         >
                                           Edit popo
                                         </span>
@@ -2590,12 +2596,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="tooltip-39"
-                                        class="c12 c35"
+                                        class="c12 c36"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c36"
+                                          class="c37"
                                         >
                                           Delete popo
                                         </span>
@@ -2627,10 +2633,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c0 c39"
+                                  class="c0 c40"
                                 >
                                   <svg
-                                    class="c40"
+                                    class="c41"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -2651,11 +2657,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="c0 c31"
+                                    class="c0 c31 c32"
                                     fill="none"
-                                    height="1em"
+                                    height="1.5rem"
                                     viewBox="0 0 32 24"
-                                    width="1em"
+                                    width="2rem"
                                     xmlns="http://www.w3.org/2000/svg"
                                   >
                                     <rect
@@ -2673,7 +2679,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     />
                                   </svg>
                                   <span
-                                    class="c6 c32"
+                                    class="c6 c33"
                                   >
                                     poq
                                   </span>
@@ -2681,7 +2687,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                               <td>
                                 <span
-                                  class="c6 c33"
+                                  class="c6 c34"
                                 >
                                   Text
                                    
@@ -2694,19 +2700,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   role="button"
                                 >
                                   <div
-                                    class="c0 c9 c34"
+                                    class="c0 c9 c35"
                                     spacing="1"
                                   >
                                     <span>
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="tooltip-41"
-                                        class="c12 c35"
+                                        class="c12 c36"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c36"
+                                          class="c37"
                                         >
                                           Edit poq
                                         </span>
@@ -2732,12 +2738,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="tooltip-43"
-                                        class="c12 c35"
+                                        class="c12 c36"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c36"
+                                          class="c37"
                                         >
                                           Delete poq
                                         </span>
@@ -2765,7 +2771,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </table>
                       </div>
                       <button
-                        class="c0 c41 c42"
+                        class="c0 c42 c43"
                         type="button"
                       >
                         <div
@@ -2773,7 +2779,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="c0 c43 c44"
+                            class="c0 c44 c45"
                           >
                             <svg
                               fill="none"
@@ -2789,10 +2795,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c0 c45"
+                            class="c0 c46"
                           >
                             <span
-                              class="c6 c46"
+                              class="c6 c47"
                             >
                               Add another field to this component
                             </span>
@@ -2815,11 +2821,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                     >
                       <svg
                         aria-hidden="true"
-                        class="c0 c31"
+                        class="c0 c31 c32"
                         fill="none"
-                        height="1em"
+                        height="1.5rem"
                         viewBox="0 0 32 24"
-                        width="1em"
+                        width="2rem"
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <rect
@@ -2843,7 +2849,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <span
-                        class="c6 c32"
+                        class="c6 c33"
                       >
                         Compopo
                       </span>
@@ -2851,7 +2857,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c6 c33"
+                      class="c6 c34"
                     >
                       Component
                        
@@ -2864,19 +2870,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       role="button"
                     >
                       <div
-                        class="c0 c9 c34"
+                        class="c0 c9 c35"
                         spacing="1"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-45"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Edit Compopo
                             </span>
@@ -2902,12 +2908,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-47"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Delete Compopo
                             </span>
@@ -2932,7 +2938,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c37 component-row"
+                  class="c38 component-row"
                 >
                   <td
                     colspan="12"
@@ -2941,7 +2947,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       class="c0 c25"
                     >
                       <div
-                        class="c0 c38"
+                        class="c0 c39"
                       >
                         <table>
                           <tbody>
@@ -2953,10 +2959,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c0 c39"
+                                  class="c0 c40"
                                 >
                                   <svg
-                                    class="c40"
+                                    class="c41"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -2977,11 +2983,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="c0 c31"
+                                    class="c0 c31 c32"
                                     fill="none"
-                                    height="1em"
+                                    height="1.5rem"
                                     viewBox="0 0 32 24"
-                                    width="1em"
+                                    width="2rem"
                                     xmlns="http://www.w3.org/2000/svg"
                                   >
                                     <rect
@@ -2999,7 +3005,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     />
                                   </svg>
                                   <span
-                                    class="c6 c32"
+                                    class="c6 c33"
                                   >
                                     dede
                                   </span>
@@ -3007,7 +3013,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                               <td>
                                 <span
-                                  class="c6 c33"
+                                  class="c6 c34"
                                 >
                                   Text
                                    
@@ -3020,19 +3026,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   role="button"
                                 >
                                   <div
-                                    class="c0 c9 c34"
+                                    class="c0 c9 c35"
                                     spacing="1"
                                   >
                                     <span>
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="tooltip-49"
-                                        class="c12 c35"
+                                        class="c12 c36"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c36"
+                                          class="c37"
                                         >
                                           Edit dede
                                         </span>
@@ -3058,12 +3064,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="tooltip-51"
-                                        class="c12 c35"
+                                        class="c12 c36"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c36"
+                                          class="c37"
                                         >
                                           Delete dede
                                         </span>
@@ -3095,10 +3101,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c0 c39"
+                                  class="c0 c40"
                                 >
                                   <svg
-                                    class="c40"
+                                    class="c41"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -3119,11 +3125,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="c0 c31"
+                                    class="c0 c31 c32"
                                     fill="none"
-                                    height="1em"
+                                    height="1.5rem"
                                     viewBox="0 0 32 24"
-                                    width="1em"
+                                    width="2rem"
                                     xmlns="http://www.w3.org/2000/svg"
                                   >
                                     <rect
@@ -3141,7 +3147,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     />
                                   </svg>
                                   <span
-                                    class="c6 c32"
+                                    class="c6 c33"
                                   >
                                     dada
                                   </span>
@@ -3149,7 +3155,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                               <td>
                                 <span
-                                  class="c6 c33"
+                                  class="c6 c34"
                                 >
                                   Text
                                    
@@ -3162,19 +3168,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   role="button"
                                 >
                                   <div
-                                    class="c0 c9 c34"
+                                    class="c0 c9 c35"
                                     spacing="1"
                                   >
                                     <span>
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="tooltip-53"
-                                        class="c12 c35"
+                                        class="c12 c36"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c36"
+                                          class="c37"
                                         >
                                           Edit dada
                                         </span>
@@ -3200,12 +3206,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="tooltip-55"
-                                        class="c12 c35"
+                                        class="c12 c36"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c36"
+                                          class="c37"
                                         >
                                           Delete dada
                                         </span>
@@ -3237,10 +3243,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 style="position: relative;"
                               >
                                 <div
-                                  class="c0 c39"
+                                  class="c0 c40"
                                 >
                                   <svg
-                                    class="c40"
+                                    class="c41"
                                     color="neutral150"
                                     fill="none"
                                     height="23"
@@ -3261,11 +3267,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="c0 c31"
+                                    class="c0 c31 c32"
                                     fill="none"
-                                    height="1em"
+                                    height="1.5rem"
                                     viewBox="0 0 32 24"
-                                    width="1em"
+                                    width="2rem"
                                     xmlns="http://www.w3.org/2000/svg"
                                   >
                                     <rect
@@ -3283,7 +3289,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     />
                                   </svg>
                                   <span
-                                    class="c6 c32"
+                                    class="c6 c33"
                                   >
                                     papi
                                   </span>
@@ -3291,7 +3297,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               </td>
                               <td>
                                 <span
-                                  class="c6 c33"
+                                  class="c6 c34"
                                 >
                                   Text
                                    
@@ -3304,19 +3310,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   role="button"
                                 >
                                   <div
-                                    class="c0 c9 c34"
+                                    class="c0 c9 c35"
                                     spacing="1"
                                   >
                                     <span>
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="tooltip-57"
-                                        class="c12 c35"
+                                        class="c12 c36"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c36"
+                                          class="c37"
                                         >
                                           Edit papi
                                         </span>
@@ -3342,12 +3348,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                       <button
                                         aria-disabled="false"
                                         aria-labelledby="tooltip-59"
-                                        class="c12 c35"
+                                        class="c12 c36"
                                         tabindex="0"
                                         type="button"
                                       >
                                         <span
-                                          class="c36"
+                                          class="c37"
                                         >
                                           Delete papi
                                         </span>
@@ -3375,7 +3381,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         </table>
                       </div>
                       <button
-                        class="c0 c41 c42"
+                        class="c0 c42 c43"
                         type="button"
                       >
                         <div
@@ -3383,7 +3389,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         >
                           <div
                             aria-hidden="true"
-                            class="c0 c43 c44"
+                            class="c0 c44 c45"
                           >
                             <svg
                               fill="none"
@@ -3399,10 +3405,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c0 c45"
+                            class="c0 c46"
                           >
                             <span
-                              class="c6 c46"
+                              class="c6 c47"
                             >
                               Add another field to this component
                             </span>
@@ -3425,11 +3431,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                     >
                       <svg
                         aria-hidden="true"
-                        class="c0 c31"
+                        class="c0 c31 c32"
                         fill="none"
-                        height="1em"
+                        height="1.5rem"
                         viewBox="0 0 32 24"
-                        width="1em"
+                        width="2rem"
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <rect
@@ -3447,7 +3453,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <span
-                        class="c6 c32"
+                        class="c6 c33"
                       >
                         DynamicZone
                       </span>
@@ -3455,7 +3461,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                   <td>
                     <span
-                      class="c6 c33"
+                      class="c6 c34"
                     >
                       Dynamic zone
                        
@@ -3468,19 +3474,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       role="button"
                     >
                       <div
-                        class="c0 c9 c34"
+                        class="c0 c9 c35"
                         spacing="1"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-61"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Edit DynamicZone
                             </span>
@@ -3506,12 +3512,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-63"
-                            class="c12 c35"
+                            class="c12 c36"
                             tabindex="0"
                             type="button"
                           >
                             <span
-                              class="c36"
+                              class="c37"
                             >
                               Delete DynamicZone
                             </span>
@@ -3536,27 +3542,27 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </td>
                 </tr>
                 <tr
-                  class="c47 dynamiczone-row"
+                  class="c48 dynamiczone-row"
                 >
                   <td
                     colspan="12"
                   >
                     <div
-                      class="c0 c48 c49"
+                      class="c0 c49 c50"
                     >
                       <div
-                        class="c0 c9 c16 c50"
+                        class="c0 c9 c16 c51"
                         spacing="2"
                       >
                         <button
                           type="button"
                         >
                           <div
-                            class="c0 c21 c51 c52"
+                            class="c0 c21 c52 c53"
                             spacing="1"
                           >
                             <svg
-                              class="c53"
+                              class="c54"
                               fill="none"
                               height="1em"
                               viewBox="0 0 24 24"
@@ -3569,18 +3575,18 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <span
-                              class="c6 c54"
+                              class="c6 c55"
                             >
                               Add a component
                             </span>
                           </div>
                         </button>
                         <button
-                          class="c55 c56 c57 active"
+                          class="c56 c57 c58 active"
                           type="button"
                         >
                           <div
-                            class="c58 c59 c60"
+                            class="c59 c60 c61"
                           >
                             <svg
                               viewBox="0 0 448 512"
@@ -3593,14 +3599,14 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c61"
+                            class="c62"
                           >
                             <span
-                              class="c62 c63"
+                              class="c63 c64"
                             />
                           </div>
                           <button
-                            class="c64 c65"
+                            class="c65 c66"
                             type="button"
                           >
                             <svg
@@ -3618,11 +3624,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           </button>
                         </button>
                         <button
-                          class="c55 c56 c57"
+                          class="c56 c57 c58"
                           type="button"
                         >
                           <div
-                            class="c66 c59 c67"
+                            class="c67 c60 c68"
                           >
                             <svg
                               viewBox="0 0 448 512"
@@ -3635,14 +3641,14 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c61"
+                            class="c62"
                           >
                             <span
-                              class="c62 c63"
+                              class="c63 c64"
                             />
                           </div>
                           <button
-                            class="c64 c65"
+                            class="c65 c66"
                             type="button"
                           >
                             <svg
@@ -3660,11 +3666,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           </button>
                         </button>
                         <button
-                          class="c55 c56 c57"
+                          class="c56 c57 c58"
                           type="button"
                         >
                           <div
-                            class="c66 c59 c67"
+                            class="c67 c60 c68"
                           >
                             <svg
                               viewBox="0 0 448 512"
@@ -3677,14 +3683,14 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c61"
+                            class="c62"
                           >
                             <span
-                              class="c62 c63"
+                              class="c63 c64"
                             />
                           </div>
                           <button
-                            class="c64 c65"
+                            class="c65 c66"
                             type="button"
                           >
                             <svg
@@ -3702,11 +3708,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                           </button>
                         </button>
                         <button
-                          class="c55 c56 c57"
+                          class="c56 c57 c58"
                           type="button"
                         >
                           <div
-                            class="c66 c59 c67"
+                            class="c67 c60 c68"
                           >
                             <svg
                               viewBox="0 0 448 512"
@@ -3719,14 +3725,14 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c61"
+                            class="c62"
                           >
                             <span
-                              class="c62 c63"
+                              class="c63 c64"
                             />
                           </div>
                           <button
-                            class="c64 c65"
+                            class="c65 c66"
                             type="button"
                           >
                             <svg
@@ -3746,7 +3752,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                       </div>
                     </div>
                     <div
-                      class="c0 c68"
+                      class="c0 c69"
                     >
                       <div
                         class="c0 "
@@ -3755,7 +3761,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c47 component-row"
+                              class="c48 component-row"
                             >
                               <td
                                 colspan="12"
@@ -3764,7 +3770,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   class="c0 c25"
                                 >
                                   <div
-                                    class="c0 c38"
+                                    class="c0 c39"
                                   >
                                     <table>
                                       <tbody>
@@ -3776,10 +3782,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c0 c39"
+                                              class="c0 c40"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -3800,11 +3806,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="c0 c31"
+                                                class="c0 c31 c32"
                                                 fill="none"
-                                                height="1em"
+                                                height="1.5rem"
                                                 viewBox="0 0 32 24"
-                                                width="1em"
+                                                width="2rem"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
                                                 <rect
@@ -3822,7 +3828,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 />
                                               </svg>
                                               <span
-                                                class="c6 c32"
+                                                class="c6 c33"
                                               >
                                                 name
                                               </span>
@@ -3830,7 +3836,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c6 c33"
+                                              class="c6 c34"
                                             >
                                               Text
                                                
@@ -3843,19 +3849,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               role="button"
                                             >
                                               <div
-                                                class="c0 c9 c34"
+                                                class="c0 c9 c35"
                                                 spacing="1"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-65"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Edit name
                                                     </span>
@@ -3881,12 +3887,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-67"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Delete name
                                                     </span>
@@ -3918,10 +3924,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c0 c39"
+                                              class="c0 c40"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -3942,11 +3948,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="c0 c31"
+                                                class="c0 c31 c32"
                                                 fill="none"
-                                                height="1em"
+                                                height="1.5rem"
                                                 viewBox="0 0 32 24"
-                                                width="1em"
+                                                width="2rem"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
                                                 <rect
@@ -3964,7 +3970,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 />
                                               </svg>
                                               <span
-                                                class="c6 c32"
+                                                class="c6 c33"
                                               >
                                                 mail
                                               </span>
@@ -3972,7 +3978,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c6 c33"
+                                              class="c6 c34"
                                             >
                                               Email
                                                
@@ -3985,19 +3991,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               role="button"
                                             >
                                               <div
-                                                class="c0 c9 c34"
+                                                class="c0 c9 c35"
                                                 spacing="1"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-69"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Edit mail
                                                     </span>
@@ -4023,12 +4029,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-71"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Delete mail
                                                     </span>
@@ -4060,10 +4066,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c0 c39"
+                                              class="c0 c40"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4084,11 +4090,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="c0 c31"
+                                                class="c0 c31 c32"
                                                 fill="none"
-                                                height="1em"
+                                                height="1.5rem"
                                                 viewBox="0 0 32 24"
-                                                width="1em"
+                                                width="2rem"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
                                                 <rect
@@ -4106,7 +4112,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 />
                                               </svg>
                                               <span
-                                                class="c6 c32"
+                                                class="c6 c33"
                                               >
                                                 phone
                                               </span>
@@ -4114,7 +4120,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c6 c33"
+                                              class="c6 c34"
                                             >
                                               Number
                                                
@@ -4127,19 +4133,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               role="button"
                                             >
                                               <div
-                                                class="c0 c9 c34"
+                                                class="c0 c9 c35"
                                                 spacing="1"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-73"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Edit phone
                                                     </span>
@@ -4165,12 +4171,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-75"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Delete phone
                                                     </span>
@@ -4198,7 +4204,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c0 c41 c42"
+                                    class="c0 c42 c43"
                                     type="button"
                                   >
                                     <div
@@ -4206,7 +4212,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c0 c70 c71"
+                                        class="c0 c71 c72"
                                       >
                                         <svg
                                           fill="none"
@@ -4222,10 +4228,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c0 c45"
+                                        class="c0 c46"
                                       >
                                         <span
-                                          class="c6 c54"
+                                          class="c6 c55"
                                         >
                                           Add another field to this component
                                         </span>
@@ -4245,7 +4251,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c47 component-row"
+                              class="c48 component-row"
                             >
                               <td
                                 colspan="12"
@@ -4254,7 +4260,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   class="c0 c25"
                                 >
                                   <div
-                                    class="c0 c38"
+                                    class="c0 c39"
                                   >
                                     <table>
                                       <tbody>
@@ -4266,10 +4272,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c0 c39"
+                                              class="c0 c40"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4290,11 +4296,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="c0 c31"
+                                                class="c0 c31 c32"
                                                 fill="none"
-                                                height="1em"
+                                                height="1.5rem"
                                                 viewBox="0 0 32 24"
-                                                width="1em"
+                                                width="2rem"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
                                                 <rect
@@ -4312,7 +4318,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 />
                                               </svg>
                                               <span
-                                                class="c6 c32"
+                                                class="c6 c33"
                                               >
                                                 name
                                               </span>
@@ -4320,7 +4326,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c6 c33"
+                                              class="c6 c34"
                                             >
                                               Text
                                                
@@ -4333,19 +4339,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               role="button"
                                             >
                                               <div
-                                                class="c0 c9 c34"
+                                                class="c0 c9 c35"
                                                 spacing="1"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-77"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Edit name
                                                     </span>
@@ -4371,12 +4377,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-79"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Delete name
                                                     </span>
@@ -4408,10 +4414,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c0 c39"
+                                              class="c0 c40"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4432,11 +4438,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="c0 c31"
+                                                class="c0 c31 c32"
                                                 fill="none"
-                                                height="1em"
+                                                height="1.5rem"
                                                 viewBox="0 0 32 24"
-                                                width="1em"
+                                                width="2rem"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
                                                 <rect
@@ -4454,7 +4460,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 />
                                               </svg>
                                               <span
-                                                class="c6 c32"
+                                                class="c6 c33"
                                               >
                                                 description
                                               </span>
@@ -4462,7 +4468,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c6 c33"
+                                              class="c6 c34"
                                             >
                                               Text
                                                
@@ -4475,19 +4481,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               role="button"
                                             >
                                               <div
-                                                class="c0 c9 c34"
+                                                class="c0 c9 c35"
                                                 spacing="1"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-81"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Edit description
                                                     </span>
@@ -4513,12 +4519,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-83"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Delete description
                                                     </span>
@@ -4550,10 +4556,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c0 c39"
+                                              class="c0 c40"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4574,11 +4580,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="c0 c31"
+                                                class="c0 c31 c32"
                                                 fill="none"
-                                                height="1em"
+                                                height="1.5rem"
                                                 viewBox="0 0 32 24"
-                                                width="1em"
+                                                width="2rem"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
                                                 <rect
@@ -4596,7 +4602,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 />
                                               </svg>
                                               <span
-                                                class="c6 c32"
+                                                class="c6 c33"
                                               >
                                                 price
                                               </span>
@@ -4604,7 +4610,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c6 c33"
+                                              class="c6 c34"
                                             >
                                               Number
                                                
@@ -4617,19 +4623,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               role="button"
                                             >
                                               <div
-                                                class="c0 c9 c34"
+                                                class="c0 c9 c35"
                                                 spacing="1"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-85"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Edit price
                                                     </span>
@@ -4655,12 +4661,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-87"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Delete price
                                                     </span>
@@ -4692,10 +4698,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c0 c39"
+                                              class="c0 c40"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4716,11 +4722,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="c0 c31"
+                                                class="c0 c31 c32"
                                                 fill="none"
-                                                height="1em"
+                                                height="1.5rem"
                                                 viewBox="0 0 32 24"
-                                                width="1em"
+                                                width="2rem"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
                                                 <rect
@@ -4740,7 +4746,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 />
                                               </svg>
                                               <span
-                                                class="c6 c32"
+                                                class="c6 c33"
                                               >
                                                 picture
                                               </span>
@@ -4748,7 +4754,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c6 c33"
+                                              class="c6 c34"
                                             >
                                               Media
                                                
@@ -4761,19 +4767,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               role="button"
                                             >
                                               <div
-                                                class="c0 c9 c34"
+                                                class="c0 c9 c35"
                                                 spacing="1"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-89"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Edit picture
                                                     </span>
@@ -4799,12 +4805,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-91"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Delete picture
                                                     </span>
@@ -4836,10 +4842,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c0 c39"
+                                              class="c0 c40"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -4860,11 +4866,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="c0 c31"
+                                                class="c0 c31 c32"
                                                 fill="none"
-                                                height="1em"
+                                                height="1.5rem"
                                                 viewBox="0 0 32 24"
-                                                width="1em"
+                                                width="2rem"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
                                                 <rect
@@ -4884,7 +4890,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 />
                                               </svg>
                                               <span
-                                                class="c6 c32"
+                                                class="c6 c33"
                                               >
                                                 very_long_description
                                               </span>
@@ -4892,7 +4898,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c6 c33"
+                                              class="c6 c34"
                                             >
                                               Rich text
                                                
@@ -4905,19 +4911,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               role="button"
                                             >
                                               <div
-                                                class="c0 c9 c34"
+                                                class="c0 c9 c35"
                                                 spacing="1"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-93"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Edit very_long_description
                                                     </span>
@@ -4943,12 +4949,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-95"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Delete very_long_description
                                                     </span>
@@ -4980,10 +4986,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c0 c39"
+                                              class="c0 c40"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5004,11 +5010,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="c0 c31"
+                                                class="c0 c31 c32"
                                                 fill="none"
-                                                height="1em"
+                                                height="1.5rem"
                                                 viewBox="0 0 32 24"
-                                                width="1em"
+                                                width="2rem"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
                                                 <path
@@ -5024,7 +5030,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 />
                                               </svg>
                                               <span
-                                                class="c6 c32"
+                                                class="c6 c33"
                                               >
                                                 categories
                                               </span>
@@ -5032,7 +5038,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c6 c33"
+                                              class="c6 c34"
                                             >
                                               Relation with
                                                
@@ -5051,19 +5057,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               role="button"
                                             >
                                               <div
-                                                class="c0 c9 c34"
+                                                class="c0 c9 c35"
                                                 spacing="1"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-97"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Edit categories
                                                     </span>
@@ -5089,12 +5095,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-99"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Delete categories
                                                     </span>
@@ -5122,7 +5128,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c0 c41 c42"
+                                    class="c0 c42 c43"
                                     type="button"
                                   >
                                     <div
@@ -5130,7 +5136,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c0 c70 c71"
+                                        class="c0 c71 c72"
                                       >
                                         <svg
                                           fill="none"
@@ -5146,10 +5152,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c0 c45"
+                                        class="c0 c46"
                                       >
                                         <span
-                                          class="c6 c54"
+                                          class="c6 c55"
                                         >
                                           Add another field to this component
                                         </span>
@@ -5169,7 +5175,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c47 component-row"
+                              class="c48 component-row"
                             >
                               <td
                                 colspan="12"
@@ -5178,7 +5184,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   class="c0 c25"
                                 >
                                   <div
-                                    class="c0 c38"
+                                    class="c0 c39"
                                   >
                                     <table>
                                       <tbody>
@@ -5190,10 +5196,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c0 c39"
+                                              class="c0 c40"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5214,11 +5220,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="c0 c31"
+                                                class="c0 c31 c32"
                                                 fill="none"
-                                                height="1em"
+                                                height="1.5rem"
                                                 viewBox="0 0 32 24"
-                                                width="1em"
+                                                width="2rem"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
                                                 <rect
@@ -5236,7 +5242,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 />
                                               </svg>
                                               <span
-                                                class="c6 c32"
+                                                class="c6 c33"
                                               >
                                                 label
                                               </span>
@@ -5244,7 +5250,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c6 c33"
+                                              class="c6 c34"
                                             >
                                               Text
                                                
@@ -5257,19 +5263,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               role="button"
                                             >
                                               <div
-                                                class="c0 c9 c34"
+                                                class="c0 c9 c35"
                                                 spacing="1"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-101"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Edit label
                                                     </span>
@@ -5295,12 +5301,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-103"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Delete label
                                                     </span>
@@ -5332,10 +5338,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c0 c39"
+                                              class="c0 c40"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5356,11 +5362,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="c0 c31"
+                                                class="c0 c31 c32"
                                                 fill="none"
-                                                height="1em"
+                                                height="1.5rem"
                                                 viewBox="0 0 32 24"
-                                                width="1em"
+                                                width="2rem"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
                                                 <rect
@@ -5378,7 +5384,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 />
                                               </svg>
                                               <span
-                                                class="c6 c32"
+                                                class="c6 c33"
                                               >
                                                 time
                                               </span>
@@ -5386,7 +5392,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c6 c33"
+                                              class="c6 c34"
                                             >
                                               Text
                                                
@@ -5399,19 +5405,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               role="button"
                                             >
                                               <div
-                                                class="c0 c9 c34"
+                                                class="c0 c9 c35"
                                                 spacing="1"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-105"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Edit time
                                                     </span>
@@ -5437,12 +5443,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-107"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Delete time
                                                     </span>
@@ -5474,10 +5480,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c0 c39"
+                                              class="c0 c40"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -5498,11 +5504,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="c0 c31"
+                                                class="c0 c31 c32"
                                                 fill="none"
-                                                height="1em"
+                                                height="1.5rem"
                                                 viewBox="0 0 32 24"
-                                                width="1em"
+                                                width="2rem"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
                                                 <rect
@@ -5526,7 +5532,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 />
                                               </svg>
                                               <span
-                                                class="c6 c32"
+                                                class="c6 c33"
                                               >
                                                 dishrep
                                               </span>
@@ -5534,7 +5540,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c6 c33"
+                                              class="c6 c34"
                                             >
                                               Component
                                                
@@ -5548,19 +5554,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               role="button"
                                             >
                                               <div
-                                                class="c0 c9 c34"
+                                                class="c0 c9 c35"
                                                 spacing="1"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-109"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Edit dishrep
                                                     </span>
@@ -5586,12 +5592,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-111"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Delete dishrep
                                                     </span>
@@ -5616,7 +5622,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                         </tr>
                                         <tr
-                                          class="c37 component-row"
+                                          class="c38 component-row"
                                         >
                                           <td
                                             colspan="12"
@@ -5625,7 +5631,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               class="c0 c25"
                                             >
                                               <div
-                                                class="c0 c38"
+                                                class="c0 c39"
                                               >
                                                 <table>
                                                   <tbody>
@@ -5637,10 +5643,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c0 c39"
+                                                          class="c0 c40"
                                                         >
                                                           <svg
-                                                            class="c40"
+                                                            class="c41"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -5661,11 +5667,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            class="c0 c31"
+                                                            class="c0 c31 c32"
                                                             fill="none"
-                                                            height="1em"
+                                                            height="1.5rem"
                                                             viewBox="0 0 32 24"
-                                                            width="1em"
+                                                            width="2rem"
                                                             xmlns="http://www.w3.org/2000/svg"
                                                           >
                                                             <rect
@@ -5683,7 +5689,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                             />
                                                           </svg>
                                                           <span
-                                                            class="c6 c32"
+                                                            class="c6 c33"
                                                           >
                                                             name
                                                           </span>
@@ -5691,7 +5697,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                       <td>
                                                         <span
-                                                          class="c6 c33"
+                                                          class="c6 c34"
                                                         >
                                                           Text
                                                            
@@ -5704,19 +5710,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                           role="button"
                                                         >
                                                           <div
-                                                            class="c0 c9 c34"
+                                                            class="c0 c9 c35"
                                                             spacing="1"
                                                           >
                                                             <span>
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="tooltip-113"
-                                                                class="c12 c35"
+                                                                class="c12 c36"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c36"
+                                                                  class="c37"
                                                                 >
                                                                   Edit name
                                                                 </span>
@@ -5742,12 +5748,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="tooltip-115"
-                                                                class="c12 c35"
+                                                                class="c12 c36"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c36"
+                                                                  class="c37"
                                                                 >
                                                                   Delete name
                                                                 </span>
@@ -5779,10 +5785,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c0 c39"
+                                                          class="c0 c40"
                                                         >
                                                           <svg
-                                                            class="c40"
+                                                            class="c41"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -5803,11 +5809,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            class="c0 c31"
+                                                            class="c0 c31 c32"
                                                             fill="none"
-                                                            height="1em"
+                                                            height="1.5rem"
                                                             viewBox="0 0 32 24"
-                                                            width="1em"
+                                                            width="2rem"
                                                             xmlns="http://www.w3.org/2000/svg"
                                                           >
                                                             <rect
@@ -5825,7 +5831,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                             />
                                                           </svg>
                                                           <span
-                                                            class="c6 c32"
+                                                            class="c6 c33"
                                                           >
                                                             description
                                                           </span>
@@ -5833,7 +5839,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                       <td>
                                                         <span
-                                                          class="c6 c33"
+                                                          class="c6 c34"
                                                         >
                                                           Text
                                                            
@@ -5846,19 +5852,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                           role="button"
                                                         >
                                                           <div
-                                                            class="c0 c9 c34"
+                                                            class="c0 c9 c35"
                                                             spacing="1"
                                                           >
                                                             <span>
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="tooltip-117"
-                                                                class="c12 c35"
+                                                                class="c12 c36"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c36"
+                                                                  class="c37"
                                                                 >
                                                                   Edit description
                                                                 </span>
@@ -5884,12 +5890,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="tooltip-119"
-                                                                class="c12 c35"
+                                                                class="c12 c36"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c36"
+                                                                  class="c37"
                                                                 >
                                                                   Delete description
                                                                 </span>
@@ -5921,10 +5927,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c0 c39"
+                                                          class="c0 c40"
                                                         >
                                                           <svg
-                                                            class="c40"
+                                                            class="c41"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -5945,11 +5951,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            class="c0 c31"
+                                                            class="c0 c31 c32"
                                                             fill="none"
-                                                            height="1em"
+                                                            height="1.5rem"
                                                             viewBox="0 0 32 24"
-                                                            width="1em"
+                                                            width="2rem"
                                                             xmlns="http://www.w3.org/2000/svg"
                                                           >
                                                             <rect
@@ -5967,7 +5973,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                             />
                                                           </svg>
                                                           <span
-                                                            class="c6 c32"
+                                                            class="c6 c33"
                                                           >
                                                             price
                                                           </span>
@@ -5975,7 +5981,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                       <td>
                                                         <span
-                                                          class="c6 c33"
+                                                          class="c6 c34"
                                                         >
                                                           Number
                                                            
@@ -5988,19 +5994,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                           role="button"
                                                         >
                                                           <div
-                                                            class="c0 c9 c34"
+                                                            class="c0 c9 c35"
                                                             spacing="1"
                                                           >
                                                             <span>
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="tooltip-121"
-                                                                class="c12 c35"
+                                                                class="c12 c36"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c36"
+                                                                  class="c37"
                                                                 >
                                                                   Edit price
                                                                 </span>
@@ -6026,12 +6032,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="tooltip-123"
-                                                                class="c12 c35"
+                                                                class="c12 c36"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c36"
+                                                                  class="c37"
                                                                 >
                                                                   Delete price
                                                                 </span>
@@ -6063,10 +6069,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c0 c39"
+                                                          class="c0 c40"
                                                         >
                                                           <svg
-                                                            class="c40"
+                                                            class="c41"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -6087,11 +6093,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            class="c0 c31"
+                                                            class="c0 c31 c32"
                                                             fill="none"
-                                                            height="1em"
+                                                            height="1.5rem"
                                                             viewBox="0 0 32 24"
-                                                            width="1em"
+                                                            width="2rem"
                                                             xmlns="http://www.w3.org/2000/svg"
                                                           >
                                                             <rect
@@ -6111,7 +6117,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                             />
                                                           </svg>
                                                           <span
-                                                            class="c6 c32"
+                                                            class="c6 c33"
                                                           >
                                                             picture
                                                           </span>
@@ -6119,7 +6125,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                       <td>
                                                         <span
-                                                          class="c6 c33"
+                                                          class="c6 c34"
                                                         >
                                                           Media
                                                            
@@ -6132,19 +6138,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                           role="button"
                                                         >
                                                           <div
-                                                            class="c0 c9 c34"
+                                                            class="c0 c9 c35"
                                                             spacing="1"
                                                           >
                                                             <span>
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="tooltip-125"
-                                                                class="c12 c35"
+                                                                class="c12 c36"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c36"
+                                                                  class="c37"
                                                                 >
                                                                   Edit picture
                                                                 </span>
@@ -6170,12 +6176,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="tooltip-127"
-                                                                class="c12 c35"
+                                                                class="c12 c36"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c36"
+                                                                  class="c37"
                                                                 >
                                                                   Delete picture
                                                                 </span>
@@ -6207,10 +6213,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c0 c39"
+                                                          class="c0 c40"
                                                         >
                                                           <svg
-                                                            class="c40"
+                                                            class="c41"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -6231,11 +6237,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            class="c0 c31"
+                                                            class="c0 c31 c32"
                                                             fill="none"
-                                                            height="1em"
+                                                            height="1.5rem"
                                                             viewBox="0 0 32 24"
-                                                            width="1em"
+                                                            width="2rem"
                                                             xmlns="http://www.w3.org/2000/svg"
                                                           >
                                                             <rect
@@ -6255,7 +6261,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                             />
                                                           </svg>
                                                           <span
-                                                            class="c6 c32"
+                                                            class="c6 c33"
                                                           >
                                                             very_long_description
                                                           </span>
@@ -6263,7 +6269,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                       <td>
                                                         <span
-                                                          class="c6 c33"
+                                                          class="c6 c34"
                                                         >
                                                           Rich text
                                                            
@@ -6276,19 +6282,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                           role="button"
                                                         >
                                                           <div
-                                                            class="c0 c9 c34"
+                                                            class="c0 c9 c35"
                                                             spacing="1"
                                                           >
                                                             <span>
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="tooltip-129"
-                                                                class="c12 c35"
+                                                                class="c12 c36"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c36"
+                                                                  class="c37"
                                                                 >
                                                                   Edit very_long_description
                                                                 </span>
@@ -6314,12 +6320,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="tooltip-131"
-                                                                class="c12 c35"
+                                                                class="c12 c36"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c36"
+                                                                  class="c37"
                                                                 >
                                                                   Delete very_long_description
                                                                 </span>
@@ -6351,10 +6357,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         style="position: relative;"
                                                       >
                                                         <div
-                                                          class="c0 c39"
+                                                          class="c0 c40"
                                                         >
                                                           <svg
-                                                            class="c40"
+                                                            class="c41"
                                                             color="neutral150"
                                                             fill="none"
                                                             height="23"
@@ -6375,11 +6381,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                         >
                                                           <svg
                                                             aria-hidden="true"
-                                                            class="c0 c31"
+                                                            class="c0 c31 c32"
                                                             fill="none"
-                                                            height="1em"
+                                                            height="1.5rem"
                                                             viewBox="0 0 32 24"
-                                                            width="1em"
+                                                            width="2rem"
                                                             xmlns="http://www.w3.org/2000/svg"
                                                           >
                                                             <path
@@ -6395,7 +6401,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                             />
                                                           </svg>
                                                           <span
-                                                            class="c6 c32"
+                                                            class="c6 c33"
                                                           >
                                                             categories
                                                           </span>
@@ -6403,7 +6409,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                       </td>
                                                       <td>
                                                         <span
-                                                          class="c6 c33"
+                                                          class="c6 c34"
                                                         >
                                                           Relation with
                                                            
@@ -6422,19 +6428,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                           role="button"
                                                         >
                                                           <div
-                                                            class="c0 c9 c34"
+                                                            class="c0 c9 c35"
                                                             spacing="1"
                                                           >
                                                             <span>
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="tooltip-133"
-                                                                class="c12 c35"
+                                                                class="c12 c36"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c36"
+                                                                  class="c37"
                                                                 >
                                                                   Edit categories
                                                                 </span>
@@ -6460,12 +6466,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                               <button
                                                                 aria-disabled="false"
                                                                 aria-labelledby="tooltip-135"
-                                                                class="c12 c35"
+                                                                class="c12 c36"
                                                                 tabindex="0"
                                                                 type="button"
                                                               >
                                                                 <span
-                                                                  class="c36"
+                                                                  class="c37"
                                                                 >
                                                                   Delete categories
                                                                 </span>
@@ -6493,7 +6499,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 </table>
                                               </div>
                                               <button
-                                                class="c0 c41 c42"
+                                                class="c0 c42 c43"
                                                 type="button"
                                               >
                                                 <div
@@ -6501,7 +6507,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 >
                                                   <div
                                                     aria-hidden="true"
-                                                    class="c0 c43 c44"
+                                                    class="c0 c44 c45"
                                                   >
                                                     <svg
                                                       fill="none"
@@ -6517,10 +6523,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                     </svg>
                                                   </div>
                                                   <div
-                                                    class="c0 c45"
+                                                    class="c0 c46"
                                                   >
                                                     <span
-                                                      class="c6 c46"
+                                                      class="c6 c47"
                                                     >
                                                       Add another field to this component
                                                     </span>
@@ -6534,7 +6540,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c0 c41 c42"
+                                    class="c0 c42 c43"
                                     type="button"
                                   >
                                     <div
@@ -6542,7 +6548,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c0 c70 c71"
+                                        class="c0 c71 c72"
                                       >
                                         <svg
                                           fill="none"
@@ -6558,10 +6564,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c0 c45"
+                                        class="c0 c46"
                                       >
                                         <span
-                                          class="c6 c54"
+                                          class="c6 c55"
                                         >
                                           Add another field to this component
                                         </span>
@@ -6581,7 +6587,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                         <table>
                           <tbody>
                             <tr
-                              class="c47 component-row"
+                              class="c48 component-row"
                             >
                               <td
                                 colspan="12"
@@ -6590,7 +6596,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                   class="c0 c25"
                                 >
                                   <div
-                                    class="c0 c38"
+                                    class="c0 c39"
                                   >
                                     <table>
                                       <tbody>
@@ -6602,10 +6608,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c0 c39"
+                                              class="c0 c40"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -6626,11 +6632,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="c0 c31"
+                                                class="c0 c31 c32"
                                                 fill="none"
-                                                height="1em"
+                                                height="1.5rem"
                                                 viewBox="0 0 32 24"
-                                                width="1em"
+                                                width="2rem"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
                                                 <rect
@@ -6648,7 +6654,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 />
                                               </svg>
                                               <span
-                                                class="c6 c32"
+                                                class="c6 c33"
                                               >
                                                 name
                                               </span>
@@ -6656,7 +6662,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c6 c33"
+                                              class="c6 c34"
                                             >
                                               Text
                                                
@@ -6669,19 +6675,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               role="button"
                                             >
                                               <div
-                                                class="c0 c9 c34"
+                                                class="c0 c9 c35"
                                                 spacing="1"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-137"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Edit name
                                                     </span>
@@ -6707,12 +6713,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-139"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Delete name
                                                     </span>
@@ -6744,10 +6750,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c0 c39"
+                                              class="c0 c40"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -6768,11 +6774,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="c0 c31"
+                                                class="c0 c31 c32"
                                                 fill="none"
-                                                height="1em"
+                                                height="1.5rem"
                                                 viewBox="0 0 32 24"
-                                                width="1em"
+                                                width="2rem"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
                                                 <rect
@@ -6792,7 +6798,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 />
                                               </svg>
                                               <span
-                                                class="c6 c32"
+                                                class="c6 c33"
                                               >
                                                 media
                                               </span>
@@ -6800,7 +6806,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c6 c33"
+                                              class="c6 c34"
                                             >
                                               Media
                                                
@@ -6813,19 +6819,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               role="button"
                                             >
                                               <div
-                                                class="c0 c9 c34"
+                                                class="c0 c9 c35"
                                                 spacing="1"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-141"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Edit media
                                                     </span>
@@ -6851,12 +6857,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-143"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Delete media
                                                     </span>
@@ -6888,10 +6894,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             style="position: relative;"
                                           >
                                             <div
-                                              class="c0 c39"
+                                              class="c0 c40"
                                             >
                                               <svg
-                                                class="c69"
+                                                class="c70"
                                                 color="primary200"
                                                 fill="none"
                                                 height="23"
@@ -6912,11 +6918,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                             >
                                               <svg
                                                 aria-hidden="true"
-                                                class="c0 c31"
+                                                class="c0 c31 c32"
                                                 fill="none"
-                                                height="1em"
+                                                height="1.5rem"
                                                 viewBox="0 0 32 24"
-                                                width="1em"
+                                                width="2rem"
                                                 xmlns="http://www.w3.org/2000/svg"
                                               >
                                                 <rect
@@ -6934,7 +6940,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                 />
                                               </svg>
                                               <span
-                                                class="c6 c32"
+                                                class="c6 c33"
                                               >
                                                 is_available
                                               </span>
@@ -6942,7 +6948,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                           </td>
                                           <td>
                                             <span
-                                              class="c6 c33"
+                                              class="c6 c34"
                                             >
                                               Boolean
                                                
@@ -6955,19 +6961,19 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                               role="button"
                                             >
                                               <div
-                                                class="c0 c9 c34"
+                                                class="c0 c9 c35"
                                                 spacing="1"
                                               >
                                                 <span>
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-145"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Edit is_available
                                                     </span>
@@ -6993,12 +6999,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                                   <button
                                                     aria-disabled="false"
                                                     aria-labelledby="tooltip-147"
-                                                    class="c12 c35"
+                                                    class="c12 c36"
                                                     tabindex="0"
                                                     type="button"
                                                   >
                                                     <span
-                                                      class="c36"
+                                                      class="c37"
                                                     >
                                                       Delete is_available
                                                     </span>
@@ -7026,7 +7032,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     </table>
                                   </div>
                                   <button
-                                    class="c0 c41 c42"
+                                    class="c0 c42 c43"
                                     type="button"
                                   >
                                     <div
@@ -7034,7 +7040,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                     >
                                       <div
                                         aria-hidden="true"
-                                        class="c0 c70 c71"
+                                        class="c0 c71 c72"
                                       >
                                         <svg
                                           fill="none"
@@ -7050,10 +7056,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                                         </svg>
                                       </div>
                                       <div
-                                        class="c0 c45"
+                                        class="c0 c46"
                                       >
                                         <span
-                                          class="c6 c54"
+                                          class="c6 c55"
                                         >
                                           Add another field to this component
                                         </span>
@@ -7074,17 +7080,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
           </div>
           <div>
             <hr
-              class="c0 c72 c73"
+              class="c0 c73 c74"
             />
             <button
-              class="c0 c74 c75"
+              class="c0 c75 c76"
             >
               <div
                 class="c0 c9"
               >
                 <div
                   aria-hidden="true"
-                  class="c0 c70 c76"
+                  class="c0 c71 c77"
                 >
                   <svg
                     fill="none"
@@ -7100,10 +7106,10 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="c0 c45"
+                  class="c0 c46"
                 >
                   <span
-                    class="c6 c54"
+                    class="c6 c55"
                   >
                     Add another field to this collection type
                   </span>
@@ -7116,7 +7122,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c36"
+    class="c37"
   >
     <p
       aria-live="polite"