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

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

@@ -1,5 +1,5 @@
+/// <reference types="react" />
 import { BoxProps, ChakraComponent } from "@chakra-ui/react";
-import React from "react";
 export declare const accordionVariantsArray: readonly ["default", "warning", "error"];
 export type AccordionVariants = typeof accordionVariantsArray[number];
 export interface AccordionDataProps {
@@ -13,8 +13,6 @@ export interface AccordionDataProps {
 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

@@ -13,8 +13,6 @@ export interface AlphabetFilterProps extends Omit<BoxProps, "onClick"> {
      * 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

@@ -8,23 +8,16 @@ export interface AudioPlayerProps extends BoxProps {
     audioType: AudioType;
     /** 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

@@ -19,8 +19,6 @@ export interface BannerProps extends Omit<BoxProps, "content"> {
     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;

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

@@ -10,12 +10,10 @@ export interface BreadcrumbsDataProps {
 export interface BreadcrumbProps extends BoxProps {
     /** Breadcrumb links as an array */
     breadcrumbsData: BreadcrumbsDataProps[];
-    /** Used to control how the `Breadcrumbs` component will be rendered. */
-    variant?: BreadcrumbsVariants;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
     /** Custom Link component for apps with internal routing, defaults to BreadcrumbLink if not passed */
     customLinkComponent?: 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

@@ -3,15 +3,11 @@ 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 buttonVariantsArray: 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 ButtonVariants = typeof buttonVariantsArray[number];
 export type ButtonSizes = typeof sizesArray[number];
 export interface ButtonProps extends Pick<BoxProps, keyof ChakraProps>, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
-    /** The button variation to render based on the `ButtonVariants` type. */
-    variant?: ButtonVariants;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id: string;
     /** Adds 'disabled' property to the button. */
     isDisabled?: boolean;
     /** Trigger the Button's action through the `mouseDown` event handler instead
@@ -21,6 +17,8 @@ export interface ButtonProps extends Pick<BoxProps, keyof ChakraProps>, Omit<But
     screenreaderOnlyText?: string;
     /** The size of the `Button`. */
     size?: ButtonSizes;
+    /** The button variation to render based on the `ButtonVariants` type. */
+    variant?: ButtonVariants;
 }
 /**
  * Renders a simple `button` element with custom variant styles.

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

@@ -6,8 +6,6 @@ export type ButtonGroupWidths = typeof buttonGroupWidthsArray[number];
 export interface ButtonGroupProps extends BoxProps {
     /** Sets the width to "default" (for "fit-content") or "full". */
     buttonWidth?: ButtonGroupWidths;
-    /** 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 React from "react";
 import { BoxProps, ChakraComponent } from "@chakra-ui/react";
-import { LayoutTypes } from "../../helpers/types";
+import React from "react";
 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;
@@ -10,8 +10,6 @@ interface CardBaseProps {
     layout?: LayoutTypes;
 }
 interface CardWrapperProps extends BoxProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Main link to use when the full `Card` component should be clickable. */
     mainActionLink?: string;
     /** Additional object for styling the `Card`'s `div` wrapper. */

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

@@ -13,8 +13,6 @@ interface CheckboxIconProps {
 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;

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

@@ -7,8 +7,6 @@ export interface CheckboxGroupProps extends Omit<BoxProps, "onChange"> {
     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. */

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

@@ -14,8 +14,6 @@ export interface ComponentWrapperProps extends BoxProps {
     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

@@ -11,13 +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 Omit<BoxProps, "id" | "onChange">, DateRangeRowProps {
+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. */
@@ -40,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

@@ -12,8 +12,6 @@ export interface FeaturedContentImageProps extends Omit<ImageProps, "position">
     position?: FeaturedContentPositionType;
 }
 export interface FeaturedContentProps extends BoxProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** The text content rendered in the component.  DS components and native HTML can be passed in this prop. */
     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

@@ -12,8 +12,6 @@ export interface FeedbackBoxProps extends Omit<BoxProps, "onSubmit"> {
     /** 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,8 +1,6 @@
 import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export interface FieldsetProps extends BoxProps {
-    /** ID that other components can cross reference for accessibility purposes */
-    id: string;
     /** Flag to show or hide the text in the `legend` element. False by default. */
     isLegendHidden?: boolean;
     /** Flag to render "required" in the `legend`. True by default. */

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

@@ -4,8 +4,6 @@ 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 extends BoxProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Optional string value used to set the text for a `Heading` component, or
      * a DS Heading component that can be passed in.
      */

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

@@ -8,8 +8,6 @@ export interface FilterBarPopupProps extends BoxProps {
      * 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,17 +1,15 @@
 import { BoxProps, ChakraComponent, ChakraProps } from "@chakra-ui/react";
 import React, { FormHTMLAttributes } from "react";
 import { GridGaps } from "../Grid/SimpleGrid";
-interface FormBaseProps extends Pick<BoxProps, "className" | keyof ChakraProps> {
+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, Omit<FormHTMLAttributes<HTMLFormElement>, "color" | "id"> {
+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>;

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

@@ -10,8 +10,6 @@ export interface SimpleGridProps extends BoxProps {
      * 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

@@ -5,9 +5,6 @@ export declare const headingLevelsArray: readonly ["h1", "h2", "h3", "h4", "h5",
 export type HeadingSizes = typeof headingSizesArray[number];
 export type HeadingLevels = typeof headingLevelsArray[number];
 export interface HeadingProps extends BoxProps {
-    /** Optional ID that other components can cross reference for accessibility
-     * purposes */
-    id?: string;
     /** Optional prop used to show capitalized text */
     isCapitalized?: boolean;
     /** Optional prop used to show upper case text */
@@ -17,8 +14,6 @@ export interface HeadingProps extends BoxProps {
     /** 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

@@ -2,8 +2,6 @@
 import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 export type HelperErrorTextType = string | JSX.Element;
 export interface HelperErrorTextProps extends BoxProps {
-    /** Unique ID for accessibility purposes. */
-    id?: string;
     /** Toggles between helper and invalid styling. */
     isInvalid?: boolean;
     /** Offers the ability to render or not render the content passed in

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

@@ -5,7 +5,7 @@ export declare const heroVariantsArray: readonly ["primary", "tertiary", "campai
 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,
@@ -26,10 +26,6 @@ export interface HeroProps {
     foregroundColor?: string;
     /** Optional heading element. */
     heading?: JSX.Element;
-    /** Used to control how the `Hero` component will be rendered. */
-    variant?: HeroVariants;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Object used to create and render the `Image` component. You can pass `component`
      * (with its own internal props, which will override) or `src`, `alt`, `id`,
      * `fallBackSrc`, and `onError`. If `imageProps.alt` is left blank, a warning
@@ -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

@@ -5,8 +5,6 @@ export interface HorizontalRuleProps extends BoxProps {
      * other when the width is less than 100%. If omitted, the horizontal rule
      * will have a default center alignment. */
     align?: "left" | "right";
-    /** 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

@@ -7,7 +7,7 @@ export type IconNames = typeof iconNamesArray[number];
 export type IconRotations = typeof iconRotationsArray[number];
 export type IconSizes = typeof iconSizesArray[number];
 export type IconVariants = typeof iconVariantsArray[number];
-export interface IconProps extends Pick<BoxProps, "className" | keyof ChakraProps> {
+export interface IconProps extends Pick<BoxProps, "className" | "id" | keyof ChakraProps> {
     /** Aligns the icon. */
     align?: IconAlign;
     /** Overrides default icon color (black). */
@@ -17,8 +17,6 @@ export interface IconProps extends Pick<BoxProps, "className" | keyof ChakraProp
     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. */

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 ["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 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 iconVariantsArray: readonly ["default", "breadcrumbs"];

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

@@ -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,8 +38,6 @@ interface ImageWrapperProps {
     additionalWrapperStyles?: {
         [key: string]: any;
     };
-    /** 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;

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

@@ -1,8 +1,6 @@
 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.
      * This prop should only be used internally. */
     isInlined?: boolean;

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

@@ -5,8 +5,6 @@ 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;
-    /** 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. */

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

@@ -7,8 +7,6 @@ export interface DescriptionProps {
     description: string | JSX.Element;
 }
 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. */
     inline?: boolean;
     /** Data to render if children are not passed. For `listTypes` ordered `"ol"`
@@ -35,13 +33,4 @@ export interface ListProps extends Omit<BoxProps, "title"> {
  * 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, variant, componentName, }: {
-    children: React.ReactNode;
-    variant?: ListVariants;
-    componentName?: string;
-}) => void;
 export default List;

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

@@ -4,12 +4,10 @@ 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 extends Pick<BoxProps, "className" | keyof ChakraProps> {
+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

@@ -3,8 +3,6 @@ import { IconNames } from "../Icons/Icon";
 import React from "react";
 import { SectionTypes } from "../../helpers/types";
 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
      * match the id associated with one of the items. */
     selectedItem?: string;

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

@@ -5,8 +5,6 @@ export interface BaseProps extends Omit<BoxProps, "scrollBehavior"> {
     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;
 }
@@ -36,11 +34,9 @@ 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;

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

@@ -31,8 +31,6 @@ export interface MultiSelectProps extends BoxProps {
     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;

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

@@ -3,8 +3,6 @@ import React from "react";
 import { LayoutTypes } from "../../helpers/types";
 import { MultiSelectWidths } from "../MultiSelect/MultiSelect";
 export interface MultiSelectGroupProps extends BoxProps {
-    /** The id of the MultiSelectGroup. */
-    id: string;
     /** 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

@@ -14,8 +14,6 @@ export interface NewsletterSignupProps extends Omit<BoxProps, "title"> {
     /** 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. */

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

@@ -2,13 +2,11 @@ import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const notificationVariantsArray: readonly ["standard", "announcement", "warning"];
 export type NotificationVariants = typeof notificationVariantsArray[number];
-interface BaseProps {
+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
@@ -22,9 +20,9 @@ interface BaseProps {
     /** 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, BoxProps {
     /** Optional prop to control whether a `Notification` can be dismissed
      * (closed) by a user. */

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

@@ -9,8 +9,6 @@ export interface PaginationProps extends BoxProps {
      * 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