@vectara/vectara-ui 1.0.1 → 3.4.0

package/.github/workflows/open-vui-pr.yml

@@ -0,0 +1,85 @@
+on:
+  push:
+    branches:
+      - main
+
+name: open-vui-pr
+
+jobs:
+  send-vectara-ui-pull-request:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # Checkout everything to get access to the tags
+          ref: ${{github.event.pull_request.head.ref}}
+          repository: ${{github.event.pull_request.head.repo.full_name}}
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Node.js for NPM
+        uses: actions/setup-node@v4
+        with:
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Install json cli tool
+        run: sudo npm i -g json
+
+      - name: Send pull-request
+        run: |
+          LATEST_TAG=$(git describe --tags --always --abbrev=0)
+          REPOSITORY="vectara/vectara-ui"
+          FOLDER="bin/$REPOSITORY"
+          BRANCH_NAME="migrate-vui-source-changes-$LATEST_TAG"
+
+          # Clone the remote repository and change working directory to the
+          # folder it was cloned to.
+          git clone \
+            --depth=1 \
+            --branch=main \
+            https://mrderyk:${{secrets.AUTOMATED_PR_ACCESS_TOKEN}}@github.com/$REPOSITORY \
+            $FOLDER
+
+          cd $FOLDER
+
+          # Setup the committers identity.
+          git config user.email "deryk@vectara.com"
+          git config user.name "Deryk DeGuzman"
+
+          # Create a new feature branch for the changes.
+          git checkout -b $BRANCH_NAME
+
+          # Copy latest package.json
+          cp ${{ github.workspace }}/package.json .
+
+          # Update unique local package.json fields
+
+          # Update homepage field.
+          json -I -f package.json -e "this.homepage=\"https://vectara.github.io/vectara-ui/\""
+
+          # Update repo URL field.
+          json -I -f package.json -e "this.repository.url=\"git+https://github.com/vectara/vectara-ui.git\""
+
+          # Update bugs URL field.
+          json -I -f package.json -e "this.bugs.url=\"https://github.com/vectara/vectara-ui/issues\""
+
+          # Update source files.
+          cp -R ${{ github.workspace }}/src .
+
+          # Commit the changes and push the feature branch to origin
+          git add .
+          git commit -m "chore: migrate vui-source changes to $LATEST_TAG"
+          git push origin $BRANCH_NAME
+
+          # Store the PAT in a file that can be accessed by the
+          # GitHub CLI.
+          echo "${{secrets.AUTOMATED_PR_ACCESS_TOKEN}}" > token.txt
+
+          # Authorize GitHub CLI for the current repository and
+          # create a pull-requests containing the updates.
+          gh auth login --with-token < token.txt
+          gh pr create \
+            --body "" \
+            --title "chore: migrate vui-source changes to $LATEST_TAG" \
+            --head "$BRANCH_NAME" \
+            --base "main"

package/.github/workflows/{publish-on-version-change.yml → tag-on-version-change.yml}

@@ -1,4 +1,4 @@
-name: publish-on-version-change
+name: tag-on-version-change
 on:
   push:
     branches:
@@ -22,8 +22,8 @@ jobs:
           diff-search: true
         id: check
 
-  publish-to-npm:
-    name: publish-to-npm
+  tag-if-necessary:
+    name: tag-if-necessary
     runs-on: ubuntu-latest
     needs: [check-version-change]
     if: needs.check-version-change.outputs.did-version-change == 'true'
@@ -31,21 +31,8 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v2
 
-      # Draft a release if version name changed
-      - name: Draft release
-        run: 'gh release create v${{ needs.check-version-change.outputs.new-version }} -d --title "Release ${{ needs.check-version-change.outputs.new-version }}" --generate-notes'
+      # Create a release if version name changed
+      - name: Create release
+        run: 'gh release create v${{ needs.check-version-change.outputs.new-version }} --title "Release ${{ needs.check-version-change.outputs.new-version }}" --generate-notes'
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Set up Node.js for NPM
-        uses: actions/setup-node@v4
-        with:
-          registry-url: "https://registry.npmjs.org"
-
-      - name: Build lib
-        run: "npm i && npm run buildLib"
-
-      - name: Publish package to NPM
-        run: npm publish --access=public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

package/README.md

