@vectara/vectara-ui 9.16.1 → 9.17.1

package/lib/components/accordion/Accordion.js

@@ -23,5 +23,5 @@ export const VuiAccordion = (_a) => {
     const classes = classNames("vuiAccordionHeader", {
         "vuiAccordionHeader--isOpen": isOpen
     });
-    return (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({ className: classes, onClick: () => setIsOpen(!isOpen), id: buttonId, "aria-controls": contentId, "aria-expanded": isOpen }, rest, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "start", spacing: "xxs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: isOpen ? _jsx(BiChevronDown, {}) : _jsx(BiChevronRight, {}) })) })), _jsx(VuiFlexItem, Object.assign({ className: "vuiAccordionHeader__title", grow: 1 }, { children: header }))] })) })), isOpen && (_jsx("div", Object.assign({ className: "vuiAccordionBody", id: contentId, "aria-labelledby": buttonId }, { children: children })))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({ className: classes, onClick: () => setIsOpen(!isOpen), id: buttonId, "aria-controls": contentId, "aria-expanded": isOpen, type: "button" }, rest, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "start", spacing: "xxs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: isOpen ? _jsx(BiChevronDown, {}) : _jsx(BiChevronRight, {}) })) })), _jsx(VuiFlexItem, Object.assign({ className: "vuiAccordionHeader__title", grow: 1 }, { children: header }))] })) })), isOpen && (_jsx("div", Object.assign({ className: "vuiAccordionBody", id: contentId, "aria-labelledby": buttonId }, { children: children })))] }));
 };

package/lib/components/accountButton/AccountButton.js

@@ -21,7 +21,7 @@ const Button = forwardRef((_a, ref) => {
     const classes = classNames("vuiAccountButton", {
         "vuiAccountButton-isActive": isSelected
     });
-    return (_jsx("button", Object.assign({ className: classes }, rest, { ref: ref, "aria-expanded": isSelected, "aria-haspopup": "menu" }, { children: children })));
+    return (_jsx("button", Object.assign({ className: classes, type: "button" }, rest, { ref: ref, "aria-expanded": isSelected, "aria-haspopup": "menu" }, { children: children })));
 });
 export const VuiAccountButton = (_a) => {
     var { userName, email, info, options } = _a, rest = __rest(_a, ["userName", "email", "info", "options"]);

package/lib/components/app/appSideNav/AppSideNav.js

@@ -45,5 +45,5 @@ export const VuiAppSideNav = ({ size = "m", items = [], content, canCollapseSelf
                     (isCollapsed ? (_jsx(VuiIconButton, { ref: expandButtonRef, "aria-label": "Show nav", onClick: () => setIsCollapsed(false), className: "vuiAppSideNavExpandButton", color: "neutral", icon: _jsx(VuiIcon, { children: _jsx(BiChevronRight, {}) }) })) : (_jsx(_Fragment, { children: _jsx("button", Object.assign({ ref: collapseButtonRef, className: "vuiAppSideNavCollapseButton", onClick: () => {
                                 setIsTouched(true);
                                 setIsCollapsed(true);
-                            } }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [_jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIcon, { children: _jsx(BiChevronLeft, {}) }) })), _jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: "Collapse nav" }))] })) })) }))), _jsxs("div", Object.assign({ className: contentClasses, inert: isCollapsed ? "" : null }, { children: [navItems, content] }))] })) })));
+                            }, type: "button" }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [_jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIcon, { children: _jsx(BiChevronLeft, {}) }) })), _jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: "Collapse nav" }))] })) })) }))), _jsxs("div", Object.assign({ className: contentClasses, inert: isCollapsed ? "" : null }, { children: [navItems, content] }))] })) })));
 };

package/lib/components/badge/Badge.js

