@vectara/vectara-ui 20.0.0 → 20.2.0

package/lib/components/flex/FlexContainer.d.ts

@@ -1,31 +1,10 @@
 import { ReactNode } from "react";
-import { FlexSpacing } from "./types";
-declare const alignItemsToClassNameMap: {
-    readonly baseline: "vuiFlexContainer--alignItemsBaseline";
-    readonly center: "vuiFlexContainer--alignItemsCenter";
-    readonly end: "vuiFlexContainer--alignItemsEnd";
-    readonly start: "vuiFlexContainer--alignItemsStart";
-    readonly stretch: "vuiFlexContainer--alignItemsStretch";
-};
-declare const directionToClassNameMap: {
-    readonly column: "vuiFlexContainer--directionColumn";
-    readonly columnReverse: "vuiFlexContainer--directionColumnReverse";
-    readonly row: "vuiFlexContainer--directionRow";
-    readonly rowReverse: "vuiFlexContainer--directionRowReverse";
-};
-declare const justifyContentToClassNameMap: {
-    readonly center: "vuiFlexContainer--justifyContentCenter";
-    readonly end: "vuiFlexContainer--justifyContentEnd";
-    readonly start: "vuiFlexContainer--justifyContentStart";
-    readonly spaceAround: "vuiFlexContainer--justifyContentSpaceAround";
-    readonly spaceBetween: "vuiFlexContainer--justifyContentSpaceBetween";
-    readonly spaceEvenly: "vuiFlexContainer--justifyContentSpaceEvenly";
-};
+import { AlignItemsPosition, FlexDirection, FlexSpacing, JustifyContentPosition } from "./types";
 export type Props = {
     children?: ReactNode;
-    alignItems?: keyof typeof alignItemsToClassNameMap;
-    direction?: keyof typeof directionToClassNameMap;
-    justifyContent?: keyof typeof justifyContentToClassNameMap;
+    alignItems?: AlignItemsPosition;
+    direction?: FlexDirection;
+    justifyContent?: JustifyContentPosition;
     spacing?: FlexSpacing;
     wrap?: boolean;
     className?: string;
@@ -33,4 +12,3 @@ export type Props = {
     inline?: boolean;
 };
 export declare const VuiFlexContainer: ({ children, alignItems, direction, justifyContent, spacing, wrap, className, fullWidth, inline, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/components/flex/types.d.ts

@@ -1,2 +1,8 @@
 export declare const FLEX_SPACING: readonly ["none", "xxs", "xs", "s", "m", "l", "xl", "xxl"];
 export type FlexSpacing = (typeof FLEX_SPACING)[number];
+export declare const ALIGN_ITEMS_POSITION: readonly ["baseline", "center", "end", "start", "stretch"];
+export type AlignItemsPosition = (typeof ALIGN_ITEMS_POSITION)[number];
+export declare const FLEX_DIRECTION: readonly ["column", "columnReverse", "row", "rowReverse"];
+export type FlexDirection = (typeof FLEX_DIRECTION)[number];
+export declare const JUSTIFY_CONTENT_POSITION: readonly ["center", "end", "start", "spaceAround", "spaceBetween", "spaceEvenly"];
+export type JustifyContentPosition = (typeof JUSTIFY_CONTENT_POSITION)[number];

package/lib/components/flex/types.js

@@ -1 +1,11 @@
 export const FLEX_SPACING = ["none", "xxs", "xs", "s", "m", "l", "xl", "xxl"];
+export const ALIGN_ITEMS_POSITION = ["baseline", "center", "end", "start", "stretch"];
+export const FLEX_DIRECTION = ["column", "columnReverse", "row", "rowReverse"];
+export const JUSTIFY_CONTENT_POSITION = [
+    "center",
+    "end",
+    "start",
+    "spaceAround",
+    "spaceBetween",
+    "spaceEvenly"
+];

package/lib/components/index.d.ts

@@ -93,8 +93,9 @@ import { SPINNER_COLOR, SPINNER_SIZE } from "./spinner/types";
 import { Stat, VuiStatList } from "./statList/StatList";
 import { VuiStat } from "./stat/Stat";
 import { VuiStatus } from "./status/Status";
+import { VuiStepNavigator, StepNavigatorStep, StepNavigatorSteps } from "./stepNavigator/StepNavigator";
 import { VuiSteps, StepStatus, StepSize, Steps } from "./steps/Steps";
-import { VuiStepsVertical, StepsVertical, StepVerticalStatus } from "./stepsVertical/StepsVertical";
+import { VuiStepsVertical, StepVertical, StepsVertical, StepVerticalStatus } from "./stepsVertical/StepsVertical";
 import { SKELETON_COLOR, VuiSkeleton } from "./skeleton/Skeleton";
 import { VuiSummary, VuiSummaryCitation } from "./summary";
 import { VuiTable } from "./table/Table";
@@ -116,5 +117,5 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export type { AnchorSide, AppContentPadding, BarChartSeries, ComposedSeries, LineChartSeries, LineChartVariant, ScatterSeries, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, ComposerFileError, ComposerShortcutApi, ComposerShortcutHandler, ComposerSubmission, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, PatchColor, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabNavigatorRoute, TabSize, Tree, TreeItem, AccountButtonHandle };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CHART_PALETTE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiBarChart, VuiComposedChart, VuiLineChart, VuiPieChart, VuiScatterChart, VuiSparkline, VuiTreeMap, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPatch, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export type { AnchorSide, AppContentPadding, BarChartSeries, ComposedSeries, LineChartSeries, LineChartVariant, ScatterSeries, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, ComposerFileError, ComposerShortcutApi, ComposerShortcutHandler, ComposerSubmission, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, PatchColor, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepNavigatorStep, StepNavigatorSteps, StepStatus, StepSize, Steps, StepVertical, StepsVertical, StepVerticalStatus, TabNavigatorRoute, TabSize, Tree, TreeItem, AccountButtonHandle };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CHART_PALETTE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiBarChart, VuiComposedChart, VuiLineChart, VuiPieChart, VuiScatterChart, VuiSparkline, VuiTreeMap, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPatch, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiStepNavigator, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/index.js

@@ -85,6 +85,7 @@ import { SPINNER_COLOR, SPINNER_SIZE } from "./spinner/types";
 import { VuiStatList } from "./statList/StatList";
 import { VuiStat } from "./stat/Stat";
 import { VuiStatus } from "./status/Status";
+import { VuiStepNavigator } from "./stepNavigator/StepNavigator";
 import { VuiSteps } from "./steps/Steps";
 import { VuiStepsVertical } from "./stepsVertical/StepsVertical";
 import { SKELETON_COLOR, VuiSkeleton } from "./skeleton/Skeleton";
@@ -107,4 +108,4 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CHART_PALETTE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiBarChart, VuiComposedChart, VuiLineChart, VuiPieChart, VuiScatterChart, VuiSparkline, VuiTreeMap, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPatch, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CHART_PALETTE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiBarChart, VuiComposedChart, VuiLineChart, VuiPieChart, VuiScatterChart, VuiSparkline, VuiTreeMap, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPatch, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiStepNavigator, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/popover/Popover.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export type AnchorSide = "left" | "right" | "rightUp" | "rightDown" | "leftUp" | "leftDown" | "upLeft" | "upRight";
+import { Props as VuiTooltipProps } from "../tooltip/Tooltip";
+export type AnchorSide = "left" | "right" | "center" | "rightUp" | "rightDown" | "leftUp" | "leftDown" | "upLeft" | "upRight";
 export type Props = {
     button: React.ReactElement;
     children?: React.ReactNode;
@@ -12,5 +13,7 @@ export type Props = {
     anchorSide?: AnchorSide;
     anchorOffsetX?: number;
     anchorOffsetY?: number;
+    tooltip?: string;
+    tooltipProps?: Omit<VuiTooltipProps, "children" | "tip">;
 };
-export declare const VuiPopover: ({ button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide, anchorOffsetX, anchorOffsetY, onClickButton, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiPopover: ({ button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide, anchorOffsetX, anchorOffsetY, onClickButton, tooltip, tooltipProps, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/popover/Popover.js

@@ -15,6 +15,7 @@ import classNames from "classnames";
 import { VuiPortal } from "../portal/Portal";
 import { FocusOn } from "react-focus-on";
 import { VuiItemsInput, VuiNumberInput, VuiTextInput } from "../form";
+import { VuiTooltip } from "../tooltip/Tooltip";
 const calculatePopoverPosition = (button, anchorOptions) => {
     if (!button)
         return undefined;
@@ -56,6 +57,11 @@ const calculatePopoverPosition = (button, anchorOptions) => {
         return { bottom: `${adjustedBottom}px`, right: `${adjustedRight}px` };
     }
     const adjustedTop = bottom + offsetY + document.documentElement.scrollTop;
+    if (anchorSide === "center") {
+        // Anchor below the button, horizontally centered on it. Pairs with a
+        // translateX(-50%) in CSS to offset by half the popover's own width.
+        return { top: `${adjustedTop}px`, left: `${left + width / 2}px` };
+    }
     if (anchorSide === "left") {
         return { top: `${adjustedTop}px`, left: `${left}px` };
     }
@@ -64,7 +70,7 @@ const calculatePopoverPosition = (button, anchorOptions) => {
     return { top: `${adjustedTop}px`, right: `${adjustedRight}px` };
 };
 export const VuiPopover = (_a) => {
-    var { button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide = "right", anchorOffsetX = 2, anchorOffsetY = 2, onClickButton } = _a, rest = __rest(_a, ["button", "children", "className", "header", "isOpen", "setIsOpen", "padding", "anchorSide", "anchorOffsetX", "anchorOffsetY", "onClickButton"]);
+    var { button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide = "right", anchorOffsetX = 2, anchorOffsetY = 2, onClickButton, tooltip, tooltipProps } = _a, rest = __rest(_a, ["button", "children", "className", "header", "isOpen", "setIsOpen", "padding", "anchorSide", "anchorOffsetX", "anchorOffsetY", "onClickButton", "tooltip", "tooltipProps"]);
     const returnFocusElRef = useRef(null);
     const buttonRef = useRef(null);
     const [, setPositionMarker] = useState(0);
@@ -105,7 +111,8 @@ export const VuiPopover = (_a) => {
             setIsOpen(!isOpen);
         };
     }
-    const button = cloneElement(originalButton, buttonProps);
+    const clonedButton = cloneElement(originalButton, buttonProps);
+    const button = tooltip !== undefined ? (_jsx(VuiTooltip, Object.assign({ tip: tooltip }, tooltipProps, { children: clonedButton }))) : (clonedButton);
     useEffect(() => {
         const updatePosition = () => {
             // Force a re-render when the window resizes.
@@ -158,6 +165,7 @@ export const VuiPopover = (_a) => {
     });
     const classes = classNames("vuiPopover", className, {
         "vuiPopover-isLoaded": showTransition,
+        "vuiPopover--center": anchorSide === "center",
         "vuiPopover--rightUp": anchorSide === "rightUp",
         "vuiPopover--leftUp": anchorSide === "leftUp",
         "vuiPopover--upLeft": anchorSide === "upLeft",

package/lib/components/popover/_index.scss

@@ -27,6 +27,16 @@
   transform: translateY(-100%) !important;
 }
 
+// Centered below the button: shift left by half the popover's width while
+// preserving the vertical enter transition.
+.vuiPopover--center {
+  transform: translate(-50%, -$sizeXs);
+}
+
+.vuiPopover--center.vuiPopover-isLoaded {
+  transform: translate(-50%, 0);
+}
+
 .vuiPopover--upLeft,
 .vuiPopover--upRight {
   transform: translateY(0);

package/lib/components/status/Status.d.ts

@@ -1,6 +1,9 @@
+import { AlignItemsPosition, FlexSpacing } from "../flex/types";
 type Props = {
     status: "error" | "warning" | "success" | "info";
     label: string;
+    gap?: FlexSpacing;
+    align?: AlignItemsPosition;
 };
-export declare const VuiStatus: ({ status, label }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiStatus: ({ status, label, gap, align }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/status/Status.js

@@ -17,8 +17,8 @@ const statusToIcon = {
     success: _jsx(BiCheck, {}),
     info: _jsx(BiInfoCircle, {})
 };
-export const VuiStatus = ({ status, label }) => {
+export const VuiStatus = ({ status, label, gap = "xs", align = "center" }) => {
     const color = statusToColor[status];
     const icon = statusToIcon[status];
-    return (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiIcon, Object.assign({ color: color }, { children: icon })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: label })) }) }) }))] })));
+    return (_jsxs(VuiFlexContainer, Object.assign({ alignItems: align, spacing: gap }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiIcon, Object.assign({ color: color }, { children: icon })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: label })) }) }) }))] })));
 };