@@ -0,0 +1,77 @@
+# Vectara UI
+
+This is Vectara's design system, codified as a React component library. It's intended solely for consumption by Vectara and currently it isn't available for use by anybody else. For more information see [NO_LICENSE](./NO_LICENSE).
+
+## Usage
+
+Import components like this:
+
+```tsx
+import { VuiFlexContainer, VuiItem } from "@vectara/vectara-ui";
+```
+
+Import our utils like this:
+
+```tsx
+import { extractCitations } from "@vectara/vectara-ui/lib/utils/citations";
+```
+
+To import the CSS for the components, import this stylesheet at the root level:
+
+```tsx
+import "@vectara/vectara-ui/lib/styles/index";
+```
+
+If you are using Sass and need Vectara UI's Sass variables, you can use this import in the files that use the variables:
+
+```scss
+@import "@vectara/vectara-ui/lib/sassUtils/index";
+```
+
+## Publishing
+
+Publishing a new version of the package consists of three steps:
+
+1. Maintaining the CHANGELOG.
+2. Versioning the package.
+3. Publishing to NPM.
+
+### Maintain the CHANGELOG
+
+As you introduce changes, record them in the CHANGELOG beneath the `main` section. Before you create a new version, submit a PR that updates the `package.json` version and moves the `main` content into a new section for the new version. We follow semver, so breaking changes should result in a major version bump.
+
+### Version the package
+
+1. Run `npm version {number}` to update package.json with the new version number and create a tag to track the version.
+2. Run `git push origin --tags` to push the new tag to the repo.
+3. Optional: [Manually create a release in GitHub.](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository)
+
+### Publish to NPM
+
+1. Run `npm run buildPackage` to create the distributable files.
+2. Run `npm login --scope=@vectara --registry="https://registry.npmjs.org/"` to log into the registry and scope.
+3. Run `npm publish --access public` to publish the package to NPM.
+
+## Local development
+
+Use `npm run start` to run the docs site locally and interact with the code you're developing.
+
+To test the package locally, use [`npm link`](https://docs.npmjs.com/cli/v9/commands/npm-link) to consume the distributable files in a sibling project.
+
+If you get an error regarding an ["invalid hook call"](https://iws.io/2022/invalid-hook-multiple-react-instances), you might need to use `npm link` to temporarily link the consumer's React dependencies to Vectara-UI's React dependencies. In this example, we're consuming Vectara-UI in [Vectara-Answer](https://github.com/vectara/vectara-answer):
+
+```bash
+npm link ../vectara-answer/node_modules/react ../vectara-answer/node_modules/react-dom ../vectara-answer/node_modules/react-router-dom
+```
+
+When you're done testing out the consumer, you can unlink these dependencies:
+
+```bash
+npm unlink ../vectara-answer/node_modules/react ../vectara-answer/node_modules/react-dom ../vectara-answer/node_modules/react-router-dom
+```
+
+## Licensing and public use
+
+Though the GitHub terms of service grant anybody the right to fork and look through this repository, we haven't yet licensed this code for use by anybody else. This means Vectara reserves all rights to the contents of this repository. You can't reproduce, distribute, or create derivative works from it. For more information on reserved copyright of GitHub repos, see https://choosealicense.com/no-permission/.
+
+For more information on our lack of licensing, see [NO_LICENSE](./NO_LICENSE).

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

@@ -39,7 +39,7 @@ export const VuiAppSideNav = ({ items = [], content }) => {
         "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": "Expand 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: () => {
+    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] }))] })) })));

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

@@ -34,5 +34,5 @@ const buildTreeItems = (items) => {
 const AppSideNavTreeSection = (_a) => {
     var { name, path, children, iconBefore, iconAfter, isActive } = _a, rest = __rest(_a, ["name", "path", "children", "iconBefore", "iconAfter", "isActive"]);
     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, { 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, 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 }))] })));
 };

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

@@ -13,7 +13,10 @@ export type BaseButtonProps = {
     isSelected?: boolean;
     isInert?: boolean;
     isDisabled?: boolean;
-    onClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLAnchorElement, MouseEvent>) => void;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    onMouseOver?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    onMouseOut?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    onMouseMove?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
     href?: LinkProps["href"];
     target?: LinkProps["target"];
     track?: LinkProps["track"];

package/lib/components/button/BaseButton.js

