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

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

@@ -1,29 +1,29 @@
-import React from "react";
-export declare type AccordionTypes = "default" | "warning" | "error";
-export interface AccordionDataProps {
-    accordionType?: AccordionTypes;
-    label: string;
-    panel: string | React.ReactNode;
-}
-export interface AccordionProps {
-    /** Array of data to display, and an optional accordionType */
-    accordionData: AccordionDataProps[];
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
-    /** Whether the accordion is open by default only on its initial rendering */
-    isDefaultOpen?: boolean;
-    /** Whether the contents of the Accordion should always be rendered.
-     *  Useful for form-components. `false` by default. */
-    isAlwaysRendered?: boolean;
-    /** Sets max height of accordion panel. This value should be entered with the
-     * formatting of a CSS height attribute (ex. 100px, 8rem). If height of content
-     * within accordion panel is greater than height set by panelMaxHeight, a
-     * scrollbar will appear for accordion panel. */
-    panelMaxHeight?: string;
-}
-/**
- * Accordion component that shows content on toggle. Can be used to display
- * multiple accordion items together.
- */
-export declare const Accordion: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>, {}>;
-export default Accordion;
+import React from "react";
+export type AccordionTypes = "default" | "warning" | "error";
+export interface AccordionDataProps {
+    accordionType?: AccordionTypes;
+    label: string;
+    panel: string | React.ReactNode;
+}
+export interface AccordionProps {
+    /** Array of data to display, and an optional accordionType */
+    accordionData: AccordionDataProps[];
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Whether the accordion is open by default only on its initial rendering */
+    isDefaultOpen?: boolean;
+    /** Whether the contents of the Accordion should always be rendered.
+     *  Useful for form-components. `false` by default. */
+    isAlwaysRendered?: boolean;
+    /** Sets max height of accordion panel. This value should be entered with the
+     * formatting of a CSS height attribute (ex. 100px, 8rem). If height of content
+     * within accordion panel is greater than height set by panelMaxHeight, a
+     * scrollbar will appear for accordion panel. */
+    panelMaxHeight?: string;
+}
+/**
+ * Accordion component that shows content on toggle. Can be used to display
+ * multiple accordion items together.
+ */
+export declare const Accordion: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Accordion;

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

@@ -1,23 +1,23 @@
-import React from "react";
-export interface AlphabetFilterProps {
-    /** Array of letters to specify which `Button` components should be set in an `enabled`
-     * state. By default, all buttons are `enabled`. */
-    activeLetters?: string[];
-    /** A class name for the AlphabetFilter parent div. */
-    className?: string;
-    /** The currentLetter can be used to programatically set the selected letter without the
-     * user explicitly requesting it. */
-    currentLetter?: string;
-    /** Value used to set the text for a `Text` component that will be displayed above the letter buttons. */
-    descriptionText?: string | JSX.Element;
-    /** Value used to set the text for a `Heading` component. */
-    headingText?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
-    /** Adds the `disabled` prop to the AlphabetFilter when true. */
-    isDisabled?: boolean;
-    /** The callback function called when a letter button or the Show All button is clicked. */
-    onClick: (filterValue: string) => void;
-}
-export declare const AlphabetFilter: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<AlphabetFilterProps & React.RefAttributes<HTMLDivElement>>, {}>;
-export default AlphabetFilter;
+import React from "react";
+export interface AlphabetFilterProps {
+    /** Array of letters to specify which `Button` components should be set in an `enabled`
+     * state. By default, all buttons are `enabled`. */
+    activeLetters?: string[];
+    /** A class name for the AlphabetFilter parent div. */
+    className?: string;
+    /** The currentLetter can be used to programatically set the selected letter without the
+     * user explicitly requesting it. */
+    currentLetter?: string;
+    /** Value used to set the text for a `Text` component that will be displayed above the letter buttons. */
+    descriptionText?: string | JSX.Element;
+    /** Value used to set the text for a `Heading` component. */
+    headingText?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Adds the `disabled` prop to the AlphabetFilter when true. */
+    isDisabled?: boolean;
+    /** The callback function called when a letter button or the Show All button is clicked. */
+    onClick: (filterValue: string) => void;
+}
+export declare const AlphabetFilter: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<AlphabetFilterProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default AlphabetFilter;

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

