@comicrelief/component-library 8.53.2 → 8.53.3

package/dist/components/Atoms/Picture/Picture.js

@@ -117,6 +117,7 @@ const Picture = _ref11 => {
       nonObjFitImage: nonObjFitImage,
       objFitState: objFitState
     }, rest), /*#__PURE__*/_react.default.createElement(Image, {
+      key: image,
       alt: alt,
       height: height,
       width: width,

package/dist/components/Organisms/DynamicGallery/DynamicGallery.js

@@ -61,7 +61,7 @@ const DynamicGallery = _ref => {
       return (0, _floor2.default)(top, -2) + Math.floor(left) / 1000;
     }, 'asc');
     sortedNodes.forEach((galleryNode, index) => {
-      galleryNode.setAttribute('data-order', String(index));
+      galleryNode.setAttribute('data-tab-order', String(index));
     });
   }
   // create a throttled version of the updateTabOrder function
@@ -105,16 +105,30 @@ const DynamicGallery = _ref => {
   const [selectedNode, setSelectedNode] = (0, _react.useState)(null);
   const [focusedNode, setFocusedNode] = (0, _react.useState)(null);
 
-  // handle next/previous node events from the lightbox
+  // handle next/previous node events from the lightbox;
+  // slightly complicated because we need to use the data-tab-order attribute
+  // to navigate between nodes rather than the node index;
+  // this reflects the tab ordering in the DOM, rather than the order of the nodes in the array,
+  // because the dynamic image heights can confuse the normal order
   function handleNextNode(node) {
     const nodeIndex = nodes.indexOf(node);
-    const nextNodeIndex = (nodeIndex + 1) % imageCount;
-    setSelectedNode(nodes[nextNodeIndex]);
+    const nodeEl = containerRef.current.querySelector(`[data-node-index="${nodeIndex}"]`);
+    const tabOrder = nodeEl.getAttribute('data-tab-order');
+    const nextTabOrder = (+tabOrder + 1) % imageCount;
+    const nextNodeEl = containerRef.current.querySelector(`[data-tab-order="${nextTabOrder}"]`);
+    const nextNodeIndex = nextNodeEl.getAttribute('data-node-index');
+    const nextNode = nodes[nextNodeIndex];
+    setSelectedNode(nextNode);
   }
   function handlePreviousNode(node) {
     const nodeIndex = nodes.indexOf(node);
-    const previousNodeIndex = (nodeIndex - 1 + imageCount) % imageCount;
-    setSelectedNode(nodes[previousNodeIndex]);
+    const nodeEl = containerRef.current.querySelector(`[data-node-index="${nodeIndex}"]`);
+    const tabOrder = nodeEl.getAttribute('data-tab-order');
+    const previousTabOrder = (+tabOrder - 1 + imageCount) % imageCount;
+    const previousNodeEl = containerRef.current.querySelector(`[data-tab-order="${previousTabOrder}"]`);
+    const previousNodeIndex = previousNodeEl.getAttribute('data-node-index');
+    const previousNode = nodes[previousNodeIndex];
+    setSelectedNode(previousNode);
   }
 
   // handle keydown events,
@@ -146,7 +160,7 @@ const DynamicGallery = _ref => {
       // - columns + custom tabbing > what we're doing here
       case 'Tab':
         {
-          const nodeIndex = +event.target.dataset.order;
+          const nodeIndex = +event.target.dataset.tabOrder;
           if (Number.isNaN(nodeIndex)) return;
           const galleryContainer = event.target.closest('.gallery-container');
           if (!galleryContainer) return;
@@ -156,7 +170,7 @@ const DynamicGallery = _ref => {
             newNodeIndex = nodeIndex - 1;
             if (newNodeIndex < 0) return;
             event.preventDefault();
-            galleryContainer.querySelector(`[data-order="${newNodeIndex}"]`).focus();
+            galleryContainer.querySelector(`[data-tab-order="${newNodeIndex}"]`).focus();
           } else {
             // tab: move to the next image
             newNodeIndex = nodeIndex + 1;
@@ -171,7 +185,7 @@ const DynamicGallery = _ref => {
               return;
             }
             event.preventDefault();
-            galleryContainer.querySelector(`[data-order="${newNodeIndex}"]`).focus();
+            galleryContainer.querySelector(`[data-tab-order="${newNodeIndex}"]`).focus();
           }
           break;
         }
@@ -200,24 +214,29 @@ const DynamicGallery = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_DynamicGallery.ImageGrid, {
     className: "gallery-grid",
     onKeyDown: event => handleKeyDown(event)
-  }, hasNodes && Array(columnCount).fill(null).map((column, columnIndex) => /*#__PURE__*/_react.default.createElement(_DynamicGalleryColumn.default
-  // disabling the lint rule here
-  // as we're chunking an array and have no unique keys
-  // eslint-disable-next-line react/no-array-index-key
-  , {
-    key: columnIndex,
-    columnIndex: columnIndex,
-    columnCount: columnCount,
-    nodes: nodes.slice(0, imageCount),
-    imageRatio: imageRatio,
-    updateTabOrder: throttledUpdateTabOrder.current,
-    focusOutlineColour: textColour
-  })), /*#__PURE__*/_react.default.createElement(_DynamicGallery.EmptyMessage, {
+  }, hasNodes && Array(columnCount).fill(null).map((column, columnIndex) => {
+    // eslint prefers template literals for strings, but they break the compiler
+    // eslint-disable-next-line prefer-template
+    const key = String(columnIndex) + ':' + nodes.length;
+    return /*#__PURE__*/_react.default.createElement(_DynamicGalleryColumn.default
+    // disabling the lint rule here
+    // as we're chunking an array and have no unique keys
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      key: key,
+      columnIndex: columnIndex,
+      columnCount: columnCount,
+      nodes: nodes.slice(0, imageCount),
+      imageRatio: imageRatio,
+      updateTabOrder: throttledUpdateTabOrder.current,
+      focusOutlineColour: textColour
+    });
+  }), /*#__PURE__*/_react.default.createElement(_DynamicGallery.EmptyMessage, {
     isEmpty: !hasNodes
-  }, "No images to display")), /*#__PURE__*/_react.default.createElement(_Lightbox.default, null), /*#__PURE__*/_react.default.createElement("div", {
+  }, "No images to display")), /*#__PURE__*/_react.default.createElement(_Lightbox.default, null), /*#__PURE__*/_react.default.createElement(_DynamicGallery.FocusTrap, {
     className: "gallery-focus-trap",
     tabIndex: 0
-  })), imageCount < nodes.length && /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, "End of gallery"))), imageCount < nodes.length && /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => handleLoadMore()
   }, "Show more"));
 };

