@nypl/design-system-react-components 3.6.3 → 4.0.0-alpha-rc2

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

@@ -1,20 +1,18 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export type AccordionTypes = "default" | "warning" | "error";
+export declare const accordionVariantsArray: readonly ["default", "warning", "error"];
+export type AccordionVariants = typeof accordionVariantsArray[number];
 export interface AccordionDataProps {
-    accordionType?: AccordionTypes;
+    variant?: AccordionVariants;
     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 */
+export interface AccordionProps extends Omit<BoxProps, "onChange"> {
+    /** Array of data to display, and an optional variant */
     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 */

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

@@ -1,11 +1,9 @@
 import React from "react";
-import { ChakraComponent } from "@chakra-ui/react";
-export interface AlphabetFilterProps {
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
+export interface AlphabetFilterProps extends Omit<BoxProps, "onClick"> {
     /** Array of letters to specify which `Button` components should be set in an `enabled`
      * state. By default, all buttons are `enabled`. */
     activeLetters?: string[];
-    /** A class name for the AlphabetFilter parent div. */
-    className?: string;
     /** The currentLetter can be used to programatically set the selected letter without the
      * user explicitly requesting it. */
     currentLetter?: string;

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

@@ -1,13 +1,11 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 declare const thirdPartyServices: readonly ["libsyn", "soundcloud", "spotify"];
 export type ThirdPartyAudioType = typeof thirdPartyServices[number];
 export type AudioType = ThirdPartyAudioType | "file";
-export interface AudioPlayerProps {
+export interface AudioPlayerProps extends BoxProps {
     /** Required string used to specify the type of audio playback. */
     audioType: AudioType;
-    /** Optional className you can add in addition to `audio-player`. */
-    className?: string;
     /** Optional string to set the text for the audio player description. */
     descriptionText?: string;
     /** Optional string to set a code snippet provided by Libsyn, SoundCloud or Spotify; the

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

@@ -1,19 +1,13 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export declare const bannerTypesArray: readonly ["informative", "negative", "neutral", "positive", "recommendation", "warning"];
-export type BannerTypes = typeof bannerTypesArray[number];
-export declare const bannerBgColorsArray: readonly ["brand.primary-05", "section.blogs.primary-05", "section.books-and-more.primary-05", "section.connect.primary-05", "section.education.primary-05", "section.locations.primary-05", "section.research.primary-05", "section.research-library.lpa-05", "section.research-library.schomburg-05", "section.research-library.schwarzman-05", "section.whats-on.primary-05", "dark.brand.primary-05", "dark.section.blogs.primary-05", "dark.section.books-and-more.primary-05", "dark.section.connect.primary-05", "dark.section.education.primary-05", "dark.section.locations.primary-05", "dark.section.research.secondary-05", "dark.section.research-library.lpa-05", "dark.section.research-library.schomburg-05", "dark.section.research-library.schwarzman-05", "dark.section.whats-on.primary-05"];
-export type BannerBgColors = typeof bannerBgColorsArray[number];
-export declare const bannerHighlightColorsArray: readonly ["brand.primary", "section.blogs.primary", "section.books-and-more.primary", "section.connect.primary", "section.education.primary", "section.locations.primary", "section.research.primary", "section.research-library-lpa.primary", "section.research-library-schomburg.primary", "section.research-library-schwarzman.primary", "section.whats-on.primary", "dark.brand.primary", "dark.section.blogs.primary", "dark.section.books-and-more.primary", "dark.section.connect.primary", "dark.section.education.primary", "dark.section.locations.primary", "dark.section.research.secondary", "dark.section.research-library-lpa.primary", "dark.section.research-library-schomburg.primary", "dark.section.research-library-schwarzman.primary", "dark.section.whats-on.primary"];
-export type BannerHighlightColors = typeof bannerHighlightColorsArray[number];
-export interface BannerProps {
-    /** Label used to describe the `Banner`'s aside HTML element. */
-    ariaLabel?: string;
+import { messageVariantsArray, bgColorsArray, highlightColorsArray } from "../../theme/sharedTypes";
+export type BannerVariants = typeof messageVariantsArray[number];
+export type BannerBgColors = typeof bgColorsArray[number];
+export type BannerHighlightColors = typeof highlightColorsArray[number];
+export interface BannerProps extends Omit<BoxProps, "content"> {
     /** Used to set the color of the background for the full component.
      * Refer to how color values are defined and typed in the DS Icon component. */
     backgroundColor?: BannerBgColors;
-    /** Additional `className` to add. */
-    className?: string;
     /** Used to populate the body content of the component. */
     content: string | JSX.Element;
     /** Used to populate the heading element within the component.  A string
@@ -31,7 +25,7 @@ export interface BannerProps {
      * (closed) by a user. */
     isDismissible?: boolean;
     /** Used to control the component's semantic coloring and iconography. */
-    type?: BannerTypes;
+    variant?: BannerVariants;
 }
 /**
  * The `Banner` component is a non-modal semantic dialog used to communicate a

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

@@ -1,23 +1,21 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export declare const breadcrumbTypeArray: readonly ["blogs", "booksAndMore", "brand", "connect", "digitalCollections", "education", "locations", "research", "whatsOn"];
-export type BreadcrumbsTypes = typeof breadcrumbTypeArray[number];
+export declare const breadcrumbVariantsArray: readonly ["blogs", "booksAndMore", "brand", "connect", "digitalCollections", "education", "locations", "research", "whatsOn"];
+export type BreadcrumbsVariants = typeof breadcrumbVariantsArray[number];
 export interface BreadcrumbsDataProps {
     url: string;
     text: string | React.ReactNode;
     linkProps?: any;
 }
-export interface BreadcrumbProps {
+export interface BreadcrumbProps extends BoxProps {
     /** Breadcrumb links as an array */
     breadcrumbsData: BreadcrumbsDataProps[];
-    /** Used to control how the `Hero` component will be rendered. */
-    breadcrumbsType?: BreadcrumbsTypes;
-    /** className you can add in addition to 'input' */
-    className?: string;
+    /** Used to control how the `Breadcrumbs` component will be rendered. */
+    variant?: BreadcrumbsVariants;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** Custom Link component for apps with internal routing, defaults to BreadcrumbLink if not passed */
-    customLinkComponent?: any;
+    customLinkComponent?: React.ElementType;
 }
 /**
  * The `Breadcrumbs` component is a navigation element that provides a

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

@@ -1,16 +1,15 @@
-import { ChakraComponent } from "@chakra-ui/react";
-import React from "react";
+import { BoxProps, ChakraComponent, ChakraProps } from "@chakra-ui/react";
+import { sizesArray } from "../../theme/sharedTypes";
+import React, { ButtonHTMLAttributes } from "react";
 export declare const buttonElementTypeArray: readonly ["submit", "button", "reset"];
 export declare const buttonSizesArray: readonly ["small", "medium", "large"];
-export declare const buttonTypesArray: readonly ["primary", "secondary", "text", "callout", "pill", "noBrand", "link"];
+export declare const buttonVariantsArray: readonly ["primary", "secondary", "text", "callout", "pill", "noBrand"];
 export type ButtonElementType = typeof buttonElementTypeArray[number];
-export type ButtonSizes = typeof buttonSizesArray[number];
-export type ButtonTypes = typeof buttonTypesArray[number];
-export interface ButtonProps {
-    /** The button variation to render based on the `ButtonTypes` type. */
-    buttonType?: ButtonTypes;
-    /** Additional className to use. */
-    className?: string;
+export type ButtonVariants = typeof buttonVariantsArray[number];
+export type ButtonSizes = typeof sizesArray[number];
+export interface ButtonProps extends Pick<BoxProps, keyof ChakraProps>, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
+    /** The button variation to render based on the `ButtonVariants` type. */
+    variant?: ButtonVariants;
     /** ID that other components can cross reference for accessibility purposes. */
     id: string;
     /** Adds 'disabled' property to the button. */
@@ -18,14 +17,10 @@ export interface ButtonProps {
     /** 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.

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

@@ -1,13 +1,11 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, 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];
-export interface ButtonGroupProps {
+export interface ButtonGroupProps extends BoxProps {
     /** 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. */

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import { LayoutTypes } from "../../helpers/types";
 import { ComponentImageProps } from "../Image/Image";
 interface CardBaseProps {
@@ -9,9 +9,7 @@ interface CardBaseProps {
      * Default is `"column"`. */
     layout?: LayoutTypes;
 }
-interface CardWrapperProps {
-    /** Optional CSS class name to add. */
-    className?: string;
+interface CardWrapperProps extends BoxProps {
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
     /** Main link to use when the full `Card` component should be clickable. */

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

@@ -1,5 +1,5 @@
-import { ChakraComponent } from "@chakra-ui/react";
-import React from "react";
+import { BoxProps, ChakraComponent, ChakraProps } from "@chakra-ui/react";
+import React, { InputHTMLAttributes } from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 interface CheckboxIconProps {
     /** When using the Checkbox as a "controlled" form element, you can specify
@@ -10,9 +10,7 @@ interface CheckboxIconProps {
     /** Adds the indeterminate state to the `Checkbox`. */
     isIndeterminate?: boolean;
 }
-export interface CheckboxProps extends CheckboxIconProps {
-    /** className you can add in addition to 'input' */
-    className?: string;
+export interface CheckboxProps extends Pick<BoxProps, keyof ChakraProps>, CheckboxIconProps, Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "height" | "width"> {
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
@@ -31,11 +29,6 @@ export interface CheckboxProps extends CheckboxIconProps {
     /** The checkbox's label. This will serve as the text content for a `<label>`
      * element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
     labelText: string | JSX.Element;
-    /** The name prop indicates into which group of checkboxes this checkbox
-     * belongs. If none is specified, 'default' will be used */
-    name?: string;
-    /** The action to perform on the `<input>`'s onChange function  */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Offers the ability to hide the helper/invalid text. */
     showHelperInvalidText?: boolean;
     /** Offers the ability to show the checkbox's label onscreen or hide it.

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

@@ -1,10 +1,8 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { LayoutTypes } from "../../helpers/types";
-export interface CheckboxGroupProps {
-    /** Any child node passed to the component. */
-    children: React.ReactNode;
+export interface CheckboxGroupProps extends Omit<BoxProps, "onChange"> {
     /** Populates the initial value of the input */
     defaultValue?: string[];
     /** Optional string to populate the HelperErrorText for standard state */

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

@@ -1,10 +1,7 @@
+import { BoxProps } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export interface ComponentWrapperProps {
-    /** The UI elements that will be wrapped by this component */
-    children: React.ReactNode;
-    /** A class name for the `div` parent element. */
-    className?: string;
+export interface ComponentWrapperProps extends BoxProps {
     /** Optional string to set the text for the component's description */
     descriptionText?: string | JSX.Element;
     /** Optional string value used to set the text for a `Heading` component, or

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

@@ -1,4 +1,4 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { InputProps, TextInputRefType } from "../TextInput/TextInput";
@@ -17,9 +17,7 @@ interface DateRangeRowProps {
     /** Whether to render a single date input or two for a range of two dates. */
     isDateRange?: boolean;
 }
-interface DatePickerWrapperProps extends DateRangeRowProps {
-    /** Additional className. */
-    className?: string;
+interface DatePickerWrapperProps extends Omit<BoxProps, "id" | "onChange">, DateRangeRowProps {
     /** Adds the 'required' property to the input element(s). */
     isRequired?: boolean;
     /** Passed to the `TextInput` component to render a label associated with an input field. */

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

@@ -1,19 +1,17 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { ImageProps } from "../Image/Image";
 export declare const featuredContentWidthArray: string[];
 export type FeaturedContentWidthType = typeof featuredContentWidthArray[number];
 export declare const featuredContentPositionArray: readonly ["start", "end"];
 export type FeaturedContentPositionType = typeof featuredContentPositionArray[number];
-export interface FeaturedContentImageProps extends ImageProps {
+export interface FeaturedContentImageProps extends Omit<ImageProps, "position"> {
     /** String value that specifies the width of the image rendered within the component. */
     width?: FeaturedContentWidthType;
     /** String value that specifies the position of the image rendered within the component. */
     position?: FeaturedContentPositionType;
 }
-export interface FeaturedContentProps {
-    /** Optional CSS class name to add. */
-    className?: string;
+export interface FeaturedContentProps extends BoxProps {
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
     /** The text content rendered in the component.  DS components and native HTML can be passed in this prop. */

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

@@ -1,10 +1,8 @@
 /// <reference types="react" />
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 export declare const feedbackBoxViewTypeArray: readonly ["form", "confirmation", "error"];
 export type FeedbackBoxViewType = typeof feedbackBoxViewTypeArray[number];
-export interface FeedbackBoxProps {
-    /** Additional class name to add. */
-    className?: string;
+export interface FeedbackBoxProps extends Omit<BoxProps, "onSubmit"> {
     /** Used to add additional information to the default confirmation message in
      * the confirmation view. */
     confirmationText?: string | JSX.Element;

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

@@ -1,8 +1,6 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export interface FieldsetProps {
-    /** Additional class name to add. */
-    className?: string;
+export interface FieldsetProps extends BoxProps {
     /** 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. */

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

@@ -1,11 +1,9 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { LayoutTypes } from "../../helpers/types";
 import { MultiSelectWidths, SelectedItems as MultiSelectItems } from "../MultiSelect/MultiSelect";
 export type FilterBarItemsType = (boolean | number | number[] | string | string[] | MultiSelectItems)[];
-export interface FilterBarInlineProps {
-    /** The className of the FilterBarInline. */
-    className?: string;
+export interface FilterBarInlineProps extends BoxProps {
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
     /** Optional string value used to set the text for a `Heading` component, or

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

@@ -1,11 +1,9 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { LayoutTypes } from "../../helpers/types";
 import { MultiSelectWidths } from "../MultiSelect/MultiSelect";
 import { FilterBarItemsType } from "../FilterBarInline/FilterBarInline";
-export interface FilterBarPopupProps {
-    /** The className of the FilterBarInline. */
-    className?: string;
+export interface FilterBarPopupProps extends BoxProps {
     /** Optional string value used to set the text for a `Heading` component, or
      * a DS Heading component that can be passed in.
      */

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

@@ -1,9 +1,7 @@
-import { ChakraComponent } from "@chakra-ui/react";
-import React from "react";
+import { BoxProps, ChakraComponent, ChakraProps } from "@chakra-ui/react";
+import React, { FormHTMLAttributes } from "react";
 import { GridGaps } from "../Grid/SimpleGrid";
-interface FormBaseProps {
-    /** className to be applied to FormRow, FormField, and Form */
-    className?: string;
+interface FormBaseProps extends Pick<BoxProps, "className" | keyof ChakraProps> {
     /** Optional spacing size; if omitted, the default `large` (2rem / 32px)
      * spacing will be used; ```IMPORTANT: for general form layout, this prop
      * should not be used``` */
@@ -13,13 +11,7 @@ interface FormBaseProps {
 }
 export interface FormChildProps extends Partial<FormBaseProps> {
 }
-export interface FormProps extends FormBaseProps {
-    /** Optional form `action` attribute */
-    action?: string;
-    /** Optional form `method` attribute */
-    method?: "get" | "post";
-    /** Function to call for the `onSubmit` form event. */
-    onSubmit?: (e: React.FormEvent<any>) => void;
+export interface FormProps extends FormBaseProps, Omit<FormHTMLAttributes<HTMLFormElement>, "color" | "id"> {
 }
 /** FormRow child-component */
 export declare const FormRow: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<FormChildProps> & React.RefAttributes<HTMLDivElement>>, FormChildProps>;

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

@@ -1,10 +1,8 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, 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];
-export interface SimpleGridProps {
-    /** Additional class name. */
-    className?: string;
+export interface SimpleGridProps extends BoxProps {
     /** Optional numeric value to override the default column count; the default
      * column count is 3. */
     columns?: number;

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

@@ -1,12 +1,10 @@
-import { ChakraComponent, HeadingProps as ChakraHeadingProps } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export declare const headingSizesArray: readonly ["display1", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "heading7", "heading8", "primary", "secondary", "tertiary", "callout"];
-export declare const headingLevelsArray: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "one", "two", "three", "four", "five", "six"];
+export declare const headingSizesArray: readonly ["display1", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "heading7", "heading8"];
+export declare const headingLevelsArray: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 export type HeadingSizes = typeof headingSizesArray[number];
 export type HeadingLevels = typeof headingLevelsArray[number];
-export interface HeadingProps extends ChakraHeadingProps {
-    /** Optional className that appears in addition to `heading` */
-    className?: string;
+export interface HeadingProps extends BoxProps {
     /** Optional ID that other components can cross reference for accessibility
      * purposes */
     id?: string;

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

@@ -1,21 +1,7 @@
 /// <reference types="react" />
-import { ChakraComponent } from "@chakra-ui/react";
-export type AriaLiveValues = "assertive" | "off" | "polite" | undefined;
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 export type HelperErrorTextType = string | JSX.Element;
-export 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;
+export interface HelperErrorTextProps extends BoxProps {
     /** Unique ID for accessibility purposes. */
     id?: string;
     /** Toggles between helper and invalid styling. */

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

@@ -1,10 +1,9 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, 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"];
-export type HeroTypes = typeof heroTypesArray[number];
-export declare const heroSecondaryTypes: string[];
-export interface HeroImageProps extends Pick<ComponentImageProps, "alt" | "fallbackSrc" | "id" | "src" | "onError" | "component"> {
+export declare const heroVariantsArray: readonly ["primary", "tertiary", "campaign"];
+export type HeroVariants = typeof heroVariantsArray[number];
+export interface HeroImageProps extends Omit<BoxProps, "onError">, Pick<ComponentImageProps, "alt" | "fallbackSrc" | "id" | "src" | "onError" | "component"> {
 }
 export interface HeroProps {
     /**
@@ -14,28 +13,28 @@ export interface HeroProps {
      */
     backdropBackgroundColor?: string;
     /** Optional hex color value used to override the default background
-     * color for a given `Hero` variation.
-     * Note: not all `Hero` variations utilize this prop. */
+     * color for a given `Hero` variant.
+     * Note: not all `Hero` variants utilize this prop. */
     backgroundColor?: string;
     /** Optional path to an image that will be used as a background image for the
      * `Hero` component.
-     * Note: not all `Hero` variations utilize this prop. */
+     * Note: not all `Hero` variants utilize this prop. */
     backgroundImageSrc?: string;
     /** Optional hex color value used to override the default text color for a
      * given `Hero` variation.
-     * Note: not all `Hero` variations utilize this prop. */
+     * Note: not all `Hero` variants utilize this prop. */
     foregroundColor?: string;
     /** Optional heading element. */
     heading?: JSX.Element;
     /** Used to control how the `Hero` component will be rendered. */
-    heroType?: HeroTypes;
+    variant?: HeroVariants;
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
     /** Object used to create and render the `Image` component. You can pass `component`
-     * (with its own internal props, which will override) or `src`, `alt`, `id`, `fallBackSrc`, and `onError`.
-     * If `imageProps.alt` is left blank, a warning will be logged to the console and
-     * will cause accessibility issues. For `imageProps.src`, it will only work for
-     * the "secondary", "fiftyFifty" and "campaign" `Hero` types. */
+     * (with its own internal props, which will override) or `src`, `alt`, `id`,
+     * `fallBackSrc`, and `onError`. If `imageProps.alt` is left blank, a warning
+     * will be logged to the console and will cause accessibility issues. For
+     * `imageProps.src`, it will only work for the "campaign" `Hero` type. */
     imageProps?: HeroImageProps;
     /** Optional boolean used to toggle the default text color from light to dark.
      * Set isDarkText to `true` if the backgroundColor is set to a light color. */
@@ -44,9 +43,6 @@ export interface HeroProps {
      * 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;
     /** Optional string used for the subheader that displays
      * underneath the heading element. */
     subHeaderText?: string | JSX.Element;