@@ -1,43 +1,43 @@
-import React from "react";
-declare const thirdPartyServices: readonly ["libsyn", "soundcloud", "spotify"];
-export declare type ThirdPartyAudioType = typeof thirdPartyServices[number];
-export declare type AudioType = ThirdPartyAudioType | "file";
-export interface AudioPlayerProps {
-    /** Required string used to specify the type of audio playback. */
-    audioType: AudioType;
-    /** Optional className you can add in addition to `audio-player`. */
-    className?: string;
-    /** Optional string to set the text for the audio player description. */
-    descriptionText?: string;
-    /** Optional string to set a code snippet provided by Libsyn, SoundCloud or Spotify; the
-     * `AudioPlayer` component will accept the `embedCode` prop or the `filePath` prop.
-     */
-    embedCode?: string;
-    /** Optional string to set the audio file, the path can be relative or absolute
-     * referring to a locally hosted file, or a fully qualified URL pointing to a locally hosted file
-     * or to another domain altogether.
-     * TODO: This prop won't be used until a future version.
-     */
-    /** Optional string to set the text for a `Heading` component. */
-    headingText?: string;
-    /** Optional string to set the text for a `HelperErrorText` component. */
-    helperText?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
-    /** Optional title to added to the `<iframe>` element for improved accessibility. If omitted, a
-     * generic title will be added.
-     */
-    iframeTitle?: string;
-}
-/**
- * Renders an audio player from 3rd party services such as Libsyn, SoundCloud, and Spotify.
- */
-export declare const AudioPlayer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<AudioPlayerProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-/**
- * Parse the embedCode string to a DOM object for proper formatted HTML element.
- * We are only interested in the iframe element.
- */
-export declare function parseIframeEmbedCode(embedCode: string | undefined): HTMLIFrameElement | undefined;
-export default AudioPlayer;
+import React from "react";
+declare const thirdPartyServices: readonly ["libsyn", "soundcloud", "spotify"];
+export type ThirdPartyAudioType = typeof thirdPartyServices[number];
+export type AudioType = ThirdPartyAudioType | "file";
+export interface AudioPlayerProps {
+    /** Required string used to specify the type of audio playback. */
+    audioType: AudioType;
+    /** Optional className you can add in addition to `audio-player`. */
+    className?: string;
+    /** Optional string to set the text for the audio player description. */
+    descriptionText?: string;
+    /** Optional string to set a code snippet provided by Libsyn, SoundCloud or Spotify; the
+     * `AudioPlayer` component will accept the `embedCode` prop or the `filePath` prop.
+     */
+    embedCode?: string;
+    /** Optional string to set the audio file, the path can be relative or absolute
+     * referring to a locally hosted file, or a fully qualified URL pointing to a locally hosted file
+     * or to another domain altogether.
+     * TODO: This prop won't be used until a future version.
+     */
+    /** Optional string to set the text for a `Heading` component. */
+    headingText?: string;
+    /** Optional string to set the text for a `HelperErrorText` component. */
+    helperText?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Optional title to added to the `<iframe>` element for improved accessibility. If omitted, a
+     * generic title will be added.
+     */
+    iframeTitle?: string;
+}
+/**
+ * Renders an audio player from 3rd party services such as Libsyn, SoundCloud, and Spotify.
+ */
+export declare const AudioPlayer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<AudioPlayerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+/**
+ * Parse the embedCode string to a DOM object for proper formatted HTML element.
+ * We are only interested in the iframe element.
+ */
+export declare function parseIframeEmbedCode(embedCode: string | undefined): HTMLIFrameElement | undefined;
+export default AudioPlayer;

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

