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

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

@@ -1,20 +1,18 @@
-import { ChakraComponent } from "@chakra-ui/react";
-import React, { ButtonHTMLAttributes } from "react";
-export type AccordionTypes = "default" | "warning" | "error";
+/// <reference types="react" />
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
+export declare const accordionVariantsArray: readonly ["default", "warning", "error"];
+export type AccordionVariants = typeof accordionVariantsArray[number];
 export interface AccordionDataProps {
-    accordionType?: AccordionTypes;
     ariaLabel?: string;
     /** Ref to the DOM element of the AccordionButton. */
     buttonInteractionRef?: any;
     label: string | JSX.Element;
     panel: string | React.ReactNode;
+    variant?: AccordionVariants;
 }
-type HTMLButtonAttributes = Pick<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label">;
-export interface AccordionProps extends HTMLButtonAttributes {
-    /** 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[];
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
     /** Whether the accordion is open by default only on its initial rendering */
     isDefaultOpen?: boolean;
     /** Whether the contents of the Accordion should always be rendered.

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;
@@ -15,8 +13,6 @@ export interface AlphabetFilterProps {
      * a DS Heading component that can be passed in.
      */
     headingText?: string | JSX.Element;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Adds the `disabled` prop to the AlphabetFilter when true. */
     isDisabled?: boolean;
     /** The callback function called when a letter button or the Show All button is clicked. */

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

@@ -1,32 +1,23 @@
-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
-     * `AudioPlayer` component will accept the `embedCode` prop or the `filePath` prop.
+    /** Optional string to set a code snippet provided by Libsyn, SoundCloud or
+     * Spotify; the `AudioPlayer` component will accept the `embedCode` prop.
      */
     embedCode?: string;
-    /** Optional string to set the audio file, the path can be relative or absolute
-     * referring to a locally hosted file, or a fully qualified URL pointing to a locally hosted file
-     * or to another domain altogether.
-     * TODO: This prop won't be used until a future version.
-     */
     /** Optional string value used to set the text for a `Heading` component, or
      * a DS Heading component that can be passed in.
      */
     headingText?: string | JSX.Element;
     /** Optional string to set the text for a `HelperErrorText` component. */
     helperText?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Optional title to added to the `<iframe>` element for improved accessibility. If omitted, a
      * generic title will be added.
      */

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

@@ -1,17 +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 {
+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
@@ -23,19 +19,16 @@ export interface BannerProps {
     highlightColor?: BannerHighlightColors;
     /** 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 whether a `Banner` can be dismissed
      * (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
+ * The `Banner` component is a non-modal, semantic dialog used to communicate a
  * general status event or to promote a feature, providing contextual feedback
- * messages for typical user actions. They are displayed contextually within a
- * page flow and they will often prompt a user to take action.
+ * messages for typical user actions within a page flow.
  */
 export declare const Banner: ChakraComponent<React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>, BannerProps>;
 export default Banner;

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

@@ -1,23 +1,19 @@
-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;
-    /** 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;
+    /** Used to control how the `Breadcrumbs` component will be rendered. */
+    variant?: BreadcrumbsVariants;
 }
 /**
  * The `Breadcrumbs` component is a navigation element that provides a

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

@@ -1,34 +1,27 @@
-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"];
+export declare const buttonVariantsArray: readonly ["primary", "secondary", "text", "callout", "pill", "iconOnly", "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;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id: 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"> {
     /** Adds 'disabled' property to the button. */
     isDisabled?: boolean;
     /** Trigger the Button's action through the `mouseDown` event handler instead
      * of `onClick`. `false` by default. */
     mouseDown?: boolean;
-    /** The action to perform on the `<button>`'s onClick function. */
-    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
     /** Visibly hidden text that will only be read by screenreaders. */
     screenreaderOnlyText?: string;
     /** The size of the `Button`. */
     size?: ButtonSizes;
-    /** The HTML button type attribute. */
-    type?: ButtonElementType;
+    /** The button variation to render based on the `ButtonVariants` type. */
+    variant?: ButtonVariants;
 }
 /**
- * Renders a simple `button` element with custom variant styles.
+ * Renders a simple `button` element with custom `variant` styles.
  */
 export declare const Button: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<ButtonProps> & React.RefAttributes<HTMLButtonElement>>, React.PropsWithChildren<ButtonProps>>;
 export default Button;

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

@@ -1,15 +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. */
     isDisabled?: boolean;
     /** Renders the layout of `Button` components in a row or column. */

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ButtonGroupContext: import("react").Context<boolean>;
+export declare const useButtonGroup: () => boolean;

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

@@ -1,7 +1,7 @@
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-import { ChakraComponent } from "@chakra-ui/react";
-import { LayoutTypes } from "../../helpers/types";
 import { ComponentImageProps } from "../Image/Image";
+import { LayoutTypes } from "../../helpers/types";
 interface CardBaseProps {
     /** Optional value to control the alignment of the text and elements. */
     isCentered?: boolean;
@@ -9,11 +9,7 @@ interface CardBaseProps {
      * Default is `"column"`. */
     layout?: LayoutTypes;
 }
-interface CardWrapperProps {
-    /** Optional CSS class name to add. */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
+interface CardWrapperProps extends BoxProps {
     /** Main link to use when the full `Card` component should be clickable. */
     mainActionLink?: string;
     /** Additional object for styling the `Card`'s `div` wrapper. */

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,13 +10,9 @@ 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 */
-    id: string;
     /** Optional string to populate the HelperErrorText for the error state
      * when `isInvalid` is true. */
     invalidText?: HelperErrorTextType;
@@ -31,11 +27,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,16 +1,12 @@
-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 */
     helperText?: HelperErrorTextType;
-    /** ID that other components can cross reference for accessibility purposes */
-    id: string;
     /** Optional string to populate the HelperErrorText for error state */
     invalidText?: HelperErrorTextType;
     /** Adds the 'disabled' prop to the input when true. */
@@ -45,8 +41,8 @@ export interface CheckboxGroupProps {
 /**
  * Wrapper component to wrap `Checkbox` components. Can be displayed in a
  * column or in a row. The `CheckboxGroup` component renders all the necessary
- * wrapping and associated text elements, but the checkbox input elements
- * _need_ to be child `Checkbox` components from the NYPL Design System.
+ * wrapping and associated text elements. We highly recommend using DS
+ * `Checkbox` components as children.
  */
 export declare const CheckboxGroup: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<CheckboxGroupProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<CheckboxGroupProps>>;
 export default CheckboxGroup;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface CheckboxGroupContextValue {
+    isDisabled: boolean;
+    isInvalid: boolean;
+    isRequired: boolean;
+    name: string;
+}
+export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextValue>;
+export declare const useCheckboxGroup: () => CheckboxGroupContextValue;
+export {};

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
@@ -17,8 +14,6 @@ export interface ComponentWrapperProps {
     helperTextStyles?: {
         [key: string]: any;
     };
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
     /** Optional string to populate the `HelperErrorText` for the error state
      * when `isInvalid` is true. */
     invalidText?: HelperErrorTextType;

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";
@@ -11,15 +11,11 @@ export interface FullDateType {
     /** Date object that gets returned for the onChange function. */
     startDate: Date | null;
 }
-interface DateRangeRowProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id: string;
+interface DateRangeRowProps extends BoxProps {
     /** 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, "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. */
@@ -42,7 +38,7 @@ export interface CustomTextInputProps extends Partial<InputProps> {
     /** Data value used by the ReactDatePicker plugin and the custom TextInput component. */
     value?: string;
 }
-export interface DatePickerProps extends DatePickerWrapperProps {
+export interface DatePickerProps extends Omit<DatePickerWrapperProps, "onChange"> {
     /** The date format to display. Defaults to "yyyy-MM-dd".
      * Must be in ISO-8601 format. */
     dateFormat?: string;

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

@@ -1,21 +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;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
+export interface FeaturedContentProps extends BoxProps {
     /** The text content rendered in the component.  DS components and native HTML can be passed in this prop. */
     textContent: string | JSX.Element;
     /** Whether component will fill the full width of the browser window, instead of just its parent element.

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;
@@ -14,8 +12,6 @@ export interface FeedbackBoxProps {
     /** A data object containing key/value pairs that will be added to the form
      * field submitted data. */
     hiddenFields?: any;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
     /** Toggles the invalid state for the comment field. */
     isInvalidComment?: boolean;
     /** Toggles the invalid state for the email field. */

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

@@ -1,10 +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;
-    /** ID that other components can cross reference for accessibility purposes */
-    id: string;
+export interface FieldsetProps extends BoxProps {
     /** Flag to show or hide the text in the `legend` element. False by default. */
     isLegendHidden?: boolean;
     /** Flag to render "required" in the `legend`. True by default. */

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

@@ -1,13 +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;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
+export interface FilterBarInlineProps 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/FilterBarPopup/FilterBarPopup.d.ts

@@ -1,17 +1,13 @@
-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.
      */
     heading?: string | JSX.Element;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Only used for internal purposes. */
     isOpen?: boolean;
     /** Function for the global `Clear Filters` button. If passed the `Clear Filters` button will render. */

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

@@ -1,30 +1,25 @@
-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, "id" | "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``` */
     gap?: GridGaps;
-    /** ID that other components can cross reference (internal use) */
-    id: string;
 }
 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"> {
 }
 /** FormRow child-component */
 export declare const FormRow: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<FormChildProps> & React.RefAttributes<HTMLDivElement>>, FormChildProps>;
 /** FormField child-component */
 export declare const FormField: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<FormChildProps> & React.RefAttributes<HTMLDivElement>>, FormChildProps>;
-/** Main Form component */
+/**
+ * The `Form` component renders a standard `<form>` element and should be used
+ * to handle layout and spacing for child input fields. `FormRow` and `FormField`
+ * components should be used to build the `<form>` structure and to arrange input
+ * fields as needed.
+ */
 export declare const Form: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<FormProps> & React.RefAttributes<HTMLDivElement & HTMLFormElement>>, React.PropsWithChildren<FormProps>>;
 export default Form;

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

@@ -1,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;
@@ -12,8 +10,6 @@ export interface SimpleGridProps {
      * will be used; `IMPORTANT: for standard grid layouts, this prop should
      * not be used.` */
     gap?: GridGaps;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
 }
 export declare const SimpleGrid: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<SimpleGridProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<SimpleGridProps>>;
 export default SimpleGrid;

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

@@ -1,15 +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"];
 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;
-    /** Optional ID that other components can cross reference for accessibility
-     * purposes */
-    id?: string;
+export interface HeadingProps extends BoxProps {
     /** Optional prop used to show capitalized text */
     isCapitalized?: boolean;
     /** Optional prop used to show upper case text */
@@ -19,8 +14,6 @@ export interface HeadingProps extends ChakraHeadingProps {
     /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed,
      * `Heading` will default to `<h2>` */
     level?: HeadingLevels;
-    /** Optional prop used to remove default spacing */
-    noSpace?: boolean;
     /** String to populate the overline element */
     overline?: string;
     /** Optional size used to override the default styles of the native HTML `<h>`

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

@@ -1,12 +1,7 @@
 /// <reference types="react" />
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 export type HelperErrorTextType = string | JSX.Element;
-type HTMLDivAttributes = Pick<React.HTMLAttributes<HTMLDivElement>, "aria-atomic" | "aria-live">;
-export interface HelperErrorTextProps extends HTMLDivAttributes {
-    /** Additional className to add. */
-    className?: string;
-    /** Unique ID for accessibility purposes. */
-    id?: string;
+export interface HelperErrorTextProps extends BoxProps {
     /** Toggles between helper and invalid styling. */
     isInvalid?: boolean;
     /** Offers the ability to render or not render the content passed in