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

package/dist/src/components/Logo/LogoSvgs.d.ts

@@ -0,0 +1,157 @@
+/// <reference types="react" />
+declare const _default: {
+    appleAppStoreBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    appleAppStoreWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    bplBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    bplWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    cleverBadgeColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    cleverColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    cleverWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    digitalCollectionsBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    digitalCollectionsWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    firstbookColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    firstbookColorNegative: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    googlePlayBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    lpaBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    lpaColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    lpaWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    mlnBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    mlnColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    mlnWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nycdoeBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nycdoeColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nycdoeWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nyplFullBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nyplFullWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nyplLionBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nyplLionWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nyplTextBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nyplTextWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    openebooksColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    openebooksNegative: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    openebooksWithTextColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    openebooksWithTextNegative: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    qplAltBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    qplAltWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    qplBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    qplColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    qplWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    reservoirIconColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    reservoirVerticalColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    schomburgBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    schomburgCircleBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    schomburgCircleColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    schomburgCircleWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    schomburgColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    schomburgWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    simplyeBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    simplyeWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    simplyeColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    snflBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    snflWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    treasuresColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    treasuresColorNegative: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+};
+export default _default;

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>) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
+};
+export {};

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

@@ -1,78 +1,61 @@
-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 declare const multiSelectWidthsArray: readonly ["default", "fitContent", "full"];
+export type MultiSelectWidths = typeof multiSelectWidthsArray[number];
+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,28 @@
-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;
+    /** The id of the MultiSelectGroup. */
+    id: string;
+    /** The label text rendered within the MultiSelectGroup. */
+    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,52 @@
-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 declare const notificationTypesArray: readonly ["standard", "announcement", "warning"];
+export type NotificationTypes = typeof notificationTypesArray[number];
+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>) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
+/**
+ * NotificationContent child-component.
+ */
+export declare const NotificationContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<NotificationContentProps>) => import("@emotion/react/jsx-runtime").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;