@jobber/components 6.113.1 → 6.114.1

package/dist/LightBox/LightBox.types.d.ts

@@ -0,0 +1,94 @@
+import type { CSSProperties, ReactNode, RefObject } from "react";
+import type { PanInfo } from "framer-motion";
+export interface PresentedImage {
+    title?: string;
+    caption?: string;
+    alt?: string;
+    url: string;
+}
+export interface RequestCloseOptions {
+    lastPosition: number;
+}
+export interface LightBoxContextType {
+    readonly open: boolean;
+    readonly images: PresentedImage[];
+    readonly currentImageIndex: number;
+    readonly mouseIsStationary: boolean;
+    readonly boxSizing: CSSProperties["boxSizing"];
+    readonly directionRef: RefObject<number>;
+    readonly selectedThumbnailRef: RefObject<HTMLDivElement | null>;
+    readonly lightboxRef: RefObject<HTMLDivElement | null>;
+    readonly mounted: RefObject<boolean>;
+    handleMouseMove(): void;
+    handleRequestClose(): void;
+    handleOnDragEnd(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
+    handleThumbnailClick(index: number): void;
+    debouncedHandleNext(): void;
+    debouncedHandlePrevious(): void;
+}
+export interface NavButtonProps {
+    readonly onClick: () => void;
+    readonly hideButton: boolean;
+    readonly className: string;
+}
+export interface LightBoxProps {
+    /**
+     * Specify if the Lightbox is open or closed.
+     */
+    readonly open: boolean;
+    /**
+     * Images is an array of objects defining a LightBox image. This object consists of
+     * `title`, `caption`, `alt` and `url`. `title`, `alt` and `caption` are optional, `url` is
+     * required, for each image.
+     */
+    readonly images: PresentedImage[];
+    /**
+     * Use this to specify which image in `images` to initialize the lightbox with.
+     * This is useful when you have a collection of thumbnails as you only need one
+     * collection of image urls, order doesn't matter.
+     */
+    readonly imageIndex?: number;
+    /**
+     * This function must set open to false in order to close the lightbox. Note there
+     * is a 300ms easing animation on lightbox close that occurs before this function
+     * is called.
+     * This function receives an object as an argument with the key `lastPosition`
+     * that has the index of the image the user was on when LightBox was closed.
+     */
+    onRequestClose(options: RequestCloseOptions): void;
+    /**
+     * Sets the box-sizing for the thumbnails in the lightbox. This is a solution for a problem where
+     * tailwind was setting the box-sizing to `border-box` and causing issues with the lightbox.
+     * @default "content-box"
+     */
+    readonly boxSizing?: CSSProperties["boxSizing"];
+}
+export type LightBoxProviderProps = Omit<LightBoxProps, "onRequestClose"> & {
+    /**
+     * This function must set open to false in order to close the lightbox. Note there
+     * is a 300ms easing animation on lightbox close that occurs before this function
+     * is called.
+     * This function receives an object as an argument with the key `lastPosition`
+     * that has the index of the image the user was on when LightBox was closed.
+     */
+    onRequestClose?(options: RequestCloseOptions): void;
+    /**
+     * Callback function that is invoked whenever the current image index changes.
+     * This includes when the user navigates to a different image (via arrow keys,
+     * navigation buttons, or swipe gestures) or when clicking a thumbnail.
+     *
+     * @param index - The new current image index (0-based)
+     */
+    onImageChange?(index: number): void;
+    readonly children: ReactNode;
+};
+export interface LightBoxNavigationProps {
+    /**
+     * The class name to apply to the previous button wrapper.
+     */
+    readonly prevButtonClassName?: string;
+    /**
+     * The class name to apply to the next button wrapper.
+     */
+    readonly nextButtonClassName?: string;
+}

package/dist/LightBox/LightBoxContext.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { LightBoxContextType, LightBoxProviderProps } from "./LightBox.types";
+export declare const LightBoxContext: React.Context<LightBoxContextType>;
+export declare function LightBoxProvider({ open, images, imageIndex, onRequestClose, onImageChange, boxSizing, children, }: LightBoxProviderProps): React.JSX.Element;
+export declare function useLightBoxContext(): LightBoxContextType;

package/dist/LightBox/index.cjs

@@ -6,6 +6,8 @@ require('framer-motion');
 require('react-dom');
 require('@jobber/hooks');
 require('classnames');
+require('../noop-cjs.js');
+require('../_commonjsHelpers-cjs.js');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
@@ -16,7 +18,6 @@ require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../Heading-cjs.js');
 require('../AtlantisThemeContext-cjs.js');
-require('../_commonjsHelpers-cjs.js');
 require('../identity-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
@@ -29,3 +30,4 @@ require('../_setToString-cjs.js');
 
 
 exports.LightBox = LightBox.LightBox;
+exports.useLightBoxContext = LightBox.useLightBoxContext;

package/dist/LightBox/index.d.ts

@@ -1 +1,3 @@
 export { LightBox } from "./LightBox";
+export type { LightBoxProps, LightBoxProviderProps, PresentedImage, } from "./LightBox.types";
+export { useLightBoxContext } from "./LightBoxContext";

package/dist/LightBox/index.mjs

@@ -1,9 +1,11 @@
-export { L as LightBox } from '../LightBox-es.js';
+export { L as LightBox, u as useLightBoxContext } from '../LightBox-es.js';
 import 'react';
 import 'framer-motion';
 import 'react-dom';
 import '@jobber/hooks';
 import 'classnames';
+import '../noop-es.js';
+import '../_commonjsHelpers-es.js';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
@@ -14,7 +16,6 @@ import '../Typography-es.js';
 import '../Text-es.js';
 import '../Heading-es.js';
 import '../AtlantisThemeContext-es.js';
-import '../_commonjsHelpers-es.js';
 import '../identity-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';

package/dist/LightBox-cjs.js

@@ -5,6 +5,7 @@ var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
 var jobberHooks = require('@jobber/hooks');
 var classnames = require('classnames');
+var noop = require('./noop-cjs.js');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 var Text = require('./Text-cjs.js');
 var Button = require('./Button-cjs.js');
@@ -13,6 +14,11 @@ var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
 
 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-","title":"tZU2g-NYdIs-","blurOverlay":"GKIdLTmvcvQ-","thumbnailBar":"_3TfQLQEE3GQ-","thumbnailImage":"eBMzUOlcfQ4-","thumbnail":"eapm2zruLn8-","selected":"PeLn2u-QB0k-","spinning":"_8tDoqjgfLcw-"};
 
+// 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 BUTTON_DEBOUNCE_DELAY = 250;
+const MOVEMENT_DEBOUNCE_DELAY = 1000;
 const swipeConfidenceThreshold = 10000;
 const swipePower = (offset, velocity) => {
     return Math.abs(offset) * velocity;
@@ -31,12 +37,26 @@ const slideVariants = {
 const imageTransition = {
     x: { duration: 0.65, ease: [0.42, 0, 0, 1.03] },
 };
-// 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 BUTTON_DEBOUNCE_DELAY = 250;
-const MOVEMENT_DEBOUNCE_DELAY = 1000;
-function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onRequestClose, }) {
+
+/* eslint-disable max-statements */
+const LightBoxContext = React.createContext({
+    open: false,
+    images: [],
+    currentImageIndex: 0,
+    mouseIsStationary: true,
+    boxSizing: "content-box",
+    directionRef: { current: 0 },
+    selectedThumbnailRef: { current: null },
+    lightboxRef: { current: null },
+    mounted: { current: false },
+    handleMouseMove: noop.noop,
+    handleRequestClose: noop.noop,
+    handleOnDragEnd: noop.noop,
+    handleThumbnailClick: noop.noop,
+    debouncedHandleNext: noop.noop,
+    debouncedHandlePrevious: noop.noop,
+});
+function LightBoxProvider({ open = true, images, imageIndex = 0, onRequestClose = noop.noop, onImageChange = noop.noop, boxSizing = "content-box", children, }) {
     const [currentImageIndex, setCurrentImageIndex] = React.useState(imageIndex);
     const directionRef = React.useRef(0);
     const [mouseIsStationary, setMouseIsStationary] = React.useState(true);
@@ -59,6 +79,7 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
     });
     React.useEffect(() => {
         setCurrentImageIndex(imageIndex);
+        onImageChange(imageIndex);
     }, [imageIndex, open]);
     if (prevOpen.current !== open) {
         prevOpen.current = open;
@@ -72,57 +93,28 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
             inline: "center",
         });
     }, [currentImageIndex]);
