@vectara/vectara-ui 3.5.0 → 9.1.0

package/.github/CODEOWNERS

@@ -0,0 +1,3 @@
+# F/E and UX team owns entire codebase
+
+* @vectara/front-end-and-ux

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({ 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 }, 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/accordion/_index.scss

@@ -1,23 +1,35 @@
 .vuiAccordionHeader {
-  font-size: $fontSizeStandard;
-  border-bottom: 1px solid $borderColorLight;
+  font-size: $fontSizeSmall;
+  font-weight: $fontWeightBold;
+  padding: $sizeXs $sizeS;
+  background-color: $colorEmptyShade;
+  border: 1px solid $borderColorLight;
   width: 100%;
-  padding: $sizeXs 0;
-  color: $colorSubdued;
+  border-radius: $sizeXxs;
 
   &:hover {
     color: $colorPrimary;
     background-color: $colorPrimaryLighterShade;
+    border-color: transparentize($colorPrimary, 0.5);
     text-decoration: underline;
   }
 }
 
 .vuiAccordionHeader--isOpen {
   color: $colorText;
-  border-bottom-color: $borderColor;
   font-weight: $fontWeightBold;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 .vuiAccordionHeader__title {
   text-align: left;
 }
+
+.vuiAccordionBody {
+  border: 1px solid $borderColorLight;
+  border-top: none;
+  padding: $sizeM $sizeL;
+  border-bottom-right-radius: $sizeXxs;
+  border-bottom-left-radius: $sizeXxs;
+}

package/lib/components/accountButton/AccountButton.d.ts

@@ -0,0 +1,10 @@
+import { OptionListItem } from "../optionsList/types";
+import { InfoListType } from "../infoList/InfoList";
+type Props = {
+    userName: string;
+    email: string;
+    info?: InfoListType;
+    options?: OptionListItem<string>[];
+};
+export declare const VuiAccountButton: ({ userName, email, info, options, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/accountButton/AccountButton.js

@@ -0,0 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { BiExpandVertical } from "react-icons/bi";
+import classNames from "classnames";
+import { VuiIcon } from "../icon/Icon";
+import { VuiInfoMenu } from "../infoMenu/InfoMenu";
+import { VuiOptionsList } from "../optionsList/OptionsList";
+const Button = forwardRef((_a, ref) => {
+    var { children, isSelected } = _a, rest = __rest(_a, ["children", "isSelected"]);
+    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 })));
+});
+export const VuiAccountButton = (_a) => {
+    var { userName, email, info, options } = _a, rest = __rest(_a, ["userName", "email", "info", "options"]);
+    const [isOpen, setIsOpen] = useState(false);
+    const areUnique = userName && email && userName !== email;
+    const primaryLabel = areUnique ? userName : email;
+    const secondaryLabel = areUnique ? email : null;
+    const button = (_jsxs(Button, Object.assign({ isSelected: isOpen }, rest, { children: [_jsxs("div", Object.assign({ className: "vuiAccountButton__labels" }, { children: [_jsx("div", Object.assign({ className: "vuiAccountButton__primaryLabel" }, { children: primaryLabel })), secondaryLabel && _jsx("div", Object.assign({ className: "vuiAccountButton__secondaryLabel" }, { children: secondaryLabel }))] })), _jsx(VuiIcon, Object.assign({ size: "s", color: "neutral", className: "vuiAccountButton__icon" }, { children: _jsx(BiExpandVertical, {}) }))] })));
+    return (_jsx(VuiInfoMenu, Object.assign({ isOpen: isOpen, setIsOpen: setIsOpen, button: button, info: info, anchorSide: "rightUp" }, { children: options && (_jsx(VuiOptionsList, { size: "l", onSelectOption: () => {
+                setIsOpen(false);
+            }, options: options })) })));
+};

package/lib/components/accountButton/_index.scss

