chore: Update snapshot tests

packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js

@@ -29,7 +29,7 @@ describe('DocAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c31 {
+      .c33 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -46,6 +46,14 @@ describe('DocAssetCard', () => {
         height: 5.5rem;
       }
 
+      .c26 {
+        padding-top: 4px;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+      }
+
       .c16 {
         -webkit-align-items: center;
         -webkit-box-align: center;
@@ -64,6 +72,20 @@ describe('DocAssetCard', () => {
         justify-content: center;
       }
 
+      .c27 {
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+      }
+
       .c22 {
         padding-top: 4px;
       }
@@ -191,7 +213,7 @@ describe('DocAssetCard', () => {
         padding-left: 12px;
       }
 
-      .c27 {
+      .c29 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
@@ -244,7 +266,7 @@ describe('DocAssetCard', () => {
         flex-direction: row;
       }
 
-      .c28 {
+      .c30 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -296,7 +318,7 @@ describe('DocAssetCard', () => {
         line-height: 1.33;
       }
 
-      .c30 {
+      .c32 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -304,14 +326,14 @@ describe('DocAssetCard', () => {
         text-transform: uppercase;
       }
 
-      .c26 {
+      .c28 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c29 {
+      .c31 {
         margin-left: 4px;
       }
 
@@ -530,23 +552,27 @@ describe('DocAssetCard', () => {
                 </div>
               </div>
               <div
-                class="c26"
+                class="c26 c27"
               >
                 <div
-                  class="c27 c28 c29"
+                  class="c28"
                 >
-                  <span
+                  <div
-                    class="c30"
+                    class="c29 c30 c31"
                   >
-                    Doc
+                    <span
-                  </span>
+                      class="c32"
+                    >
+                      Doc
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </article>
         <div
-          class="c31"
+          class="c33"
         >
           <p
             aria-live="polite"

packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js

@@ -32,7 +32,7 @@ describe('ImageAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c29 {
+      .c31 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -69,7 +69,7 @@ describe('ImageAssetCard', () => {
         padding-left: 12px;
       }
 
-      .c25 {
+      .c27 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
@@ -122,7 +122,7 @@ describe('ImageAssetCard', () => {
         flex-direction: row;
       }
 
-      .c26 {
+      .c28 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -198,7 +198,7 @@ describe('ImageAssetCard', () => {
         line-height: 1.33;
       }
 
-      .c28 {
+      .c30 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -206,14 +206,14 @@ describe('ImageAssetCard', () => {
         text-transform: uppercase;
       }
 
-      .c24 {
+      .c26 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c27 {
+      .c29 {
         margin-left: 4px;
       }
 
@@ -298,6 +298,28 @@ describe('ImageAssetCard', () => {
         padding-top: 4px;
       }
 
+      .c24 {
+        padding-top: 4px;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+      }
+
+      .c25 {
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+      }
+
       .c13 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -510,23 +532,27 @@ describe('ImageAssetCard', () => {
                 </div>
               </div>
               <div
-                class="c24"
+                class="c24 c25"
               >
                 <div
-                  class="c25 c26 c27"
+                  class="c26"
                 >
-                  <span
+                  <div
-                    class="c28"
+                    class="c27 c28 c29"
                   >
-                    Image
+                    <span
-                  </span>
+                      class="c30"
+                    >
+                      Image
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </article>
         <div
-          class="c29"
+          class="c31"
         >
           <p
             aria-live="polite"

packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
-.c35 {
+.c37 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -32,12 +32,34 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   max-width: 100%;
 }
 
-.c31 {
+.c21 {
+  padding-top: 4px;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c33 {
   width: 100%;
   height: 10.25rem;
 }
 
-.c32 {
+.c22 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c34 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -55,7 +77,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   justify-content: center;
 }
 
-.c27 {
+.c29 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -88,14 +110,14 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   padding-left: 12px;
 }
 
-.c22 {
+.c24 {
   background: #f6f6f9;
   padding: 4px;
   border-radius: 4px;
   min-width: 20px;
 }
 
-.c28 {
+.c30 {
   background: #32324d;
   color: #ffffff;
   padding: 4px;
@@ -148,7 +170,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   flex-direction: row;
 }
 
-.c23 {
+.c25 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -218,7 +240,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   line-height: 1.33;
 }
 
-.c25 {
+.c27 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -226,20 +248,20 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   text-transform: uppercase;
 }
 
-.c30 {
+.c32 {
   color: #ffffff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c21 {
+.c23 {
   margin-left: auto;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c24 {
+.c26 {
   margin-left: 4px;
 }
 
@@ -320,7 +342,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c29 {
+.c31 {
   position: absolute;
   bottom: 4px;
   right: 4px;
@@ -338,18 +360,18 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   opacity: 1;
 }
 
-.c26 canvas,
+.c28 canvas,
-.c26 video {
+.c28 video {
   display: block;
   max-width: 100%;
   max-height: 10.25rem;
 }
 
-.c34 svg {
+.c36 svg {
   font-size: 3rem;
 }
 
-.c33 {
+.c35 {
   border-radius: 4px 4px 0 0;
   background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
 }
@@ -444,16 +466,20 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c21"
+                  class="c21 c22"
                 >
                   <div
-                    class="c22 c23 c24"
+                    class="c23"
                   >
-                    <span
+                    <div
-                      class="c25"
+                      class="c24 c25 c26"
                     >
-                      Image
+                      <span
-                    </span>
+                        class="c27"
+                      >
+                        Image
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -497,7 +523,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                   class="c8"
                 >
                   <div
-                    class="c26"
+                    class="c28"
                   >
                     <figure
                       class=""
@@ -511,7 +537,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                         />
                       </video>
                       <figcaption
-                        class="c27"
+                        class="c29"
                       >
                         mov_bbb.mp4
                       </figcaption>
@@ -520,10 +546,10 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                 </div>
               </div>
               <time
-                class="c28 c29"
+                class="c30 c31"
               >
                 <span
-                  class="c30"
+                  class="c32"
                 >
                   ...
                 </span>
@@ -560,16 +586,20 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c21"
+                  class="c21 c22"
                 >
                   <div
-                    class="c22 c23 c24"
+                    class="c23"
                   >
-                    <span
+                    <div
-                      class="c25"
+                      class="c24 c25 c26"
                     >
-                      Video
+                      <span
-                    </span>
+                        class="c27"
+                      >
+                        Video
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -607,12 +637,12 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                 </div>
               </div>
               <div
-                class="c31 c32 c33"
+                class="c33 c34 c35"
                 height="10.25rem"
                 width="100%"
               >
                 <span
-                  class="c34"
+                  class="c36"
                 >
                   <svg
                     aria-label="CARTE MARIAGE AVS - Printemps.pdf"
@@ -667,16 +697,20 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c21"
+                  class="c21 c22"
                 >
                   <div
-                    class="c22 c23 c24"
+                    class="c23"
                   >
-                    <span
+                    <div
-                      class="c25"
+                      class="c24 c25 c26"
                     >
-                      Doc
+                      <span
-                    </span>
+                        class="c27"
+                      >
+                        Doc
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -687,7 +721,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
     </div>
   </div>
   <div
-    class="c35"
+    class="c37"
   >
     <p
       aria-live="polite"

packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
-.c59 {
+.c61 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -13,7 +13,15 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   width: 1px;
 }
 
-.c46 {
+.c41 {
+  padding-top: 4px;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c48 {
   width: 100%;
   height: 5.5rem;
 }
@@ -36,7 +44,21 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   justify-content: space-between;
 }
 
-.c47 {
+.c42 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c49 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -235,7 +257,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   fill: #ffffff;
 }
 
-.c58 {
+.c60 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -247,7 +269,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   background: #ffffff;
 }
 
-.c58 .sc-cfJLRR {
+.c60 .sc-cfJLRR {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -258,52 +280,52 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: center;
 }
 
-.c58 .c16 {
+.c60 .c16 {
   color: #ffffff;
 }
 
-.c58[aria-disabled='true'] {
+.c60[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c58[aria-disabled='true'] .c16 {
+.c60[aria-disabled='true'] .c16 {
   color: #666687;
 }
 
-.c58[aria-disabled='true'] svg > g,
+.c60[aria-disabled='true'] svg > g,
-.c58[aria-disabled='true'] svg path {
+.c60[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c58[aria-disabled='true']:active {
+.c60[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c58[aria-disabled='true']:active .c16 {
+.c60[aria-disabled='true']:active .c16 {
   color: #666687;
 }
 
-.c58[aria-disabled='true']:active svg > g,
+.c60[aria-disabled='true']:active svg > g,
-.c58[aria-disabled='true']:active svg path {
+.c60[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c58:hover {
+.c60:hover {
   background-color: #f6f6f9;
 }
 
-.c58:active {
+.c60:active {
   background-color: #eaeaef;
 }
 
-.c58 .c16 {
+.c60 .c16 {
   color: #32324d;
 }
 
-.c58 svg > g,
+.c60 svg > g,
-.c58 svg path {
+.c60 svg path {
   fill: #32324d;
 }
 
@@ -409,7 +431,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   fill: #666687;
 }
 
-.c51 {
+.c53 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -451,7 +473,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   justify-content: space-between;
 }
 
-.c56 {
+.c58 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -568,12 +590,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c55 {
+.c57 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c57 > * + * {
+.c59 > * + * {
   margin-left: 8px;
 }
 
@@ -614,14 +636,14 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   padding-left: 12px;
 }
 
-.c42 {
+.c44 {
   background: #f6f6f9;
   padding: 4px;
   border-radius: 4px;
   min-width: 20px;
 }
 
-.c52 {
+.c54 {
   background: #32324d;
   color: #ffffff;
   padding: 4px;
@@ -674,7 +696,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   flex-direction: row;
 }
 
-.c43 {
+.c45 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -744,7 +766,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   line-height: 1.33;
 }
 
-.c45 {
+.c47 {
   color: #666687;
   font-weight: 600;
   font-size: 0.6875rem;
@@ -752,20 +774,20 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   text-transform: uppercase;
 }
 
-.c54 {
+.c56 {
   color: #ffffff;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c41 {
+.c43 {
   margin-left: auto;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c44 {
+.c46 {
   margin-left: 4px;
 }
 
@@ -778,7 +800,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c53 {
+.c55 {
   position: absolute;
   bottom: 4px;
   right: 4px;
@@ -804,18 +826,18 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   opacity: 1;
 }
 
-.c50 canvas,
+.c52 canvas,
-.c50 video {
+.c52 video {
   display: block;
   max-width: 100%;
   max-height: 5.5rem;
 }
 
-.c49 svg {
+.c51 svg {
   font-size: 3rem;
 }
 
-.c48 {
+.c50 {
   border-radius: 4px 4px 0 0;
   background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
 }
@@ -1018,16 +1040,20 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c41"
+                        class="c41 c42"
                       >
                         <div
-                          class="c42 c43 c44"
+                          class="c43"
                         >
-                          <span
+                          <div
-                            class="c45"
+                            class="c44 c45 c46"
                           >
-                            Image
+                            <span
-                          </span>
+                              class="c47"
+                            >
+                              Image
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -1103,12 +1129,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       </span>
                     </div>
                     <div
-                      class="c46 c47 c48"
+                      class="c48 c49 c50"
                       height="5.5rem"
                       width="100%"
                     >
                       <span
-                        class="c49"
+                        class="c51"
                       >
                         <svg
                           aria-label="something.pdf"
@@ -1163,16 +1189,20 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c41"
+                        class="c41 c42"
                       >
                         <div
-                          class="c42 c43 c44"
+                          class="c43"
                         >
-                          <span
+                          <div
-                            class="c45"
+                            class="c44 c45 c46"
                           >
-                            Doc
+                            <span
-                          </span>
+                              class="c47"
+                            >
+                              Doc
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -1254,7 +1284,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         class="c25"
                       >
                         <div
-                          class="c50"
+                          class="c52"
                         >
                           <figure
                             class=""
@@ -1268,7 +1298,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                               />
                             </video>
                             <figcaption
-                              class="c51"
+                              class="c53"
                             >
                               something.mp4
                             </figcaption>
@@ -1277,10 +1307,10 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       </div>
                     </div>
                     <time
-                      class="c52 c53"
+                      class="c54 c55"
                     >
                       <span
-                        class="c54"
+                        class="c56"
                       >
                         ...
                       </span>
@@ -1317,16 +1347,20 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c41"
+                        class="c41 c42"
                       >
                         <div
-                          class="c42 c43 c44"
+                          class="c43"
                         >
-                          <span
+                          <div
-                            class="c45"
+                            class="c44 c45 c46"
                           >
-                            Video
+                            <span
-                          </span>
+                              class="c47"
+                            >
+                              Video
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -1339,17 +1373,17 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
       </div>
     </div>
     <div
-      class="c0 c55"
+      class="c0 c57"
     >
       <div
         class="c2"
       >
         <div
-          class="c56 c57"
+          class="c58 c59"
         >
           <button
             aria-disabled="false"
-            class="c14 c58"
+            class="c14 c60"
             type="button"
           >
             <span
@@ -1360,7 +1394,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
           </button>
         </div>
         <div
-          class="c56 c57"
+          class="c58 c59"
         >
           <button
             aria-disabled="false"
@@ -1378,7 +1412,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
     </div>
   </form>
   <div
-    class="c59"
+    class="c61"
   >
     <p
       aria-live="polite"

packages/core/upload/admin/src/components/UploadProgress/tests/index.test.js

@@ -49,23 +49,14 @@ describe('<UploadProgress />', () => {
     } = renderCompo();
 
     expect(firstChild).toMatchInlineSnapshot(`
-      .c6 {
+      .c11 {
-        color: #dcdce4;
+        color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c3 {
-        padding-bottom: 8px;
-      }
-
-      .c7 {
-        padding-left: 8px;
-      }
-
       .c0 {
-        background: #4a4a6a;
+        background: #eaeaef;
-        border-radius: 4px;
       }
 
       .c1 {
@@ -80,13 +71,59 @@ describe('<UploadProgress />', () => {
         -webkit-flex-direction: row;
         -ms-flex-direction: row;
         flex-direction: row;
-        -webkit-box-pack: center;
+      }
-        -webkit-justify-content: center;
+
-        -ms-flex-pack: center;
+      .c3 {
-        justify-content: center;
+        width: 100%;
       }
 
       .c4 {
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+      }
+
+      .c9 {
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+      }
+
+      .c5 > * {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
+      .c5 > * + * {
+        margin-top: 8px;
+      }
+
+      .c10 > * {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .c10 > * + * {
+        margin-left: 4px;
+      }
+
+      .c6 {
         background: #666687;
         border-radius: 4px;
         position: relative;
@@ -94,7 +131,7 @@ describe('<UploadProgress />', () => {
         height: 4px;
       }
 
-      .c4:before {
+      .c6:before {
         content: '';
         position: absolute;
         top: 0;
@@ -104,79 +141,80 @@ describe('<UploadProgress />', () => {
         background: #eaeaef;
       }
 
+      .c7 {
+        width: 102px;
+        height: 8px;
+      }
+
       .c2 {
+        border-radius: 4px 4px 0 0;
         width: 100%;
         height: 100%;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
       }
 
-      .c5 {
+      .c8 {
         border: none;
         background: none;
-        display: -webkit-box;
+        width: -webkit-min-content;
-        display: -webkit-flex;
+        width: -moz-min-content;
-        display: -ms-flexbox;
+        width: min-content;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
       }
 
-      .c5 svg {
+      .c8 svg {
-        height: 10px;
+        height: 8px;
-        width: 10px;
+        width: 8px;
       }
 
-      .c5 svg path {
+      .c8 svg path {
-        fill: #dcdce4;
+        fill: #666687;
       }
 
       <div
         class="c0 c1 c2"
       >
         <div
-          class="c3"
+          class="c3 c4 c5"
+          spacing="2"
+          width="100%"
         >
           <div
             aria-label="0/100%"
             aria-valuemax="100"
             aria-valuemin="0"
             aria-valuenow="0"
-            class="c4"
+            class="c6 c7"
             role="progressbar"
             value="0"
           />
-        </div>
+          <button
-        <button
+            class="c8"
-          class="c5"
+            type="button"
-          type="button"
-        >
-          <span
-            class="c6"
           >
-            Cancel
+            <div
-          </span>
+              class="c9 c10"
-          <span
+              spacing="1"
-            aria-hidden="true"
-            class="c7"
-          >
-            <svg
-              fill="none"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
             >
-              <path
+              <span
-                d="M24 2.417L21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417z"
+                class="c11"
-                fill="#212134"
+              >
-              />
+                Cancel
-            </svg>
+              </span>
-          </span>
+              <svg
-        </button>
+                aria-hidden="true"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M24 2.417L21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417z"
+                  fill="#212134"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
       </div>
     `);
   });
@@ -189,7 +227,6 @@ describe('<UploadProgress />', () => {
     expect(firstChild).toMatchInlineSnapshot(`
       .c0 {
         background: #fcecea;
-        border-radius: 4px;
       }
 
       .c1 {
@@ -204,18 +241,12 @@ describe('<UploadProgress />', () => {
         -webkit-flex-direction: row;
         -ms-flex-direction: row;
         flex-direction: row;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
       }
 
       .c2 {
+        border-radius: 4px 4px 0 0;
         width: 100%;
         height: 100%;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
       }
 
       .c2 svg path {