@jobber/components 6.16.0 → 6.16.1-add-thumbn-d61b6d7.31

package/dist/Banner-cjs.js

@@ -23,11 +23,11 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
     if (primaryAction != undefined) {
         primaryAction = Object.assign({
             size: "small",
-            type: "tertiary",
-            variation: type === "notice" ? "learning" : "work",
+            type: "primary",
+            variation: "subtle",
         }, primaryAction);
     }
-    const bannerClassNames = classnames(BannerIcon.styles.banner, {
+    const bannerClassNames = classnames(BannerIcon.styles.banner, [BannerIcon.styles[type]], {
         [BannerIcon.styles.medium]: bannerWidth >= bannerWidths.medium,
     });
     if (!visible)

package/dist/Banner-es.js

@@ -21,11 +21,11 @@ function Banner({ children, type, primaryAction, dismissible = true, icon, onDis
     if (primaryAction != undefined) {
         primaryAction = Object.assign({
             size: "small",
-            type: "tertiary",
-            variation: type === "notice" ? "learning" : "work",
+            type: "primary",
+            variation: "subtle",
         }, primaryAction);
     }
-    const bannerClassNames = classnames(styles.banner, {
+    const bannerClassNames = classnames(styles.banner, [styles[type]], {
         [styles.medium]: bannerWidth >= bannerWidths.medium,
     });
     if (!visible)

package/dist/BannerIcon-cjs.js

@@ -4,7 +4,7 @@ var React = require('react');
 var classnames = require('classnames');
 var Icon = require('./Icon-cjs.js');
 
-var styles = {"banner":"ucGelS5nNm0-","bannerChildren":"dG2vHE6g8f0-","bannerContent":"j9IeihCCYxI-","medium":"D5X29shmSr0-","bannerAction":"W0pSTO-oRmk-","closeButton":"-IYYDBmq2Q0-","iconWrapper":"BQhacg0OlMs-","spinning":"fZdByimVT5Q-"};
+var styles = {"banner":"ucGelS5nNm0-","notice":"_5VzH3Cz9ps8-","error":"_16jyB9OYJIs-","warning":"_4h-6cc8lZo8-","success":"k7T2IV0R8Q0-","bannerChildren":"dG2vHE6g8f0-","bannerContent":"j9IeihCCYxI-","medium":"D5X29shmSr0-","bannerAction":"W0pSTO-oRmk-","closeButton":"-IYYDBmq2Q0-","iconWrapper":"BQhacg0OlMs-","spinning":"fZdByimVT5Q-"};
 
 var iconStyles = {"success":"RRQ5CQj05jU-","error":"rLsOR1QiHC8-","warning":"KqPf0zuN2fg-","notice":"M3q29PUUYRM-","spinning":"ad7f3jNTQXM-"};
 

package/dist/BannerIcon-es.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 import { I as Icon } from './Icon-es.js';
 
-var styles = {"banner":"ucGelS5nNm0-","bannerChildren":"dG2vHE6g8f0-","bannerContent":"j9IeihCCYxI-","medium":"D5X29shmSr0-","bannerAction":"W0pSTO-oRmk-","closeButton":"-IYYDBmq2Q0-","iconWrapper":"BQhacg0OlMs-","spinning":"fZdByimVT5Q-"};
+var styles = {"banner":"ucGelS5nNm0-","notice":"_5VzH3Cz9ps8-","error":"_16jyB9OYJIs-","warning":"_4h-6cc8lZo8-","success":"k7T2IV0R8Q0-","bannerChildren":"dG2vHE6g8f0-","bannerContent":"j9IeihCCYxI-","medium":"D5X29shmSr0-","bannerAction":"W0pSTO-oRmk-","closeButton":"-IYYDBmq2Q0-","iconWrapper":"BQhacg0OlMs-","spinning":"fZdByimVT5Q-"};
 
 var iconStyles = {"success":"RRQ5CQj05jU-","error":"rLsOR1QiHC8-","warning":"KqPf0zuN2fg-","notice":"M3q29PUUYRM-","spinning":"ad7f3jNTQXM-"};
 

package/dist/LightBox/LightBox.d.ts

@@ -1,6 +1,7 @@
 interface PresentedImage {
     title?: string;
     caption?: string;
+    alt?: string;
     url: string;
 }
 interface RequestCloseOptions {
@@ -13,7 +14,7 @@ interface LightBoxProps {
     readonly open: boolean;
     /**
      * Images is an array of objects defining a LightBox image. This object consists of
-     * `title`, `caption` and `url`. `title` and `caption` are optional, `url` is
+     * `title`, `caption`, `alt` and `url`. `title`, `alt` and `caption` are optional, `url` is
      * required, for each image.
      */
     readonly images: PresentedImage[];

package/dist/LightBox/index.cjs

@@ -9,6 +9,7 @@ require('../useOnKeyDown-cjs.js');
 require('../useFocusTrap-cjs.js');
 require('../useIsMounted-cjs.js');
 require('../useSafeLayoutEffect-cjs.js');
+require('classnames');
 require('../useDebounce-cjs.js');
 require('../debounce-cjs.js');
 require('../_commonjsHelpers-cjs.js');
@@ -16,7 +17,6 @@ require('../isObjectLike-cjs.js');
 require('../isSymbol-cjs.js');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
-require('classnames');
 require('react-router-dom');
 require('../Icon-cjs.js');
 require('@jobber/design');

package/dist/LightBox/index.mjs

@@ -7,6 +7,7 @@ import '../useOnKeyDown-es.js';
 import '../useFocusTrap-es.js';
 import '../useIsMounted-es.js';
 import '../useSafeLayoutEffect-es.js';
+import 'classnames';
 import '../useDebounce-es.js';
 import '../debounce-es.js';
 import '../_commonjsHelpers-es.js';
@@ -14,7 +15,6 @@ import '../isObjectLike-es.js';
 import '../isSymbol-es.js';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
-import 'classnames';
 import 'react-router-dom';
 import '../Icon-es.js';
 import '@jobber/design';

package/dist/LightBox-cjs.js

@@ -7,6 +7,7 @@ var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
 var useOnKeyDown = require('./useOnKeyDown-cjs.js');
 var useFocusTrap = require('./useFocusTrap-cjs.js');
 var useIsMounted = require('./useIsMounted-cjs.js');
+var classnames = require('classnames');
 var useDebounce = require('./useDebounce-cjs.js');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 var Text = require('./Text-cjs.js');
@@ -72,7 +73,7 @@ var useMediaQuery = {};
 	} 
 } (useBreakpoints));
 
-var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","blurOverlay":"GKIdLTmvcvQ-","spinning":"_8tDoqjgfLcw-"};
+var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","title":"tZU2g-NYdIs-","blurOverlay":"GKIdLTmvcvQ-","thumbnailBar":"_3TfQLQEE3GQ-","thumbnailImage":"eBMzUOlcfQ4-","thumbnail":"eapm2zruLn8-","selected":"PeLn2u-QB0k-","spinning":"_8tDoqjgfLcw-"};
 
 /* eslint-disable max-statements */
 const swipeConfidenceThreshold = 10000;
@@ -82,26 +83,20 @@ const swipePower = (offset, velocity) => {
 const variants = {
     enter: (direction) => {
         return {
-            x: direction > 0 ? 1000 : -1000,
-            opacity: 0,
+            x: direction > 0 ? "150%" : "-150%",
         };
     },
     center: {
-        zIndex: 1,
         x: 0,
-        opacity: 1,
     },
     exit: (direction) => {
         return {
-            zIndex: 0,
-            x: direction < 0 ? 1000 : -1000,
-            opacity: 0,
+            x: direction < 0 ? "150%" : "-150%",
         };
     },
 };
 const imageTransition = {
-    x: { type: "spring", stiffness: 300, damping: 30 },
-    opacity: { duration: 0.2 },
+    x: { duration: 0.65, ease: [0.42, 0, 0, 1.03] },
 };
 // A little bit more than the transition's duration
 // We're doing this to prevent a bug from framer-motion
@@ -113,6 +108,7 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
     const [direction, setDirection] = React.useState(0);
     const [mouseIsStationary, setMouseIsStationary] = React.useState(true);
     const lightboxRef = useFocusTrap.useFocusTrap_2(open);
+    const selectedThumbnailRef = React.useRef(null);
     const debouncedHandleNext = useDebounce.useDebounce(handleMoveNext, BUTTON_DEBOUNCE_DELAY);
     const debouncedHandlePrevious = useDebounce.useDebounce(handleMovePrevious, BUTTON_DEBOUNCE_DELAY);
     const mounted = useIsMounted.useIsMounted_2();
@@ -135,6 +131,14 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
         prevOpen.current = open;
         togglePrintStyles(open);
     }
+    React.useEffect(() => {
+        var _a;
+        (_a = selectedThumbnailRef === null || selectedThumbnailRef === void 0 ? void 0 : selectedThumbnailRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "center",
+        });
+    }, [currentImageIndex]);
     const template = (React.createElement(React.Fragment, null, open && (React.createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef, onMouseMove: () => {
             if (mouseIsStationary) {
                 setMouseIsStationary(false);
@@ -153,15 +157,22 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
                     React.createElement(ButtonDismiss.ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })))),
         React.createElement("div", { className: styles.imageArea },
             React.createElement(framerMotion.AnimatePresence, { initial: false },
-                React.createElement(framerMotion.motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, initial: "enter", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
+                React.createElement(framerMotion.motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, initial: "enter", alt: images[currentImageIndex].alt ||
+                        images[currentImageIndex].title ||
+                        "", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
         images.length > 1 && (React.createElement(React.Fragment, null,
             React.createElement(PreviousButton, { onClick: debouncedHandlePrevious, hideButton: mouseIsStationary }),
             React.createElement(NextButton, { onClick: debouncedHandleNext, hideButton: mouseIsStationary }))),
         (images[currentImageIndex].title ||
             images[currentImageIndex].caption) && (React.createElement("div", { className: styles.captionWrapper },
             React.createElement(AtlantisThemeContext.AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
-                images[currentImageIndex].title && (React.createElement(Heading.Heading, { level: 4 }, images[currentImageIndex].title)),
-                images[currentImageIndex].caption && (React.createElement(Text.Text, { size: "large" }, images[currentImageIndex].caption)))))))));
+                images[currentImageIndex].title && (React.createElement("div", { className: styles.title },
+                    React.createElement(Heading.Heading, { level: 4 }, images[currentImageIndex].title))),
+                images[currentImageIndex].caption && (React.createElement(Text.Text, { size: "large" }, images[currentImageIndex].caption))))),
+        images.length > 1 && (React.createElement("div", { className: styles.thumbnailBar, "data-testid": "ATL-Thumbnail-Bar" }, images.map((image, index) => (React.createElement("div", { key: index, className: classnames(styles.thumbnail, {
+                [styles.selected]: index === currentImageIndex,
+            }), onClick: () => handleThumbnailClick(index), ref: index === currentImageIndex ? selectedThumbnailRef : null },
+            React.createElement("img", { key: index, src: image.url, alt: image.alt || image.title || "", className: styles.thumbnailImage }))))))))));
     return mounted.current
         ? ReactDOM.createPortal(template, document.body)
         : template;
