@jobber/components 9.9.0 → 9.10.1

package/dist/FilterPicker/index.cjs

@@ -6,10 +6,8 @@ require('react');
 require('../FilterPickerContent-cjs.js');
 require('classnames');
 require('../floating-ui.react-cjs.js');
-require('../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
-require('../floating-ui.react-dom-cjs.js');
 require('../FilterPickerContentSearch-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');

package/dist/FilterPicker/index.mjs

@@ -4,10 +4,8 @@ import 'react';
 import '../FilterPickerContent-es.js';
 import 'classnames';
 import '../floating-ui.react-es.js';
-import '../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
-import '../floating-ui.react-dom-es.js';
 import '../FilterPickerContentSearch-es.js';
 import '../Icon-es.js';
 import '@jobber/design';

package/dist/FilterPickerContent-cjs.js

@@ -8,7 +8,6 @@ var FilterPickerContentList = require('./FilterPickerContentList-cjs.js');
 var FilterPickerContentHeader = require('./FilterPickerContentHeader-cjs.js');
 var FilterPickerProvider = require('./FilterPickerProvider-cjs.js');
 var jobberHooks = require('@jobber/hooks');
-var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
 var constants = require('./constants-cjs.js');
 
 var styles = {"content":"bog6pntD050-","hidden":"CLGExWp0HOc-","actions":"Tuw6ng4mYhg-","actionPadding":"uC0PW9BRcl4-","spinning":"TWLS2ZoEtnQ-"};
@@ -65,8 +64,8 @@ function useFilterPickerAccessibility(selectionCallback, filteredOptions, option
                 handleClose();
         },
         middleware: [
-            floatingUi_reactDom.offset(FILTER_PICKER_OFFSET),
-            floatingUi_reactDom.flip({ fallbackPlacements: ["top-start", "bottom-end", "top-end"] }),
+            floatingUi_react.offset(FILTER_PICKER_OFFSET),
+            floatingUi_react.flip({ fallbackPlacements: ["top-start", "bottom-end", "top-end"] }),
         ],
     });
     const dismiss = floatingUi_react.useDismiss(context);
