@jobber/components 6.15.0 → 6.16.0

package/dist/LightBox/index.mjs

@@ -2,15 +2,16 @@ export { L as LightBox } from '../LightBox-es.js';
 import 'react';
 import 'framer-motion';
 import 'react-dom';
-import '../debounce-es.js';
-import '../_commonjsHelpers-es.js';
-import '../isObjectLike-es.js';
-import '../isSymbol-es.js';
 import '../useRefocusOnActivator-es.js';
 import '../useOnKeyDown-es.js';
 import '../useFocusTrap-es.js';
 import '../useIsMounted-es.js';
 import '../useSafeLayoutEffect-es.js';
+import '../useDebounce-es.js';
+import '../debounce-es.js';
+import '../_commonjsHelpers-es.js';
+import '../isObjectLike-es.js';
+import '../isSymbol-es.js';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
 import 'classnames';
@@ -18,3 +19,13 @@ import 'react-router-dom';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Typography-es.js';
+import '../Text-es.js';
+import '../Heading-es.js';
+import '../AtlantisThemeContext-es.js';
+import '../identity-es.js';
+import '../isTypedArray-es.js';
+import '../_baseAssignValue-es.js';
+import '../_baseFor-es.js';
+import '../keysIn-es.js';
+import '../_isIterateeCall-es.js';
+import '../_setToString-es.js';

package/dist/LightBox-cjs.js

@@ -3,15 +3,76 @@
 var React = require('react');
 var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
-var debounce = require('./debounce-cjs.js');
 var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
 var useOnKeyDown = require('./useOnKeyDown-cjs.js');
 var useFocusTrap = require('./useFocusTrap-cjs.js');
 var useIsMounted = require('./useIsMounted-cjs.js');
+var useDebounce = require('./useDebounce-cjs.js');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
+var Text = require('./Text-cjs.js');
 var Button = require('./Button-cjs.js');
+var Heading = require('./Heading-cjs.js');
+var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
 
-var styles = {"next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","title":"tZU2g-NYdIs-","imagesWrapper":"ACX-rWRvYCs-","overlay":"_3tKP7luZoEQ-","image":"yYFVVScosfQ-","spinning":"_8tDoqjgfLcw-"};
+var useBreakpoints = {};
+
+var useMediaQuery = {};
+
+(function (exports) {
+	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.mediaQueryStore = void 0;
+	exports.useMediaQuery = useMediaQuery;
+	const react_1 = React;
+	exports.mediaQueryStore = {
+	    subscribe(onChange, query) {
+	        const matchMedia = window.matchMedia(query);
+	        matchMedia.addEventListener("change", onChange);
+	        return () => {
+	            matchMedia.removeEventListener("change", onChange);
+	        };
+	    },
+	    getSnapshot(query) {
+	        return () => window.matchMedia(query).matches;
+	    },
+	};
+	function useMediaQuery(query) {
+	    const subscribeMediaQuery = (0, react_1.useCallback)((onChange) => exports.mediaQueryStore.subscribe(onChange, query), [query]);
+	    const matches = (0, react_1.useSyncExternalStore)(subscribeMediaQuery, exports.mediaQueryStore.getSnapshot(query), () => true);
+	    return matches;
+	} 
+} (useMediaQuery));
+
+(function (exports) {
+	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.BREAKPOINT_SIZES = void 0;
+	exports.useBreakpoints = useBreakpoints;
+	const useMediaQuery_1 = useMediaQuery;
+	exports.BREAKPOINT_SIZES = { sm: 490, md: 768, lg: 1080, xl: 1440 };
+	/**
+	 * Hook equivalent of CSS media queries with our
+	 * [supported breakpoints](https://atlantis.getjobber.com/?path=/docs/design-breakpoints--docs).
+	 */
+	function useBreakpoints() {
+	    const { sm, md, lg, xl } = exports.BREAKPOINT_SIZES;
+	    const extraSmallOnly = (0, useMediaQuery_1.useMediaQuery)(`(max-width: ${sm - 1}px)`);
+	    const smallAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${sm}px)`);
+	    const mediumAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${md}px)`);
+	    const largeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${lg}px)`);
+	    const extraLargeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${xl}px)`);
+	    return {
+	        smallAndUp,
+	        mediumAndUp,
+	        largeAndUp,
+	        extraLargeAndUp,
+	        extraSmallOnly,
+	        smallOnly: smallAndUp && !mediumAndUp,
+	        mediumOnly: mediumAndUp && !largeAndUp,
+	        largeOnly: largeAndUp && !extraLargeAndUp,
+	    };
+	} 
+} (useBreakpoints));
+
+var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","blurOverlay":"GKIdLTmvcvQ-","spinning":"_8tDoqjgfLcw-"};
 
 /* eslint-disable max-statements */
 const swipeConfidenceThreshold = 10000;