@@ -185,6 +196,15 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
             handleMovePrevious();
         }
     }
+    function handleThumbnailClick(index) {
+        if (index < currentImageIndex) {
+            setDirection(-1);
+        }
+        else {
+            setDirection(1);
+        }
+        setCurrentImageIndex(index);
+    }
 }
 function PreviousButton({ onClick, hideButton }) {
     const { mediumAndUp } = useBreakpoints.useBreakpoints();

package/dist/LightBox-es.js

@@ -5,6 +5,7 @@ import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
 import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
 import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
 import { u as useIsMounted_2 } from './useIsMounted-es.js';
+import classnames from 'classnames';
 import { u as useDebounce } from './useDebounce-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 import { T as Text } from './Text-es.js';
@@ -70,7 +71,7 @@ var useMediaQuery = {};
 	} 
 } (useBreakpoints));
 
-var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","blurOverlay":"GKIdLTmvcvQ-","spinning":"_8tDoqjgfLcw-"};
+var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","title":"tZU2g-NYdIs-","blurOverlay":"GKIdLTmvcvQ-","thumbnailBar":"_3TfQLQEE3GQ-","thumbnailImage":"eBMzUOlcfQ4-","thumbnail":"eapm2zruLn8-","selected":"PeLn2u-QB0k-","spinning":"_8tDoqjgfLcw-"};
 
 /* eslint-disable max-statements */
 const swipeConfidenceThreshold = 10000;