package/dist/components/Organisms/DynamicGallery/DynamicGallery.md

@@ -18,7 +18,7 @@ import createMockGalleryNodes from './_utils';
 ```js
 const defaultData = require('../../../styleguide/data/data').defaultData;
 import createMockGalleryNodes from './_utils';
-<DynamicGallery gridWidth={4} nodes={createMockGalleryNodes(4)} loadingBehaviour="all" imageRatio="4:3" pageBackgroundColour="blue" textColour="white" paddingTop="6rem" paddingBottom="6rem" useLightbox={false} />;
+<DynamicGallery gridWidth={4} nodes={createMockGalleryNodes(30)} loadingBehaviour="all" imageRatio="4:3" pageBackgroundColour="blue" textColour="white" paddingTop="6rem" paddingBottom="6rem" useLightbox={false} />;
 ```
 
 ### Gallery with max 5 columns

package/dist/components/Organisms/DynamicGallery/DynamicGallery.style.js

@@ -4,12 +4,12 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InteractiveGalleryNode = exports.ImageGrid = exports.ImageContainer = exports.GalleryNode = exports.EmptyMessage = exports.Details = exports.Container = exports.Column = void 0;
+exports.ScreenReaderOnly = exports.InteractiveGalleryNode = exports.ImageGrid = exports.ImageContainer = exports.GalleryNode = exports.FocusTrap = exports.EmptyMessage = exports.Details = exports.Container = exports.Column = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "DynamicGallerystyle__Container",
   componentId: "sc-1kgt7yr-0"