@@ -0,0 +1,48 @@
+.vuiAccountButton {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $sizeM;
+  border-radius: $sizeXs;
+  border: 1px solid transparent;
+  padding: $sizeXs $sizeM;
+  width: 100%;
+  max-width: 280px;
+
+  &:hover,
+  &.vuiAccountButton-isActive {
+    border-color: $colorMediumShade;
+  }
+}
+
+.vuiAccountButton__primaryLabel,
+.vuiAccountButton__secondaryLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vuiAccountButton__primaryLabel {
+  font-size: $fontSizeStandard;
+  color: $colorFullShade;
+  font-weight: $fontWeightBold;
+}
+
+.vuiAccountButton__secondaryLabel {
+  margin-top: $sizeXxs;
+  font-size: $fontSizeSmall;
+  color: $colorDarkShade;
+}
+
+.vuiAccountButton__labels {
+  text-align: left;
+  flex-shrink: 1;
+  min-width: 0; /* Important for text truncation in flex containers */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vuiAccountButton__icon {
+  flex-shrink: 0;
+}

package/lib/components/app/AppHeader.d.ts

@@ -1,7 +1,17 @@
-type Props = {
+type SidedProps = {
     left?: React.ReactNode;
     right?: React.ReactNode;
     growRight?: boolean;
+    content?: never;
 };
-export declare const VuiAppHeader: ({ left, right, growRight, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+type ContentProps = {
+    content: React.ReactNode;
+    left?: never;
+    right?: never;
+    growRight?: never;
+};
+type Props = (SidedProps | ContentProps) & {
+    className?: string;
+};
+export declare const VuiAppHeader: ({ left, right, content, growRight, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/app/AppHeader.js

@@ -10,9 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
 import { VuiFlexContainer } from "../flex/FlexContainer";
 import { VuiFlexItem } from "../flex/FlexItem";
 export const VuiAppHeader = (_a) => {
-    var { left, right, growRight } = _a, rest = __rest(_a, ["left", "right", "growRight"]);
-    return (_jsx("div", Object.assign({ className: "vuiAppHeader" }, rest, { children: _jsxs(VuiFlexContainer, Object.assign({ className: "vuiAppHeader__inner", justifyContent: "spaceBetween", alignItems: "center" }, { children: [Boolean(left) && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: left }))), Boolean(right) && (_jsx(VuiFlexItem, Object.assign({ grow: growRight ? 1 : false, shrink: false }, { children: right })))] })) })));
+    var { left, right, content, growRight, className } = _a, rest = __rest(_a, ["left", "right", "content", "growRight", "className"]);
+    const classes = classNames("vuiAppHeader", className);
+    return (_jsx("div", Object.assign({ className: classes }, rest, { children: content ? (content) : (_jsxs(VuiFlexContainer, Object.assign({ className: "vuiAppHeader__inner", justifyContent: "spaceBetween", alignItems: "center" }, { children: [Boolean(left) && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: left }))), Boolean(right) && (_jsx(VuiFlexItem, Object.assign({ grow: growRight ? 1 : false, shrink: false }, { children: right })))] }))) })));
 };

package/lib/components/app/AppLayout.d.ts

@@ -4,6 +4,7 @@ type Props = {
     navItems?: VuiAppSideNavProps["items"];
     navContent?: React.ReactNode;
     full?: boolean;
+    className?: string;
 };
 export declare const VuiAppLayout: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/app/AppLayout.js

@@ -1,10 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
 import { VuiAppSideNav } from "./appSideNav/AppSideNav";
