@vectara/vectara-ui 0.0.2

package/lib/components/index.js

@@ -0,0 +1,67 @@
+import { VuiAccordion } from "./accordion/Accordion";
+import { VuiAccountMenu } from "./accountMenu/AccountMenu";
+import { VuiAppContent } from "./app/AppContent";
+import { VuiAppHeader } from "./app/AppHeader";
+import { VuiAppLayout } from "./app/AppLayout";
+import { VuiAppSideNav } from "./app/appSideNav/AppSideNav";
+import { BADGE_COLOR, VuiBadge } from "./badge/Badge";
+import { BUTTON_COLOR, BUTTON_SIZE } from "./button/types";
+import { VuiButtonPrimary } from "./button/ButtonPrimary";
+import { VuiButtonSecondary } from "./button/ButtonSecondary";
+import { VuiButtonTertiary } from "./button/ButtonTertiary";
+import { VuiIconButton } from "./button/IconButton";
+import { VuiCallout } from "./callout/Callout";
+import { VuiCard } from "./card/Card";
+import { CALLOUT_COLOR, CALLOUT_SIZE } from "./callout/types";
+import { VuiChat } from "./chat/Chat";
+import { VuiCode } from "./code/Code";
+import { VuiContextProvider } from "./context/Context";
+import { VuiCopyButton } from "./copyButton/CopyButton";
+import { VuiDrawer } from "./drawer/Drawer";
+import { VuiFlexContainer } from "./flex/FlexContainer";
+import { VuiFlexItem } from "./flex/FlexItem";
+import { VuiCheckbox, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
+import { VuiFormGroup } from "./formGroup/FormGroup";
+import { VuiGrid } from "./grid/Grid";
+import { VuiHorizontalRule } from "./horizontalRule/HorizontalRule";
+import { VuiIcon } from "./icon/Icon";
+import { ICON_COLOR, ICON_SIZE } from "./icon/types";
+import { VuiInfoTable } from "./infoTable/InfoTable";
+import { VuiLink, VuiLinkInternal } from "./link/Link";
+import { VuiList } from "./list/List";
+import { VuiMenu } from "./menu/Menu";
+import { VuiMenuItem } from "./menu/MenuItem";
+import { VuiModal } from "./modal/Modal";
+import { VuiNotifications } from "./notification/Notifications";
+import { VuiOptionsButton } from "./optionsButton/OptionsButton";
+import { VuiOptionsList } from "./optionsList/OptionsList";
+import { VuiOptionsListItem } from "./optionsList/OptionsListItem";
+import { VuiPopover } from "./popover/Popover";
+import { VuiPortal } from "./portal/Portal";
+import { PROGRESS_BAR_COLOR, VuiProgressBar } from "./progressBar/ProgressBar";
+import { VuiPrompt } from "./prompt/Prompt";
+import { VuiScreenBlock } from "./screenBlock/ScreenBlock";
+import { VuiSearchInput } from "./searchInput/SearchInput";
+import { VuiSearchResult } from "./searchResult/SearchResult";
+import { VuiSearchSelect } from "./searchSelect/SearchSelect";
+import { VuiSetting } from "./setting/Setting";
+import { VuiSpacer } from "./spacer/Spacer";
+import { SPACER_SIZE } from "./spacer/types";
+import { VuiSpinner } from "./spinner/Spinner";
+import { SPINNER_COLOR, SPINNER_SIZE } from "./spinner/types";
+import { VuiStatList } from "./statList/StatList";
+import { VuiStatus } from "./status/Status";
+import { VuiSummary } from "./summary/Summary";
+import { VuiSummaryCitation } from "./summary/SummaryCitation";
+import { VuiTable } from "./table/Table";
+import { VuiTab } from "./tabs/Tab";
+import { VuiTabbedRoutes } from "./tabs/TabbedRoutes";
+import { VuiTabs } from "./tabs/Tabs";
+import { TAB_SIZE } from "./tabs/types";
+import { VuiText } from "./typography/Text";
+import { VuiTextColor } from "./typography/TextColor";
+import { TEXT_COLOR, TEXT_SIZE, TITLE_SIZE } from "./typography/types";
+import { VuiTitle } from "./typography/Title";
+import { VuiToggle } from "./toggle/Toggle";
+import { VuiTopicButton } from "./topicButton/TopicButton";
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, VuiAccordion, VuiAccountMenu, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiContextProvider, VuiCopyButton, VuiDrawer, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiHorizontalRule, VuiIcon, VuiInfoTable, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSpacer, VuiSpinner, VuiStatList, VuiStatus, VuiSummary, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTitle, VuiToggle, VuiTopicButton };

