@vectara/vectara-ui 18.2.3 → 18.4.0

package/lib/components/chip/Chip.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    children: React.ReactNode;
+    isActive?: boolean;
+    onClick: () => void;
+    append?: React.ReactNode;
+    "data-testid"?: string;
+};
+export declare const VuiChip: ({ children, isActive, append, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/chip/Chip.js

@@ -0,0 +1,20 @@
+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 classNames from "classnames";
+export const VuiChip = (_a) => {
+    var { children, isActive, append } = _a, rest = __rest(_a, ["children", "isActive", "append"]);
+    const classes = classNames("vuiChip", {
+        "vuiChip-isActive": isActive
+    });
+    return (_jsxs("button", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiChip__label" }, { children: children })), append && _jsx("div", Object.assign({ className: "vuiChip__append" }, { children: append }))] })));
+};

package/lib/components/chip/_index.scss

@@ -0,0 +1,49 @@
+.vuiChip {
+  display: inline-flex;
+  align-items: center;
+  gap: $sizeXs;
+  border: 1px solid var(--vui-color-border-light);
+  background-color: var(--vui-color-light-shade);
+  padding: $sizeXxs $sizeS;
+  border-radius: $sizeM;
+  transition: all $transitionSpeed;
+  box-shadow: $shadowSmallStart;
+
+  &:hover {
+    box-shadow: $shadowSmallEnd;
+    border-color: var(--vui-color-medium-shade);
+  }
+}
+
+.vuiChip__label {
+  font-weight: $fontWeightStrong;
+  font-size: $fontSizeStandard;
+  color: var(--vui-color-text);
+  // Ensures consistent chip height regardless of whether
+  // append is present or not.
+  line-height: 1.6;
+}
+
+.vuiChip__append {
+  color: var(--vui-color-subdued-shade);
+  padding: $sizeXxs $sizeXs;
+  font-size: $fontSizeSmall;
+  border-radius: $sizeS;
+}
+
+.vuiChip-isActive {
+  border: 1px solid var(--vui-color-primary-shade);
+  background-color: var(--vui-color-empty-shade);
+
+  &:hover {
+    border: 1px solid var(--vui-color-primary-shade);
+  }
+
+  .vuiChip__label,
+  .vuiChip__append {
+    color: var(--vui-color-primary-shade);
+  }
+  .vuiChip__append {
+    background-color: var(--vui-color-primary-lighter-shade);
+  }
+}

package/lib/components/formGroup/BlockFormGroup.d.ts

@@ -0,0 +1,2 @@
+import { FormGroupProps } from "./types";
+export declare const VuiBlockFormGroup: ({ label, labelRightContent, labelFor, labelSize, isRequired, helpText, ariaDescribedByLabel, errorMessages, content }: FormGroupProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/formGroup/BlockFormGroup.js

@@ -0,0 +1,9 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { VuiLabel } from "../form/label/Label";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiText } from "../typography/Text";
+import { VuiTextColor } from "../typography/TextColor";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+export const VuiBlockFormGroup = ({ label, labelRightContent, labelFor, labelSize, isRequired, helpText, ariaDescribedByLabel, errorMessages, content }) => {
+    return (_jsxs("div", { children: [(label || labelRightContent) && (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center", spacing: "s" }, { children: [label ? (_jsxs(VuiLabel, Object.assign({ labelFor: labelFor, size: labelSize }, { children: [label, isRequired && " (required)"] }))) : (_jsx("span", {})), labelRightContent] })), _jsx(VuiSpacer, { size: labelSize === "s" ? "xs" : "xxs" })] })), 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/formGroup/FormGroup.d.ts

@@ -7,6 +7,7 @@ type Props = {
     helpText?: React.ReactNode;
     errors?: string[];
     isRequired?: boolean;
+    inline?: boolean;
 };
-export declare const VuiFormGroup: ({ children, labelFor, helpText, label, labelSize, labelRightContent, errors, isRequired }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiFormGroup: ({ children, labelFor, helpText, label, labelSize, labelRightContent, errors, isRequired, inline }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/formGroup/FormGroup.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement } from "react";
-import { VuiLabel } from "../form/label/Label";
 import { VuiSpacer } from "../spacer/Spacer";
 import { VuiText } from "../typography/Text";
 import { VuiTextColor } from "../typography/TextColor";
@@ -9,9 +8,10 @@ import { VuiTextInput } from "../form/input/TextInput";
 import { VuiNumberInput } from "../form/input/NumberInput";
 import { VuiTextArea } from "../form/textArea/TextArea";
 import { VuiSelect } from "../form/select/Select";
-import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiInlineFormGroup } from "./InlineFormGroup";
+import { VuiBlockFormGroup } from "./BlockFormGroup";
 const VALIDATION_ALLOWLIST = [VuiTextInput, VuiNumberInput, VuiTextArea, VuiSelect];
-export const VuiFormGroup = ({ children, labelFor, helpText, label, labelSize = "s", labelRightContent, errors, isRequired }) => {
+export const VuiFormGroup = ({ children, labelFor, helpText, label, labelSize = "s", labelRightContent, errors, isRequired, inline }) => {
     const ariaProps = {
         "aria-describedby": ""
     };
@@ -20,7 +20,7 @@ export const VuiFormGroup = ({ children, labelFor, helpText, label, labelSize =
     const errorMessages = errors === null || errors === void 0 ? void 0 : errors.map((error, index) => {
         const id = `error-${createId()}`;
         errorMessageIds.push(id);
-        return (_jsxs("div", { children: [index > 0 && _jsx(VuiSpacer, { size: "xs" }), _jsx(VuiText, Object.assign({ size: "xs", id: id }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "danger" }, { children: error })) }) }), error)] }, error));
+        return (_jsxs("div", { children: [index > 0 && _jsx(VuiSpacer, { size: "xs" }), _jsx(VuiText, Object.assign({ size: "xs", id: id }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: inline ? "empty" : "danger" }, { children: error })) }) }), error)] }, error));
     });
     if (helpText) {
         ariaProps["aria-describedby"] += ariaDescribedByLabel;
@@ -34,5 +34,19 @@ export const VuiFormGroup = ({ children, labelFor, helpText, label, labelSize =
         cloneProps.isInvalid = errors && errors.length > 0;
     }
     const content = cloneElement(children, cloneProps);
-    return (_jsxs("div", { children: [(label || labelRightContent) && (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center", spacing: "s" }, { children: [label ? (_jsxs(VuiLabel, Object.assign({ labelFor: labelFor, size: labelSize }, { children: [label, isRequired && " (required)"] }))) : (_jsx("span", {})), labelRightContent] })), _jsx(VuiSpacer, { size: labelSize === "s" ? "xs" : "xxs" })] })), 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] }));
+    const props = {
+        label,
+        labelRightContent,
+        labelFor,
+        labelSize,
+        isRequired,
+        helpText,
+        ariaDescribedByLabel,
+        errorMessages,
+        content
+    };
+    if (inline) {
+        return _jsx(VuiInlineFormGroup, Object.assign({}, props));
+    }
+    return _jsx(VuiBlockFormGroup, Object.assign({}, props));
 };

package/lib/components/formGroup/InlineFormGroup.d.ts

@@ -0,0 +1,2 @@
+import { FormGroupProps } from "./types";
+export declare const VuiInlineFormGroup: ({ label, labelRightContent, labelFor, labelSize, isRequired, helpText, ariaDescribedByLabel, errorMessages, content }: FormGroupProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/formGroup/InlineFormGroup.js

@@ -0,0 +1,14 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { VuiLabel } from "../form/label/Label";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiInfoTooltip } from "../tooltip/InfoTooltip";
+import { BiError } from "react-icons/bi";
+import classNames from "classnames";
+import { VuiTextColor } from "../typography/TextColor";
+export const VuiInlineFormGroup = ({ label, labelRightContent, labelFor, labelSize, isRequired, helpText, ariaDescribedByLabel, errorMessages, content }) => {
+    const hasErrors = errorMessages && errorMessages.length > 0;
+    const classes = classNames("vuiInlineFormGroup", {
+        "vuiInlineFormGroup-hasError": hasErrors
+    });
+    return (_jsxs(VuiFlexContainer, Object.assign({ className: classes, spacing: "none", alignItems: "stretch" }, { children: [(label || labelRightContent) && (_jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", className: "vuiInlineFormGroup__label", alignItems: "center", spacing: "xs" }, { children: [label ? (_jsx(VuiLabel, Object.assign({ labelFor: labelFor, size: labelSize }, { children: _jsxs(VuiTextColor, Object.assign({ color: "subdued" }, { children: [label, isRequired && " (required)"] })) }))) : (_jsx("span", {})), labelRightContent, helpText && _jsx(VuiInfoTooltip, { tip: helpText, id: ariaDescribedByLabel }), hasErrors && _jsx(VuiInfoTooltip, { color: "danger", icon: _jsx(BiError, {}), tip: errorMessages })] }))), content] })));
+};

package/lib/components/formGroup/_index.scss

@@ -0,0 +1,25 @@
+.vuiInlineFormGroup {
+  select,
+  input,
+  textarea {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: none;
+  }
+}
+
+.vuiInlineFormGroup__label {
+  border-top-left-radius: $sizeXxs;
+  border-bottom-left-radius: $sizeXxs;
+  background-color: var(--vui-color-light-shade);
+  padding: 0 $sizeS;
+  border: 1px solid var(--vui-color-medium-shade);
+}
+
+.vuiInlineFormGroup-hasError {
+  .vuiInlineFormGroup__label {
+    border-top-color: var(--vui-color-danger-shade);
+    border-left-color: var(--vui-color-danger-shade);
+    border-bottom-color: var(--vui-color-danger-shade);
+  }
+}

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

@@ -0,0 +1,11 @@
+export type FormGroupProps = {
+    label?: string;
+    labelRightContent: React.ReactNode;
+    labelFor?: string;
+    labelSize: "s" | "xs";
+    isRequired?: boolean;
+    helpText: React.ReactNode;
+    ariaDescribedByLabel: string;
+    errorMessages?: JSX.Element[];
+    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+};

package/lib/components/formGroup/types.js

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

package/lib/components/index.d.ts

@@ -19,6 +19,7 @@ import { VuiCard, VuiSimpleCard } from "./card";
 import { CALLOUT_COLOR, CALLOUT_SIZE, CalloutColor } from "./callout/types";
 import { ChatTurn, ChatStyle, ChatLanguage } from "./chat/types";
 import { VuiChat } from "./chat/Chat";
+import { VuiChip } from "./chip/Chip";
 import { VuiCode } from "./code/Code";
 import { CodeLanguage } from "./code/types";
 import { VuiComplexConfigurationButton } from "./complexConfigurationButton/ComplexConfigurationButton";
@@ -105,4 +106,4 @@ import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
 export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabNavigatorRoute, TabSize, Tree, TreeItem };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/index.js

@@ -16,6 +16,7 @@ import { VuiCallout } from "./callout/Callout";
 import { VuiCard, VuiSimpleCard } from "./card";
 import { CALLOUT_COLOR, CALLOUT_SIZE } from "./callout/types";
 import { VuiChat } from "./chat/Chat";
+import { VuiChip } from "./chip/Chip";
 import { VuiCode } from "./code/Code";
 import { VuiComplexConfigurationButton } from "./complexConfigurationButton/ComplexConfigurationButton";
 import { VuiContextProvider } from "./context/Context";
@@ -95,4 +96,4 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/tooltip/InfoTooltip.d.ts

@@ -1,4 +1,7 @@
 import { Props as TooltipProps } from "./Tooltip";
-type Props = Omit<TooltipProps, "children">;
+type Props = Omit<TooltipProps, "children"> & {
+    color?: "danger" | "warning" | "success" | "subdued";
+    icon?: React.ReactNode;
+};
 export declare const VuiInfoTooltip: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/tooltip/InfoTooltip.js

@@ -1,7 +1,19 @@
+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 { BiHelpCircle } from "react-icons/bi";
 import { VuiIcon } from "../icon/Icon";
 import { VuiTooltip } from "./Tooltip";
 export const VuiInfoTooltip = (props) => {
-    return (_jsx(VuiTooltip, Object.assign({}, props, { children: _jsx(VuiIcon, Object.assign({ color: "subdued", size: "s" }, { children: _jsx(BiHelpCircle, {}) })) })));
+    const { icon, color = "subdued" } = props, rest = __rest(props, ["icon", "color"]);
+    return (_jsx(VuiTooltip, Object.assign({}, rest, { children: _jsx(VuiIcon, Object.assign({ color: color, size: "s" }, { children: icon ? icon : _jsx(BiHelpCircle, {}) })) })));
 };

package/lib/components/tooltip/Tooltip.d.ts

@@ -5,5 +5,6 @@ export type Props = {
     darkTheme?: boolean;
     position?: TooltipRefProps["place"];
     usePortal?: boolean;
+    id?: string;
 };
-export declare const VuiTooltip: ({ children, darkTheme, position, tip, usePortal }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiTooltip: ({ children, darkTheme, position, tip, usePortal, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/tooltip/Tooltip.js

@@ -1,8 +1,21 @@
+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 { useState, cloneElement } from "react";
 import { Tooltip } from "react-tooltip";
 import { useVuiContext } from "../context/Context";
 import { VuiPortal } from "../portal/Portal";
+import { VuiText } from "../typography/Text";
+import { VuiTextColor } from "../typography/TextColor";
 const generateTooltipId = () => {
     return `tooltip-${Math.random().toString(36).slice(2, 9)}`;
 };
@@ -26,15 +39,17 @@ const needsTabIndex = (element) => {
     }
     return true;
 };
-export const VuiTooltip = ({ children, darkTheme, position, tip, usePortal }) => {
+export const VuiTooltip = (_a) => {
+    var { children, darkTheme, position, tip, usePortal } = _a, rest = __rest(_a, ["children", "darkTheme", "position", "tip", "usePortal"]);
     const { getThemeStyle } = useVuiContext();
-    const [id] = useState(generateTooltipId());
-    const target = cloneElement(children, Object.assign({ "data-tooltip-id": id }, (needsTabIndex(children) && { tabIndex: 0 })));
+    const [tooltipId] = useState(generateTooltipId());
+    const target = cloneElement(children, Object.assign(Object.assign({ "data-tooltip-id": tooltipId }, (needsTabIndex(children) && { tabIndex: 0 })), rest));
     // Tooltips can be used in a dark-themed component, so we need to explicitly set
     // the light theme class in order to enable having a different theme than the
     // parent.
     const style = getThemeStyle(darkTheme ? "dark" : "light");
-    const tooltip = (_jsx(Tooltip, Object.assign({ id: id, offset: 10, className: "vuiTooltip", style: style, opacity: 1, place: position }, { children: tip })));
+    const content = typeof tip === "string" ? (_jsx(VuiText, Object.assign({ size: "xs" }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "empty" }, { children: tip })) }) }))) : (tip);
+    const tooltip = (_jsx(Tooltip, Object.assign({ id: tooltipId, offset: 10, className: "vuiTooltip", style: style, opacity: 1, place: position }, { children: content })));
     return (_jsxs(_Fragment, { children: [target, usePortal ? _jsx(VuiPortal, { children: tooltip }) : tooltip] }));
 };
 // This is a workaround for the issue with ResizeObserver in ReactTooltip.

package/lib/styles/index.css

@@ -1526,6 +1526,51 @@ fieldset {
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 }
 
+.vuiChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--vui-color-border-light);
+  background-color: var(--vui-color-light-shade);
+  padding: 4px 12px;
+  border-radius: 16px;
+  transition: all 0.2s;
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 0px 0px 0px, rgba(60, 64, 67, 0.15) 0px 0px 0px 0px;
+}
+.vuiChip:hover {
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+  border-color: var(--vui-color-medium-shade);
+}
+
+.vuiChip__label {
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--vui-color-text);
+  line-height: 1.6;
+}
+
+.vuiChip__append {
+  color: var(--vui-color-subdued-shade);
+  padding: 4px 8px;
+  font-size: 12px;
+  border-radius: 12px;
+}
+
+.vuiChip-isActive {
+  border: 1px solid var(--vui-color-primary-shade);
+  background-color: var(--vui-color-empty-shade);
+}
+.vuiChip-isActive:hover {
+  border: 1px solid var(--vui-color-primary-shade);
+}
+.vuiChip-isActive .vuiChip__label,
+.vuiChip-isActive .vuiChip__append {
+  color: var(--vui-color-primary-shade);
+}
+.vuiChip-isActive .vuiChip__append {
+  background-color: var(--vui-color-primary-lighter-shade);
+}
+
 .vuiCodeContainer {
   position: relative;
   max-height: 480px;
@@ -3051,6 +3096,28 @@ h2.react-datepicker__current-month {
   max-height: 12rem;
 }
 
+.vuiInlineFormGroup select,
+.vuiInlineFormGroup input,
+.vuiInlineFormGroup textarea {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: none;
+}
+
+.vuiInlineFormGroup__label {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  background-color: var(--vui-color-light-shade);
+  padding: 0 12px;
+  border: 1px solid var(--vui-color-medium-shade);
+}
+
+.vuiInlineFormGroup-hasError .vuiInlineFormGroup__label {
+  border-top-color: var(--vui-color-danger-shade);
+  border-left-color: var(--vui-color-danger-shade);
+  border-bottom-color: var(--vui-color-danger-shade);
+}
+
 .vuiGridContainer {
   container-type: inline-size;
   width: 100%;

package/package.json

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

package/src/docs/pages/chip/Chip.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { VuiChip, VuiFlexContainer, VuiSpacer, VuiToggle } from "../../../lib";
+
+export const Chip = () => {
+  const [hasCounts, setHasCounts] = useState(false);
+  const [activeOption, setActiveOption] = useState<"all" | "a" | "b" | "c">("all");
+
+  return (
+    <>
+      <VuiToggle checked={hasCounts} onChange={() => setHasCounts(!hasCounts)} label="Append counts" />
+
+      <VuiSpacer size="m" />
+
+      <VuiFlexContainer spacing="xs">
+        <VuiChip
+          onClick={() => setActiveOption("all")}
+          isActive={activeOption === "all"}
+          append={hasCounts ? 100 : undefined}
+        >
+          All options
+        </VuiChip>
+
+        <VuiChip
+          onClick={() => setActiveOption("a")}
+          isActive={activeOption === "a"}
+          append={hasCounts ? 2 : undefined}
+        >
+          Option A
+        </VuiChip>
+
+        <VuiChip
+          onClick={() => setActiveOption("b")}
+          isActive={activeOption === "b"}
+          append={hasCounts ? 81 : undefined}
+        >
+          Option B
+        </VuiChip>
+
+        <VuiChip
+          onClick={() => setActiveOption("c")}
+          isActive={activeOption === "c"}
+          append={hasCounts ? 16 : undefined}
+        >
+          Option C
+        </VuiChip>
+      </VuiFlexContainer>
+    </>
+  );
+};

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

@@ -0,0 +1,11 @@
+import { Chip } from "./Chip";
+const ChipSource = require("!!raw-loader!./Chip");
+
+export const chip = {
+  name: "Chip",
+  path: "/chip",
+  example: {
+    component: <Chip />,
+    source: ChipSource.default.toString()
+  }
+};

package/src/docs/pages/formGroup/FormGroup.tsx

@@ -6,13 +6,16 @@ import {
   VuiSpacer,
   VuiSuperRadioGroup,
   VuiTextArea,
-  VuiTextInput
+  VuiTextInput,
+  VuiToggle
 } from "../../../lib";
 import { Subsection } from "../../components/Subsection";
 
 type Pizza = "pepperoni" | "mushrooms" | "jalapenos";
 
 export const FormGroup = () => {
+  const [inline, setInline] = useState(false);
+  const [showError, setShowError] = useState(false);
   const [group, setGroup] = useState<RadioButtonConfig<Pizza>[]>([
     {
       label: "Pepperoni",
@@ -45,11 +48,20 @@ export const FormGroup = () => {
 
   return (
     <>
+      <VuiToggle label="Show error message" onChange={(e) => setShowError(e.target.checked)} />
+
+      <VuiSpacer size="m" />
+      <VuiToggle label="Inline" onChange={(event) => setInline(event.target.checked)} checked={inline} />
+
+      <VuiSpacer size="m" />
+
       <Subsection title="With help text">
         <VuiFormGroup
           label="Choose an option"
           labelFor="optionsList1"
           helpText="Some helpful information about this input."
+          inline={inline}
+          errors={showError ? ["This is an error message."] : []}
         >
           <VuiSelect
             id="optionsList1"
@@ -61,25 +73,48 @@ export const FormGroup = () => {
 
         <VuiSpacer size="m" />
 
-        <VuiFormGroup label="Enter input" labelFor="input1" helpText="Some helpful information about this input.">
+        <VuiFormGroup
+          label="Enter input"
+          labelFor="input1"
+          helpText="Some helpful information about this input."
+          inline={inline}
+          errors={showError ? ["This is an error message."] : []}
+        >
           <VuiTextInput id="input1" value="Text input" onChange={(event) => console.log(event.target.value)} />
         </VuiFormGroup>
 
         <VuiSpacer size="m" />
 
-        <VuiFormGroup label="Select option" labelFor="superRadioGroup" helpText="Choose wisely.">
+        <VuiFormGroup
+          label="Select option"
+          labelFor="superRadioGroup"
+          helpText="Choose wisely."
+          inline={inline}
+          errors={showError ? ["This is an error message."] : []}
+        >
           <VuiSuperRadioGroup groupName="superRadioGroup" group={group} onChange={onChange} />
         </VuiFormGroup>
 
         <VuiSpacer size="m" />
 
-        <VuiFormGroup label="Enter text" labelFor="textArea" helpText="Enter some text here.">
+        <VuiFormGroup
+          label="Enter text"
+          labelFor="textArea"
+          helpText="Enter some text here."
+          inline={inline}
+          errors={showError ? ["This is an error message."] : []}
+        >
           <VuiTextArea id="textArea" value="Text area" onChange={() => undefined} />
         </VuiFormGroup>
       </Subsection>
 
       <Subsection title="Without help text">
-        <VuiFormGroup label="Choose an option" labelFor="optionsList2">
+        <VuiFormGroup
+          label="Choose an option"
+          labelFor="optionsList2"
+          inline={inline}
+          errors={showError ? ["This is an error message."] : []}
+        >
           <VuiSelect
             id="optionsList2"
             options={[{ text: "Option A", value: "a" }]}

package/src/docs/pages.tsx

@@ -8,6 +8,7 @@ import { callout } from "./pages/callout";
 import { card } from "./pages/card";
 import { chat } from "./pages/chat";
 import { checkbox } from "./pages/checkbox";
+import { chip } from "./pages/chip";
 import { code } from "./pages/code";
 import { codeEditor } from "./pages/codeEditor";
 import { complexConfigurationButton } from "./pages/complexConfigurationButton";
@@ -99,7 +100,7 @@ export const categories: Category[] = [
   },
   {
     name: "Navigation",
-    pages: [tabs, stepsVertical, steps]
+    pages: [tabs, stepsVertical, steps, chip]
   },
   {
     name: "Content",