-export const VuiAppLayout = forwardRef(({ children, navItems, navContent, full }, ref) => {
-    const classes = classNames("vuiAppLayout", {
+export const VuiAppLayout = forwardRef((_a, ref) => {
+    var { children, navItems, navContent, full, className } = _a, rest = __rest(_a, ["children", "navItems", "navContent", "full", "className"]);
+    const classes = classNames("vuiAppLayout", className, {
         "vuiAppLayout--full": full
     });
-    return (_jsxs("div", Object.assign({ className: classes }, { children: [(navItems || navContent) && (_jsx("div", Object.assign({ className: "vuiAppLayout__sideNav" }, { children: _jsx(VuiAppSideNav, { items: navItems, content: navContent }) }))), _jsx("div", Object.assign({ className: "vuiAppLayout__content", ref: ref }, { children: children }))] })));
+    return (_jsxs("div", Object.assign({ className: classes }, rest, { children: [(navItems || navContent) && (_jsx("div", Object.assign({ className: "vuiAppLayout__sideNav" }, { children: _jsx(VuiAppSideNav, { items: navItems, content: navContent }) }))), _jsx("div", Object.assign({ className: "vuiAppLayout__content", ref: ref }, { children: children }))] })));
 });

package/lib/components/app/appSideNav/AppSideNav.d.ts

@@ -1,7 +1,9 @@
 import { Sections, Tree } from "../types";
-export declare const buildSideNavItems: (items: Sections | Tree) => import("react/jsx-runtime").JSX.Element;
+export declare const buildSideNavItems: (items: Sections | Tree) => import("react/jsx-runtime").JSX.Element | null;
 export type Props = {
+    size?: "m" | "l";
+    canCollapseSelf?: boolean;
     items?: Sections | Tree;
     content?: React.ReactNode;
 };
-export declare const VuiAppSideNav: ({ items, content }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiAppSideNav: ({ size, items, content, canCollapseSelf }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -9,13 +9,15 @@ import { buildTree } from "./AppSideNavTree";
 import { VuiFlexContainer } from "../../flex/FlexContainer";
 import { VuiFlexItem } from "../../flex/FlexItem";
 export const buildSideNavItems = (items) => {
+    if (items.length === 0)
+        return null;
     return isTree(items) ? buildTree(items) : buildSections(items);
 };
 // Type guard to determine if we have a Tree or Sections.
 const isTree = (items) => {
     return items.findIndex((item) => item.path) !== -1;
 };
-export const VuiAppSideNav = ({ items = [], content }) => {
+export const VuiAppSideNav = ({ size = "m", items = [], content, canCollapseSelf = true }) => {
     const [isTouched, setIsTouched] = useState(false);
     const [isCollapsed, setIsCollapsed] = useState(false);
     const collapseButtonRef = useRef(null);
@@ -32,15 +34,16 @@ export const VuiAppSideNav = ({ items = [], content }) => {
             }
         }
     }, [isTouched, isCollapsed]);
-    const classes = classNames("vuiAppSideNav", {
+    const classes = classNames("vuiAppSideNav", `vuiAppSideNav--${size}`, {
         "vuiAppSideNav-isCollapsed": isCollapsed
     });
     const contentClasses = classNames("vuiAppSideNavContent", {
         "vuiAppSideNavContent-isHidden": isCollapsed
     });
     const navItems = buildSideNavItems(items);
-    return (_jsx("div", Object.assign({ className: classes }, { children: _jsxs("div", Object.assign({ className: "vuiAppSideNav__inner" }, { children: [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] }))] })) })));
+    return (_jsx("div", Object.assign({ className: classes }, { children: _jsxs("div", Object.assign({ className: "vuiAppSideNav__inner" }, { children: [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] }))] })) })));
 };

package/lib/components/app/appSideNav/AppSideNavLink.d.ts

@@ -1,4 +1,4 @@
 import { TreeItem } from "../types";
-type Props = Pick<TreeItem, "name" | "path" | "iconBefore" | "iconAfter" | "isActive" | "className">;
-export declare const VuiAppSideNavLink: ({ path, name, iconBefore, iconAfter, isActive, className, ...rest }: Props) => JSX.Element;
-export {};
+export declare const VuiAppSideNavLink: import("react").ForwardRefExoticComponent<Pick<TreeItem, "className" | "name" | "path" | "isSelected" | "iconBefore" | "iconAfter"> & {
+    onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
+} & import("react").RefAttributes<HTMLAnchorElement | null>>;

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

@@ -15,12 +15,13 @@ import { VuiFlexContainer } from "../../flex/FlexContainer";
 import { VuiFlexItem } from "../../flex/FlexItem";
 import { VuiIcon } from "../../icon/Icon";
 import { useVuiContext } from "../../context/Context";