@@ -75,10 +74,10 @@ function useFilterPickerAccessibility(selectionCallback, filteredOptions, option
     // set up and tear down autoUpdate manually to avoid unnecessary observers.
     React.useEffect(() => {
         if (open && elements.reference && elements.floating) {
-            const cleanup = floatingUi_reactDom.autoUpdate(elements.reference, elements.floating, update);
+            const cleanup = floatingUi_react.autoUpdate(elements.reference, elements.floating, update);
             return cleanup;
         }
-    }, [open, floatingUi_reactDom.autoUpdate, elements, update]);
+    }, [open, floatingUi_react.autoUpdate, elements, update]);
     React.useEffect(() => {
         focusedIndex.current = null;
         if (open) {

package/dist/FilterPickerContent-es.js

@@ -1,12 +1,11 @@
 import React__default, { useContext, useRef, useEffect, useMemo } from 'react';
 import classnames from 'classnames';
-import { a as useFloatingParentNodeId, b as useFloatingNodeId, u as useFloating, c as useDismiss, d as useInteractions, e as FloatingTree, f as FloatingNode, F as FloatingPortal } from './floating-ui.react-es.js';
+import { c as useFloatingParentNodeId, d as useFloatingNodeId, u as useFloating, o as offset, f as flip, e as useDismiss, g as useInteractions, b as autoUpdate, i as FloatingTree, j as FloatingNode, F as FloatingPortal } from './floating-ui.react-es.js';
 import { F as FilterPickerContentSearch } from './FilterPickerContentSearch-es.js';
 import { F as FilterPickerContentList } from './FilterPickerContentList-es.js';
 import { F as FilterPickerContentHeader } from './FilterPickerContentHeader-es.js';
 import { a as FilterPickerContext } from './FilterPickerProvider-es.js';
 import { useRefocusOnActivator, useFocusTrap } from '@jobber/hooks';
-import { o as offset, f as flip, b as autoUpdate } from './floating-ui.react-dom-es.js';
 import { F as FILTER_PICKER_MENU_ID } from './constants-es.js';
 
 var styles = {"content":"bog6pntD050-","hidden":"CLGExWp0HOc-","actions":"Tuw6ng4mYhg-","actionPadding":"uC0PW9BRcl4-","spinning":"TWLS2ZoEtnQ-"};

package/dist/FormatFile/index.cjs

@@ -28,9 +28,7 @@ require('../ButtonDismiss-cjs.js');
 require('../noop-cjs.js');
 require('../_commonjsHelpers-cjs.js');
 require('../floating-ui.react-cjs.js');
-require('../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
-require('../floating-ui.react-dom-cjs.js');
 require('../identity-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');

package/dist/FormatFile/index.mjs

@@ -26,9 +26,7 @@ import '../ButtonDismiss-es.js';
 import '../noop-es.js';
 import '../_commonjsHelpers-es.js';
 import '../floating-ui.react-es.js';
-import '../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
-import '../floating-ui.react-dom-es.js';
 import '../identity-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';

package/dist/Gallery/GalleryTypes.d.ts

@@ -1,5 +1,6 @@
 import type { IconNames } from "../Icon";
 import type { FileUpload } from "../InputFile";
+import type { PresentedImage } from "../LightBox";
 export type Sizes = "small" | "base" | "large" | "extraLarge";
 export type FileIconsNames = Extract<IconNames, "file" | "excel" | "pdf" | "video" | "word">;
 export interface GalleryProps {
@@ -23,7 +24,7 @@ export interface GalleryProps {
      */
     onDelete?(file: GalleryFile): void;
 }
-export interface GalleryFile extends Pick<FileUpload, "key" | "name" | "type" | "size" | "progress"> {
+export interface GalleryFile extends Pick<FileUpload, "key" | "name" | "type" | "size" | "progress">, Pick<PresentedImage, "downloadOptions"> {
     /**
      * The thumbnail url of the file.
      */

package/dist/Gallery/index.cjs

@@ -22,9 +22,7 @@ require('../Text-cjs.js');
 require('../Heading-cjs.js');
 require('../Tooltip-cjs.js');
 require('../floating-ui.react-cjs.js');
-require('../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
-require('../floating-ui.react-dom-cjs.js');
 require('../AtlantisThemeContext-cjs.js');
 require('../identity-cjs.js');
 require('../isTypedArray-cjs.js');
@@ -34,6 +32,25 @@ require('../_baseFor-cjs.js');
 require('../keysIn-cjs.js');
 require('../_isIterateeCall-cjs.js');
 require('../_setToString-cjs.js');
+require('../Menu-cjs.js');
+require('../useFormFieldFocus-cjs.js');
+require('../maxHeight-cjs.js');
+require('../useRenderElement-cjs.js');
+require('../buttonRenderAdapter-cjs.js');
+require('../OverlaySeparator-cjs.js');
+require('../Separator-cjs.js');
+require('../BottomSheet-cjs.js');
+require('../ScrollAreaViewport-cjs.js');
+require('../useScrollLock-cjs.js');
+require('../scrollEdges-cjs.js');
+require('../scrollable-cjs.js');
+require('../HelperText-cjs.js');
+require('../SelectPrimitive-cjs.js');
+require('../mergeClassName-cjs.js');
+require('../SelectGroupLabel-cjs.js');
+require('../useCompositeListItem-cjs.js');
+require('../DrawerTitle-cjs.js');
+require('../MenuSubmenuTrigger-cjs.js');
 require('../FormatFile-cjs.js');
 require('filesize');
 require('../Thumbnail-cjs.js');

package/dist/Gallery/index.d.ts

@@ -1,2 +1,3 @@
 export { Gallery } from "./Gallery";
 export type { GalleryFile, GalleryProps } from "./GalleryTypes";
+export type { LightBoxDownloadOption as GalleryDownloadOption } from "../LightBox";

package/dist/Gallery/index.mjs

@@ -20,9 +20,7 @@ import '../Text-es.js';
 import '../Heading-es.js';
 import '../Tooltip-es.js';
 import '../floating-ui.react-es.js';
-import '../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
-import '../floating-ui.react-dom-es.js';
 import '../AtlantisThemeContext-es.js';
 import '../identity-es.js';
 import '../isTypedArray-es.js';
@@ -32,6 +30,25 @@ import '../_baseFor-es.js';
 import '../keysIn-es.js';
 import '../_isIterateeCall-es.js';
 import '../_setToString-es.js';
+import '../Menu-es.js';
+import '../useFormFieldFocus-es.js';
+import '../maxHeight-es.js';
+import '../useRenderElement-es.js';
+import '../buttonRenderAdapter-es.js';
+import '../OverlaySeparator-es.js';
+import '../Separator-es.js';
+import '../BottomSheet-es.js';
+import '../ScrollAreaViewport-es.js';
+import '../useScrollLock-es.js';
+import '../scrollEdges-es.js';
+import '../scrollable-es.js';
+import '../HelperText-es.js';
+import '../SelectPrimitive-es.js';
+import '../mergeClassName-es.js';
+import '../SelectGroupLabel-es.js';
+import '../useCompositeListItem-es.js';
+import '../DrawerTitle-es.js';
+import '../MenuSubmenuTrigger-es.js';
 import '../FormatFile-es.js';
 import 'filesize';
 import '../Thumbnail-es.js';

package/dist/Gallery-cjs.js

@@ -69,7 +69,11 @@ function generateImagesArray(files) {
         let imageIndex = 0;
         for (let i = 0; i < files.length; i++) {
             if (Thumbnail.isPreviewableImage(files[i].type)) {
-                images.push({ title: files[i].name, url: yield getFileSrc(files[i]) });
+                images.push({
+                    title: files[i].name,
+                    url: yield getFileSrc(files[i]),
+                    downloadOptions: files[i].downloadOptions,
+                });
                 filesToImageIndex.push(imageIndex);
                 imageIndex++;
             }

package/dist/Gallery-es.js

@@ -67,7 +67,11 @@ function generateImagesArray(files) {
         let imageIndex = 0;
         for (let i = 0; i < files.length; i++) {
             if (isPreviewableImage(files[i].type)) {
-                images.push({ title: files[i].name, url: yield getFileSrc(files[i]) });
+                images.push({
+                    title: files[i].name,
+                    url: yield getFileSrc(files[i]),
+                    downloadOptions: files[i].downloadOptions,
+                });
                 filesToImageIndex.push(imageIndex);
                 imageIndex++;
             }

package/dist/InputDate/index.cjs

@@ -7,10 +7,8 @@ require('../AtlantisContext-cjs.js');
 require('../DatePicker-cjs.js');
 require('classnames');
 require('../floating-ui.react-cjs.js');
-require('../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
-require('../floating-ui.react-dom-cjs.js');
 require('@jobber/hooks');
 require('../Typography-cjs.js');
 require('../Button-cjs.js');

package/dist/InputDate/index.mjs

@@ -5,10 +5,8 @@ import '../AtlantisContext-es.js';
 import '../DatePicker-es.js';
 import 'classnames';
 import '../floating-ui.react-es.js';
-import '../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
-import '../floating-ui.react-dom-es.js';
 import '@jobber/hooks';
 import '../Typography-es.js';
 import '../Button-es.js';

package/dist/InputNumber/index.cjs

@@ -20,17 +20,16 @@ require('../BottomSheet-cjs.js');
 require('../buttonRenderAdapter-cjs.js');
 require('../ScrollAreaViewport-cjs.js');
 require('../useScrollLock-cjs.js');
-require('../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('../scrollEdges-cjs.js');
+require('../scrollable-cjs.js');
 require('../HelperText-cjs.js');
 require('../Text-cjs.js');
 require('../SelectPrimitive-cjs.js');
 require('../mergeClassName-cjs.js');
 require('../SelectGroupLabel-cjs.js');
 require('../useCompositeListItem-cjs.js');
-require('../floating-ui.react-dom-cjs.js');
 require('../FieldDescription-cjs.js');
 require('../useLabel-cjs.js');
 require('../NumberFieldInput-cjs.js');

package/dist/InputNumber/index.mjs

@@ -18,17 +18,16 @@ import '../BottomSheet-es.js';
 import '../buttonRenderAdapter-es.js';
 import '../ScrollAreaViewport-es.js';
 import '../useScrollLock-es.js';
-import '../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import '../scrollEdges-es.js';
+import '../scrollable-es.js';
 import '../HelperText-es.js';
 import '../Text-es.js';
 import '../SelectPrimitive-es.js';
 import '../mergeClassName-es.js';
 import '../SelectGroupLabel-es.js';
 import '../useCompositeListItem-es.js';
-import '../floating-ui.react-dom-es.js';
 import '../FieldDescription-es.js';
 import '../useLabel-es.js';
 import '../NumberFieldInput-es.js';

package/dist/LightBox/LightBox.d.ts

@@ -21,6 +21,17 @@ declare function LightBoxOverlay({ className }: {
  * and a close button. Styled for dark backgrounds.
  */
 declare function LightBoxToolbar(): React.JSX.Element;
+/**
+ * Downloads one of the consumer-provided formats for the currently visible
+ * image. Included in the default `LightBox.Toolbar` when options are supplied.
+ */
+declare function LightBoxDownloadAction({ ariaLabel, }: {
+    /**
+     * Accessible label for the action, also used as the tooltip message.
+     * @default "Download as"
+     */
+    readonly ariaLabel?: string;
+}): React.JSX.Element | null;
 /**
  * Opens the current image in a new browser tab. Included in the default
  * `LightBox.Toolbar`. Returns `null` if the current image has no `url`.
@@ -141,6 +152,7 @@ declare namespace LightBox {
     var Background: typeof LightBoxBackground;
     var Overlay: typeof LightBoxOverlay;
     var Toolbar: typeof LightBoxToolbar;
+    var DownloadAction: typeof LightBoxDownloadAction;
     var OpenInNewTabAction: typeof LightBoxOpenInNewTabAction;
     var Slides: typeof LightBoxSlides;
     var Navigation: typeof LightBoxNavigation;

package/dist/LightBox/LightBox.messages.d.ts

@@ -15,6 +15,10 @@ export declare const lightBoxMessages: {
         en: string;
         es: string;
     };
+    downloadAs: {
+        en: string;
+        es: string;
+    };
     openInNewTab: {
         en: string;
         es: string;

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

@@ -1,10 +1,28 @@
 import type { CSSProperties, ReactNode, RefObject } from "react";
 import type { PanInfo } from "framer-motion";
+export interface LightBoxDownloadOption {
+    /**
+     * The label shown in the Download as menu.
+     */
+    readonly label: string;
+    /**
+     * The URL activated when this format is downloaded.
+     */
+    readonly url: string;
+    /**
+     * Supplemental, non-interactive information shown beside the label.
+     */
+    readonly detail?: string;
+}
 export interface PresentedImage {
     title?: string;
     caption?: string;
     alt?: string;
     url: string;
+    /**
+     * Optional formats available from the Download as action.
+     */
+    downloadOptions?: LightBoxDownloadOption[];
 }
 export interface RequestCloseOptions {
     lastPosition: number;

package/dist/LightBox/index.cjs

@@ -21,9 +21,7 @@ require('../Text-cjs.js');
 require('../Heading-cjs.js');
 require('../Tooltip-cjs.js');
 require('../floating-ui.react-cjs.js');
-require('../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
-require('../floating-ui.react-dom-cjs.js');
 require('../AtlantisThemeContext-cjs.js');
 require('../identity-cjs.js');
 require('../isTypedArray-cjs.js');
@@ -33,6 +31,25 @@ require('../_baseFor-cjs.js');
 require('../keysIn-cjs.js');
 require('../_isIterateeCall-cjs.js');
 require('../_setToString-cjs.js');
+require('../Menu-cjs.js');
+require('../useFormFieldFocus-cjs.js');
+require('../maxHeight-cjs.js');
+require('../useRenderElement-cjs.js');
+require('../buttonRenderAdapter-cjs.js');
+require('../OverlaySeparator-cjs.js');
+require('../Separator-cjs.js');
+require('../BottomSheet-cjs.js');
+require('../ScrollAreaViewport-cjs.js');
+require('../useScrollLock-cjs.js');
+require('../scrollEdges-cjs.js');
+require('../scrollable-cjs.js');
+require('../HelperText-cjs.js');
+require('../SelectPrimitive-cjs.js');
+require('../mergeClassName-cjs.js');
+require('../SelectGroupLabel-cjs.js');
+require('../useCompositeListItem-cjs.js');
+require('../DrawerTitle-cjs.js');
+require('../MenuSubmenuTrigger-cjs.js');
 
 
 

package/dist/LightBox/index.d.ts

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

package/dist/LightBox/index.mjs

@@ -19,9 +19,7 @@ import '../Text-es.js';
 import '../Heading-es.js';
 import '../Tooltip-es.js';
 import '../floating-ui.react-es.js';
-import '../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
-import '../floating-ui.react-dom-es.js';
 import '../AtlantisThemeContext-es.js';
 import '../identity-es.js';
 import '../isTypedArray-es.js';
@@ -31,3 +29,22 @@ import '../_baseFor-es.js';
 import '../keysIn-es.js';
 import '../_isIterateeCall-es.js';
 import '../_setToString-es.js';
+import '../Menu-es.js';
+import '../useFormFieldFocus-es.js';
+import '../maxHeight-es.js';
+import '../useRenderElement-es.js';
+import '../buttonRenderAdapter-es.js';
+import '../OverlaySeparator-es.js';
+import '../Separator-es.js';
+import '../BottomSheet-es.js';
+import '../ScrollAreaViewport-es.js';
+import '../useScrollLock-es.js';
+import '../scrollEdges-es.js';
+import '../scrollable-es.js';
+import '../HelperText-es.js';
+import '../SelectPrimitive-es.js';
+import '../mergeClassName-es.js';
+import '../SelectGroupLabel-es.js';
+import '../useCompositeListItem-es.js';
+import '../DrawerTitle-es.js';
+import '../MenuSubmenuTrigger-es.js';

package/dist/LightBox-cjs.js

@@ -14,8 +14,9 @@ var Button = require('./Button-cjs.js');
 var Heading = require('./Heading-cjs.js');
 var Tooltip = require('./Tooltip-cjs.js');
 var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
+var Menu = require('./Menu-cjs.js');
 
-var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","leftAction":"_3DY1o57MHxg-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","title":"tZU2g-NYdIs-","blurOverlay":"GKIdLTmvcvQ-","thumbnailBar":"_3TfQLQEE3GQ-","thumbnailImage":"eBMzUOlcfQ4-","thumbnail":"eapm2zruLn8-","selected":"PeLn2u-QB0k-","spinning":"_8tDoqjgfLcw-"};
+var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","leftActions":"OunDmtPpa9g-","downloadOptionContent":"TPSJq-8p0vo-","downloadOptionLabel":"vZU6ZSl8QLI-","downloadOptionDetail":"vubHTSF4aYA-","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
@@ -188,6 +189,10 @@ const lightBoxMessages = useAtlantisI18n.defineMessages({
         en: "Next image",
         es: "Imagen siguiente",
     },
+    downloadAs: {
+        en: "Download as",
+        es: "Descargar como",
+    },
     openInNewTab: {
         en: "Open image in new tab",
         es: "Abrir imagen en nueva pestaña",
@@ -249,12 +254,36 @@ function LightBoxToolbar() {
     const { t } = useAtlantisI18n.useAtlantisI18n(lightBoxMessages);
     return (React.createElement(AtlantisThemeContext.AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
         React.createElement("div", { className: styles.toolbar },
-            React.createElement(LightBoxOpenInNewTabAction, null),
+            React.createElement("div", { className: styles.leftActions },
+                React.createElement(LightBox.DownloadAction, null),
+                React.createElement(LightBoxOpenInNewTabAction, null)),
             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: t("close"), onClick: handleRequestClose })))));
 }
+/**
+ * Downloads one of the consumer-provided formats for the currently visible
+ * image. Included in the default `LightBox.Toolbar` when options are supplied.
+ */
+function LightBoxDownloadAction({ ariaLabel, }) {
+    var _a;
+    const { images, currentImageIndex } = useLightBoxContext();
+    const { t } = useAtlantisI18n.useAtlantisI18n(lightBoxMessages);
+    const downloadOptions = (_a = images[currentImageIndex]) === null || _a === void 0 ? void 0 : _a.downloadOptions;
+    const effectiveAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t("downloadAs");
+    if (!(downloadOptions === null || downloadOptions === void 0 ? void 0 : downloadOptions.length))
+        return null;
+    return (React.createElement(Menu.Menu, null,
+        React.createElement(Tooltip.Tooltip, { message: effectiveAriaLabel },
+            React.createElement(Menu.Menu.Trigger, null,
+                React.createElement(Button.Button, { size: "small", variation: "subtle", type: "secondary", icon: "download", ariaLabel: effectiveAriaLabel }))),
+        React.createElement(Menu.Menu.Content, { style: { width: "240px" }, preferredPlacement: "bottom" }, downloadOptions.map(option => (React.createElement(Menu.Menu.Item, { key: `${option.label}-${option.url}`, textValue: [option.label, option.detail].filter(Boolean).join(" "), href: option.url },
+            React.createElement(Menu.Menu.ItemLabel, null,
+                React.createElement("span", { className: styles.downloadOptionContent },
+                    React.createElement("span", { className: styles.downloadOptionLabel }, option.label),
+                    option.detail ? (React.createElement("span", { className: styles.downloadOptionDetail }, option.detail)) : null))))))));
+}
 /**
  * Opens the current image in a new browser tab. Included in the default
  * `LightBox.Toolbar`. Returns `null` if the current image has no `url`.
@@ -266,9 +295,8 @@ function LightBoxOpenInNewTabAction({ ariaLabel, }) {
     const currentImage = images[currentImageIndex];
     if (!(currentImage === null || currentImage === void 0 ? void 0 : currentImage.url))
         return null;
-    return (React.createElement("div", { className: styles.leftAction },
-        React.createElement(Tooltip.Tooltip, { message: effectiveAriaLabel },
-            React.createElement(Button.Button, { size: "small", variation: "subtle", type: "secondary", icon: "export", ariaLabel: effectiveAriaLabel, url: currentImage.url, external: true }))));
+    return (React.createElement(Tooltip.Tooltip, { message: effectiveAriaLabel },
+        React.createElement(Button.Button, { size: "small", variation: "subtle", type: "secondary", icon: "export", ariaLabel: effectiveAriaLabel, url: currentImage.url, external: true })));
 }
 /**
  * The animated hero image with swipe-to-navigate and slide animation.
@@ -420,6 +448,7 @@ LightBox.Content = LightBoxContent;
 LightBox.Background = LightBoxBackground;
 LightBox.Overlay = LightBoxOverlay;
 LightBox.Toolbar = LightBoxToolbar;
+LightBox.DownloadAction = LightBoxDownloadAction;
 LightBox.OpenInNewTabAction = LightBoxOpenInNewTabAction;
 LightBox.Slides = LightBoxSlides;
 LightBox.Navigation = LightBoxNavigation;

package/dist/LightBox-es.js

@@ -12,8 +12,9 @@ import { B as Button } from './Button-es.js';
 import { H as Heading } from './Heading-es.js';
 import { T as Tooltip } from './Tooltip-es.js';
 import { A as AtlantisThemeContextProvider } from './AtlantisThemeContext-es.js';
+import { M as Menu } from './Menu-es.js';
 
-var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","leftAction":"_3DY1o57MHxg-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","title":"tZU2g-NYdIs-","blurOverlay":"GKIdLTmvcvQ-","thumbnailBar":"_3TfQLQEE3GQ-","thumbnailImage":"eBMzUOlcfQ4-","thumbnail":"eapm2zruLn8-","selected":"PeLn2u-QB0k-","spinning":"_8tDoqjgfLcw-"};
+var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","leftActions":"OunDmtPpa9g-","downloadOptionContent":"TPSJq-8p0vo-","downloadOptionLabel":"vZU6ZSl8QLI-","downloadOptionDetail":"vubHTSF4aYA-","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
@@ -186,6 +187,10 @@ const lightBoxMessages = defineMessages({
         en: "Next image",
         es: "Imagen siguiente",
     },
+    downloadAs: {
+        en: "Download as",
+        es: "Descargar como",
+    },
     openInNewTab: {
         en: "Open image in new tab",
         es: "Abrir imagen en nueva pestaña",
@@ -247,12 +252,36 @@ function LightBoxToolbar() {
     const { t } = useAtlantisI18n(lightBoxMessages);
     return (React__default.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
         React__default.createElement("div", { className: styles.toolbar },
-            React__default.createElement(LightBoxOpenInNewTabAction, null),
+            React__default.createElement("div", { className: styles.leftActions },
+                React__default.createElement(LightBox.DownloadAction, null),
+                React__default.createElement(LightBoxOpenInNewTabAction, null)),
             React__default.createElement("div", { className: styles.slideNumber },
                 React__default.createElement(Text, null, `${currentImageIndex + 1}/${images.length}`)),
             React__default.createElement("div", { className: styles.closeButton },
                 React__default.createElement(ButtonDismiss, { ariaLabel: t("close"), onClick: handleRequestClose })))));
 }
+/**
+ * Downloads one of the consumer-provided formats for the currently visible
+ * image. Included in the default `LightBox.Toolbar` when options are supplied.
+ */
+function LightBoxDownloadAction({ ariaLabel, }) {
+    var _a;
+    const { images, currentImageIndex } = useLightBoxContext();
+    const { t } = useAtlantisI18n(lightBoxMessages);
+    const downloadOptions = (_a = images[currentImageIndex]) === null || _a === void 0 ? void 0 : _a.downloadOptions;
+    const effectiveAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t("downloadAs");
+    if (!(downloadOptions === null || downloadOptions === void 0 ? void 0 : downloadOptions.length))
+        return null;
+    return (React__default.createElement(Menu, null,
+        React__default.createElement(Tooltip, { message: effectiveAriaLabel },
+            React__default.createElement(Menu.Trigger, null,
+                React__default.createElement(Button, { size: "small", variation: "subtle", type: "secondary", icon: "download", ariaLabel: effectiveAriaLabel }))),
+        React__default.createElement(Menu.Content, { style: { width: "240px" }, preferredPlacement: "bottom" }, downloadOptions.map(option => (React__default.createElement(Menu.Item, { key: `${option.label}-${option.url}`, textValue: [option.label, option.detail].filter(Boolean).join(" "), href: option.url },
+            React__default.createElement(Menu.ItemLabel, null,
+                React__default.createElement("span", { className: styles.downloadOptionContent },
+                    React__default.createElement("span", { className: styles.downloadOptionLabel }, option.label),
+                    option.detail ? (React__default.createElement("span", { className: styles.downloadOptionDetail }, option.detail)) : null))))))));
+}
 /**
  * Opens the current image in a new browser tab. Included in the default
  * `LightBox.Toolbar`. Returns `null` if the current image has no `url`.
@@ -264,9 +293,8 @@ function LightBoxOpenInNewTabAction({ ariaLabel, }) {
     const currentImage = images[currentImageIndex];
     if (!(currentImage === null || currentImage === void 0 ? void 0 : currentImage.url))
         return null;
-    return (React__default.createElement("div", { className: styles.leftAction },
-        React__default.createElement(Tooltip, { message: effectiveAriaLabel },
-            React__default.createElement(Button, { size: "small", variation: "subtle", type: "secondary", icon: "export", ariaLabel: effectiveAriaLabel, url: currentImage.url, external: true }))));
+    return (React__default.createElement(Tooltip, { message: effectiveAriaLabel },
+        React__default.createElement(Button, { size: "small", variation: "subtle", type: "secondary", icon: "export", ariaLabel: effectiveAriaLabel, url: currentImage.url, external: true })));
 }
 /**
  * The animated hero image with swipe-to-navigate and slide animation.
@@ -418,6 +446,7 @@ LightBox.Content = LightBoxContent;
 LightBox.Background = LightBoxBackground;
 LightBox.Overlay = LightBoxOverlay;
 LightBox.Toolbar = LightBoxToolbar;
+LightBox.DownloadAction = LightBoxDownloadAction;
 LightBox.OpenInNewTabAction = LightBoxOpenInNewTabAction;
 LightBox.Slides = LightBoxSlides;
 LightBox.Navigation = LightBoxNavigation;

package/dist/Menu/index.cjs

@@ -6,10 +6,8 @@ require('@jobber/hooks');
 require('classnames');
 require('framer-motion');
 require('../floating-ui.react-cjs.js');
-require('../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
-require('../floating-ui.react-dom-cjs.js');
 require('../useAtlantisI18n-cjs.js');
 require('../AtlantisContext-cjs.js');
 require('../Button-cjs.js');
@@ -28,6 +26,7 @@ require('../BottomSheet-cjs.js');
 require('../ScrollAreaViewport-cjs.js');
 require('../useScrollLock-cjs.js');
 require('../scrollEdges-cjs.js');
+require('../scrollable-cjs.js');
 require('../HelperText-cjs.js');
 require('../Text-cjs.js');
 require('../SelectPrimitive-cjs.js');

package/dist/Menu/index.mjs

@@ -4,10 +4,8 @@ import '@jobber/hooks';
 import 'classnames';
 import 'framer-motion';
 import '../floating-ui.react-es.js';
-import '../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
-import '../floating-ui.react-dom-es.js';
 import '../useAtlantisI18n-es.js';
 import '../AtlantisContext-es.js';
 import '../Button-es.js';
@@ -26,6 +24,7 @@ import '../BottomSheet-es.js';
 import '../ScrollAreaViewport-es.js';
 import '../useScrollLock-es.js';
 import '../scrollEdges-es.js';
+import '../scrollable-es.js';
 import '../HelperText-es.js';
 import '../Text-es.js';
 import '../SelectPrimitive-es.js';