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

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

@@ -1,13 +1,20 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export type AccordionTypes = "default" | "warning" | "error";
 export interface AccordionDataProps {
     accordionType?: AccordionTypes;
-    label: string;
+    ariaLabel?: string;
+    /** Ref to the DOM element of the AccordionButton. */
+    buttonInteractionRef?: any;
+    label: string | JSX.Element;
     panel: string | React.ReactNode;
 }
 export interface AccordionProps {
     /** Array of data to display, and an optional accordionType */
     accordionData: AccordionDataProps[];
+    /** Global aria-label value that is applied to all accordions if individual
+     * ariaLabel props are not included with accordionData entries. */
+    ariaLabel?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** Whether the accordion is open by default only on its initial rendering */
@@ -25,5 +32,5 @@ export interface AccordionProps {
  * Accordion component that shows content on toggle. Can be used to display
  * multiple accordion items together.
  */
-export declare const Accordion: React.FC<any>;
+export declare const Accordion: ChakraComponent<React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>, AccordionProps>;
 export default Accordion;

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { ChakraComponent } from "@chakra-ui/react";
 export interface AlphabetFilterProps {
     /** Array of letters to specify which `Button` components should be set in an `enabled`
      * state. By default, all buttons are `enabled`. */
@@ -10,8 +11,10 @@ export interface AlphabetFilterProps {
     currentLetter?: string;
     /** Value used to set the text for a `Text` component that will be displayed above the letter buttons. */
     descriptionText?: string | JSX.Element;
-    /** Value used to set the text for a `Heading` component. */
-    headingText?: string;
+    /** 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;
     /** Adds the `disabled` prop to the AlphabetFilter when true. */
@@ -19,5 +22,5 @@ export interface AlphabetFilterProps {
     /** The callback function called when a letter button or the Show All button is clicked. */
     onClick: (filterValue: string) => void;
 }
-export declare const AlphabetFilter: React.FC<any>;
+export declare const AlphabetFilter: ChakraComponent<React.ForwardRefExoticComponent<AlphabetFilterProps & React.RefAttributes<HTMLDivElement>>, AlphabetFilterProps>;
 export default AlphabetFilter;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 declare const thirdPartyServices: readonly ["libsyn", "soundcloud", "spotify"];
 export type ThirdPartyAudioType = typeof thirdPartyServices[number];
@@ -18,8 +19,10 @@ export interface AudioPlayerProps {
      * or to another domain altogether.
      * TODO: This prop won't be used until a future version.
      */
-    /** Optional string to set the text for a `Heading` component. */
-    headingText?: string;
+    /** Optional string value used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in.
+     */
+    headingText?: string | JSX.Element;
     /** Optional string to set the text for a `HelperErrorText` component. */
     helperText?: string;
     /** ID that other components can cross reference for accessibility purposes. */
@@ -32,7 +35,7 @@ export interface AudioPlayerProps {
 /**
  * Renders an audio player from 3rd party services such as Libsyn, SoundCloud, and Spotify.
  */
-export declare const AudioPlayer: React.FC<any>;
+export declare const AudioPlayer: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<AudioPlayerProps> & React.RefAttributes<HTMLDivElement>>, AudioPlayerProps>;
 /**
  * Parse the embedCode string to a DOM object for proper formatted HTML element.
  * We are only interested in the iframe element.

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const breadcrumbTypeArray: readonly ["blogs", "booksAndMore", "brand", "connect", "education", "locations", "research", "whatsOn"];
 export type BreadcrumbsTypes = typeof breadcrumbTypeArray[number];
@@ -20,5 +21,5 @@ export interface BreadcrumbProps {
  * breadcrumb path that reflects the site structure and allows a user to
  * navigate to any page available in the breadcrumb hierarchy.
  */
-export declare const Breadcrumbs: React.FC<any>;
+export declare const Breadcrumbs: ChakraComponent<React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLDivElement>>, BreadcrumbProps>;
 export default Breadcrumbs;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const buttonElementTypeArray: readonly ["submit", "button", "reset"];
 export declare const buttonSizesArray: readonly ["small", "medium", "large"];
@@ -5,8 +6,29 @@ export declare const buttonTypesArray: readonly ["primary", "secondary", "text",
 export type ButtonElementType = typeof buttonElementTypeArray[number];
 export type ButtonSizes = typeof buttonSizesArray[number];
 export type ButtonTypes = typeof buttonTypesArray[number];
+interface ButtonProps {
+    /** The button variation to render based on the `ButtonTypes` type.*/
+    buttonType?: ButtonTypes;
+    /** Additional className to use. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id: string;
+    /** Adds 'disabled' property to the button. */
+    isDisabled?: boolean;
+    /** Trigger the Button's action through the `mouseDown` event handler instead
+     * of `onClick`. `false` by default. */
+    mouseDown?: boolean;
+    /** The action to perform on the `<button>`'s onClick function. */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** Visibly hidden text that will only be read by screenreaders. */
+    screenreaderOnlyText?: string;
+    /** The size of the `Button`. */
+    size?: ButtonSizes;
+    /** The HTML button type attribute. */
+    type?: ButtonElementType;
+}
 /**
  * Renders a simple `button` element with custom variant styles.
  */
-export declare const Button: React.FC<React.PropsWithChildren<any>>;
+export declare const Button: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<ButtonProps> & React.RefAttributes<HTMLButtonElement>>, React.PropsWithChildren<ButtonProps>>;
 export default Button;

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

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

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { LayoutTypes } from "../../helpers/types";
 import { ComponentImageProps } from "../Image/Image";
@@ -39,5 +40,5 @@ export interface CardProps extends CardBaseProps, CardWrapperProps {
 export declare const CardHeading: React.FC<any>;
 export declare const CardContent: React.FC<React.PropsWithChildren<any>>;
 export declare const CardActions: React.FC<React.PropsWithChildren<any>>;
-export declare const Card: React.FC<React.PropsWithChildren<any>>;
+export declare const Card: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<CardProps> & React.RefAttributes<HTMLDivElement>>, CardProps>;
 export default Card;

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

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

package/dist/src/components/CheckboxGroup/CheckboxGroup.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";
@@ -47,5 +48,5 @@ export interface CheckboxGroupProps {
  * wrapping and associated text elements, but the checkbox input elements
  * _need_ to be child `Checkbox` components from the NYPL Design System.
  */
-export declare const CheckboxGroup: React.FC<any>;
+export declare const CheckboxGroup: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<CheckboxGroupProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<CheckboxGroupProps>>;
 export default CheckboxGroup;

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

@@ -7,8 +7,10 @@ export interface ComponentWrapperProps {
     className?: string;
     /** Optional string to set the text for the component's description */
     descriptionText?: string | JSX.Element;
-    /** Optional string to set the text for a `Heading` 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;
     /** Optional string to set the text for a `HelperErrorText` component */
     helperText?: HelperErrorTextType;
     /** Styles that target the helper text. */

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { TextInputRefType } from "../TextInput/TextInput";
@@ -6,9 +7,9 @@ export type DatePickerTypes = typeof datePickerTypesArray[number];
 export interface FullDateType {
     /** Date object that gets returned for the onChange
      * function only for date ranges. */
-    endDate?: Date;
+    endDate?: Date | null;
     /** Date object that gets returned for the onChange function. */
-    startDate: Date;
+    startDate: Date | null;
 }
 interface DateRangeRowProps {
     /** ID that other components can cross reference for accessibility purposes. */
@@ -41,10 +42,13 @@ export interface DatePickerProps extends DatePickerWrapperProps {
     helperTextFrom?: string;
     /** Populates the `HelperErrorText` component in the "To" `TextInput` component. */
     helperTextTo?: string;
-    /** The initial date value. This must be in the mm/dd/yyyy format. */
+    /** The initial date value. If no initialDate is passed, the input will render with
+     * today's date. If an empty string is passed, the input will render with no initial
+     * value. If a date is passed, it must be in the mm/dd/yyyy format. */
     initialDate?: string;
-    /** The initialTo date value used for date ranges.
-     * This must be in the mm/dd/yyyy format. */
+    /** The initialTo date value (used for date ranges). If no initialTo is passed, the input
+     * will render with today's date. If an empty string is passed, the input will render with
+     * no initial value.  If a date is passed, it must be in the mm/dd/yyyy format. */
     initialDateTo?: string;
     /** Populates the `HelperErrorText` error state for both "From"
      * and "To" input components. */
@@ -69,6 +73,10 @@ export interface DatePickerProps extends DatePickerWrapperProps {
      * This will return the data in an object with `startDate` and `endDate` keys.
      */
     onChange?: (data: FullDateType) => void;
+    /** Placeholder text for the input. */
+    placeholder?: string;
+    /** Placeholder text for the end date input (used in date ranges). */
+    placeholderTo?: string;
     /** An additional explicit React ref passed for a date range's "To"
      * input field. Note that the "From" input takes the initial "ref" value. */
     refTo?: React.Ref<TextInputRefType>;
@@ -78,5 +86,5 @@ export interface DatePickerProps extends DatePickerWrapperProps {
 /**
  * Returns a single date input field or two date input fields for a date range.
  */
-export declare const DatePicker: React.FC<any>;
+export declare const DatePicker: ChakraComponent<React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<TextInputRefType>>, DatePickerProps>;
 export default DatePicker;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { ImageProps } from "../Image/Image";
 export declare const featuredContentWidthArray: string[];
@@ -23,5 +24,5 @@ export interface FeaturedContentProps {
     /** Data object that contains the props related to the image element: alt, position, src, width.  */
     imageProps: FeaturedContentImageProps;
 }
-export declare const FeaturedContent: React.FC<any>;
+export declare const FeaturedContent: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<FeaturedContentProps> & React.RefAttributes<HTMLDivElement>>, FeaturedContentProps>;
 export default FeaturedContent;

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

@@ -1,6 +1,52 @@
-import React from "react";
+/// <reference types="react" />
+import { ChakraComponent } from "@chakra-ui/react";
 export declare const feedbackBoxViewTypeArray: readonly ["form", "confirmation", "error"];
 export type FeedbackBoxViewType = typeof feedbackBoxViewTypeArray[number];
+interface FeedbackBoxProps {
+    /** Additional class name to add. */
+    className?: string;
+    /** Used to add additional information to the default confirmation message in
+     * the confirmation view. */
+    confirmationText?: string | JSX.Element;
+    /** Used to add description text above the form input fields in
+     * the initial/form view. */
+    descriptionText?: string | JSX.Element;
+    /** A data object containing key/value pairs that will be added to the form
+     * field submitted data. */
+    hiddenFields?: any;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Toggles the invalid state for the comment field. */
+    isInvalidComment?: boolean;
+    /** Toggles the invalid state for the email field. */
+    isInvalidEmail?: boolean;
+    /** Only used for internal purposes. */
+    isOpen?: boolean;
+    /** Used to add a notification above the description in the
+     * initial/form view.*/
+    notificationText?: string | JSX.Element;
+    /** Only used for internal purposes. */
+    onClose?: any;
+    /** Only used for internal purposes. */
+    onOpen?: any;
+    /** Callback function that will be invoked when the form is submitted.
+     * The returned data object contains key/value pairs including the
+     * values from the `hiddenFields` prop.
+     */
+    onSubmit: (values: {
+        [key: string]: string;
+    }) => any;
+    /** Toggles the category radio group field. */
+    showCategoryField?: boolean;
+    /** Toggles the email input field. When set to `true`, an additional
+     * confirmation message will be rendered. */
+    showEmailField?: boolean;
+    /** Used to populate the label on the open button and the `Drawer`'s
+     * header title. */
+    title: string;
+    /** Used to specify what screen should be displayed. */
+    view?: FeedbackBoxViewType;
+}
 /**
  * The `FeedbackBox` component renders a fixed-positioned button on the bottom
  * right corner of a page that opens a Chakra `Drawer` popup component. Inside
@@ -9,6 +55,6 @@ export type FeedbackBoxViewType = typeof feedbackBoxViewTypeArray[number];
  * submitted data; that feature is the responsibility of the consuming
  * application.
  */
-export declare const FeedbackBox: React.FC<any>;
+export declare const FeedbackBox: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<FeedbackBoxProps> & React.RefAttributes<HTMLDivElement>>, FeedbackBoxProps>;
 export declare function useFeedbackBox(): any;
 export default FeedbackBox;

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

@@ -1,7 +1,23 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
+interface FieldsetProps {
+    /** Additional class name to add. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id: string;
+    /** Flag to show or hide the text in the `legend` element. False by default. */
+    isLegendHidden?: boolean;
+    /** Flag to render "Required" in the `legend`. True by default. */
+    isRequired?: boolean;
+    /** Text to display in the `legend` element. */
+    legendText?: string;
+    /** Whether or not to display the "(Required)" text in the `legend` text.
+     * True by default. */
+    showRequiredLabel?: boolean;
+}
 /**
  * A wrapper component that renders a `fieldset` element along with a `legend`
  * element as its first child. Commonly used to wrap form components.
  */
-export declare const Fieldset: React.FC<React.PropsWithChildren<any>>;
+export declare const Fieldset: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<FieldsetProps> & React.RefAttributes<HTMLDivElement & HTMLFieldSetElement>>, React.PropsWithChildren<FieldsetProps>>;
 export default Fieldset;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { GridGaps } from "../Grid/SimpleGrid";
 interface FormBaseProps {
@@ -21,9 +22,9 @@ export interface FormProps extends FormBaseProps {
     onSubmit?: (e: React.FormEvent<any>) => void;
 }
 /** FormRow child-component */
-export declare const FormRow: React.FC<any>;
+export declare const FormRow: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<FormChildProps> & React.RefAttributes<HTMLDivElement>>, FormChildProps>;
 /** FormField child-component */
-export declare const FormField: React.FC<any>;
+export declare const FormField: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<FormChildProps> & React.RefAttributes<HTMLDivElement>>, FormChildProps>;
 /** Main Form component */
-export declare const Form: React.FC<any>;
+export declare const Form: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<FormProps> & React.RefAttributes<HTMLDivElement & HTMLFormElement>>, React.PropsWithChildren<FormProps>>;
 export default Form;

package/dist/src/components/Grid/SimpleGrid.d.ts

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const gridGapsArray: readonly ["grid.xxs", "grid.xs", "grid.s", "grid.m", "grid.l", "grid.xl", "grid.xxl"];
 export type GridGaps = typeof gridGapsArray[number];
@@ -14,5 +15,5 @@ export interface SimpleGridProps {
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
 }
-export declare const SimpleGrid: React.FC<any>;
+export declare const SimpleGrid: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<SimpleGridProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<SimpleGridProps>>;
 export default SimpleGrid;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const headingSizesArray: readonly ["display1", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "primary", "secondary", "tertiary", "callout"];
 export declare const headingLevelsArray: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "one", "two", "three", "four", "five", "six"];
@@ -36,5 +37,5 @@ export interface HeadingProps {
     /** Optional className for the URL when the `url` prop is passed */
     urlClass?: string;
 }
-export declare const Heading: React.FC<any>;
+export declare const Heading: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<HeadingProps> & React.RefAttributes<HTMLHeadingElement>>, React.PropsWithChildren<HeadingProps>>;
 export default Heading;

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

@@ -1,10 +1,35 @@
 /// <reference types="react" />
+import { ChakraComponent } from "@chakra-ui/react";
 export type AriaLiveValues = "assertive" | "off" | "polite" | undefined;
 export type HelperErrorTextType = string | JSX.Element;
+interface HelperErrorTextProps {
+    /** Aria attribute. When true, assistive technologies will read the entire
+     * DOM element. When false, only changes (additionals or removals) will be
+     * read. True by default. */
+    ariaAtomic?: boolean;
+    /** Aria attribute used to handle live updates for the helper and error text.
+     * This indicates the priority of the text and when it should be presented to
+     * users using screen readers; "off" indicates that the content should not be
+     * presented, "polite" that it will be announced at the next available time
+     * slot, and "assertive" that it should be announced immediately. This is set
+     * to "polite" by default. */
+    ariaLive?: AriaLiveValues;
+    /** Additional className to add. */
+    className?: string;
+    /** Unique ID for accessibility purposes. */
+    id?: string;
+    /** Toggles between helper and invalid styling. */
+    isInvalid?: boolean;
+    /** Offers the ability to render or not render the content passed in
+     * the `text` prop; `true` by default. */
+    isRenderedText?: boolean;
+    /** The text to display. */
+    text: HelperErrorTextType;
+}
 /**
  * Component that always renders a div even if the text content is not passed.
  * This pattern guarantees accessibility guidelines are met if the text content
  * is dynamically updated by the app or component that implements it.
  */
-export declare const HelperErrorText: React.FC<any>;
+export declare const HelperErrorText: ChakraComponent<React.ForwardRefExoticComponent<HelperErrorTextProps & React.RefAttributes<HTMLDivElement>>, HelperErrorTextProps>;
 export default HelperErrorText;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { ComponentImageProps } from "../Image/Image";
 export declare const heroTypesArray: readonly ["primary", "secondary", "secondaryBooksAndMore", "secondaryLocations", "secondaryResearch", "secondaryWhatsOn", "tertiary", "campaign", "fiftyFifty"];
@@ -36,6 +37,10 @@ export interface HeroProps {
      * can only be used in conjunction with `backgroundImageSrc` for the "campaign"
      * `Hero` type. Note: not all `Hero` variations utilize this prop. */
     imageProps?: HeroImageProps;
+    /** Optional boolean used to toggle the treatment of the background image in
+     * the "campaign" variant. If true, the background image will be converted to
+     * black & white and darkened to 60% black. */
+    isDarkBackgroundImage?: boolean;
     /** Optional details area that contains location data.
      * Note: not all `Hero` variations utilize this prop. */
     locationDetails?: JSX.Element;
@@ -43,5 +48,5 @@ export interface HeroProps {
      * underneath the heading element. */
     subHeaderText?: string | JSX.Element;
 }
-export declare const Hero: React.FC<any>;
+export declare const Hero: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<HeroProps> & React.RefAttributes<HTMLDivElement>>, HeroProps>;
 export default Hero;

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

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export interface HorizontalRuleProps {
     /** Optional alignment value to align the horizontal rule to one side or the
@@ -7,5 +8,5 @@ export interface HorizontalRuleProps {
     /** ClassName you can add in addition to `horizontal-rule` */
     className?: string;
 }
-export declare const HorizontalRule: React.FC<any>;
+export declare const HorizontalRule: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<HorizontalRuleProps> & React.RefAttributes<HTMLDivElement & HTMLHRElement>>, React.PropsWithChildren<HorizontalRuleProps>>;
 export default HorizontalRule;

package/dist/src/components/Icons/Icon.d.ts

@@ -1,3 +1,4 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { iconAlignArray, iconColorsArray, iconNamesArray, iconRotationsArray, iconSizesArray, iconTypesArray } from "./iconVariables";
 export type IconAlign = typeof iconAlignArray[number];
@@ -35,5 +36,5 @@ export interface IconProps {
 /**
  * Renders SVG-based icons.
  */
-export declare const Icon: React.FC<any>;
+export declare const Icon: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<IconProps> & React.RefAttributes<HTMLDivElement & SVGSVGElement>>, IconProps>;
 export default Icon;

package/dist/src/components/Icons/IconSvgs.d.ts

@@ -12,6 +12,9 @@ declare const _default: {
     actionCheckCircleFilled: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
+    actionDelete: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
     actionExit: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
@@ -21,6 +24,9 @@ declare const _default: {
     actionHelpOutline: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
+    actionHome: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
     actionIdentity: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
@@ -30,6 +36,12 @@ declare const _default: {
     actionLaunch: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
+    actionLockClosed: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    actionPayment: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
     actionPower: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
@@ -66,6 +78,15 @@ declare const _default: {
     close: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
+    communicationCall: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    communicationChatBubble: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    communicationEmail: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
     decorativeEnvelope: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
@@ -138,6 +159,9 @@ declare const _default: {
     moonCrescent: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
+    navigationMoreVert: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
     plus: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;

package/dist/src/components/Icons/iconVariables.d.ts

@@ -1,6 +1,6 @@
 export declare const iconAlignArray: readonly ["left", "right", "none"];
-export declare const iconColorsArray: readonly ["ui.black", "ui.white", "brand.primary", "brand.secondary", "ui.error.primary", "ui.error.secondary", "ui.status.primary", "ui.status.secondary", "ui.success.primary", "ui.success.secondary", "ui.warning.primary", "ui.warning.secondary", "section.blogs.primary", "section.blogs.secondary", "section.books-and-more.primary", "section.books-and-more.secondary", "section.education.primary", "section.education.secondary", "section.locations.primary", "section.locations.secondary", "section.research.primary", "section.research.secondary", "section.research-library.lpa", "section.research-library.schomburg", "section.research-library.schwartzman", "section.whats-on.primary", "section.whats-on.secondary", "dark.ui.error.primary", "dark.ui.error.secondary", "dark.ui.status.primary", "dark.ui.status.secondary", "dark.ui.success.primary", "dark.ui.success.secondary", "dark.ui.warning.primary", "dark.ui.warning.secondary"];
-export declare const iconNamesArray: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionIdentity", "actionIdentityFilled", "actionLaunch", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "mapsPlace", "minus", "moonCrescent", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialSpotify", "socialTikTok", "socialTumblr", "socialTwitter", "socialVimeo", "socialYoutube", "speakerNotes", "sunFull", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
+export declare const iconColorsArray: readonly ["transparent", "ui.black", "ui.white", "ui.disabled.primary", "ui.disabled.secondary", "ui.error.primary", "ui.error.secondary", "ui.focus", "ui.link.primary", "ui.link.primary-05", "ui.link.primary-10", "ui.link.secondary", "ui.link.tertiary", "ui.status.primary", "ui.status.secondary", "ui.success.primary", "ui.success.secondary", "ui.test", "ui.warning.primary", "ui.warning.secondary", "ui.bg.default", "ui.bg.hover", "ui.bg.active", "ui.border.default", "ui.border.hover", "ui.typography.heading", "ui.typography.body", "ui.typography.inverse.heading", "ui.typography.inverse.body", "ui.gray.xxxx-dark", "ui.gray.xxx-dark", "ui.gray.xx-dark", "ui.gray.x-dark", "ui.gray.dark", "ui.gray.semi-dark", "ui.gray.medium", "ui.gray.semi-medium", "ui.gray.light-cool", "ui.gray.x-light-cool", "ui.gray.xx-light-cool", "ui.gray.light-warm", "ui.gray.x-light-warm", "brand.primary", "brand.secondary", "section.blogs.primary", "section.blogs.secondary", "section.books-and-more.primary", "section.books-and-more.secondary", "section.connect.primary", "section.connect.secondary", "section.education.primary", "section.education.secondary", "section.locations.primary", "section.locations.secondary", "section.research.primary", "section.research.secondary", "section.research-library.lpa", "section.research-library.schomburg", "section.research-library.schwartzman", "section.whats-on.primary", "section.whats-on.secondary", "dark.brand.primary", "dark.brand.secondary", "dark.section.blogs.primary", "dark.section.blogs.secondary", "dark.section.books-and-more.primary", "dark.section.books-and-more.secondary", "dark.section.connect.primary", "dark.section.connect.secondary", "dark.section.education.primary", "dark.section.education.secondary", "dark.section.locations.primary", "dark.section.locations.secondary", "dark.section.research.primary", "dark.section.research.secondary", "dark.section.research-library.primary", "dark.section.research-library.secondary", "dark.section.whats-on.primary", "dark.section.whats-on.secondary", "dark.ui.disabled.primary", "dark.ui.disabled.secondary", "dark.ui.error.primary", "dark.ui.error.secondary", "dark.ui.focus", "dark.ui.link.primary", "dark.ui.link.primary-05", "dark.ui.link.primary-10", "dark.ui.link.secondary", "dark.ui.link.tertiary", "dark.ui.status.primary", "dark.ui.status.secondary", "dark.ui.success.primary", "dark.ui.success.secondary", "dark.ui.test", "dark.ui.warning.secondary", "dark.ui.warning.primary", "dark.ui.bg.page", "dark.ui.bg.default", "dark.ui.bg.hover", "dark.ui.bg.active", "dark.ui.border.default", "dark.ui.border.hover", "dark.ui.typography.heading", "dark.ui.typography.body", "dark.ui.typography.inverse.heading", "dark.ui.typography.inverse.body"];
+export declare const iconNamesArray: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionDelete", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionHome", "actionIdentity", "actionIdentityFilled", "actionLaunch", "actionLockClosed", "actionPayment", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "communicationCall", "communicationChatBubble", "communicationEmail", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "mapsPlace", "minus", "moonCrescent", "navigationMoreVert", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialSpotify", "socialTikTok", "socialTumblr", "socialTwitter", "socialVimeo", "socialYoutube", "speakerNotes", "sunFull", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
 export declare const iconRotationsArray: readonly ["rotate0", "rotate90", "rotate180", "rotate270"];
 export declare const iconSizesArray: readonly ["default", "xsmall", "small", "medium", "large", "xlarge", "xxlarge", "xxxlarge"];
 export declare const iconTypesArray: readonly ["default", "breadcrumbs"];

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

@@ -1,4 +1,6 @@
+import { ChakraComponent } from "@chakra-ui/react";
 import React, { ImgHTMLAttributes } from "react";
+import { DimensionTypes } from "../../helpers/types";
 export declare const imageRatiosArray: readonly ["fourByThree", "oneByTwo", "original", "sixteenByNine", "square", "threeByFour", "threeByTwo", "twoByOne"];
 export declare const imageSizesArray: readonly ["default", "xxxsmall", "xxsmall", "xsmall", "small", "medium", "large"];
 export declare const imageTypesArray: readonly ["default", "circle"];
@@ -36,9 +38,11 @@ interface ImageWrapperProps {
     className?: string;
     /** Optional value to control the aspect ratio of the card image; default
      * value is `"original"` */
-    aspectRatio?: ImageRatios;
+    ratio?: ImageRatios;
     /** Optional value to control the size of the image */
     size?: ImageSizes;
+    /** Sets the image size based on the width or height. Width by default. */
+    sizeBasedOn?: DimensionTypes;
 }
 export interface ImageProps extends ImageWrapperProps, ImgHTMLAttributes<HTMLImageElement> {
     /** Optionally pass in additional Chakra-based styles only for the figure. */
@@ -51,6 +55,9 @@ export interface ImageProps extends ImageWrapperProps, ImgHTMLAttributes<HTMLIma
     };
     /** Alternate text description of the image */
     alt?: string;
+    /** Optional value to control the aspect ratio of the card image; default
+     * value is `"original"` */
+    aspectRatio?: ImageRatios;
     /** Adding will wrap the image in a <figure> */
     caption?: string;
     /** Custom image component */
@@ -64,5 +71,5 @@ export interface ImageProps extends ImageWrapperProps, ImgHTMLAttributes<HTMLIma
     /** The src attribute is required, and contains the path to the image you want to embed. */
     src?: string;
 }
-export declare const Image: React.FC<any>;
+export declare const Image: ChakraComponent<React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLDivElement>>, ImageProps>;
 export default Image;