@@ -27,7 +27,7 @@ const sizeToSpinnerSizeMap = {
     l: "m"
 };
 export const BaseButton = forwardRef((_a, ref) => {
-    var { children, icon, iconSide = "left", align = "center", className, size = "m", fullWidth, onClick, tabIndex, isInert, isDisabled, href, target, track, htmlFor, isSubmit, isLoading, spinnerColor } = _a, rest = __rest(_a, ["children", "icon", "iconSide", "align", "className", "size", "fullWidth", "onClick", "tabIndex", "isInert", "isDisabled", "href", "target", "track", "htmlFor", "isSubmit", "isLoading", "spinnerColor"]);
+    var { children, icon, iconSide = "left", align = "center", className, size = "m", fullWidth, onClick, onMouseOver, onMouseOut, onMouseMove, tabIndex, isInert, isDisabled, href, target, track, htmlFor, isSubmit, isLoading, spinnerColor } = _a, rest = __rest(_a, ["children", "icon", "iconSide", "align", "className", "size", "fullWidth", "onClick", "onMouseOver", "onMouseOut", "onMouseMove", "tabIndex", "isInert", "isDisabled", "href", "target", "track", "htmlFor", "isSubmit", "isLoading", "spinnerColor"]);
     const { createLink } = useVuiContext();
     const classes = classNames("vuiBaseButton", className, `vuiBaseButton--${size}`, alignToClassMap[align], {
         "vuiBaseButton-isInert": isInert,
@@ -52,14 +52,18 @@ export const BaseButton = forwardRef((_a, ref) => {
             "vuiBaseButtonLinkWrapper--fullWidth": fullWidth
         });
         return createLink(Object.assign(Object.assign({ className: wrapperClasses, href,
-            onClick, children: (
+            onClick,
+            onMouseOver,
+            onMouseOut,
+            onMouseMove, children: (
             //* Wrap a button otherwise the flex layout breaks */}
             _jsxs("button", Object.assign({ className: classes, tabIndex: -1, ref: ref }, { children: [iconContainer, children] }))), target,
             tabIndex }, rest), getTrackingProps(track)));
     }
     const props = Object.assign({ onClick,
+        onMouseOver,
+        onMouseOut,
+        onMouseMove,
         tabIndex, ["type"]: isSubmit ? "submit" : "button", disabled: isDisabled }, rest);
-    return (
-    // @ts-expect-error HTMLButtonElement conflict with HTMLAnchorElement
-    _jsxs("button", Object.assign({ className: classes }, props, { ref: ref }, { children: [iconContainer, children] })));
+    return (_jsxs("button", Object.assign({ className: classes }, props, { ref: ref }, { children: [iconContainer, children] })));
 });

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

@@ -4,9 +4,13 @@ import { LinkProps } from "../link/types";
 type Props = {
     className?: string;
     icon: ReactElement;
+    "aria-label": string;
     color?: ButtonColor;
     size?: (typeof BUTTON_SIZE)[number];
-    onClick?: () => void;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    onMouseOver?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    onMouseOut?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    onMouseMove?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
     href?: LinkProps["href"];
     target?: LinkProps["target"];
     track?: LinkProps["track"];

package/lib/components/button/IconButton.js

@@ -16,9 +16,12 @@ import { getTrackingProps } from "../../utils/getTrackingProps";
 import { createButtonIcon } from "./createButtonIcon";
 import { useVuiContext } from "../context/Context";
 export const VuiIconButton = forwardRef((_a, ref) => {
-    var { className, icon, color = "primary", size = "m", onClick, href, target, track, tabIndex } = _a, rest = __rest(_a, ["className", "icon", "color", "size", "onClick", "href", "target", "track", "tabIndex"]);
+    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"]);
     const { createLink } = useVuiContext();
     const props = Object.assign({ className: classNames("vuiIconButton", className, `vuiIconButton--${color}`, `vuiIconButton--${size}`), onClick,
+        onMouseOver,
+        onMouseOut,
+        onMouseMove,
         tabIndex }, rest);
     const buttonIcon = createButtonIcon(icon, size, color);
     if (href) {

package/lib/components/callout/Callout.js

@@ -36,5 +36,5 @@ export const VuiCallout = (_a) => {
     var { children, title, headingElement, color, size = "m", onDismiss } = _a, rest = __rest(_a, ["children", "title", "headingElement", "color", "size", "onDismiss"]);
     const classes = classNames("vuiCallout", `vuiCallout--${color}`, `vuiCallout--${size}`);
     const HeadingElement = headingElement;
-    return (_jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", justifyContent: "spaceBetween" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx(VuiTitle, Object.assign({ size: sizeToTitleSizeMap[size] }, { children: _jsx(HeadingElement, { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: title })) }) })) })), onDismiss && (_jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIconButton, { className: "vuiCallout__closeButton", "data-testid": "calloutCloseButton", color: color, onClick: onDismiss, icon: _jsx(BiX, {}), size: "s" }) })))] })), children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: sizeToSpacerSizeMap[size] }), _jsx(VuiText, Object.assign({ size: sizeToContentSizeMap[size] }, { children: children }))] }))] })));
+    return (_jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", justifyContent: "spaceBetween" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx(VuiTitle, Object.assign({ size: sizeToTitleSizeMap[size] }, { children: _jsx(HeadingElement, { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: title })) }) })) })), onDismiss && (_jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIconButton, { "aria-label": "Hide information", className: "vuiCallout__closeButton", "data-testid": "calloutCloseButton", color: color, onClick: onDismiss, icon: _jsx(BiX, {}), size: "s" }) })))] })), children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: sizeToSpacerSizeMap[size] }), _jsx(VuiText, Object.assign({ size: sizeToContentSizeMap[size] }, { children: children }))] }))] })));
 };

package/lib/components/chat/Chat.js

@@ -20,6 +20,12 @@ const chatStyleToIconMap = {
     tall: _jsx(BiExpand, {}),
     fullScreen: _jsx(BiX, {})
 };
+const chatStyleToAriaLabelMap = {
+    closed: "Show chat",
+    condensed: "Expand height of chat",
+    tall: "Full-screen chat",
+    fullScreen: "Hide chat"
+};
 export const VuiChat = ({ openPrompt, chatStyle, setChatStyle, introduction, suggestions, onInput, onRetry, onReset, conversation, settings, isInspectionEnabled }) => {
     const [isTouched, setIsTouched] = useState(false);
     const [isSettingsOpen, setIsSettingsOpen] = useState(false);
@@ -126,5 +132,5 @@ export const VuiChat = ({ openPrompt, chatStyle, setChatStyle, introduction, sug
                         setChatStyle("closed");
                 } }, { children: [_jsx("div", Object.assign({ className: "vuiChat__header" }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "spaceBetween" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: _jsx(BiChat, {}) })) })), _jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx("div", Object.assign({ className: "vuiChatButton__prompt" }, { children: _jsx("h2", { children: openPrompt }) })) }))] })) })), settings && (_jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiButtonSecondary, Object.assign({ color: "neutral", size: "xs", onClick: () => setIsSettingsOpen(true) }, { children: "Settings" })) })))] })) })), _jsxs("div", Object.assign({ className: "vuiChat__conversation", ref: conversationRef }, { children: [(introduction || suggestions) && (_jsxs("div", Object.assign({ className: "vuiChat__introduction" }, { children: [introduction, introduction && _jsx(VuiSpacer, { size: "s" }), suggestions === null || suggestions === void 0 ? void 0 : suggestions.map((suggestion) => (_jsx("div", { children: _jsx(VuiButtonTertiary, Object.assign({ size: "s", color: "primary", onClick: () => onInput(suggestion), noPadding: true }, { children: suggestion }), suggestion) }))), suggestions && suggestions.length > 0 && _jsx(VuiSpacer, { size: "s" })] }))), conversation.length > 0 && (_jsx("div", Object.assign({ className: "vuiChat__turns" }, { children: conversation.map((turn, index) => (_jsx(VuiChatTurn, { turn: turn, isInspectionEnabled: isInspectionEnabled, setInspectedTurn: setInspectedTurn, onRetry: onRetry }, index))) }))), conversation.length > 0 && (_jsx("div", Object.assign({ className: "vuiChat__conversationActions" }, { children: _jsx(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "center" }, { children: _jsx(VuiFlexItem, { children: _jsx(VuiButtonSecondary, Object.assign({ color: "neutral", size: "xs", onClick: onReset }, { children: "Start over" })) }) })) })))] })), _jsx("div", Object.assign({ className: "vuiChat__input" }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx(VuiTextInput, { value: input, onChange: (e) => {
                                             setInput(e.currentTarget.value);
-                                        }, onSubmit: onSubmit, fullWidth: true, ref: inputRef }) })), _jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIconButton, { icon: _jsx(VuiIcon, { children: _jsx(BiPaperPlane, {}) }), color: "primary", onClick: onSubmit }) })), _jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIconButton, { icon: _jsx(VuiIcon, { children: chatStyleToIconMap[chatStyle] }), color: "neutral", onClick: cycleChatStyle }) }))] })) })), isSettingsOpen && (_jsx(VuiChatPanel, Object.assign({ title: "Chat settings", onClose: () => setIsSettingsOpen(false) }, { children: settings }))), Boolean(inspectedTurn) && (_jsx(VuiChatInspector, { turn: inspectedTurn, onClose: () => setInspectedTurn(undefined) }))] }))] }));
+                                        }, onSubmit: onSubmit, fullWidth: true, ref: inputRef }) })), _jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIconButton, { "aria-label": "Send message", icon: _jsx(VuiIcon, { children: _jsx(BiPaperPlane, {}) }), color: "primary", onClick: onSubmit }) })), _jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIconButton, { "aria-label": chatStyleToAriaLabelMap[chatStyle], icon: _jsx(VuiIcon, { children: chatStyleToIconMap[chatStyle] }), color: "neutral", onClick: cycleChatStyle }) }))] })) })), isSettingsOpen && (_jsx(VuiChatPanel, Object.assign({ title: "Chat settings", onClose: () => setIsSettingsOpen(false) }, { children: settings }))), Boolean(inspectedTurn) && (_jsx(VuiChatInspector, { turn: inspectedTurn, onClose: () => setInspectedTurn(undefined) }))] }))] }));
 };