-export const VuiAppSideNavLink = (_a) => {
-    var { path, name, iconBefore, iconAfter, isActive, className } = _a, rest = __rest(_a, ["path", "name", "iconBefore", "iconAfter", "isActive", "className"]);
+import { forwardRef } from "react";
+export const VuiAppSideNavLink = forwardRef((_a, ref) => {
+    var { path, onClick, name, iconBefore, iconAfter, isSelected, className } = _a, rest = __rest(_a, ["path", "onClick", "name", "iconBefore", "iconAfter", "isSelected", "className"]);
     const { createLink, getPath } = useVuiContext();
     const classes = classNames("vuiAppSideNavLink", {
-        "vuiAppSideNavLink--active": isActive !== null && isActive !== void 0 ? isActive : path === getPath()
+        "vuiAppSideNavLink--active": isSelected !== null && isSelected !== void 0 ? isSelected : path === getPath()
     }, className);
     const content = iconBefore || iconAfter ? (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [iconBefore && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: iconBefore })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: name })), iconAfter && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: iconAfter })) })))] }))) : (name);
-    return createLink(Object.assign({ className: classes, children: content, href: path !== null && path !== void 0 ? path : "/" }, rest));
-};
+    return createLink(Object.assign({ ref, className: classes, children: content, href: path, onClick }, rest));
+});

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

@@ -20,19 +20,19 @@ export const buildTree = (items) => {
 };
 const buildTreeItems = (items) => {
     return items.map((_a) => {
-        var { name, pages, path, iconBefore, iconAfter, isActive } = _a, rest = __rest(_a, ["name", "pages", "path", "iconBefore", "iconAfter", "isActive"]);
+        var { name, pages, path, iconBefore, iconAfter, isSelected } = _a, rest = __rest(_a, ["name", "pages", "path", "iconBefore", "iconAfter", "isSelected"]);
         if (path) {
             if (pages) {
                 const childPages = buildTreeItems(pages);
-                return (_jsx(AppSideNavTreeSection, Object.assign({ path: path, name: name, iconBefore: iconBefore, iconAfter: iconAfter, isActive: isActive }, rest, { children: childPages }), path !== null && path !== void 0 ? path : name));
+                return (_jsx(AppSideNavTreeSection, Object.assign({ path: path, name: name, iconBefore: iconBefore, iconAfter: iconAfter, isSelected: isSelected }, rest, { children: childPages }), path !== null && path !== void 0 ? path : name));
             }
-            return (_jsx(VuiAppSideNavLink, Object.assign({ path: path, name: name, iconBefore: iconBefore, iconAfter: iconAfter, isActive: isActive }, rest), path !== null && path !== void 0 ? path : name));
+            return (_jsx(VuiAppSideNavLink, Object.assign({ path: path, name: name, iconBefore: iconBefore, iconAfter: iconAfter, isSelected: isSelected }, rest), path !== null && path !== void 0 ? path : name));
         }
         return (_jsx("div", Object.assign({ className: "vuiAppSideNavTreeSection__subTitle" }, rest, { children: name }), name));
     });
 };
 const AppSideNavTreeSection = (_a) => {
-    var { name, path, children, iconBefore, iconAfter, isActive } = _a, rest = __rest(_a, ["name", "path", "children", "iconBefore", "iconAfter", "isActive"]);
+    var { name, path, children, iconBefore, iconAfter, isSelected } = _a, rest = __rest(_a, ["name", "path", "children", "iconBefore", "iconAfter", "isSelected"]);
     const [isOpen, setIsOpen] = useState(true);
-    return (_jsxs("div", Object.assign({ className: "vuiAppSideNavTreeSection" }, { children: [_jsx(VuiAppSideNavLink, Object.assign({ path: path !== null && path !== void 0 ? path : "/", name: name, iconBefore: iconBefore, iconAfter: iconAfter, isActive: isActive }, rest)), _jsx(VuiIconButton, { "aria-label": isOpen ? "Hide section" : "Show section", size: "s", className: "vuiAppSideNavTreeToggleButton", onClick: () => setIsOpen(!isOpen), color: "neutral", icon: _jsx(VuiIcon, { children: isOpen ? _jsx(BiChevronUp, {}) : _jsx(BiChevronDown, {}) }) }), isOpen && _jsx("div", Object.assign({ className: "vuiAppSideNavTreeChildren" }, { children: children }))] })));
+    return (_jsxs("div", Object.assign({ className: "vuiAppSideNavTreeSection" }, { children: [_jsx(VuiAppSideNavLink, Object.assign({ path: path !== null && path !== void 0 ? path : "/", name: name, iconBefore: iconBefore, iconAfter: iconAfter, isSelected: isSelected }, rest)), _jsx(VuiIconButton, { "aria-label": isOpen ? "Hide section" : "Show section", size: "s", className: "vuiAppSideNavTreeToggleButton", onClick: () => setIsOpen(!isOpen), color: "neutral", icon: _jsx(VuiIcon, { children: isOpen ? _jsx(BiChevronUp, {}) : _jsx(BiChevronDown, {}) }) }), isOpen && _jsx("div", Object.assign({ className: "vuiAppSideNavTreeChildren" }, { children: children }))] })));
 };

