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

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

@@ -1,35 +1,35 @@
-import React from "react";
-interface BaseModalProps {
-    bodyContent?: string | JSX.Element;
-    closeButtonLabel?: string;
-    headingText?: string | JSX.Element;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
-    isOpen?: boolean;
-    onClose?: () => void;
-}
-export interface ModalProps {
-    buttonText?: string;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
-    modalProps: BaseModalProps;
-}
-/**
- * The `ModalTrigger` component renders a button that you click to open the
- * internal `Modal` component. Note that props to update the internal `Modal`
- * component are passed through to the `modalProps` prop.
- */
-export declare const ModalTrigger: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ModalProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLButtonElement>>, {}>;
-/**
- * This hook function can be used to render the `Modal` component with a custom
- * open button(s) and optional custom close button(s). You must render your own
- * button and pass the appropriate `onOpen` and ` handler for the modal to open.
- */
-export declare function useModal(): {
-    onClose: () => void;
-    onOpen: () => void;
-    Modal: import("@chakra-ui/react").ChakraComponent<({ bodyContent, closeButtonLabel, headingText, id, ...rest }: React.PropsWithChildren<BaseModalProps>) => JSX.Element, {}>;
-};
-export {};
+import React from "react";
+interface BaseModalProps {
+    bodyContent?: string | JSX.Element;
+    closeButtonLabel?: string;
+    headingText?: string | JSX.Element;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    isOpen?: boolean;
+    onClose?: () => void;
+}
+export interface ModalProps {
+    buttonText?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    modalProps: BaseModalProps;
+}
+/**
+ * The `ModalTrigger` component renders a button that you click to open the
+ * internal `Modal` component. Note that props to update the internal `Modal`
+ * component are passed through to the `modalProps` prop.
+ */
+export declare const ModalTrigger: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ModalProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>, {}>;
+/**
+ * This hook function can be used to render the `Modal` component with a custom
+ * open button(s) and optional custom close button(s). You must render your own
+ * button and pass the appropriate `onOpen` and ` handler for the modal to open.
+ */
+export declare function useModal(): {
+    onClose: () => void;
+    onOpen: () => void;
+    Modal: import("@chakra-ui/react").ChakraComponent<({ bodyContent, closeButtonLabel, headingText, id, ...rest }: React.PropsWithChildren<BaseModalProps>) => JSX.Element, {}>;
+};
+export {};

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

