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

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/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;

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

@@ -1,4 +1,4 @@
-import { Tab, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
+import { Tab, TabList, TabPanels, TabPanel, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export interface TabsDataProps {
     label: string;
@@ -21,6 +21,6 @@ export interface TabsProps {
  * Renders Chakra's `Tab` component with specific variants, props,
  * and controlled styling.
  */
-export declare const Tabs: React.FC<any>;
+export declare const Tabs: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<TabsProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<TabsProps>>;
 export { TabList, Tab, TabPanels, TabPanel };
 export default Tabs;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { TagSetExploreProps } from "./TagSetExplore";
 import { TagSetFilterProps } from "./TagSetFilter";
@@ -20,5 +21,5 @@ export declare function isFilterType(type: TagSetProps["type"]): type is "filter
  * The full label text will be automatically revealed when the tag is hovered
  * with a DS `Tooltip` component.
  */
-export declare const TagSet: React.FC<any>;
+export declare const TagSet: ChakraComponent<React.ForwardRefExoticComponent<TagSetProps & React.RefAttributes<HTMLDivElement>>, TagSetProps>;
 export default TagSet;

package/dist/src/components/TagSet/TagSetExplore.d.ts

@@ -24,5 +24,5 @@ export interface TagSetExploreProps {
  * The `label` property in the `tagSetData` prop should be set to a link-type
  * JSX component for linking to specific content.
  */
-export declare const TagSetExplore: React.FC<any>;
+export declare const TagSetExplore: React.FC<TagSetExploreProps>;
 export default TagSetExplore;

package/dist/src/components/TagSet/TagSetFilter.d.ts

@@ -22,5 +22,5 @@ export interface TagSetFilterProps {
  * The "filter" `TagSet` variant will display tags that can be removed when
  * `isDismissible` is true and they are clicked.
  */
-export declare const TagSetFilter: React.FC<any>;
+export declare const TagSetFilter: React.FC<TagSetFilterProps>;
 export default TagSetFilter;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export interface TemplateProps {
 }
@@ -47,7 +48,7 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
  * The main top-level parent component that wraps all template-related
  * components.
  */
-declare const Template: React.FC<any>;
+declare const Template: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<TemplateProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<TemplateProps>>;
 /**
  * This optional component renders its children from edge-to-edge and should
  * be used for alerts or notifications that are typically site-wide. This must
@@ -131,6 +132,6 @@ declare const TemplateFooter: React.FC<any>;
  * be rendered. For example, if you want to render content in the
  * `TemplateContentPrimary` section, then pass it as a prop to `contentPrimary`.
  */
-export declare const TemplateAppContainer: React.FC<any>;
+export declare const TemplateAppContainer: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<TemplateAppContainerProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<TemplateAppContainerProps>>;
 export { Template, TemplateAboveHeader, TemplateBreakout, TemplateContent, TemplateContentBottom, TemplateContentPrimary, TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, };
 export default TemplateAppContainer;

package/dist/src/components/Text/Text.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", "overline1", "overline2", "subtitle1", "subtitle2"];
 export type TextSizes = typeof textSizesArray[number];
@@ -21,5 +22,5 @@ export interface TextProps {
     /** Optional prop to control the text styling */
     size?: TextSizes;
 }
-export declare const Text: React.FC<any>;
+export declare const Text: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<TextProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<TextProps>>;
 export default Text;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export declare const autoCompleteValuesArray: readonly ["on", "off", "additional-name", "address-level1", "address-level2", "address-level3", "address-level4", "address-line1", "address-line2", "address-line3", "bday-day", "bday-month", "bday-year", "bday", "cc-additional-name", "cc-csc", "cc-exp-month", "cc-exp-year", "cc-exp", "cc-family-name", "cc-given-name", "cc-name", "cc-number", "cc-type", "country-name", "country", "current-password", "email", "family-name", "given-name", "honorific-prefix", "honorific-suffix", "impp", "language", "name", "new-password", "nickname", "organization-title", "organization", "photo", "postal-code", "sex", "street-address", "tel-area-code", "tel-country-code", "tel-extension", "tel-local-prefix", "tel-local-suffix", "tel-local", "tel-national", "tel", "transaction-amount", "transaction-currency", "url", "username"];
@@ -94,5 +95,5 @@ export type TextInputRefType = HTMLInputElement & HTMLTextAreaElement;
  * element. All types will render an accessible `Label` component and an
  * optional `HelperErrorText` component.
  */
-export declare const TextInput: React.FC<any>;
+export declare const TextInput: ChakraComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInputRefType>>, InputProps>;
 export default TextInput;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export declare const toggleSizesArray: readonly ["default", "small"];
@@ -39,5 +40,5 @@ export declare const onChangeDefault: () => void;
 /**
  * Component that renders Chakra's `Switch` component along with NYPL defaults.
  */
-export declare const Toggle: React.FC<any>;
+export declare const Toggle: ChakraComponent<React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>, ToggleProps>;
 export default Toggle;