yet-another-react-lightbox 1.11.1 → 1.13.1

package/dist/core/components/IconButton.d.ts

@@ -4,4 +4,4 @@ export declare type IconButtonProps = Omit<React.DetailedHTMLProps<React.ButtonH
     icon: React.ElementType;
     renderIcon?: () => React.ReactNode;
 };
-export declare const IconButton: React.ForwardRefExoticComponent<Pick<IconButtonProps, "value" | "children" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerLeave" | "onPointerCancel" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onKeyDown" | "onKeyUp" | "onWheel" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "label" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "icon" | "renderIcon"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: React.ForwardRefExoticComponent<Pick<IconButtonProps, "icon" | "className" | "value" | "children" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerLeave" | "onPointerCancel" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onKeyDown" | "onKeyUp" | "onWheel" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "label" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "renderIcon"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/core/components/IconButton.js

@@ -1,4 +1,8 @@
 import * as React from "react";
 import { clsx, cssClass } from "../utils.js";
-export const IconButton = React.forwardRef(({ label, className, icon: Icon, renderIcon, onClick, ...rest }, ref) => (React.createElement("button", { ref: ref, type: "button", "aria-label": label, className: clsx(cssClass("button"), className), onClick: onClick, ...rest }, renderIcon ? renderIcon() : React.createElement(Icon, { className: cssClass("icon") }))));
+import { useController } from "../modules/Controller.js";
+export const IconButton = React.forwardRef(({ label, className, icon: Icon, renderIcon, onClick, style, ...rest }, ref) => {
+    const { latestProps: { current: { styles }, }, } = useController();
+    return (React.createElement("button", { ref: ref, type: "button", "aria-label": label, className: clsx(cssClass("button"), className), onClick: onClick, style: { ...style, ...styles.button }, ...rest }, renderIcon ? renderIcon() : React.createElement(Icon, { className: cssClass("icon"), style: styles.icon })));
+});
 IconButton.displayName = "IconButton";

package/dist/core/components/ImageSlide.js

@@ -44,7 +44,12 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onCli
     const nonInfinite = (value, fallback) => (Number.isFinite(value) ? value : fallback);
     const maxWidth = nonInfinite(Math.max(...((_b = (_a = image.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) !== null && _b !== void 0 ? _b : []).concat(image.width ? [image.width] : [])), ((_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalWidth) || 0);
     const maxHeight = nonInfinite(Math.max(...((_e = (_d = image.srcSet) === null || _d === void 0 ? void 0 : _d.map((x) => x.height).filter((x) => Boolean(x))) !== null && _e !== void 0 ? _e : []).concat(image.height ? [image.height] : [])), (image.aspectRatio && maxWidth ? maxWidth / image.aspectRatio : (_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.naturalHeight) || 0);
-    const style = maxWidth && maxHeight ? { maxWidth, maxHeight } : undefined;
+    const style = maxWidth && maxHeight
+        ? {
+            maxWidth: `min(${maxWidth}px, 100%)`,
+            maxHeight: `min(${maxHeight}px, 100%)`,
+        }
+        : undefined;
     const srcSet = (_g = image.srcSet) === null || _g === void 0 ? void 0 : _g.sort((a, b) => a.width - b.width).map((item) => `${item.src} ${item.width}w`).join(", ");
     const estimateActualWidth = () => {
         if (rect && !cover) {
@@ -61,7 +66,7 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onCli
         ? `${Math.ceil((Math.min(estimateActualWidth(), rect.width) / window.innerWidth) * 100)}vw`
         : undefined;
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, onClick: onClick, className: clsx(cssClass("slide_image"), cssClass("fullsize"), cover && cssClass("slide_image_cover"), status !== SLIDE_STATUS_COMPLETE && cssClass("slide_image_loading")), draggable: false, alt: image.alt, style: style, sizes: sizes, srcSet: srcSet, src: image.src }),
+        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, onClick: onClick, className: clsx(cssClass("slide_image"), cover && cssClass("slide_image_cover"), status !== SLIDE_STATUS_COMPLETE && cssClass("slide_image_loading")), draggable: false, alt: image.alt, style: style, sizes: sizes, srcSet: srcSet, src: image.src }),
         status !== SLIDE_STATUS_COMPLETE && (React.createElement("div", { className: cssClass("slide_placeholder") },
             status === SLIDE_STATUS_LOADING &&
                 ((render === null || render === void 0 ? void 0 : render.iconLoading) ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass("icon"), cssClass("slide_loading")) }))),

package/dist/core/consts.d.ts