@@ -1,78 +1,60 @@
-import React from "react";
-export interface MultiSelectItem {
-    id: string;
-    name: string;
-    children?: MultiSelectItem[];
-}
-export declare type MultiSelectWidths = "default" | "fitContent" | "full";
-export interface SelectedItems {
-    [name: string]: {
-        items: string[];
-    };
-}
-interface MultiSelectCommonProps {
-    /** The id of the MultiSelect. */
-    id: string;
-    /** Set the default open or closed state of the Multiselect. */
-    isDefaultOpen?: boolean;
-    /** Boolean value used to control how the MultiSelect component will render within the page and interact with other DOM elements.
-     * The default value is false. */
-    isBlockElement?: boolean;
-    /** The items to be rendered in the Multiselect as checkbox options. */
-    items: MultiSelectItem[];
-    /** The label text rendered within the MultiSelect. */
-    labelText: string;
-    /** The action to perform for clear/reset button of MultiSelect. */
-    onClear?: () => void;
-    /** The type of MultiSelect that will be rendered. */
-    type: "listbox" | "dialog";
-    /** The selected items state (items that were checked by user). */
-    selectedItems: SelectedItems;
-    /** Value used to set the width for the MultiSelect component. */
-    width?: MultiSelectWidths;
-}
-declare type ListboxOnChange = (selectedItem: MultiSelectItem, id: string) => void;
-declare type DialogOnChange = (event: React.ChangeEvent<HTMLInputElement>) => void;
-declare type MultiSelectVariantsProps = {
-    type: "listbox";
-    onApply?: never;
-    /** The action to perform for downshift's onSelectedItemChange function. */
-    onChange: ListboxOnChange;
-    onMixedStateChange?: never;
-} | {
-    type: "dialog";
-    /** The action to perform for save/apply button of multiselect. */
-    onApply: () => void;
-    /** The action to perform on the checkbox's onChange function.  */
-    onChange: DialogOnChange;
-    /** The action to perform for a mixed state checkbox (parent checkbox). */
-    onMixedStateChange?: DialogOnChange;
-};
-export declare type MultiSelectProps = MultiSelectCommonProps & MultiSelectVariantsProps;
-/**
- * The `MultiSelect` component is a form input element that presents a list
- * of `Checkbox` components from which a user can make one or multiple
- * selections. Two variants of the MultiSelect component are offered, each with
- * slightly different functionality and requirements.  Because of these
- * differences, the two variants are broken out in separate stories below.
- */
-export declare const MultiSelect: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<(MultiSelectCommonProps & {
-    type: "listbox";
-    onApply?: never;
-    /** The action to perform for downshift's onSelectedItemChange function. */
-    onChange: ListboxOnChange;
-    onMixedStateChange?: never;
-} & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>) | (MultiSelectCommonProps & {
-    type: "dialog";
-    /** The action to perform for save/apply button of multiselect. */
-    onApply: () => void;
-    /** The action to perform on the checkbox's onChange function.  */
-    onChange: DialogOnChange;
-    /** The action to perform for a mixed state checkbox (parent checkbox). */
-    onMixedStateChange?: DialogOnChange;
-} & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>)>, {}>;
-export default MultiSelect;
+import React from "react";
+export interface MultiSelectItem {
+    id: string;
+    name: string;
+    children?: MultiSelectItem[];
+}
+export type MultiSelectWidths = "default" | "fitContent" | "full";
+export interface SelectedItems {
+    [name: string]: {
+        items: string[];
+    };
+}
+interface MultiSelectCommonProps {
+    /** The id of the MultiSelect. */
+    id: string;
+    /** Set the default open or closed state of the Multiselect. */
+    isDefaultOpen?: boolean;
+    /** Boolean value used to control how the MultiSelect component will render within the page and interact with other DOM elements.
+     * The default value is false. */
+    isBlockElement?: boolean;
+    /** The items to be rendered in the Multiselect as checkbox options. */
+    items: MultiSelectItem[];
+    /** The label text rendered within the MultiSelect. */
+    labelText: string;
+    /** The action to perform for clear/reset button of MultiSelect. */
+    onClear?: () => void;
+    /** The type of MultiSelect that will be rendered. */
+    type: "listbox" | "dialog";
+    /** The selected items state (items that were checked by user). */
+    selectedItems: SelectedItems;
+    /** Value used to set the width for the MultiSelect component. */
+    width?: MultiSelectWidths;
+}
+type ListboxOnChange = (selectedItem: MultiSelectItem, id: string) => void;
+type DialogOnChange = (event: React.ChangeEvent<HTMLInputElement>) => void;
+type MultiSelectVariantsProps = {
+    type: "listbox";
+    onApply?: never;
+    /** The action to perform for downshift's onSelectedItemChange function. */
+    onChange: ListboxOnChange;
+    onMixedStateChange?: never;
+} | {
+    type: "dialog";
+    /** The action to perform for save/apply button of multiselect. */
+    onApply: () => void;
+    /** The action to perform on the checkbox's onChange function.  */
+    onChange: DialogOnChange;
+    /** The action to perform for a mixed state checkbox (parent checkbox). */
+    onMixedStateChange?: DialogOnChange;
+};
+export type MultiSelectProps = MultiSelectCommonProps & MultiSelectVariantsProps;
+/**
+ * The `MultiSelect` component is a form input element that presents a list
+ * of `Checkbox` components from which a user can make one or multiple
+ * selections. Two variants of the MultiSelect component are offered, each with
+ * slightly different functionality and requirements.  Because of these
+ * differences, the two variants are broken out in separate stories below.
+ */
+export declare const MultiSelect: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<MultiSelectProps> & React.RefAttributes<HTMLDivElement>>, {}>;
+export default MultiSelect;