@@ -30,7 +30,7 @@ export const VuiBadge = (_a) => {
                         onClose === null || onClose === void 0 ? void 0 : onClose();
                     }, icon: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: _jsx(BiX, {}) })) }) })] }))) : (children);
     if (onClick) {
-        return (_jsx("button", Object.assign({ className: classes, onClick: onClick }, rest, { children: content })));
+        return (_jsx("button", Object.assign({ className: classes, onClick: onClick, type: "button" }, rest, { children: content })));
     }
     if (href) {
         return createLink(Object.assign({ className: classes, href,

package/lib/components/button/IconButton.js

@@ -34,7 +34,7 @@ export const VuiIconButton = forwardRef((_a, ref) => {
             target }, props), getTrackingProps(track)), { children: _jsx("button", Object.assign({ ref: ref }, { children: buttonIcon })) }));
     }
     else {
-        iconButton = (_jsx("button", Object.assign({}, props, { ref: ref, disabled: isDisabled }, { children: buttonIcon })));
+        iconButton = (_jsx("button", Object.assign({ type: "button" }, props, { ref: ref, disabled: isDisabled }, { children: buttonIcon })));
     }
     return _jsx(VuiTooltip, Object.assign({ tip: rest["aria-label"] }, { children: iconButton }));
 });

package/lib/components/chat/Chat.js

