@jobber/components 6.15.0 → 6.17.0

package/dist/InputTime-es.js

@@ -1,6 +1,6 @@
 import { _ as __rest } from './tslib.es6-es.js';
 import React, { useState, useCallback, useEffect, useRef } from 'react';
-import { a as debounce } from './debounce-es.js';
+import { d as debounce } from './debounce-es.js';
 import { f as FormField } from './FormField-es.js';
 import 'react-hook-form';
 import 'framer-motion';

package/dist/InternalChipDismissible-es.js

@@ -3,7 +3,7 @@ import { a as useInternalChipDismissibleInput, d as useScrollToActive, b as useI
 import './isObjectLike-es.js';
 import '@jobber/design';
 import 'react-popper';
-import { a as debounce } from './debounce-es.js';
+import { d as debounce } from './debounce-es.js';
 import classnames from 'classnames';
 import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';

package/dist/LightBox/index.cjs

@@ -4,15 +4,16 @@ var LightBox = require('../LightBox-cjs.js');
 require('react');
 require('framer-motion');
 require('react-dom');
-require('../debounce-cjs.js');
-require('../_commonjsHelpers-cjs.js');
-require('../isObjectLike-cjs.js');
-require('../isSymbol-cjs.js');
 require('../useRefocusOnActivator-cjs.js');
 require('../useOnKeyDown-cjs.js');
 require('../useFocusTrap-cjs.js');
 require('../useIsMounted-cjs.js');
 require('../useSafeLayoutEffect-cjs.js');
+require('../useDebounce-cjs.js');
+require('../debounce-cjs.js');
+require('../_commonjsHelpers-cjs.js');
+require('../isObjectLike-cjs.js');
+require('../isSymbol-cjs.js');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
 require('classnames');
@@ -20,6 +21,16 @@ require('react-router-dom');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Typography-cjs.js');
+require('../Text-cjs.js');
+require('../Heading-cjs.js');
+require('../AtlantisThemeContext-cjs.js');
+require('../identity-cjs.js');
+require('../isTypedArray-cjs.js');
+require('../_baseAssignValue-cjs.js');
+require('../_baseFor-cjs.js');
+require('../keysIn-cjs.js');
+require('../_isIterateeCall-cjs.js');
+require('../_setToString-cjs.js');
 
 
 

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';