package/lib/components/app/appSideNav/_index.scss

@@ -1,8 +1,4 @@
-$appSideNavWidth: 240px;
-$appSideNavWidthCollapsed: 60px;
-$appSideNavLinkSpacing: $sizeXxs + 2px;
-
-@mixin appSideNavItem {
+@mixin appSideNavItem--m {
   display: block;
   color: $colorText;
   font-size: $fontSizeStandard;
@@ -12,6 +8,15 @@ $appSideNavLinkSpacing: $sizeXxs + 2px;
   padding-bottom: $appSideNavLinkSpacing;
 }
 
+@mixin appSideNavItem--l {
+  display: block;
+  color: $colorText;
+  font-size: $fontSizeMedium;
+  padding: 0 $sizeM;
+  padding-top: $appSideNavLinkSpacing + 2px;
+  padding-bottom: $appSideNavLinkSpacing + 2px;
+}
+
 @import "./appSideNav";
 @import "./appSideNavSections";
 @import "./appSideNavTree";

package/lib/components/app/appSideNav/appSideNav.scss

@@ -8,7 +8,6 @@
 .vuiAppSideNav__inner {
   // Prevent content from being squished as nav collapses.
   width: $appSideNavWidth;
-  padding: 28px 32px 32px 33px;
   margin-bottom: $sizeXxl * 4;
   transition: all $transitionSpeed;
 }
@@ -58,18 +57,39 @@
 
 .vuiAppSideNavLink {
   @include truncateText;
-  @include appSideNavItem;
   text-decoration: none;
+  border-radius: $sizeXxs;
+  line-height: 1.1;
+  border-top: 1px solid $colorEmptyShade;
+  border-bottom: 1px solid $colorEmptyShade;
 
   &:hover {
-    background-color: $colorPrimaryLighterShade;
-    border-radius: $sizeM;
+    background-color: $colorLightShade;
     color: $colorPrimary;
     text-decoration: underline;
   }
 }
 
 .vuiAppSideNavLink--active {
-  font-weight: $fontWeightBold;
-  text-decoration: underline;
+  background-color: $colorLightShade;
+}
+
+.vuiAppSideNav--m {
+  .vuiAppSideNav__inner {
+    padding: 28px 32px 32px 33px;
+  }
+
+  .vuiAppSideNavLink {
+    @include appSideNavItem--m;
+  }
+}
+
+.vuiAppSideNav--l {
+  .vuiAppSideNav__inner {
+    padding: 20px 12px 32px;
+  }
+
+  .vuiAppSideNavLink {
+    @include appSideNavItem--l;
+  }
 }

package/lib/components/app/appSideNav/appSideNavTree.scss

@@ -18,8 +18,20 @@
 }
 
 .vuiAppSideNavTreeSection__subTitle {
-  @include appSideNavItem;
-  font-size: $fontSizeSmall;
   font-weight: $fontWeightBold;
   color: $colorDarkShade;
 }
+
+.vuiAppSideNav--m {
+  .vuiAppSideNavTreeSection__subTitle {
+    @include appSideNavItem--m;
+    font-size: $fontSizeSmall;
+  }
+}
+
+.vuiAppSideNav--l {
+  .vuiAppSideNavTreeSection__subTitle {
+    @include appSideNavItem--l;
+    font-size: $fontSizeStandard;
+  }
+}

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