package/lib/components/infoTable/InfoTable.d.ts

@@ -0,0 +1,24 @@
+declare const PADDING: readonly ["xxs", "xs", "s"];
+export type InfoTableColumnAlign = "left" | "right";
+type Column = {
+    name: string;
+    render?: React.ReactNode;
+    width?: string;
+    align?: InfoTableColumnAlign;
+};
+export type InfoTableRowType = "sectionHeader" | "footer";
+export type InfoTableRow = {
+    type?: InfoTableRowType;
+    values: Record<string, {
+        render: React.ReactNode;
+        colSpan?: number;
+    } | undefined>;
+};
+type Props = {
+    columns: Column[];
+    rows: InfoTableRow[];
+    isHeaderVisible?: boolean;
+    padding?: (typeof PADDING)[number];
+};
+export declare const VuiInfoTable: ({ columns, rows, isHeaderVisible, padding }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/infoTable/InfoTable.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+const PADDING = ["xxs", "xs", "s"];
+const paddingToClassMap = {
+    xxs: "vuiInfoTable--paddingXxs",
+    xs: "vuiInfoTable--paddingXs",
+    s: "vuiInfoTable--paddingS"
+};
+const typeToRowClassMap = {
+    sectionHeader: "vuiInfoTableRow--sectionHeader",
+    footer: "vuiInfoTableRow--footer"
+};
+export const VuiInfoTable = ({ columns, rows, isHeaderVisible, padding = "xs" }) => {
+    const classes = classNames("vuiInfoTable", paddingToClassMap[padding]);
+    return (_jsxs("table", Object.assign({ className: classes }, { children: [isHeaderVisible && (_jsx("thead", { children: _jsx("tr", { children: columns.map(({ name, render, width, align }) => (_jsx("th", Object.assign({ style: { width, textAlign: align !== null && align !== void 0 ? align : "left" } }, { children: render }), name))) }) })), _jsx("tbody", { children: rows.map(({ values, type }, index) => {
+                    const rowClasses = type && typeToRowClassMap[type];
+                    return (_jsx("tr", Object.assign({ className: rowClasses }, { children: columns.map(({ name, width, align }) => {
+                            const value = values[name];
+                            if (value !== undefined) {
+                                return (_jsx("td", Object.assign({ style: { width, textAlign: align !== null && align !== void 0 ? align : "left" }, colSpan: value.colSpan }, { children: value.render }), name));
+                            }
+                        }) }), index));
+                }) })] })));
+};

package/lib/components/infoTable/_index.scss

@@ -0,0 +1,53 @@
+.vuiInfoTable {
+  width: 100%;
+  table-layout: fixed;
+  border: 1px solid $borderColorLight;
+
+  thead {
+    background-color: $colorLightShade;
+    border-bottom: 1px solid $borderColorLight;
+  }
+
+  tbody tr {
+    border-bottom: 1px solid $borderColorLight;
+  }
+
+  th {
+    font-size: $fontSizeSmall;
+    font-weight: $fontWeightBold;
+    padding: $sizeXs $sizeS;
+    text-align: left;
+  }
+
+  td {
+    font-size: $fontSizeStandard;
+    vertical-align: middle;
+  }
+}
+
+.vuiInfoTable--paddingXxs {
+  td {
+    padding: $sizeXxs $sizeS;
+  }
+}
+
+.vuiInfoTable--paddingXs {
+  td {
+    padding: $sizeXs $sizeS;
+  }
+}
+
+.vuiInfoTable--paddingS {
+  td {
+    padding: $sizeS $sizeS;
+  }
+}
+
+.vuiInfoTableRow--sectionHeader {
+  background-color: $colorLightShade;
+  border-bottom: none !important;
+}
+
+.vuiInfoTableRow--footer {
+  background-color: $colorLightShade;
+}

package/lib/components/link/Link.d.ts

@@ -0,0 +1,3 @@
+import { LinkProps } from "./types";
+export declare const VuiLinkInternal: ({ ...rest }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiLink: ({ children, href, target, onClick, className, track, isAnchor, ...rest }: LinkProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/link/Link.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 } from "react/jsx-runtime";
+import classNames from "classnames";
+import { getTrackingProps } from "../../utils/getTrackingProps";
+import { useVuiContext } from "../context/Context";
+export const VuiLinkInternal = (_a) => {
+    var rest = __rest(_a, []);
+    return _jsx(VuiLink, Object.assign({}, rest, { track: true }));
+};
+export const VuiLink = (_a) => {
+    var { children, href, target, onClick, className, track, isAnchor } = _a, rest = __rest(_a, ["children", "href", "target", "onClick", "className", "track", "isAnchor"]);
+    const { createLink } = useVuiContext();
+    if (!href) {
+        return (_jsx("button", Object.assign({ className: classNames("vuiLink", "vuiLink--button", className), onClick: onClick }, rest, { children: children })));
+    }
+    const props = Object.assign(Object.assign({}, rest), getTrackingProps(track));
+    if (target === "_blank") {
+        props.target = target;
+    }
+    if (isAnchor) {
+        return (_jsx("a", Object.assign({ className: classNames("vuiLink", className), href: href, onClick: onClick }, props, { children: children })));
+    }
+    return createLink(Object.assign({ className: classNames("vuiLink", className), href,
+        onClick,
+        children }, props));
+};

package/lib/components/link/Link.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/lib/components/link/Link.test.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MemoryRouter } from "react-router-dom";
+import "@testing-library/jest-dom";
+import { VuiLink } from "./Link";
+import { renderWithContext } from "../context/Context.test.util";
+describe("VuiLink", () => {
+    describe("track", () => {
+        it("allows referrer information when true", () => {
+            const { asFragment } = renderWithContext(_jsx(VuiLink, Object.assign({ href: "https://www.vectara.com", track: true }, { children: "Link" })), { wrapper: MemoryRouter });
+            expect(asFragment()).toMatchInlineSnapshot(`
+        <DocumentFragment>
+          <a
+            class="vuiLink"
+            href="https://www.vectara.com"
+            referrerpolicy="no-referrer-when-downgrade"
+            rel="noopener"
+          >
+            Link
+          </a>
+        </DocumentFragment>
+      `);
+        });
+        it("disallows referrer information when false (default)", () => {
+            const { asFragment } = renderWithContext(_jsx(VuiLink, Object.assign({ href: "https://www.vectara.com" }, { children: "Link" })), {
+                wrapper: MemoryRouter
+            });
+            expect(asFragment()).toMatchInlineSnapshot(`
+        <DocumentFragment>
+          <a
+            class="vuiLink"
+            href="https://www.vectara.com"
+            rel="noopener"
+          >
+            Link
+          </a>
+        </DocumentFragment>
+      `);
+        });
+    });
+});

package/lib/components/link/_index.scss

@@ -0,0 +1,17 @@
+.vuiLink {
+  color: $colorPrimary !important;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+
+    // This is needed when wrapping an element that has display: inline-flex.
+    & * {
+      text-decoration: underline;
+    }
+  }
+}
+
+.vuiLink--button {
+  display: inline;
+}

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

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+export type LinkProps = {
+    children: ReactNode;
+    href?: string;
+    className?: string;
+    target?: "_blank";
+    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    track?: boolean;
+    title?: string;
+    id?: string;
+    role?: string;
+    isAnchor?: boolean;
+    tabIndex?: number;
+    "data-testid"?: string;
+};