@@ -8,3 +8,4 @@ export declare const ACTIVE_SLIDE_LOADING: string;
 export declare const ACTIVE_SLIDE_PLAYING: string;
 export declare const ACTIVE_SLIDE_ERROR: string;
 export declare const ACTIVE_SLIDE_COMPLETE: string;
+export declare const YARL_EVENT_BACKDROP_CLICK = "backdrop_click";

package/dist/core/consts.js

@@ -7,3 +7,4 @@ export const ACTIVE_SLIDE_LOADING = activeSlideStatus(SLIDE_STATUS_LOADING);
 export const ACTIVE_SLIDE_PLAYING = activeSlideStatus(SLIDE_STATUS_PLAYING);
 export const ACTIVE_SLIDE_ERROR = activeSlideStatus(SLIDE_STATUS_ERROR);
 export const ACTIVE_SLIDE_COMPLETE = activeSlideStatus(SLIDE_STATUS_COMPLETE);
+export const YARL_EVENT_BACKDROP_CLICK = "backdrop_click";

package/dist/core/modules/Carousel.js

@@ -1,12 +1,15 @@
 import * as React from "react";
+import { YARL_EVENT_BACKDROP_CLICK } from "../consts.js";
 import { LightboxDefaultProps } from "../../types.js";
 import { useContainerRect } from "../hooks/index.js";
 import { createModule } from "../config.js";
 import { clsx, cssClass, cssVar } from "../utils.js";
 import { ImageSlide } from "../components/index.js";
 import { useController } from "./Controller.js";
+import { useEvents } from "../contexts/Events.js";
 const CarouselSlide = ({ slide, offset }) => {
-    const { setContainerRef, containerRect } = useContainerRect();
+    const { setContainerRef, containerRect, containerRef } = useContainerRect();
+    const { publish } = useEvents();
     const { latestProps, currentIndex } = useController();
     const { render } = latestProps.current;
     const renderSlide = (rect) => {
@@ -25,7 +28,18 @@ const CarouselSlide = ({ slide, offset }) => {
             ((_c = render.slideContainer) !== null && _c !== void 0 ? _c : ((_, x) => x))(slide, rendered), (_d = render.slideFooter) === null || _d === void 0 ? void 0 :
             _d.call(render, slide))) : null;
     };
-    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("slide"), cssClass("flex_center")), style: { [cssVar("slide_offset")]: offset } }, containerRect && renderSlide(containerRect)));
+    const handleBackdropClick = (event) => {
+        const container = containerRef.current;
+        const target = event.target instanceof HTMLElement ? event.target : undefined;
+        if (target &&
+            container &&
+            (target === container ||
+                (Array.from(container.children).find((x) => x === target) &&
+                    target.classList.contains(cssClass("fullsize"))))) {
+            publish(YARL_EVENT_BACKDROP_CLICK);
+        }
+    };
+    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("slide"), cssClass("flex_center")), style: { [cssVar("slide_offset")]: offset }, onClick: handleBackdropClick }, containerRect && renderSlide(containerRect)));
 };
 export const Carousel = ({ slides, carousel: { finite, preload, padding, spacing } }) => {
     const { currentIndex, globalIndex } = useController();

package/dist/core/modules/Controller.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { YARL_EVENT_BACKDROP_CLICK } from "../consts.js";
 import { LightboxDefaultProps } from "../../types.js";
 import { cleanup, clsx, cssClass, cssVar, makeUseContext } from "../utils.js";
 import { createModule } from "../config.js";
@@ -158,6 +159,9 @@ export const Controller = ({ children, ...props }) => {
             publish("close");
         }
     }), [subscribeSensors, publish]);
+    React.useEffect(() => props.controller.closeOnBackdropClick
+        ? subscribe(YARL_EVENT_BACKDROP_CLICK, () => publish("close"))
+        : () => { }, [props.controller.closeOnBackdropClick, publish, subscribe]);
     const clearPointer = React.useCallback((event) => {
         const { current } = refs;
         if (current.activePointer === event.pointerId) {
@@ -298,6 +302,7 @@ export const Controller = ({ children, ...props }) => {
                     [cssVar("controller_touch_action")]: props.controller.touchAction,
                 }
                 : null),
+            ...props.styles.container,
         }, ...(props.controller.aria ? { role: "presentation", "aria-live": "polite" } : null), tabIndex: -1, ...registerSensors }, containerRect && (React.createElement(ControllerContext.Provider, { value: context }, children))));
 };
 export const ControllerModule = createModule("controller", Controller);

package/dist/core/modules/Portal.js