-})(["display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:", ";background:", ";", " color:", ";"], _ref => {
+})(["display:flex;flex-direction:column;align-items:center;gap:1rem;position:relative;max-width:", ";background:", ";padding:", ";color:", ";@media ", "{gap:1rem;}"], _ref => {
   let {
     maxWidth
   } = _ref;
@@ -25,45 +25,50 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
     paddingTop,
     paddingBottom
   } = _ref3;
-  return (0, _styledComponents.css)(["padding:", " 2rem ", ";"], paddingTop, paddingBottom);
+  return `${paddingTop} 1rem ${paddingBottom}`;
 }, _ref4 => {
   let {
     theme,
     textColour
   } = _ref4;
   return theme.color(textColour);
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.breakpoints2026('M');
 });
 const ImageGrid = exports.ImageGrid = _styledComponents.default.div.withConfig({
   displayName: "DynamicGallerystyle__ImageGrid",
   componentId: "sc-1kgt7yr-1"
-})(["display:flex;gap:1rem;width:100%;@media ", "{gap:2rem;}"], _ref5 => {
+})(["display:flex;gap:1rem;width:100%;@media ", "{gap:2rem;}"], _ref6 => {
   let {
     theme
-  } = _ref5;
+  } = _ref6;
   return theme.breakpoints2026('M');
 });
 const Column = exports.Column = _styledComponents.default.div.withConfig({
   displayName: "DynamicGallerystyle__Column",
   componentId: "sc-1kgt7yr-2"
-})(["flex:1;display:flex;flex-direction:column;gap:1.1rem;@media ", "{gap:2rem;}"], _ref6 => {
+})(["flex:1;display:flex;flex-direction:column;gap:1.1rem;@media ", "{gap:2rem;}"], _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.breakpoints2026('M');
 });
 const EmptyMessage = exports.EmptyMessage = _styledComponents.default.div.withConfig({
   displayName: "DynamicGallerystyle__EmptyMessage",
   componentId: "sc-1kgt7yr-3"
-})(["display:", ";"], _ref7 => {
+})(["display:", ";"], _ref8 => {
   let {
     isEmpty
-  } = _ref7;
+  } = _ref8;
   return isEmpty ? 'block' : 'none';
 });
-const GalleryNodeBase = (0, _styledComponents.css)(["display:flex;flex-direction:column;gap:0.9rem;padding:0;margin:0;background:none;border:none;text-align:left;&:focus-visible{outline:2px solid ", ";outline-offset:0.5rem;border-radius:1rem;}"], _ref8 => {
+const GalleryNodeBase = (0, _styledComponents.css)(["display:flex;flex-direction:column;gap:0.9rem;padding:0;margin:0;background:none;border:none;text-align:left;&:focus-visible{outline:2px solid ", ";outline-offset:0.5rem;border-radius:1rem;}"], _ref9 => {
   let {
     focusOutlineColour
-  } = _ref8;
+  } = _ref9;
   return focusOutlineColour;
 });
 const GalleryNode = exports.GalleryNode = _styledComponents.default.div.withConfig({
@@ -77,18 +82,26 @@ const InteractiveGalleryNode = exports.InteractiveGalleryNode = _styledComponent
 const ImageContainer = exports.ImageContainer = _styledComponents.default.div.withConfig({
   displayName: "DynamicGallerystyle__ImageContainer",
   componentId: "sc-1kgt7yr-6"
-})(["display:flex;height:auto;width:100%;min-height:", ";max-height:", ";overflow:hidden;border-radius:1rem;background:rgba(0,0,0,0.05);box-shadow:0px 2px 8px 0px rgba(0,0,0,0.2);img{height:100%;opacity:0;transition:opacity 0.1s ease-out 0.3s;}"], _ref9 => {
+})(["display:flex;height:auto;width:100%;min-height:", ";max-height:", ";overflow:hidden;border-radius:1rem;background:rgba(0,0,0,0.05);box-shadow:0px 2px 8px 0px rgba(0,0,0,0.2);img{height:100%;opacity:0;transition:opacity 0.1s ease-out 0.3s;}"], _ref10 => {
   let {
     minHeight
-  } = _ref9;
+  } = _ref10;
   return minHeight;
-}, _ref10 => {
+}, _ref11 => {
   let {
     maxHeight
-  } = _ref10;
+  } = _ref11;
   return maxHeight;
 });
 const Details = exports.Details = _styledComponents.default.div.withConfig({
   displayName: "DynamicGallerystyle__Details",
   componentId: "sc-1kgt7yr-7"
-})(["display:flex;flex-direction:column;gap:0.5rem;padding:0 1rem;"]);
+})(["display:flex;flex-direction:column;gap:0.5rem;padding:0 1rem;"]);
+const ScreenReaderOnly = exports.ScreenReaderOnly = _styledComponents.default.span.withConfig({
+  displayName: "DynamicGallerystyle__ScreenReaderOnly",
+  componentId: "sc-1kgt7yr-8"
+})(["position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden;"]);
+const FocusTrap = exports.FocusTrap = (0, _styledComponents.default)(ScreenReaderOnly).withConfig({
+  displayName: "DynamicGallerystyle__FocusTrap",
+  componentId: "sc-1kgt7yr-9"
+})(["bottom:0;"]);