-    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: slideVariants, src: images[currentImageIndex].url, custom: directionRef, className: styles.image, initial: "enter", alt: images[currentImageIndex].alt ||
-                        images[currentImageIndex].title ||
-                        "", 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, 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("div", { className: styles.title },
-                    React.createElement(Heading.Heading, { level: 4 }, images[currentImageIndex].title))),
-                images[currentImageIndex].caption && (React.createElement(Text.Text, { size: "large" }, images[currentImageIndex].caption))))),
-        images.length > 1 && (React.createElement("div", { className: styles.thumbnailBar, style: {
-                "--lightbox--box-sizing": boxSizing,
-            }, "data-testid": "ATL-Thumbnail-Bar" }, images.map((image, index) => (React.createElement("div", { key: index, className: classnames(styles.thumbnail, {
-                [styles.selected]: index === currentImageIndex,
-            }), onClick: () => handleThumbnailClick(index), ref: index === currentImageIndex ? selectedThumbnailRef : null },
-            React.createElement("img", { key: index, src: image.url, alt: image.alt || image.title || "", className: styles.thumbnailImage }))))))))));
-    return mounted.current
-        ? ReactDOM.createPortal(template, document.body)
-        : template;
+    function handleMouseMove() {
+        if (mouseIsStationary) {
+            setMouseIsStationary(false);
+        }
+        handleMouseMovement();
+    }
     function handleMovePrevious() {
         directionRef.current = -1;
-        setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);
+        const newIndex = (currentImageIndex + images.length - 1) % images.length;
+        setCurrentImageIndex(newIndex);
+        onImageChange(newIndex);
     }
     function handleMoveNext() {
         directionRef.current = 1;
-        setCurrentImageIndex((currentImageIndex + 1) % images.length);
+        const newIndex = (currentImageIndex + 1) % images.length;
+        setCurrentImageIndex(newIndex);
+        onImageChange(newIndex);
     }
     function handleRequestClose() {
         onRequestClose({ lastPosition: currentImageIndex });
     }