@@ -80,26 +81,20 @@ const swipePower = (offset, velocity) => {
 const variants = {
     enter: (direction) => {
         return {
-            x: direction > 0 ? 1000 : -1000,
-            opacity: 0,
+            x: direction > 0 ? "150%" : "-150%",
         };
     },
     center: {
-        zIndex: 1,
         x: 0,
-        opacity: 1,
     },
     exit: (direction) => {
         return {
-            zIndex: 0,
-            x: direction < 0 ? 1000 : -1000,
-            opacity: 0,
+            x: direction < 0 ? "150%" : "-150%",
         };
     },
 };
 const imageTransition = {
-    x: { type: "spring", stiffness: 300, damping: 30 },
-    opacity: { duration: 0.2 },
+    x: { duration: 0.65, ease: [0.42, 0, 0, 1.03] },
 };
 // A little bit more than the transition's duration
 // We're doing this to prevent a bug from framer-motion
@@ -111,6 +106,7 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
     const [direction, setDirection] = useState(0);
     const [mouseIsStationary, setMouseIsStationary] = useState(true);
     const lightboxRef = useFocusTrap_2(open);
+    const selectedThumbnailRef = useRef(null);
     const debouncedHandleNext = useDebounce(handleMoveNext, BUTTON_DEBOUNCE_DELAY);
     const debouncedHandlePrevious = useDebounce(handleMovePrevious, BUTTON_DEBOUNCE_DELAY);
     const mounted = useIsMounted_2();
@@ -133,6 +129,14 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
         prevOpen.current = open;
         togglePrintStyles(open);
     }