@@ -45,16 +106,21 @@ const imageTransition = {
 // A little bit more than the transition's duration
 // We're doing this to prevent a bug from framer-motion
 // https://github.com/framer/motion/issues/1769
-const debounceDuration = 250;
+const BUTTON_DEBOUNCE_DELAY = 250;
+const MOVEMENT_DEBOUNCE_DELAY = 1000;
 function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
     const [currentImageIndex, setCurrentImageIndex] = React.useState(imageIndex);
     const [direction, setDirection] = React.useState(0);
+    const [mouseIsStationary, setMouseIsStationary] = React.useState(true);
     const lightboxRef = useFocusTrap.useFocusTrap_2(open);
-    const debouncedHandleNext = debounce.debounce(handleMoveNext, debounceDuration);
-    const debouncedHandlePrevious = debounce.debounce(handleMovePrevious, debounceDuration);
+    const debouncedHandleNext = useDebounce.useDebounce(handleMoveNext, BUTTON_DEBOUNCE_DELAY);
+    const debouncedHandlePrevious = useDebounce.useDebounce(handleMovePrevious, BUTTON_DEBOUNCE_DELAY);
     const mounted = useIsMounted.useIsMounted_2();
     const prevOpen = React.useRef(open);
     useRefocusOnActivator.useRefocusOnActivator_2(open);
+    const handleMouseMovement = useDebounce.useDebounce(() => {
+        setMouseIsStationary(true);
+    }, MOVEMENT_DEBOUNCE_DELAY);
     useOnKeyDown.useOnKeyDown_2(handleRequestClose, "Escape");
     useOnKeyDown.useOnKeyDown_2(debouncedHandlePrevious, {
         key: "ArrowLeft",
@@ -69,18 +135,33 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
         prevOpen.current = open;
         togglePrintStyles(open);
     }
-    const template = (React.createElement(React.Fragment, null, open && (React.createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef },
-        React.createElement("div", { className: styles.toolbar },
-            React.createElement("span", { className: styles.title }, images[currentImageIndex].title),
-            React.createElement(ButtonDismiss.ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })),
-        React.createElement("div", { className: styles.imagesWrapper },
+    const template = (React.createElement(React.Fragment, null, open && (React.createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef, onMouseMove: () => {
+            if (mouseIsStationary) {
+                setMouseIsStationary(false);
+            }
+            handleMouseMovement();
+        } },
+        React.createElement("div", { className: styles.backgroundImage, style: {
+                backgroundImage: `url("${images[currentImageIndex].url}")`,
+            } }),
+        React.createElement("div", { className: styles.blurOverlay, onClick: handleRequestClose }),
+        React.createElement(AtlantisThemeContext.AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
+            React.createElement("div", { className: styles.toolbar },
+                React.createElement("div", { className: styles.slideNumber },
+                    React.createElement(Text.Text, null, `${currentImageIndex + 1}/${images.length}`)),
+                React.createElement("div", { className: styles.closeButton },
+                    React.createElement(ButtonDismiss.ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })))),
+        React.createElement("div", { className: styles.imageArea },
             React.createElement(framerMotion.AnimatePresence, { initial: false },
-                React.createElement(framerMotion.motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, style: { y: "-50%" }, initial: "enter", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
+                React.createElement(framerMotion.motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, initial: "enter", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
         images.length > 1 && (React.createElement(React.Fragment, null,
-            React.createElement(PreviousButton, { onClick: debouncedHandlePrevious }),
-            React.createElement(NextButton, { onClick: debouncedHandleNext }))),
-        React.createElement("div", { className: styles.toolbar }, images[currentImageIndex].caption),
-        React.createElement("div", { className: styles.overlay, onClick: handleRequestClose })))));
+            React.createElement(PreviousButton, { onClick: debouncedHandlePrevious, hideButton: mouseIsStationary }),
+            React.createElement(NextButton, { onClick: debouncedHandleNext, hideButton: mouseIsStationary }))),
+        (images[currentImageIndex].title ||
+            images[currentImageIndex].caption) && (React.createElement("div", { className: styles.captionWrapper },
+            React.createElement(AtlantisThemeContext.AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
+                images[currentImageIndex].title && (React.createElement(Heading.Heading, { level: 4 }, images[currentImageIndex].title)),
+                images[currentImageIndex].caption && (React.createElement(Text.Text, { size: "large" }, images[currentImageIndex].caption)))))))));
     return mounted.current
         ? ReactDOM.createPortal(template, document.body)
         : template;
