@vectara/vectara-ui 16.10.0 → 16.12.0

package/lib/components/datePicker/DateRangePicker.d.ts

@@ -1,5 +1,6 @@
 import { BasicProps as DatePickerProps } from "./DatePicker";
 import { Props as PopoverProps } from "../popover/Popover";
+import { JSXElementConstructor, ReactElement } from "react";
 type DateProps = Pick<DatePickerProps, "placeholder" | "data-testid">;
 type Props = Pick<PopoverProps, "isOpen" | "setIsOpen" | "anchorSide" | "header"> & {
     startDate?: Date;
@@ -8,7 +9,8 @@ type Props = Pick<PopoverProps, "isOpen" | "setIsOpen" | "anchorSide" | "header"
     dateRangeProps?: DateProps;
     fullWidth?: boolean;
     canClear?: boolean;
+    input?: ReactElement<any, string | JSXElementConstructor<any>>;
     "data-testid"?: string;
 };
-export declare const VuiDateRangePicker: ({ setIsOpen, startDate, endDate, onChange, dateRangeProps, fullWidth, canClear, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiDateRangePicker: ({ setIsOpen, startDate, endDate, onChange, dateRangeProps, fullWidth, canClear, input, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/datePicker/DateRangePicker.js

@@ -16,7 +16,7 @@ import { formatDate } from "../../utils";
 import { useEffect, useState } from "react";
 import { VuiCalendar } from "./Calendar";
 export const VuiDateRangePicker = (_a) => {
-    var { setIsOpen, startDate, endDate, onChange, dateRangeProps, fullWidth, canClear } = _a, rest = __rest(_a, ["setIsOpen", "startDate", "endDate", "onChange", "dateRangeProps", "fullWidth", "canClear"]);
+    var { setIsOpen, startDate, endDate, onChange, dateRangeProps, fullWidth, canClear, input } = _a, rest = __rest(_a, ["setIsOpen", "startDate", "endDate", "onChange", "dateRangeProps", "fullWidth", "canClear", "input"]);
     const [initialStartDate, setInitialStartDate] = useState();
     const [initialEndDate, setInitialEndDate] = useState();
     // When the startDate or endDate props change, update the internal state.
@@ -42,7 +42,7 @@ export const VuiDateRangePicker = (_a) => {
     const humanizedStartDate = initialStartDate ? formatDate(initialStartDate) : "Unselected start date";
     const humanizedEndDate = initialEndDate ? formatDate(initialEndDate) : "unselected end date";
     const { "data-testid": testId } = rest, restProps = __rest(rest, ["data-testid"]);
-    const input = (_jsx(VuiTextInput, { className: "vuiDateRangePickerInput", value: !initialStartDate && !initialEndDate ? "Select date range" : `${humanizedStartDate} to ${humanizedEndDate}`, fullWidth: fullWidth, "data-testid": testId }));
+    const inputEl = input !== null && input !== void 0 ? input : (_jsx(VuiTextInput, { className: "vuiDateRangePickerInput", value: !initialStartDate && !initialEndDate ? "Select date range" : `${humanizedStartDate} to ${humanizedEndDate}`, fullWidth: fullWidth, "data-testid": testId }));
     return (_jsx(VuiPopover, Object.assign({ setIsOpen: (isOpen) => {
             if (isOpen) {
                 // Set temporary internal state to the provided values when opening the popover.
@@ -54,5 +54,5 @@ export const VuiDateRangePicker = (_a) => {
                 onChange === null || onChange === void 0 ? void 0 : onChange(initialStartDate, initialEndDate);
             }
             setIsOpen(isOpen);
-        }, button: input }, restProps, { children: dateRangePicker })));
+        }, button: inputEl }, restProps, { children: dateRangePicker })));
 };

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

@@ -1,4 +1,4 @@
-declare const SIZE: readonly ["m", "l"];
+declare const SIZE: readonly ["s", "m", "l"];
 export type BasicInputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "size" | "autoComplete" | "ref"> & {
     isInvalid?: boolean;
     size?: (typeof SIZE)[number];
@@ -8,7 +8,7 @@ export type BasicInputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttrib
 };
 export declare const VuiBasicInput: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "size" | "autoComplete"> & {
     isInvalid?: boolean | undefined;
-    size?: "m" | "l" | undefined;
+    size?: "s" | "m" | "l" | undefined;
     fullWidth?: boolean | undefined;
     autoComplete?: string | boolean | undefined;
     isSelected?: boolean | undefined;

package/lib/components/form/input/BasicInput.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 import { forwardRef } from "react";
-const SIZE = ["m", "l"];
+const SIZE = ["s", "m", "l"];
 export const VuiBasicInput = forwardRef((_a, ref) => {
     var { className, id, name, placeholder, size = "m", fullWidth, onSubmit, isInvalid, autoFocus, autoComplete, isSelected, onChange = () => undefined } = _a, rest = __rest(_a, ["className", "id", "name", "placeholder", "size", "fullWidth", "onSubmit", "isInvalid", "autoFocus", "autoComplete", "isSelected", "onChange"]);
     const classes = classNames("vuiInput", `vuiInput--${size}`, {

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

@@ -1,6 +1,6 @@
 export declare const VuiPasswordInput: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "size" | "autoComplete"> & {
     isInvalid?: boolean | undefined;
-    size?: "m" | "l" | undefined;
+    size?: "s" | "m" | "l" | undefined;
     fullWidth?: boolean | undefined;
     autoComplete?: string | boolean | undefined;
     isSelected?: boolean | undefined;

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

@@ -6,7 +6,7 @@ export type Props = BasicInputProps & {
 };
 export declare const VuiTextInput: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "size" | "autoComplete"> & {
     isInvalid?: boolean | undefined;
-    size?: "m" | "l" | undefined;
+    size?: "s" | "m" | "l" | undefined;
     fullWidth?: boolean | undefined;
     autoComplete?: string | boolean | undefined;
     isSelected?: boolean | undefined;

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

@@ -5,6 +5,11 @@
   background-color: var(--vui-color-empty-shade);
 }
 
+.vuiInput--s {
+  padding: $sizeXs * 0.75 $sizeS;
+  font-size: $fontSizeSmall;
+}
+
 .vuiInput--m {
   padding: $sizeXs $sizeM;
   font-size: $fontSizeStandard;

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

@@ -1,6 +1,6 @@
 import { ChangeEventHandler, FormEventHandler, KeyboardEventHandler } from "react";
 import { SearchSuggestion } from "./types";
-declare const SIZE: readonly ["m", "l"];
+declare const SIZE: readonly ["s", "m", "l"];
 type Props = {
     className?: string;
     value?: string;

package/lib/components/searchInput/SearchInput.js

@@ -18,7 +18,12 @@ import { VuiIcon } from "../icon/Icon";
 import { VuiSearchInputSuggestions } from "./SearchInputSuggestions";
 import { createId } from "../../utils/createId";
 import { VuiSpinner } from "../spinner/Spinner";
-const SIZE = ["m", "l"];
+const SIZE = ["s", "m", "l"];
+const sizeToIconSizeMap = {
+    s: "xs",
+    m: "s",
+    l: "m"
+};
 export const VuiSearchInput = (_a) => {
     var { className, size = "m", value, onChange, onKeyDown, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, onSelectSuggestion, isLoading } = _a, rest = __rest(_a, ["className", "size", "value", "onChange", "onKeyDown", "placeholder", "autoFocus", "onSubmit", "isClearable", "onClear", "suggestions", "onSelectSuggestion", "isLoading"]);
     const classes = classNames("vuiSearchInput", `vuiSearchInput--${size}`, className);
@@ -169,7 +174,7 @@ export const VuiSearchInput = (_a) => {
     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)), ghostText && (_jsxs("div", Object.assign({ className: "vuiSearchInput__ghostText", "aria-hidden": "true" }, { children: [_jsx("span", Object.assign({ className: "vuiSearchInput__ghostText--hidden" }, { children: value })), _jsx("span", Object.assign({ className: "vuiSearchInput__ghostText--visible" }, { children: ghostText }))] }))), _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) => {
+                    }, "aria-autocomplete": "list", "aria-controls": hasSuggestions ? controlsId : undefined }, rest)), ghostText && (_jsxs("div", Object.assign({ className: "vuiSearchInput__ghostText", "aria-hidden": "true" }, { children: [_jsx("span", Object.assign({ className: "vuiSearchInput__ghostText--hidden" }, { children: value })), _jsx("span", Object.assign({ className: "vuiSearchInput__ghostText--visible" }, { children: ghostText }))] }))), _jsx("div", Object.assign({ className: "vuiSearchInput__icon" }, { children: isLoading ? (_jsx(VuiSpinner, { size: size === "m" ? "s" : "m" })) : (_jsx(VuiIcon, Object.assign({ color: "subdued", size: sizeToIconSizeMap[size] }, { 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, onSelectSuggestion: onSelectSuggestion }))] })) })));

package/lib/components/searchInput/_index.scss

@@ -45,6 +45,17 @@
   }
 }
 
