@comicrelief/component-library 8.51.8 → 8.52.1

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

@@ -0,0 +1,1113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
+.c5 {
+  display: block;
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.c6 {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+}
+
+.c23 {
+  -webkit-transform: rotate(0);
+  -ms-transform: rotate(0);
+  transform: rotate(0);
+  fill: #000000;
+}
+
+.c25 {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+  fill: #000000;
+}
+
+.c21 {
+  fill: #000000;
+}
+
+.c11 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  z-index: 2000;
+  visibility: hidden;
+}
+
+.c12 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.8);
+  z-index: 0;
+}
+
+.c13 {
+  display: block;
+  padding: 0.5rem;
+  background: transparent;
+  border: none;
+  z-index: 1;
+  margin-top: 72px;
+}
+
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 1rem;
+  position: relative;
+  padding: 1rem;
+  background: #ffffff;
+  border-radius: 1rem;
+}
+
+.c15 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  min-width: 128px;
+  min-height: 32px;
+  border-radius: 0.6rem;
+  overflow: hidden;
+}
+
+.c15 > div {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-transition: width 0.3s ease-in-out,height 0.3s ease-in-out;
+  transition: width 0.3s ease-in-out,height 0.3s ease-in-out;
+}
+
+.c15 img {
+  opacity: 0;
+  -webkit-transition: opacity 0.1s ease-out 0.3s;
+  transition: opacity 0.1s ease-out 0.3s;
+}
+
+.c16 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c17 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.c18 {
+  position: absolute;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  border: none;
+  background-color: white;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.c18 svg {
+  -webkit-transition: all 0.1s ease-out;
+  transition: all 0.1s ease-out;
+}
+
+.c18:hover svg {
+  fill: #E52630;
+}
+
+.c18:focus-visible {
+  outline: 2px solid #E52630;
+}
+
+.c19 {
+  top: 0;
+  right: 0;
+}
+
+.c22 {
+  top: 30%;
+  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;
+}
+
+.c24 {
+  top: 30%;
+  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;
+}
+
+.c20 {
+  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;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 1rem;
+  max-width: 1500px;
+  background: transparent;
+  padding: 0rem 2rem 2rem;
+  color: #000000;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+}
+
+.c2 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 1.1rem;
+}
+
+.c10 {
+  display: none;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 0.8rem;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  color: inherit;
+}
+
+.c3 div:first-child {
+  -webkit-transition: all 0.1s ease-out;
+  transition: all 0.1s ease-out;
+}
+
+.c3:focus-visible {
+  outline: 2px solid #000000;
+}
+
+.c3 > div:first-child:hover {
+  box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.4);
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: auto;
+  width: 100%;
+  min-height: undefinedpx;
+  max-height: undefinedpx;
+  overflow: hidden;
+  border-radius: 1rem;
+  background: rgba(0,0,0,0.05);
+  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.2);
+}
+
+.c4 img {
+  height: 100%;
+  opacity: 0;
+  -webkit-transition: opacity 0.1s ease-out 0.3s;
+  transition: opacity 0.1s ease-out 0.3s;
+}
+
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0 1rem;
+}
+
+.c8:first-child {
+  margin-bottom: 0;
+}
+
+.c9 {
+  line-height: 1;
+}
+
+@media (min-width:1024px) {
+  .c23 {
+    fill: #000000;
+  }
+}
+
+@media (min-width:1024px) {
+  .c25 {
+    fill: #000000;
+  }
+}
+
+@media (min-width:1024px) {
+  .c13 {
+    margin-top: 84px;
+  }
+}
+
+@media (min-width:1024px) {
+  .c22 {
+    position: fixed;
+    top: 50%;
+  }
+}
+
+@media (min-width:1024px) {
+  .c24 {
+    position: fixed;
+    top: 50%;
+  }
+}
+
+@media (min-width:740px) {
+  .c1 {
+    gap: 2rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c2 {
+    gap: 2rem;
+  }
+}
+
+<div
+  className="c0 gallery-container"
+>
+  <div
+    className="c1 gallery-grid"
+    onKeyDown={[Function]}
+  >
+    <div
+      className="c2 gallery-column"
+    >
+      <button
+        aria-label="Image 1"
+        className="c3 gallery-node"
+        data-node-index={0}
+        onPointerUp={[Function]}
+        tabIndex={0}
+        title="Image 1"
+      >
+        <div
+          className="c4 gallery-node-image"
+        >
+          <div
+            className="c5"
+            height="auto"
+            width="100%"
+          >
+            <img
+              alt="Image 1"
+              className="c6 lazyload"
+              data-src="image1.jpg"
+              height="auto"
+              onLoad={[Function]}
+              width="100%"
+            />
+          </div>
+        </div>
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+          >
+            Image 1
+          </div>
+          <div
+            className="c9"
+          >
+            Caption 1
+          </div>
+        </div>
+      </button>
+    </div>
+    <div
+      className="c2 gallery-column"
+    >
+      <button
+        aria-label="Image 2"
+        className="c3 gallery-node"
+        data-node-index={0}
+        onPointerUp={[Function]}
+        tabIndex={0}
+        title="Image 2"
+      >
+        <div
+          className="c4 gallery-node-image"
+        >
+          <div
+            className="c5"
+            height="auto"
+            width="100%"
+          >
+            <img
+              alt="Image 2"
+              className="c6 lazyload"
+              data-src="image2.jpg"
+              height="auto"
+              onLoad={[Function]}
+              width="100%"
+            />
+          </div>
+        </div>
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+          >
+            Image 2
+          </div>
+          <div
+            className="c9"
+          >
+            Caption 2
+          </div>
+        </div>
+      </button>
+    </div>
+    <div
+      className="c2 gallery-column"
+    >
+      <button
+        aria-label="Image 3"
+        className="c3 gallery-node"
+        data-node-index={0}
+        onPointerUp={[Function]}
+        tabIndex={0}
+        title="Image 3"
+      >
+        <div
+          className="c4 gallery-node-image"
+        >
+          <div
+            className="c5"
+            height="auto"
+            width="100%"
+          >
+            <img
+              alt="Image 3"
+              className="c6 lazyload"
+              data-src="image3.jpg"
+              height="auto"
+              onLoad={[Function]}
+              width="100%"
+            />
+          </div>
+        </div>
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+          >
+            Image 3
+          </div>
+          <div
+            className="c9"
+          >
+            Caption 3
+          </div>
+        </div>
+      </button>
+    </div>
+    <div
+      className="c10"
+    >
+      No images to display
+    </div>
+  </div>
+  <div
+    className="c11"
+  >
+    <div
+      className="c12"
+      onPointerUp={[Function]}
+    />
+    <dialog
+      aria-describedby="lightboxDescription"
+      aria-labelledby="lightboxTitle"
+      className="c13"
+    >
+      <div
+        className="c14"
+      >
+        <div
+          className="c15 lightbox-image"
+        >
+          <div
+            className="c16"
+          >
+            <span
+              className="css-1xdhyk6"
+            >
+              <span
+                className="css-1fr62ah"
+              />
+              <span
+                className="css-1q1fqtl"
+              />
+              <span
+                className="css-1v7m6ew"
+              />
+            </span>
+          </div>
+        </div>
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          className="c17"
+          id="lightboxDescription"
+        >
+          <div
+            id="lightboxTitle"
+          />
+        </div>
+        <button
+          className="c18 c19"
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="c20"
+          >
+            Close
+          </span>
+          <svg
+            className="c21"
+            height={16}
+            viewBox="0 0 96 96"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <polygon
+              points="85.48 17.59 78.41 10.52 48 40.93 17.59 10.52 10.52 17.59 40.93 48 10.52 78.41 17.59 85.48 48 55.07 78.41 85.48 85.48 78.41 55.07 48 85.48 17.59"
+            />
+          </svg>
+        </button>
+        <button
+          className="c18 c22"
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="c20"
+          >
+            Previous
+          </span>
+          <svg
+            className="c23"
+            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="c18 c24"
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="c20"
+          >
+            Next
+          </span>
+          <svg
+            className="c25"
+            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"
+    tabIndex={0}
+  />
+</div>
+`;
+
+exports[`renders an empty Dynamic Gallery with no options set 1`] = `
+.c15 {
+  -webkit-transform: rotate(0);
+  -ms-transform: rotate(0);
+  transform: rotate(0);
+  fill: #000000;
+}
+
+.c17 {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+  fill: #000000;
+}
+
+.c13 {
+  fill: #000000;
+}
+
+.c3 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  z-index: 2000;
+  visibility: hidden;
+}
+
+.c4 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.8);
+  z-index: 0;
+}
+
+.c5 {
+  display: block;
+  padding: 0.5rem;
+  background: transparent;
+  border: none;
+  z-index: 1;
+  margin-top: 72px;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 1rem;
+  position: relative;
+  padding: 1rem;
+  background: #ffffff;
+  border-radius: 1rem;
+}
+
+.c7 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  min-width: 128px;
+  min-height: 32px;
+  border-radius: 0.6rem;
+  overflow: hidden;
+}
+
+.c7 > div {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-transition: width 0.3s ease-in-out,height 0.3s ease-in-out;
+  transition: width 0.3s ease-in-out,height 0.3s ease-in-out;
+}
+
+.c7 img {
+  opacity: 0;
+  -webkit-transition: opacity 0.1s ease-out 0.3s;
+  transition: opacity 0.1s ease-out 0.3s;
+}
+
+.c8 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.c10 {
+  position: absolute;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  border: none;
+  background-color: white;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.c10 svg {
+  -webkit-transition: all 0.1s ease-out;
+  transition: all 0.1s ease-out;
+}
+
+.c10:hover svg {
+  fill: #E52630;
+}
+
+.c10:focus-visible {
+  outline: 2px solid #E52630;
+}
+
+.c11 {
+  top: 0;
+  right: 0;
+}
+
+.c14 {
+  top: 30%;
+  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;
+}
+
+.c16 {
+  top: 30%;
+  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;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 1rem;
+  max-width: 1500px;
+  background: transparent;
+  padding: 0rem 2rem 2rem;
+  color: #000000;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+}
+
+.c2 {
+  display: block;
+}
+
+@media (min-width:1024px) {
+  .c15 {
+    fill: #000000;
+  }
+}
+
+@media (min-width:1024px) {
+  .c17 {
+    fill: #000000;
+  }
+}
+
+@media (min-width:1024px) {
+  .c5 {
+    margin-top: 84px;
+  }
+}
+
+@media (min-width:1024px) {
+  .c14 {
+    position: fixed;
+    top: 50%;
+  }
+}
+
+@media (min-width:1024px) {
+  .c16 {
+    position: fixed;
+    top: 50%;
+  }
+}
+
+@media (min-width:740px) {
+  .c1 {
+    gap: 2rem;
+  }
+}
+
+<div
+  className="c0 gallery-container"
+>
+  <div
+    className="c1 gallery-grid"
+    onKeyDown={[Function]}
+  >
+    <div
+      className="c2"
+    >
+      No images to display
+    </div>
+  </div>
+  <div
+    className="c3"
+  >
+    <div
+      className="c4"
+      onPointerUp={[Function]}
+    />
+    <dialog
+      aria-describedby="lightboxDescription"
+      aria-labelledby="lightboxTitle"
+      className="c5"
+    >
+      <div
+        className="c6"
+      >
+        <div
+          className="c7 lightbox-image"
+        >
+          <div
+            className="c8"
+          >
+            <span
+              className="css-1xdhyk6"
+            >
+              <span
+                className="css-1fr62ah"
+              />
+              <span
+                className="css-1q1fqtl"
+              />
+              <span
+                className="css-1v7m6ew"
+              />
+            </span>
+          </div>
+        </div>
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          className="c9"
+          id="lightboxDescription"
+        >
+          <div
+            id="lightboxTitle"
+          />
+        </div>
+        <button
+          className="c10 c11"
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="c12"
+          >
+            Close
+          </span>
+          <svg
+            className="c13"
+            height={16}
+            viewBox="0 0 96 96"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <polygon
+              points="85.48 17.59 78.41 10.52 48 40.93 17.59 10.52 10.52 17.59 40.93 48 10.52 78.41 17.59 85.48 48 55.07 78.41 85.48 85.48 78.41 55.07 48 85.48 17.59"
+            />
+          </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"
+    tabIndex={0}
+  />
+</div>
+`;