@@ -27,9 +27,7 @@ export const Portal = ({ children, ...props }) => {
     const { subscribe } = useEvents();
     React.useEffect(() => {
         setMounted(true);
-        return () => {
-            setMounted(false);
-        };
+        return () => setMounted(false);
     }, []);
     React.useEffect(() => subscribe("close", () => {
         var _a, _b;
@@ -66,13 +64,14 @@ export const Portal = ({ children, ...props }) => {
         }
     }, [setTimeout, latestProps, latestAnimationDuration]);
     return mounted
-        ? ReactDOM.createPortal(React.createElement("div", { ref: handlePortalRef, className: clsx(cssClass("portal"), cssClass("no_scroll_padding"), visible && cssClass("portal_open")), role: "presentation", "aria-live": "polite", ...(props.animation.fade !== LightboxDefaultProps.animation.fade
-                ? {
-                    style: {
+        ? ReactDOM.createPortal(React.createElement("div", { ref: handlePortalRef, className: clsx(props.className, cssClass("root"), cssClass("portal"), cssClass("no_scroll_padding"), visible && cssClass("portal_open")), role: "presentation", "aria-live": "polite", style: {
+                ...(props.animation.fade !== LightboxDefaultProps.animation.fade
+                    ? {
                         [cssVar("fade_animation_duration")]: `${Math.round(props.animation.fade)}ms`,
-                    },
-                }
-                : null) }, children), document.body)
+                    }
+                    : null),
+                ...props.styles.root,
+            } }, children), document.body)
         : null;
 };
 export const PortalModule = createModule("portal", Portal);

package/dist/plugins/Captions.d.ts

@@ -16,6 +16,16 @@ declare module "../types.js" {
             descriptionMaxLines?: number;
         };
     }
+    interface SlotType {
+        /** captions title customization slot */
+        captionsTitle: "captionsTitle";
+        /** captions title container customization slot */
+        captionsTitleContainer: "captionsTitleContainer";
+        /** captions description customization slot */
+        captionsDescription: "captionsDescription";
+        /** captions description container customization slot */
+        captionsDescriptionContainer: "captionsDescriptionContainer";
+    }
 }
 /** Captions plugin context holder */
 export declare const CaptionsComponent: Component;

package/dist/plugins/Captions.js

@@ -1,28 +1,31 @@
 import * as React from "react";
-import { cssClass, cssVar, isDefined, makeUseContext } from "../core/utils.js";
+import { clsx, cssClass, cssVar, isDefined, makeUseContext } from "../core/utils.js";
 import { useEvents } from "../core/contexts/Events.js";
 import { createModule } from "../core/index.js";
 const defaultTextAlign = "start";
 const defaultMaxLines = 3;
-const cls = (className) => cssClass(`slide_${className}`);
+const cssPrefix = (className) => cssClass(`slide_${className}`);
 const hasTitle = (slide) => "title" in slide ? typeof slide.title === "string" : false;
 const hasDescription = (slide) => "description" in slide ? typeof slide.description === "string" : false;
 const CaptionsContext = React.createContext(null);
 const useCaptions = makeUseContext("useCaptions", "CaptionsContext", CaptionsContext);
-const Title = ({ title }) => {
+const Title = ({ title, styles }) => {
     const { toolbarWidth } = useCaptions();
-    return (React.createElement("div", { className: cls(`title_container`) },
-        React.createElement("div", { className: cls("title"), ...(toolbarWidth ? { style: { [cssVar("toolbar_width")]: `${toolbarWidth}px` } } : null) }, title)));
+    return (React.createElement("div", { style: styles.captionsTitleContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("title_container")) },
+        React.createElement("div", { style: styles.captionsTitle, className: cssPrefix("title"), ...(toolbarWidth ? { style: { [cssVar("toolbar_width")]: `${toolbarWidth}px` } } : null) }, title)));
 };