@@ -1,18 +1,18 @@
-import React from "react";
-export declare type BreadcrumbsTypes = "blogs" | "booksAndMore" | "brand" | "education" | "locations" | "research" | "whatsOn";
-export interface BreadcrumbsDataProps {
-    url: string;
-    text: string | React.ReactNode;
-}
-export interface BreadcrumbProps {
-    /** Breadcrumb links as an array */
-    breadcrumbsData: BreadcrumbsDataProps[];
-    /** Used to control how the `Hero` component will be rendered. */
-    breadcrumbsType?: BreadcrumbsTypes;
-    /** className you can add in addition to 'input' */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
-}
-export declare const Breadcrumbs: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLDivElement>>, {}>;
-export default Breadcrumbs;
+import React from "react";
+export type BreadcrumbsTypes = "blogs" | "booksAndMore" | "brand" | "education" | "locations" | "research" | "whatsOn";
+export interface BreadcrumbsDataProps {
+    url: string;
+    text: string | React.ReactNode;
+}
+export interface BreadcrumbProps {
+    /** Breadcrumb links as an array */
+    breadcrumbsData: BreadcrumbsDataProps[];
+    /** Used to control how the `Hero` component will be rendered. */
+    breadcrumbsType?: BreadcrumbsTypes;
+    /** className you can add in addition to 'input' */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+}
+export declare const Breadcrumbs: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Breadcrumbs;

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

@@ -1,30 +1,30 @@
-import React from "react";
-export declare type ButtonElementType = "submit" | "button" | "reset";
-export declare type ButtonSizes = "small" | "medium" | "large";
-export declare type ButtonTypes = "primary" | "secondary" | "text" | "callout" | "pill" | "noBrand" | "link";
-interface ButtonProps {
-    /** The button variation to render based on the `ButtonTypes` type.*/
-    buttonType?: ButtonTypes;
-    /** Additional className to use. */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id: string;
-    /** Adds 'disabled' property to the button. */
-    isDisabled?: boolean;
-    /** Trigger the Button's action through the `mouseDown` event handler instead
-     * of `onClick`. `false` by default. */
-    mouseDown?: boolean;
-    /** The action to perform on the `<button>`'s onClick function. */
-    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
-    /** The size of the `Button`. */
-    size?: ButtonSizes;
-    /** The HTML button type attribute. */
-    type?: ButtonElementType;
-}
-/**
- * Renders a simple `button` element with custom variant styles.
- */
-export declare const Button: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ButtonProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLButtonElement>>, {}>;
-export default Button;
+import React from "react";
+export type ButtonElementType = "submit" | "button" | "reset";
+export type ButtonSizes = "small" | "medium" | "large";
+export type ButtonTypes = "primary" | "secondary" | "text" | "callout" | "pill" | "noBrand" | "link";
+interface ButtonProps {
+    /** The button variation to render based on the `ButtonTypes` type.*/
+    buttonType?: ButtonTypes;
+    /** Additional className to use. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id: string;
+    /** Adds 'disabled' property to the button. */
+    isDisabled?: boolean;
+    /** Trigger the Button's action through the `mouseDown` event handler instead
+     * of `onClick`. `false` by default. */
+    mouseDown?: boolean;
+    /** The action to perform on the `<button>`'s onClick function. */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** The size of the `Button`. */
+    size?: ButtonSizes;
+    /** The HTML button type attribute. */
+    type?: ButtonElementType;
+}
+/**
+ * Renders a simple `button` element with custom variant styles.
+ */
+export declare const Button: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ButtonProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>, {}>;
+export default Button;

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

@@ -1,24 +1,24 @@
-import React from "react";
-import { LayoutTypes } from "../../helpers/types";
-export declare type ButtonGroupWidths = "default" | "full";
-interface ButtonGroupProps {
-    /** Sets the width to "default" (for "fit-content") or "full". */
-    buttonWidth?: ButtonGroupWidths;
-    /** Additional className to use. */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
-    /** Set's the disabled state to all the internal `Button` components. */
-    isDisabled?: boolean;
-    /** Renders the layout of `Button` components in a row or column. */
-    layout?: LayoutTypes;
-}
-/**
- * A simple wrapper to group `Button` components together. The layout can be set
- * to row or column and the width of internal `Button` components can be set to
- * the parent's full width or the `Button`'s content width
- */
-export declare const ButtonGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ButtonGroupProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-export default ButtonGroup;
+import React from "react";
+import { LayoutTypes } from "../../helpers/types";
+export type ButtonGroupWidths = "default" | "full";
+interface ButtonGroupProps {
+    /** Sets the width to "default" (for "fit-content") or "full". */
+    buttonWidth?: ButtonGroupWidths;
+    /** Additional className to use. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Set's the disabled state to all the internal `Button` components. */
+    isDisabled?: boolean;
+    /** Renders the layout of `Button` components in a row or column. */
+    layout?: LayoutTypes;
+}
+/**
+ * A simple wrapper to group `Button` components together. The layout can be set
+ * to row or column and the width of internal `Button` components can be set to
+ * the parent's full width or the `Button`'s content width
+ */
+export declare const ButtonGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ButtonGroupProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default ButtonGroup;

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

