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

package/dist/src/components/HorizontalRule/HorizontalRule.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 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;
 }

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

@@ -1,18 +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 IconRotationTypes = 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" | 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
@@ -31,7 +28,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,10 +10,8 @@ declare const _default: {
     actionHome: any;
     actionIdentity: any;
     actionIdentityFilled: any;
-    actionInfo: any;
     actionLaunch: any;
     actionLightbulb: any;
-    actionList: any;
     actionLockClosed: any;
     actionPayment: any;
     actionPower: any;
@@ -59,7 +57,6 @@ 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", "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 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", "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 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"];
@@ -40,8 +40,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
@@ -52,7 +50,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 +59,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 +74,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,10 +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;
+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"> {
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** Controls whether the label should be inline with the input it goes with.

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

@@ -1,33 +1,25 @@
-import { ChakraComponent, LinkProps as ChakraLinkProps } from "@chakra-ui/react";
-import React from "react";
-export declare const linkTypesArray: readonly ["action", "backwards", "button", "buttonPrimary", "buttonSecondary", "buttonPill", "buttonCallout", "buttonNoBrand", "buttonDisabled", "default", "external", "forwards", "standalone"];
-export type LinkTypes = typeof linkTypesArray[number];
-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 visuals: action, button, backwards, forwards,
-     * standalone, or default. */
-    type?: LinkTypes;
+    /** Controls the link's styles based on the value: action, backwards, default,
+     * external, forwards, standalone, and all "button" types. */
+    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,14 +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;
+export interface ListProps extends Omit<BoxProps, "title"> {
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** Display the list in a row. */
@@ -29,7 +27,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`
@@ -41,5 +39,9 @@ export declare const List: ChakraComponent<React.ForwardRefExoticComponent<React
  * 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 declare const checkListChildrenError: ({ children, variant, componentName, }: {
+    children: React.ReactNode;
+    variant?: ListVariants;
+    componentName?: string;
+}) => void;
 export default List;

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

@@ -1,12 +1,10 @@
-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, "className" | keyof ChakraProps> {
     /** Logos designated as decorative will be ignored by screenreaders. False
      * by default. */
     decorative?: boolean;

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

@@ -1,10 +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;
+export interface MenuProps extends BoxProps {
     /** Optional ID string that other components can cross reference for accessibility purposes. */
     id?: string;
     /** Optional string used to identify and highlight an item when the menu opens. The value should

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

@@ -1,6 +1,6 @@
-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. */
@@ -16,7 +16,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 +27,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;
@@ -45,12 +45,13 @@ export interface ModalProps {
      * `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

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

@@ -1,10 +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;
+export interface MultiSelectGroupProps extends BoxProps {
     /** The id of the MultiSelectGroup. */
     id: string;
     /** The label text rendered within the MultiSelectGroup. */

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 */
@@ -20,8 +18,7 @@ export interface NewsletterSignupProps {
     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,8 +39,8 @@ 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

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

@@ -1,7 +1,7 @@
-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];
+export declare const notificationVariantsArray: readonly ["standard", "announcement", "warning"];
+export type NotificationVariants = typeof notificationVariantsArray[number];
 interface BaseProps {
     /** Optional prop to control text alignment in `NotificationContent` */
     alignText?: boolean;
@@ -18,25 +18,19 @@ 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 NotificationHeadingProps = Omit<BasePropsWithoutAlignText, "showIcon">;
 type NotificationContentProps = Omit<BaseProps, "icon">;
 type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
-export interface NotificationProps extends BasePropsWithoutAlignText {
-    /** Label used to describe the `Notification`'s aside HTML element. */
-    ariaLabel?: string;
-    /** 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;
     /** Optional custom `Icon` that will override the default `Icon`. */
     icon?: JSX.Element;
-    /** Optional prop to control the margin around the `Notification` component. */
-    noMargin?: boolean;
     /** Content to be rendered in a `NotificationContent` component. */
     notificationContent: string | JSX.Element;
 }

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. */

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 {
-    /** The darkMode prop is deprecated and should no longer be used. */
-    darkMode?: boolean;
+interface BaseProgressIndicatorProps extends BoxProps {
     /** ID that other components can cross reference for accessibility purposes. */
     id: string;
     /** Whether the `ProgressIndicator` should be linear or circular. */

package/dist/src/components/Radio/Radio.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, { InputHTMLAttributes } from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export interface RadioProps {
-    /** Additional class name. */
-    className?: string;
+export interface RadioProps extends Pick<BoxProps, keyof ChakraProps>, Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "height" | "width"> {
     /** Optional string to populate the HelperErrorText for the standard state. */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
@@ -28,10 +26,6 @@ export interface RadioProps {
      * `<label>` element if `showlabel` is true, or an "aria-label" if `showLabel`
      * is false. */
     labelText: string | JSX.Element;
-    /** Used to reference the input element in forms. */
-    name?: string;
-    /** Should be passed along with `isChecked` for controlled components. */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Offers the ability to hide the helper/invalid text. */
     showHelperInvalidText?: boolean;
     /** Offers the ability to show the radio's label onscreen or hide it. Refer

package/dist/src/components/RadioGroup/RadioGroup.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 RadioGroupProps {
-    /** Additional class name. */
-    className?: string;
+export interface RadioGroupProps 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/SearchBar/SearchBar.d.ts

@@ -1,5 +1,5 @@
-import { ChakraComponent } from "@chakra-ui/react";
-import React from "react";
+import { ChakraComponent, ChakraProps, BoxProps } from "@chakra-ui/react";
+import React, { FormHTMLAttributes } from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { SelectProps as InitialSelectProps } from "../Select/Select";
 import { InputProps as InitialInputProps } from "../TextInput/TextInput";
@@ -11,13 +11,9 @@ export type SelectProps = Partial<Pick<InitialSelectProps, "id" | "labelText" |
     optionsData: SelectOptionsProps[];
 };
 export type TextInputProps = Pick<InitialInputProps, "labelText" | "name"> & Partial<Pick<InitialInputProps, "defaultValue" | "id" | "isClearable" | "isClearableCallback" | "max" | "maxLength" | "min" | "onChange" | "pattern" | "placeholder" | "value">>;
-export interface SearchBarProps {
-    /** Adds 'action' property to the `form` element. */
-    action?: string;
+export interface SearchBarProps extends Pick<BoxProps, keyof ChakraProps>, Omit<FormHTMLAttributes<HTMLFormElement>, "color"> {
     /** The onClick callback function for the `Button` component. */
     buttonOnClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
-    /** A class name for the `form` element. */
-    className?: string;
     /** Optional string for the SearchBar's description above the component. */
     descriptionText?: string;
     /** Optional string value used to set the text for a `Heading` component, or
@@ -39,13 +35,9 @@ export interface SearchBarProps {
     isRequired?: boolean;
     /** Populates the `aria-label` attribute on the form element. */
     labelText: string;
-    /** Adds 'method' property to the `form` element. */
-    method?: string;
     /** Sets the `Button` variant type to `noBrand` when true;
      * false by default which sets the type to `primary`. */
     noBrandButtonType?: boolean;
-    /** Handler function when the form is submitted. */
-    onSubmit: (event: React.FormEvent) => void;
     /** Required props to render a `Select` element. */
     selectProps?: SelectProps | undefined;
     /** Custom input element to render instead of a `TextInput` element. */

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

@@ -1,13 +1,11 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent, ChakraProps } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export declare const selectTypesArray: string[];
-export declare const labelPositionsArray: string[];
-export type SelectTypes = typeof selectTypesArray[number];
+export declare const selectVariantsArray: readonly ["default", "searchbar"];
+export declare const labelPositionsArray: readonly ["default", "inline"];
+export type SelectVariants = typeof selectVariantsArray[number];
 export type LabelPositions = typeof labelPositionsArray[number];
-export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
-    /** A class name for the `div` parent element. */
-    className?: string;
+export interface SelectProps extends Pick<BoxProps, keyof ChakraProps>, Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "color"> {
     /** The initial value of an uncontrolled component */
     defaultValue?: string;
     /** Optional string to populate the `HelperErrorText` for the standard state. */
@@ -31,18 +29,13 @@ export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElemen
      * populates an `aria-label` attribute on the select input if `showLabel` is
      * set to `false`. */
     labelText: string;
-    /** Used to reference the select element in forms. */
-    name: string;
-    /** The callback function to get the selected value.
-     * Should be passed along with `value` for controlled components. */
-    onChange?: (event: React.FormEvent) => void;
     /** Placeholder text in the select element. */
     placeholder?: string;
     /** Allows the '(required)' text to be changed for language purposes
      * Note: Parenthesis will be added automatically by the component */
     requiredLabelText?: string;
     /** The variant to display. */
-    selectType?: SelectTypes;
+    variant?: SelectVariants;
     /** Offers the ability to hide the helper/invalid text. */
     showHelperInvalidText?: boolean;
     /** Offers the ability to show the select's label onscreen or hide it. Refer
@@ -51,9 +44,6 @@ export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElemen
     /** Whether or not to display the "(required)" text in the label text.
      * True by default. */
     showRequiredLabel?: boolean;
-    /** The value of the selected option.
-     * Should be passed along with `onChange` for controlled components. */
-    value?: string;
 }
 /**
  * Component that renders Chakra's `Select` component along with an accessible

package/dist/src/components/SkeletonLoader/SkeletonLoader.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";
 export declare const skeletonLoaderImageRatiosArray: readonly ["landscape", "portrait", "square"];
 export type SkeletonLoaderImageRatios = typeof skeletonLoaderImageRatiosArray[number];
-export interface SkeletonLoaderProps {
-    /** Additional class name for the Skeleton component. */
-    className?: string;
+export interface SkeletonLoaderProps extends BoxProps {
     /** Optional numeric value to control the number of lines for content
      * placeholder; default value is `3`. */
     contentSize?: number;

package/dist/src/components/SkipNavigation/SkipNavigation.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 SkipNavigationProps {
-    /** Additional CSS class name to render in the `nav` element. */
-    className?: string;
+export interface SkipNavigationProps extends BoxProps {
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** The anchor target for the main skip link. The default is "#mainContent". */

package/dist/src/components/Slider/Slider.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, { InputHTMLAttributes } from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export interface SliderProps {
-    /** Additional class name for the Slider component. */
-    className?: string;
+export interface SliderProps extends Pick<BoxProps, keyof ChakraProps>, Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "defaultValue" | "height" | "onChange" | "value" | "width"> {
     /** The initial value for the single `Slider` or an array of two number
      * values for the `isRangeSlider` case. */
     defaultValue?: number | number[];