package/dist/{components → src/components}/MultiSelect/MultiSelectDialog.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-import { MultiSelectProps } from "./MultiSelect";
-export declare const MultiSelectDialog: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<Pick<MultiSelectProps, "id" | "isDefaultOpen" | "isBlockElement" | "items" | "labelText" | "onClear" | "type" | "selectedItems" | "width" | "onApply" | "onMixedStateChange"> & {
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-} & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-export default MultiSelectDialog;
+import React from "react";
+import { MultiSelectProps } from "./MultiSelect";
+export declare const MultiSelectDialog: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<Omit<MultiSelectProps, "onChange"> & {
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default MultiSelectDialog;

package/dist/{components → src/components}/MultiSelect/MultiSelectListbox.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-import { MultiSelectItem, MultiSelectProps } from "./MultiSelect";
-/** MultiSelectListbox renders a non-hierarchical list of checkbox options for the `type="listbox". It leverager downshift-js for accessiblity. */
-export declare const MultiSelectListbox: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<Pick<MultiSelectProps, "id" | "isDefaultOpen" | "isBlockElement" | "items" | "labelText" | "onClear" | "type" | "selectedItems" | "width" | "onApply" | "onMixedStateChange"> & {
-    onChange: (selectedItem: MultiSelectItem, id: string) => void;
-} & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLElement>>, {}>;
-export default MultiSelectListbox;
+import React from "react";
+import { MultiSelectItem, MultiSelectProps } from "./MultiSelect";
+/** MultiSelectListbox renders a non-hierarchical list of checkbox options for the `type="listbox". It leverager downshift-js for accessiblity. */
+export declare const MultiSelectListbox: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<Omit<MultiSelectProps, "onChange"> & {
+    onChange: (selectedItem: MultiSelectItem, id: string) => void;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>, {}>;
+export default MultiSelectListbox;

package/dist/{components → src/components}/MultiSelect/MultiSelectMenuButton.d.ts

@@ -1,27 +1,27 @@
-import React from "react";
-import { SelectedItems } from "./MultiSelect";
-export interface MultiSelectMenuButtonProps {
-    id: string;
-    /** The id of the MultiSelect using this button. */
-    multiSelectId: string;
-    /** The label text rendered within the MultiSelect using this button. */
-    multiSelectLabelText: string;
-    /** The open status of the MultiSelect menu. */
-    isOpen: boolean;
-    /** The selected items state (items that were checked by user). */
-    selectedItems: SelectedItems;
-    /** The callback function for the menu toggle. */
-    onMenuToggle?: () => void;
-    /** The action to perform for clear/reset button of MultiSelect. */
-    onClear?: () => void;
-    onKeyDown?: () => void;
-}
-/**
- * The toggle button component used to open and close the `MultiSelect` menu.
- * A second button is rendered above the main button that displays the current
- * number of selected items. Clicking on the second button will clear all
- * the selected items and the main button's close event will not be fired
- * (as expected).
- */
-declare const MultiSelectMenuButton: React.ForwardRefExoticComponent<MultiSelectMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default MultiSelectMenuButton;
+import React from "react";
+import { SelectedItems } from "./MultiSelect";
+export interface MultiSelectMenuButtonProps {
+    id: string;
+    /** The id of the MultiSelect using this button. */
+    multiSelectId: string;
+    /** The label text rendered within the MultiSelect using this button. */
+    multiSelectLabelText: string;
+    /** The open status of the MultiSelect menu. */
+    isOpen: boolean;
+    /** The selected items state (items that were checked by user). */
+    selectedItems: SelectedItems;
+    /** The callback function for the menu toggle. */
+    onMenuToggle?: () => void;
+    /** The action to perform for clear/reset button of MultiSelect. */
+    onClear?: () => void;
+    onKeyDown?: () => void;
+}
+/**
+ * The toggle button component used to open and close the `MultiSelect` menu.
+ * A second button is rendered above the main button that displays the current
+ * number of selected items. Clicking on the second button will clear all
+ * the selected items and the main button's close event will not be fired
+ * (as expected).
+ */
+declare const MultiSelectMenuButton: React.ForwardRefExoticComponent<MultiSelectMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default MultiSelectMenuButton;

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

@@ -1,26 +1,26 @@
-import React from "react";
-import { LayoutTypes } from "../../helpers/types";
-import { MultiSelectWidths } from "../MultiSelect/MultiSelect";
-export interface MultiSelectGroupProps {
-    children: React.ReactNode;
-    /** Additional className to use. */
-    className?: string;
-    id: string;
-    labelText: string;
-    /** Renders the layout of `MultiSelect` components in a row or column. */
-    layout?: LayoutTypes;
-    /** Width will be passed on each `MultiSelect` component. */
-    multiSelectWidth?: MultiSelectWidths;
-    /** Is set to `true` by default and determines if the `labelText` is visible on the site. */
-    showLabel?: boolean;
-}
-/**
- * `MultiSelectGroup` is a wrapper component specific for `MultiSelect` components. The wrapped `MutliSelect` components can be displayed in a
- * column or in a row. The `MultiSelectGroup` component renders all the necessary
- * wrapping and associated text elements, but the child elements
- * _need_ to be `MultiSelect` components from the NYPL Design System.
- */
-export declare const MultiSelectGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<MultiSelectGroupProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-export default MultiSelectGroup;
+import React from "react";
+import { LayoutTypes } from "../../helpers/types";
+import { MultiSelectWidths } from "../MultiSelect/MultiSelect";
+export interface MultiSelectGroupProps {
+    children: React.ReactNode;
+    /** Additional className to use. */
+    className?: string;
+    id: string;
+    labelText: string;
+    /** Renders the layout of `MultiSelect` components in a row or column. */
+    layout?: LayoutTypes;
+    /** Width will be passed on each `MultiSelect` component. */
+    multiSelectWidth?: MultiSelectWidths;
+    /** Is set to `true` by default and determines if the `labelText` is visible on the site. */
+    showLabel?: boolean;
+}
+/**
+ * `MultiSelectGroup` is a wrapper component specific for `MultiSelect` components. The wrapped `MutliSelect` components can be displayed in a
+ * column or in a row. The `MultiSelectGroup` component renders all the necessary
+ * wrapping and associated text elements, but the child elements
+ * _need_ to be `MultiSelect` components from the NYPL Design System.
+ */
+export declare const MultiSelectGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<MultiSelectGroupProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default MultiSelectGroup;

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

@@ -1,51 +1,51 @@
-import React from "react";
-export declare type NotificationTypes = "standard" | "announcement" | "warning";
-interface BaseProps {
-    /** Optional prop to control text alignment in `NotificationContent` */
-    alignText?: boolean;
-    /** 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 horizontal alignment of the `Notification` content */
-    isCentered?: boolean;
-    /** Content to be rendered in a `NotificationHeading` component. */
-    notificationHeading?: string;
-    /** Optional prop to control the coloring of the `Notification` text and the
-     * visibility of an applicable icon. */
-    notificationType?: NotificationTypes;
-    /** Prop to display the `Notification` icon. Defaults to `true`. */
-    showIcon?: boolean;
-}
-declare type NotificationHeadingProps = Omit<BasePropsWithoutAlignText, "notificationHeading" | "showIcon">;
-declare type NotificationContentProps = Omit<BaseProps, "icon">;
-declare type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
-export interface NotificationProps extends BasePropsWithoutAlignText {
-    /** Label used to describe the `Notification`'s aside HTML element. */
-    ariaLabel?: string;
-    /** Additional `className` to add.  */
-    className?: string;
-    /** 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?: JSX.Element;
-    /** Optional prop to control the margin around the `Notification` component. */
-    noMargin?: boolean;
-    /** Content to be rendered in a `NotificationContent` component. */
-    notificationContent: string | JSX.Element;
-}
-/**
- * NotificationHeading child-component.
- */
-export declare const NotificationHeading: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<NotificationHeadingProps>) => JSX.Element, {}>;
-/**
- * NotificationContent child-component.
- */
-export declare const NotificationContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<NotificationContentProps>) => JSX.Element, {}>;
-/**
- * Component used to present users with three different levels of notifications:
- * standard, announcement, and warning.
- */
-export declare const Notification: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>, {}>;
-export default Notification;
+import React from "react";
+export type NotificationTypes = "standard" | "announcement" | "warning";
+interface BaseProps {
+    /** Optional prop to control text alignment in `NotificationContent` */
+    alignText?: boolean;
+    /** 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 horizontal alignment of the `Notification` content */
+    isCentered?: boolean;
+    /** Content to be rendered in a `NotificationHeading` component. */
+    notificationHeading?: string;
+    /** Optional prop to control the coloring of the `Notification` text and the
+     * visibility of an applicable icon. */
+    notificationType?: NotificationTypes;
+    /** Prop to display the `Notification` icon. Defaults to `true`. */
+    showIcon?: boolean;
+}
+type NotificationHeadingProps = Omit<BasePropsWithoutAlignText, "notificationHeading" | "showIcon">;
+type NotificationContentProps = Omit<BaseProps, "icon">;
+type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
+export interface NotificationProps extends BasePropsWithoutAlignText {
+    /** Label used to describe the `Notification`'s aside HTML element. */
+    ariaLabel?: string;
+    /** Additional `className` to add.  */
+    className?: string;
+    /** 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?: JSX.Element;
+    /** Optional prop to control the margin around the `Notification` component. */
+    noMargin?: boolean;
+    /** Content to be rendered in a `NotificationContent` component. */
+    notificationContent: string | JSX.Element;
+}
+/**
+ * NotificationHeading child-component.
+ */
+export declare const NotificationHeading: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<NotificationHeadingProps>) => JSX.Element, {}>;
+/**
+ * NotificationContent child-component.
+ */
+export declare const NotificationContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<NotificationContentProps>) => JSX.Element, {}>;
+/**
+ * Component used to present users with three different levels of notifications:
+ * standard, announcement, and warning.
+ */
+export declare const Notification: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Notification;

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

