@nypl/design-system-react-components 1.5.1 → 1.6.0-vite-rc

package/dist/{components → src/components}/TagSet/TagSetFilter.d.ts

@@ -1,26 +1,26 @@
-/// <reference types="react" />
-import { IconNames } from "../Icons/Icon";
-export interface TagSetFilterDataProps {
-    /** The name of the SVG `Icon` to render before the tag label. */
-    iconName?: IconNames;
-    /** The string label to display. */
-    label: string;
-}
-export interface TagSetFilterProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
-    /** Whether the tags should be removable. */
-    isDismissible?: boolean;
-    /** The function to perform when a tag is clicked when `isDismissible` is true. */
-    onClick?: (tagLabel: string) => void;
-    /** The array of data to display as tags. */
-    tagSetData: TagSetFilterDataProps[];
-    /** The `TagSet` variant to render; "filter" by default. */
-    type: "filter";
-}
-/**
- * The "filter" `TagSet` variant will display tags that can be removed when
- * `isDismissible` is true and they are clicked.
- */
-export declare const TagSetFilter: import("@chakra-ui/react").ChakraComponent<(props: TagSetFilterProps) => JSX.Element, {}>;
-export default TagSetFilter;
+/// <reference types="react" />
+import { IconNames } from "../Icons/Icon";
+export interface TagSetFilterDataProps {
+    /** The name of the SVG `Icon` to render before the tag label. */
+    iconName?: IconNames;
+    /** The string label to display. */
+    label: string;
+}
+export interface TagSetFilterProps {
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Whether the tags should be removable. */
+    isDismissible?: boolean;
+    /** The function to perform when a tag is clicked when `isDismissible` is true. */
+    onClick?: (tagLabel: string) => void;
+    /** The array of data to display as tags. */
+    tagSetData: TagSetFilterDataProps[];
+    /** The `TagSet` variant to render; "filter" by default. */
+    type: "filter";
+}
+/**
+ * The "filter" `TagSet` variant will display tags that can be removed when
+ * `isDismissible` is true and they are clicked.
+ */
+export declare const TagSetFilter: import("@chakra-ui/react").ChakraComponent<(props: TagSetFilterProps) => JSX.Element, {}>;
+export default TagSetFilter;

package/dist/{components → src/components}/Template/Template.d.ts