-const Description = ({ description, align, maxLines }) => (React.createElement("div", { className: cls("description_container") },
-    React.createElement("div", { className: cls("description"), ...(align !== defaultTextAlign || maxLines !== defaultMaxLines
-            ? {
-                style: {
-                    [cssVar("slide_description_text_align")]: align,
-                    [cssVar("slide_description_max_lines")]: maxLines,
-                },
-            }
-            : null) }, description.split("\n").flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line]))));
+const Description = ({ description, align, maxLines, styles }) => (React.createElement("div", { style: styles.captionsDescriptionContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("description_container")) },
+    React.createElement("div", { className: cssPrefix("description"), style: {
+            ...(align !== defaultTextAlign || maxLines !== defaultMaxLines
+                ? {
+                    style: {
+                        [cssVar("slide_description_text_align")]: align,
+                        [cssVar("slide_description_max_lines")]: maxLines,
+                    },
+                }
+                : null),
+            ...styles.captionsDescription,
+        } }, description.split("\n").flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line]))));
 export const CaptionsComponent = ({ children }) => {
     const { subscribe } = useEvents();
     const [toolbarWidth, setToolbarWidth] = React.useState();
@@ -37,17 +40,18 @@ export const CaptionsComponent = ({ children }) => {
 export const CaptionsModule = createModule("captions", CaptionsComponent);
 export const Captions = ({ augment, addParent }) => {
     addParent("controller", CaptionsModule);
-    augment(({ render: { slideFooter: renderFooter, ...restRender }, captions, ...restProps }) => ({
+    augment(({ render: { slideFooter: renderFooter, ...restRender }, captions, styles, ...restProps }) => ({
         render: {
             slideFooter: (slide) => {
                 var _a, _b;
                 return (React.createElement(React.Fragment, null, renderFooter === null || renderFooter === void 0 ? void 0 :
                     renderFooter(slide),
-                    hasTitle(slide) && React.createElement(Title, { title: slide.title }),
-                    hasDescription(slide) && (React.createElement(Description, { description: slide.description, align: (_a = captions === null || captions === void 0 ? void 0 : captions.descriptionTextAlign) !== null && _a !== void 0 ? _a : defaultTextAlign, maxLines: (_b = captions === null || captions === void 0 ? void 0 : captions.descriptionMaxLines) !== null && _b !== void 0 ? _b : defaultMaxLines }))));
+                    hasTitle(slide) && React.createElement(Title, { styles: styles, title: slide.title }),
+                    hasDescription(slide) && (React.createElement(Description, { styles: styles, description: slide.description, align: (_a = captions === null || captions === void 0 ? void 0 : captions.descriptionTextAlign) !== null && _a !== void 0 ? _a : defaultTextAlign, maxLines: (_b = captions === null || captions === void 0 ? void 0 : captions.descriptionMaxLines) !== null && _b !== void 0 ? _b : defaultMaxLines }))));
             },
             ...restRender,
         },
+        styles,
         ...restProps,
     }));
 };

package/dist/plugins/Inline.js

@@ -1,17 +1,18 @@
 import * as React from "react";
-import { createModule } from "../core/index.js";
-export const InlineContainer = ({ inline, children }) => React.createElement("div", { ...inline }, children);
+import { clsx, createModule, cssClass } from "../core/index.js";
+export const InlineContainer = ({ inline: { className, ...rest } = {}, children }) => (React.createElement("div", { className: clsx(cssClass("root"), className), ...rest }, children));
 export const InlineModule = createModule("inline", InlineContainer);
 export const Inline = ({ augment, replace, remove }) => {
-    augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, aria, touchAction, ...restController }, ...restProps }) => ({
+    augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, aria, touchAction, ...restController }, className, ...restProps }) => ({
         open: true,
         close: () => { },
         toolbar: {
             buttons: buttons.filter((button) => button !== "close"),
             ...restToolbar,
         },
-        inline: { style: { width: "100%", height: "100%" } },
+        inline: { style: { width: "100%", height: "100%" }, className },
         controller: { focus: false, aria: true, touchAction: "pan-y", ...restController },
+        className,
         ...restProps,
     }));
     remove("no-scroll");

package/dist/plugins/Thumbnails.d.ts

@@ -32,9 +32,17 @@ declare module "../types.js" {
             imageFit: ImageFit;
         }) => React.ReactNode;
     }
+    interface SlotType {
+        /** thumbnail customization slot */
+        thumbnail: "thumbnail";
+        /** thumbnails track customization slot */
+        thumbnailsTrack: "thumbnailsTrack";
+        /** thumbnails container customization slot */
+        thumbnailsContainer: "thumbnailsContainer";
+    }
 }
 declare type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
-declare type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render"> & {
+declare type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render" | "styles"> & {
     container: React.RefObject<HTMLDivElement>;
     thumbnails: ThumbnailsInternal;
     startingIndex: number;

package/dist/plugins/Thumbnails.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { clsx, createIcon, createModule, cssClass, cssVar, ImageSlide, useLayoutEffect, useEvents, useLatest, useMotionPreference, useRTL, } from "../core/index.js";
+import { clsx, createIcon, createModule, cssClass, cssVar, ImageSlide, useEvents, useLatest, useLayoutEffect, useMotionPreference, useRTL, } from "../core/index.js";
 const defaultThumbnailsProps = {
     position: "bottom",
     width: 120,
@@ -36,7 +36,7 @@ const renderThumbnail = ({ slide, render, rect, imageFit }) => {
     }
     return React.createElement(UnknownThumbnailIcon, { className: thumbnailIconClass });
 };
