@vectara/vectara-ui 15.0.1 → 15.0.3

package/lib/components/button/iconButton.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 .vuiIconButton {
   display: inline-block;
   border-radius: $sizeXxs;
@@ -7,26 +9,47 @@
 
 // Color
 $color: (
-  accent: var(--vui-color-accent-shade-rgb),
-  primary: var(--vui-color-primary-shade-rgb),
-  success: var(--vui-color-success-shade-rgb),
-  warning: var(--vui-color-warning-shade-rgb),
-  danger: var(--vui-color-danger-shade-rgb),
-  neutral: var(--vui-color-darker-shade-rgb),
-  subdued: var(--vui-color-subdued-shade-rgb)
+  accent: (
+    "color": var(--vui-color-accent-shade-rgb),
+    "background-color": var(--vui-color-accent-shade-rgb)
+  ),
+  primary: (
+    "color": var(--vui-color-primary-shade-rgb),
+    "background-color": var(--vui-color-primary-shade-rgb)
+  ),
+  success: (
+    "color": var(--vui-color-success-shade-rgb),
+    "background-color": var(--vui-color-success-shade-rgb)
+  ),
+  danger: (
+    "color": var(--vui-color-danger-shade-rgb),
+    "background-color": var(--vui-color-danger-shade-rgb)
+  ),
+  warning: (
+    "color": var(--vui-color-warning-shade-rgb),
+    "background-color": var(--vui-color-warning-shade-rgb)
+  ),
+  neutral: (
+    "color": var(--vui-color-darker-shade-rgb),
+    "background-color": var(--vui-color-subdued-shade-rgb)
+  ),
+  subdued: (
+    "color": var(--vui-color-subdued-shade-rgb),
+    "background-color": var(--vui-color-subdued-shade-rgb)
+  )
 );
 
 @each $colorName, $colorValue in $color {
   .vuiIconButton--#{$colorName} {
-    color: rgb($colorValue);
-    background-color: rgba($colorValue, 0);
+    color: rgb(#{map.get($colorValue, "color")});
+    background-color: rgba(#{map.get($colorValue, "background-color")}, 0);
 
     &:hover {
-      background-color: rgba($colorValue, 0.1);
+      background-color: rgba(#{map.get($colorValue, "background-color")}, 0.1);
     }
 
     &-isSelected {
-      background-color: rgba($colorValue, 0.1);
+      background-color: rgba(#{map.get($colorValue, "background-color")}, 0.1);
     }
   }
 }

package/lib/components/form/_index.scss

@@ -5,5 +5,6 @@
 @import "label/index";
 @import "radioButton/index";
 @import "select/index";
+@import "superCheckboxGroup/index";
 @import "superRadioGroup/index";
 @import "textArea/index";

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

@@ -6,10 +6,12 @@ export { VuiLabel } from "./label/Label";
 export { VuiNumberInput } from "./input/NumberInput";
 export { VuiRadioButton } from "./radioButton/RadioButton";
 export { VuiSelect } from "./select/Select";
+export { VuiSuperCheckboxGroup } from "./superCheckboxGroup/SuperCheckboxGroup";
 export { VuiSuperRadioGroup } from "./superRadioGroup/SuperRadioGroup";
 export { VuiTextInput } from "./input/TextInput";
 export { VuiTextArea } from "./textArea/TextArea";
 export { VuiPasswordInput } from "./input/PasswordInput";
 export type { CodeEditorError, CodeEditorColorConfig } from "./codeEditor/CodeEditor";
 export type { Props as TextInputProps } from "./input/TextInput";
+export type { CheckboxConfig } from "./superCheckboxGroup/types";
 export type { RadioButtonConfig } from "./superRadioGroup/types";

package/lib/components/form/index.js

@@ -6,6 +6,7 @@ export { VuiLabel } from "./label/Label";
 export { VuiNumberInput } from "./input/NumberInput";
 export { VuiRadioButton } from "./radioButton/RadioButton";
 export { VuiSelect } from "./select/Select";
+export { VuiSuperCheckboxGroup } from "./superCheckboxGroup/SuperCheckboxGroup";
 export { VuiSuperRadioGroup } from "./superRadioGroup/SuperRadioGroup";
 export { VuiTextInput } from "./input/TextInput";
 export { VuiTextArea } from "./textArea/TextArea";

package/lib/components/form/superCheckboxGroup/SuperCheckbox.d.ts

@@ -0,0 +1,6 @@
+import { CheckboxConfig } from "./types";
+type Props<T> = CheckboxConfig<T> & {
+    onChange: (value: string) => void;
+};
+export declare const VuiSuperCheckbox: <T extends string>({ label, description, value, checked, onChange, ...rest }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/form/superCheckboxGroup/SuperCheckbox.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createId } from "../../../utils/createId";
+import { VuiFlexContainer } from "../../flex/FlexContainer";
+import { VuiFlexItem } from "../../flex/FlexItem";
+import { VuiSpacer } from "../../spacer/Spacer";
+import { VuiText } from "../../typography/Text";
+export const VuiSuperCheckbox = (_a) => {
+    var { label, description, value, checked, onChange } = _a, rest = __rest(_a, ["label", "description", "value", "checked", "onChange"]);
+    const id = createId();
+    return (_jsx("label", Object.assign({ className: "vuiSuperCheckbox", htmlFor: id }, { children: _jsxs(VuiFlexContainer, Object.assign({ spacing: "l", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: 0 }, { children: _jsx("input", Object.assign({ id: id, type: "checkbox", checked: checked, onChange: () => onChange(value) }, rest)) })), _jsxs(VuiFlexItem, Object.assign({ grow: false, shrink: 1 }, { children: [_jsx(VuiText, { children: _jsx("p", Object.assign({ className: "vuiSuperCheckbox__text" }, { children: label })) }), description && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xxs" }), _jsx(VuiText, Object.assign({ size: "xs" }, { children: _jsx("p", Object.assign({ className: "vuiSuperCheckbox__text vuiSuperCheckbox__description" }, { children: description })) }))] }))] }))] })) })));
+};

package/lib/components/form/superCheckboxGroup/SuperCheckboxGroup.d.ts

@@ -0,0 +1,7 @@
+import { CheckboxConfig } from "./types";
+type Props<T> = {
+    group: CheckboxConfig<T>[];
+    onChange: (value: string) => void;
+};
+export declare const VuiSuperCheckboxGroup: <T extends string>({ group, onChange }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/form/superCheckboxGroup/SuperCheckboxGroup.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VuiSuperCheckbox } from "./SuperCheckbox";
+export const VuiSuperCheckboxGroup = ({ group, onChange }) => {
+    return (_jsx("div", Object.assign({ className: "vuiSuperCheckboxGroup" }, { children: group.map((item) => (_jsx(VuiSuperCheckbox, Object.assign({}, item, { onChange: onChange }), item.value))) })));
+};

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

@@ -0,0 +1,29 @@
+.vuiSuperCheckboxGroup {
+  display: grid;
+}
+
+.vuiSuperCheckbox {
+  display: block;
+  width: 100%;
+  border-radius: $sizeXs;
+  padding: $sizeS $sizeL;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all $transitionSpeed;
+  text-decoration-color: var(--vui-color-text);
+  text-align: left;
+
+  &:hover {
+    text-decoration: underline;
+    text-decoration-color: var(--vui-color-primary-shade);
+    background-color: var(--vui-color-primary-lighter-shade);
+
+    .vuiSuperCheckbox__text {
+      color: var(--vui-color-primary-shade) !important;
+    }
+  }
+}
+
+.vuiSuperCheckbox__description {
+  color: var(--vui-color-subdued-shade);
+}

package/lib/components/form/superCheckboxGroup/types.d.ts

@@ -0,0 +1,8 @@
+export type CheckboxConfig<T> = {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    value: T;
+    checked: boolean;
+    disabled?: boolean;
+    "data-testid"?: string;
+};

package/lib/components/form/superCheckboxGroup/types.js

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

package/lib/components/index.d.ts

@@ -29,7 +29,7 @@ import { VuiDrawer } from "./drawer/Drawer";
 import { VuiErrorBoundary } from "./errorBoundary/ErrorBoundary";
 import { VuiFlexContainer } from "./flex/FlexContainer";
 import { VuiFlexItem } from "./flex/FlexItem";
-import { CodeEditorColorConfig, CodeEditorError, RadioButtonConfig, generateTokensProvider, VuiCheckbox, VuiCodeEditor, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
+import { CheckboxConfig, CodeEditorColorConfig, CodeEditorError, RadioButtonConfig, generateTokensProvider, VuiCheckbox, VuiCodeEditor, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
 import { VuiFormGroup } from "./formGroup/FormGroup";
 import { VuiGrid, VuiGridItem, VuiSimpleGrid } from "./grid";
 import { VuiHorizontalRule } from "./horizontalRule/HorizontalRule";
@@ -91,5 +91,5 @@ import { VuiTooltip } from "./tooltip/Tooltip";
 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, CodeEditorColorConfig, CodeEditorError, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, Stat, StepStatus, StepSize, TabSize, Tree, TreeItem, VuiStepProps };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, 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, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, Stat, StepStatus, StepSize, TabSize, Tree, TreeItem, VuiStepProps };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, 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, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/index.js

@@ -25,7 +25,7 @@ import { VuiDrawer } from "./drawer/Drawer";
 import { VuiErrorBoundary } from "./errorBoundary/ErrorBoundary";
 import { VuiFlexContainer } from "./flex/FlexContainer";
 import { VuiFlexItem } from "./flex/FlexItem";
-import { generateTokensProvider, VuiCheckbox, VuiCodeEditor, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
+import { generateTokensProvider, VuiCheckbox, VuiCodeEditor, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
 import { VuiFormGroup } from "./formGroup/FormGroup";
 import { VuiGrid, VuiGridItem, VuiSimpleGrid } from "./grid";
 import { VuiHorizontalRule } from "./horizontalRule/HorizontalRule";
@@ -84,4 +84,4 @@ import { VuiTooltip } from "./tooltip/Tooltip";
 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, 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, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, 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, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/searchInput/SearchInput.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, FormEventHandler } from "react";
+import { ChangeEventHandler, FormEventHandler, KeyboardEventHandler } from "react";
 import { SearchSuggestion } from "./types";
 declare const SIZE: readonly ["m", "l"];
 type Props = {
@@ -6,6 +6,7 @@ type Props = {
     value?: string;
     size?: (typeof SIZE)[number];
     onChange?: ChangeEventHandler<HTMLInputElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
     placeholder?: string;
     autoFocus?: boolean;
     onSubmit?: FormEventHandler;
@@ -19,5 +20,5 @@ type ClearableProps = {
     isClearable?: false;
     onClear?: never;
 };
-export declare const VuiSearchInput: ({ className, size, value, onChange, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, isLoading, ...rest }: Props & ClearableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiSearchInput: ({ className, size, value, onChange, onKeyDown, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, isLoading, ...rest }: Props & ClearableProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/searchInput/SearchInput.js

@@ -20,7 +20,7 @@ import { createId } from "../../utils/createId";
 import { VuiSpinner } from "../spinner/Spinner";
 const SIZE = ["m", "l"];
 export const VuiSearchInput = (_a) => {
-    var { className, size = "m", value, onChange, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, isLoading } = _a, rest = __rest(_a, ["className", "size", "value", "onChange", "placeholder", "autoFocus", "onSubmit", "isClearable", "onClear", "suggestions", "isLoading"]);
+    var { className, size = "m", value, onChange, onKeyDown, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, isLoading } = _a, rest = __rest(_a, ["className", "size", "value", "onChange", "onKeyDown", "placeholder", "autoFocus", "onSubmit", "isClearable", "onClear", "suggestions", "isLoading"]);
     const classes = classNames("vuiSearchInput", `vuiSearchInput--${size}`, className);
     const inputRef = useRef(null);
     const containerRef = useRef(null);
@@ -139,7 +139,10 @@ export const VuiSearchInput = (_a) => {
     const inputClasses = classNames("vuiSearchInput__input", {
         "vuiSearchInput__input--hasSuggestions": hasSuggestions
     });
-    return (_jsx("form", Object.assign({ onSubmit: onSubmit, role: "search" }, { children: _jsxs("div", Object.assign({ ref: containerRef, className: classes, "aria-live": "polite", "aria-atomic": "true", "aria-busy": isLoading ? "true" : "false" }, { children: [_jsx("input", Object.assign({ ref: inputRef, className: inputClasses, type: "text", autoComplete: "off", autoCapitalize: "off", spellCheck: "false", autoFocus: autoFocus, placeholder: placeholder, value: value, onChange: onChange, onFocus: handleInputFocus, onKeyDown: handleInputKeyDown, "aria-autocomplete": "list", "aria-controls": hasSuggestions ? controlsId : undefined }, rest)), _jsx("div", Object.assign({ className: "vuiSearchInput__icon" }, { children: isLoading ? (_jsx(VuiSpinner, { size: size === "m" ? "s" : "m" })) : (_jsx(VuiIcon, Object.assign({ color: "subdued", size: size === "m" ? "s" : "m" }, { children: _jsx(BiSearch, {}) }))) })), isClearable && value && (_jsx(VuiIconButton, { "aria-label": "Clear input", className: "vuiSearchInput__clearButton", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: (e) => {
+    return (_jsx("form", Object.assign({ onSubmit: onSubmit, role: "search" }, { children: _jsxs("div", Object.assign({ ref: containerRef, className: classes, "aria-live": "polite", "aria-atomic": "true", "aria-busy": isLoading ? "true" : "false" }, { children: [_jsx("input", Object.assign({ ref: inputRef, className: inputClasses, type: "text", autoComplete: "off", autoCapitalize: "off", spellCheck: "false", autoFocus: autoFocus, placeholder: placeholder, value: value, onChange: onChange, onFocus: handleInputFocus, onKeyDown: (e) => {
+                        handleInputKeyDown(e);
+                        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+                    }, "aria-autocomplete": "list", "aria-controls": hasSuggestions ? controlsId : undefined }, rest)), _jsx("div", Object.assign({ className: "vuiSearchInput__icon" }, { children: isLoading ? (_jsx(VuiSpinner, { size: size === "m" ? "s" : "m" })) : (_jsx(VuiIcon, Object.assign({ color: "subdued", size: size === "m" ? "s" : "m" }, { children: _jsx(BiSearch, {}) }))) })), isClearable && value && (_jsx(VuiIconButton, { "aria-label": "Clear input", className: "vuiSearchInput__clearButton", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: (e) => {
                         e.preventDefault();
                         onClear();
                     } })), hasSuggestions && (_jsx(VuiSearchInputSuggestions, { id: controlsId, suggestions: suggestions, onSuggestionKeyDown: handleSuggestionKeyDown, suggestionRefs: suggestionRefs }))] })) })));

package/lib/styles/index.css

@@ -1006,17 +1006,6 @@ fieldset {
   background-color: rgba(var(--vui-color-success-shade-rgb), 0.1);
 }
 
-.vuiIconButton--warning {
-  color: rgb(var(--vui-color-warning-shade-rgb));
-  background-color: rgba(var(--vui-color-warning-shade-rgb), 0);
-}
-.vuiIconButton--warning:hover {
-  background-color: rgba(var(--vui-color-warning-shade-rgb), 0.1);
-}
-.vuiIconButton--warning-isSelected {
-  background-color: rgba(var(--vui-color-warning-shade-rgb), 0.1);
-}
-
 .vuiIconButton--danger {
   color: rgb(var(--vui-color-danger-shade-rgb));
   background-color: rgba(var(--vui-color-danger-shade-rgb), 0);
@@ -1028,15 +1017,26 @@ fieldset {
   background-color: rgba(var(--vui-color-danger-shade-rgb), 0.1);
 }
 
+.vuiIconButton--warning {
+  color: rgb(var(--vui-color-warning-shade-rgb));
+  background-color: rgba(var(--vui-color-warning-shade-rgb), 0);
+}
+.vuiIconButton--warning:hover {
+  background-color: rgba(var(--vui-color-warning-shade-rgb), 0.1);
+}
+.vuiIconButton--warning-isSelected {
+  background-color: rgba(var(--vui-color-warning-shade-rgb), 0.1);
+}
+
 .vuiIconButton--neutral {
   color: rgb(var(--vui-color-darker-shade-rgb));
-  background-color: rgba(var(--vui-color-darker-shade-rgb), 0);
+  background-color: rgba(var(--vui-color-subdued-shade-rgb), 0);
 }
 .vuiIconButton--neutral:hover {
-  background-color: rgba(var(--vui-color-darker-shade-rgb), 0.1);
+  background-color: rgba(var(--vui-color-subdued-shade-rgb), 0.1);
 }
 .vuiIconButton--neutral-isSelected {
-  background-color: rgba(var(--vui-color-darker-shade-rgb), 0.1);
+  background-color: rgba(var(--vui-color-subdued-shade-rgb), 0.1);
 }
 
 .vuiIconButton--subdued {
@@ -2870,6 +2870,34 @@ h2.react-datepicker__current-month {
   max-width: 100%;
 }
 
+.vuiSuperCheckboxGroup {
+  display: grid;
+}
+
+.vuiSuperCheckbox {
+  display: block;
+  width: 100%;
+  border-radius: 8px;
+  padding: 12px 24px;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 0.2s;
+  text-decoration-color: var(--vui-color-text);
+  text-align: left;
+}
+.vuiSuperCheckbox:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--vui-color-primary-shade);
+  background-color: var(--vui-color-primary-lighter-shade);
+}
+.vuiSuperCheckbox:hover .vuiSuperCheckbox__text {
+  color: var(--vui-color-primary-shade) !important;
+}
+
+.vuiSuperCheckbox__description {
+  color: var(--vui-color-subdued-shade);
+}
+
 .vuiSuperRadioGroup {
   display: grid;
 }

package/package.json

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