@@ -1,27 +1,27 @@
-import React from "react";
-export interface PaginationProps {
-    /** Additional className. */
-    className?: string;
-    /** The currentPage can be used to programatically force the selected page to change
-     * without the user explicitly requesting it – for example, if the user should be
-     * brought back to the first page of a set of results after a new search. */
-    currentPage?: 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 initially selected page (default value is 1). */
-    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.
- */
-export declare const Pagination: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>, {}>;
-export default Pagination;
+import React from "react";
+export interface PaginationProps {
+    /** Additional className. */
+    className?: string;
+    /** The currentPage can be used to programatically force the selected page to change
+     * without the user explicitly requesting it – for example, if the user should be
+     * brought back to the first page of a set of results after a new search. */
+    currentPage?: 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 initially selected page (default value is 1). */
+    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.
+ */
+export declare const Pagination: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Pagination;

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

@@ -1,30 +1,30 @@
-import React from "react";
-export declare type ProgressIndicatorSizes = "default" | "small";
-export declare type ProgressIndicatorTypes = "circular" | "linear";
-export interface ProgressIndicatorProps {
-    /** The darkMode prop is deprecated and should no longer be used. */
-    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.
- */
-export declare const ProgressIndicator: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>, {}>;
-export default ProgressIndicator;
+import React from "react";
+export type ProgressIndicatorSizes = "default" | "small";
+export type ProgressIndicatorTypes = "circular" | "linear";
+export interface ProgressIndicatorProps {
+    /** The darkMode prop is deprecated and should no longer be used. */
+    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.
+ */
+export declare const ProgressIndicator: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default ProgressIndicator;