@jobber/components 9.8.0 → 9.10.0

package/dist/DataTable/components/DataTableSortableHeader.d.ts

@@ -14,5 +14,11 @@ export interface DataTableSortableHeaderProps {
      * When undefined, the header renders as non-interactive.
      */
     readonly onSort?: () => void;
+    /**
+     * The horizontal alignment of the header content and sort icon.
+     *
+     * @default "start"
+     */
+    readonly align?: "start" | "center" | "end";
 }
 export declare function DataTableSortableHeader(props: DataTableSortableHeaderProps & React.HTMLAttributes<HTMLTableCellElement>): React.JSX.Element;

package/dist/DataTableTable-cjs.js

@@ -39,7 +39,7 @@ function SortIcon({ direction }) {
             React.createElement("path", { className: finalStyle.downArrowStyle, d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
 }
 
-var styles = {"container":"_1-DPmbxOkZ8-","tableElement":"kJeYcsgg700-","header":"_5d2OcsTVgzU-","headerCell":"LTx0tCU3F2I-","sortableButton":"WTQCrd2d8nw-","focusArea":"RipbH3rRU-E-","row":"sJQbtw-NEHU-","clickableRow":"J2p1EeT252A-","cell":"_1UpLYTK64uY-","footer":"qe-6UrAFLTo-","actions":"_2fZsLSaNPnI-","rowActions":"pElxuwpGmCI-","pagination":"thJ-CSoe0ps-","spinning":"EBpmC7cZzCs-"};
+var styles = {"container":"_1-DPmbxOkZ8-","tableElement":"kJeYcsgg700-","header":"_5d2OcsTVgzU-","headerCell":"LTx0tCU3F2I-","sortableButton":"WTQCrd2d8nw-","focusArea":"RipbH3rRU-E-","alignCenter":"w4UHxTf-Z0Q-","alignEnd":"O7R9Tt281nY-","row":"sJQbtw-NEHU-","clickableRow":"J2p1EeT252A-","cell":"_1UpLYTK64uY-","footer":"qe-6UrAFLTo-","actions":"_2fZsLSaNPnI-","rowActions":"pElxuwpGmCI-","pagination":"thJ-CSoe0ps-","spinning":"EBpmC7cZzCs-"};
 
 function DataTableActions(props) {
     return (React.createElement("div", Object.assign({}, props, { className: classnames(styles.actions, props.className) }), props.children));
@@ -94,13 +94,18 @@ function DataTableRowActions(props) {
 }
 
 function DataTableSortableHeader(props) {
-    const { children, direction, onSort } = props, rest = tslib_es6.__rest(props, ["children", "direction", "onSort"]);
+    const { children, direction, onSort, align = "start" } = props, rest = tslib_es6.__rest(props, ["children", "direction", "onSort", "align"]);
     const isSortable = direction !== undefined && onSort !== undefined;
+    const alignmentClass = {
+        start: undefined,
+        center: styles.alignCenter,
+        end: styles.alignEnd,
+    }[align];
     if (!isSortable) {
-        return React.createElement(DataTableHeaderCell, Object.assign({}, rest), children);
+        return (React.createElement(DataTableHeaderCell, Object.assign({}, rest, { className: classnames(rest.className, alignmentClass) }), children));
     }
     return (React.createElement(DataTableHeaderCell, Object.assign({}, rest),
-        React.createElement("button", { type: "button", onClick: onSort, className: styles.sortableButton },
+        React.createElement("button", { type: "button", onClick: onSort, className: classnames(styles.sortableButton, alignmentClass) },
             React.createElement("span", { className: styles.focusArea },
                 children,
                 React.createElement(SortIcon, { direction: direction })))));

package/dist/DataTableTable-es.js

@@ -37,7 +37,7 @@ function SortIcon({ direction }) {
             React__default.createElement("path", { className: finalStyle.downArrowStyle, d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
 }
 
-var styles = {"container":"_1-DPmbxOkZ8-","tableElement":"kJeYcsgg700-","header":"_5d2OcsTVgzU-","headerCell":"LTx0tCU3F2I-","sortableButton":"WTQCrd2d8nw-","focusArea":"RipbH3rRU-E-","row":"sJQbtw-NEHU-","clickableRow":"J2p1EeT252A-","cell":"_1UpLYTK64uY-","footer":"qe-6UrAFLTo-","actions":"_2fZsLSaNPnI-","rowActions":"pElxuwpGmCI-","pagination":"thJ-CSoe0ps-","spinning":"EBpmC7cZzCs-"};
+var styles = {"container":"_1-DPmbxOkZ8-","tableElement":"kJeYcsgg700-","header":"_5d2OcsTVgzU-","headerCell":"LTx0tCU3F2I-","sortableButton":"WTQCrd2d8nw-","focusArea":"RipbH3rRU-E-","alignCenter":"w4UHxTf-Z0Q-","alignEnd":"O7R9Tt281nY-","row":"sJQbtw-NEHU-","clickableRow":"J2p1EeT252A-","cell":"_1UpLYTK64uY-","footer":"qe-6UrAFLTo-","actions":"_2fZsLSaNPnI-","rowActions":"pElxuwpGmCI-","pagination":"thJ-CSoe0ps-","spinning":"EBpmC7cZzCs-"};
 
 function DataTableActions(props) {
     return (React__default.createElement("div", Object.assign({}, props, { className: classnames(styles.actions, props.className) }), props.children));
@@ -92,13 +92,18 @@ function DataTableRowActions(props) {
 }
 
 function DataTableSortableHeader(props) {
-    const { children, direction, onSort } = props, rest = __rest(props, ["children", "direction", "onSort"]);
+    const { children, direction, onSort, align = "start" } = props, rest = __rest(props, ["children", "direction", "onSort", "align"]);
     const isSortable = direction !== undefined && onSort !== undefined;
+    const alignmentClass = {
+        start: undefined,
+        center: styles.alignCenter,
+        end: styles.alignEnd,
+    }[align];
     if (!isSortable) {
-        return React__default.createElement(DataTableHeaderCell, Object.assign({}, rest), children);
+        return (React__default.createElement(DataTableHeaderCell, Object.assign({}, rest, { className: classnames(rest.className, alignmentClass) }), children));
     }
     return (React__default.createElement(DataTableHeaderCell, Object.assign({}, rest),
-        React__default.createElement("button", { type: "button", onClick: onSort, className: styles.sortableButton },
+        React__default.createElement("button", { type: "button", onClick: onSort, className: classnames(styles.sortableButton, alignmentClass) },
             React__default.createElement("span", { className: styles.focusArea },
                 children,
                 React__default.createElement(SortIcon, { direction: direction })))));

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

@@ -34,6 +34,24 @@ 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('../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

@@ -32,6 +32,24 @@ 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 '../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/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

@@ -33,6 +33,24 @@ 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('../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

@@ -31,3 +31,21 @@ 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 '../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/docs/DataTable/DataTable.md

@@ -305,6 +305,20 @@ The `direction` prop accepts:
 When both `direction` and `onSort` are provided, the header becomes interactive
 with a sort icon. When either is missing, it renders as a regular header cell.
 
+Use the `align` prop to align the header content and sort icon. This is useful
+for numerical columns, where both the values and the header should be
+end-aligned:
+
+```tsx
+<DataTable.SortableHeader
+  align="end"
+  direction={currentSort}
+  onSort={() => handleColumnSort("totalPrice")}
+>
+  Total price
+</DataTable.SortableHeader>
+```
+
 The `direction` prop represents the current sort state of the column. Your
 `onSort` callback should handle the state transitions (ascending → descending →
 equilibrium) based on your application's logic.
@@ -526,6 +540,7 @@ const table = useReactTable({
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
+| `align` | `"center" | "end" | "start"` | No | `"start"` | The horizontal alignment of the header content and sort icon. |
 | `children` | `ReactNode` | No | — | The header content to display (text, icons, etc.) |
 | `direction` | `SortDirection` | No | — | The current sort direction for this column. When undefined, the header renders as non-interactive. |
 | `onSort` | `() => void` | No | — | Callback function triggered when the sortable header is clicked. When undefined, the header renders as non-interactive. |

package/dist/docs/Gallery/Gallery.md

@@ -24,6 +24,14 @@ beside each other before wrapping subsequent thumbnails to a new line.
 Each of the thumbnails the Gallery displays are tab navigatable. A hover state
 will also slightly dim a particular thumbnail when the cursor hovers over it.
 
+## Download formats
+
+For previewable images, provide `downloadOptions` on a `GalleryFile` to show a
+Download as action in the LightBox toolbar. Each option has a `label` and `url`;
+an optional `detail` is shown alongside the label. The URL is activated only
+when the user selects that option, allowing applications to create transformed
+formats on demand.
+
 ## Mockup
 
 

package/dist/docs/LightBox/LightBox.md

@@ -15,6 +15,13 @@ The LightBox should only be used when displaying an image at a greater scale is
 the primary function of opening it. Additional content types would be better
 suited by using a dialogue or alternative method.
 
+## Download formats
+
+Images can supply `downloadOptions` with a `label`, `url`, and optional
+`detail`. When the current image has options, the toolbar shows Download as
+beside Open image in new tab. The selected URL is activated only after the user
+chooses a format.
+
 
 ## Configuration
 
@@ -39,9 +46,10 @@ components, a more robust solution should be considered.
 
 LightBox exposes its internal building blocks as subcomponents:
 `LightBox.Provider`, `LightBox.Content`, `LightBox.Background`,
-`LightBox.Overlay`, `LightBox.Toolbar`, `LightBox.Slides`,
-`LightBox.Navigation`, `LightBox.Caption`, and `LightBox.Thumbnails`. This gives
-you more control over the LightBox's appearance and behaviour.
+`LightBox.Overlay`, `LightBox.Toolbar`, `LightBox.DownloadAction`,
+`LightBox.OpenInNewTabAction`, `LightBox.Slides`, `LightBox.Navigation`,
+`LightBox.Caption`, and `LightBox.Thumbnails`. This gives you more control over
+the LightBox's appearance and behaviour.
 
 The thumbnail strip is itself composed of smaller subcomponents you can use
 directly: `LightBox.ThumbnailBar`, `LightBox.Thumbnail`, and
@@ -219,6 +227,12 @@ window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 |------|------|----------|---------|-------------|
 | `className` | `string` | No | — |  |
 
+#### LightBox.DownloadAction
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ariaLabel` | `string` | No | `"Download as"` | Accessible label for the action, also used as the tooltip message. |
+
 #### LightBox.Navigation
 
 | Prop | Type | Required | Default | Description |

package/dist/styles.css

@@ -9565,6 +9565,24 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   box-shadow: var(--shadow-focus);
 }
 
+.WTQCrd2d8nw-.w4UHxTf-Z0Q- {
+  -ms-flex-pack: center;
+      justify-content: center;
+}
+
+.WTQCrd2d8nw-.O7R9Tt281nY- {
+  -ms-flex-pack: end;
+      justify-content: flex-end;
+}
+
+.LTx0tCU3F2I-.w4UHxTf-Z0Q- {
+  text-align: center;
+}
+
+.LTx0tCU3F2I-.O7R9Tt281nY- {
+  text-align: right;
+}
+
 .sJQbtw-NEHU- {
   position: relative;
 }
@@ -11953,10 +11971,30 @@ html.atlantisLightBoxActive {
   grid-column: 2;
   justify-self: center;
 }
-._3DY1o57MHxg- {
+.OunDmtPpa9g- {
   grid-column: 1;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
+  gap: var(--space-small);
   justify-self: start;
 }
+.TPSJq-8p0vo- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: start;
+      align-items: flex-start;
+  -ms-flex-direction: column;
+      flex-direction: column;
+}
+.vZU6ZSl8QLI-,
+.vubHTSF4aYA- {
+  white-space: nowrap;
+}
+.vubHTSF4aYA- {
+  color: var(--color-text--subdued);
+  font-weight: normal;
+}
 .yYFVVScosfQ- {
   position: absolute;
   width: 100%;

package/dist/utils/meta/meta.json

@@ -195,6 +195,7 @@
     "LightBox.Background",
     "LightBox.Caption",
     "LightBox.Content",
+    "LightBox.DownloadAction",
     "LightBox.Navigation",
     "LightBox.OpenInNewTabAction",
     "LightBox.Overlay",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.8.0",
+  "version": "9.10.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -549,5 +549,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "740cda8097c2d00fd68de5ed04e3af839f3f18b9"
+  "gitHead": "1b56b3a659458dee5f3fa2893122355b9075c7d0"
 }