@nypl/design-system-react-components 4.0.0-remove-matchMedia-test → 4.0.0

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

@@ -1,11 +1,11 @@
-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", "tertiary", "campaign"];
-export type HeroTypes = typeof heroTypesArray[number];
-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 {
+export interface HeroProps extends BoxProps {
     /**
      * Optional background color for the backdrop only in the `campaign` variant.
      * When both `backdropBackgroundColor` and `backgroundImageSrc` are passed,
@@ -13,23 +13,19 @@ 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;
-    /** 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
@@ -46,6 +42,8 @@ export interface HeroProps {
     /** Optional string used for the subheader that displays
      * underneath the heading element. */
     subHeaderText?: string | JSX.Element;
+    /** Used to control how the `Hero` component will be rendered. */
+    variant?: HeroVariants;
 }
 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,14 +1,10 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export interface HorizontalRuleProps {
+export interface HorizontalRuleProps extends BoxProps {
     /** Optional alignment value to align the horizontal rule to one side or the
      * other when the width is less than 100%. If omitted, the horizontal rule
      * will have a default center alignment. */
     align?: "left" | "right";
-    /** ClassName you can add in addition to `horizontal-rule` */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
 }
 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,17 +1,15 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-import { iconAlignArray, iconColorsArray, iconNamesArray, iconRotationsArray, iconSizesArray, iconTypesArray } from "./iconVariables";
+import { iconAlignArray, iconColorsArray, iconNamesArray, iconRotationsArray, iconSizesArray, iconVariantsArray } from "./iconVariables";
 export type IconAlign = typeof iconAlignArray[number];
 export type IconColors = typeof iconColorsArray[number];
 export type IconNames = typeof iconNamesArray[number];
 export type IconRotations = typeof iconRotationsArray[number];
 export type IconSizes = typeof iconSizesArray[number];
-export type IconTypes = typeof iconTypesArray[number];
-export interface IconProps {
+export type IconVariants = typeof iconVariantsArray[number];
+export interface IconProps extends Pick<BoxProps, "className" | "id" | keyof ChakraProps> {
     /** Aligns the icon. */
     align?: IconAlign;
-    /** Optional className that will be added to the parent element */
-    className?: string;
     /** Overrides default icon color (black). */
     color?: IconColors;
     /** Icons designated as decorative will be ignored by screenreaders. True
@@ -19,8 +17,6 @@ export interface IconProps {
     decorative?: boolean;
     /** Rotates the icon clockwise in increments of 90deg */
     iconRotation?: IconRotations;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
     /** The name of the icon you want to use. */
     name?: IconNames;
     /** Sets the icon size. */
@@ -30,7 +26,7 @@ export interface IconProps {
      * visible but is needed for screenreaders to describe the graphic. */
     title?: string;
     /** FOR INTERNAL DS USE ONLY: the icon variant to display. */
-    type?: IconTypes;
+    variant?: IconVariants;
 }
 /**
  * Renders SVG-based icons.

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

@@ -10,8 +10,10 @@ declare const _default: {
     actionHome: any;
     actionIdentity: any;
     actionIdentityFilled: any;
+    actionInfo: any;
     actionLaunch: any;
     actionLightbulb: any;
+    actionList: any;
     actionLockClosed: any;
     actionPayment: any;
     actionPower: any;
@@ -57,6 +59,7 @@ declare const _default: {
     minus: any;
     moonCrescent: any;
     navigationMoreVert: any;
+    navigationApps: any;
     navigationSubdirectoryArrowLeft: any;
     navigationSubdirectoryArrowRight: any;
     plus: any;

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 ["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.schwarzman", "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", "actionLightbulb", "actionLockClosed", "actionPayment", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "communicationCall", "communicationChatBubble", "communicationEmail", "contentFilterList", "decorativeBookBroken", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "editorMode", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "mapsPlace", "minus", "moonCrescent", "navigationMoreVert", "navigationSubdirectoryArrowLeft", "navigationSubdirectoryArrowRight", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialSpotify", "socialTikTok", "socialTumblr", "socialTwitter", "socialVimeo", "socialX", "socialYoutube", "speakerNotes", "sunFull", "utilityAccountFilled", "utilityAccountUnfilled", "utilityCheck", "utilityHamburger", "utilitySearch"];
+export declare const iconColorsArray: readonly ["currentColor", "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.schwarzman", "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", "actionInfo", "actionLaunch", "actionLightbulb", "actionList", "actionLockClosed", "actionPayment", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "communicationCall", "communicationChatBubble", "communicationEmail", "contentFilterList", "decorativeBookBroken", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "editorMode", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "mapsPlace", "minus", "moonCrescent", "navigationApps", "navigationMoreVert", "navigationSubdirectoryArrowLeft", "navigationSubdirectoryArrowRight", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialSpotify", "socialTikTok", "socialTumblr", "socialTwitter", "socialVimeo", "socialX", "socialYoutube", "speakerNotes", "sunFull", "utilityAccountFilled", "utilityAccountUnfilled", "utilityCheck", "utilityHamburger", "utilitySearch"];
 export declare const iconRotationsArray: readonly ["rotate0", "rotate90", "rotate180", "rotate270"];
 export declare const iconSizesArray: readonly ["default", "xsmall", "small", "medium", "large", "xlarge", "xxlarge", "xxxlarge", "xxxxlarge", "xxxxxlarge", "2xlarge", "3xlarge", "4xlarge", "5xlarge"];
-export declare const iconTypesArray: readonly ["default", "breadcrumbs"];
+export declare const iconVariantsArray: readonly ["default", "breadcrumbs"];

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

@@ -1,4 +1,4 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent, ChakraProps } from "@chakra-ui/react";
 import React, { ImgHTMLAttributes } from "react";
 import { DimensionTypes } from "../../helpers/types";
 export declare const imageRatiosArray: readonly ["fourByThree", "fourByOne", "twoByThree", "oneByTwo", "original", "sixteenByNine", "square", "threeByFour", "threeByTwo", "twoByOne"];
@@ -22,8 +22,6 @@ export interface ComponentImageProps extends Partial<HTMLImageElement> {
     credit?: string;
     /** Fallback image path or URL. */
     fallbackSrc?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Flag to set the internal `Image` component to `isLazy` mode. */
     isLazy?: boolean;
     /** Additional action to perform in the `img`'s `onerror` attribute function. */
@@ -40,10 +38,6 @@ interface ImageWrapperProps {
     additionalWrapperStyles?: {
         [key: string]: any;
     };
-    /** ClassName you can add in addition to 'image' */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Optional value to control the aspect ratio of the card image; default
      * value is `"original"` */
     ratio?: ImageRatios;
@@ -52,7 +46,7 @@ interface ImageWrapperProps {
     /** Sets the image size based on the width or height. Width by default. */
     sizeBasedOn?: DimensionTypes;
 }
-export interface ImageProps extends ImageWrapperProps, ImgHTMLAttributes<HTMLImageElement> {
+export interface ImageProps extends Pick<BoxProps, keyof ChakraProps>, ImageWrapperProps, Omit<ImgHTMLAttributes<HTMLImageElement>, "color" | "height" | "width"> {
     /** Optionally pass in additional Chakra-based styles only for the figure. */
     additionalFigureStyles?: {
         [key: string]: any;
@@ -61,8 +55,6 @@ export interface ImageProps extends ImageWrapperProps, ImgHTMLAttributes<HTMLIma
     additionalImageStyles?: {
         [key: string]: any;
     };
-    /** 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;
@@ -78,10 +70,6 @@ export interface ImageProps extends ImageWrapperProps, ImgHTMLAttributes<HTMLIma
     imageType?: ImageTypes;
     /** Flag to set the internal `Image` component to `isLazy` mode. */
     isLazy?: boolean;
-    /** Additional action to perform in the `img`'s `onerror` attribute function. */
-    onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
-    /** The src attribute is required, and contains the path to the image you want to embed. */
-    src?: string;
 }
 export declare const Image: ChakraComponent<React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLDivElement>>, ImageProps>;
 export default Image;

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

@@ -1,12 +1,6 @@
-import { ChakraComponent } from "@chakra-ui/react";
-import React from "react";
-export interface LabelProps {
-    /** Additional CSS class name to render in the `label` element. */
-    className?: string;
-    /** The id of the html element that this `Label` is describing. */
-    htmlFor: string;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+import { BoxProps, ChakraComponent, ChakraProps } from "@chakra-ui/react";
+import React, { LabelHTMLAttributes } from "react";
+export interface LabelProps extends Pick<BoxProps, keyof ChakraProps>, Omit<LabelHTMLAttributes<HTMLLabelElement>, "color"> {
     /** Controls whether the label should be inline with the input it goes with.
      * This prop should only be used internally. */
     isInlined?: boolean;

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

@@ -1,33 +1,23 @@
-import { ChakraComponent, LinkProps as ChakraLinkProps } from "@chakra-ui/react";
-import React from "react";
-export declare const linkTypesArray: readonly ["action", "backwards", "buttonPrimary", "buttonSecondary", "buttonPill", "buttonCallout", "buttonNoBrand", "buttonDisabled", "default", "external", "forwards", "standalone"];
-export type LinkTypes = typeof linkTypesArray[number];
-export interface LinkProps extends ChakraLinkProps {
-    /** Additional class name to render in the `Link` component. */
-    className?: string;
+import { BoxProps, ChakraComponent, ChakraProps } from "@chakra-ui/react";
+import React, { AnchorHTMLAttributes } from "react";
+export declare const linkVariantsArray: readonly ["action", "backwards", "buttonPrimary", "buttonSecondary", "buttonPill", "buttonCallout", "buttonNoBrand", "buttonDisabled", "default", "external", "forwards", "standalone"];
+export type LinkVariants = typeof linkVariantsArray[number];
+export interface LinkProps extends Pick<BoxProps, "as" | keyof ChakraProps>, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color"> {
     /** Used to include or remove visited state styles. Default is true. */
     hasVisitedState?: boolean;
-    /** The `href` attribute for the anchor element. */
-    href?: string;
-    /** ID used for accessibility purposes. */
-    id?: string;
     /** Used to explicitly set the underline style for a text link. If true, link
      * text will always be underlined; if false, link text will only show
      * underline in hover state. */
     isUnderlined?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement, MouseEvent>) => void;
-    rel?: string;
     /** Visibly hidden text that will only be read by screenreaders. */
     screenreaderOnlyText?: string;
-    /** Prop that sets the HTML attribute to target where the link should go. */
-    target?: "_blank" | "_parent" | "_self" | "_top";
     /** Controls the link's styles based on the value: action, backwards, default,
      * external, forwards, standalone, and all "button" types. */
-    type?: LinkTypes;
+    variant?: LinkVariants;
 }
 /**
- * A component that uses an `href` prop or a child anchor `<a>` element, to
- * create an anchor element with added styling and conventions.
+ * A component that renders an anchor element with added styling
+ * and conventions.
  */
 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,16 +1,12 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export declare const listTypesArray: readonly ["ol", "ul", "dl"];
-export type ListTypes = typeof listTypesArray[number];
+export declare const listVariantsArray: readonly ["ol", "ul", "dl"];
+export type ListVariants = typeof listVariantsArray[number];
 export interface DescriptionProps {
     term: string;
     description: string | JSX.Element;
 }
-export interface ListProps {
-    /** ClassName you can add in addition to 'list' */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+export interface ListProps extends Omit<BoxProps, "title"> {
     /** Display the list in a row. */
     inline?: boolean;
     /** Data to render if children are not passed. For `listTypes` ordered `"ol"`
@@ -29,7 +25,7 @@ export interface ListProps {
      * 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;
+    variant: ListVariants;
 }
 /**
  * A component that renders list item `li` elements or description item `dt`
@@ -37,9 +33,4 @@ export interface ListProps {
  * only display for the `Description` list type.
  */
 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.
- */
-export declare const checkListChildrenError: (children: React.ReactNode, listType?: string, componentName?: string) => void;
 export default List;

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

@@ -1,17 +1,13 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent, ChakraProps } from "@chakra-ui/react";
 import React from "react";
 import { DimensionTypes } from "../../helpers/types";
 import { logoNamesArray, logoSizesArray } from "./logoVariables";
 export type LogoNames = typeof logoNamesArray[number];
 export type LogoSizes = typeof logoSizesArray[number];
-export interface LogoProps {
-    /** Optional className that will be added to the parent element */
-    className?: string;
+export interface LogoProps extends Pick<BoxProps, "id" | "className" | keyof ChakraProps> {
     /** Logos designated as decorative will be ignored by screenreaders. False
      * by default. */
     decorative?: boolean;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
     /** The name of the logo you want to use. */
     name?: LogoNames;
     /** Sets the logo size. */

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

@@ -1,12 +1,8 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, 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;
+export interface MenuProps extends BoxProps {
     /** 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;

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

@@ -1,12 +1,10 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export interface BaseProps {
+export interface BaseProps extends Omit<BoxProps, "scrollBehavior"> {
     /** The content to display in the modal body. */
     bodyContent?: string | JSX.Element;
     /** 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?: string;
     /** Boolean to determine if the modal is open or closed. */
     isOpen?: boolean;
 }
@@ -16,7 +14,7 @@ export interface ConfirmationModalProps {
     onCancel: () => void;
     onConfirm: () => void;
     /** The `Modal` variant to render. */
-    type: "confirmation";
+    variant: "confirmation";
     /** The label for the close button. This prop is used for the
      * "cancel" button in the confirmation variant. */
     closeButtonLabel?: string;
@@ -27,7 +25,7 @@ export interface DefaultModalProps {
     closeButtonLabel?: string;
     onClose?: () => void;
     /** The `Modal` variant to render. */
-    type: "default";
+    variant: "default";
     /** The label for the confirm button. This prop is not used
      * in the default variant. */
     confirmButtonLabel?: never;
@@ -36,21 +34,20 @@ export interface DefaultModalProps {
 }
 export type ModalTypeProps = ConfirmationModalProps | DefaultModalProps;
 export type BaseModalProps = BaseProps & ModalTypeProps;
-export interface ModalProps {
+export interface ModalProps extends BoxProps {
     /** 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`, `headingText`, `isOpen`, and the modal type props. */
     modalProps: BaseModalProps;
 }
-export declare function isDefaultType(type: BaseModalProps["type"]): type is "default";
+export declare function isDefaultVariant(variant: BaseModalProps["variant"]): variant is "default";
 export declare const BaseModal: ChakraComponent<React.FunctionComponent<BaseModalProps>, 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.
+ * component are passed through to the `modalProps` prop. In addition to the
+ * props below, you may pass `modalProps` any Chakra `Box` props.
  */
 export declare const ModalTrigger: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<ModalProps> & React.RefAttributes<HTMLButtonElement>>, React.PropsWithChildren<ModalProps>>;
 /**

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

@@ -1,4 +1,4 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export interface MultiSelectItem {
     id: string;
@@ -16,7 +16,7 @@ export interface SelectedItems {
         items: string[];
     };
 }
-export interface MultiSelectProps {
+export interface MultiSelectProps extends BoxProps {
     /** The button text rendered within the MultiSelect. */
     buttonText: string;
     /** Determines whether the component will toggle to the closed state
@@ -25,14 +25,6 @@ export interface MultiSelectProps {
     /** The number of items that will be visible in the list when the component
      * first loads. */
     defaultItemsVisible?: number;
-    /** The action to perform for the clear/reset button of individual MultiSelects. */
-    onClear?: () => void;
-    /** The action to perform on the checkbox's onChange function. */
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /** The action to perform for a mixed state checkbox (parent checkbox). */
-    onMixedStateChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /** An ID string that other components can cross reference for accessibility purposes. */
-    id: string;
     /** Boolean value used to control how the MultiSelect component will render
      * within the page and interact with other DOM elements. The default value is false. */
     isBlockElement?: boolean;
@@ -46,6 +38,13 @@ export interface MultiSelectProps {
     /** listOverflow is a property indicating how the list should handle overflow,
      * with options limited to either "scroll" or "expand." */
     listOverflow?: MultiSelectListOverflowTypes;
+    /** The action to perform for the clear/reset button of individual MultiSelects. */
+    onClear?: () => void;
+    /** The action to perform on the checkbox's onChange function. Note, if using
+     * this prop, it must be of the type listed below. */
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** The action to perform for a mixed state checkbox (parent checkbox). */
+    onMixedStateChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /** The selected items state (items that were checked by user). */
     selectedItems: SelectedItems;
     /** Value used to set the width for the MultiSelect component. */

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

@@ -1,9 +1,6 @@
 /// <reference types="react" />
-export interface MultiSelectItemsCountButtonProps {
-    /** An ID string that other components can cross reference for accessibility purposes. */
-    id: string;
-    /** The id of the MultiSelect using this button. */
-    multiSelectId: string;
+import { BoxProps } from "@chakra-ui/react";
+export interface MultiSelectItemsCountButtonProps extends BoxProps {
     /** The label text rendered within the MultiSelect using this button. */
     multiSelectLabelText: string;
     /** The open status of the MultiSelect menu. */

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

@@ -1,12 +1,8 @@
-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";
-export interface MultiSelectGroupProps {
-    /** Additional className to use. */
-    className?: string;
-    /** The id of the MultiSelectGroup. */
-    id: string;
+export interface MultiSelectGroupProps extends BoxProps {
     /** The label text rendered within the MultiSelectGroup. */
     labelText: string;
     /** Renders the layout of `MultiSelect` components in a row or column. */

package/dist/src/components/NewsletterSignup/NewsletterSignup.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 NewsletterSignupProps {
-    /** Additional class name to add. */
-    className?: string;
+export interface NewsletterSignupProps extends Omit<BoxProps, "title"> {
     /** Text displayed next to the confirmation icon after a successful email submission */
     confirmationHeading: string;
     /** Detail text for the confirmation view */
@@ -16,12 +14,9 @@ export interface NewsletterSignupProps {
     /** 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.
-     */
+    /** Value to determine the section color highlight. */
     highlightColor?: HighlightColorTypes;
     /** A handler function that will be called when the form is submitted. */
     onSubmit: (event: React.FormEvent<any>) => void;
@@ -42,11 +37,11 @@ export interface NewsletterSignupProps {
     /** Used to specify what is displayed in the component form/feedback area. */
     view?: NewsletterSignupViewType;
 }
-export declare const highlightColorTypesArray: readonly ["ui.gray.medium", "section.blogs.secondary", "section.books-and-more.primary", "brand.primary", "section.connect.primary", "section.education.primary", "section.locations.primary", "section.research.primary", "section.research-library.lpa", "section.research-library.schomburg", "section.research-library.schwartzman", "section.whats-on.primary"];
-export type HighlightColorTypes = typeof highlightColorTypesArray[number];
+export declare const newsletterHighlightColorsArray: string[];
+export type HighlightColorTypes = typeof newsletterHighlightColorsArray[number];
 export type NewsletterSignupViewType = "form" | "submitting" | "confirmation" | "error";
 /**
- * The NewsletterSignup component provides a way for patrons to register for an
+ * The `NewsletterSignup` component provides a way for patrons to register for an
  * email-based newsletter distribution list.
  */
 export declare const NewsletterSignup: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<NewsletterSignupProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<NewsletterSignupProps>>;

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

@@ -1,14 +1,12 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export declare const notificationTypesArray: readonly ["standard", "announcement", "warning"];
-export type NotificationTypes = typeof notificationTypesArray[number];
-interface BaseProps {
+export declare const notificationVariantsArray: readonly ["standard", "announcement", "warning"];
+export type NotificationVariants = typeof notificationVariantsArray[number];
+interface BaseProps extends BoxProps {
     /** Optional prop to control text alignment in `NotificationContent` */
     alignText?: boolean;
     /** Optional custom `Icon` that will override the default `Icon`. */
     icon?: JSX.Element;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Optional prop to control horizontal alignment of the `Notification` content */
     isCentered?: boolean;
     /** Optional content to be rendered in a `NotificationHeading` component. A
@@ -18,16 +16,14 @@ interface BaseProps {
     notificationHeading?: string | JSX.Element;
     /** Optional prop to control the coloring of the `Notification` text and the
      * visibility of an applicable icon. */
-    notificationType?: NotificationTypes;
+    variant?: NotificationVariants;
     /** Prop to display the `Notification` icon. Defaults to `true`. */
     showIcon?: boolean;
 }
+type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
 type NotificationHeadingProps = Omit<BasePropsWithoutAlignText, "showIcon">;
 type NotificationContentProps = Omit<BaseProps, "icon">;
-type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
-export interface NotificationProps extends BasePropsWithoutAlignText {
-    /** Additional `className` to add. */
-    className?: string;
+export interface NotificationProps extends BasePropsWithoutAlignText, BoxProps {
     /** Optional prop to control whether a `Notification` can be dismissed
      * (closed) by a user. */
     dismissible?: boolean;
@@ -45,8 +41,8 @@ export declare const NotificationHeading: ChakraComponent<React.ForwardRefExotic
  */
 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.
+ * `Notification` is a component used to present users with three different levels
+ * of notifications: standard, announcement, and warning.
  */
 export declare const Notification: ChakraComponent<React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>, NotificationProps>;
 export default Notification;

package/dist/src/components/Pagination/Pagination.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 PaginationProps {
-    /** Additional className. */
-    className?: string;
+export interface PaginationProps extends BoxProps {
     /** The currentPage can be used to programatically force the selected page to change
      * without the user explicitly requesting it – for example, if the user should be
      * brought back to the first page of a set of results after a new search. */
@@ -11,8 +9,6 @@ export interface PaginationProps {
      * to use for a link's `href` attribute. This is used when the current
      * page should refresh when navigating. */
     getPageHref?: undefined | ((pageNumber: number) => string);
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** The initially selected page (default value is 1). */
     initialPage?: number;
     /** The callback function called when an item is selected and the current

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

@@ -1,4 +1,4 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const progressIndicatorSizesArray: readonly ["default", "small"];
 export declare const progressIndicatorTypesArray: readonly ["circular", "linear"];
@@ -6,9 +6,7 @@ export declare const progressIndicatorLabelPlacementsArray: readonly ["bottom",
 export type ProgressIndicatorSizes = typeof progressIndicatorSizesArray[number];
 export type ProgressIndicatorTypes = typeof progressIndicatorTypesArray[number];
 export type ProgressIndicatorLabelPlacements = typeof progressIndicatorLabelPlacementsArray[number];
-interface BaseProgressIndicatorProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id: string;
+interface BaseProgressIndicatorProps extends BoxProps {
     /** Whether the `ProgressIndicator` should be linear or circular. */
     indicatorType?: ProgressIndicatorTypes;
     /** Whether the progress animation should display because the `value` prop is
@@ -35,7 +33,7 @@ interface CircularProgressIndicatorProps extends BaseProgressIndicatorProps {
 }
 export type ProgressIndicatorProps = LinearProgressIndicatorProps | CircularProgressIndicatorProps;
 /**
- * A component that displays a progress status for any task that takes a long
+ * `ProgressIndicator` displays a progress status for any task that takes a long
  * time to complete or consists of multiple steps. Examples include downloading,
  * uploading, or processing.
  */