[design-system]: update to 1.4.0

packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/tests/__snapshots__/index.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the snapshot 1`] = `
-.c12 {
+.c13 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -14,13 +14,13 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
 }
 
 .c7 {
-  background: #f6f6f9;
-  padding: 4px;
-  border-radius: 4px;
+  background: #eaeaef;
+  padding-right: 8px;
+  padding-left: 8px;
   min-width: 20px;
 }
 
-.c10 {
+.c11 {
   padding-left: 8px;
 }
 
@@ -68,7 +68,7 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
   color: #32324d;
 }
 
-.c9 {
+.c10 {
   font-weight: 600;
   font-size: 0.6875rem;
   line-height: 1.45;
@@ -209,7 +209,7 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
   fill: #8e8ea9;
 }
 
-.c11 {
+.c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -220,7 +220,7 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
   align-items: center;
 }
 
-.c11 svg {
+.c12 svg {
   height: 4px;
   width: 6px;
 }
@@ -229,6 +229,11 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
   padding: 4px 12px;
 }
 
+.c9 {
+  border-radius: 4px;
+  height: 1.5rem;
+}
+
 <div>
   <div
     aria-hidden="true"
@@ -252,10 +257,10 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
             wrap="nowrap"
           >
             <div
-              class="c0 c7 c8"
+              class="c0 c7 c8 c9"
             >
               <span
-                class="c4 c9"
+                class="c4 c10"
               >
                 1
               </span>
@@ -265,10 +270,10 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
         </span>
         <div
           aria-hidden="true"
-          class="c0 c10"
+          class="c0 c11"
         >
           <span
-            class="c11"
+            class="c12"
           >
             <svg
               aria-hidden="true"
@@ -291,7 +296,7 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
     </div>
   </div>
   <div
-    class="c12"
+    class="c13"
   >
     <p
       aria-live="polite"

packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js

@@ -929,6 +929,7 @@ describe('Wysiwyg render and actions buttons', () => {
                             aria-hidden="true"
                             class="c0 c16 c17 c18"
                             tabindex="-1"
+                            title="Carret Down Button"
                             type="button"
                           >
                             <svg

packages/core/admin/admin/src/content-manager/pages/App/tests/index.test.js

@@ -130,7 +130,7 @@ describe('Content manager | App | main', () => {
         width: 1px;
       }
 
-      .c35 {
+      .c36 {
         -webkit-animation: gzYjWD 1s infinite linear;
         animation: gzYjWD 1s infinite linear;
         will-change: transform;
@@ -174,8 +174,8 @@ describe('Content manager | App | main', () => {
 
       .c24 {
         background: #eaeaef;
-        padding: 4px;
-        border-radius: 4px;
+        padding-right: 8px;
+        padding-left: 8px;
         position: absolute;
         right: 0px;
         top: 50%;
@@ -185,18 +185,18 @@ describe('Content manager | App | main', () => {
         transform: translateY(-50%);
       }
 
-      .c26 {
+      .c27 {
         background: #f6f6f9;
         padding-top: 8px;
         padding-bottom: 8px;
         padding-left: 32px;
       }
 
-      .c29 {
+      .c30 {
         padding-left: 8px;
       }
 
-      .c31 {
+      .c32 {
         padding-bottom: 56px;
       }
 
@@ -264,7 +264,7 @@ describe('Content manager | App | main', () => {
         justify-content: center;
       }
 
-      .c33 {
+      .c34 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -297,7 +297,7 @@ describe('Content manager | App | main', () => {
         color: #666687;
       }
 
-      .c30 {
+      .c31 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #32324d;
@@ -425,7 +425,7 @@ describe('Content manager | App | main', () => {
         fill: #666687;
       }
 
-      .c34 {
+      .c35 {
         height: 100vh;
       }
 
@@ -434,10 +434,15 @@ describe('Content manager | App | main', () => {
         grid-template-columns: auto 1fr;
       }
 
-      .c32 {
+      .c33 {
         overflow-x: hidden;
       }
 
+      .c26 {
+        border-radius: 4px;
+        height: 1.5rem;
+      }
+
       .c1 {
         width: 14.5rem;
         background: #f6f6f9;
@@ -455,7 +460,7 @@ describe('Content manager | App | main', () => {
         background-color: #dcdce4;
       }
 
-      .c27 {
+      .c28 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -473,34 +478,34 @@ describe('Content manager | App | main', () => {
         color: #32324d;
       }
 
-      .c27 svg > * {
+      .c28 svg > * {
         fill: #666687;
       }
 
-      .c27.active {
+      .c28.active {
         background-color: #f0f0ff;
         border-right: 2px solid #4945ff;
       }
 
-      .c27.active svg > * {
+      .c28.active svg > * {
         fill: #271fe0;
       }
 
-      .c27.active .c4 {
+      .c28.active .c4 {
         color: #271fe0;
         font-weight: 500;
       }
 
-      .c27:focus-visible {
+      .c28:focus-visible {
         outline-offset: -2px;
       }
 
-      .c28 {
+      .c29 {
         width: 0.75rem;
         height: 0.25rem;
       }
 
-      .c28 * {
+      .c29 * {
         fill: #666687;
       }
 
@@ -608,7 +613,7 @@ describe('Content manager | App | main', () => {
                         </div>
                       </div>
                       <div
-                        class="c24 c25"
+                        class="c24 c25 c26"
                         transform="translateY(-50%)"
                       >
                         <span
@@ -625,14 +630,14 @@ describe('Content manager | App | main', () => {
                     <li>
                       <a
                         aria-current="page"
-                        class="c26 c27 active"
+                        class="c27 c28 active"
                         href="/content-manager/collectionType/category"
                       >
                         <div
                           class="c20"
                         >
                           <svg
-                            class="c28"
+                            class="c29"
                             fill="none"
                             height="1em"
                             viewBox="0 0 4 4"
@@ -647,10 +652,10 @@ describe('Content manager | App | main', () => {
                             />
                           </svg>
                           <div
-                            class="c29"
+                            class="c30"
                           >
                             <span
-                              class="c4 c30"
+                              class="c4 c31"
                             >
                               Categories
                             </span>
@@ -686,7 +691,7 @@ describe('Content manager | App | main', () => {
                         </div>
                       </div>
                       <div
-                        class="c24 c25"
+                        class="c24 c25 c26"
                         transform="translateY(-50%)"
                       >
                         <span
@@ -702,14 +707,14 @@ describe('Content manager | App | main', () => {
                   >
                     <li>
                       <a
-                        class="c26 c27"
+                        class="c27 c28"
                         href="/homepage"
                       >
                         <div
                           class="c20"
                         >
                           <svg
-                            class="c28"
+                            class="c29"
                             fill="none"
                             height="1em"
                             viewBox="0 0 4 4"
@@ -724,10 +729,10 @@ describe('Content manager | App | main', () => {
                             />
                           </svg>
                           <div
-                            class="c29"
+                            class="c30"
                           >
                             <span
-                              class="c4 c30"
+                              class="c4 c31"
                             >
                               Home page
                             </span>
@@ -742,10 +747,10 @@ describe('Content manager | App | main', () => {
           </div>
         </nav>
         <div
-          class="c31 c32"
+          class="c32 c33"
         >
           <div
-            class="c33 c34"
+            class="c34 c35"
             data-testid="loader"
           >
             <div
@@ -759,7 +764,7 @@ describe('Content manager | App | main', () => {
               </div>
               <img
                 aria-hidden="true"
-                class="c35"
+                class="c36"
                 src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2MyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQyLjU1NjMgMTEuOTgxNkMzOS40ODQgMTAuMzA3MSAzNS44NTc1IDkuMjkwOTcgMzIuMzM1NCA5LjEzNTIxQzI4LjY0NDMgOC45Mjg4OCAyNC44Mjk1IDkuNzIzMTggMjEuMzMzNiAxMS40MTI5QzIwLjkxMjMgMTEuNTkwMSAyMC41Mzc2IDExLjgxMDEgMjAuMTcyMiAxMi4wMjQ5TDIwLjAxMDggMTIuMTE3OUMxOS44Nzc0IDEyLjE5NTEgMTkuNzQ0MSAxMi4yNzI0IDE5LjYwOCAxMi4zNTM2QzE5LjMyNTMgMTIuNTE0NiAxOS4wNDkyIDEyLjY3NDQgMTguNzU0NCAxMi44NzkyQzE4LjU0NjMgMTMuMDMyOSAxOC4zMzk1IDEzLjE3NTkgMTguMTMwMSAxMy4zMjNDMTcuNTY1OCAxMy43MjA4IDE2Ljk4NjggMTQuMTMxNyAxNi40OTgzIDE0LjU5NzlDMTQuODQ3NiAxNS45NTI0IDEzLjU1NzEgMTcuNjA3NSAxMi42MDcxIDE4LjkyMTRDMTAuNDM2NSAyMi4xNTY2IDkuMDg2MjIgMjUuOTU2NyA4LjgwNzAyIDI5LjYxNDNMOC43NzY0IDMwLjE1ODhDOC43MzMyOCAzMC45MTk2IDguNjg0NzYgMzEuNzA1NyA4Ljc1MzUzIDMyLjQ1NTVDOC43NjY0OCAzMi42MDg0IDguNzY2MSAzMi43NjM4IDguNzc1MDYgMzIuOTE0QzguNzg4OTUgMzMuMjI5IDguODAxNTIgMzMuNTM3MyA4Ljg0NiAzMy44NjcyTDkuMDczOTYgMzUuNDIyMUM5LjA5NzU2IDM1LjU3NjQgOS4xMTk4IDM1Ljc0MTMgOS4xNjMzIDM1LjkyNjNMOS42NTkxOSAzNy45MjcyTDEwLjEzOCAzOS4yODIzQzEwLjI3MjkgMzkuNjY3MyAxMC40MTU4IDQwLjA3NTEgMTAuNiA0MC40M0MxMi4wMjkyIDQzLjYzNyAxNC4xNDI1IDQ2LjQ1NzggMTYuNzA2MyA0OC41ODVDMTkuMDUwOCA1MC41Mjk2IDIxLjgyNCA1Mi4wMDIzIDI0Ljc0OTEgNTIuODQ1MkwyNi4yMzcxIDUzLjIzNzZDMjYuMzc4MSA1My4yNjkzIDI2LjQ5MjYgNTMuMjg4OSAyNi42MDMxIDUzLjMwNThMMjYuNzc3NSA1My4zMzExQzI3LjAwNTIgNTMuMzYzNiAyNy4yMTk1IDUzLjM5ODYgMjcuNDQ0NSA1My40MzVDMjcuODU5OCA1My41MDc2IDI4LjI2NzIgNTMuNTc0OCAyOC43MDc5IDUzLjYxODNMMzAuNTY0MSA1My43MjI5QzMwLjk1MTYgNTMuNzI0OSAzMS4zMzUyIDUzLjcwNjggMzEuNzA4MSA1My42ODc0QzMxLjkwMzkgNTMuNjgxIDMyLjA5ODQgNTMuNjY4MSAzMi4zMjg4IDUzLjY2MkMzNC41MjUzIDUzLjQ3NzIgMzYuNTEwNiA1My4wNjM0IDM4LjA1MTYgNTIuNDY1MkMzOC4xNzY5IDUyLjQxNzEgMzguMzAwOCA1Mi4zNzk2IDM4LjQyMzQgNTIuMzM1NUMzOC42NzI3IDUyLjI0OTkgMzguOTI1OSA1Mi4xNjcgMzkuMTQzMiA1Mi4wNTk5TDQwLjg1OTEgNTEuMjYyNkw0Mi41NzAyIDUwLjI2NkM0Mi45MDA5IDUwLjA2ODIgNDMuMDIwNSA0OS42NDE0IDQyLjgyODIgNDkuMjk4NEM0Mi42MzIgNDguOTUyNiA0Mi4yMDM0IDQ4LjgzMDggNDEuODYzNCA0OS4wMTY2TDQwLjE3OTIgNDkuOTIxOEwzOC40OTk1IDUwLjYyMjRDMzguMzE2OSA1MC42OTUzIDM4LjEyMSA1MC43NTM0IDM3LjkyMjQgNTAuODE1NUMzNy43ODM4IDUwLjg0ODkgMzcuNjUxOCA1MC44OTgzIDM3LjUwMTIgNTAuOTQwOEMzNi4wNzExIDUxLjQzNSAzNC4yNDQ1IDUxLjc0MjUgMzIuMjQ0IDUxLjgzNDZDMzIuMDQ0MiA1MS44MzgzIDMxLjg0NzEgNTEuODM3OSAzMS42NTQgNTEuODQwM0MzMS4zMDUxIDUxLjg0MTQgMzAuOTYwMiA1MS44NDUxIDMwLjYzOTIgNTEuODMwNUwyOC45MTc3IDUxLjY3MjVDMjguNTQ3NiA1MS42MTkgMjguMTY5NSA1MS41NDI3IDI3Ljc4NDggNTEuNDY3OEMyNy41NjM5IDUxLjQxNjcgMjcuMzM3NiA1MS4zNzM3IDI3LjEyOTkgNTEuMzM3NEwyNi45NTI5IDUxLjI5ODdDMjYuODcwNCA1MS4yODM0IDI2Ljc3NzIgNTEuMjY2NyAyNi43MzMzIDUxLjI1NDNMMjUuMzQ2NiA1MC44MzIyQzIyLjc2NTEgNDkuOTc4OSAyMC4zMyA0OC41NzI5IDE4LjI5NDIgNDYuNzU1N0MxNi4xMDU2IDQ0Ljc5NTEgMTQuMzMzOSA0Mi4yMzM1IDEzLjE3NDIgMzkuMzU4MkMxMi4wMjc2IDM2LjYwMTMgMTEuNTk4OCAzMy4yNzkyIDExLjk3MTYgMzAuMDA3NkMxMi4zMTQ1IDI3LjAyMTMgMTMuMzk0OCAyNC4xNjM1IDE1LjE4NTggMjEuNTA4M0MxNS4zMDM0IDIxLjMzMzkgMTUuNDIxIDIxLjE1OTYgMTUuNTIxMiAyMS4wMTk2QzE2LjQzMDkgMTkuODY4OCAxNy41NDA4IDE4LjU1ODkgMTguOTQ4MyAxNy40OTZDMTkuMzM2NyAxNy4xNTI1IDE5Ljc4NjIgMTYuODU2IDIwLjI2MTEgMTYuNTQ3OEMyMC40ODc4IDE2LjQwMDkgMjAuNzA3OSAxNi4yNTUzIDIwLjg5MDcgMTYuMTMwNkMyMS4wOTc0IDE2LjAwNDggMjEuMzE4OCAxNS44ODMxIDIxLjUzNDggMTUuNzY5NEMyMS42NzYxIDE1LjY5NzUgMjEuODE2MiAxNS42MTkgMjEuOTM4OCAxNS41NTc2TDIyLjEwMDIgMTUuNDY0NkMyMi40MDAyIDE1LjMwMzcgMjIuNjc0OSAxNS4xNTQ2IDIyLjk5MDggMTUuMDM5TDI0LjExODYgMTQuNTcxNUMyNC4zMzk5IDE0LjQ4NDQgMjQuNTcxOCAxNC40MTU5IDI0Ljc5OTcgMTQuMzQ0N0MyNC45NTMgMTQuMjk4MiAyNS4wOTgyIDE0LjI2MzUgMjUuMjYzNSAxNC4yMDc4QzI1Ljc4NiAxNC4wMTgyIDI2LjMyODMgMTMuOTExMiAyNi45MTA1IDEzLjc5NjVDMjcuMTE3IDEzLjc1NzEgMjcuMzMwMiAxMy43MTYzIDI3LjU2MDggMTMuNjU4NUMyNy43NTUzIDEzLjYxMSAyNy45NzM3IDEzLjU5NjkgMjguMjA4MiAxMy41NzYyQzI4LjM2NCAxMy41NjAzIDI4LjUxNzIgMTMuNTQ4MyAyOC42MzE4IDEzLjUzMzNDMjguNzg3NiAxMy41MTczIDI4LjkzNDIgMTMuNTA2NiAyOS4wOTI3IDEzLjQ4NjdDMjkuMzI4NSAxMy40NTU1IDI5LjU0NTYgMTMuNDM0NyAyOS43NDk0IDEzLjQzMzdDMzAuMDIzNyAxMy40NCAzMC4yOTk0IDEzLjQzNTcgMzAuNTc3NyAxMy40Mjc0QzMxLjA4MTEgMTMuNDIxIDMxLjU1NzkgMTMuNDE5NyAzMi4wMzE4IDEzLjQ5MTRDMzQuOTY2NCAxMy43MzUyIDM3LjcxNDQgMTQuNjA4NSA0MC4yMDUyIDE2LjA4NjhDNDIuMzQ4OSAxNy4zNjU1IDQ0LjI3MTYgMTkuMTUyNSA0NS43NjA3IDIxLjI2NEM0Ny4wMjU1IDIzLjA2MjggNDcuOTc1NiAyNS4wNTI4IDQ4LjQ5MjggMjcuMDM5M0M0OC41NzIgMjcuMzE3NiA0OC42Mjk5IDI3LjU5MzEgNDguNjgzOSAyNy44NjU5QzQ4LjcxNTQgMjguMDQyOCA0OC43NTYzIDI4LjIxNDUgNDguNzg5MiAyOC4zNjM2QzQ4LjgwMzcgMjguNDU0MSA0OC44MjA4IDI4LjU0MDYgNDguODQ0NSAyOC42MjU4QzQ4Ljg3NDkgMjguNzQ0MyA0OC44OTg2IDI4Ljg2NCA0OC45MTE2IDI4Ljk2NTFMNDguOTc5MyAyOS42MDQ3QzQ4Ljk5MjIgMjkuNzc0OCA0OS4wMTMyIDI5LjkzMzEgNDkuMDMwMSAzMC4wODg3QzQ5LjA2NjggMzAuMzI2OCA0OS4wODg5IDMwLjU2MDggNDkuMDk2NCAzMC43NTYxTDQ5LjEwODMgMzEuOTAwMUM0OS4xMzEyIDMyLjMzMDcgNDkuMDg5IDMyLjcxMTYgNDkuMDUyMiAzMy4wNjczQzQ5LjAzODQgMzMuMjU5OCA0OS4wMTI2IDMzLjQ0NDMgNDkuMDEyMyAzMy41ODI0QzQ4Ljk5NjEgMzMuNjkyNiA0OC45OTE4IDMzLjc5MzUgNDguOTgzNiAzMy44OTE3QzQ4Ljk3NTMgMzQuMDA3MiA0OC45NzI0IDM0LjExNDggNDguOTQxNCAzNC4yNTU0TDQ4LjU0NDkgMzYuMzA1OUM0OC4zMTM0IDM3Ljg2MjMgNDkuMzc5MyAzOS4zMzY1IDUwLjk0ODggMzkuNTgyMkM1Mi4wNDE3IDM5Ljc2MDEgNTMuMTUzNiAzOS4yODE5IDUzLjc3MTEgMzguMzY2NEM1NC4wMDYzIDM4LjAxNzYgNTQuMTYwNCAzNy42MjU3IDU0LjIyMjcgMzcuMjA2NEw1NC41MjE3IDM1LjI1NzRDNTQuNTUxNCAzNS4wNzU2IDU0LjU3MiAzNC44MyA1NC41ODQ2IDM0LjU3OTFMNTQuNjAyOCAzNC4yMzM4QzU0LjYwOTggMzQuMDU5OCA1NC42MjIzIDMzLjg3NzkgNTQuNjM0NyAzMy42Nzg4QzU0LjY3MzQgMzMuMTA1MiA1NC43MTYzIDMyLjQ0NzkgNTQuNjYxOSAzMS44MDU4TDU0LjU4NjcgMzAuNDI4OUM1NC41NjIyIDMwLjA5NTIgNTQuNTA5NyAyOS43NiA1NC40NTU5IDI5LjQxODFDNTQuNDMxIDI5LjI1NzIgNTQuNDA0OCAyOS4wODk2IDU0LjM4MjYgMjguOTA3NEw1NC4yNjg3IDI4LjEwNEM1NC4yMzMyIDI3LjkyNDQgNTQuMTgwNCAyNy43MjczIDU0LjEzMjkgMjcuNTM5Nkw1NC4wNjQzIDI3LjI0NTRDNTQuMDE5NSAyNy4wNzEgNTMuOTc3MyAyNi44OTI3IDUzLjkzMzggMjYuNzA3NkM1My44NDU1IDI2LjMzMDkgNTMuNzQ3OSAyNS45NDIyIDUzLjYxMyAyNS41NTcxQzUyLjg0IDIzLjAyOTIgNTEuNTM4MyAyMC41MTk0IDQ5LjgzMzggMTguMjc5OUM0Ny44NTQ0IDE1LjY4MiA0NS4zMzMzIDEzLjUwODcgNDIuNTU2MyAxMS45ODE2WiIgZmlsbD0iIzQ5NDVGRiIvPgo8L3N2Zz4K"
               />
             </div>

packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap

@@ -998,6 +998,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                               aria-hidden="true"
                               class="c1 c31 c32 c33"
                               tabindex="-1"
+                              title="Carret Down Button"
                               type="button"
                             >
                               <svg
@@ -2462,6 +2463,7 @@ exports[`EditSettingsView should add field 1`] = `
                               aria-hidden="true"
                               class="c1 c31 c32 c33"
                               tabindex="-1"
+                              title="Carret Down Button"
                               type="button"
                             >
                               <svg

packages/core/admin/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/tests/index.test.js

@@ -84,7 +84,7 @@ describe('<DraftAndPublishBadge />', () => {
         class="c0"
       >
         <div
-          class="c1 sc-eBTqsU gpeUmA"
+          class="c1 sc-dcgwPl cizjuL"
         >
           <svg
             class="c2"
@@ -184,7 +184,7 @@ describe('<DraftAndPublishBadge />', () => {
         class="c0"
       >
         <div
-          class="c1 sc-eBTqsU gpeUmA"
+          class="c1 sc-dcgwPl cizjuL"
         >
           <svg
             class="c2"