package/dist/components/Organisms/DynamicGallery/_DynamicGalleryColumn.js

@@ -81,9 +81,15 @@ function DynamicGalleryColumn(_ref) {
   return /*#__PURE__*/_react.default.createElement(_DynamicGallery.Column, {
     ref: elRef,
     className: "gallery-column"
-  }, nodes === null || nodes === void 0 ? void 0 : nodes.filter((_, nodeIndex) => nodeIndex % columnCount === columnIndex).map((node, nodeIndex) => {
+  }, nodes.map((node, nodeIndex) => {
+    // only render nodes that are in the current column;
+    // this lets us assign a unique index to each node
+    const columnNodeIndex = nodeIndex % columnCount;
+    if (columnNodeIndex !== columnIndex) return null;
     const bodyText = (0, _utils.extractNodeText)(node.gridBody);
-    const key = String(nodeIndex) + bodyText;
+    // eslint prefers template literals for strings, but they break the compiler
+    // eslint-disable-next-line prefer-template
+    const key = String(nodeIndex) + ':' + bodyText + ':' + node.image;
     return /*#__PURE__*/_react.default.createElement(NodeComponent, {
       key: key,
       className: "gallery-node",
@@ -96,7 +102,6 @@ function DynamicGalleryColumn(_ref) {
       tabIndex: 0
     }, /*#__PURE__*/_react.default.createElement(_DynamicGallery.ImageContainer, {
       className: "gallery-node-image"
-      // eslint prefers template literals for strings, but they break the compiler
       // eslint-disable-next-line prefer-template
       ,
       minHeight: String(minHeight) + 'px'

package/dist/components/Organisms/DynamicGallery/_Lightbox.js

@@ -12,6 +12,7 @@ var _Arrow = _interopRequireDefault(require("../../Atoms/Icons/Arrow"));
 var _Cross = _interopRequireDefault(require("../../Atoms/Icons/Cross"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Lightbox = require("./_Lightbox.style");
+var _DynamicGallery = require("./DynamicGallery.style");
 var _ScrollFix = _interopRequireDefault(require("./_ScrollFix"));
 var _utils = require("./_utils");
 /**
@@ -52,6 +53,19 @@ const Lightbox = () => {
   const hasNode = Boolean(selectedNode);
   const dialogRef = (0, _react.useRef)(null);
 
+  // handle interaction type
+  const interactionTypeRef = (0, _react.useRef)('keyboard');
+  (0, _react.useEffect)(() => {
+    function handlePointerDown() {
+      interactionTypeRef.current = 'pointer';
+      document.removeEventListener('pointerdown', handlePointerDown);
+    }
+    document.addEventListener('pointerdown', handlePointerDown);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+    };
+  }, []);
+
   /**
   * handle keyboard events within the lightbox;
   * - trapped focus between UI elements
@@ -107,13 +121,15 @@ const Lightbox = () => {
   // handle focus management when dialog opens/closes
   (0, _react.useEffect)(() => {
     if (hasNode) {
-      // move focus to the first focusable element in the dialog when it opens
-      setTimeout(() => {
-        const focusableElements = getFocusableElements(dialogRef.current);
-        if (focusableElements.length > 0) {
-          focusableElements[0].focus();
+      // when the lightbox opens, optionally focus the close button,
+      // but only if the user is interacting via the keyboard;
+      // we check interaction type because although focus-visible should handle this,
+      // Safari on iOS always shows the focus ring
+      requestAnimationFrame(() => {
+        if (interactionTypeRef.current === 'keyboard') {
+          dialogRef.current.querySelector('.close-button').focus();
         }
-      }, 0);
+      });
     } else {
       // restore focus to the previously focused element when lightbox closes
       focusedNode === null || focusedNode === void 0 ? void 0 : focusedNode.focus();
@@ -150,8 +166,8 @@ const Lightbox = () => {
     const scaleX = maxWidth / imageWidth;
     const scaleY = maxHeight / imageHeight;
     const scale = Math.min(scaleX, scaleY);
-    const width = imageWidth * scale;
-    const height = imageHeight * scale;
+    const width = Math.round(imageWidth * scale);
+    const height = Math.round(imageHeight * scale);
 
     // set the width and height on the image element, and make it visible
     setImageDimensions({
@@ -182,33 +198,38 @@ const Lightbox = () => {
     width: imageDimensions.width,
     height: imageDimensions.height,
     objectFit: "contain",
-    onLoad: event => onLoad(event)
-  })), /*#__PURE__*/_react.default.createElement(_Lightbox.LightboxDetails, {
-    id: "lightboxDescription",
-    "aria-live": "polite",
-    "aria-atomic": "true"
-  }, (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.lightboxBody) && /*#__PURE__*/_react.default.createElement("div", {
-    id: "lightboxTitle"
-  }, selectedNode.lightboxBody), (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.lightboxCaption) && /*#__PURE__*/_react.default.createElement("div", null, selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.lightboxCaption)), /*#__PURE__*/_react.default.createElement(_Lightbox.CloseButton, {
-    type: "button",
-    onClick: () => setSelectedNode(null)
-  }, /*#__PURE__*/_react.default.createElement(_Lightbox.ScreenReaderOnly, null, "Close"), /*#__PURE__*/_react.default.createElement(_Cross.default, {
-    colour: "black",
-    size: 16
-  })), /*#__PURE__*/_react.default.createElement(_Lightbox.PreviousButton, {
+    onLoad: event => onLoad(event),
+    style: {
+      borderRadius: '0.6rem',
+      overflow: 'hidden'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Lightbox.PreviousButton, {
     type: "button",
     onClick: () => previousNode(selectedNode)
-  }, /*#__PURE__*/_react.default.createElement(_Lightbox.ScreenReaderOnly, null, "Previous"), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
+  }, /*#__PURE__*/_react.default.createElement(_DynamicGallery.ScreenReaderOnly, null, "Previous"), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
     direction: "left",
     colour: "black",
     size: 16
   })), /*#__PURE__*/_react.default.createElement(_Lightbox.NextButton, {
     type: "button",
     onClick: () => nextNode(selectedNode)
-  }, /*#__PURE__*/_react.default.createElement(_Lightbox.ScreenReaderOnly, null, "Next"), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
+  }, /*#__PURE__*/_react.default.createElement(_DynamicGallery.ScreenReaderOnly, null, "Next"), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
     direction: "right",
     colour: "black",
     size: 16
+  }))), /*#__PURE__*/_react.default.createElement(_Lightbox.LightboxDetails, {
+    id: "lightboxDescription",
+    "aria-live": "polite",
+    "aria-atomic": "true"
+  }, (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.lightboxBody) && /*#__PURE__*/_react.default.createElement("div", {
+    id: "lightboxTitle"
+  }, selectedNode.lightboxBody), (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.lightboxCaption) && /*#__PURE__*/_react.default.createElement("div", null, selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.lightboxCaption)), /*#__PURE__*/_react.default.createElement(_Lightbox.CloseButton, {
+    className: "close-button",
+    type: "button",
+    onClick: () => setSelectedNode(null)
+  }, /*#__PURE__*/_react.default.createElement(_DynamicGallery.ScreenReaderOnly, null, "Close"), /*#__PURE__*/_react.default.createElement(_Cross.default, {
+    colour: "black",
+    size: 16
   })))));
 };
 var _default = exports.default = Lightbox;

package/dist/components/Organisms/DynamicGallery/_Lightbox.style.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ScreenReaderOnly = exports.PreviousButton = exports.NextButton = exports.NavButton = exports.LightboxSpinner = exports.LightboxImage = exports.LightboxDetails = exports.LightboxContent = exports.Dialog = exports.Container = exports.CloseButton = exports.Backdrop = void 0;
+exports.PreviousButton = exports.NextButton = exports.NavButton = exports.LightboxSpinner = exports.LightboxImage = exports.LightboxDetails = exports.LightboxContent = exports.Dialog = exports.Container = exports.CloseButton = exports.Backdrop = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "_Lightboxstyle__Container",
@@ -35,7 +35,7 @@ const LightboxContent = exports.LightboxContent = _styledComponents.default.div.
 const LightboxImage = exports.LightboxImage = _styledComponents.default.div.withConfig({
   displayName: "_Lightboxstyle__LightboxImage",
   componentId: "sc-twdy7x-4"
-})(["position:relative;display:flex;align-items:center;justify-content:center;min-width:128px;min-height:32px;border-radius:0.6rem;overflow:hidden;& > div{display:flex;align-items:center;justify-content:center;transition:width 0.3s ease-in-out,height 0.3s ease-in-out;}& img{opacity:0;transition:opacity 0.1s ease-out 0.3s;}"]);
+})(["position:relative;display:flex;align-items:center;justify-content:center;min-width:128px;min-height:32px;width:100%;& > div{display:flex;align-items:center;justify-content:center;transition:width 0.3s ease-in-out,height 0.3s ease-in-out;}& img{opacity:0;transition:opacity 0.1s ease-out 0.3s;}"]);
 const LightboxSpinner = exports.LightboxSpinner = _styledComponents.default.div.withConfig({
   displayName: "_Lightboxstyle__LightboxSpinner",
   componentId: "sc-twdy7x-5"
@@ -43,11 +43,11 @@ const LightboxSpinner = exports.LightboxSpinner = _styledComponents.default.div.
 const LightboxDetails = exports.LightboxDetails = _styledComponents.default.div.withConfig({
   displayName: "_Lightboxstyle__LightboxDetails",
   componentId: "sc-twdy7x-6"
-})(["display:flex;flex-direction:column;align-items:stretch;gap:0.5rem;width:100%;padding:0 1rem;"]);
+})(["display:flex;flex-direction:column;align-items:stretch;gap:0.5rem;width:100%;max-width:1024px;padding:0 1rem;"]);
 const NavButton = exports.NavButton = _styledComponents.default.button.withConfig({
   displayName: "_Lightboxstyle__NavButton",
   componentId: "sc-twdy7x-7"
-})(["position:absolute;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:0.5rem;border:none;background-color:white;cursor:pointer;z-index:10;svg{transition:all 0.1s ease-out;}&:hover{svg{fill:", ";}}&:focus-visible{outline:2px solid ", ";}"], _ref3 => {
+})(["position:absolute;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:0.5rem;border:none;background-color:white;cursor:pointer;z-index:10;svg{transition:fill 0.1s ease-out;}@media (hover:hover){&:hover{svg{fill:", ";}}}:focus-visible{outline:2px solid ", ";}"], _ref3 => {
   let {
     theme
   } = _ref3;
@@ -65,7 +65,7 @@ const CloseButton = exports.CloseButton = (0, _styledComponents.default)(NavButt
 const PreviousButton = exports.PreviousButton = (0, _styledComponents.default)(NavButton).withConfig({
   displayName: "_Lightboxstyle__PreviousButton",
   componentId: "sc-twdy7x-9"
-})(["top:30%;left:0;transform:translate(0,-50%);border-top-left-radius:0;border-bottom-left-radius:0;@media ", "{position:fixed;top:50%;}"], _ref5 => {
+})(["top:50%;left:0;transform:translate(-1rem,-50%);@media ", "{position:fixed;transform:translate(1rem,-50%);top:50%;}"], _ref5 => {
   let {
     theme
   } = _ref5;
@@ -74,13 +74,9 @@ const PreviousButton = exports.PreviousButton = (0, _styledComponents.default)(N
 const NextButton = exports.NextButton = (0, _styledComponents.default)(NavButton).withConfig({
   displayName: "_Lightboxstyle__NextButton",
   componentId: "sc-twdy7x-10"
-})(["top:30%;right:0;transform:translate(0,-50%);border-top-right-radius:0;border-bottom-right-radius:0;@media ", "{position:fixed;top:50%;}"], _ref6 => {
+})(["top:50%;right:0;transform:translate(1rem,-50%);@media ", "{position:fixed;transform:translate(-1rem,-50%);top:50%;}"], _ref6 => {
   let {
     theme
   } = _ref6;
   return theme.breakpoints2026('L');
-});
-const ScreenReaderOnly = exports.ScreenReaderOnly = _styledComponents.default.span.withConfig({
-  displayName: "_Lightboxstyle__ScreenReaderOnly",
-  componentId: "sc-twdy7x-11"
-})(["position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden;"]);
+});