package/lib/components/link/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/list/List.d.ts

@@ -0,0 +1,12 @@
+type ListItem = {
+    key: string;
+    isComplete: boolean;
+    render: () => React.ReactNode;
+};
+type Props = {
+    items: ListItem[];
+    size?: "s" | "m";
+    alignItems?: "start" | "center" | "end";
+};
+export declare const VuiList: ({ items, size, alignItems }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/list/List.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiSpacer } from "../spacer/Spacer";
+import { Fragment } from "react";
+export const VuiList = ({ items, size = "m", alignItems = "center" }) => {
+    return (_jsx(_Fragment, { children: items.map((item, index) => {
+            const humanizedStep = index + 1;
+            const numberClasses = classNames("vuiListNumber", `vuiListNumber--${size}`, {
+                "vuiListNumber-isComplete": item.isComplete
+            });
+            return (_jsxs(Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: alignItems, spacing: size }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx("div", Object.assign({ className: numberClasses, "aria-label": `Step ${humanizedStep}` }, { children: humanizedStep })) })), _jsx(VuiFlexItem, Object.assign({ grow: 1, alignItems: "start" }, { children: item.render() }))] })), index < items.length - 1 && _jsx(VuiSpacer, { size: "s" })] }, item.key));
+        }) }));
+};

package/lib/components/list/_index.scss