package/lib/components/stepNavigator/StepNavigator.d.ts

@@ -0,0 +1,16 @@
+import { StepVertical } from "../stepsVertical/StepsVertical";
+export type StepNavigatorStep = Omit<StepVertical, "isActive" | "onSelect">;
+export type StepNavigatorSteps = StepNavigatorStep[];
+type Props = {
+    steps: StepNavigatorSteps;
+    activeStep: number;
+    showStepCount?: boolean;
+    onStepChange?: (index: number, step: StepNavigatorStep) => void;
+    onNext?: (index: number, step: StepNavigatorStep) => void;
+    onPrevious?: (index: number, step: StepNavigatorStep) => void;
+    onSelect?: (index: number, step: StepNavigatorStep) => void;
+    className?: string;
+    "data-testid"?: string;
+};
+export declare const VuiStepNavigator: ({ steps, activeStep, showStepCount, onStepChange, onNext, onPrevious, onSelect, className, "data-testid": dataTestId }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/stepNavigator/StepNavigator.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import classNames from "classnames";
+import { BiChevronDown, BiChevronLeft, BiChevronRight } from "react-icons/bi";
+import { VuiIcon } from "../icon/Icon";
+import { VuiPopover } from "../popover/Popover";
+import { VuiStepsVertical } from "../stepsVertical/StepsVertical";
+// Center pill that displays the current step and toggles the dropdown. Receives
+// `isSelected` and `onClick` from VuiPopover, which clones it as its trigger.
+const StepNavigatorTrigger = forwardRef(({ icon, title, stepLabel, showStepCount, isSelected, onClick, "data-testid": dataTestId }, ref) => (_jsxs("button", Object.assign({ type: "button", ref: ref, onClick: onClick, "aria-haspopup": "listbox", "aria-expanded": Boolean(isSelected), "data-testid": dataTestId, className: classNames("vuiStepNavigator__trigger", {
+        "vuiStepNavigator__trigger--open": isSelected
+    }) }, { children: [_jsx(VuiIcon, Object.assign({ size: "s", color: "primary" }, { children: icon })), _jsx("span", Object.assign({ className: "vuiStepNavigator__triggerTitle" }, { children: title })), showStepCount && _jsxs("span", Object.assign({ className: "vuiStepNavigator__triggerCount" }, { children: [" \u00B7 ", stepLabel] })), _jsx("span", Object.assign({ className: classNames("vuiStepNavigator__caret", {
+                "vuiStepNavigator__caret--open": isSelected
+            }) }, { children: _jsx(VuiIcon, Object.assign({ size: "s", color: "subdued" }, { children: _jsx(BiChevronDown, {}) })) }))] }))));
+export const VuiStepNavigator = ({ steps, activeStep, showStepCount = true, onStepChange, onNext, onPrevious, onSelect, className, "data-testid": dataTestId }) => {
+    const clamp = (index) => Math.max(0, Math.min(steps.length - 1, index));
+    const [isOpen, setIsOpen] = useState(false);
+    const active = clamp(activeStep);
+    const current = steps[active];
+    const commit = (index) => {
+        const nextIndex = clamp(index);
+        setIsOpen(false);
+        onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(nextIndex, steps[nextIndex]);
+    };
+    const goPrevious = () => {
+        if (active <= 0)
+            return;
+        onPrevious === null || onPrevious === void 0 ? void 0 : onPrevious(active - 1, steps[active - 1]);
+        commit(active - 1);
+    };
+    const goNext = () => {
+        if (active >= steps.length - 1)
+            return;
+        onNext === null || onNext === void 0 ? void 0 : onNext(active + 1, steps[active + 1]);
+        commit(active + 1);
+    };
+    const select = (index) => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(index, steps[index]);
+        commit(index);
+    };
+    const prevDisabled = active <= 0;
+    const nextDisabled = active >= steps.length - 1;
+    const stepLabel = `Step ${active + 1} of ${steps.length}`;
+    const verticalSteps = steps.map((step, index) => (Object.assign(Object.assign({}, step), { isActive: index === active, onSelect: () => select(index) })));
+    const menu = (_jsx(VuiStepsVertical, { className: "vuiStepNavigator__menu", steps: verticalSteps, "data-testid": dataTestId ? `${dataTestId}-menu` : undefined }));
+    return (_jsxs("div", Object.assign({ className: classNames("vuiStepNavigator", className), "data-testid": dataTestId }, { children: [_jsx("button", Object.assign({ type: "button", className: "vuiStepNavigator__sideButton", onClick: goPrevious, disabled: prevDisabled, "aria-label": "Previous step", "data-testid": dataTestId ? `${dataTestId}-previous` : undefined }, { children: _jsx(VuiIcon, Object.assign({ size: "m" }, { children: _jsx(BiChevronLeft, {}) })) })), _jsx("div", Object.assign({ className: "vuiStepNavigator__center" }, { children: _jsx(VuiPopover, Object.assign({ className: "vuiStepNavigator__popover", anchorSide: "center", anchorOffsetY: 8, padding: "none", isOpen: isOpen, setIsOpen: setIsOpen, button: _jsx(StepNavigatorTrigger, { icon: current.icon, title: current.title, stepLabel: stepLabel, showStepCount: showStepCount, "data-testid": dataTestId ? `${dataTestId}-trigger` : undefined }) }, { children: menu })) })), _jsx("button", Object.assign({ type: "button", className: "vuiStepNavigator__sideButton", onClick: goNext, disabled: nextDisabled, "aria-label": "Next step", "data-testid": dataTestId ? `${dataTestId}-next` : undefined }, { children: _jsx(VuiIcon, Object.assign({ size: "m" }, { children: _jsx(BiChevronRight, {}) })) }))] })));
+};