@@ -1,55 +1,55 @@
-import React from "react";
-import { LayoutTypes } from "../../helpers/types";
-import { ComponentImageProps } from "../Image/Image";
-interface CardBaseProps {
-    /** Optional value to control the alignment of the text and elements. */
-    isCentered?: boolean;
-    /** Optional value to render the layout in a row or column.
-     * Default is `"column"`. */
-    layout?: LayoutTypes;
-}
-interface CardWrapperProps {
-    /** Optional CSS class name to add. */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
-    /** Main link to use when the full `Card` component should be clickable. */
-    mainActionLink?: string;
-    /** Additional object for styling the `Card`'s `div` wrapper. */
-    styles?: any;
-}
-interface CardImageProps extends ComponentImageProps {
-    /** Optional boolean value to control the position of the `CardImage`. */
-    isAtEnd?: boolean;
-}
-interface CardActionsProps extends CardBaseProps {
-    /** Optional boolean value to control visibility of border on the bottom edge
-     * of the card actions element */
-    bottomBorder?: boolean;
-    /** Optional boolean value to control visibility of border on the top edge of
-     * the card actions element */
-    topBorder?: boolean;
-}
-export interface CardProps extends CardBaseProps, CardWrapperProps {
-    /** Optional hex color value used to set the card background color. */
-    backgroundColor?: string;
-    /** Optional hex color value used to override the default text color. */
-    foregroundColor?: string;
-    /** Optional boolean value to control the visibility of a border around
-     * the card. */
-    isBordered?: boolean;
-    /** Object used to create and render the `Image` component. */
-    imageProps?: CardImageProps;
-    /** Set CardActions to the right content side. This only works in
-     * the row layout. */
-    isAlignedRightActions?: boolean;
-}
-export declare const CardHeading: import("@chakra-ui/react").ChakraComponent<import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<import("../Heading/Heading").HeadingProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLHeadingElement>>, {}>, {}>;
-export declare const CardContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<{}>) => JSX.Element, {}>;
-export declare const CardActions: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<CardActionsProps>) => JSX.Element, {}>;
-export declare const Card: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CardProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-export default Card;
+import React from "react";
+import { LayoutTypes } from "../../helpers/types";
+import { ComponentImageProps } from "../Image/Image";
+interface CardBaseProps {
+    /** Optional value to control the alignment of the text and elements. */
+    isCentered?: boolean;
+    /** Optional value to render the layout in a row or column.
+     * Default is `"column"`. */
+    layout?: LayoutTypes;
+}
+interface CardWrapperProps {
+    /** Optional CSS class name to add. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Main link to use when the full `Card` component should be clickable. */
+    mainActionLink?: string;
+    /** Additional object for styling the `Card`'s `div` wrapper. */
+    styles?: any;
+}
+interface CardImageProps extends ComponentImageProps {
+    /** Optional boolean value to control the position of the `CardImage`. */
+    isAtEnd?: boolean;
+}
+interface CardActionsProps extends CardBaseProps {
+    /** Optional boolean value to control visibility of border on the bottom edge
+     * of the card actions element */
+    bottomBorder?: boolean;
+    /** Optional boolean value to control visibility of border on the top edge of
+     * the card actions element */
+    topBorder?: boolean;
+}
+export interface CardProps extends CardBaseProps, CardWrapperProps {
+    /** Optional hex color value used to set the card background color. */
+    backgroundColor?: string;
+    /** Optional hex color value used to override the default text color. */
+    foregroundColor?: string;
+    /** Optional boolean value to control the visibility of a border around
+     * the card. */
+    isBordered?: boolean;
+    /** Object used to create and render the `Image` component. */
+    imageProps?: CardImageProps;
+    /** Set CardActions to the right content side. This only works in
+     * the row layout. */
+    isAlignedRightActions?: boolean;
+}
+export declare const CardHeading: import("@chakra-ui/react").ChakraComponent<import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<import("../Heading/Heading").HeadingProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLHeadingElement>>, {}>, {}>;
+export declare const CardContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<{}>) => JSX.Element, {}>;
+export declare const CardActions: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<CardActionsProps>) => JSX.Element, {}>;
+export declare const Card: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CardProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Card;

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