@@ -0,0 +1,29 @@
+.vuiListNumber {
+  display: flex;
+  flex-direction: column;
+  border-radius: $sizeL;
+  background-color: $colorLightShade;
+  color: $colorSubdued;
+  font-weight: $fontWeightBold;
+  line-height: 0;
+  align-items: center;
+}
+
+.vuiListNumber--m {
+  width: $sizeM;
+  height: $sizeM;
+  padding: $sizeM;
+  font-size: $fontSizeMedium;
+}
+
+.vuiListNumber--s {
+  width: $sizeS;
+  height: $sizeS;
+  padding: $sizeS;
+  font-size: $fontSizeSmall;
+}
+
+.vuiListNumber-isComplete {
+  background-color: $colorAccentLightShade;
+  color: $colorAccent;
+}

package/lib/components/menu/Menu.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+type Props = {
+    children?: ReactNode;
+    noBorder?: boolean;
+};
+export declare const VuiMenu: ({ children, noBorder }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/menu/Menu.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+export const VuiMenu = ({ children, noBorder }) => {
+    const classes = classNames("vuiMenu", { "vuiMenu--noBorder": noBorder });
+    return _jsx("div", Object.assign({ className: classes }, { children: children }));
+};

package/lib/components/menu/MenuItem.d.ts

@@ -0,0 +1,10 @@
+import { LinkProps } from "../link/types";
+export type MenuItem = {
+    className?: string;
+    title?: React.ReactNode;
+    text?: React.ReactNode;
+    onClick?: () => void;
+    href?: LinkProps["href"];
+    color?: "neutral" | "primary" | "danger";
+};
+export declare const VuiMenuItem: ({ className, title, text, onClick, href, color, ...rest }: MenuItem) => import("react/jsx-runtime").JSX.Element;

package/lib/components/menu/MenuItem.js

@@ -0,0 +1,31 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { VuiSpacer } from "../spacer/Spacer";
+import { useVuiContext } from "../context/Context";
+export const VuiMenuItem = (_a) => {
+    var { className, title, text, onClick, href, color = "neutral" } = _a, rest = __rest(_a, ["className", "title", "text", "onClick", "href", "color"]);
+    const { createLink } = useVuiContext();
+    const classes = classNames(className, "vuiMenuItem", `vuiMenuItem--${color}`, {
+        "vuiMenuItem--clickable": onClick || href
+    });
+    const props = Object.assign({ className: classes, onClick }, rest);
+    const content = (_jsxs(_Fragment, { children: [title && _jsx("div", Object.assign({ className: "vuiMenuItem__title" }, { children: title })), text && title && _jsx(VuiSpacer, { size: "xxs" }), text && _jsx("div", Object.assign({ className: "vuiMenuItem__text" }, { children: text }))] }));
+    if (href) {
+        return createLink(Object.assign(Object.assign({ href }, props), { children: content }));
+    }
+    if (onClick) {
+        return _jsx("button", Object.assign({}, props, { children: content }));
+    }
+    return _jsx("div", Object.assign({}, props, { children: content }));
+};

package/lib/components/menu/_index.scss

@@ -0,0 +1,75 @@
+@use "sass:map";
+
+.vuiMenu {
+  border: 1px solid $borderColor;
+  border-radius: $sizeXs;
+  overflow: hidden;
+}
+
+.vuiMenuItem {
+  display: block;
+  width: 100%;
+  padding: $sizeS $sizeL;
+  text-decoration: none;
+  text-align: left;
+}
+
+.vuiMenu--noBorder {
+  border: none;
+  border-radius: 0;
+
+  .vuiMenuItem {
+    padding: $sizeS $sizeM;
+  }
+}
+
+.vuiMenuItem--clickable {
+  cursor: pointer;
+}
+
+// Color
+$color: (
+  neutral: (
+    "color": $colorText,
+    "background-color": $colorPrimaryLighterShade,
+    "hover-color": $colorPrimary
+  ),
+  primary: (
+    "color": $colorPrimary,
+    "background-color": $colorPrimaryLighterShade,
+    "hover-color": $colorPrimary
+  ),
+  danger: (
+    "color": $colorDanger,
+    "background-color": $colorDangerLighterShade,
+    "hover-color": $colorDanger
+  )
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiMenuItem--#{$colorName} {
+    color: #{map.get($colorValue, "color")};
+
+    &.vuiMenuItem--clickable {
+      &:hover {
+        background-color: #{map.get($colorValue, "background-color")};
+
+        .vuiMenuItem__title,
+        .vuiMenuItem__text {
+          color: #{map.get($colorValue, "hover-color")};
+        }
+      }
+    }
+  }
+}
+
+.vuiMenuItem__title {
+  font-size: $fontSizeMedium;
+  line-height: 1.4;
+}
+
+.vuiMenuItem__text {
+  color: $colorSubdued;
+  font-size: $fontSizeSmall;
+  line-height: 1.4;
+}