@@ -7,7 +7,7 @@ export type TreeItem = {
     pages?: Tree;
     iconBefore?: React.ReactNode;
     iconAfter?: React.ReactNode;
-    isActive?: boolean;
+    isSelected?: boolean;
     className?: string;
     "data-testid"?: string;
 };

package/lib/components/badge/Badge.d.ts

@@ -6,9 +6,10 @@ type Props = {
     className?: string;
     color: (typeof BADGE_COLOR)[number];
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onClose?: () => void;
     href?: LinkProps["href"];
     target?: LinkProps["target"];
     track?: LinkProps["track"];
 };
-export declare const VuiBadge: ({ children, className, color, onClick, href, target, track, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiBadge: ({ children, className, color, onClick, onClose, href, target, track, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/badge/Badge.js

@@ -9,25 +9,32 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { BiX } from "react-icons/bi";
 import { getTrackingProps } from "../../utils/getTrackingProps";
 import { useVuiContext } from "../context/Context";
+import { VuiIconButton } from "../button/IconButton";
+import { VuiIcon } from "../icon/Icon";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
 export const BADGE_COLOR = ["accent", "primary", "danger", "warning", "success", "neutral"];
 export const VuiBadge = (_a) => {
-    var { children, className, color, onClick, href, target, track } = _a, rest = __rest(_a, ["children", "className", "color", "onClick", "href", "target", "track"]);
+    var { children, className, color, onClick, onClose, href, target, track } = _a, rest = __rest(_a, ["children", "className", "color", "onClick", "onClose", "href", "target", "track"]);
     const { createLink } = useVuiContext();
     const classes = classNames(className, "vuiBadge", `vuiBadge--${color}`, {
         "vuiBadge--clickable": onClick !== null && onClick !== void 0 ? onClick : href
     });
+    const content = onClose ? (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [_jsx(VuiFlexItem, { children: children }), _jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Remove", size: "xs", color: "subdued", className: "vuiBadge__closeButton", onClick: (e) => {
+                        e.stopPropagation();
+                        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: children })));
+        return (_jsx("button", Object.assign({ className: classes, onClick: onClick }, rest, { children: content })));
     }
     if (href) {
         return createLink(Object.assign({ className: classes, href,
-            onClick,
-            children,
-            target }, getTrackingProps(track)));
+            onClick, children: content, target }, getTrackingProps(track)));
     }
-    return (_jsx("div", Object.assign({ className: classes }, rest, { children: children })));
+    return (_jsx("div", Object.assign({ className: classes }, rest, { children: content })));
 };

package/lib/components/badge/_index.scss

@@ -15,6 +15,11 @@
   cursor: pointer;
 }
 