-const Thumbnail = ({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, imageFit, }) => (React.createElement("button", { type: "button", className: clsx(cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix("active")), fadeIn && cssClass(cssThumbnailPrefix("fadein")), fadeOut && cssClass(cssThumbnailPrefix("fadeout")), placeholder && cssClass(cssThumbnailPrefix("placeholder"))), style: {
+const Thumbnail = ({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, imageFit, style, }) => (React.createElement("button", { type: "button", className: clsx(cssClass("flex_center"), cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix("active")), fadeIn && cssClass(cssThumbnailPrefix("fadein")), fadeOut && cssClass(cssThumbnailPrefix("fadeout")), placeholder && cssClass(cssThumbnailPrefix("placeholder"))), style: {
         ...(fadeIn
             ? {
                 [cssVar(cssThumbnailPrefix("fadein_duration"))]: `${fadeIn.duration}ms`,
@@ -49,8 +49,9 @@ const Thumbnail = ({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder,
                 [cssVar(cssThumbnailPrefix("fadeout_delay"))]: `${fadeOut.delay}ms`,
             }
             : null),
+        ...style,
     }, onClick: onClick }, slide && renderThumbnail({ slide, render, rect, imageFit })));
-export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, animation, render, thumbnails, thumbnailRect, }) => {
+export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, animation, render, thumbnails, thumbnailRect, styles, }) => {
     const track = React.useRef(null);
     const [state, setState] = React.useState({
         index: startingIndex,
@@ -187,8 +188,9 @@ export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, an
                 ? { [cssVar(cssThumbnailPrefix("padding"))]: `${padding}px` }
                 : null),
             ...(gap !== defaultThumbnailsProps.gap ? { [cssVar(cssThumbnailPrefix("gap"))]: `${gap}px` } : null),
+            ...styles.thumbnailsContainer,
         } },
-        React.createElement("nav", { ref: track, className: cssClass(cssPrefix("track")) }, items.map(({ slide, index: slideIndex, placeholder }) => {
+        React.createElement("nav", { ref: track, style: styles.thumbnailsTrack, className: cssClass(cssPrefix("track")) }, items.map(({ slide, index: slideIndex, placeholder }) => {
             var _a;
             const fadeAnimationDuration = ((_a = refs.current.animationOverride) !== null && _a !== void 0 ? _a : animation.swipe) / Math.abs(offset || 1);
             const fadeIn = (offset > 0 && slideIndex > index + preload - offset && slideIndex <= index + preload) ||
@@ -210,13 +212,13 @@ export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, an
                         : -offset - (slideIndex - (index + preload))) * fadeAnimationDuration,
                 }
                 : undefined;
-            return (React.createElement(Thumbnail, { key: slideIndex, rect: thumbnailRect, slide: slide, imageFit: imageFit, render: render, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex) }));
+            return (React.createElement(Thumbnail, { key: slideIndex, rect: thumbnailRect, slide: slide, imageFit: imageFit, render: render, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex), style: styles.thumbnail }));
         }))));
 };
