@nypl/design-system-react-components 2.2.0-react-chakra-rc-2 → 3.0.0-react-chakra-rc2

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

@@ -1,6 +1,24 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
+interface LabelProps {
+    /** Additional CSS class name to render in the `label` element. */
+    className?: string;
+    /** The id of the html element that this `Label` is describing. */
+    htmlFor: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Controls whether the label should be inline with the input it goes with.
+     * This prop should only be used internally. */
+    isInlined?: boolean;
+    /** Controls whether the "(Required)" text should be displayed alongside the
+     * label's text. False by default. */
+    isRequired?: boolean;
+    /** Allows the '(Required)' text to be changed for language purposes
+     * Note: Parenthesis will be added automatically by the component */
+    requiredLabelText?: string;
+}
 /**
  * A label for form inputs. It should never be used alone.
  */
-export declare const Label: React.FC<any>;
+export declare const Label: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<LabelProps> & React.RefAttributes<HTMLDivElement & HTMLLabelElement>>, React.PropsWithChildren<LabelProps>>;
 export default Label;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const linkTypesArray: readonly ["action", "backwards", "button", "buttonPrimary", "buttonSecondary", "buttonPill", "buttonCallout", "buttonNoBrand", "buttonDisabled", "default", "external", "forwards", "standalone"];
 export type LinkTypes = typeof linkTypesArray[number];