+.vuiSearchInput--s {
+  .vuiSearchInput__icon {
+    top: $sizeXxs + 3px;
+  }
+
+  .vuiSearchInput__input {
+    padding: $sizeXs * 0.6 $sizeS $sizeXs * 0.6 $sizeL + $sizeS;
+    font-size: $fontSizeStandard;
+  }
+}
+
 .vuiSearchInput--m {
   .vuiSearchInput__icon {
     top: $sizeXs + 1px;

package/lib/styles/index.css

@@ -2848,6 +2848,11 @@ h2.react-datepicker__current-month {
   background-color: var(--vui-color-empty-shade);
 }
 
+.vuiInput--s {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
 .vuiInput--m {
   padding: 8px 16px;
   font-size: 14px;
@@ -4723,6 +4728,14 @@ h2.react-datepicker__current-month {
   color: var(--vui-color-accent-shade);
 }
 
+.vuiSearchInput--s .vuiSearchInput__icon {
+  top: 7px;
+}
+.vuiSearchInput--s .vuiSearchInput__input {
+  padding: 4.8px 12px 4.8px 36px;
+  font-size: 14px;
+}
+
 .vuiSearchInput--m .vuiSearchInput__icon {
   top: 9px;
 }

package/package.json

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

package/src/docs/components/Subsection.tsx

@@ -8,7 +8,7 @@ type Props = {
 export const Subsection = ({ title, children }: Props) => {
   return (
     <>
-      <VuiTitle size="s">
+      <VuiTitle size="xs">
         <h4>{title}</h4>
       </VuiTitle>
 

package/src/docs/pages/datePicker/DateRangePickerCustomInput.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { VuiButtonSecondary, VuiDateRangePicker, VuiSpacer, VuiText, VuiTextInput } from "../../../lib";
+import { formatDate } from "../../../lib/utils";
+
+export const DateRangePickerCustomInput = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [startDate, setStartDate] = useState<Date | undefined>(
+    new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
+  );
+  const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+
+  const humanizedStartDate = startDate ? formatDate(startDate) : "Unselected start date";
+  const humanizedEndDate = endDate ? formatDate(endDate) : "unselected end date";
+
+  return (
+    <>
+      <VuiText>
+        <p>
+          From {startDate?.toUTCString() ?? "unknown"} to {endDate?.toUTCString() ?? "unknown"}
+        </p>
+      </VuiText>
+
+      <VuiSpacer size="s" />
+
+      <VuiButtonSecondary
+        color="neutral"
+        onClick={() => {
+          // Add one day to the end date.
+          setEndDate((prevEndDate) => {
+            if (!prevEndDate) return new Date();
+            const newEndDate = new Date(prevEndDate);
+            newEndDate.setDate(newEndDate.getDate() + 1);
+            return newEndDate;
+          });
+        }}
+      >
+        Add day to verify external control
+      </VuiButtonSecondary>
+
+      <VuiSpacer size="s" />
+
+      <VuiDateRangePicker
+        header="Date filter"
+        startDate={startDate}
+        endDate={endDate}
+        onChange={(startDate, endDate) => {
+          setStartDate(startDate);
+          setEndDate(endDate);
+        }}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        anchorSide="left"
+        data-testid="dateRangePickerButton"
+        dateRangeProps={{ "data-testid": "dateRangePicker" }}
+        canClear
+        input={
+          <VuiTextInput
+            size="s"
+            className="vuiDateRangePickerInput"
+            value={!startDate && !endDate ? "Select date range" : `${humanizedStartDate} to ${humanizedEndDate}`}
+          />
+        }
+      />
+    </>
+  );
+};

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

@@ -1,11 +1,13 @@
 import { DatePicker } from "./DatePicker";
 import { Inline } from "./Inline";
 import { DateRangePicker } from "./DateRangePicker";
+import { DateRangePickerCustomInput } from "./DateRangePickerCustomInput";
 import { WithTimeSelection } from "./WithTimeSelection";
 
 const DatePickerSource = require("!!raw-loader!./DatePicker");
 const InlineSource = require("!!raw-loader!./Inline");
 const DateRangePickerSource = require("!!raw-loader!./DateRangePicker");
+const DateRangePickerCustomInputSource = require("!!raw-loader!./DateRangePickerCustomInput");
 const WithTimeSelectionSource = require("!!raw-loader!./WithTimeSelection");
 
 export const datePicker = {
@@ -27,6 +29,11 @@ export const datePicker = {
       component: <DateRangePicker />,
       source: DateRangePickerSource.default.toString()
     },
+    {
+      name: "Date range with custom input",
+      component: <DateRangePickerCustomInput />,
+      source: DateRangePickerCustomInputSource.default.toString()
+    },
     {
       name: "With time selection",
       component: <WithTimeSelection />,

package/src/docs/pages/input/Sizes.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { VuiTextInput } from "../../../lib";
+import { Subsection } from "../../components/Subsection";
+
+export const Sizes = () => {
+  const [value, setValue] = useState<string | undefined>();
+
+  return (
+    <>
+      <Subsection title="Large">
+        <VuiTextInput
+          size="l"
+          id="textInput"
+          name="text"
+          placeholder="Type something…"
+          value={value}
+          onSubmit={() => alert("Submit")}
+          onChange={(event) => setValue(event.target.value)}
+        />
+      </Subsection>
+
+      <Subsection title="Medium">
+        <VuiTextInput
+          size="m"
+          id="textInput"
+          name="text"
+          placeholder="Type something…"
+          value={value}
+          onSubmit={() => alert("Submit")}
+          onChange={(event) => setValue(event.target.value)}
+        />
+      </Subsection>
+
+      <Subsection title="Small">
+        <VuiTextInput
+          size="s"
+          id="textInput"
+          name="text"
+          placeholder="Type something…"
+          value={value}
+          onSubmit={() => alert("Submit")}
+          onChange={(event) => setValue(event.target.value)}
+        />
+      </Subsection>
+    </>
+  );
+};

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

@@ -2,13 +2,13 @@ import { TextInput } from "./TextInput";
 import { NumberInput } from "./NumberInput";
 import { PasswordInput } from "./PasswordInput";
 import { FullWidth } from "./FullWidth";
-import { Large } from "./Large";
+import { Sizes } from "./Sizes";
 
 const TextInputSource = require("!!raw-loader!./TextInput");
 const NumberInputSource = require("!!raw-loader!./NumberInput");
 const PasswordInputSource = require("!!raw-loader!./PasswordInput");
 const FullWidthSource = require("!!raw-loader!./FullWidth");
-const LargeSource = require("!!raw-loader!./Large");
+const SizesSource = require("!!raw-loader!./Sizes");
 
 export const input = {
   name: "Input",
@@ -35,9 +35,9 @@ export const input = {
       source: FullWidthSource.default.toString()
     },
     {
-      name: "Large size",
-      component: <Large />,
-      source: LargeSource.default.toString()
+      name: "Sizes",
+      component: <Sizes />,
+      source: SizesSource.default.toString()
     }
   ]
 };

package/src/docs/pages/searchInput/SearchInput.tsx

@@ -1,31 +1,86 @@
 import { useState } from "react";
 import { VuiButtonPrimary, VuiFlexContainer, VuiFlexItem, VuiSearchInput } from "../../../lib";
+import { Subsection } from "../../components/Subsection";
 
 export const SearchInput = () => {
   const [searchValue, setSearchValue] = useState("");
 
   return (
-    <form>
-      <VuiFlexContainer alignItems="center">
-        <VuiFlexItem grow={1}>
-          <VuiSearchInput
-            autoFocus
-            placeholder="Ask a question"
-            value={searchValue}
-            onChange={(e) => setSearchValue(e.target.value)}
-            onSubmit={(e) => {
-              e.preventDefault();
-              alert(`Submit ${searchValue}`);
-            }}
-          />
-        </VuiFlexItem>
+    <>
+      <Subsection title="Large size">
+        <VuiFlexContainer alignItems="center">
+          <VuiFlexItem grow={1}>
+            <VuiSearchInput
+              size="l"
+              placeholder="Ask a question"
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+              onSubmit={(e) => {
+                e.preventDefault();
+                alert(`Submit ${searchValue}`);
+              }}
+            />
+          </VuiFlexItem>
 
-        <VuiFlexItem>
-          <VuiButtonPrimary color="primary" size="m">
-            Search
-          </VuiButtonPrimary>
-        </VuiFlexItem>
-      </VuiFlexContainer>
-    </form>
+          <VuiFlexItem>
+            <VuiButtonPrimary color="primary" size="l">
+              Search
+            </VuiButtonPrimary>
+          </VuiFlexItem>
+        </VuiFlexContainer>
+      </Subsection>
+
+      <Subsection title="Medium size">
+        <form>
+          <VuiFlexContainer alignItems="center" spacing="s">
+            <VuiFlexItem grow={1}>
+              <VuiSearchInput
+                autoFocus
+                placeholder="Ask a question"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  alert(`Submit ${searchValue}`);
+                }}
+                size="m"
+              />
+            </VuiFlexItem>
+
+            <VuiFlexItem>
+              <VuiButtonPrimary color="primary" size="m">
+                Search
+              </VuiButtonPrimary>
+            </VuiFlexItem>
+          </VuiFlexContainer>
+        </form>
+      </Subsection>
+
+      <Subsection title="Small size">
+        <form>
+          <VuiFlexContainer alignItems="center" spacing="xs">
+            <VuiFlexItem grow={1}>
+              <VuiSearchInput
+                autoFocus
+                placeholder="Ask a question"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  alert(`Submit ${searchValue}`);
+                }}
+                size="s"
+              />
+            </VuiFlexItem>
+
+            <VuiFlexItem>
+              <VuiButtonPrimary color="primary" size="s">
+                Search
+              </VuiButtonPrimary>
+            </VuiFlexItem>
+          </VuiFlexContainer>
+        </form>
+      </Subsection>
+    </>
   );
 };

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

@@ -1,11 +1,9 @@
 import { SearchInput } from "./SearchInput";
-import { Large } from "./Large";
 import { ClearableSearchInput } from "./Clearable";
 import { Suggestions } from "./Suggestions";
 import { ValueSuggestions } from "./ValueSuggestions";
 
 const SearchInputSource = require("!!raw-loader!./SearchInput");
-const LargeSource = require("!!raw-loader!./Large");
 const ClearableInputSource = require("!!raw-loader!./Clearable");
 const SuggestionsSource = require("!!raw-loader!./Suggestions");
 const ValueSuggestionsSource = require("!!raw-loader!./ValueSuggestions");
@@ -15,15 +13,10 @@ export const searchInput = {
   path: "/searchInput",
   examples: [
     {
-      name: "Medium size",
+      name: "Sizes",
       component: <SearchInput />,
       source: SearchInputSource.default.toString()
     },
-    {
-      name: "Large size",
-      component: <Large />,
-      source: LargeSource.default.toString()
-    },
     {
       name: "Clearable input",
       component: <ClearableSearchInput />,

package/src/docs/pages/input/Large.tsx

@@ -1,18 +0,0 @@
-import { useState } from "react";
-import { VuiTextInput } from "../../../lib";
-
-export const Large = () => {
-  const [value, setValue] = useState<string | undefined>();
-
-  return (
-    <VuiTextInput
-      size="l"
-      id="textInput"
-      name="text"
-      placeholder="Type something…"
-      value={value}
-      onSubmit={() => alert("Submit")}
-      onChange={(event) => setValue(event.target.value)}
-    />
-  );
-};

package/src/docs/pages/searchInput/Large.tsx

@@ -1,29 +0,0 @@
-import { useState } from "react";
-import { VuiButtonPrimary, VuiFlexContainer, VuiFlexItem, VuiSearchInput } from "../../../lib";
-
-export const Large = () => {
-  const [searchValue, setSearchValue] = useState("");
-
-  return (
-    <VuiFlexContainer alignItems="center">
-      <VuiFlexItem grow={1}>
-        <VuiSearchInput
-          size="l"
-          placeholder="Ask a question"
-          value={searchValue}
-          onChange={(e) => setSearchValue(e.target.value)}
-          onSubmit={(e) => {
-            e.preventDefault();
-            alert(`Submit ${searchValue}`);
-          }}
-        />
-      </VuiFlexItem>
-
-      <VuiFlexItem>
-        <VuiButtonPrimary color="primary" size="l">
-          Search
-        </VuiButtonPrimary>
-      </VuiFlexItem>
-    </VuiFlexContainer>
-  );
-};