+.vuiBadge__closeButton {
+  padding: 0px !important;
+  height: min-content !important;
+}
+
 // Color
 $color: (
   accent: (

package/lib/components/button/BaseButton.d.ts

@@ -1,7 +1,6 @@
 import { ReactElement, ReactNode } from "react";
 import { BUTTON_SIZE } from "./types";
 import { LinkProps } from "../link/types";
-import { SPINNER_COLOR } from "../spinner/types";
 export type BaseButtonProps = {
     children?: ReactNode;
     icon?: ReactElement | null;
@@ -27,5 +26,5 @@ export type BaseButtonProps = {
     isLoading?: boolean;
 };
 export declare const BaseButton: import("react").ForwardRefExoticComponent<BaseButtonProps & {
-    spinnerColor: (typeof SPINNER_COLOR)[number];
+    spinnerColor?: "accent" | "primary" | "success" | "warning" | "danger" | "empty" | "dark" | undefined;
 } & import("react").RefAttributes<HTMLButtonElement | null>>;

package/lib/components/button/BaseButton.js

@@ -47,7 +47,9 @@ export const BaseButton = forwardRef((_a, ref) => {
     if (htmlFor) {
         return (_jsxs("label", Object.assign({ htmlFor: htmlFor, className: classes, tabIndex: tabIndex }, rest, { children: [iconContainer, children] })));
     }
-    if (href) {
+    // Anchor tags can't be disabled, so we'll just render a button instead
+    // if isDisabled is true.
+    if (href && !isDisabled) {
         const wrapperClasses = classNames("vuiBaseButtonLinkWrapper", {
             "vuiBaseButtonLinkWrapper--fullWidth": fullWidth
         });

package/lib/components/button/IconButton.d.ts

@@ -15,6 +15,7 @@ type Props = {
     target?: LinkProps["target"];
     track?: LinkProps["track"];
     tabIndex?: number;
+    isSelected?: boolean;
 };
 export declare const VuiIconButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement | null>>;
 export {};

package/lib/components/button/IconButton.js

@@ -15,18 +15,25 @@ import { forwardRef } from "react";
 import { getTrackingProps } from "../../utils/getTrackingProps";
 import { createButtonIcon } from "./createButtonIcon";
 import { useVuiContext } from "../context/Context";
+import { VuiTooltip } from "../tooltip/Tooltip";
 export const VuiIconButton = forwardRef((_a, ref) => {
-    var { className, icon, color = "primary", size = "m", onClick, onMouseOver, onMouseOut, onMouseMove, href, target, track, tabIndex } = _a, rest = __rest(_a, ["className", "icon", "color", "size", "onClick", "onMouseOver", "onMouseOut", "onMouseMove", "href", "target", "track", "tabIndex"]);
+    var { className, icon, color = "primary", size = "m", onClick, onMouseOver, onMouseOut, onMouseMove, href, target, track, tabIndex, isSelected = false } = _a, rest = __rest(_a, ["className", "icon", "color", "size", "onClick", "onMouseOver", "onMouseOut", "onMouseMove", "href", "target", "track", "tabIndex", "isSelected"]);
     const { createLink } = useVuiContext();
-    const props = Object.assign({ className: classNames("vuiIconButton", className, `vuiIconButton--${color}`, `vuiIconButton--${size}`), onClick,
+    const props = Object.assign({ className: classNames("vuiIconButton", className, `vuiIconButton--${color}`, `vuiIconButton--${size}`, {
+            [`vuiIconButton--${color}-isSelected`]: isSelected
+        }), onClick,
         onMouseOver,
         onMouseOut,
         onMouseMove,
         tabIndex }, rest);
     const buttonIcon = createButtonIcon(icon, size, color);
+    let iconButton;
     if (href) {
-        return createLink(Object.assign(Object.assign(Object.assign({ href,
+        iconButton = createLink(Object.assign(Object.assign(Object.assign({ href,
             target }, props), getTrackingProps(track)), { children: _jsx("button", Object.assign({ ref: ref }, { children: buttonIcon })) }));
     }
-    return (_jsx("button", Object.assign({}, props, { ref: ref }, { children: buttonIcon })));
+    else {
+        iconButton = (_jsx("button", Object.assign({}, props, { ref: ref }, { children: buttonIcon })));
+    }
+    return _jsx(VuiTooltip, Object.assign({ tip: rest["aria-label"] }, { children: iconButton }));
 });

package/lib/components/button/baseButton.scss

@@ -4,6 +4,8 @@
 }
 
 .vuiBaseButtonLinkWrapper {
+  // Ensure containing element is the same size as the child.
+  display: inline-block;
   text-decoration: none;
 
   &:hover {
@@ -70,7 +72,7 @@
 
 // Size
 .vuiBaseButton--xs {
-  font-size: $fontSizeStandard;
+  font-size: $fontSizeSmall;
   padding: $sizeXxs $sizeXs;
   height: 24px;
 }
@@ -82,7 +84,7 @@
 }
 
 .vuiBaseButton--m {
-  font-size: $fontSizeMedium;
+  font-size: $fontSizeStandard;
   padding: $sizeXs $sizeM;
   height: 34px;
 }

package/lib/components/button/createButtonIcon.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { BaseButtonProps } from "./BaseButton";
 import { ButtonColor } from "./types";
-export declare const createButtonIcon: (icon: BaseButtonProps["icon"], size: BaseButtonProps["size"], color: ButtonColor, colorToIconColorMap?: Record<ButtonColor, string>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export declare const createButtonIcon: (icon: BaseButtonProps["icon"], size: BaseButtonProps["size"], color: ButtonColor, colorToIconColorMap?: Record<ButtonColor, string>) => ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;