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

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

@@ -1,16 +1,11 @@
-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 */
-    id: string;
     /** Optional string to populate the HelperErrorText for the error state
-     * when `isInvalid` is true.
-     */
+     * when `isInvalid` is true. */
     invalidText?: HelperErrorTextType;
     /** When using the Radio as a "controlled" form element, you can specify the
      * `Radio`'s checked state using this prop. You must also pass an onChange prop.
@@ -28,10 +23,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,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 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 */
     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. */
@@ -42,9 +38,10 @@ export interface RadioGroupProps {
 }
 /**
  * `RadioGroup` is a wrapper for DS `Radio` components that render together
- * along with an optional helper text. The `name` prop is essential for this
- * form group element and is not needed for individual DS `Radio`
- * components when `RadioGroup` is used.
+ * along with an optional helper text.
+ *
+ * The `name` prop is essential for this form group element and is not needed
+ * for individual DS `Radio` components when `RadioGroup` is used.
  */
 export declare const RadioGroup: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<RadioGroupProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<RadioGroupProps>>;
 export default RadioGroup;

package/dist/src/components/RadioGroup/RadioGroupContext.d.ts

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

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
@@ -26,8 +22,6 @@ export interface SearchBarProps {
     headingText?: string | JSX.Element;
     /** The text to display below the form in a `HelperErrorText` component. */
     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;
@@ -39,13 +33,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. */
@@ -54,8 +44,8 @@ export interface SearchBarProps {
     textInputProps?: TextInputProps | undefined;
 }
 /**
- * Renders a wrapper `form` element to be used with `Select` (optional),
- * `Input`, and `Button` components together.
+ * `SearchBar` renders a wrapper `form` element containing an `Input`, `Button`,
+ * and optional `Select`.
  */
 export declare const SearchBar: ChakraComponent<React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLDivElement>>, SearchBarProps>;
 export default SearchBar;

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

@@ -1,19 +1,15 @@
-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. */
     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,18 +27,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 +42,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,19 +1,15 @@
-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;
     /** Optional numeric value to control the number of lines for heading
      * placeholder; default value is `1`. */
     headingSize?: number;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Optional value to control the aspect ratio of the image placeholder;
      * default value is `"square"`. */
     imageAspectRatio?: SkeletonLoaderImageRatios;

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

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

@@ -1,16 +1,12 @@
-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[];
     /** 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/SocialMediaLinks/SocialMediaLinks.d.ts

@@ -1,12 +1,12 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import { LayoutTypes } from "../../helpers/types";
 import React from "react";
+import { sizesArray } from "../../theme/sharedTypes";
 export declare const borderTypeArray: readonly ["none", "circular", "straight"];
 export type BorderType = typeof borderTypeArray[number];
 export declare const colorTypeArray: readonly ["link", "textDefault", "textInverse"];
 export type ColorType = typeof colorTypeArray[number];
-export declare const sizeTypeArray: readonly ["small", "medium", "large"];
-export type SizeType = typeof sizeTypeArray[number];
+export type SizeType = typeof sizesArray[number];
 type IconNames = "fileTypeGenericDoc" | "socialFacebook" | "socialInstagram" | "socialPinterest" | "socialSoundCloud" | "socialTikTok" | "socialTumblr" | "socialTwitter" | "socialX" | "socialYoutube";
 export interface SocialMediaLinkDataProps {
     /** Required. Label rendered on page is showLabel is true  */
@@ -16,13 +16,9 @@ export interface SocialMediaLinkDataProps {
     /** Required. Url to link to the platform */
     url: string;
 }
-interface BaseSocialMediaLinksProps {
-    /** Optional className you can add in addition to "social-media-links." */
-    className?: string;
+interface BaseSocialMediaLinksProps extends BoxProps {
     /** Any of three optional values that will change the color of the svg and label text (if any). */
     color?: ColorType;
-    /** ID that other components can cross-reference for accessibility purposes. */
-    id?: string;
     /** Optional desktop layout. Smaller viewports are always in a column if there are labels and
      * in a row if there are no labels. */
     layout?: LayoutTypes;

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

@@ -1,15 +1,11 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
+import { messageVariantsArray } from "../../theme/sharedTypes";
 export declare const statusBadgeFontSizeArray: readonly ["desktop.body.body1", "desktop.body.body2", "desktop.caption"];
-export declare const statusBadgeTypeArray: readonly ["informative", "negative", "neutral", "positive", "recommendation", "warning"];
-export type StatusBadgeTypes = typeof statusBadgeTypeArray[number];
-export interface StatusBadgeProps {
-    /** Additional class for the component */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+export type StatusBadgeVariants = typeof messageVariantsArray[number];
+export interface StatusBadgeProps extends BoxProps {
     /** Semantic type of the status badge. */
-    type?: StatusBadgeTypes;
+    variant?: StatusBadgeVariants;
 }
 /**
  * The `StatusBadge` component is a label that indicates status or importance.

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

@@ -1,4 +1,4 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { ComponentImageProps } from "../Image/Image";
 export type StructuredContentImagePosition = "left" | "right" | "center";
@@ -7,17 +7,13 @@ interface StructuredContentImageProps extends ComponentImageProps {
      * Defaults to `"left"`. */
     position?: StructuredContentImagePosition;
 }
-export interface StructuredContentProps {
+export interface StructuredContentProps extends BoxProps {
     /** Optional value to set the text for the callout heading text. */
     calloutText?: string | JSX.Element;
-    /** Additional class name for the `StructuredContent` component. */
-    className?: string;
     /** 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;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Object used to create and render the `Image` component. */
     imageProps?: StructuredContentImageProps;
     /** Required value to set the text for the body content. */

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

@@ -1,14 +1,8 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const textSizesArray: readonly ["default", "body1", "body2", "caption"];
 export type StyledListTextSizes = typeof textSizesArray[number];
-export interface StyledListProps {
-    /** Any child node passed to the component. */
-    children?: React.ReactNode;
-    /** A class name for the StyledList parent div. */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
+export interface StyledListProps extends Omit<BoxProps, "style"> {
     /** Data to render if `li` children elements are not passed. It must be an
      * array of strings or JSX elements. */
     listItems?: (string | JSX.Element)[];

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

@@ -1,27 +1,19 @@
 import React from "react";
-import { ChakraComponent } from "@chakra-ui/react";
-export declare const actionBackgroundColorsArray: 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 actionBackgroundColors = typeof actionBackgroundColorsArray[number];
-export declare const highlightColorsArray: string[];
+import { ChakraComponent, BoxProps } from "@chakra-ui/react";
+import { bgColorsArray, highlightColorsArray } from "../../theme/sharedTypes";
+export type actionBackgroundColors = typeof bgColorsArray[number];
 export type highlightColors = typeof highlightColorsArray[number];
-export interface SubNavProps {
+export interface SubNavProps extends BoxProps {
     /**
      * The background color to be applied to the hover and active states
      * of the SubNavLink and SubNavButton components.
      * This allows for customization of the action items.
      */
     actionBackgroundColor?: actionBackgroundColors;
-    /** Additional class name for the `SubNav` component. */
-    className?: string;
     /**
      * Custom color for SubNavLink, SubNavButton, and icons.
      */
     highlightColor?: highlightColors;
-    /**
-     * Optional unique ID for accessibility, allowing other components
-     * to reference this element.
-     */
-    id?: string;
     /**
      * Primary actions displayed on the left side of the SubNav.
      * Use SubNavButton and SubNavLink components, which mirror
@@ -37,7 +29,6 @@ export interface SubNavProps {
 }
 interface SubNavItemProps {
     id: string;
-    children: React.ReactNode;
     isOutlined?: boolean;
     isSelected?: boolean;
     screenreaderOnlyText?: string;

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

@@ -1,10 +1,6 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export declare const tableBodyTextSizesArray: readonly ["body1", "body2"];
-export type TableBodyTextSizes = typeof tableBodyTextSizesArray[number];
-export interface TableProps {
-    /** Additional class name for the `Table` component. */
-    className?: string;
+export interface TableProps extends BoxProps {
     /** Array of string values used to populate the `Table` column headers.
      * For improved accessibility, column headers are required. */
     columnHeaders: string[];
@@ -16,10 +12,6 @@ export interface TableProps {
      * Any style can be passed, but the most common use would be to pass "width"
      * and "maxWidth" to set custom column widths. */
     columnStyles?: object[];
-    /** The size of the table body text. */
-    tableTextSize?: TableBodyTextSizes;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** If true, horizontal scrolling will be enabled for the table content.  */
     isScrollable?: boolean;
     /** If true, a border will be displayed between each row in the `Table`

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

@@ -1,14 +1,12 @@
-import { Tab, TabList, TabPanels, TabPanel, ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, Tab, TabList, TabPanels, TabPanel, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export interface TabsDataProps {
     label: string;
     content: string | React.ReactNode;
 }
-export interface TabsProps {
+export interface TabsProps extends Omit<BoxProps, "onChange"> {
     /** The index of the tab to display on the initial render. */
     defaultIndex?: number;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
     /** The callback function invoked after every tab change event. The argument passed to the callback is the index of the tab just selected. */
     onChange?: (index: number) => any;
     /** Array of data to display */

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

@@ -2,15 +2,8 @@ import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { TagSetExploreProps } from "./TagSetExplore";
 import { TagSetFilterProps } from "./TagSetFilter";
-export interface BaseTagSetProps {
-    /** Additional class for the component. */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
-}
-export type TagSetTypeProps = TagSetFilterProps | TagSetExploreProps;
-export type TagSetProps = BaseTagSetProps & TagSetTypeProps;
-export declare function isFilterType(type: TagSetProps["type"]): type is "filter";
+export type TagSetProps = TagSetFilterProps | TagSetExploreProps;
+export declare function isFilterVariant(variant: TagSetProps["variant"]): variant is "filter";
 /**
  * The `TagSet` component renders a group of individual tags which have two
  * variants: "explore" and "filter". The "explore" tags are meant to be used for

package/dist/src/components/TagSet/TagSetExplore.d.ts

@@ -1,3 +1,4 @@
+import { BoxProps } from "@chakra-ui/react";
 import React from "react";
 import { IconNames } from "../Icons/Icon";
 export interface TagSetExploreDataProps {
@@ -8,7 +9,7 @@ export interface TagSetExploreDataProps {
     /** The content to display; should be a link-type component. */
     label: JSX.Element;
 }
-export interface TagSetExploreProps {
+export interface TagSetExploreProps extends BoxProps {
     /** Whether the tags should be removable. This prop is not used in the
      * "explore" variant. */
     isDismissible?: never;
@@ -21,7 +22,7 @@ export interface TagSetExploreProps {
     /** The array of data to display as tags. */
     tagSetData: TagSetExploreDataProps[];
     /** The `TagSet` variant to render; "filter" by default. */
-    type: "explore";
+    variant?: "explore";
 }
 /**
  * The "explore" `TagSet` variant will always display the tags passed as data.

package/dist/src/components/TagSet/TagSetFilter.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { BoxProps } from "@chakra-ui/react";
 import { IconNames } from "../Icons/Icon";
 export interface TagSetFilterDataProps {
     /** The name of the SVG `Icon` to render before the tag label. */
@@ -10,9 +11,7 @@ export interface TagSetFilterDataProps {
     /** Any other properties the consuming app may need for app logic filtering. */
     [key: string]: string;
 }
-export interface TagSetFilterProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
+export interface TagSetFilterProps extends Omit<BoxProps, "onClick"> {
     /** Whether the tags should be removable. */
     isDismissible?: boolean;
     /** The function to perform when a tag is clicked when `isDismissible` is true. */
@@ -20,7 +19,7 @@ export interface TagSetFilterProps {
     /** The array of data to display as tags. */
     tagSetData: TagSetFilterDataProps[];
     /** The `TagSet` variant to render; "filter" by default. */
-    type: "filter";
+    variant?: "filter";
 }
 /**
  * The "filter" `TagSet` variant will display tags that can be removed when

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

@@ -1,18 +1,14 @@
 /// <reference types="react" />
-import { ChakraComponent } from "@chakra-ui/react";
-export declare const sidebarPlacementArray: readonly ["none", "left", "right"];
-export type SidebarPlacement = typeof sidebarPlacementArray[number];
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
+export declare const templateVariantArray: readonly ["full", "narrow", "sidebarLeft", "sidebarRight"];
+export type TemplateVariant = typeof templateVariantArray[number];
 export interface TemplateProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
-    /** Renders the `TemplateSidebar` component either on the left or
-     * right side of the `TemplateMain` component. */
-    sidebar?: SidebarPlacement;
+    /** Specifies the layout and DOM structure related to the content region. */
+    variant?: TemplateVariant;
 }
-export interface TemplateMainProps {
-    /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
-     * anchor for the application skip navigation. */
-    id?: string;
+export interface TemplateChildProps extends BoxProps {
+}
+export interface TemplateMainProps extends TemplateChildProps {
 }
 /**
  * The main top-level parent component that wraps all template-related
@@ -20,43 +16,37 @@ export interface TemplateMainProps {
  */
 declare const Template: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<TemplateProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<TemplateProps>>;
 /**
- * This optional component renders its children above the main content
- * and spans edge-to-edge. It is most useful for `Breadcrumbs`, `Hero`,
- * or other banner-like components.
+ * This component renders an HTML `<header>` element.
+ */
+declare const TemplateHeader: React.FC<React.PropsWithChildren<TemplateChildProps>>;
+/**
+ * This component renders an HTML `<footer>` element.
  */
-declare const TemplateBreakout: React.FC<React.PropsWithChildren>;
+declare const TemplateFooter: React.FC<React.PropsWithChildren<TemplateChildProps>>;
 /**
- * This optional component renders content at a max width of 1280px and
- * will render below `TemplateBreakout` (if being used) and above the
- * main content and sidebar (if one exists).
+ * This component renders an HTML `<main>` element.
  */
-declare const TemplateTop: React.FC<React.PropsWithChildren>;
+declare const TemplateMain: React.FC<React.PropsWithChildren<TemplateChildProps>>;
 /**
- * This component renders an HTML `<main>` element with an id of "mainContent".
- * The "mainContent" id should be used as the consuming application's skip
- * navigation link. The component should not be used in conjunction with
- * `TemplateMainNarrow`.
+ * This optional component spans the full width of the browser window
+ * (edge-to-edge). It is most useful for `Breadcrumbs`, `Hero`, or other
+ * banner-like components.
  */
-declare const TemplateMain: React.FC<React.PropsWithChildren<TemplateMainProps>>;
+declare const TemplateBreakout: React.FC<React.PropsWithChildren<TemplateChildProps>>;
 /**
- * This component renders an HTML `<main>` element with an id of "mainContent".
- * The "mainContent" id should be used as the consuming application's skip
- * navigation link. It provides a narrower container for better readability if
- * the main content includes long text. This component is meant to be used in
- * lieu of `TemplateMain`, and should not be used in conjunction with
- * `TemplateSidebar`.
+ * This optional component will span the full width of the content area and will
+ * render content at a max width of 1280px.
  */
-declare const TemplateMainNarrow: React.FC<React.PropsWithChildren<TemplateMainProps>>;
+declare const TemplateFull: React.FC<React.PropsWithChildren<TemplateChildProps>>;
 /**
- * This optional component is used to render content in a sidebar column.
- * It must be paired with the `TemplateMain` component. An optional `sidebar`
- * prop value of "left" or "right" must be passed to the `Template` wrapper
- * to render the correct CSS styles.
+ * The width of this component is dependent on the value of the `variant` prop.
  */
-declare const TemplateSidebar: React.FC<React.PropsWithChildren>;
+declare const TemplateContent: React.FC<React.PropsWithChildren<TemplateMainProps>>;
 /**
- * This optional component renders content at a max width of 1280px and
- * will always render below the main content and sidebar (if one exists).
+ * This optional component is used to render content in a sidebar column. For
+ * proper rendering, this component must be paired with the `TemplateMain`
+ * component and the `variant` prop must be set to "sidebarLeft" or
+ * "sidebarRight".
  */
-declare const TemplateBottom: React.FC<React.PropsWithChildren>;
-export { Template, TemplateBreakout, TemplateTop, TemplateMain, TemplateMainNarrow, TemplateSidebar, TemplateBottom, };
+declare const TemplateSidebar: React.FC<React.PropsWithChildren<TemplateChildProps>>;
+export { Template, TemplateBreakout, TemplateContent, TemplateFooter, TemplateFull, TemplateHeader, TemplateMain, TemplateSidebar, };

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

@@ -1,15 +1,11 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const textSizesArray: readonly ["default", "body1", "body2", "caption", "tag", "mini", "overline1", "overline2", "subtitle1", "subtitle2"];
 export type TextSizes = typeof textSizesArray[number];
-export interface TextProps {
-    /** Additional class name to render in the `Text` component. */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
+export interface TextProps extends BoxProps {
     /** Optional prop used to show bolded text */
     isBold?: boolean;
-    /** Optional prop used to show itlicized text */
+    /** Optional prop used to show italicized text */
     isItalic?: boolean;
     /** Optional prop used to show capitalized text */
     isCapitalized?: boolean;
@@ -17,10 +13,6 @@ export interface TextProps {
     isUppercase?: boolean;
     /** Optional prop used to show lower case text */
     isLowercase?: boolean;
-    /** Optional prop used to remove default spacing */
-    noSpace?: boolean;
-    /** Optional prop used to explicitly set the ARIA role */
-    role?: string;
     /** Optional prop to control the text styling */
     size?: TextSizes;
 }