@nypl/design-system-react-components 0.25.0 → 0.25.4

package/dist/components/Icons/IconTypes.d.ts

@@ -1,71 +1,96 @@
-export declare enum IconRotationTypes {
-    rotate0 = "rotate-0",
-    rotate90 = "rotate-90",
-    rotate180 = "rotate-180",
-    rotate270 = "rotate-270"
+export declare enum IconAlign {
+    Left = "left",
+    Right = "right",
+    None = "none"
 }
-export declare enum IconNames {
-    accessibility_full = "accessibility_full",
-    accessibility_partial = "accessibility_partial",
-    arrow = "arrow",
-    check = "check",
-    clock = "clock",
-    close = "close",
-    download = "download",
-    error_filled = "error_filled",
-    error_outline = "error_outline",
-    headset = "headset",
-    minus = "minus",
-    plus = "plus",
-    search = "search",
-    speaker_notes = "speaker_notes",
-    utility_account_filled = "utility_account_filled",
-    utility_account_unfilled = "utility_account_unfilled",
-    utility_hamburger = "utility_hamburger",
-    utility_search = "utility_search"
+export declare enum IconTypes {
+    Default = "default",
+    Breadcrumbs = "breadcrumbs"
 }
-export declare enum LogoNames {
-    brooklyn = "brooklyn",
-    logo_brooklyn = "logo_brooklyn",
-    logo_nypl = "logo_nypl",
-    logo_nypl_negative = "logo_nypl_negative",
-    logo_queens = "logo_queens",
-    lpa_negative = "lpa_negative",
-    lpa_positive = "lpa_positive",
-    nypl_circle_negative = "nypl_circle_negative",
-    nypl_circle_positive = "nypl_circle_positive",
-    nypl_full_lock_up_negative = "nypl_full_lock_up_negative",
-    nypl_full_lock_up = "nypl_full_lock_up",
-    nypl_no_lion_negative = "nypl_no_lion_negative",
-    nypl_no_lion_positive = "nypl_no_lion_positive",
-    queens_long = "queens_long",
-    queens_stacked = "queens_stacked",
-    schomburg_circle = "schomburg_circle",
-    schomburg_positive = "schomburg_positive",
-    simplye_black = "simplye_black",
-    simplye_color = "simplye_color",
-    snfl_negative = "snfl_negative",
-    snfl_positive = "snfl_positive"
+export declare enum IconRotationTypes {
+    Rotate0 = "rotate0",
+    Rotate90 = "rotate90",
+    Rotate180 = "rotate180",
+    Rotate270 = "rotate270"
 }
 export declare enum IconColors {
-    ui_black = "ui-black",
-    ui_white = "ui-white",
-    brand_primary = "brand-primary",
-    brand_secondary = "brand-secondary",
-    section_whats_on_primary = "section-whats-on-primary",
-    section_books_and_more_primary = "section-books-and-more-primary",
-    section_research_primary = "section-research-primary",
-    section_research_secondary = "section-research-secondary",
-    section_locations_primary = "section-locations-primary",
-    section_research_library_lpa = "section-research-library-lpa",
-    section_research_library_schomburg = "section-research-library-schomburg",
-    section_research_library_schwartzman = "section-research-library-schwartzman"
+    UiBlack = "ui.black",
+    UiWhite = "ui.white",
+    BrandPrimary = "brand.primary",
+    BrandSecondary = "brand.secondary",
+    SectionWhatsOnPrimary = "section.whats-on.primary",
+    SectionWhatsOnSecondary = "section.whats-on.secondary",
+    SectionBooksAndMorePrimary = "section.books-and-more.primary",
+    SectionBooksAndMoreSecondary = "section.books-and-more.secondary",
+    SectionResearchPrimary = "section.research.primary",
+    SectionResearchSecondary = "section.research.secondary",
+    SectionLocationsPrimary = "section.locations.primary",
+    SectionLocationsSecondary = "section.locations.secondary",
+    SectionBlogsPrimary = "section.blogs.primary",
+    SectionBlogsSecondary = "section.blogs.secondary",
+    SectionResearchLibraryLpa = "section.research-library.lpa",
+    SectionResearchLibrarySchomburg = "section.research-library.schomburg",
+    SectionResearchLibrarySchwartzman = "section.research-library.schwartzman"
 }
 export declare enum IconSizes {
-    small = "small",
-    medium = "medium",
-    large = "large",
-    xlarge = "xlarge",
-    xxlarge = "xxlarge",
-    xxxlarge = "xxxlarge"
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+    ExtraLarge = "xlarge",
+    ExtraExtraLarge = "xxlarge",
+    ExtraExtraExtraLarge = "xxxlarge"
+}
+export declare enum IconNames {
+    AccessibilityFull = "accessibility_full",
+    AccessibilityPartial = "accessibility_partial",
+    ActionCheckCircle = "action_check_circle",
+    ActionHelpDefault = "action_help_default",
+    ActionHelpOutline = "action_help_outline",
+    ActionLaunch = "action_launch",
+    Arrow = "arrow",
+    Check = "check",
+    Clock = "clock",
+    Close = "close",
+    Download = "download",
+    ErrorFilled = "error_filled",
+    ErrorOutline = "error_outline",
+    FileTypeAudio = "file_type_audio",
+    FileTypeDoc = "file_type_doc",
+    FileTypeGenericDoc = "file_type_generic_doc",
+    FileTypeImage = "file_type_image",
+    FileTypePdf = "file_type_pdf",
+    FileTypeSpreadsheet = "file_type_spreadsheet",
+    FileTypeVideo = "file_type_video",
+    Headset = "headset",
+    Minus = "minus",
+    Plus = "plus",
+    Search = "search",
+    SpeakerNotes = "speaker_notes",
+    UtilityAccountFilled = "utility_account_filled",
+    UtilityAccountUnfilled = "utility_account_unfilled",
+    UtilityHamburger = "utility_hamburger",
+    UtilitySearch = "utility_search"
+}
+export declare enum LogoNames {
+    Brooklyn = "brooklyn",
+    LogoBrooklyn = "logo_brooklyn",
+    LogoNypl = "logo_nypl",
+    LogoNyplNegative = "logo_nypl_negative",
+    LogoQueens = "logo_queens",
+    LpaNegative = "lpa_negative",
+    LpaPositive = "lpa_positive",
+    NyplCircleNegative = "nypl_circle_negative",
+    NyplCirclePositive = "nypl_circle_positive",
+    NyplFullLockUpNegative = "nypl_full_lock_up_negative",
+    NyplFullLockUp = "nypl_full_lock_up",
+    NyplNoLionNegative = "nypl_no_lion_negative",
+    NyplNoLionPositive = "nypl_no_lion_positive",
+    QueensLong = "queens_long",
+    QueensStacked = "queens_stacked",
+    SchomburgCircle = "schomburg_circle",
+    SchomburgPositive = "schomburg_positive",
+    SimplyeBlack = "simplye_black",
+    SimplyeColor = "simplye_color",
+    SnflNegative = "snfl_negative",
+    SnflPositive = "snfl_positive"
 }

package/dist/components/Image/Image.d.ts

@@ -1,22 +1,32 @@
 import * as React from "react";
-export interface ImageProps {
-    /** Text description of the image */
-    alt: string;
-    /** Additional attributes passed to the image */
-    attributes?: {
+import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
+interface ImageWrapperProps {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
         [key: string]: any;
     };
-    /** BlockName for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
     /** ClassName you can add in addition to 'image' */
     className?: string;
+    /** Optional value to control the aspect ratio of the cartd image; default value is `square` */
+    imageAspectRatio?: ImageRatios;
+    /** Optional value to control the size of the image */
+    imageSize?: ImageSizes;
+}
+export interface ImageProps extends ImageWrapperProps {
+    /** Alternate text description of the image */
+    alt: string;
+    /** Custom image component */
+    component?: JSX.Element | null;
     /** Adding will wrap the image in a <figure> */
     imageCaption?: string;
     /** Adding will wrap the image in a <figure> */
     imageCredit?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
+    /** Optional value to control the size of the image */
+    imageSize?: ImageSizes;
+    /** Optional value for the image type */
+    imageType?: ImageTypes;
     /** The src attribute is required, and contains the path to the image you want to embed. */
     src: string;
 }
 export default function Image(props: React.ComponentProps<"img"> & ImageProps): JSX.Element;
+export {};

package/dist/components/Image/ImageTypes.d.ts

@@ -0,0 +1,20 @@
+export declare enum ImageRatios {
+    FourByThree = "fourByThree",
+    OneByTwo = "oneByTwo",
+    Original = "original",
+    SixteenByNine = "sixteenByNine",
+    Square = "square",
+    ThreeByFour = "threeByFour",
+    ThreeByTwo = "threeByTwo",
+    TwoByOne = "twoByOne"
+}
+export declare enum ImageSizes {
+    Default = "default",
+    Large = "large",
+    Medium = "medium",
+    Small = "small"
+}
+export declare enum ImageTypes {
+    Default = "default",
+    Circle = "circle"
+}

package/dist/components/Label/Label.d.ts

@@ -1,29 +1,17 @@
 import * as React from "react";
 declare type optReqFlagType = "Required" | "Optional" | "" | undefined;
 interface LabelProps {
-    /** Additional attributes to pass to the <label> tag */
-    attributes?: {
-        [key: string]: any;
-    };
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** className that appears in addition to "label" */
+    /** Additional CSS class name to render in the `label` element. */
     className?: string;
-    /** The id of the html element that this `Label` is describing */
-    htmlFor?: string;
+    /** The id of the html element that this `Label` is describing. */
+    htmlFor: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Modifiers for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
     /** Displays "Required" or "Optional" string alongside the label */
     optReqFlag?: optReqFlagType;
 }
 /**
  * A label for form inputs. It should never be used alone.
  */
-export default function Label(props: React.PropsWithChildren<LabelProps>): React.DetailedReactHTMLElement<{
-    className: string;
-    htmlFor: string;
-    id: string;
-}, HTMLElement>;
-export {};
+declare function Label(props: React.PropsWithChildren<LabelProps>): JSX.Element;
+export default Label;

package/dist/components/Link/Link.d.ts

@@ -1,28 +1,28 @@
 import * as React from "react";
 import { LinkTypes } from "./LinkTypes";
 export interface LinkProps {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
+        [key: string]: any;
+    };
     /** Additional attributes, such as `rel=nofollow`, to pass to the `<a>` tag. */
     attributes?: {
         [key: string]: any;
     };
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** className that appears in addition to "link" */
+    /** Any child node passed to the component. */
+    children: React.ReactNode;
+    /** Additional class name to render in the `Link` component. */
     className?: string;
-    /** Href attribute */
+    /** The `href` attribute for the anchor element. */
     href?: string;
-    /** ID */
+    /** ID used for accessibility purposes. */
     id?: string;
-    /** Controls the link visuals—action, button, or default. */
+    /** Controls the link visuals: action, button, backwards, forwards, or default. */
     type?: LinkTypes;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Any child node passed to the component. */
-    children: React.ReactNode;
 }
 /**
- * A component that uses an `href` prop or a child anchor element, to create an
- * anchor element with added styling and conventions.
+ * A component that uses an `href` prop or a child anchor element, to create
+ * an anchor element with added styling and conventions.
  */
 declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
 export default Link;

package/dist/components/List/List.d.ts

@@ -5,30 +5,35 @@ interface DefinitionProps {
     definition: string;
 }
 export interface ListProps {
-    /** BlockName for use with BEM. See how to work with blockNames and
-     * BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
+        [key: string]: any;
+    };
     /** ClassName you can add in addition to 'list' */
     className?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and
-     * BEM here: http://getbem.com/introduction/ */
-    modifiers?: any[];
-    /** An optional title that will appear over the list. This prop only applies
-     * to Definition Lists. */
-    title?: string;
-    /** Ordered, Unordered, or Definition */
-    type: ListTypes;
+    /** Display the list in a row. */
+    inline?: boolean;
     /** Data to render if children are not passed. For `ListTypes.Ordered` and
      * `ListTypes.Unordered` `List` types, the data structure is an array of
      * strings to renders as `li` items. For `ListTypes.Definition` `List` types,
      * the data structure is an array of objects with `term` and `definition`
      * properties to render `dt` and `dd` elements, respectively.
      */
-    listItems?: (string | DefinitionProps)[];
+    listItems?: (string | JSX.Element | DefinitionProps)[];
+    /** Remove list styling. */
+    noStyling?: boolean;
+    /** An optional title that will appear over the list. This prop only applies
+     * to Definition Lists. */
+    title?: string;
+    /** The type of list: Ordered, Unordered, or Definition. Unordered by default. */
+    type: ListTypes;
 }
-/** A component that renders list item `li` elements or definition item `dt`
- * and `dd` elements based on the `type` prop. */
+/**
+ * A component that renders list item `li` elements or definition item `dt`
+ * and `dd` elements based on the `type` prop. Note that the `title` prop will
+ * only display for the `Definition` list type.
+ */
 export default function List(props: React.PropsWithChildren<ListProps>): any;
 export {};

package/dist/components/Notification/Notification.d.ts

@@ -1,25 +1,46 @@
 import React from "react";
 import { NotificationTypes } from "./NotificationTypes";
-export interface NotificationProps {
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
+interface BaseProps {
+    /** Optional prop to control text alignment in `NotificationContent` */
+    alignText?: boolean;
     /** Optional prop to control horizontal alignment of the `Notification` content */
     centered?: boolean;
-    /** Optional `className` that appears in addition to "notification" */
+    /** Optional custom `Icon` that will override the default `Icon`. */
+    icon?: JSX.Element;
+    /** Optional prop to control the coloring of the `Notification` text and the
+     * visibility of an applicable icon. */
+    notificationType?: NotificationTypes;
+}
+declare type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
+declare type BasePropsWithoutCentered = Omit<BaseProps, "centered">;
+export interface NotificationProps extends BasePropsWithoutAlignText {
+    /** Additional `className` to add.  */
     className?: string;
-    /** Optional prop to control whether a `Notification` can be dismissed (closed) by a user */
+    /** Optional prop to control whether a `Notification` can be dismissed
+     * (closed) by a user. */
     dismissible?: boolean;
-    /** Optional custom `Icon` that will override the default `Icon` */
-    icon?: React.ReactNode;
-    /** ID that other components can cross reference for accessibility purposes */
+    /** Optional custom `Icon` that will override the default `Icon`. */
+    icon?: JSX.Element;
+    /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
-    /** Optional prop to control the margin around the `Notification` component */
+    /** Optional prop to control the margin around the `Notification` component. */
     noMargin?: boolean;
-    /** Optional prop to control the coloring of notification text and the visibility of an applicable icon */
-    notificationType?: NotificationTypes;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
+    /** Content to be rendered in a `NotificationContent` component. */
+    notificationContent: string | JSX.Element;
+    /** Content to be rendered in a `NotificationHeading` component. */
+    notificationHeading?: string;
 }
-export declare function NotificationHeading(props: any): JSX.Element;
-export declare function NotificationContent(props: any): JSX.Element;
-export default function Notification(props: React.PropsWithChildren<NotificationProps>): JSX.Element;
+/**
+ * NotificationHeading child-component.
+ */
+export declare function NotificationHeading(props: React.PropsWithChildren<BasePropsWithoutAlignText>): JSX.Element;
+/**
+ * NotificationContent child-component.
+ */
+export declare function NotificationContent(props: React.PropsWithChildren<BasePropsWithoutCentered>): JSX.Element;
+/**
+ * Component used to present users with three different levels of notifications:
+ * standard, announcement, and warning.
+ */
+export default function Notification(props: NotificationProps): JSX.Element;
+export {};

package/dist/components/Pagination/Pagination.d.ts

@@ -1,20 +1,23 @@
-import * as React from "react";
+import React from "react";
 export interface PaginationProps {
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** Additional className for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
+    /** Additional className. */
     className?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** The total number of pages. */
-    pageCount: number;
+    /** The callback function that takes a page number and returns a string
+     * to use for a link's `href` attribute. This is used when the current
+     * page should refresh when navigating. */
+    getPageHref?: undefined | ((pageNumber: number) => string);
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
     /** The current page selected. */
-    currentPage: number;
-    /** A method that returns a Link component given the target page */
-    getPageHref?: (pageNumber: number) => string;
-    /** The method to callback when an item is selected. Passes the selected page to the consuming app as an argument. */
+    initialPage: number;
+    /** The callback function called when an item is selected and the current
+     * page should not refresh. */
     onPageChange?: (selected: number) => void;
+    /** The total number of pages. */
+    pageCount: number;
 }
-/** A component that provides a navigational list of page items. */
+/**
+ * A component that provides a navigational list of page items.
+ */
 declare const Pagination: React.FC<PaginationProps>;
 export default Pagination;

package/dist/components/Pagination/Pagination.stories.d.ts

@@ -2,6 +2,8 @@ import { Story } from "@storybook/react/types-6-0";
 import { PaginationProps } from "./Pagination";
 /**
  * PaginationGetPageHref will refresh the browser as a new page is selected.
+ * In this example, `getPageHref` creates the `href` attribute for each
+ * page URL.
  */
 export declare const PaginationGetPageHref: Story<PaginationProps>;
 /**

package/dist/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { ProgressIndicatorSizes, ProgressIndicatorTypes } from "./ProgressIndicatorTypes";
+export interface ProgressIndicatorProps {
+    /** Flag to render the component in a dark background. */
+    darkMode?: boolean;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Whether the `ProgressIndicator` should be linear or circular. */
+    indicatorType?: ProgressIndicatorTypes;
+    /** Whether the progress animation should display because the `value` prop is
+     * not known. When this is set to `true`, the `value` prop will be ignored. */
+    isIndeterminate?: boolean;
+    /** The text to display in an HTML `label` element. */
+    labelText: string;
+    /** Visually show or hide the label text. When set to `false`, then the label
+     * text will be added to the parent component as its `aria-label` attribute. */
+    showLabel?: boolean;
+    /** The size of the linear or circular progress. */
+    size?: ProgressIndicatorSizes;
+    /** A number between 0 to 100 that defines the progress' value. */
+    value?: number;
+}
+/**
+ * A component that displays a progress status for any task that takes a long
+ * time to complete or consists of multiple steps. Examples include downloading,
+ * uploading, or processing.
+ */
+declare const ProgressIndicator: React.FC<ProgressIndicatorProps>;
+export default ProgressIndicator;

package/dist/components/ProgressIndicator/ProgressIndicatorTypes.d.ts

@@ -0,0 +1,8 @@
+export declare enum ProgressIndicatorSizes {
+    Default = "default",
+    Small = "small"
+}
+export declare enum ProgressIndicatorTypes {
+    Circular = "circular",
+    Linear = "linear"
+}

package/dist/components/Radio/Radio.d.ts

@@ -32,6 +32,8 @@ export interface RadioProps {
     name?: string;
     /** Should be passed along with `isChecked` for controlled components. */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
     /** Offers the ability to show the radio's label onscreen or hide it. Refer
      * to the `labelText` property for more information. */
     showLabel?: boolean;

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -7,12 +7,12 @@ export interface RadioGroupProps {
     className?: string;
     /** Populates the initial value of the input */
     defaultValue?: string;
-    /** Optional string to populate the HelperErrorText for error state */
-    invalidText?: string;
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
+    /** Optional string to populate the HelperErrorText for error state */
+    invalidText?: string;
     /** Adds the 'disabled' prop to the input when true. */
     isDisabled?: boolean;
     /** Adds the 'aria-invalid' attribute to the input and
@@ -31,6 +31,8 @@ export interface RadioGroupProps {
     onChange?: (value: string) => void;
     /** Whether or not to display "Required"/"Optional" in the label text. */
     optReqFlag?: boolean;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
     /** Offers the ability to show the group's legend onscreen or hide it. Refer
      * to the `labelText` property for more information. */
     showLabel?: boolean;

package/dist/components/SearchBar/SearchBar.d.ts

@@ -1,34 +1,52 @@
 import * as React from "react";
+interface SelectProps {
+    labelText: string;
+    name: string;
+    optionsData: string[];
+}
+interface TextInputProps {
+    labelText: string;
+    name: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
+    placeholder: string;
+    value?: string;
+}
 export interface SearchBarProps {
-    /** Populates aria-label on the form;
-     * defines a hidden string that labels
-     * the SearchBar
-     */
-    ariaLabel?: string;
-    /** Populates aria-labelledby on the form;
-     * defines a visible string that labels
-     * the SearchBar
-     */
-    ariaLabelledBy?: string;
-    /** Additional attributes passed to the form */
-    attributes?: {
-        [key: string]: any;
-    };
-    /** BlockName for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** ClassName that appears in addition to "search-bar" */
-    className?: string;
-    /** Adds 'method' property to the form */
-    method?: string;
-    /** Adds 'action' property to the form */
+    /** Adds 'action' property to the `form` element. */
     action?: string;
+    /** The onClick callback function for the `Button` component. */
+    buttonOnClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** A class name for the `form` element. */
+    className?: string;
+    /** The text to display below the form in a `HelperErrorText` component. */
+    helperErrorText?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Handler on form submit */
+    /** Optional string to populate the `HelperErrorText` for the error state
+     * when `isInvalid` is true. */
+    invalidText?: string;
+    /** Sets children form components in the disabled state. */
+    isDisabled?: boolean;
+    /** Sets children form components in the error state. */
+    isInvalid?: boolean;
+    /** Sets children form components in the required state. */
+    isRequired?: boolean;
+    /** Populates the `aria-label` attribute on the form element. */
+    labelText: string;
+    /** Adds 'method' property to the `form` element. */
+    method?: string;
+    /** Handler function when the form is submitted. */
     onSubmit: (event: React.FormEvent) => void;
+    /** Required props to render a `Select` element. */
+    selectProps?: SelectProps | undefined;
+    /** Custom input element to render instead of a `TextInput` element. */
+    textInputElement?: JSX.Element;
+    /** Required props to render a `TextInput` element. */
+    textInputProps?: TextInputProps | undefined;
 }
-/** Renders a wrapper `form` element to be used with `Select` (optional),
- * `Input`, and `Button` components together. */
-export default function SearchBar(props: React.PropsWithChildren<SearchBarProps>): JSX.Element;
+/**
+ * Renders a wrapper `form` element to be used with `Select` (optional),
+ * `Input`, and `Button` components together.
+ */
+export default function SearchBar(props: SearchBarProps): JSX.Element;
+export {};