package/lib/components/stepNavigator/_index.scss

@@ -0,0 +1,105 @@
+@import "../../sassUtils/index";
+
+$stepNavigatorBarHeight: 44px;
+$stepNavigatorRadius: $sizeXs; // 8px buttons & pill & rows.
+
+.vuiStepNavigator {
+  display: flex;
+  align-items: stretch;
+  gap: $sizeXs;
+  width: 100%;
+}
+
+// Square previous / next chevron buttons.
+.vuiStepNavigator__sideButton {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $stepNavigatorBarHeight;
+  padding: 0;
+  background-color: var(--vui-color-empty-shade);
+  border: 1px solid var(--vui-color-border-medium);
+  border-radius: $stepNavigatorRadius;
+  color: var(--vui-color-darker-shade);
+  cursor: pointer;
+  transition: box-shadow $transitionSpeed;
+
+  &:not(:disabled):hover {
+    box-shadow: $shadowSmallEnd;
+  }
+
+  &:disabled {
+    color: var(--vui-color-subdued-shade);
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+}
+
+.vuiStepNavigator__center {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+// Center pill: current-step display and dropdown trigger.
+.vuiStepNavigator__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: $sizeXs;
+  width: 100%;
+  min-height: $stepNavigatorBarHeight;
+  padding: $sizeS $sizeM;
+  background-color: var(--vui-color-empty-shade);
+  border: 1px solid var(--vui-color-medium-shade);
+  border-radius: $stepNavigatorRadius;
+  cursor: pointer;
+  transition: border-color $transitionSpeed, box-shadow $transitionSpeed, background-color $transitionSpeed;
+
+  &:hover {
+    box-shadow: $shadowSmallEnd;
+  }
+
+  &--open {
+    background-color: var(--vui-color-primary-lighter-shade);
+    border-color: var(--vui-color-primary-shade);
+    box-shadow: 0 0 0 3px rgba(var(--vui-color-primary-shade-rgb), 0.14);
+  }
+}
+
+.vuiStepNavigator__triggerTitle {
+  font-size: $fontSizeLarge - 3px; // 15px
+  font-weight: $fontWeightBold;
+  color: var(--vui-color-darker-shade);
+  white-space: nowrap;
+}
+
+.vuiStepNavigator__triggerCount {
+  font-size: $fontSizeStandard;
+  font-weight: $fontWeightNormal;
+  color: var(--vui-color-subdued-shade);
+  white-space: nowrap;
+}
+
+.vuiStepNavigator__caret {
+  display: flex;
+  transition: transform $transitionSpeed;
+
+  &--open {
+    transform: rotate(180deg);
+  }
+}
+
+// Dropdown panel: applied to the VuiPopover surface to round and lighten it.
+.vuiStepNavigator__popover {
+  border-radius: $sizeS;
+  border-color: var(--vui-color-border-light);
+}
+
+// Dropdown body: VuiStepsVertical, constrained to the trigger's footprint.
+.vuiStepNavigator__menu {
+  width: 340px;
+  max-width: 94vw;
+  padding: $sizeXs;
+}

package/lib/components/stepsVertical/StepsVertical.d.ts

@@ -1,13 +1,15 @@
 export type { StepVerticalStatus } from "./types";
-export type StepsVertical = {
+export type StepVertical = {
     id: string;
     title: string;
     isActive?: boolean;
     hasErrors?: boolean;
+    isComplete?: boolean;
     icon: React.ReactNode;
     onSelect: () => void;
     "data-testid"?: string;
-}[];
+};
+export type StepsVertical = StepVertical[];
 type Props = {
     steps: StepsVertical;
     className?: string;

package/lib/components/stepsVertical/StepsVertical.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { BiError } from "react-icons/bi";
+import { BiCheckCircle, BiError } from "react-icons/bi";
 import { VuiIcon } from "../icon/Icon";
 import { VuiMenuList } from "../menuList/VuiMenuList";
 import { VuiMenuListButton } from "../menuList/VuiMenuListButton";
@@ -18,8 +18,8 @@ export const VuiStepsVertical = (_a) => {
     var { steps, className, "data-testid": dataTestId } = _a, rest = __rest(_a, ["steps", "className", "data-testid"]);
     return (_jsx(VuiMenuList, Object.assign({ className: className, "data-testid": dataTestId }, rest, { children: steps.map((step) => {
             var _a;
-            const { id, title, isActive, hasErrors, icon, onSelect } = step;
+            const { id, title, isActive, hasErrors, isComplete, icon, onSelect } = step;
             const stepTestId = (_a = step["data-testid"]) !== null && _a !== void 0 ? _a : `${dataTestId}-step-${id}`;
-            return (_jsx(VuiMenuListButton, Object.assign({ isActive: isActive, onClick: () => onSelect(), "data-testid": stepTestId, icon: icon, append: hasErrors && (_jsx(VuiIcon, Object.assign({ size: "s", color: "danger", "data-testid": `${stepTestId}-error` }, { children: _jsx(BiError, {}) }))) }, { children: title }), id));
+            return (_jsx(VuiMenuListButton, Object.assign({ isActive: isActive, onClick: () => onSelect(), "data-testid": stepTestId, icon: icon, append: hasErrors ? (_jsx(VuiIcon, Object.assign({ size: "s", color: "danger", "data-testid": `${stepTestId}-error` }, { children: _jsx(BiError, {}) }))) : (isComplete && (_jsx(VuiIcon, Object.assign({ size: "s", color: "success", "data-testid": `${stepTestId}-complete` }, { children: _jsx(BiCheckCircle, {}) })))) }, { children: title }), id));
         }) })));
 };

package/lib/styles/index.css

@@ -4787,6 +4787,14 @@ h2.react-datepicker__current-month {
   transform: translateY(-100%) !important;
 }
 
+.vuiPopover--center {
+  transform: translate(-50%, -8px);
+}
+
+.vuiPopover--center.vuiPopover-isLoaded {
+  transform: translate(-50%, 0);
+}
+
 .vuiPopover--upLeft,
 .vuiPopover--upRight {
   transform: translateY(0);
@@ -5525,6 +5533,98 @@ h2.react-datepicker__current-month {
   font-size: 12px !important;
 }
 
+.vuiStepNavigator {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+  width: 100%;
+}
+
+.vuiStepNavigator__sideButton {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  padding: 0;
+  background-color: var(--vui-color-empty-shade);
+  border: 1px solid var(--vui-color-border-medium);
+  border-radius: 8px;
+  color: var(--vui-color-darker-shade);
+  cursor: pointer;
+  transition: box-shadow 0.2s;
+}
+.vuiStepNavigator__sideButton:not(:disabled):hover {
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+}
+.vuiStepNavigator__sideButton:disabled {
+  color: var(--vui-color-subdued-shade);
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.vuiStepNavigator__center {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.vuiStepNavigator__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+  min-height: 44px;
+  padding: 12px 16px;
+  background-color: var(--vui-color-empty-shade);
+  border: 1px solid var(--vui-color-medium-shade);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
+}
+.vuiStepNavigator__trigger:hover {
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+}
+.vuiStepNavigator__trigger--open {
+  background-color: var(--vui-color-primary-lighter-shade);
+  border-color: var(--vui-color-primary-shade);
+  box-shadow: 0 0 0 3px rgba(var(--vui-color-primary-shade-rgb), 0.14);
+}
+
+.vuiStepNavigator__triggerTitle {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--vui-color-darker-shade);
+  white-space: nowrap;
+}
+
+.vuiStepNavigator__triggerCount {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--vui-color-subdued-shade);
+  white-space: nowrap;
+}
+
+.vuiStepNavigator__caret {
+  display: flex;
+  transition: transform 0.2s;
+}
+.vuiStepNavigator__caret--open {
+  transform: rotate(180deg);
+}
+
+.vuiStepNavigator__popover {
+  border-radius: 12px;
+  border-color: var(--vui-color-border-light);
+}
+
+.vuiStepNavigator__menu {
+  width: 340px;
+  max-width: 94vw;
+  padding: 8px;
+}
+
 .vuiSteps {
   width: 100%;
   position: relative;

package/package.json

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

package/src/docs/pages/popover/Popover.tsx

@@ -49,6 +49,7 @@ export const Popover = () => {
         isOpen={isOpen}
         setIsOpen={() => setIsOpen(!isOpen)}
         header="Tribes"
+        tooltip="Select a tribe"
         button={
           <VuiButtonSecondary
             color="neutral"

package/src/docs/pages/status/Status.tsx

@@ -1,4 +1,4 @@
-import { VuiSpacer, VuiStatus } from "../../../lib";
+import { VuiSpacer, VuiStatus, VuiTitle } from "../../../lib";
 
 export const Status = () => {
   return (
@@ -17,7 +17,49 @@ export const Status = () => {
 
       <VuiStatus status="info" label="Info" />
 
-      <VuiSpacer size="m" />
+      <VuiSpacer size="l" />
+
+      <div style={{ width: "300px" }}>
+        <VuiTitle size="s">
+          <h3>Multiline message</h3>
+        </VuiTitle>
+
+        <VuiSpacer size="m" />
+
+        <VuiStatus
+          status="error"
+          label="A multiline error message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis placerat sem, ut mattis sapien."
+          gap="l"
+          align="start"
+        />
+
+        <VuiSpacer size="m" />
+
+        <VuiStatus
+          status="warning"
+          label="A multiline warning message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis placerat sem, ut mattis sapien."
+          gap="l"
+          align="start"
+        />
+
+        <VuiSpacer size="m" />
+
+        <VuiStatus
+          status="success"
+          label="A multiline success message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis placerat sem, ut mattis sapien."
+          gap="l"
+          align="start"
+        />
+
+        <VuiSpacer size="m" />
+
+        <VuiStatus
+          status="info"
+          label="A multiline info message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis placerat sem, ut mattis sapien."
+          gap="l"
+          align="start"
+        />
+      </div>
     </>
   );
 };

package/src/docs/pages/stepNavigator/BasicStepNavigator.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import { BiLink, BiLock, BiMessageRounded, BiPencil, BiShow, BiSolidMagicWand } from "react-icons/bi";
+import { VuiStepNavigator, StepNavigatorSteps } from "../../../lib";
+
+const steps: StepNavigatorSteps = [
+  { id: "branding", title: "Branding", icon: <BiPencil />, isComplete: true },
+  { id: "welcome", title: "Welcome", icon: <BiMessageRounded />, isComplete: true },
+  { id: "prompts", title: "Suggested prompts", icon: <BiSolidMagicWand />, hasErrors: true },
+  { id: "events", title: "Event visibility", icon: <BiShow /> },
+  { id: "access", title: "Access & SSO", icon: <BiLock /> },
+  { id: "url", title: "Public URL", icon: <BiLink /> }
+];
+
+export const BasicStepNavigator = () => {
+  const [activeStep, setActiveStep] = useState(1);
+
+  return <VuiStepNavigator steps={steps} activeStep={activeStep} onStepChange={(index) => setActiveStep(index)} />;
+};

package/src/docs/pages/stepNavigator/index.tsx

@@ -0,0 +1,12 @@
+import { BasicStepNavigator } from "./BasicStepNavigator";
+
+const BasicStepNavigatorSource = require("!!raw-loader!./BasicStepNavigator");
+
+export const stepNavigator = {
+  name: "Step navigator",
+  path: "/step-navigator",
+  example: {
+    component: <BasicStepNavigator />,
+    source: BasicStepNavigatorSource.default.toString()
+  }
+};

package/src/docs/pages.tsx

@@ -65,6 +65,7 @@ import { spinner } from "./pages/spinner";
 import { stat } from "./pages/stat";
 import { status } from "./pages/status";
 import { statList } from "./pages/statList";
+import { stepNavigator } from "./pages/stepNavigator";
 import { steps } from "./pages/steps";
 import { stepsVertical } from "./pages/stepsVertical";
 import { summary } from "./pages/summary";
@@ -111,7 +112,7 @@ export const categories: Category[] = [
   },
   {
     name: "Navigation",
-    pages: [tabs, stepsVertical, steps, chip]
+    pages: [tabs, stepsVertical, steps, stepNavigator, chip]
   },
   {
     name: "Content",