+    useEffect(() => {
+        var _a;
+        (_a = selectedThumbnailRef === null || selectedThumbnailRef === void 0 ? void 0 : selectedThumbnailRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "center",
+        });
+    }, [currentImageIndex]);
     const template = (React.createElement(React.Fragment, null, open && (React.createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef, onMouseMove: () => {
             if (mouseIsStationary) {
                 setMouseIsStationary(false);
@@ -151,15 +155,22 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
                     React.createElement(ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })))),
         React.createElement("div", { className: styles.imageArea },
             React.createElement(AnimatePresence, { initial: false },
-                React.createElement(motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, initial: "enter", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
+                React.createElement(motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, initial: "enter", alt: images[currentImageIndex].alt ||
+                        images[currentImageIndex].title ||
+                        "", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
         images.length > 1 && (React.createElement(React.Fragment, null,
             React.createElement(PreviousButton, { onClick: debouncedHandlePrevious, hideButton: mouseIsStationary }),
             React.createElement(NextButton, { onClick: debouncedHandleNext, hideButton: mouseIsStationary }))),
         (images[currentImageIndex].title ||
             images[currentImageIndex].caption) && (React.createElement("div", { className: styles.captionWrapper },
             React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
-                images[currentImageIndex].title && (React.createElement(Heading, { level: 4 }, images[currentImageIndex].title)),
-                images[currentImageIndex].caption && (React.createElement(Text, { size: "large" }, images[currentImageIndex].caption)))))))));
+                images[currentImageIndex].title && (React.createElement("div", { className: styles.title },
+                    React.createElement(Heading, { level: 4 }, images[currentImageIndex].title))),
+                images[currentImageIndex].caption && (React.createElement(Text, { size: "large" }, images[currentImageIndex].caption))))),
+        images.length > 1 && (React.createElement("div", { className: styles.thumbnailBar, "data-testid": "ATL-Thumbnail-Bar" }, images.map((image, index) => (React.createElement("div", { key: index, className: classnames(styles.thumbnail, {
+                [styles.selected]: index === currentImageIndex,
+            }), onClick: () => handleThumbnailClick(index), ref: index === currentImageIndex ? selectedThumbnailRef : null },
+            React.createElement("img", { key: index, src: image.url, alt: image.alt || image.title || "", className: styles.thumbnailImage }))))))))));
     return mounted.current
         ? ReactDOM.createPortal(template, document.body)
         : template;
@@ -183,6 +194,15 @@ function LightBox({ open, images, imageIndex = 0, onRequestClose, }) {
             handleMovePrevious();
         }
     }