-    function handleOnDragEnd(event, { offset, velocity }) {
+    function handleOnDragEnd(_event, { offset, velocity }) {
         const swipe = swipePower(offset.x, velocity.x);
         if (swipe < -swipeConfidenceThreshold) {
             handleMoveNext();
@@ -139,17 +131,28 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
             directionRef.current = 1;
         }
         setCurrentImageIndex(index);
+        onImageChange(index);
     }
+    return (React.createElement(LightBoxContext.Provider, { value: {
+            open,
+            images,
+            currentImageIndex,
+            mouseIsStationary,
+            boxSizing,
+            directionRef,
+            selectedThumbnailRef,
+            lightboxRef,
+            mounted,
+            handleMouseMove,
+            handleRequestClose,
+            handleOnDragEnd,
+            handleThumbnailClick,
+            debouncedHandleNext,
+            debouncedHandlePrevious,
+        } }, children));
 }
-function PreviousButton({ onClick, hideButton }) {
-    const { mediumAndUp } = jobberHooks.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, hideButton }) {
-    const { mediumAndUp } = jobberHooks.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 useLightBoxContext() {
+    return React.useContext(LightBoxContext);
 }
 function togglePrintStyles(open) {
     try {
@@ -165,4 +168,189 @@ function togglePrintStyles(open) {
     }
 }
 
+function LightBoxContent() {
+    const { open, lightboxRef, handleMouseMove } = useLightBoxContext();
+    const mounted = jobberHooks.useIsMounted();
+    const template = (React.createElement(React.Fragment, null, open && (React.createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef, onMouseMove: handleMouseMove },
+        React.createElement(LightBoxBackground, null),
+        React.createElement(LightBoxOverlay, null),
+        React.createElement(LightBoxToolbar, null),
+        React.createElement(LightBoxSlides, null),
+        React.createElement(LightBoxNavigation, null),
+        React.createElement(LightBoxCaption, null),
+        React.createElement(LightBoxThumbnails, null)))));
+    return mounted.current
+        ? ReactDOM.createPortal(template, document.body)
+        : template;
+}
+function PreviousButton({ onClick, hideButton, className }) {
+    const { mediumAndUp } = jobberHooks.useBreakpoints();
+    return (React.createElement("div", { className: `${className} ${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, hideButton, className }) {
+    const { mediumAndUp } = jobberHooks.useBreakpoints();
+    return (React.createElement("div", { className: `${className} ${hideButton ? styles.buttonHidden : styles.buttonVisible}` },
+        React.createElement(Button.Button, { size: mediumAndUp ? "large" : "small", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
+}
+/**
+ * Blurred, desaturated copy of the current image rendered as a full-bleed
+ * background behind the lightbox. Pass `className` to apply additional styles.
+ */
+function LightBoxBackground({ className }) {
+    const { images, currentImageIndex } = useLightBoxContext();
+    return (React.createElement("div", { className: classnames(styles.backgroundImage, className), style: {
+            backgroundImage: `url("${images[currentImageIndex].url}")`,
+        } }));
+}
+/**
+ * Semi-transparent blur backdrop. Clicking it calls `onRequestClose`.
+ * Pass `className` to apply additional styles.
+ */
+function LightBoxOverlay({ className }) {
+    const { handleRequestClose } = useLightBoxContext();
+    return (React.createElement("div", { className: classnames(styles.blurOverlay, className), onClick: handleRequestClose }));
+}
+/**
+ * Top bar showing the current image counter (`1/3`) and a close button.
+ * Styled for dark backgrounds.
+ */
+function LightBoxToolbar() {
+    const { images, currentImageIndex, handleRequestClose } = useLightBoxContext();
+    return (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 })))));
+}
+/**
+ * The animated hero image with swipe-to-navigate and slide animation.
+ *
+ * Pass `className` to add styles to the image wrapper. Supports
+ * swipe-to-navigate (drag). Keyboard arrow navigation is handled by
+ * `LightBox.Provider`.
+ *
+ * @example
+ * ```tsx
+ * <LightBox.Slides className={styles.imageArea} />
+ * <LightBox.Navigation
+ *   prevButtonClassName={styles.prev}
+ *   nextButtonClassName={styles.next}
+ * />
+ * ```
+ */
+function LightBoxSlides({ className }) {
+    const { images, currentImageIndex, directionRef, handleOnDragEnd } = useLightBoxContext();
+    return (React.createElement("div", { className: classnames(styles.imageArea, className) },
+        React.createElement(framerMotion.AnimatePresence, { initial: false },
+            React.createElement(framerMotion.motion.img, { key: currentImageIndex, variants: slideVariants, src: images[currentImageIndex].url, custom: directionRef, className: styles.image, initial: "enter", alt: images[currentImageIndex].alt ||
+                    images[currentImageIndex].title ||
+                    "", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))));
+}
+/**
+ * Previous and next navigation buttons. Returns `null` when the image set
+ * has only one image.
+ *
+ * Use `prevButtonClassName` and `nextButtonClassName` to override the styles
+ * on each button's wrapper for custom layouts.
+ *
+ * @example
+ * ```tsx
+ * <LightBox.Navigation
+ *   prevButtonClassName={styles.prev}
+ *   nextButtonClassName={styles.next}
+ * />
+ * ```
+ */
+function LightBoxNavigation({ prevButtonClassName, nextButtonClassName, }) {
+    const { images, mouseIsStationary, debouncedHandleNext, debouncedHandlePrevious, } = useLightBoxContext();
+    if (images.length <= 1)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(PreviousButton, { onClick: debouncedHandlePrevious, hideButton: mouseIsStationary, className: classnames(styles.prev, prevButtonClassName) }),
+        React.createElement(NextButton, { onClick: debouncedHandleNext, hideButton: mouseIsStationary, className: classnames(styles.next, nextButtonClassName) })));
+}
+/**
+ * Title and caption text for the current image. Only renders when the current
+ * image has a `title` or `caption`. Styled for dark backgrounds.
+ */
+function LightBoxCaption() {
+    const { images, currentImageIndex } = useLightBoxContext();
+    const { title, caption } = images[currentImageIndex];
+    if (!title && !caption)
+        return null;
+    return (React.createElement("div", { className: styles.captionWrapper },
+        React.createElement(AtlantisThemeContext.AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
+            title && (React.createElement("div", { className: styles.title },
+                React.createElement(Heading.Heading, { level: 4 }, title))),
+            caption && React.createElement(Text.Text, { size: "large" }, caption))));
+}
+/**
+ * Scrollable thumbnail strip. Only renders when there are two or more images.
+ */
+function LightBoxThumbnails() {
+    const { images, currentImageIndex, boxSizing, selectedThumbnailRef, handleThumbnailClick, } = useLightBoxContext();
+    if (images.length <= 1)
+        return null;
+    return (React.createElement("div", { className: styles.thumbnailBar, style: { "--lightbox--box-sizing": boxSizing }, "data-testid": "ATL-Thumbnail-Bar" }, images.map((image, index) => (React.createElement("div", { key: index, className: classnames(styles.thumbnail, {
+            [styles.selected]: index === currentImageIndex,
+        }), onClick: () => handleThumbnailClick(index), ref: index === currentImageIndex ? selectedThumbnailRef : null },
+        React.createElement("img", { key: index, src: image.url, alt: image.alt || image.title || "", className: styles.thumbnailImage }))))));
+}
+/**
+ * LightBox displays images in a fullscreen overlay.
+ *
+ * **Self-contained (legacy) usage:**
+ * ```tsx
+ * <LightBox
+ *   open={isOpen}
+ *   images={images}
+ *   imageIndex={imageIndex}
+ *   onRequestClose={({ lastPosition }) => { setIsOpen(false); }}
+ * />
+ * ```
+ *
+ * **Full composable (fullscreen) usage:**
+ * ```tsx
+ * <LightBox.Provider open={isOpen} images={images} onRequestClose={onClose}>
+ *   <LightBox.Content />
+ * </LightBox.Provider>
+ * ```
+ *
+ * **Inline gallery usage (no overlay, no close):**
+ * ```tsx
+ * <LightBox.Provider
+ *   open={true}
+ *   images={images}
+ *   imageIndex={activeIndex}
+ *   onImageChange={onImageChange}
+ * >
+ *   <div className={styles.lightboxWrapper} onMouseMove={handleMouseMove}>
+ *     <LightBox.Background className={styles.backgroundImage} />
+ *     <LightBox.Overlay className={styles.blurOverlay} />
+ *     <LightBox.Slides className={styles.imageArea} />
+ *     <LightBox.Navigation
+ *       prevButtonClassName={styles.prev}
+ *       nextButtonClassName={styles.next}
+ *     />
+ *   </div>
+ * </LightBox.Provider>
+ * ```
+ */
+function LightBox(props) {
+    return (React.createElement(LightBoxProvider, Object.assign({}, props),
+        React.createElement(LightBoxContent, null)));
+}
+LightBox.Provider = LightBoxProvider;
+LightBox.Content = LightBoxContent;
+LightBox.Background = LightBoxBackground;
+LightBox.Overlay = LightBoxOverlay;
+LightBox.Toolbar = LightBoxToolbar;
+LightBox.Slides = LightBoxSlides;
+LightBox.Navigation = LightBoxNavigation;
+LightBox.Caption = LightBoxCaption;
+LightBox.Thumbnails = LightBoxThumbnails;
+
 exports.LightBox = LightBox;
+exports.useLightBoxContext = useLightBoxContext;