package/lib/components/chat/ChatPanel.js

@@ -7,5 +7,5 @@ import { VuiIcon } from "../icon/Icon";
 import { VuiSpacer } from "../spacer/Spacer";
 import { VuiTitle } from "../typography/Title";
 export const VuiChatPanel = ({ title, onClose, children }) => {
-    return (_jsxs("div", Object.assign({ className: "vuiChatPanel" }, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "spaceBetween" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx(VuiTitle, Object.assign({ size: "s" }, { children: _jsx("h3", { children: title }) })) })), _jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIconButton, { icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), color: "neutral", onClick: () => onClose() }) }))] })), _jsx(VuiSpacer, { size: "s" }), children, _jsx(VuiSpacer, { size: "l" })] })));
+    return (_jsxs("div", Object.assign({ className: "vuiChatPanel" }, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "spaceBetween" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx(VuiTitle, Object.assign({ size: "s" }, { children: _jsx("h3", { children: title }) })) })), _jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIconButton, { "aria-label": "Hide chat", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), color: "neutral", onClick: () => onClose() }) }))] })), _jsx(VuiSpacer, { size: "s" }), children, _jsx(VuiSpacer, { size: "l" })] })));
 };

package/lib/components/chat/ChatTurn.js

@@ -15,5 +15,5 @@ export const VuiChatTurn = ({ turn, isInspectionEnabled, setInspectedTurn, onRet
     const turnClasses = classNames("vuiChatQuestion", {
         "vuiChatQuestion--error": !turn.isLoading && turn.error
     });
-    return (_jsxs("div", Object.assign({ className: "vuiChatTurn" }, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", justifyContent: "spaceBetween", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx("div", Object.assign({ className: turnClasses }, { children: _jsx("h3", { children: turn.question }) })) })), isInspectionEnabled && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIconButton, { size: "xs", className: "vuiChat__inspectButton", color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: _jsx(BiListUl, {}) })), onClick: () => setInspectedTurn(turn) }) })))] })), _jsx("div", Object.assign({ className: "vuiChatAnswer" }, { children: turn.isLoading ? (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiSpinner, { size: "xs" }) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: "Thinking\u2026" })) }) }) }))] }))) : turn.error ? (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiIcon, Object.assign({ color: "subdued" }, { children: _jsx(BiError, {}) })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: (_a = turn.error) === null || _a === void 0 ? void 0 : _a.message })) }) }) }))] })), _jsx(VuiSpacer, { size: "s" }), _jsx(VuiButtonSecondary, Object.assign({ size: "xs", color: "neutral", onClick: () => onRetry(turn) }, { children: "Ask again" }))] })) : (turn.answer) }))] })));
+    return (_jsxs("div", Object.assign({ className: "vuiChatTurn" }, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", justifyContent: "spaceBetween", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx("div", Object.assign({ className: turnClasses }, { children: _jsx("h3", { children: turn.question }) })) })), isInspectionEnabled && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIconButton, { "aria-label": "Inspect turn", size: "xs", className: "vuiChat__inspectButton", color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: _jsx(BiListUl, {}) })), onClick: () => setInspectedTurn(turn) }) })))] })), _jsx("div", Object.assign({ className: "vuiChatAnswer" }, { children: turn.isLoading ? (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiSpinner, { size: "xs" }) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: "Thinking\u2026" })) }) }) }))] }))) : turn.error ? (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiIcon, Object.assign({ color: "subdued" }, { children: _jsx(BiError, {}) })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: (_a = turn.error) === null || _a === void 0 ? void 0 : _a.message })) }) }) }))] })), _jsx(VuiSpacer, { size: "s" }), _jsx(VuiButtonSecondary, Object.assign({ size: "xs", color: "neutral", onClick: () => onRetry(turn) }, { children: "Ask again" }))] })) : (turn.answer) }))] })));
 };

package/lib/components/code/Code.d.ts

@@ -9,9 +9,10 @@ import { CodeLanguage } from "./types";
 type Props = {
     language?: CodeLanguage;
     onCopy?: () => void;
+    isFullscreenEnabled?: boolean;
     children?: string;
     fullHeight?: boolean;
     "data-testid"?: string;
 };
-export declare const VuiCode: ({ onCopy, language, fullHeight, children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiCode: ({ onCopy, isFullscreenEnabled, language, fullHeight, children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/code/Code.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import Prism from "prismjs";
 import "prismjs/themes/prism.css";
 import "prismjs/components/prism-json";
@@ -20,15 +20,18 @@ import "prismjs/components/prism-bash";
 import "prismjs/components/prism-jsx";
 import "prismjs/components/prism-tsx";
 import classNames from "classnames";
-import { BiClipboard } from "react-icons/bi";
+import { BiClipboard, BiFullscreen, BiX } from "react-icons/bi";
 import { VuiIconButton } from "../button/IconButton";
 import { VuiIcon } from "../icon/Icon";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { FocusOn } from "react-focus-on";
 // PrismJS clears highlighting when language-none is set.
 export const VuiCode = (_a) => {
-    var { onCopy, language = "none", fullHeight, children = "" } = _a, rest = __rest(_a, ["onCopy", "language", "fullHeight", "children"]);
+    var { onCopy, isFullscreenEnabled = true, language = "none", fullHeight, children = "" } = _a, rest = __rest(_a, ["onCopy", "isFullscreenEnabled", "language", "fullHeight", "children"]);
+    const [isFullscreen, setIsFullscreen] = useState(false);
     useEffect(() => {
         Prism.highlightAll();
-    }, [children, language]);
+    }, [children, language, isFullscreen]);
     const containerClasses = classNames("vuiCodeContainer", {
         "vuiCodeContainer--fullHeight": fullHeight
     });
@@ -36,9 +39,15 @@ export const VuiCode = (_a) => {
         "vuiCode--fullHeight": fullHeight
     });
     const testId = rest["data-testid"];
-    return (_jsxs("div", Object.assign({ className: containerClasses }, rest, { children: [_jsx("pre", Object.assign({ className: "vuiCodePre" }, { children: _jsx("code", Object.assign({ className: classes }, { children: children })) })), _jsx(VuiIconButton, { color: "neutral", icon: _jsx(VuiIcon, { children: _jsx(BiClipboard, { size: 20 }) }), "aria-label": "Copy to clipboard", className: "vuiCodeCopyButton", onClick: () => {
+    const actions = (_jsxs(VuiFlexContainer, Object.assign({ className: "vuiCodeActions", spacing: "xxs" }, { children: [isFullscreenEnabled && (_jsx(VuiIconButton, { color: "neutral", size: "xs", icon: _jsx(VuiIcon, { children: _jsx(BiFullscreen, {}) }), "aria-label": "Full screen", onClick: () => {
+                    setIsFullscreen(!isFullscreen);
+                } })), _jsx(VuiIconButton, { color: "neutral", size: "xs", icon: _jsx(VuiIcon, { children: _jsx(BiClipboard, {}) }), "aria-label": "Copy to clipboard", onClick: () => {
                     navigator.clipboard.writeText(children);
                     if (onCopy)
                         onCopy();
-                } }), testId && (_jsx("div", Object.assign({ "data-testid": `${testId}-hidden`, hidden: true }, { children: children })))] })));
+                } })] })));
+    const code = (_jsx("pre", Object.assign({ className: "vuiCodePre" }, { children: _jsx("code", Object.assign({ className: classes }, { children: children })) })));
+    return (_jsxs("div", Object.assign({ className: containerClasses }, rest, { children: [code, actions, testId && (_jsx("div", Object.assign({ "data-testid": `${testId}-hidden`, hidden: true }, { children: children }))), isFullscreen && (_jsx(FocusOn, Object.assign({ onEscapeKey: () => {
+                    setIsFullscreen(false);
+                } }, { children: _jsxs("div", Object.assign({ className: "vuiCodeFullscreen" }, { children: [_jsx(VuiIconButton, { className: "vuiCodeFullscreen__closeButton", color: "neutral", size: "m", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), "aria-label": "Exit fullscreen code", onClick: () => setIsFullscreen(false) }), code] })) })))] })));
 };

package/lib/components/code/_index.scss

@@ -8,9 +8,9 @@
   max-height: 100%;
 }
 
-.vuiCodeCopyButton {
+.vuiCodeActions {
   position: absolute;
-  right: $sizeXxs;
+  right: $sizeS;
   top: $sizeXxs;
 }
 
@@ -27,7 +27,26 @@
   background-color: $colorLightShade;
   color: $colorText;
   font-family: "Roboto Mono", monospace;
-  word-wrap: break-word;
-  white-space: pre-wrap;
+  // Ensure PrismJS components wrap their lines.
+  word-wrap: break-word !important;
+  white-space: pre-wrap !important;
   font-size: $fontSizeSmall !important;
 }
+
+.vuiCodeFullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $fullscreenZIndex;
+  // PrismJS theme color.
+  background-color: #f5f2f0;
+  overflow: auto;
+}
+
+.vuiCodeFullscreen__closeButton {
+  position: absolute;
+  right: $sizeS;
+  top: $sizeXxs;
+}

package/lib/components/drawer/Drawer.js

@@ -49,5 +49,5 @@ export const VuiDrawer = (_a) => {
                 returnFocus: false, 
                 // Enable focus on contents when it's open,
                 // but enable manual focus return to work when it's closed.
-                autoFocus: isOpen }, { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiDrawerHeader" }, { 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: "vuiDrawerHeader__title" }, { children: _jsx(DrawerTitle, { children: title }) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "data-testid": "drawerCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiDrawerContent" }, { children: _jsx("div", Object.assign({ className: "vuiDrawerContent__inner" }, { children: children })) }))] })) })) })) }));
+                autoFocus: isOpen }, { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiDrawerHeader" }, { 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: "vuiDrawerHeader__title" }, { children: _jsx(DrawerTitle, { children: title }) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close drawer", "data-testid": "drawerCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiDrawerContent" }, { children: _jsx("div", Object.assign({ className: "vuiDrawerContent__inner" }, { children: children })) }))] })) })) })) }));
 };