+    function handleThumbnailClick(index) {
+        if (index < currentImageIndex) {
+            setDirection(-1);
+        }
+        else {
+            setDirection(1);
+        }
+        setCurrentImageIndex(index);
+    }
 }
 function PreviousButton({ onClick, hideButton }) {
     const { mediumAndUp } = useBreakpoints.useBreakpoints();

package/dist/Popover/index.cjs

@@ -5,6 +5,7 @@ require('react');
 require('react-popper');
 require('../useRefocusOnActivator-cjs.js');
 require('classnames');
+require('react-dom');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');

package/dist/Popover/index.mjs

@@ -3,6 +3,7 @@ import 'react';
 import 'react-popper';
 import '../useRefocusOnActivator-es.js';
 import 'classnames';
+import 'react-dom';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
 import 'react-router-dom';

package/dist/Popover-cjs.js

@@ -4,6 +4,7 @@ var React = require('react');
 var reactPopper = require('react-popper');
 var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
 var classnames = require('classnames');
+var ReactDOM = require('react-dom');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 
 var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
@@ -20,11 +21,12 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
     const popoverClassNames = classnames(classes.popover, UNSAFE_className.container);
     const dismissButtonClassNames = classnames(classes.dismissButton, UNSAFE_className.dismissButtonContainer);
     const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
-    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
+    const popoverContent = (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
         React.createElement("div", { className: dismissButtonClassNames, style: (_b = UNSAFE_style.dismissButtonContainer) !== null && _b !== void 0 ? _b : {}, "data-testid": "popover-dismiss-button-container" },
             React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
         children,
-        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })))));
+        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })));
+    return React.createElement(React.Fragment, null, open && ReactDOM.createPortal(popoverContent, document.body));
 }
 function buildModifiers(arrowElement) {
     const modifiers = [

package/dist/Popover-es.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { usePopper } from 'react-popper';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
 import classnames from 'classnames';
+import ReactDOM from 'react-dom';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 
 var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
@@ -18,11 +19,12 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
     const popoverClassNames = classnames(classes.popover, UNSAFE_className.container);
     const dismissButtonClassNames = classnames(classes.dismissButton, UNSAFE_className.dismissButtonContainer);
     const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
-    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
+    const popoverContent = (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
         React.createElement("div", { className: dismissButtonClassNames, style: (_b = UNSAFE_style.dismissButtonContainer) !== null && _b !== void 0 ? _b : {}, "data-testid": "popover-dismiss-button-container" },
             React.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
         children,
-        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })))));
+        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })));
+    return React.createElement(React.Fragment, null, open && ReactDOM.createPortal(popoverContent, document.body));
 }
 function buildModifiers(arrowElement) {
     const modifiers = [

package/dist/styles.css

@@ -1656,35 +1656,58 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 .ucGelS5nNm0- {
+  --banner-surface: var(--color-surface);
+  --banner-textColor: var(--color-text);
   display: -ms-flexbox;
   display: flex;
   position: relative;
-  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--shadow-base);
   padding: calc(16px - 4px) 16px;
   padding: calc(var(--space-base) - var(--space-smaller)) var(--space-base);
-  border: 1px solid hsl(200, 13%, 87%);
-  border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
   color: hsl(198, 35%, 21%);
-  color: var(--color-text);
+  color: var(--banner-textColor);
   background-color: rgba(255, 255, 255, 1);
-  background-color: var(--color-surface);
+  background-color: var(--banner-surface);
   gap: 8px;
   gap: var(--space-small);
   -ms-flex-align: center;
       align-items: center;
 }
 
+._5VzH3Cz9ps8- {
+  --banner-surface: var(--color-informative--surface);
+  --banner-textColor: var(--color-informative--onSurface);
+}
+
+._16jyB9OYJIs- {
+  --banner-surface: var(--color-critical--surface);
+  --banner-textColor: var(--color-critical--onSurface);
+}
+
+._4h-6cc8lZo8- {
+  --banner-surface: var(--color-warning--surface);
+  --banner-textColor: var(--color-warning--onSurface);
+}
+
+.k7T2IV0R8Q0- {
+  --banner-surface: var(--color-success--surface);
+  --banner-textColor: var(--color-success--onSurface);
+}
+
+.dG2vHE6g8f0- > a,
+.dG2vHE6g8f0- > p {
+  color: inherit;
+}
+
 .dG2vHE6g8f0- > a {
-  color: hsl(198, 35%, 21%);
-  color: var(--color-text);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .dG2vHE6g8f0- > a:hover {
   color: hsl(197, 90%, 12%);
-  color: var(--color-blue);
+  color: var(--color-heading);
 }
 
 .j9IeihCCYxI- {
@@ -1745,8 +1768,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 .W0pSTO-oRmk- {
     width: 100%;
-    margin-top: 8px;
-    margin-top: var(--space-small);
+    padding-left: 32px;
+    padding-left: var(--space-larger);
 }
   }
 
@@ -1754,8 +1777,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 .W0pSTO-oRmk- {
     width: 100%;
-    margin-top: 8px;
-    margin-top: var(--space-small);
+    padding-left: 32px;
+    padding-left: var(--space-larger);
 }
   }
 
@@ -1764,6 +1787,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   margin: calc(var(--space-smallest) * -1) 0;
   -ms-flex-item-align: start;
       align-self: flex-start;
+  mix-blend-mode: multiply;
 }
 
 @media (max-width: 489px) {
@@ -1782,6 +1806,10 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
   }
 