package/lib/components/modal/Modal.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+declare const COLOR: readonly ["primary", "danger"];
+type Props = {
+    className?: string;
+    title: ReactNode;
+    icon?: ReactNode;
+    children: ReactNode;
+    isOpen?: boolean;
+    onClose?: () => void;
+    color?: (typeof COLOR)[number];
+};
+export declare const VuiModal: ({ className, color, title, icon, children, isOpen, onClose, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/modal/Modal.js

@@ -0,0 +1,53 @@
+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 { useEffect, useRef } from "react";
+import classNames from "classnames";
+import { FocusOn } from "react-focus-on";
+import { BiX } from "react-icons/bi";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiIconButton } from "../button/IconButton";
+import { VuiIcon } from "../icon/Icon";
+import { VuiPortal } from "../portal/Portal";
+import { VuiScreenBlock } from "../screenBlock/ScreenBlock";
+import { useVuiContext } from "../context/Context";
+const COLOR = ["primary", "danger"];
+export const VuiModal = (_a) => {
+    var { className, color = "primary", title, icon, children, isOpen, onClose } = _a, rest = __rest(_a, ["className", "color", "title", "icon", "children", "isOpen", "onClose"]);
+    const { DrawerTitle } = useVuiContext();
+    const returnFocusElRef = useRef(null);
+    // Return focus on unmount.
+    useEffect(() => {
+        var _a;
+        if (isOpen) {
+            returnFocusElRef.current = document.activeElement;
+        }
+        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.
+    const onCloseDelayed = () => {
+        window.setTimeout(() => {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }, 0);
+    };
+    const classes = classNames("vuiModal", `vuiModal--${color}`, className);
+    return (_jsx(VuiPortal, { children: isOpen && (_jsx(VuiScreenBlock, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: onCloseDelayed, 
+                // Enable manual focus return to work.
+                returnFocus: false, 
+                // Enable focus on contents when it's open,
+                // but enable manual focus return to work when it's closed.
+                autoFocus: isOpen }, { children: _jsx("div", Object.assign({ className: "vuiModalContainer" }, { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiModalHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiModalHeader__title" }, { children: _jsx(DrawerTitle, { children: title }) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiModalContent" }, { children: _jsx("div", Object.assign({ className: "vuiModalContent__inner" }, { children: children })) }))] })) })) })) })) }));
+};

package/lib/components/modal/_index.scss

@@ -0,0 +1,85 @@
+@use "sass:map";
+
+$modalWidth: 500px;
+
+@keyframes modalIn {
+  0% {
+    transform: translateX(40px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.vuiModalContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: modalIn $transitionSpeed cubic-bezier(0, 1, 1, 1);
+  pointer-events: none;
+}
+
+.vuiModal {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: $modalWidth;
+  max-height: calc(100vh - 200px);
+  background-color: $colorEmptyShade;
+  border: 1px solid $borderColor;
+  z-index: $modalZIndex;
+  pointer-events: all;
+}
+
+.vuiModalHeader {
+  padding: $sizeM;
+}
+
+.vuiModalHeader__title {
+  font-size: $fontSizeXLarge;
+  font-weight: $fontWeightBold;
+  line-height: 1.2;
+  color: $colorText;
+}
+
+.vuiModalContent {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.vuiModalContent__inner {
+  padding: $sizeL $sizeM $sizeXxl;
+}
+
+// Color
+$color: (
+  primary: (
+    "background-color": $colorPrimaryLightShade,
+    "color": $colorText
+  ),
+  danger: (
+    "background-color": $colorDangerLightShade,
+    "color": $colorDanger
+  )
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiModal--#{$colorName} {
+    .vuiModalHeader {
+      background-color: #{map.get($colorValue, "background-color")};
+
+      .vuiModalHeader__title,
+      .vuiIcon {
+        color: #{map.get($colorValue, "color")};
+      }
+    }
+  }
+}

package/lib/components/notification/Notification.d.ts

@@ -0,0 +1,12 @@
+export type Notification = {
+    color: "primary" | "success" | "warning" | "danger";
+    message: string;
+};
+type Props = {
+    notification: Notification;
+    onDismiss: (notification: Notification) => void;
+    notificationsCount: number;
+    children?: React.ReactNode;
+};
+export declare const VuiNotification: ({ notification, onDismiss, notificationsCount, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};