@@ -125,7 +125,7 @@ export const VuiChat = ({ openPrompt, chatStyle, setChatStyle, introduction, sug
     const classes = classNames("vuiChat", `vuiChat--${chatStyle}`);
     return (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({ 
                 // @ts-expect-error React doesn't support inert yet
-                inert: isOpen ? "" : null, className: buttonClasses, onClick: () => setChatStyle("condensed"), ref: buttonRef }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: _jsx(BiChat, {}) })) })), _jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx("div", Object.assign({ className: "vuiChatButton__prompt" }, { children: openPrompt })) }))] })) })), _jsxs("div", Object.assign({ 
+                inert: isOpen ? "" : null, className: buttonClasses, onClick: () => setChatStyle("condensed"), ref: buttonRef, type: "button" }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: _jsx(BiChat, {}) })) })), _jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx("div", Object.assign({ className: "vuiChatButton__prompt" }, { children: openPrompt })) }))] })) })), _jsxs("div", Object.assign({ 
                 // @ts-expect-error React doesn't support inert yet
                 inert: !isOpen ? "" : null, className: classes, onKeyDown: (e) => {
                     if (e.key === "Escape")

package/lib/components/image/Image.d.ts

@@ -7,5 +7,5 @@ type Props = {
     isFailure?: boolean;
     allowPreview?: boolean;
 };
-export declare const VuiImage: ({ src, alt, caption, className, isLoading, allowPreview, isFailure, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiImage: ({ src, alt, caption, className, isLoading, allowPreview, isFailure }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/image/Image.js

@@ -7,7 +7,7 @@ import { VuiText } from "../typography/Text";
 import { VuiImagePreview } from "./ImagePreview";
 import { VuiIcon } from "../icon/Icon";
 import { BiImage, BiError } from "react-icons/bi";
-export const VuiImage = ({ src, alt, caption, className, isLoading = false, allowPreview = true, isFailure = false, }) => {
+export const VuiImage = ({ src, alt, caption, className, isLoading = false, allowPreview = true, isFailure = false }) => {
     const [isPreviewOpen, setIsPreviewOpen] = useState(false);
     const handlePreviewClick = () => {
         if (allowPreview) {
@@ -23,5 +23,5 @@ export const VuiImage = ({ src, alt, caption, className, isLoading = false, allo
     if (isFailure) {
         return (_jsx("div", Object.assign({ className: "vuiImage__placeholder vuiImage__placeholder--error" }, { children: _jsxs(VuiFlexContainer, Object.assign({ direction: "column", alignItems: "center", justifyContent: "center", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiImage__iconWrapper" }, { children: _jsx(VuiIcon, Object.assign({ size: "m", color: "danger" }, { children: _jsx(BiError, {}) })) })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, Object.assign({ size: "s", align: "center" }, { children: _jsx("p", { children: "Missing image" }) })) }))] })) })));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(VuiFlexContainer, Object.assign({ direction: "column", spacing: "s" }, { children: _jsxs("figure", { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiImage__imageWrapper" }, { children: _jsx("img", { src: src, alt: alt, className: imageClasses, onClick: handlePreviewClick }) })) })), caption && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, Object.assign({ size: "s" }, { children: _jsx("figcaption", { children: caption }) })) })))] }) })), allowPreview && (_jsx(VuiImagePreview, { src: src, alt: alt, isOpen: isPreviewOpen, onClose: () => setIsPreviewOpen(false) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(VuiFlexContainer, Object.assign({ direction: "column", spacing: "s" }, { children: _jsxs("figure", { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiImage__imageWrapper" }, { children: _jsx("img", { src: src, alt: alt, className: imageClasses, onClick: handlePreviewClick }) })) })), caption && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, Object.assign({ size: "s" }, { children: _jsx("figcaption", { children: caption }) })) })))] }) })), allowPreview && (_jsx(VuiImagePreview, { images: [{ src, alt, caption }], isOpen: isPreviewOpen, onClose: () => setIsPreviewOpen(false) }))] }));
 };

package/lib/components/image/ImagePreview.d.ts

@@ -1,9 +1,14 @@
-type Props = {
+type ImageData = {
     src: string;
     alt?: string;
+    caption?: string;
+};
+type Props = {
+    images: ImageData[];
+    initialIndex?: number;
     isOpen: boolean;
     onClose: () => void;
     className?: string;
 };
-export declare const VuiImagePreview: ({ src, alt, isOpen, onClose, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiImagePreview: ({ images, initialIndex, isOpen, onClose, className }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/image/ImagePreview.js

@@ -1,27 +1,59 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 import { FocusOn } from "react-focus-on";
-import { BiX } from "react-icons/bi";
+import { BiX, BiChevronLeft, BiChevronRight } from "react-icons/bi";
 import { VuiIconButton } from "../button/IconButton";
 import { VuiIcon } from "../icon/Icon";
 import { VuiPortal } from "../portal/Portal";
-import { VuiScreenBlock } from "../screenBlock/ScreenBlock";
-export const VuiImagePreview = ({ src, alt, isOpen, onClose, className }) => {
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiText } from "../typography/Text";
+import { VuiTextColor } from "../typography/TextColor";
+export const VuiImagePreview = ({ images, initialIndex = 0, isOpen, onClose, className }) => {
     const returnFocusElRef = useRef(null);
-    // Return focus on unmount
+    const [currentIndex, setCurrentIndex] = useState(initialIndex);
+    const isCarousel = images.length > 1;
     useEffect(() => {
         var _a;
         if (isOpen) {
             returnFocusElRef.current = document.activeElement;
+            setCurrentIndex(initialIndex);
         }
         else {
             (_a = returnFocusElRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             returnFocusElRef.current = null;
         }
-    }, [isOpen]);
-    // Allow contents to respond to blur events before unmounting
+    }, [isOpen, initialIndex]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === "ArrowLeft") {
+                e.preventDefault();
+                handlePrevious();
+            }
+            else if (e.key === "ArrowRight") {
+                e.preventDefault();
+                handleNext();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, currentIndex]);
+    const handlePrevious = () => {
+        setCurrentIndex((prev) => (prev > 0 ? prev - 1 : images.length - 1));
+    };
+    const handleNext = () => {
+        setCurrentIndex((prev) => (prev < images.length - 1 ? prev + 1 : 0));
+    };
     const handleOnClose = () => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    return (_jsx(VuiPortal, { children: isOpen && (_jsx("div", Object.assign({ className: className }, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: handleOnClose, returnFocus: false, autoFocus: isOpen }, { children: _jsx(VuiScreenBlock, Object.assign({ onClick: handleOnClose }, { children: _jsxs("div", Object.assign({ className: "vuiImagePreview__container" }, { children: [_jsx("div", Object.assign({ className: "vuiImagePreview__closeButton" }, { children: _jsx(VuiIconButton, { "aria-label": "Close preview", onClick: handleOnClose, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "l", color: "empty" }, { children: _jsx(BiX, {}) })) }) })), _jsx("div", Object.assign({ className: "vuiImagePreview__imageContainer" }, { children: _jsx("img", { src: src, alt: alt, className: "vuiImagePreview__image", draggable: false }) }))] })) })) })) }))) }));
+    return (_jsx(VuiPortal, { children: isOpen && (_jsx("div", Object.assign({ className: className }, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: handleOnClose, returnFocus: false, autoFocus: isOpen }, { children: _jsx("figure", { children: _jsx("div", Object.assign({ className: "vuiImagePreview__container" }, { children: _jsxs("div", Object.assign({ className: "vuiImagePreview__mask", onClick: handleOnClose }, { children: [_jsx("div", Object.assign({ onClick: (e) => e.stopPropagation() }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "spaceBetween", className: "vuiImagePreview__header" }, { children: [_jsx(VuiFlexItem, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [isCarousel && (_jsxs(_Fragment, { children: [_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Previous image", onClick: (e) => {
+                                                                            e.stopPropagation();
+                                                                            handlePrevious();
+                                                                        }, color: "neutral", size: "s", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "empty" }, { children: _jsx(BiChevronLeft, {}) })) }) }), _jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Next image", onClick: (e) => {
+                                                                            e.stopPropagation();
+                                                                            handleNext();
+                                                                        }, color: "neutral", size: "s", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "empty" }, { children: _jsx(BiChevronRight, {}) })) }) })] })), _jsx(VuiFlexItem, { children: _jsx(VuiText, Object.assign({ size: "s" }, { children: _jsx(VuiTextColor, Object.assign({ color: "empty" }, { children: _jsxs("figcaption", { children: [isCarousel && `Image ${currentIndex + 1} of ${images.length}: `, images[currentIndex].caption] }) })) })) })] })) }), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiImagePreview__closeButton" }, { children: _jsx(VuiIconButton, { "aria-label": "Close preview", onClick: handleOnClose, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "l", color: "empty" }, { children: _jsx(BiX, {}) })) }) })) }))] })) })), _jsx("div", Object.assign({ className: "vuiImagePreview__imageContainer" }, { children: _jsx("img", { src: images[currentIndex].src, alt: images[currentIndex].alt, className: "vuiImagePreview__image", draggable: false }) }))] })) })) }) })) }))) }));
 };

package/lib/components/image/_index.scss

@@ -47,32 +47,43 @@
   left: 0;
   right: 0;
   bottom: 0;
-  pointer-events: none;
+  z-index: $screenBlockZIndex;
 }
 
-.vuiImagePreview__closeButton {
+.vuiImagePreview__mask {
+  height: 100%;
+  background-color: transparentize($colorFullShade, 0.4);
+}
+
+.vuiImagePreview__header {
   position: absolute;
-  top: $sizeM;
-  right: $sizeM;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: $sizeL * 2;
+  padding: $sizeS $sizeM;
+  background-color: $colorFullShade;
+}
+
+.vuiImagePreview__closeButton {
   pointer-events: all;
-  z-index: 1;
 }
 
 .vuiImagePreview__imageContainer {
   position: absolute;
-  top: 0;
+  top: $sizeL * 2;
   left: 0;
   right: 0;
-  bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: visible;
+  height: calc(100vh - #{$sizeL * 2});
 }
 
 .vuiImagePreview__image {
   max-width: calc(100vw - #{$sizeXl * 2});
-  max-height: calc(100vh - #{$sizeXl * 2});
+  max-height: calc(100vh - #{$sizeL * 4});
   width: auto;
   height: auto;
   object-fit: contain;

package/lib/components/link/Link.js

@@ -21,7 +21,7 @@ export const VuiLink = (_a) => {
     var { children, href, target, onClick, className, track, isAnchor, ref } = _a, rest = __rest(_a, ["children", "href", "target", "onClick", "className", "track", "isAnchor", "ref"]);
     const { createLink } = useVuiContext();
     if (!href) {
-        return (_jsx("button", Object.assign({ className: classNames("vuiLink", "vuiLink--button", className), onClick: onClick }, rest, { children: children })));
+        return (_jsx("button", Object.assign({ className: classNames("vuiLink", "vuiLink--button", className), onClick: onClick, type: "button" }, rest, { children: children })));
     }
     const props = Object.assign(Object.assign({}, rest), getTrackingProps(track));
     if (target === "_blank") {

package/lib/components/menu/MenuItem.js

@@ -25,7 +25,7 @@ export const VuiMenuItem = (_a) => {
         return createLink(Object.assign(Object.assign({ href }, props), { children: content }));
     }
     if (onClick) {
-        return _jsx("button", Object.assign({}, props, { children: content }));
+        return (_jsx("button", Object.assign({ type: "button" }, props, { children: content })));
     }
     return _jsx("div", Object.assign({}, props, { children: content }));
 };

package/lib/components/optionsList/OptionsListItem.js

@@ -37,5 +37,5 @@ export const VuiOptionsListItem = (_a) => {
         return createLink(Object.assign({ className: classes, href,
             target, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(value), "data-testid": testId, children: content, role: "menuitem" }, rest));
     }
-    return (_jsx("button", Object.assign({ className: classes, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(value), "data-testid": testId }, rest, { role: "menuitem" }, { children: content })));
+    return (_jsx("button", Object.assign({ className: classes, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(value), "data-testid": testId, type: "button" }, rest, { role: "menuitem" }, { children: content })));
 };

package/lib/components/summary/SummaryCitation.js

@@ -16,5 +16,5 @@ export const VuiSummaryCitation = (_a) => {
     const classes = classNames("vuiSummaryCitation", className, {
         "vuiSummaryCitation-isSelected": isSelected
     });
-    return (_jsx("button", Object.assign({ className: classes, onClick: onClick }, rest, { children: reference })));
+    return (_jsx("button", Object.assign({ className: classes, onClick: onClick, type: "button" }, rest, { children: reference })));
 };

package/lib/components/tabs/Tab.js

@@ -23,5 +23,5 @@ export const VuiTab = (_a) => {
         return createLink(Object.assign({ className: classes, href,
             onClick, children: content }, rest));
     }
-    return (_jsx("button", Object.assign({ className: classes, onClick: onClick }, rest, { children: content })));
+    return (_jsx("button", Object.assign({ className: classes, onClick: onClick, type: "button" }, rest, { children: content })));
 };

package/lib/components/topicButton/TopicButton.js

@@ -27,5 +27,5 @@ export const VuiTopicButton = (_a) => {
         return createLink(Object.assign(Object.assign({ className: classes, href,
             onClick, children: content, target }, rest), getTrackingProps(track)));
     }
-    return (_jsx("button", Object.assign({ className: classes, onClick: onClick }, rest, { children: content })));
+    return (_jsx("button", Object.assign({ className: classes, onClick: onClick, type: "button" }, rest, { children: content })));
 };

package/lib/styles/index.css

@@ -3002,32 +3002,43 @@ h2.react-datepicker__current-month {
   left: 0;
   right: 0;
   bottom: 0;
-  pointer-events: none;
+  z-index: 10;
 }
 
-.vuiImagePreview__closeButton {
+.vuiImagePreview__mask {
+  height: 100%;
+  background-color: rgba(11, 12, 14, 0.6);
+}
+
+.vuiImagePreview__header {
   position: absolute;
-  top: 16px;
-  right: 16px;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 48px;
+  padding: 12px 16px;
+  background-color: #0b0c0e;
+}
+
+.vuiImagePreview__closeButton {
   pointer-events: all;
-  z-index: 1;
 }
 
 .vuiImagePreview__imageContainer {
   position: absolute;
-  top: 0;
+  top: 48px;
   left: 0;
   right: 0;
-  bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: visible;
+  height: calc(100vh - 48px);
 }
 
 .vuiImagePreview__image {
   max-width: calc(100vw - 64px);
-  max-height: calc(100vh - 64px);
+  max-height: calc(100vh - 96px);
   width: auto;
   height: auto;
   object-fit: contain;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "9.16.1",
+  "version": "9.17.1",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",