+[data-theme="dark"] .-IYYDBmq2Q0- {
+  mix-blend-mode: screen;
+}
+
 .BQhacg0OlMs- {
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -7246,11 +7274,9 @@ html.atlantisLightBoxActive {
 .Q8amcRaTGf0-,
 .W9FVb24yJrk- {
   position: absolute;
-  top: 50%;
+  top: 40%;
   z-index: 1;
   z-index: var(--elevation-base);
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
 }
 .Q8amcRaTGf0- {
   right: 24px;
@@ -7310,8 +7336,6 @@ html.atlantisLightBoxActive {
   z-index: var(--elevation-modal);
   max-width: 100%;
   max-height: 100%;
-  padding: 16px;
-  padding: var(--space-base);
   background-color: hsl(0, 0%, 72%);
   background-color: var(--color-base-grey--400);
   -ms-flex-pack: center;
@@ -7319,24 +7343,14 @@ html.atlantisLightBoxActive {
   -ms-flex-direction: column;
       flex-direction: column;
 }
-@media (min-width: 768px) {
-._5p2iAj4JfoE- {
-    padding: 16px 32px;
-    padding: var(--space-base) var(--space-larger);
-}
-  }
-@media (--medium-screens-and-up) {
-._5p2iAj4JfoE- {
-    padding: 16px 32px;
-    padding: var(--space-base) var(--space-larger);
-}
-  }
 .rMK4cKdOxFw- {
   display: grid;
   z-index: 1;
   z-index: var(--elevation-base);
   margin-bottom: 48px;
   margin-bottom: var(--space-largest);
+  padding: 16px 16px 0;
+  padding: var(--space-base) var(--space-base) 0;
   font-size: 16px;
   font-size: var(--typography--fontSize-large);
   -ms-flex-align: center;
@@ -7355,26 +7369,34 @@ html.atlantisLightBoxActive {
   position: absolute;
   width: 100%;
   height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  -o-object-fit: scale-down;
+     object-fit: scale-down;
 }
 .UskuwLHR6fg- {
   position: relative;
   height: 100%;
   max-width: 100%;
-  margin-bottom: 24px;
-  margin-bottom: var(--space-large);
+  margin: 0 16px 24px;
+  margin: 0 var(--space-base) var(--space-large);
 }
 @media (min-width: 768px) {
 .UskuwLHR6fg- {
-    margin: 0 calc(48px + 16px) 24px;
-    margin: 0 calc(var(--space-largest) + var(--space-base)) var(--space-large);
+    margin: 0 
+      calc(48px + 16px + 24px)
+      24px;
+    margin: 0 /* nav button width + inner padding + outer margin */
+      calc(var(--space-largest) + var(--space-base) + var(--space-large))
+      var(--space-large);
 }
   }
 @media (--medium-screens-and-up) {
 .UskuwLHR6fg- {
-    margin: 0 calc(48px + 16px) 24px;
-    margin: 0 calc(var(--space-largest) + var(--space-base)) var(--space-large);
+    margin: 0 
+      calc(48px + 16px + 24px)
+      24px;
+    margin: 0 /* nav button width + inner padding + outer margin */
+      calc(var(--space-largest) + var(--space-base) + var(--space-large))
+      var(--space-large);
 }
   }
 .OGjhge-r-U4- {
@@ -7386,8 +7408,9 @@ html.atlantisLightBoxActive {
   max-height: 90px;
   margin: 0 auto 32px;
   margin: 0 auto var(--space-larger);
+  padding: 0 16px;
+  padding: 0 var(--space-base);
   overflow-y: auto;
-  text-align: center;
   -ms-flex-direction: column;
       flex-direction: column;
   -ms-flex-negative: 0;
@@ -7395,6 +7418,9 @@ html.atlantisLightBoxActive {
   gap: 8px;
   gap: var(--space-small);
 }
+.tZU2g-NYdIs- {
+  text-align: center;
+}
 .GKIdLTmvcvQ- {
   position: fixed;
   top: 0;
@@ -7405,6 +7431,113 @@ html.atlantisLightBoxActive {
           backdrop-filter: blur(30px);
   background-color: rgba(3, 43, 58, 0.25);
 }
+._3TfQLQEE3GQ- {
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  z-index: 1;
+  z-index: var(--elevation-base);
+  width: 100%;
+  min-height: 92px;
+  margin-bottom: 8px;
+  margin-bottom: var(--space-small);
+  padding-bottom: 8px;
+  padding-bottom: var(--space-small);
+  overflow-x: scroll;
+  -ms-flex-pack: safe center;
+      justify-content: safe center;
+  -ms-flex-align: center;
+      align-items: center;
+  gap: 8px;
+  gap: var(--space-small);
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+
+  scrollbar-width: thin;
+  scrollbar-color: hsl(198, 35%, 21%) transparent;
+  scrollbar-color: var(--color-interactive--subtle) transparent;
+}
+._3TfQLQEE3GQ-::-webkit-scrollbar {
+    height: 8px;
+  }
+._3TfQLQEE3GQ-::-webkit-scrollbar-track {
+    background: transparent;
+  }
+._3TfQLQEE3GQ-::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    border-radius: var(--radius-small);
+    background: hsl(198, 35%, 21%);
+    background: var(--color-interactive--subtle);
+  }
+.eBMzUOlcfQ4- {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  border-radius: var(--radius-small);
+  opacity: 0.8;
+  opacity: var(--opacity-overlay);
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.eapm2zruLn8- {
+  width: 64px;
+  height: 64px;
+  border-radius: 4px;
+  border-radius: var(--radius-small);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+  transition:
+    border 200ms ease-in,
+    -webkit-transform 100ms ease-in-out;
+  transition:
+    border var(--timing-base) ease-in,
+    -webkit-transform var(--timing-quick) ease-in-out;
+  transition:
+    border 200ms ease-in,
+    transform 100ms ease-in-out;
+  transition:
+    border var(--timing-base) ease-in,
+    transform var(--timing-quick) ease-in-out;
+  transition:
+    border 200ms ease-in,
+    transform 100ms ease-in-out,
+    -webkit-transform 100ms ease-in-out;
+  transition:
+    border var(--timing-base) ease-in,
+    transform var(--timing-quick) ease-in-out,
+    -webkit-transform var(--timing-quick) ease-in-out;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+.eapm2zruLn8-:hover {
+    cursor: pointer;
+  }
+.eapm2zruLn8-.PeLn2u-QB0k- {
+  margin: 0 4px;
+  margin: 0 var(--space-smaller);
+  padding: 2px;
+  padding: var(--space-smallest);
+  border: 2px solid rgba(255, 255, 255, 1);
+  border: 2px solid var(--color-surface);
+  background-color: transparent;
+  -webkit-transform: scale(1.125);
+          transform: scale(1.125);
+}
+.eapm2zruLn8-.PeLn2u-QB0k- .eBMzUOlcfQ4- {
+    opacity: 1;
+    transition: opacity 200ms linear;
+    transition: opacity var(--timing-base) linear;
+  }
+.eapm2zruLn8-:first-child,
+.eapm2zruLn8-.PeLn2u-QB0k-:first-child {
+  margin-left: 16px;
+  margin-left: var(--space-base);
+}
+.eapm2zruLn8-:last-child,
+.eapm2zruLn8-.PeLn2u-QB0k-:last-child {
+  margin-right: 16px;
+  margin-right: var(--space-base);
+}
 
 ._0X4jj5NERa4- {
   display: grid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.16.0",
+  "version": "6.16.1-add-thumbn-d61b6d7.31+d61b6d78",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -489,5 +489,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "2e308bcccf914e471f8d82a72573e90d15e59bf8"
+  "gitHead": "d61b6d78c5305a629a60d5474aeec1b01b31316b"
 }