@@ -1,140 +1,140 @@
-import React from "react";
-export interface TemplateProps {
-}
-export interface TemplateHeaderProps {
-    /** Flag to render an HTML header element. True by default. */
-    renderHeaderElement?: boolean;
-}
-export interface TemplateFooterProps {
-    /** Flag to render an HTML footer element. True by default. */
-    renderFooterElement?: boolean;
-}
-export interface TemplateSidebarProps {
-    /** Renders the `TemplateContentSidebar` component either on the left or
-     * right side of the `TemplateContentPrimary` component. */
-    sidebar?: "none" | "left" | "right";
-}
-export interface TemplateContentProps extends TemplateSidebarProps {
-    /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
-     * anchor for the application skip navigation. */
-    id?: string;
-}
-export interface TemplateAppContainerProps extends TemplateFooterProps, TemplateHeaderProps, TemplateSidebarProps {
-    /** DOM that will be rendered before the rest of the components in
-     * `TemplateAppContainer` and immediately before the `TemplateHeader` component. */
-    aboveHeader?: React.ReactElement;
-    /** DOM that will be rendered in the `TemplateBreakout` component section. */
-    breakout?: React.ReactElement;
-    /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
-     * anchor for the application skip navigation. */
-    contentId?: string;
-    /** DOM that will be rendered in the `TemplateContentBottom` component section. */
-    contentBottom?: React.ReactElement;
-    /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
-    contentPrimary?: React.ReactElement;
-    /** DOM that will be rendered in the `TemplateContentSidebar` component section. */
-    contentSidebar?: React.ReactElement;
-    /** DOM that will be rendered in the `TemplateContentTop` component section. */
-    contentTop?: React.ReactElement;
-    /** DOM that will be rendered in the `TemplateFooter` component section. */
-    footer?: React.ReactElement;
-    /** DOM that will be rendered in the `TemplateHeader` component section. */
-    header?: React.ReactElement;
-    /** Render the `SkipNavigation` component or not. False by default. */
-    renderSkipNavigation?: boolean;
-}
-/**
- * The main top-level parent component that wraps all template-related
- * components.
- */
-declare const Template: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TemplateProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-/**
- * This optional component renders its children from edge-to-edge and should
- * be used for alerts or notifications that are typically site-wide. This must
- * be rendered immediately before the `TemplateHeader` component. This is meant
- * for components that render an `aside` HTML element or HTML element with the
- * `role="complementary"` attribute. These elements should *not* be rendered
- * in the `header` HTML section since that's an accessibility violation.
- */
-declare const TemplateAboveHeader: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
-/**
- * This optional component should be the first child of the `Template`
- * component. This is rendered as an HTML `<header>` element. If an HTML
- * `<header>` element is already passed in a custom component as the children,
- * set `renderFooterElement` to `false`. Otherwise, the parent wrapper will
- * render an HTML `<header>` element.
- */
-declare const TemplateHeader: ({ children, renderHeaderElement, }: React.PropsWithChildren<TemplateHeaderProps>) => JSX.Element;
-/**
- * This component should be used inside the `Template` component to contain both
- * the `TemplateAboveHeader` and `TemplateHeader` components. This is meant to
- * render its children from edge to edge and is most useful for the headers,
- * `Breadcrumbs`, and `Hero` components or other banner-like components.
- */
-declare const TemplateBreakout: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
-/**
- * This component is most useful to render content on the page. This renders an
- * HTML `<main>` element with an id of "mainContent". The "mainContent" id should
- * be used as the consuming application's skip navigation link. The `TemplateContent`
- * component also takes a `sidebar` prop with optional "left" or "right" values.
- * This will set the correct *styling* needed for the `TemplateContentPrimary`
- * and `TemplateContentSidebar` components. Note that `TemplateContentPrimary`
- * and `TemplateContentSidebar` must be ordered correctly as children elements
- * for the appropriate styles to take effect.
- */
-declare const TemplateContent: (props: React.PropsWithChildren<TemplateContentProps>) => JSX.Element;
-/**
- * This optional component must be used inside the `TemplateContent` component.
- * This renders content in the main width of the container and will always render
- * above the primary component and the sidebar component (if any).
- */
-declare const TemplateContentTop: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
-/**
- * This optional component must be used inside the `TemplateContent` component
- * and after the `TemplateContentPrimary` or `TemplateContentSidebar` component.
- * This renders content in the main width of the container and should always
- * render below the primary component and the sidebar component (if any).
- */
-declare const TemplateContentBottom: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
-/**
- * This component is used to render content in a column when there must be a
- * sidebar component on either its left or right side. It must go inside the
- * `TemplateContent` component. An optional `sidebar` prop value of "left" or
- * "right" can be passed to render the correct CSS styles. If the `sidebar`
- * prop is used in the `TemplateContent` component, there is no need to pass
- * the `sidebar` prop to this component -- `TemplateContent` will handle it.
- */
-declare const TemplateContentPrimary: (props: React.PropsWithChildren<TemplateContentProps>) => JSX.Element;
-/**
- * This component is used to render content in a sidebar column. It must go
- * inside the `TemplateContent` component and must be paired with the
- * `TemplateContentPrimary` component. If this is a left sidebar, it needs to be
- * rendered before the `TemplateContentPrimary` component. If this is a right
- * sidebar, it needs to be rendered after the `TemplateContentPrimary` component.
- * An optional `sidebar` prop value of "left" or "right" can be passed to render
- * the correct CSS styles. If the `sidebar` prop is used in the `TemplateContent`
- * component, there is no need to pass the `sidebar` prop to this component --
- * `TemplateContent` will handle it.
- */
-declare const TemplateContentSidebar: (props: React.PropsWithChildren<TemplateContentProps>) => JSX.Element;
-/**
- * This optional component should be the last child of the `Template`
- * component. This is rendered as an HTML `<footer>` element and spans the full
- * width of the page. If an HTML `<footer>` element is already passed in a
- * custom component, set `renderFooterElement` to `false`.
- */
-declare const TemplateFooter: ({ children, renderFooterElement, }: React.PropsWithChildren<TemplateFooterProps>) => JSX.Element;
-/**
- * This single component can be used instead of all the individual template
- * components. Instead of importing and rendering the needed "template"
- * components, each section is passed as a prop to the section where it should
- * be rendered. For example, if you want to render content in the
- * `TemplateContentPrimary` section, then pass it as a prop to `contentPrimary`.
- */
-export declare const TemplateAppContainer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TemplateAppContainerProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-export { Template, TemplateAboveHeader, TemplateBreakout, TemplateContent, TemplateContentBottom, TemplateContentPrimary, TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, };
-export default TemplateAppContainer;
+import React from "react";
+export interface TemplateProps {
+}
+export interface TemplateHeaderProps {
+    /** Flag to render an HTML header element. True by default. */
+    renderHeaderElement?: boolean;
+}
+export interface TemplateFooterProps {
+    /** Flag to render an HTML footer element. True by default. */
+    renderFooterElement?: boolean;
+}
+export interface TemplateSidebarProps {
+    /** Renders the `TemplateContentSidebar` component either on the left or
+     * right side of the `TemplateContentPrimary` component. */
+    sidebar?: "none" | "left" | "right";
+}
+export interface TemplateContentProps extends TemplateSidebarProps {
+    /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
+     * anchor for the application skip navigation. */
+    id?: string;
+}
+export interface TemplateAppContainerProps extends TemplateFooterProps, TemplateHeaderProps, TemplateSidebarProps {
+    /** DOM that will be rendered before the rest of the components in
+     * `TemplateAppContainer` and immediately before the `TemplateHeader` component. */
+    aboveHeader?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateBreakout` component section. */
+    breakout?: React.ReactElement;
+    /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
+     * anchor for the application skip navigation. */
+    contentId?: string;
+    /** DOM that will be rendered in the `TemplateContentBottom` component section. */
+    contentBottom?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
+    contentPrimary?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateContentSidebar` component section. */
+    contentSidebar?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateContentTop` component section. */
+    contentTop?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateFooter` component section. */
+    footer?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateHeader` component section. */
+    header?: React.ReactElement;
+    /** Render the `SkipNavigation` component or not. False by default. */
+    renderSkipNavigation?: boolean;
+}
+/**
+ * The main top-level parent component that wraps all template-related
+ * components.
+ */
+declare const Template: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TemplateProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+/**
+ * This optional component renders its children from edge-to-edge and should
+ * be used for alerts or notifications that are typically site-wide. This must
+ * be rendered immediately before the `TemplateHeader` component. This is meant
+ * for components that render an `aside` HTML element or HTML element with the
+ * `role="complementary"` attribute. These elements should *not* be rendered
+ * in the `header` HTML section since that's an accessibility violation.
+ */
+declare const TemplateAboveHeader: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+/**
+ * This optional component should be the first child of the `Template`
+ * component. This is rendered as an HTML `<header>` element. If an HTML
+ * `<header>` element is already passed in a custom component as the children,
+ * set `renderFooterElement` to `false`. Otherwise, the parent wrapper will
+ * render an HTML `<header>` element.
+ */
+declare const TemplateHeader: ({ children, renderHeaderElement, }: React.PropsWithChildren<TemplateHeaderProps>) => JSX.Element;
+/**
+ * This component should be used inside the `Template` component to contain both
+ * the `TemplateAboveHeader` and `TemplateHeader` components. This is meant to
+ * render its children from edge to edge and is most useful for the headers,
+ * `Breadcrumbs`, and `Hero` components or other banner-like components.
+ */
+declare const TemplateBreakout: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+/**
+ * This component is most useful to render content on the page. This renders an
+ * HTML `<main>` element with an id of "mainContent". The "mainContent" id should
+ * be used as the consuming application's skip navigation link. The `TemplateContent`
+ * component also takes a `sidebar` prop with optional "left" or "right" values.
+ * This will set the correct *styling* needed for the `TemplateContentPrimary`
+ * and `TemplateContentSidebar` components. Note that `TemplateContentPrimary`
+ * and `TemplateContentSidebar` must be ordered correctly as children elements
+ * for the appropriate styles to take effect.
+ */
+declare const TemplateContent: (props: React.PropsWithChildren<TemplateContentProps>) => JSX.Element;
+/**
+ * This optional component must be used inside the `TemplateContent` component.
+ * This renders content in the main width of the container and will always render
+ * above the primary component and the sidebar component (if any).
+ */
+declare const TemplateContentTop: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+/**
+ * This optional component must be used inside the `TemplateContent` component
+ * and after the `TemplateContentPrimary` or `TemplateContentSidebar` component.
+ * This renders content in the main width of the container and should always
+ * render below the primary component and the sidebar component (if any).
+ */
+declare const TemplateContentBottom: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+/**
+ * This component is used to render content in a column when there must be a
+ * sidebar component on either its left or right side. It must go inside the
+ * `TemplateContent` component. An optional `sidebar` prop value of "left" or
+ * "right" can be passed to render the correct CSS styles. If the `sidebar`
+ * prop is used in the `TemplateContent` component, there is no need to pass
+ * the `sidebar` prop to this component -- `TemplateContent` will handle it.
+ */
+declare const TemplateContentPrimary: (props: React.PropsWithChildren<TemplateContentProps>) => JSX.Element;
+/**
+ * This component is used to render content in a sidebar column. It must go
+ * inside the `TemplateContent` component and must be paired with the
+ * `TemplateContentPrimary` component. If this is a left sidebar, it needs to be
+ * rendered before the `TemplateContentPrimary` component. If this is a right
+ * sidebar, it needs to be rendered after the `TemplateContentPrimary` component.
+ * An optional `sidebar` prop value of "left" or "right" can be passed to render
+ * the correct CSS styles. If the `sidebar` prop is used in the `TemplateContent`
+ * component, there is no need to pass the `sidebar` prop to this component --
+ * `TemplateContent` will handle it.
+ */
+declare const TemplateContentSidebar: (props: React.PropsWithChildren<TemplateContentProps>) => JSX.Element;
+/**
+ * This optional component should be the last child of the `Template`
+ * component. This is rendered as an HTML `<footer>` element and spans the full
+ * width of the page. If an HTML `<footer>` element is already passed in a
+ * custom component, set `renderFooterElement` to `false`.
+ */
+declare const TemplateFooter: ({ children, renderFooterElement, }: React.PropsWithChildren<TemplateFooterProps>) => JSX.Element;
+/**
+ * This single component can be used instead of all the individual template
+ * components. Instead of importing and rendering the needed "template"
+ * components, each section is passed as a prop to the section where it should
+ * be rendered. For example, if you want to render content in the
+ * `TemplateContentPrimary` section, then pass it as a prop to `contentPrimary`.
+ */
+export declare const TemplateAppContainer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TemplateAppContainerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export { Template, TemplateAboveHeader, TemplateBreakout, TemplateContent, TemplateContentBottom, TemplateContentPrimary, TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, };
+export default TemplateAppContainer;

package/dist/{components → src/components}/Text/Text.d.ts

@@ -1,24 +1,24 @@
-import React from "react";
-export declare type TextSizes = "caption" | "default" | "mini" | "tag";
-export interface TextProps {
-    /** Additional class name to render in the `Text` component. */
-    className?: string;
-    /** Optional prop used to show bolded text */
-    isBold?: boolean;
-    /** Optional prop used to show itlicized text */
-    isItalic?: boolean;
-    /** Optional prop used to show capitalized text */
-    isCapitalized?: boolean;
-    /** Optional prop used to show upper case text */
-    isUppercase?: boolean;
-    /** Optional prop used to show lower case text */
-    isLowercase?: boolean;
-    /** Optional prop used to remove default spacing */
-    noSpace?: boolean;
-    /** Optional prop to control the text styling */
-    size?: TextSizes;
-}
-export declare const Text: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TextProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-export default Text;
+import React from "react";
+export type TextSizes = "caption" | "default" | "mini" | "tag";
+export interface TextProps {
+    /** Additional class name to render in the `Text` component. */
+    className?: string;
+    /** Optional prop used to show bolded text */
+    isBold?: boolean;
+    /** Optional prop used to show itlicized text */
+    isItalic?: boolean;
+    /** Optional prop used to show capitalized text */
+    isCapitalized?: boolean;
+    /** Optional prop used to show upper case text */
+    isUppercase?: boolean;
+    /** Optional prop used to show lower case text */
+    isLowercase?: boolean;
+    /** Optional prop used to remove default spacing */
+    noSpace?: boolean;
+    /** Optional prop to control the text styling */
+    size?: TextSizes;
+}
+export declare const Text: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TextProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Text;

package/dist/{components → src/components}/TextInput/TextInput.d.ts

@@ -1,88 +1,88 @@
-import React from "react";
-import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export declare type TextInputTypes = "email" | "hidden" | "number" | "password" | "text" | "textarea" | "tel" | "url";
-export declare const TextInputFormats: {
-    email: string;
-    hidden: string;
-    password: string;
-    text: string;
-    tel: string;
-    textarea: string;
-    url: string;
-};
-export declare type TextInputVariants = "default" | "searchBar" | "searchBarSelect";
-export interface InputProps {
-    /** A class name for the TextInput parent div. */
-    className?: string;
-    /** The starting value of the input field. */
-    defaultValue?: string;
-    /** Populates the HelperErrorText for the standard state */
-    helperText?: HelperErrorTextType;
-    /** ID that other components can cross reference for accessibility purposes */
-    id: string;
-    /** Populates the HelperErrorText for the error state */
-    invalidText?: HelperErrorTextType;
-    /** Adds a button to clear existing text in the input field. */
-    isClearable?: boolean;
-    /** The callback function that is called when the clear button is clicked. */
-    isClearableCallback?: () => void;
-    /** Adds the `disabled` and `aria-disabled` prop to the input when true */
-    isDisabled?: boolean;
-    /** Adds errored styling to the input/textarea and helper text elements */
-    isInvalid?: boolean;
-    /** Will add `required` and `aria-required` props to the input/textarea elements */
-    isRequired?: boolean;
-    /** Provides text for a `Label` component if `showLabel` is set to true;
-     * populates an `aria-label` attribute if `showLabel` is set to false. */
-    labelText: string;
-    /** The max number for a `number` TextInput type. */
-    max?: number;
-    /** The max length of the input field. This prop is for all input types
-     * except for the `number` type. */
-    maxLength?: number;
-    /** The min number for a `number` TextInput type. */
-    min?: number;
-    /** Used to reference the input element in forms. */
-    name?: string;
-    /** The action to perform on the `input`/`textarea`'s onChange function  */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
-    /** The action to perform on the `input`/`textarea`'s onClick function  */
-    onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
-    /** The action to perform on the `input`/`textarea`'s onFocus function  */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    /** Regex to query the user input against. */
-    pattern?: string;
-    /** Populates the placeholder for the input/textarea elements */
-    placeholder?: string;
-    /** Allows the '(Required)' text to be changed for language purposes
-     * Note: Parenthesis will be added automatically by the component */
-    requiredLabelText?: string;
-    /** Offers the ability to hide the helper/invalid text. */
-    showHelperInvalidText?: boolean;
-    /** Offers the ability to show the label onscreen or hide it. Refer to the
-     * `labelText` property for more information. */
-    showLabel?: boolean;
-    /** Whether or not to display the "(Required)" text in the label text.
-     * True by default. */
-    showRequiredLabel?: boolean;
-    /** The amount to increase or decrease when using the number type. */
-    step?: number;
-    /** FOR INTERNAL DS USE ONLY: the input variant to display. */
-    textInputType?: TextInputVariants;
-    /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
-    type?: TextInputTypes;
-    /** Populates the value of the input/textarea elements */
-    value?: string;
-}
-/**
- * The type used for `ref`s. We want to extend both `input` and `textarea`
- * since both are available to create through `TextInput`.
- */
-export declare type TextInputRefType = HTMLInputElement & HTMLTextAreaElement;
-/**
- * Renders either an `input` element with a specified type or a `textarea`
- * element. All types will render an accessible `Label` component and an
- * optional `HelperErrorText` component.
- */
-export declare const TextInput: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInputRefType>>, {}>;
-export default TextInput;
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export type TextInputTypes = "email" | "hidden" | "number" | "password" | "text" | "textarea" | "tel" | "url";
+export declare const TextInputFormats: {
+    email: string;
+    hidden: string;
+    password: string;
+    text: string;
+    tel: string;
+    textarea: string;
+    url: string;
+};
+export type TextInputVariants = "default" | "searchBar" | "searchBarSelect";
+export interface InputProps {
+    /** A class name for the TextInput parent div. */
+    className?: string;
+    /** The starting value of the input field. */
+    defaultValue?: string;
+    /** Populates the HelperErrorText for the standard state */
+    helperText?: HelperErrorTextType;
+    /** ID that other components can cross reference for accessibility purposes */
+    id: string;
+    /** Populates the HelperErrorText for the error state */
+    invalidText?: HelperErrorTextType;
+    /** Adds a button to clear existing text in the input field. */
+    isClearable?: boolean;
+    /** The callback function that is called when the clear button is clicked. */
+    isClearableCallback?: () => void;
+    /** Adds the `disabled` and `aria-disabled` prop to the input when true */
+    isDisabled?: boolean;
+    /** Adds errored styling to the input/textarea and helper text elements */
+    isInvalid?: boolean;
+    /** Will add `required` and `aria-required` props to the input/textarea elements */
+    isRequired?: boolean;
+    /** Provides text for a `Label` component if `showLabel` is set to true;
+     * populates an `aria-label` attribute if `showLabel` is set to false. */
+    labelText: string;
+    /** The max number for a `number` TextInput type. */
+    max?: number;
+    /** The max length of the input field. This prop is for all input types
+     * except for the `number` type. */
+    maxLength?: number;
+    /** The min number for a `number` TextInput type. */
+    min?: number;
+    /** Used to reference the input element in forms. */
+    name?: string;
+    /** The action to perform on the `input`/`textarea`'s onChange function  */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /** The action to perform on the `input`/`textarea`'s onClick function  */
+    onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+    /** The action to perform on the `input`/`textarea`'s onFocus function  */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Regex to query the user input against. */
+    pattern?: string;
+    /** Populates the placeholder for the input/textarea elements */
+    placeholder?: string;
+    /** Allows the '(Required)' text to be changed for language purposes
+     * Note: Parenthesis will be added automatically by the component */
+    requiredLabelText?: string;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Offers the ability to show the label onscreen or hide it. Refer to the
+     * `labelText` property for more information. */
+    showLabel?: boolean;
+    /** Whether or not to display the "(Required)" text in the label text.
+     * True by default. */
+    showRequiredLabel?: boolean;
+    /** The amount to increase or decrease when using the number type. */
+    step?: number;
+    /** FOR INTERNAL DS USE ONLY: the input variant to display. */
+    textInputType?: TextInputVariants;
+    /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
+    type?: TextInputTypes;
+    /** Populates the value of the input/textarea elements */
+    value?: string;
+}
+/**
+ * The type used for `ref`s. We want to extend both `input` and `textarea`
+ * since both are available to create through `TextInput`.
+ */
+export type TextInputRefType = HTMLInputElement & HTMLTextAreaElement;
+/**
+ * Renders either an `input` element with a specified type or a `textarea`
+ * element. All types will render an accessible `Label` component and an
+ * optional `HelperErrorText` component.
+ */
+export declare const TextInput: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInputRefType>>, {}>;
+export default TextInput;