@comicrelief/component-library 8.53.2 → 8.53.3

package/dist/components/Organisms/DynamicGallery/__snapshots__/DynamicGallery.test.js.snap

@@ -15,21 +15,21 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
   object-fit: cover;
 }
 
-.c21 {
+.c18 {
   -webkit-transform: rotate(0);
   -ms-transform: rotate(0);
   transform: rotate(0);
   fill: #000000;
 }
 
-.c23 {
+.c20 {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
   fill: #000000;
 }
 
-.c19 {
+.c23 {
   fill: #000000;
 }
 
@@ -109,8 +109,7 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
   justify-content: center;
   min-width: 128px;
   min-height: 32px;
-  border-radius: 0.6rem;
-  overflow: hidden;
+  width: 100%;
 }
 
 .c13 > div {
@@ -145,7 +144,7 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c15 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -159,10 +158,11 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
   align-items: stretch;
   gap: 0.5rem;
   width: 100%;
+  max-width: 1024px;
   padding: 0 1rem;
 }
 
-.c16 {
+.c15 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -185,57 +185,34 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
   z-index: 10;
 }
 
-.c16 svg {
-  -webkit-transition: all 0.1s ease-out;
-  transition: all 0.1s ease-out;
-}
-
-.c16:hover svg {
-  fill: #E52630;
+.c15 svg {
+  -webkit-transition: fill 0.1s ease-out;
+  transition: fill 0.1s ease-out;
 }
 
-.c16:focus-visible {
+.c15:focus-visible {
   outline: 2px solid #E52630;
 }
 
-.c17 {
+.c22 {
   top: 0;
   right: 0;
 }
 
-.c20 {
-  top: 30%;
+.c16 {
+  top: 50%;
   left: 0;
-  -webkit-transform: translate(0,-50%);
-  -ms-transform: translate(0,-50%);
-  transform: translate(0,-50%);
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  -webkit-transform: translate(-1rem,-50%);
+  -ms-transform: translate(-1rem,-50%);
+  transform: translate(-1rem,-50%);
 }
 
-.c22 {
-  top: 30%;
+.c19 {
+  top: 50%;
   right: 0;
-  -webkit-transform: translate(0,-50%);
-  -ms-transform: translate(0,-50%);
-  transform: translate(0,-50%);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.c18 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  border: 0;
-  padding: 0;
-  white-space: nowrap;
-  -webkit-clip-path: inset(100%);
-  clip-path: inset(100%);
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  overflow: hidden;
+  -webkit-transform: translate(1rem,-50%);
+  -ms-transform: translate(1rem,-50%);
+  transform: translate(1rem,-50%);
 }
 
 .c0 {
@@ -251,9 +228,10 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
   -ms-flex-align: center;
   align-items: center;
   gap: 1rem;
+  position: relative;
   max-width: 1500px;
   background: transparent;
-  padding: 0rem 2rem 2rem;
+  padding: 0rem 1rem 2rem;
   color: #000000;
 }
 
@@ -351,14 +329,33 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
   padding: 0 1rem;
 }
 
+.c17 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  white-space: nowrap;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}
+
+.c24 {
+  bottom: 0;
+}
+
 @media (min-width:1024px) {
-  .c21 {
+  .c18 {
     fill: #000000;
   }
 }
 
 @media (min-width:1024px) {
-  .c23 {
+  .c20 {
     fill: #000000;
   }
 }
@@ -369,20 +366,38 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
   }
 }
 
+@media (hover:hover) {
+  .c15:hover svg {
+    fill: #E52630;
+  }
+}
+
 @media (min-width:1024px) {
-  .c20 {
+  .c16 {
     position: fixed;
+    -webkit-transform: translate(1rem,-50%);
+    -ms-transform: translate(1rem,-50%);
+    transform: translate(1rem,-50%);
     top: 50%;
   }
 }
 
 @media (min-width:1024px) {
-  .c22 {
+  .c19 {
     position: fixed;
+    -webkit-transform: translate(-1rem,-50%);
+    -ms-transform: translate(-1rem,-50%);
+    transform: translate(-1rem,-50%);
     top: 50%;
   }
 }
 
+@media (min-width:740px) {
+  .c0 {
+    gap: 1rem;
+  }
+}
+
 @media (min-width:740px) {
   .c1 {
     gap: 2rem;
@@ -442,7 +457,7 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
       <button
         aria-label=""
         className="c3 gallery-node"
-        data-node-index={0}
+        data-node-index={1}
         onPointerUp={[Function]}
         tabIndex={0}
         title=""
@@ -476,7 +491,7 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
       <button
         aria-label=""
         className="c3 gallery-node"
-        data-node-index={0}
+        data-node-index={2}
         onPointerUp={[Function]}
         tabIndex={0}
         title=""
@@ -545,25 +560,75 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
               />
             </span>
           </div>
+          <button
+            className="c15 c16"
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="c17"
+            >
+              Previous
+            </span>
+            <svg
+              className="c18"
+              direction="left"
+              height={16}
+              viewBox="0 0 96 96"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m90.871,50.776c-0.016,0.016 -0.026,0.036 -0.043,0.052l-32,32c-0.781,0.781 -1.804,1.172 -2.828,1.172s-2.047,-0.391 -2.829,-1.171a4,4 0 0 1 0,-5.657l25.172,-25.172l-70.343,0a4,4 0 0 1 0,-8l70.343,0l-25.172,-25.171a4,4 0 0 1 5.657,-5.657l32,32c0.016,0.016 0.027,0.036 0.043,0.052c0.167,0.172 0.321,0.357 0.455,0.557c0.069,0.104 0.118,0.216 0.176,0.325c0.065,0.121 0.138,0.236 0.191,0.364c0.057,0.137 0.09,0.279 0.13,0.42c0.032,0.109 0.074,0.214 0.097,0.327a4.017,4.017 0 0 1 0,1.568c-0.023,0.113 -0.065,0.217 -0.097,0.327c-0.041,0.141 -0.074,0.283 -0.13,0.42c-0.053,0.128 -0.126,0.243 -0.191,0.364c-0.059,0.109 -0.107,0.221 -0.176,0.325a4.035,4.035 0 0 1 -0.455,0.555z"
+                id="svg_1"
+                transform="rotate(-180 47.998626708984375,48.00019836425781) "
+              />
+            </svg>
+          </button>
+          <button
+            className="c15 c19"
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="c17"
+            >
+              Next
+            </span>
+            <svg
+              className="c20"
+              direction="right"
+              height={16}
+              viewBox="0 0 96 96"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m90.871,50.776c-0.016,0.016 -0.026,0.036 -0.043,0.052l-32,32c-0.781,0.781 -1.804,1.172 -2.828,1.172s-2.047,-0.391 -2.829,-1.171a4,4 0 0 1 0,-5.657l25.172,-25.172l-70.343,0a4,4 0 0 1 0,-8l70.343,0l-25.172,-25.171a4,4 0 0 1 5.657,-5.657l32,32c0.016,0.016 0.027,0.036 0.043,0.052c0.167,0.172 0.321,0.357 0.455,0.557c0.069,0.104 0.118,0.216 0.176,0.325c0.065,0.121 0.138,0.236 0.191,0.364c0.057,0.137 0.09,0.279 0.13,0.42c0.032,0.109 0.074,0.214 0.097,0.327a4.017,4.017 0 0 1 0,1.568c-0.023,0.113 -0.065,0.217 -0.097,0.327c-0.041,0.141 -0.074,0.283 -0.13,0.42c-0.053,0.128 -0.126,0.243 -0.191,0.364c-0.059,0.109 -0.107,0.221 -0.176,0.325a4.035,4.035 0 0 1 -0.455,0.555z"
+                id="svg_1"
+                transform="rotate(-180 47.998626708984375,48.00019836425781) "
+              />
+            </svg>
+          </button>
         </div>
         <div
           aria-atomic="true"
           aria-live="polite"
-          className="c15"
+          className="c21"
           id="lightboxDescription"
         />
         <button
-          className="c16 c17"
+          className="c15 c22 close-button"
           onClick={[Function]}
           type="button"
         >
           <span
-            className="c18"
+            className="c17"
           >
             Close
           </span>
           <svg
-            className="c19"
+            className="c23"
             height={16}
             viewBox="0 0 96 96"
             width={16}
@@ -574,82 +639,36 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
             />
           </svg>
         </button>
-        <button
-          className="c16 c20"
-          onClick={[Function]}
-          type="button"
-        >
-          <span
-            className="c18"
-          >
-            Previous
-          </span>
-          <svg
-            className="c21"
-            direction="left"
-            height={16}
-            viewBox="0 0 96 96"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m90.871,50.776c-0.016,0.016 -0.026,0.036 -0.043,0.052l-32,32c-0.781,0.781 -1.804,1.172 -2.828,1.172s-2.047,-0.391 -2.829,-1.171a4,4 0 0 1 0,-5.657l25.172,-25.172l-70.343,0a4,4 0 0 1 0,-8l70.343,0l-25.172,-25.171a4,4 0 0 1 5.657,-5.657l32,32c0.016,0.016 0.027,0.036 0.043,0.052c0.167,0.172 0.321,0.357 0.455,0.557c0.069,0.104 0.118,0.216 0.176,0.325c0.065,0.121 0.138,0.236 0.191,0.364c0.057,0.137 0.09,0.279 0.13,0.42c0.032,0.109 0.074,0.214 0.097,0.327a4.017,4.017 0 0 1 0,1.568c-0.023,0.113 -0.065,0.217 -0.097,0.327c-0.041,0.141 -0.074,0.283 -0.13,0.42c-0.053,0.128 -0.126,0.243 -0.191,0.364c-0.059,0.109 -0.107,0.221 -0.176,0.325a4.035,4.035 0 0 1 -0.455,0.555z"
-              id="svg_1"
-              transform="rotate(-180 47.998626708984375,48.00019836425781) "
-            />
-          </svg>
-        </button>
-        <button
-          className="c16 c22"
-          onClick={[Function]}
-          type="button"
-        >
-          <span
-            className="c18"
-          >
-            Next
-          </span>
-          <svg
-            className="c23"
-            direction="right"
-            height={16}
-            viewBox="0 0 96 96"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m90.871,50.776c-0.016,0.016 -0.026,0.036 -0.043,0.052l-32,32c-0.781,0.781 -1.804,1.172 -2.828,1.172s-2.047,-0.391 -2.829,-1.171a4,4 0 0 1 0,-5.657l25.172,-25.172l-70.343,0a4,4 0 0 1 0,-8l70.343,0l-25.172,-25.171a4,4 0 0 1 5.657,-5.657l32,32c0.016,0.016 0.027,0.036 0.043,0.052c0.167,0.172 0.321,0.357 0.455,0.557c0.069,0.104 0.118,0.216 0.176,0.325c0.065,0.121 0.138,0.236 0.191,0.364c0.057,0.137 0.09,0.279 0.13,0.42c0.032,0.109 0.074,0.214 0.097,0.327a4.017,4.017 0 0 1 0,1.568c-0.023,0.113 -0.065,0.217 -0.097,0.327c-0.041,0.141 -0.074,0.283 -0.13,0.42c-0.053,0.128 -0.126,0.243 -0.191,0.364c-0.059,0.109 -0.107,0.221 -0.176,0.325a4.035,4.035 0 0 1 -0.455,0.555z"
-              id="svg_1"
-              transform="rotate(-180 47.998626708984375,48.00019836425781) "
-            />
-          </svg>
-        </button>
       </div>
     </dialog>
   </div>
-  <div
-    className="gallery-focus-trap"
+  <span
+    className="c17 c24 gallery-focus-trap"
     tabIndex={0}
-  />
+  >
+    <span>
+      End of gallery
+    </span>
+  </span>
 </div>
 `;
 
 exports[`renders an empty Dynamic Gallery with no options set 1`] = `
-.c15 {
+.c12 {
   -webkit-transform: rotate(0);
   -ms-transform: rotate(0);
   transform: rotate(0);
   fill: #000000;
 }
 
-.c17 {
+.c14 {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
   fill: #000000;
 }
 
-.c13 {
+.c17 {
   fill: #000000;
 }
 
@@ -729,8 +748,7 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
   justify-content: center;
   min-width: 128px;
   min-height: 32px;
-  border-radius: 0.6rem;
-  overflow: hidden;
+  width: 100%;
 }
 
 .c7 > div {
@@ -765,7 +783,7 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c9 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -779,10 +797,11 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
   align-items: stretch;
   gap: 0.5rem;
   width: 100%;
+  max-width: 1024px;
   padding: 0 1rem;
 }
 
-.c10 {
+.c9 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -805,57 +824,34 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
   z-index: 10;
 }
 
-.c10 svg {
-  -webkit-transition: all 0.1s ease-out;
-  transition: all 0.1s ease-out;
-}
-
-.c10:hover svg {
-  fill: #E52630;
+.c9 svg {
+  -webkit-transition: fill 0.1s ease-out;
+  transition: fill 0.1s ease-out;
 }
 
-.c10:focus-visible {
+.c9:focus-visible {
   outline: 2px solid #E52630;
 }
 
-.c11 {
+.c16 {
   top: 0;
   right: 0;
 }
 
-.c14 {
-  top: 30%;
+.c10 {
+  top: 50%;
   left: 0;
-  -webkit-transform: translate(0,-50%);
-  -ms-transform: translate(0,-50%);
-  transform: translate(0,-50%);
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  -webkit-transform: translate(-1rem,-50%);
+  -ms-transform: translate(-1rem,-50%);
+  transform: translate(-1rem,-50%);
 }
 
-.c16 {
-  top: 30%;
+.c13 {
+  top: 50%;
   right: 0;
-  -webkit-transform: translate(0,-50%);
-  -ms-transform: translate(0,-50%);
-  transform: translate(0,-50%);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.c12 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  border: 0;
-  padding: 0;
-  white-space: nowrap;
-  -webkit-clip-path: inset(100%);
-  clip-path: inset(100%);
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  overflow: hidden;
+  -webkit-transform: translate(1rem,-50%);
+  -ms-transform: translate(1rem,-50%);
+  transform: translate(1rem,-50%);
 }
 
 .c0 {
@@ -871,9 +867,10 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
   -ms-flex-align: center;
   align-items: center;
   gap: 1rem;
+  position: relative;
   max-width: 1500px;
   background: transparent;
-  padding: 0rem 2rem 2rem;
+  padding: 0rem 1rem 2rem;
   color: #000000;
 }
 
@@ -890,14 +887,33 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
   display: block;
 }
 
+.c11 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  white-space: nowrap;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}
+
+.c18 {
+  bottom: 0;
+}
+
 @media (min-width:1024px) {
-  .c15 {
+  .c12 {
     fill: #000000;
   }
 }
 
 @media (min-width:1024px) {
-  .c17 {
+  .c14 {
     fill: #000000;
   }
 }
@@ -908,20 +924,38 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
   }
 }
 
+@media (hover:hover) {
+  .c9:hover svg {
+    fill: #E52630;
+  }
+}
+
 @media (min-width:1024px) {
-  .c14 {
+  .c10 {
     position: fixed;
+    -webkit-transform: translate(1rem,-50%);
+    -ms-transform: translate(1rem,-50%);
+    transform: translate(1rem,-50%);
     top: 50%;
   }
 }
 
 @media (min-width:1024px) {
-  .c16 {
+  .c13 {
     position: fixed;
+    -webkit-transform: translate(-1rem,-50%);
+    -ms-transform: translate(-1rem,-50%);
+    transform: translate(-1rem,-50%);
     top: 50%;
   }
 }
 
+@media (min-width:740px) {
+  .c0 {
+    gap: 1rem;
+  }
+}
+
 @media (min-width:740px) {
   .c1 {
     gap: 2rem;
@@ -976,25 +1010,75 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
               />
             </span>
           </div>
+          <button
+            className="c9 c10"
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="c11"
+            >
+              Previous
+            </span>
+            <svg
+              className="c12"
+              direction="left"
+              height={16}
+              viewBox="0 0 96 96"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m90.871,50.776c-0.016,0.016 -0.026,0.036 -0.043,0.052l-32,32c-0.781,0.781 -1.804,1.172 -2.828,1.172s-2.047,-0.391 -2.829,-1.171a4,4 0 0 1 0,-5.657l25.172,-25.172l-70.343,0a4,4 0 0 1 0,-8l70.343,0l-25.172,-25.171a4,4 0 0 1 5.657,-5.657l32,32c0.016,0.016 0.027,0.036 0.043,0.052c0.167,0.172 0.321,0.357 0.455,0.557c0.069,0.104 0.118,0.216 0.176,0.325c0.065,0.121 0.138,0.236 0.191,0.364c0.057,0.137 0.09,0.279 0.13,0.42c0.032,0.109 0.074,0.214 0.097,0.327a4.017,4.017 0 0 1 0,1.568c-0.023,0.113 -0.065,0.217 -0.097,0.327c-0.041,0.141 -0.074,0.283 -0.13,0.42c-0.053,0.128 -0.126,0.243 -0.191,0.364c-0.059,0.109 -0.107,0.221 -0.176,0.325a4.035,4.035 0 0 1 -0.455,0.555z"
+                id="svg_1"
+                transform="rotate(-180 47.998626708984375,48.00019836425781) "
+              />
+            </svg>
+          </button>
+          <button
+            className="c9 c13"
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="c11"
+            >
+              Next
+            </span>
+            <svg
+              className="c14"
+              direction="right"
+              height={16}
+              viewBox="0 0 96 96"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m90.871,50.776c-0.016,0.016 -0.026,0.036 -0.043,0.052l-32,32c-0.781,0.781 -1.804,1.172 -2.828,1.172s-2.047,-0.391 -2.829,-1.171a4,4 0 0 1 0,-5.657l25.172,-25.172l-70.343,0a4,4 0 0 1 0,-8l70.343,0l-25.172,-25.171a4,4 0 0 1 5.657,-5.657l32,32c0.016,0.016 0.027,0.036 0.043,0.052c0.167,0.172 0.321,0.357 0.455,0.557c0.069,0.104 0.118,0.216 0.176,0.325c0.065,0.121 0.138,0.236 0.191,0.364c0.057,0.137 0.09,0.279 0.13,0.42c0.032,0.109 0.074,0.214 0.097,0.327a4.017,4.017 0 0 1 0,1.568c-0.023,0.113 -0.065,0.217 -0.097,0.327c-0.041,0.141 -0.074,0.283 -0.13,0.42c-0.053,0.128 -0.126,0.243 -0.191,0.364c-0.059,0.109 -0.107,0.221 -0.176,0.325a4.035,4.035 0 0 1 -0.455,0.555z"
+                id="svg_1"
+                transform="rotate(-180 47.998626708984375,48.00019836425781) "
+              />
+            </svg>
+          </button>
         </div>
         <div
           aria-atomic="true"
           aria-live="polite"
-          className="c9"
+          className="c15"
           id="lightboxDescription"
         />
         <button
-          className="c10 c11"
+          className="c9 c16 close-button"
           onClick={[Function]}
           type="button"
         >
           <span
-            className="c12"
+            className="c11"
           >
             Close
           </span>
           <svg
-            className="c13"
+            className="c17"
             height={16}
             viewBox="0 0 96 96"
             width={16}
@@ -1005,62 +1089,16 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
             />
           </svg>
         </button>
-        <button
-          className="c10 c14"
-          onClick={[Function]}
-          type="button"
-        >
-          <span
-            className="c12"
-          >
-            Previous
-          </span>
-          <svg
-            className="c15"
-            direction="left"
-            height={16}
-            viewBox="0 0 96 96"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m90.871,50.776c-0.016,0.016 -0.026,0.036 -0.043,0.052l-32,32c-0.781,0.781 -1.804,1.172 -2.828,1.172s-2.047,-0.391 -2.829,-1.171a4,4 0 0 1 0,-5.657l25.172,-25.172l-70.343,0a4,4 0 0 1 0,-8l70.343,0l-25.172,-25.171a4,4 0 0 1 5.657,-5.657l32,32c0.016,0.016 0.027,0.036 0.043,0.052c0.167,0.172 0.321,0.357 0.455,0.557c0.069,0.104 0.118,0.216 0.176,0.325c0.065,0.121 0.138,0.236 0.191,0.364c0.057,0.137 0.09,0.279 0.13,0.42c0.032,0.109 0.074,0.214 0.097,0.327a4.017,4.017 0 0 1 0,1.568c-0.023,0.113 -0.065,0.217 -0.097,0.327c-0.041,0.141 -0.074,0.283 -0.13,0.42c-0.053,0.128 -0.126,0.243 -0.191,0.364c-0.059,0.109 -0.107,0.221 -0.176,0.325a4.035,4.035 0 0 1 -0.455,0.555z"
-              id="svg_1"
-              transform="rotate(-180 47.998626708984375,48.00019836425781) "
-            />
-          </svg>
-        </button>
-        <button
-          className="c10 c16"
-          onClick={[Function]}
-          type="button"
-        >
-          <span
-            className="c12"
-          >
-            Next
-          </span>
-          <svg
-            className="c17"
-            direction="right"
-            height={16}
-            viewBox="0 0 96 96"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m90.871,50.776c-0.016,0.016 -0.026,0.036 -0.043,0.052l-32,32c-0.781,0.781 -1.804,1.172 -2.828,1.172s-2.047,-0.391 -2.829,-1.171a4,4 0 0 1 0,-5.657l25.172,-25.172l-70.343,0a4,4 0 0 1 0,-8l70.343,0l-25.172,-25.171a4,4 0 0 1 5.657,-5.657l32,32c0.016,0.016 0.027,0.036 0.043,0.052c0.167,0.172 0.321,0.357 0.455,0.557c0.069,0.104 0.118,0.216 0.176,0.325c0.065,0.121 0.138,0.236 0.191,0.364c0.057,0.137 0.09,0.279 0.13,0.42c0.032,0.109 0.074,0.214 0.097,0.327a4.017,4.017 0 0 1 0,1.568c-0.023,0.113 -0.065,0.217 -0.097,0.327c-0.041,0.141 -0.074,0.283 -0.13,0.42c-0.053,0.128 -0.126,0.243 -0.191,0.364c-0.059,0.109 -0.107,0.221 -0.176,0.325a4.035,4.035 0 0 1 -0.455,0.555z"
-              id="svg_1"
-              transform="rotate(-180 47.998626708984375,48.00019836425781) "
-            />
-          </svg>
-        </button>
       </div>
     </dialog>
   </div>
-  <div
-    className="gallery-focus-trap"
+  <span
+    className="c11 c18 gallery-focus-trap"
     tabIndex={0}
-  />
+  >
+    <span>
+      End of gallery
+    </span>
+  </span>
 </div>
 `;