@@ -1,47 +1,47 @@
-import React from "react";
-import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-interface CheckboxIconProps {
-    /** When using the Checkbox as a "controlled" form element, you can specify
-     * the Checkbox's checked state using this prop.
-     * Learn more about controlled and uncontrolled form fields:
-     * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
-    isChecked?: boolean;
-    /** Adds the indeterminate state to the `Checkbox`. */
-    isIndeterminate?: boolean;
-}
-export interface CheckboxProps extends CheckboxIconProps {
-    /** className you can add in addition to 'input' */
-    className?: string;
-    /** Optional string to populate the HelperErrorText for standard state */
-    helperText?: HelperErrorTextType;
-    /** ID that other components can cross reference for accessibility purposes */
-    id: string;
-    /** Optional string to populate the HelperErrorText for the error state
-     * when `isInvalid` is true. */
-    invalidText?: HelperErrorTextType;
-    /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
-     * This also makes the text italic and color scheme gray. */
-    isDisabled?: boolean;
-    /** Adds the 'aria-invalid' attribute to the input when true. This also makes
-     * the color theme "NYPL error" red for the button and text. */
-    isInvalid?: boolean;
-    /** Adds the 'required' attribute to the input when true. */
-    isRequired?: boolean;
-    /** The checkbox's label. This will serve as the text content for a `<label>`
-     * element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
-    labelText: string | JSX.Element;
-    /** The name prop indicates into which group of checkboxes this checkbox
-     * belongs. If none is specified, 'default' will be used */
-    name?: string;
-    /** The action to perform on the `<input>`'s onChange function  */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Offers the ability to hide the helper/invalid text. */
-    showHelperInvalidText?: boolean;
-    /** Offers the ability to show the checkbox's label onscreen or hide it.
-     * Refer to the `labelText` property for more information. */
-    showLabel?: boolean;
-    /** Populates the value of the input */
-    value?: string;
-}
-export declare const Checkbox: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>, {}>;
-export default Checkbox;
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+interface CheckboxIconProps {
+    /** When using the Checkbox as a "controlled" form element, you can specify
+     * the Checkbox's checked state using this prop.
+     * Learn more about controlled and uncontrolled form fields:
+     * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
+    isChecked?: boolean;
+    /** Adds the indeterminate state to the `Checkbox`. */
+    isIndeterminate?: boolean;
+}
+export interface CheckboxProps extends CheckboxIconProps {
+    /** className you can add in addition to 'input' */
+    className?: string;
+    /** Optional string to populate the HelperErrorText for standard state */
+    helperText?: HelperErrorTextType;
+    /** ID that other components can cross reference for accessibility purposes */
+    id: string;
+    /** Optional string to populate the HelperErrorText for the error state
+     * when `isInvalid` is true. */
+    invalidText?: HelperErrorTextType;
+    /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
+     * This also makes the text italic and color scheme gray. */
+    isDisabled?: boolean;
+    /** Adds the 'aria-invalid' attribute to the input when true. This also makes
+     * the color theme "NYPL error" red for the button and text. */
+    isInvalid?: boolean;
+    /** Adds the 'required' attribute to the input when true. */
+    isRequired?: boolean;
+    /** The checkbox's label. This will serve as the text content for a `<label>`
+     * element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
+    labelText: string | JSX.Element;
+    /** The name prop indicates into which group of checkboxes this checkbox
+     * belongs. If none is specified, 'default' will be used */
+    name?: string;
+    /** The action to perform on the `<input>`'s onChange function  */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Offers the ability to show the checkbox's label onscreen or hide it.
+     * Refer to the `labelText` property for more information. */
+    showLabel?: boolean;
+    /** Populates the value of the input */
+    value?: string;
+}
+export declare const Checkbox: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>, {}>;
+export default Checkbox;