-export const ThumbnailsComponent = ({ thumbnails: thumbnailsProps, slides, index, carousel, animation, render, children, }) => {
+export const ThumbnailsComponent = ({ thumbnails: thumbnailsProps, slides, index, carousel, animation, render, styles, children, }) => {
     const thumbnails = { ...defaultThumbnailsProps, ...thumbnailsProps };
     const ref = React.useRef(null);
-    const track = (React.createElement(ThumbnailsTrack, { container: ref, slides: slides, thumbnails: thumbnails, carousel: carousel, animation: animation, render: render, startingIndex: index, thumbnailRect: { width: thumbnails.width, height: thumbnails.height } }));
+    const track = (React.createElement(ThumbnailsTrack, { container: ref, slides: slides, thumbnails: thumbnails, carousel: carousel, animation: animation, render: render, startingIndex: index, thumbnailRect: { width: thumbnails.width, height: thumbnails.height }, styles: styles }));
     return (React.createElement("div", { ref: ref, className: clsx(cssClass(cssPrefix()), cssClass(cssPrefix(`${thumbnails.position}`)), cssClass("fullsize")) },
         (thumbnails.position === "start" || thumbnails.position === "top") && track,
         React.createElement("div", { className: cssClass(cssPrefix("wrapper")) }, children),

package/dist/plugins/captions.css

@@ -1,27 +1,25 @@
+.yarl__slide_captions_container {
+  position: absolute;
+  left: var(--yarl__slide_captions_container_left, 0);
+  right: var(--yarl__slide_captions_container_right, 0);
+  padding: var(--yarl__slide_captions_container_padding, 16px);
+  background: var(--yarl__slide_captions_container_background, rgba(0, 0, 0, 0.5));
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+}
 .yarl__slide_title {
-  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
-  font-size: 1.25rem;
-  font-weight: 700;
+  color: var(--yarl__slide_title_color, #fff);
+  font-size: var(--yarl__slide_title_font_size, 125%);
+  font-weight: var(--yarl__slide_title_font_weight, bolder);
   max-width: calc(100% - var(--yarl__toolbar_width, 0px));
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .yarl__slide_title_container {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  padding: 16px;
-  background: rgba(0, 0, 0, 0.5);
-  -webkit-transform: translateZ(0);
-          transform: translateZ(0);
+  top: var(--yarl__slide_title_container_top, 0);
 }
 .yarl__slide_description {
-  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
-  font-size: 1rem;
-  line-height: 1.2;
-  font-weight: 500;
   overflow: hidden;
   -webkit-hyphens: auto;
           hyphens: auto;
@@ -29,14 +27,8 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--yarl__slide_description_max_lines, 3);
   text-align: var(--yarl__slide_description_text_align, start);
+  color: var(--yarl__slide_description_color, #fff);
 }
 .yarl__slide_description_container {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 16px;
-  background: rgba(0, 0, 0, 0.5);
-  -webkit-transform: translateZ(0);
-          transform: translateZ(0);
+  bottom: var(--yarl__slide_description_container_bottom, 0);
 }

package/dist/plugins/thumbnails.css

@@ -18,11 +18,10 @@
   position: relative;
 }
 .yarl__thumbnails_container {
-  color: #fff;
-  background-color: #000;
-  overflow: hidden;
-  padding: 16px;
+  background-color: var(--yarl__thumbnails_container_background_color, var(--yarl__color_backdrop, #000));
+  padding: var(--yarl__thumbnails_container_padding, 16px);
   position: relative;
+  overflow: hidden;
   z-index: 0;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -36,11 +35,11 @@
 }
 .yarl__thumbnails_top .yarl__thumbnails_container::before, .yarl__thumbnails_bottom .yarl__thumbnails_container::before {
   left: 0;
-  background: linear-gradient(to left, transparent, #000);
+  background: linear-gradient(to left, transparent, var(--yarl__color_backdrop, #000));
 }
 .yarl__thumbnails_top .yarl__thumbnails_container::after, .yarl__thumbnails_bottom .yarl__thumbnails_container::after {
   right: 0;
-  background: linear-gradient(to right, transparent, #000);
+  background: linear-gradient(to right, transparent, var(--yarl__color_backdrop, #000));
 }
 .yarl__thumbnails_top .yarl__thumbnails_container::before, .yarl__thumbnails_top .yarl__thumbnails_container::after, .yarl__thumbnails_bottom .yarl__thumbnails_container::before, .yarl__thumbnails_bottom .yarl__thumbnails_container::after {
   top: 0;
@@ -49,11 +48,11 @@
 }
 .yarl__thumbnails_start .yarl__thumbnails_container::before, .yarl__thumbnails_end .yarl__thumbnails_container::before {
   top: 0;
-  background: linear-gradient(to top, transparent, #000);
+  background: linear-gradient(to top, transparent, var(--yarl__color_backdrop, #000));
 }
 .yarl__thumbnails_start .yarl__thumbnails_container::after, .yarl__thumbnails_end .yarl__thumbnails_container::after {
   bottom: 0;
-  background: linear-gradient(to bottom, transparent, #000);
+  background: linear-gradient(to bottom, transparent, var(--yarl__color_backdrop, #000));
 }
 .yarl__thumbnails_start .yarl__thumbnails_container::before, .yarl__thumbnails_start .yarl__thumbnails_container::after, .yarl__thumbnails_end .yarl__thumbnails_container::before, .yarl__thumbnails_end .yarl__thumbnails_container::after {
   left: 0;
@@ -69,8 +68,8 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background: transparent;
-  border: var(--yarl__thumbnails_thumbnail_border, 1px) solid rgba(255, 255, 255, 0.8);
+  background: var(--yarl__thumbnails_thumbnail_background, #000);
+  border: var(--yarl__thumbnails_thumbnail_border, 1px solid var(--yarl__color_button, rgba(255, 255, 255, 0.8)));
   border-radius: var(--yarl__thumbnails_thumbnail_border_radius, 4px);
   -webkit-tap-highlight-color: transparent;
   flex-shrink: 0;
@@ -81,8 +80,11 @@
   height: var(--yarl__thumbnails_thumbnail_height, 80px);
   box-sizing: content-box;
 }
+.yarl__thumbnails_thumbnail > *:only-child {
+  flex: 1;
+}
 .yarl__thumbnails_thumbnail_active {
-  border-color: #fff;
+  border-color: var(--yarl__thumbnails_thumbnail_active_border_color, var(--yarl__color_button_active, #fff));
 }
 .yarl__thumbnails_thumbnail_fadein {
   opacity: 0;
@@ -99,16 +101,16 @@
   cursor: unset;
 }
 .yarl__thumbnails_thumbnail_icon {
-  color: rgba(255, 255, 255, 0.8);
-  -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
-          filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
+  color: var(--yarl__thumbnails_thumbnail_icon_color, var(--yarl__color_button, rgba(255, 255, 255, 0.8)));
+  -webkit-filter: var(--yarl__thumbnails_thumbnail_icon_filter, drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8)));
+          filter: var(--yarl__thumbnails_thumbnail_icon_filter, drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8)));
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate3d(-50%, -50%, 0);
           transform: translate3d(-50%, -50%, 0);
-  width: 32px;
-  height: 32px;
+  width: var(--yarl__thumbnails_thumbnail_icon_size, 32px);
+  height: var(--yarl__thumbnails_thumbnail_icon_size, 32px);
 }
 .yarl__thumbnails_contain_image {
   -o-object-fit: contain;

package/dist/styles.css

@@ -5,10 +5,10 @@
 .yarl__portal {
   position: fixed;
   inset: 0;
-  z-index: 9999;
-  overflow: hidden;
   opacity: 0;
-  transition: opacity var(--yarl__fade_animation_duration, 250ms) ease;
+  overflow: hidden;
+  z-index: var(--yarl__portal_zindex, 9999);
+  transition: opacity var(--yarl__fade_animation_duration, 250ms) var(--yarl__fade_animation_timing_function, ease);
 }
 .yarl__portal_open {
   opacity: 1;
@@ -22,8 +22,7 @@
 .yarl__container {
   position: relative;
   overflow: hidden;
-  color: #fff;
-  background-color: #000;
+  background-color: var(--yarl__container_background_color, var(--yarl__color_backdrop, #000));
   outline: 0;
 }
 .yarl__carousel {
@@ -44,9 +43,9 @@
   padding: var(--yarl__carousel_padding, 16px);
   -webkit-transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%)) * var(--yarl__direction, 1)), 0, 0);
           transform: translate3d(calc(var(--yarl__slide_offset, 0) * (100% + var(--yarl__carousel_spacing, 30%)) * var(--yarl__direction, 1)), 0, 0);
-  transition: -webkit-transform var(--yarl__swipe_animation_duration, 500ms) ease-out;
-  transition: transform var(--yarl__swipe_animation_duration, 500ms) ease-out;
-  transition: transform var(--yarl__swipe_animation_duration, 500ms) ease-out, -webkit-transform var(--yarl__swipe_animation_duration, 500ms) ease-out;
+  transition: -webkit-transform var(--yarl__swipe_animation_duration, 500ms) var(--yarl__swipe_animation_timing_function, ease-out);
+  transition: transform var(--yarl__swipe_animation_duration, 500ms) var(--yarl__swipe_animation_timing_function, ease-out);
+  transition: transform var(--yarl__swipe_animation_duration, 500ms) var(--yarl__swipe_animation_timing_function, ease-out), -webkit-transform var(--yarl__swipe_animation_duration, 500ms) var(--yarl__swipe_animation_timing_function, ease-out);
 }
 [dir=rtl] .yarl__slide {
   --yarl__direction: -1;
@@ -57,8 +56,7 @@
   transition: unset;
 }
 .yarl__slide_image {
-  -o-object-fit: contain;
-     object-fit: contain;
+  display: block;
   -moz-user-select: none;
        user-select: none;
   -webkit-user-select: none;
@@ -67,6 +65,8 @@
           transform: translate3d(0, 0, 0);
 }
 .yarl__slide_image_cover {
+  width: 100%;
+  height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
 }
@@ -82,7 +82,7 @@
   line-height: 0;
 }
 .yarl__slide_loading {
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--yarl__slide_icon_loading_color, var(--yarl__color_button, rgba(255, 255, 255, 0.8)));
   -webkit-animation: yarl__delayed_fadein 1s linear;
           animation: yarl__delayed_fadein 1s linear;
 }
@@ -123,9 +123,9 @@
           animation-delay: -1s;
 }
 .yarl__slide_error {
-  width: 48px;
-  height: 48px;
-  color: red;
+  width: var(--yarl__slide_icon_error_size, 48px);
+  height: var(--yarl__slide_icon_error_size, 48px);
+  color: var(--yarl__slide_icon_error_color, red);
 }
 @media (prefers-reduced-motion) {
   .yarl__portal, .yarl__slide {
@@ -141,47 +141,47 @@
   inset: 0 0 auto auto;
   display: flex;
   justify-content: flex-end;
-  padding: 8px;
+  padding: var(--yarl__toolbar_padding, 8px);
 }
 [dir=rtl] .yarl__toolbar {
   inset: 0 auto auto 0;
 }
 .yarl__icon {
-  width: 32px;
-  height: 32px;
+  width: var(--yarl__icon_size, 32px);
+  height: var(--yarl__icon_size, 32px);
 }
 .yarl__button {
+  cursor: pointer;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background-color: transparent;
-  cursor: pointer;
-  border: 0;
-  margin: 0;
+  background-color: var(--yarl__button_background_color, transparent);
+  border: var(--yarl__button_border, 0);
+  margin: var(--yarl__button_margin, 0);
   outline: none;
   line-height: 0;
-  padding: 8px;
-  color: rgba(255, 255, 255, 0.8);
-  -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
-          filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
+  padding: var(--yarl__button_padding, 8px);
+  color: var(--yarl__color_button, rgba(255, 255, 255, 0.8));
+  -webkit-filter: var(--yarl__button_filter, drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8)));
+          filter: var(--yarl__button_filter, drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8)));
   -webkit-tap-highlight-color: transparent;
 }
 .yarl__button:focus {
-  color: #fff;
+  color: var(--yarl__color_button_active, #fff);
 }
 .yarl__button:focus:not(:focus-visible) {
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--yarl__color_button, rgba(255, 255, 255, 0.8));
 }
 .yarl__button:focus-visible {
-  color: #fff;
+  color: var(--yarl__color_button_active, #fff);
 }
 @media (hover: hover) {
   .yarl__button:hover, .yarl__button:focus:hover, .yarl__button:focus-visible:hover {
-    color: #fff;
+    color: var(--yarl__color_button_active, #fff);
   }
 }
 .yarl__button:disabled {
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--yarl__color_button_disabled, rgba(255, 255, 255, 0.4));
   cursor: default;
 }
 .yarl__navigation_prev, .yarl__navigation_next {
@@ -189,7 +189,7 @@
   top: 50%;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
-  padding: 24px 16px;
+  padding: var(--yarl__navigation_button_padding, 24px 16px);
 }
 .yarl__navigation_prev {
   left: 0;

package/dist/types.d.ts

@@ -33,6 +33,23 @@ export interface SlideTypes {
 }
 /** Slide */
 export declare type Slide = SlideTypes[keyof SlideTypes];
+/** Supported customization slots */
+export interface SlotType {
+    /** lightbox root customization slot */
+    root: "root";
+    /** lightbox container customization slot */
+    container: "container";
+    /** lightbox button customization slot */
+    button: "button";
+    /** lightbox icon customization slot */
+    icon: "icon";
+}
+/** Customization slots */
+export declare type Slot = SlotType[keyof SlotType];
+/** Customization slots styles */
+export declare type SlotStyles = {
+    [key in Slot]?: React.CSSProperties;
+};
 /** Carousel settings */
 export interface CarouselSettings {
     /** if `true`, the lightbox carousel doesn't wrap around */
@@ -61,6 +78,8 @@ export interface ControllerSettings {
     touchAction: "none" | "pan-y";
     /** if `true`, set ARIA attributes on the controller div */
     aria: boolean;
+    /** if `true`, close the lightbox when the backdrop is clicked */
+    closeOnBackdropClick: boolean;
 }
 /** Custom render functions. */
 export interface Render {
@@ -139,6 +158,10 @@ export interface LightboxProps {
     controller: ControllerSettings;
     /** lifecycle callbacks */
     on: Callbacks;
+    /** customization styles */
+    styles: SlotStyles;
+    /** CSS class of the lightbox root element */
+    className: string;
 }
 export declare const LightboxDefaultProps: {
     open: boolean;
@@ -153,6 +176,8 @@ export declare const LightboxDefaultProps: {
     carousel: CarouselSettings;
     controller: ControllerSettings;
     on: Callbacks;
+    styles: SlotStyles;
+    className: string;
 };
 /** Custom UI labels */
 export declare type Labels = {

package/dist/types.js

@@ -22,6 +22,9 @@ export const LightboxDefaultProps = {
         focus: true,
         aria: false,
         touchAction: "none",
+        closeOnBackdropClick: false,
     },
     on: {},
+    styles: {},
+    className: "",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "1.11.1",
+    "version": "1.13.1",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",