@@ -105,13 +186,15 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
         }
     }
 }
-function PreviousButton({ onClick }) {
-    return (React.createElement("div", { className: styles.prev },
-        React.createElement(Button.Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
+function PreviousButton({ onClick, hideButton }) {
+    const { mediumAndUp } = useBreakpoints.useBreakpoints();
+    return (React.createElement("div", { className: `${styles.prev} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
+        React.createElement(Button.Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
 }
-function NextButton({ onClick }) {
-    return (React.createElement("div", { className: styles.next },
-        React.createElement(Button.Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
+function NextButton({ onClick, hideButton }) {
+    const { mediumAndUp } = useBreakpoints.useBreakpoints();
+    return (React.createElement("div", { className: `${styles.next} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
+        React.createElement(Button.Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
 }
 function togglePrintStyles(open) {
     try {

package/dist/LightBox-es.js

@@ -1,15 +1,76 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import ReactDOM from 'react-dom';
-import { a as debounce } from './debounce-es.js';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
 import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
 import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
 import { u as useIsMounted_2 } from './useIsMounted-es.js';
+import { u as useDebounce } from './useDebounce-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
+import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';
+import { H as Heading } from './Heading-es.js';
+import { A as AtlantisThemeContextProvider } from './AtlantisThemeContext-es.js';
 
-var styles = {"next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","title":"tZU2g-NYdIs-","imagesWrapper":"ACX-rWRvYCs-","overlay":"_3tKP7luZoEQ-","image":"yYFVVScosfQ-","spinning":"_8tDoqjgfLcw-"};
+var useBreakpoints = {};
+
+var useMediaQuery = {};
+
+(function (exports) {
+	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.mediaQueryStore = void 0;
+	exports.useMediaQuery = useMediaQuery;
+	const react_1 = React;
+	exports.mediaQueryStore = {
+	    subscribe(onChange, query) {
+	        const matchMedia = window.matchMedia(query);
+	        matchMedia.addEventListener("change", onChange);
+	        return () => {
+	            matchMedia.removeEventListener("change", onChange);
+	        };
+	    },
+	    getSnapshot(query) {
+	        return () => window.matchMedia(query).matches;
+	    },
+	};
+	function useMediaQuery(query) {
+	    const subscribeMediaQuery = (0, react_1.useCallback)((onChange) => exports.mediaQueryStore.subscribe(onChange, query), [query]);
+	    const matches = (0, react_1.useSyncExternalStore)(subscribeMediaQuery, exports.mediaQueryStore.getSnapshot(query), () => true);
+	    return matches;
+	} 
+} (useMediaQuery));
+
+(function (exports) {
+	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.BREAKPOINT_SIZES = void 0;
+	exports.useBreakpoints = useBreakpoints;
+	const useMediaQuery_1 = useMediaQuery;
+	exports.BREAKPOINT_SIZES = { sm: 490, md: 768, lg: 1080, xl: 1440 };
+	/**
+	 * Hook equivalent of CSS media queries with our
+	 * [supported breakpoints](https://atlantis.getjobber.com/?path=/docs/design-breakpoints--docs).
+	 */
+	function useBreakpoints() {
+	    const { sm, md, lg, xl } = exports.BREAKPOINT_SIZES;
+	    const extraSmallOnly = (0, useMediaQuery_1.useMediaQuery)(`(max-width: ${sm - 1}px)`);
+	    const smallAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${sm}px)`);
+	    const mediumAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${md}px)`);
+	    const largeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${lg}px)`);
+	    const extraLargeAndUp = (0, useMediaQuery_1.useMediaQuery)(`(min-width: ${xl}px)`);
+	    return {
+	        smallAndUp,
+	        mediumAndUp,
+	        largeAndUp,
+	        extraLargeAndUp,
+	        extraSmallOnly,
+	        smallOnly: smallAndUp && !mediumAndUp,
+	        mediumOnly: mediumAndUp && !largeAndUp,
+	        largeOnly: largeAndUp && !extraLargeAndUp,
+	    };
+	} 
+} (useBreakpoints));
+
+var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","blurOverlay":"GKIdLTmvcvQ-","spinning":"_8tDoqjgfLcw-"};
 
 /* eslint-disable max-statements */
 const swipeConfidenceThreshold = 10000;
@@ -43,16 +104,21 @@ const imageTransition = {
 // A little bit more than the transition's duration
 // We're doing this to prevent a bug from framer-motion
 // https://github.com/framer/motion/issues/1769
-const debounceDuration = 250;
+const BUTTON_DEBOUNCE_DELAY = 250;
+const MOVEMENT_DEBOUNCE_DELAY = 1000;
 function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
     const [currentImageIndex, setCurrentImageIndex] = useState(imageIndex);
     const [direction, setDirection] = useState(0);
+    const [mouseIsStationary, setMouseIsStationary] = useState(true);
     const lightboxRef = useFocusTrap_2(open);
-    const debouncedHandleNext = debounce(handleMoveNext, debounceDuration);
-    const debouncedHandlePrevious = debounce(handleMovePrevious, debounceDuration);
+    const debouncedHandleNext = useDebounce(handleMoveNext, BUTTON_DEBOUNCE_DELAY);
+    const debouncedHandlePrevious = useDebounce(handleMovePrevious, BUTTON_DEBOUNCE_DELAY);
     const mounted = useIsMounted_2();
     const prevOpen = useRef(open);
     useRefocusOnActivator_2(open);
+    const handleMouseMovement = useDebounce(() => {
+        setMouseIsStationary(true);
+    }, MOVEMENT_DEBOUNCE_DELAY);
     useOnKeyDown_2(handleRequestClose, "Escape");
     useOnKeyDown_2(debouncedHandlePrevious, {
         key: "ArrowLeft",
@@ -67,18 +133,33 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
         prevOpen.current = open;
         togglePrintStyles(open);
     }
-    const template = (React.createElement(React.Fragment, null, open && (React.createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef },
-        React.createElement("div", { className: styles.toolbar },
-            React.createElement("span", { className: styles.title }, images[currentImageIndex].title),
-            React.createElement(ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })),
-        React.createElement("div", { className: styles.imagesWrapper },
+    const template = (React.createElement(React.Fragment, null, open && (React.createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef, onMouseMove: () => {
+            if (mouseIsStationary) {
+                setMouseIsStationary(false);
+            }
+            handleMouseMovement();
+        } },
+        React.createElement("div", { className: styles.backgroundImage, style: {
+                backgroundImage: `url("${images[currentImageIndex].url}")`,
+            } }),
+        React.createElement("div", { className: styles.blurOverlay, onClick: handleRequestClose }),
+        React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
+            React.createElement("div", { className: styles.toolbar },
+                React.createElement("div", { className: styles.slideNumber },
+                    React.createElement(Text, null, `${currentImageIndex + 1}/${images.length}`)),
+                React.createElement("div", { className: styles.closeButton },
+                    React.createElement(ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })))),
+        React.createElement("div", { className: styles.imageArea },
             React.createElement(AnimatePresence, { initial: false },
-                React.createElement(motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, style: { y: "-50%" }, initial: "enter", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
+                React.createElement(motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, initial: "enter", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
         images.length > 1 && (React.createElement(React.Fragment, null,
-            React.createElement(PreviousButton, { onClick: debouncedHandlePrevious }),
-            React.createElement(NextButton, { onClick: debouncedHandleNext }))),
-        React.createElement("div", { className: styles.toolbar }, images[currentImageIndex].caption),
-        React.createElement("div", { className: styles.overlay, onClick: handleRequestClose })))));
+            React.createElement(PreviousButton, { onClick: debouncedHandlePrevious, hideButton: mouseIsStationary }),
+            React.createElement(NextButton, { onClick: debouncedHandleNext, hideButton: mouseIsStationary }))),
+        (images[currentImageIndex].title ||
+            images[currentImageIndex].caption) && (React.createElement("div", { className: styles.captionWrapper },
+            React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
+                images[currentImageIndex].title && (React.createElement(Heading, { level: 4 }, images[currentImageIndex].title)),
+                images[currentImageIndex].caption && (React.createElement(Text, { size: "large" }, images[currentImageIndex].caption)))))))));
     return mounted.current
         ? ReactDOM.createPortal(template, document.body)
         : template;
@@ -103,13 +184,15 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
         }
     }
 }
-function PreviousButton({ onClick }) {
-    return (React.createElement("div", { className: styles.prev },
-        React.createElement(Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
+function PreviousButton({ onClick, hideButton }) {
+    const { mediumAndUp } = useBreakpoints.useBreakpoints();
+    return (React.createElement("div", { className: `${styles.prev} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
+        React.createElement(Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
 }
-function NextButton({ onClick }) {
-    return (React.createElement("div", { className: styles.next },
-        React.createElement(Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
+function NextButton({ onClick, hideButton }) {
+    const { mediumAndUp } = useBreakpoints.useBreakpoints();
+    return (React.createElement("div", { className: `${styles.next} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
+        React.createElement(Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
 }
 function togglePrintStyles(open) {
     try {

package/dist/debounce-es.js

@@ -326,4 +326,4 @@ var debounce_1 = debounce;
 
 var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(debounce_1);
 
-export { debounce$1 as a, debounce_1 as d };
+export { debounce_1 as a, debounce$1 as d };

package/dist/index.cjs

@@ -3,6 +3,7 @@
 var AnimatedPresence = require('./AnimatedPresence-cjs.js');
 var AnimatedSwitcher = require('./AnimatedSwitcher-cjs.js');
 var AtlantisContext = require('./AtlantisContext-cjs.js');
+var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
 var updateTheme = require('./updateTheme-cjs.js');
 var Autocomplete = require('./Autocomplete-cjs.js');
 require('react');
@@ -103,6 +104,7 @@ require('./_isIterateeCall-cjs.js');
 require('./_setToString-cjs.js');
 require('./tslib.es6-cjs.js');
 require('./useOnKeyDown-cjs.js');
+require('./useDebounce-cjs.js');
 require('./debounce-cjs.js');
 require('./isSymbol-cjs.js');
 require('color');
@@ -182,11 +184,11 @@ exports.AnimatedSwitcher = AnimatedSwitcher.AnimatedSwitcher;
 exports.AtlantisContext = AtlantisContext.AtlantisContext;
 exports.atlantisContextDefaultValues = AtlantisContext.atlantisContextDefaultValues;
 exports.useAtlantisContext = AtlantisContext.useAtlantisContext;
-exports.AtlantisThemeContextProvider = updateTheme.AtlantisThemeContextProvider;
-exports.THEME_CHANGE_EVENT = updateTheme.THEME_CHANGE_EVENT;
-exports.atlantisThemeContextDefaultValues = updateTheme.atlantisThemeContextDefaultValues;
+exports.AtlantisThemeContextProvider = AtlantisThemeContext.AtlantisThemeContextProvider;
+exports.THEME_CHANGE_EVENT = AtlantisThemeContext.THEME_CHANGE_EVENT;
+exports.atlantisThemeContextDefaultValues = AtlantisThemeContext.atlantisThemeContextDefaultValues;
+exports.useAtlantisTheme = AtlantisThemeContext.useAtlantisTheme;
 exports.updateTheme = updateTheme.updateTheme;
-exports.useAtlantisTheme = updateTheme.useAtlantisTheme;
 exports.Autocomplete = Autocomplete.Autocomplete;
 exports.Heading = Heading.Heading;
 exports.Text = Text.Text;

package/dist/index.mjs

@@ -1,7 +1,8 @@
 export { A as AnimatedPresence } from './AnimatedPresence-es.js';
 export { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
 export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from './AtlantisContext-es.js';
-export { A as AtlantisThemeContextProvider, T as THEME_CHANGE_EVENT, a as atlantisThemeContextDefaultValues, b as updateTheme, u as useAtlantisTheme } from './updateTheme-es.js';
+export { A as AtlantisThemeContextProvider, T as THEME_CHANGE_EVENT, a as atlantisThemeContextDefaultValues, u as useAtlantisTheme } from './AtlantisThemeContext-es.js';
+export { u as updateTheme } from './updateTheme-es.js';
 export { A as Autocomplete } from './Autocomplete-es.js';
 import 'react';
 import 'classnames';
@@ -101,6 +102,7 @@ import './_isIterateeCall-es.js';
 import './_setToString-es.js';
 import './tslib.es6-es.js';
 import './useOnKeyDown-es.js';
+import './useDebounce-es.js';
 import './debounce-es.js';
 import './isSymbol-es.js';
 import 'color';

package/dist/styles.css

@@ -7230,10 +7230,21 @@ html.atlantisLightBoxActive {
     }
 }
   }
+.i9Tw1T65W-k- {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  opacity: 0.6;
+  -webkit-filter: saturate(67%);
+          filter: saturate(67%);
+}
 .Q8amcRaTGf0-,
 .W9FVb24yJrk- {
-  display: -ms-flexbox;
-  display: flex;
   position: absolute;
   top: 50%;
   z-index: 1;
@@ -7242,75 +7253,157 @@ html.atlantisLightBoxActive {
           transform: translateY(-50%);
 }
 .Q8amcRaTGf0- {
-  right: 16px;
-  right: var(--space-base);
+  right: 24px;
+  right: var(--space-large);
 }
+@media (min-width: 768px) {
+.Q8amcRaTGf0- {
+    right: 32px;
+    right: var(--space-larger);
+}
+  }
+@media (--medium-screens-and-up) {
+.Q8amcRaTGf0- {
+    right: 32px;
+    right: var(--space-larger);
+}
+  }
 .W9FVb24yJrk- {
-  left: 16px;
-  left: var(--space-base);
+  left: 24px;
+  left: var(--space-large);
+}
+@media (min-width: 768px) {
+.W9FVb24yJrk- {
+    left: 32px;
+    left: var(--space-larger);
+}
+  }
+@media (--medium-screens-and-up) {
+.W9FVb24yJrk- {
+    left: 32px;
+    left: var(--space-larger);
+}
+  }
+.nsN0TPWsBXI- {
+  opacity: 0;
+  transition: opacity 200ms ease-in;
+  transition: opacity var(--timing-base) ease-in;
+}
+.nsN0TPWsBXI-:hover,
+  .nsN0TPWsBXI-:focus-within {
+    opacity: 1;
+  }
+.dkLYp7AD2jE- {
+  opacity: 1;
+  transition: opacity 200ms ease-in;
+  transition: opacity var(--timing-base) ease-in;
 }
 ._5p2iAj4JfoE- {
   display: -ms-flexbox;
   display: flex;
   position: fixed;
   top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
   z-index: 1001;
   z-index: var(--elevation-modal);
-  width: 100%;
-  height: 100%;
-  -ms-flex-pack: justify;
-      justify-content: space-between;
+  max-width: 100%;
+  max-height: 100%;
+  padding: 16px;
+  padding: var(--space-base);
+  background-color: hsl(0, 0%, 72%);
+  background-color: var(--color-base-grey--400);
+  -ms-flex-pack: center;
+      justify-content: center;
   -ms-flex-direction: column;
       flex-direction: column;
 }
+@media (min-width: 768px) {
+._5p2iAj4JfoE- {
+    padding: 16px 32px;
+    padding: var(--space-base) var(--space-larger);
+}
+  }
+@media (--medium-screens-and-up) {
+._5p2iAj4JfoE- {
+    padding: 16px 32px;
+    padding: var(--space-base) var(--space-larger);
+}
+  }
 .rMK4cKdOxFw- {
-  display: -ms-flexbox;
-  display: flex;
+  display: grid;
   z-index: 1;
   z-index: var(--elevation-base);
-  padding: 8px 16px;
-  padding: var(--space-small) var(--space-base);
-  color: hsl(197, 15%, 45%);
-  color: var(--color-text--secondary);
+  margin-bottom: 48px;
+  margin-bottom: var(--space-largest);
   font-size: 16px;
   font-size: var(--typography--fontSize-large);
-  background-color: hsl(53, 21%, 93%);
-  background-color: var(--color-surface--background);
-  -ms-flex-pack: justify;
-      justify-content: space-between;
-}
-.tZU2g-NYdIs- {
-  display: -ms-inline-flexbox;
-  display: inline-flex;
   -ms-flex-align: center;
       align-items: center;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+._0m6vb11DgiA- {
+  grid-column: 3;
+  justify-self: end;
+}
+.kCc68gGuTgg- {
+  grid-column: 2;
+  justify-self: center;
+}
+.yYFVVScosfQ- {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.UskuwLHR6fg- {
+  position: relative;
+  height: 100%;
+  max-width: 100%;
+  margin-bottom: 24px;
+  margin-bottom: var(--space-large);
+}
+@media (min-width: 768px) {
+.UskuwLHR6fg- {
+    margin: 0 calc(48px + 16px) 24px;
+    margin: 0 calc(var(--space-largest) + var(--space-base)) var(--space-large);
+}
+  }
+@media (--medium-screens-and-up) {
+.UskuwLHR6fg- {
+    margin: 0 calc(48px + 16px) 24px;
+    margin: 0 calc(var(--space-largest) + var(--space-base)) var(--space-large);
 }
-.ACX-rWRvYCs- {
+  }
+.OGjhge-r-U4- {
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-pack: center;
-      justify-content: center;
-  position: relative;
-  -ms-flex: 1 1 0px;
-      flex: 1 1 0;
-  min-height: 0;
+  z-index: 1;
+  z-index: var(--elevation-base);
+  max-width: 600px;
+  max-height: 90px;
+  margin: 0 auto 32px;
+  margin: 0 auto var(--space-larger);
+  overflow-y: auto;
+  text-align: center;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  gap: 8px;
+  gap: var(--space-small);
 }
-._3tKP7luZoEQ- {
+.GKIdLTmvcvQ- {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.32);
-  background-color: var(--color-overlay);
-}
-.yYFVVScosfQ- {
-  position: absolute;
-  top: 50%;
-  max-width: 100%;
-  max-height: 100%;
-  margin: auto;
+  -webkit-backdrop-filter: blur(30px);
+          backdrop-filter: blur(30px);
+  background-color: rgba(3, 43, 58, 0.25);
 }
 
 ._0X4jj5NERa4- {