@@ -30,5 +31,5 @@ export interface LinkProps {
  * A component that uses an `href` prop or a child anchor element, to create
  * an anchor element with added styling and conventions.
  */
-export declare const Link: React.FC<any>;
+export declare const Link: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<LinkProps> & React.RefAttributes<HTMLDivElement & HTMLAnchorElement>>, React.PropsWithChildren<LinkProps>>;
 export default Link;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const listTypesArray: readonly ["ol", "ul", "dl"];
 export type ListTypes = typeof listTypesArray[number];
@@ -21,9 +22,10 @@ export interface ListProps {
     listItems?: (string | JSX.Element | DescriptionProps)[];
     /** Remove list styling. */
     noStyling?: boolean;
-    /** An optional title that will appear over the list. This prop only applies
-     * to Description Lists. */
-    title?: string;
+    /** Optional string value used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in. This title only applies to
+     * to Description Lists and will render above the list. */
+    title?: string | JSX.Element;
     /** The type of list: "ol", "ul", or "dl". "ul" by default. */
     type: ListTypes;
 }
@@ -32,7 +34,7 @@ export interface ListProps {
  * and `dd` elements based on the `type` prop. Note that the `title` prop will
  * only display for the `Description` list type.
  */
-export declare const List: React.FC<any>;
+export declare const List: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<ListProps> & React.RefAttributes<HTMLDivElement & HTMLUListElement & HTMLOListElement>>, React.PropsWithChildren<ListProps>>;
 /**
  * Checks for `li` elements and consoles a warning if the
  * children are different HTML elements.

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

@@ -1,8 +1,9 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-import { logoNamesArray, logoSizeBasedOnArray, logoSizesArray } from "./logoVariables";
+import { DimensionTypes } from "../../helpers/types";
+import { logoNamesArray, logoSizesArray } from "./logoVariables";
 export type LogoNames = typeof logoNamesArray[number];
 export type LogoSizes = typeof logoSizesArray[number];
-export type LogoSizeBasedOn = typeof logoSizeBasedOnArray[number];
 export interface LogoProps {
     /** Optional className that will be added to the parent element */
     className?: string;
@@ -16,7 +17,7 @@ export interface LogoProps {
     /** Sets the logo size. */
     size?: LogoSizes;
     /** Sets the logo size based on the width or height. Width by default. */
-    sizeBasedOn?: LogoSizeBasedOn;
+    sizeBasedOn?: DimensionTypes;
     /** For accessibility purposes, the text passed in the `title` prop gets
      * rendered in a `title` element in the SVG. This descriptive text is not
      * visible but is needed for screenreaders to describe the graphic. */
@@ -26,5 +27,5 @@ export interface LogoProps {
  * The `Logo` component renders SVG-based logos and color variants that are
  * commonly used by the New York Public Library.
  */
-export declare const Logo: React.FC<any>;
+export declare const Logo: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<LogoProps> & React.RefAttributes<HTMLDivElement & SVGSVGElement>>, LogoProps>;
 export default Logo;

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

@@ -1,3 +1,2 @@
 export declare const logoNamesArray: readonly ["appleAppStoreBlack", "appleAppStoreWhite", "bplBlack", "bplWhite", "cleverBadgeColor", "cleverColor", "cleverWhite", "digitalCollectionsBlack", "digitalCollectionsWhite", "firstbookColor", "firstbookColorNegative", "googlePlayBlack", "lpaBlack", "lpaColor", "lpaWhite", "mlnBlack", "mlnColor", "mlnWhite", "nycdoeBlack", "nycdoeColor", "nycdoeWhite", "nycpsBlack", "nycpsColor", "nycpsWhite", "nyplFullBlack", "nyplFullWhite", "nyplLionBlack", "nyplLionWhite", "nyplTextBlack", "nyplTextWhite", "openebooksColor", "openebooksNegative", "openebooksWithTextColor", "openebooksWithTextNegative", "qplAltBlack", "qplAltWhite", "qplBlack", "qplColor", "qplWhite", "reservoirIconColor", "reservoirVerticalColor", "schomburgBlack", "schomburgCircleBlack", "schomburgCircleColor", "schomburgCircleWhite", "schomburgColor", "schomburgWhite", "simplyeBlack", "simplyeWhite", "simplyeColor", "snflBlack", "snflWhite", "treasuresColor", "treasuresColorNegative"];
 export declare const logoSizesArray: readonly ["default", "xxsmall", "xsmall", "small", "medium", "large"];
-export declare const logoSizeBasedOnArray: readonly ["height", "width"];

package/dist/src/components/Menu/Menu.d.ts

@@ -0,0 +1,58 @@
+import { ChakraComponent } from "@chakra-ui/react";
+import { IconNames } from "../Icons/Icon";
+import React from "react";
+import { SectionTypes } from "../../helpers/types";
+export interface MenuProps {
+    /** Optional CSS class name that will be added to the component's parent element. */
+    className?: string;
+    /** Optional ID string that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Optional string used to identify and highlight an item when the menu opens. The value should
+     * match the id associated with one of the items. */
+    selectedItem?: string;
+    /** Used to set the highlight color for the current item.  The values correspond with the NYPL section colors */
+    highlightColor?: SectionTypes;
+    /** Required string used to set the label text for the button element. If showLabel is false,
+     * this value is instead used to set an aria-label attribute on the button.  The labelText prop is
+     * required for accessibility compliance. */
+    labelText: string;
+    /** Optional string used to set the placement of the list element. */
+    listAlignment?: "left" | "right";
+    /** Required array of data objects used to populate the items rendered in the list.
+     * The order of the array elements will determine the order of the items in the list.*/
+    listItemsData: ListItemsData[];
+    /** Optional boolean value used to toggle the visibility of a border around the button element.*/
+    showBorder?: boolean;
+    /** Optional boolean value used to toggle the visibility of the label text for the button element.
+     * If false, this value will be used to set an aria-label attribute on the button element.  */
+    showLabel?: boolean;
+}
+/**Type for the icons/images displayed inline with menu items. */
+interface Media {
+    type: string;
+    name?: IconNames;
+    src?: string;
+    alt?: string;
+}
+/** The three types of menu items: */
+export interface ActionItem {
+    type: "action";
+    label: string;
+    id: string;
+    media?: Media | null;
+    onClick: (id: string) => void;
+}
+export interface GroupItem {
+    type: "group";
+    id: string;
+    label: string;
+    children: ListItemsData[];
+}
+export interface DividerItem {
+    type: "divider";
+    id: string;
+}
+/** Menu items can be one of the three types: */
+export type ListItemsData = ActionItem | GroupItem | DividerItem;
+export declare const Menu: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<MenuProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<MenuProps>>;
+export default Menu;

package/dist/src/components/Modal/Modal.d.ts

@@ -1,29 +1,38 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-interface BaseModalProps {
+export interface BaseModalProps {
+    /** The content to display in the modal body. */
     bodyContent?: string | JSX.Element;
+    /** The label for the close button. */
     closeButtonLabel?: string;
+    /** The text to display in the modal heading, can be a string or JSX Element. */
     headingText?: string | JSX.Element;
-    /** ID that other components can cross reference for accessibility purposes */
+    /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
+    /** Boolean to determine if the modal is open or closed. */
     isOpen?: boolean;
     onClose?: () => void;
 }
 export interface ModalProps {
+    /** The text to display on the button that opens the modal. */
     buttonText?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
+    /** Props to update the internal `Modal` component. This contains the
+     * `bodyContent`, `closeButtonLabel`, `headingText`, `isOpen`, and
+     * `onClose` props. */
     modalProps: BaseModalProps;
 }
+export declare const BaseModal: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<BaseModalProps> & React.RefAttributes<HTMLButtonElement>>, React.PropsWithChildren<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: React.FC<any>;
+export declare const ModalTrigger: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<ModalProps> & React.RefAttributes<HTMLButtonElement>>, React.PropsWithChildren<ModalProps>>;
 /**
  * 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(): any;
-export {};

package/dist/src/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import { ChakraComponent } from "@chakra-ui/react";
+export interface MultiSelectItem {
+    id: string;
+    name: string;
+    isDisabled?: boolean;
+    children?: MultiSelectItem[];
+}
+export declare const multiSelectWidthsArray: readonly ["fitContent", "full"];
+export type MultiSelectWidths = typeof multiSelectWidthsArray[number];
+export declare const multiSelectListOverflowArray: readonly ["scroll", "expand"];
+export type MultiSelectListOverflowTypes = typeof multiSelectListOverflowArray[number];
+export interface SelectedItems {
+    [name: string]: {
+        items: string[];
+    };
+}
+export interface MultiSelectProps {
+    /** The button text rendered within the MultiSelect. */
+    buttonText: string;
+    /** The number of items that will be visible in the list when the component first loads. */
+    defaultItemsVisible?: number;
+    /** The action to perform for clear/reset button of MultiSelect. */
+    onClear?: () => void;
+    /** The action to perform on the checkbox's onChange function. */
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** The action to perform for a mixed state checkbox (parent checkbox). */
+    onMixedStateChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** An ID string that other components can cross reference for accessibility purposes. */
+    id: string;
+    /** 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;
+    /** Set the default open or closed state of the Multiselect. */
+    isDefaultOpen?: boolean;
+    /** Boolean value used to enable the component's search functionality
+     * The default value is false. */
+    isSearchable?: boolean;
+    /** The items to be rendered in the Multiselect as checkbox options. */
+    items: MultiSelectItem[];
+    /** listOverflow is a property indicating how the list should handle overflow, with options limited to either "scroll" or "expand." */
+    listOverflow?: MultiSelectListOverflowTypes;
+    /** The selected items state (items that were checked by user). */
+    selectedItems: SelectedItems;
+    /** Value used to set the width for the MultiSelect component. */
+    width?: MultiSelectWidths;
+}
+/**
+  The MultiSelect component is a customizable form input that supports multiple configurations,
+  including search functionality, checkbox options, and hierarchical structure,
+  with a parent checkbox toggling all children and dynamic styling through Chakra UI.
+*/
+export declare const MultiSelect: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<MultiSelectProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<MultiSelectProps>>;
+export default MultiSelect;

package/dist/src/components/MultiSelect/MultiSelectItemsCountButton.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+export interface MultiSelectItemsCountButtonProps {
+    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). */
+    selectedItemsString: string;
+    selectedItemsCount: number;
+    /** The callback function for the menu toggle. */
+    onMenuToggle?: () => void;
+    /** The action to perform for clear/reset button of MultiSelect. */
+    onClear?: () => void;
+    onKeyDown?: () => void;
+    /** Ref to the Accordion Button element. */
+    accordianButtonRef: any;
+}
+/**
+ * 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 MultiSelectItemsCountButton: React.ForwardRefExoticComponent<MultiSelectItemsCountButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default MultiSelectItemsCountButton;

package/dist/src/components/NewsletterSignup/NewsletterSignup.d.ts

@@ -1,8 +1,49 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
+import { SectionTypes } from "../../helpers/types";
+interface NewsletterSignupProps {
+    /** Additional class name to add. */
+    className?: string;
+    /** Text displayed next to the confirmation icon after a successful email submission */
+    confirmationHeading: string;
+    /** Detail text for the confirmation view */
+    confirmationText: string;
+    /** Appears below the title to provide details about the newsletter. Accepts a string or an element. */
+    descriptionText?: string | JSX.Element;
+    /** Text displayed next to the error icon in case of an error in the email submission process*/
+    errorHeading?: string;
+    /** Appears below the title to provide details about next steps in case of an error. Accepts a string or an element. */
+    errorText?: string | JSX.Element;
+    /** Appears below the input field's example text to provide any additional instructions. Accepts a string or
+     *  an element. */
+    formHelperText?: string | JSX.Element;
+    /** ID that other components can cross-reference for accessibility purposes */
+    id?: string;
+    /** Toggles the invalid state for the email field. */
+    isInvalidEmail?: boolean;
+    /** Value to determine the section color highlight. The default is set to "blogs" as it uses the
+     * "ui.border.deafult" color.
+     */
+    newsletterSignupType?: SectionTypes;
+    /** A handler function that will be called when the form is submitted. */
+    onSubmit: (event: React.FormEvent<any>) => void;
+    /** A handler function that will be called when the text input changes. */
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Link to the relevant privacy policy page. */
+    privacyPolicyLink?: string;
+    /** Optional string value used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in.
+     */
+    title?: JSX.Element | string;
+    /** The value of the email text input field. */
+    valueEmail?: string;
+    /** Used to specify what is displayed in the component form/feedback area. */
+    view?: NewsletterSignupViewType;
+}
 export type NewsletterSignupViewType = "form" | "submitting" | "confirmation" | "error";
 /**
  * The NewsletterSignup component provides a way for patrons to register for an
  * email-based newsletter distribution list.
  */
-export declare const NewsletterSignup: React.FC<any>;
+export declare const NewsletterSignup: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<NewsletterSignupProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<NewsletterSignupProps>>;
 export default NewsletterSignup;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const notificationTypesArray: readonly ["standard", "announcement", "warning"];
 export type NotificationTypes = typeof notificationTypesArray[number];
@@ -10,14 +11,19 @@ interface BaseProps {
     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 content to be rendered in a `NotificationHeading` component. A
+     * string value is used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in.
+     */
+    notificationHeading?: string | JSX.Element;
     /** 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, "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. */
@@ -37,14 +43,14 @@ export interface NotificationProps extends BasePropsWithoutAlignText {
 /**
  * NotificationHeading child-component.
  */
-export declare const NotificationHeading: React.FC<any>;
+export declare const NotificationHeading: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<NotificationHeadingProps> & React.RefAttributes<HTMLDivElement>>, NotificationHeadingProps>;
 /**
  * NotificationContent child-component.
  */
-export declare const NotificationContent: React.FC<any>;
+export declare const NotificationContent: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<NotificationContentProps> & React.RefAttributes<HTMLDivElement>>, NotificationContentProps>;
 /**
  * Component used to present users with three different levels of notifications:
  * standard, announcement, and warning.
  */
-export declare const Notification: React.FC<any>;
+export declare const Notification: ChakraComponent<React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>, NotificationProps>;
 export default Notification;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export interface PaginationProps {
     /** Additional className. */
@@ -23,5 +24,5 @@ export interface PaginationProps {
 /**
  * A component that provides a navigational list of page items.
  */
-export declare const Pagination: React.FC<any>;
+export declare const Pagination: ChakraComponent<React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>, PaginationProps>;
 export default Pagination;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const progressIndicatorSizesArray: readonly ["default", "small"];
 export declare const progressIndicatorTypesArray: readonly ["circular", "linear"];
@@ -28,5 +29,5 @@ export interface ProgressIndicatorProps {
  * time to complete or consists of multiple steps. Examples include downloading,
  * uploading, or processing.
  */
-export declare const ProgressIndicator: React.FC<any>;
+export declare const ProgressIndicator: ChakraComponent<React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>, ProgressIndicatorProps>;
 export default ProgressIndicator;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export interface RadioProps {
@@ -39,5 +40,5 @@ export interface RadioProps {
     /** Populates the value of the input. */
     value?: string;
 }
-export declare const Radio: React.FC<any>;
+export declare const Radio: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<RadioProps> & React.RefAttributes<HTMLInputElement>>, React.PropsWithChildren<RadioProps>>;
 export default Radio;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { LayoutTypes } from "../../helpers/types";
@@ -45,5 +46,5 @@ export interface RadioGroupProps {
  * for this form group element and is not needed for individual DS `Radio`
  * components when `RadioGroup` is used.
  */
-export declare const RadioGroup: React.FC<any>;
+export declare const RadioGroup: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<RadioGroupProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<RadioGroupProps>>;
 export default RadioGroup;

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

@@ -19,8 +19,10 @@ export interface SearchBarProps {
     className?: string;
     /** Optional string for the SearchBar's description above the component. */
     descriptionText?: string;
-    /** Optional string for the SearchBar's heading text above the component. */
-    headingText?: string;
+    /** Optional string value used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in.
+     */
+    headingText?: string | JSX.Element;
     /** The text to display below the form in a `HelperErrorText` component. */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */

package/dist/src/components/Select/Select.d.ts

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export declare const selectTypesArray: string[];
@@ -53,5 +54,5 @@ export interface SelectProps {
  * Component that renders Chakra's `Select` component along with an accessible
  * `Label` and optional `HelperErrorText` component.
  */
-export declare const Select: React.FC<any>;
+export declare const Select: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<SelectProps> & React.RefAttributes<HTMLSelectElement>>, React.PropsWithChildren<SelectProps>>;
 export default Select;

package/dist/src/components/SkeletonLoader/SkeletonLoader.d.ts

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { LayoutTypes } from "../../helpers/types";
 export declare const skeletonLoaderImageRatiosArray: readonly ["landscape", "portrait", "square"];
@@ -36,5 +37,5 @@ export interface SkeletonLoaderProps {
  * The `SkeletonLoader` component renders a placeholder to be used while
  * dynamic content is loading.
  */
-export declare const SkeletonLoader: React.FC<any>;
+export declare const SkeletonLoader: ChakraComponent<React.ForwardRefExoticComponent<SkeletonLoaderProps & React.RefAttributes<HTMLDivElement>>, SkeletonLoaderProps>;
 export default SkeletonLoader;

package/dist/src/components/SkipNavigation/SkipNavigation.d.ts

@@ -1,9 +1,18 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
+interface SkipNavigationProps {
+    /** Additional CSS class name to render in the `nav` element. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** The anchor target for the main skip link. The default is "#mainContent". */
+    target?: string;
+}
 /**
  * SkipNavigation is a component that is used to provide a navigational list of
  * links. The first link is used to skip to the main content of the page using
  * the `#mainContent` id, and the second link points to accessibility information
  * on NYPL.org. These links are visually hidden but can be read by screenreaders.
  */
-export declare const SkipNavigation: React.FC<any>;
+export declare const SkipNavigation: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<SkipNavigationProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<SkipNavigationProps>>;
 export default SkipNavigation;

package/dist/src/components/Slider/Slider.d.ts

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export interface SliderProps {
@@ -59,5 +60,5 @@ export interface SliderProps {
  * with a min and max value. The value(s) can be updated through the slider
  * thumb(s) or through the text input(s) elements.
  */
-export declare const Slider: React.FC<any>;
+export declare const Slider: ChakraComponent<React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>, SliderProps>;
 export default Slider;

package/dist/src/components/SocialMediaLinks/SocialMediaLinks.d.ts

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import { LayoutTypes } from "../../helpers/types";
 import React from "react";
 export declare const borderTypeArray: readonly ["none", "circular", "straight"];
@@ -38,5 +39,5 @@ export interface SocialMediaLinksProps {
 /**
  * The SocialMediaLinks component renders a list of links for accessing social media sites.
  */
-export declare const SocialMediaLinks: React.FC<any>;
+export declare const SocialMediaLinks: ChakraComponent<React.ForwardRefExoticComponent<SocialMediaLinksProps & React.RefAttributes<HTMLDivElement & HTMLUListElement & HTMLOListElement>>, SocialMediaLinksProps>;
 export default SocialMediaLinks;

package/dist/src/components/StatusBadge/StatusBadge.d.ts

@@ -1,17 +1,26 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export declare const statusBadgeTypeArray: readonly ["low", "medium", "high"];
+export declare const statusBadgeLevelArray: readonly ["low", "medium", "high"];
+export type StatusBadgeLevels = typeof statusBadgeLevelArray[number];
+export declare const statusBadgeTypeArray: readonly ["informative", "negative", "neutral", "positive", "recommendation", "warning", "low", "medium", "high"];
 export type StatusBadgeTypes = typeof statusBadgeTypeArray[number];
 export interface StatusBadgeProps {
     /** Additional class for the component */
     className?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Level of the status badge. Defaults to `"low"`. */
-    level?: StatusBadgeTypes;
+    /** Level of the status badge. This prop has been deprecated in favor of the
+     * `type` prop. */
+    level?: StatusBadgeLevels;
+    /** Semantic type of the status badge. */
+    type?: StatusBadgeTypes;
 }
 /**
- * The `StatusBadge` component is used to display a visual badge for three
- * different status levels.
+ * The `StatusBadge` component is a label that indicates status or importance.
+ * It is used for bringing awareness to a specific element or feature and should
+ * provide quick recognition.
  */
-export declare const StatusBadge: React.FC<any>;
+export declare const StatusBadge: ChakraComponent<React.ForwardRefExoticComponent<StatusBadgeProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, StatusBadgeProps>;
 export default StatusBadge;

package/dist/src/components/StructuredContent/StructuredContent.d.ts

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { ComponentImageProps } from "../Image/Image";
 export type StructuredContentImagePosition = "left" | "right" | "center";
@@ -8,11 +9,13 @@ interface StructuredContentImageProps extends ComponentImageProps {
 }
 export interface StructuredContentProps {
     /** Optional value to set the text for the callout heading text. */
-    calloutText?: string;
+    calloutText?: string | JSX.Element;
     /** Additional class name for the `StructuredContent` component. */
     className?: string;
-    /** Optional value to set the text for the main heading text. */
-    headingText?: string;
+    /** Optional string value used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in.
+     */
+    headingText?: string | JSX.Element;
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
     /** Object used to create and render the `Image` component. */
@@ -24,5 +27,5 @@ export interface StructuredContentProps {
  * The `StructuredContent` component that displays a heading, callout content,
  * an image, and body content. All are optional except for body content.
  */
-export declare const StructuredContent: React.FC<any>;
+declare const StructuredContent: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<StructuredContentProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<StructuredContentProps>>;
 export default StructuredContent;

package/dist/src/components/StyleGuide/ColorCard.d.ts

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from "react";
+import { IconColors } from "../Icons/Icon";
 export declare const colorContrastData: {
     brand: {
         primary: {
@@ -333,7 +334,7 @@ export interface DataTableProps {
      * with the current color. */
     dataWhiteColor: string[];
     /** The color to use for text in the color card. */
-    textColor: string;
+    textColor: IconColors;
 }
 export interface ColorCardProps extends DataTableProps {
     /** The backgroundColor of the color card. */

package/dist/src/components/StyledList/StyledList.d.ts

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const textSizesArray: readonly ["default", "body1", "body2", "caption", "tag", "mini"];
 export type TextSizes = typeof textSizesArray[number];
@@ -22,5 +23,5 @@ export interface StyledListProps {
  * adhere to traditional numbered and bulleted list styles. Unlike
  * the `List` component, `StyledList` only renders an unordered list.
  */
-export declare const StyledList: React.FC<any>;
+export declare const StyledList: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<StyledListProps> & React.RefAttributes<HTMLDivElement & HTMLUListElement>>, React.PropsWithChildren<StyledListProps>>;
 export default StyledList;

package/dist/src/components/Table/Table.d.ts

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export interface TableProps {
     /** Additional class name for the `Table` component. */
@@ -26,5 +27,5 @@ export interface TableProps {
  * Basic `Table` component used to organize and display tabular data in
  * rows and columns.
  */
-export declare const Table: React.FC<any>;
+export declare const Table: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<TableProps> & React.RefAttributes<HTMLTableElement>>, React.PropsWithChildren<TableProps>>;
 export default Table;