package/lib/components/drawer/_index.scss

@@ -28,11 +28,12 @@ $drawerWidth: 680px;
 }
 
 .vuiDrawerHeader {
-  padding: $sizeL $sizeL;
+  padding: $sizeS $sizeL;
+  background-color: $colorLightShade;
 }
 
 .vuiDrawerHeader__title {
-  font-size: $fontSizeXLarge;
+  font-size: $fontSizeMedium;
   font-weight: $fontWeightBold;
   line-height: 1.2;
   color: $colorText;
@@ -50,11 +51,9 @@ $drawerWidth: 680px;
 // Color
 $color: (
   primary: (
-    "background-color": $colorPrimaryLightShade,
-    "color": $colorText
+    "color": $colorPrimary
   ),
   danger: (
-    "background-color": $colorDangerLightShade,
     "color": $colorDanger
   )
 );
@@ -62,9 +61,6 @@ $color: (
 @each $colorName, $colorValue in $color {
   .vuiDrawer--#{$colorName} {
     .vuiDrawerHeader {
-      background-color: #{map.get($colorValue, "background-color")};
-
-      .vuiDrawerHeader__title,
       .vuiIcon {
         color: #{map.get($colorValue, "color")};
       }

package/lib/components/form/index.d.ts

@@ -7,4 +7,5 @@ export { VuiSuperRadioGroup } from "./superRadioGroup/SuperRadioGroup";
 export { VuiTextInput } from "./input/TextInput";
 export { VuiTextArea } from "./textArea/TextArea";
 export { VuiPasswordInput } from "./input/PasswordInput";
+export type { Props as TextInputProps } from "./input/TextInput";
 export type { RadioButtonConfig } from "./superRadioGroup/types";

package/lib/components/form/input/TextInput.d.ts

@@ -1,4 +1,9 @@
 import { BasicInputProps } from "./BasicInput";
+export type Props = BasicInputProps & {
+    value?: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    maxLength?: number;
+};
 export declare const VuiTextInput: import("react").ForwardRefExoticComponent<BasicInputProps & {
     value?: string | undefined;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;

package/lib/components/form/textArea/TextArea.d.ts

@@ -7,6 +7,7 @@ type Props = {
     onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
     placeholder?: string;
     maxLength?: number;
+    isInvalid?: boolean;
 };
 export declare const VuiTextArea: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLTextAreaElement | null>>;
 export {};

package/lib/components/form/textArea/TextArea.js

@@ -13,8 +13,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames";
 export const VuiTextArea = forwardRef((_a, ref) => {
-    var { className, id, placeholder, value, onChange, fullWidth, name } = _a, rest = __rest(_a, ["className", "id", "placeholder", "value", "onChange", "fullWidth", "name"]);
+    var { className, id, placeholder, value, onChange, fullWidth, name, isInvalid } = _a, rest = __rest(_a, ["className", "id", "placeholder", "value", "onChange", "fullWidth", "name", "isInvalid"]);
     const classes = classNames("vuiTextArea", {
+        "vuiTextArea-isInvalid": isInvalid,
         "vuiTextArea--fullWidth": fullWidth
     }, className);
     return (_jsx("textarea", Object.assign({ ref: ref, className: classes, id: id, name: name, placeholder: placeholder, value: value, onChange: onChange }, rest)));

package/lib/components/form/textArea/_index.scss

@@ -9,6 +9,10 @@
   padding: $sizeS;
 }
 
+.vuiTextArea-isInvalid {
+  border-color: $colorDanger;
+}
+
 .vuiTextArea--fullWidth {
   width: 100%;
 }

package/lib/components/formGroup/FormGroup.js

@@ -5,6 +5,11 @@ import { VuiSpacer } from "../spacer/Spacer";
 import { VuiText } from "../typography/Text";
 import { VuiTextColor } from "../typography/TextColor";
 import { createId } from "../../utils/createId";
+import { VuiTextInput } from "../form/input/TextInput";
+import { VuiNumberInput } from "../form/input/NumberInput";
+import { VuiTextArea } from "../form/textArea/TextArea";
+import { VuiSelect } from "../form/select/Select";
+const VALIDATION_ALLOWLIST = [VuiTextInput, VuiNumberInput, VuiTextArea, VuiSelect];
 export const VuiFormGroup = ({ children, labelFor, helpText, label, errors, isRequired }) => {
     const ariaProps = {
         "aria-describedby": ""
@@ -22,6 +27,11 @@ export const VuiFormGroup = ({ children, labelFor, helpText, label, errors, isRe
     if (errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.length) {
         ariaProps["aria-describedby"] += " " + errorMessageIds.join(" ");
     }
-    const content = cloneElement(children, Object.assign(Object.assign({}, ariaProps), { isInvalid: errors && errors.length > 0, id: labelFor, required: isRequired }));
+    const cloneProps = Object.assign(Object.assign({}, ariaProps), { id: labelFor, required: isRequired });
+    const canValidateChild = VALIDATION_ALLOWLIST.includes(children.type);
+    if (canValidateChild) {
+        cloneProps.isInvalid = errors && errors.length > 0;
+    }
+    const content = cloneElement(children, cloneProps);
     return (_jsxs("div", { children: [_jsxs(VuiLabel, Object.assign({ labelFor: labelFor }, { children: [label, isRequired && " (required)"] })), _jsx(VuiSpacer, { size: "xs" }), helpText && (_jsxs(_Fragment, { children: [_jsx(VuiText, Object.assign({ size: "xs", id: ariaDescribedByLabel }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: helpText })) }) })), _jsx(VuiSpacer, { size: "xs" })] })), errorMessages && (_jsxs(_Fragment, { children: [errorMessages, _jsx(VuiSpacer, { size: "xs" })] })), content] }));
 };

package/lib/components/icon/Icon.js

@@ -33,5 +33,5 @@ export const VuiIcon = (_a) => {
     const icon = cloneElement(children, {
         size: sizeToValueMap[size]
     });
-    return (_jsx(IconContext.Provider, Object.assign({ value: { className: innerClasses } }, { children: _jsx("div", Object.assign({ className: classes }, rest, { children: icon })) })));
+    return (_jsx(IconContext.Provider, Object.assign({ value: { className: innerClasses } }, { children: _jsx("span", Object.assign({ className: classes }, rest, { children: icon })) })));
 };

package/lib/components/icon/_index.scss

@@ -1,4 +1,5 @@
 .vuiIcon {
+  display: inline-block;
   // Remove extra space at bottom of icon.
   line-height: 0;
 }