@nypl/design-system-react-components 4.0.0-alpha-rc → 4.0.0-alpha-rc3

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

@@ -1,8 +1,9 @@
 import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export type AccordionTypes = "default" | "warning" | "error";
+export declare const accordionVariantsArray: readonly ["default", "warning", "error"];
+export type AccordionVariants = typeof accordionVariantsArray[number];
 export interface AccordionDataProps {
-    accordionType?: AccordionTypes;
+    variant?: AccordionVariants;
     ariaLabel?: string;
     /** Ref to the DOM element of the AccordionButton. */
     buttonInteractionRef?: any;
@@ -10,7 +11,7 @@ export interface AccordionDataProps {
     panel: string | React.ReactNode;
 }
 export interface AccordionProps extends Omit<BoxProps, "onChange"> {
-    /** Array of data to display, and an optional accordionType */
+    /** Array of data to display, and an optional variant */
     accordionData: AccordionDataProps[];
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;

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

@@ -1,7 +1,7 @@
 import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { messageVariantsArray, bgColorsArray, highlightColorsArray } from "../../theme/sharedTypes";
-export type BannerTypes = typeof messageVariantsArray[number];
+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"> {
@@ -25,7 +25,7 @@ export interface BannerProps extends Omit<BoxProps, "content"> {
      * (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

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

@@ -1,7 +1,7 @@
 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;
@@ -10,8 +10,8 @@ export interface BreadcrumbsDataProps {
 export interface BreadcrumbProps extends BoxProps {
     /** Breadcrumb links as an array */
     breadcrumbsData: BreadcrumbsDataProps[];
-    /** Used to control how the `Hero` component will be rendered. */
-    breadcrumbsType?: BreadcrumbsTypes;
+    /** 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 */

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

@@ -2,13 +2,14 @@ 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 buttonTypesArray: readonly ["primary", "secondary", "text", "callout", "pill", "noBrand"];
+export declare const buttonSizesArray: readonly ["small", "medium", "large"];
+export declare const buttonVariantsArray: readonly ["primary", "secondary", "text", "callout", "pill", "noBrand"];
 export type ButtonElementType = typeof buttonElementTypeArray[number];
+export type ButtonVariants = typeof buttonVariantsArray[number];
 export type ButtonSizes = typeof sizesArray[number];
-export type ButtonTypes = typeof buttonTypesArray[number];
 export interface ButtonProps extends Pick<BoxProps, keyof ChakraProps>, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
-    /** The button variation to render based on the `ButtonTypes` type. */
-    buttonType?: ButtonTypes;
+    /** 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. */

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

@@ -1,8 +1,8 @@
 import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { ComponentImageProps } from "../Image/Image";
-export declare const heroTypesArray: readonly ["primary", "tertiary", "campaign"];
-export type HeroTypes = typeof heroTypesArray[number];
+export declare const heroVariantsArray: readonly ["primary", "tertiary", "campaign"];
+export type HeroVariants = typeof heroVariantsArray[number];
 export interface HeroImageProps extends Omit<BoxProps, "onError">, Pick<ComponentImageProps, "alt" | "fallbackSrc" | "id" | "src" | "onError" | "component"> {
 }
 export interface HeroProps {
@@ -13,21 +13,21 @@ export interface HeroProps {
      */
     backdropBackgroundColor?: string;
     /** Optional hex color value used to override the default background
-     * color for a given `Hero` variation.
-     * Note: not all `Hero` variations utilize this prop. */
+     * color for a given `Hero` variant.
+     * Note: not all `Hero` variants utilize this prop. */
     backgroundColor?: string;
     /** Optional path to an image that will be used as a background image for the
      * `Hero` component.
-     * Note: not all `Hero` variations utilize this prop. */
+     * Note: not all `Hero` variants utilize this prop. */
     backgroundImageSrc?: string;
     /** Optional hex color value used to override the default text color for a
      * given `Hero` variation.
-     * Note: not all `Hero` variations utilize this prop. */
+     * Note: not all `Hero` variants utilize this prop. */
     foregroundColor?: string;
     /** Optional heading element. */
     heading?: JSX.Element;
     /** Used to control how the `Hero` component will be rendered. */
-    heroType?: HeroTypes;
+    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`

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

@@ -1,12 +1,12 @@
 import { BoxProps, ChakraProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-import { iconAlignArray, iconColorsArray, iconNamesArray, iconRotationsArray, iconSizesArray, iconTypesArray } from "./iconVariables";
+import { iconAlignArray, iconColorsArray, iconNamesArray, iconRotationsArray, iconSizesArray, iconVariantsArray } from "./iconVariables";
 export type IconAlign = typeof iconAlignArray[number];
 export type IconColors = typeof iconColorsArray[number];
 export type IconNames = typeof iconNamesArray[number];
 export type IconRotations = typeof iconRotationsArray[number];
 export type IconSizes = typeof iconSizesArray[number];
-export type IconTypes = typeof iconTypesArray[number];
+export type IconVariants = typeof iconVariantsArray[number];
 export interface IconProps extends Pick<BoxProps, "className" | keyof ChakraProps> {
     /** Aligns the icon. */
     align?: IconAlign;
@@ -28,7 +28,7 @@ export interface IconProps extends Pick<BoxProps, "className" | keyof ChakraProp
      * visible but is needed for screenreaders to describe the graphic. */
     title?: string;
     /** FOR INTERNAL DS USE ONLY: the icon variant to display. */
-    type?: IconTypes;
+    variant?: IconVariants;
 }
 /**
  * Renders SVG-based icons.

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

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

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

@@ -1,6 +1,6 @@
 export declare const iconAlignArray: readonly ["left", "right", "none"];
 export declare const iconColorsArray: readonly ["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 iconTypesArray: readonly ["default", "breadcrumbs"];
+export declare const iconVariantsArray: readonly ["default", "breadcrumbs"];

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

@@ -1,7 +1,7 @@
 import { BoxProps, ChakraComponent, ChakraProps } from "@chakra-ui/react";
 import React, { AnchorHTMLAttributes } from "react";
-export declare const linkTypesArray: readonly ["action", "backwards", "buttonPrimary", "buttonSecondary", "buttonPill", "buttonCallout", "buttonNoBrand", "buttonDisabled", "default", "external", "forwards", "standalone"];
-export type LinkTypes = typeof linkTypesArray[number];
+export declare const linkVariantsArray: readonly ["action", "backwards", "buttonPrimary", "buttonSecondary", "buttonPill", "buttonCallout", "buttonNoBrand", "buttonDisabled", "default", "external", "forwards", "standalone"];
+export type LinkVariants = typeof linkVariantsArray[number];
 export interface LinkProps extends Pick<BoxProps, "as" | keyof ChakraProps>, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color"> {
     /** Used to include or remove visited state styles. Default is true. */
     hasVisitedState?: boolean;
@@ -15,7 +15,7 @@ export interface LinkProps extends Pick<BoxProps, "as" | keyof ChakraProps>, Omi
     screenreaderOnlyText?: string;
     /** Controls the link's styles based on the value: action, backwards, default,
      * external, forwards, standalone, and all "button" types. */
-    type?: LinkTypes;
+    variant?: LinkVariants;
 }
 /**
  * A component that renders an anchor element with added styling

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

@@ -1,7 +1,7 @@
 import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export declare const listTypesArray: readonly ["ol", "ul", "dl"];
-export type ListTypes = typeof listTypesArray[number];
+export declare const listVariantsArray: readonly ["ol", "ul", "dl"];
+export type ListVariants = typeof listVariantsArray[number];
 export interface DescriptionProps {
     term: string;
     description: string | JSX.Element;
@@ -27,7 +27,7 @@ export interface ListProps extends Omit<BoxProps, "title"> {
      * to Description Lists and will render above the list. */
     title?: string | JSX.Element;
     /** The type of list: "ol", "ul", or "dl". "ul" by default. */
-    type: ListTypes;
+    variant: ListVariants;
 }
 /**
  * A component that renders list item `li` elements or description item `dt`
@@ -39,9 +39,9 @@ export declare const List: ChakraComponent<React.ForwardRefExoticComponent<React
  * Checks for `li` elements and consoles a warning if the
  * children are different HTML elements.
  */
-export declare const checkListChildrenError: ({ children, listType, componentName, }: {
+export declare const checkListChildrenError: ({ children, variant, componentName, }: {
     children: React.ReactNode;
-    listType?: ListTypes;
+    variant?: ListVariants;
     componentName?: string;
 }) => void;
 export default List;

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

@@ -16,7 +16,7 @@ export interface ConfirmationModalProps {
     onCancel: () => void;
     onConfirm: () => void;
     /** The `Modal` variant to render. */
-    type: "confirmation";
+    variant: "confirmation";
     /** The label for the close button. This prop is used for the
      * "cancel" button in the confirmation variant. */
     closeButtonLabel?: string;
@@ -27,7 +27,7 @@ export interface DefaultModalProps {
     closeButtonLabel?: string;
     onClose?: () => void;
     /** The `Modal` variant to render. */
-    type: "default";
+    variant: "default";
     /** The label for the confirm button. This prop is not used
      * in the default variant. */
     confirmButtonLabel?: never;
@@ -45,7 +45,7 @@ export interface ModalProps {
      * `bodyContent`, `headingText`, `isOpen`, and the modal type props. */
     modalProps: BaseModalProps;
 }
-export declare function isDefaultType(type: BaseModalProps["type"]): type is "default";
+export declare function isDefaultVariant(variant: BaseModalProps["variant"]): variant is "default";
 export declare const BaseModal: ChakraComponent<React.FunctionComponent<BaseModalProps>, BaseModalProps>;
 /**
  * The `ModalTrigger` component renders a button that you click to open the

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

@@ -1,7 +1,7 @@
 import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export declare const notificationTypesArray: readonly ["standard", "announcement", "warning"];
-export type NotificationTypes = typeof notificationTypesArray[number];
+export declare const notificationVariantsArray: readonly ["standard", "announcement", "warning"];
+export type NotificationVariants = typeof notificationVariantsArray[number];
 interface BaseProps {
     /** Optional prop to control text alignment in `NotificationContent` */
     alignText?: boolean;
@@ -18,7 +18,7 @@ interface BaseProps {
     notificationHeading?: string | JSX.Element;
     /** Optional prop to control the coloring of the `Notification` text and the
      * visibility of an applicable icon. */
-    notificationType?: NotificationTypes;
+    variant?: NotificationVariants;
     /** Prop to display the `Notification` icon. Defaults to `true`. */
     showIcon?: boolean;
 }

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

@@ -1,9 +1,9 @@
 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 Pick<BoxProps, keyof ChakraProps>, Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "color"> {
     /** The initial value of an uncontrolled component */
@@ -35,7 +35,7 @@ export interface SelectProps extends Pick<BoxProps, keyof ChakraProps>, Omit<Rea
      * 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

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

@@ -2,12 +2,12 @@ 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 type StatusBadgeTypes = typeof messageVariantsArray[number];
+export type StatusBadgeVariants = typeof messageVariantsArray[number];
 export interface StatusBadgeProps extends BoxProps {
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** 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/Table/Table.d.ts

@@ -1,7 +1,5 @@
 import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export declare const tableBodyTextSizesArray: readonly ["body1", "body2", "caption"];
-export type TableBodyTextSizes = typeof tableBodyTextSizesArray[number];
 export interface TableProps extends BoxProps {
     /** Array of string values used to populate the `Table` column headers.
      * For improved accessibility, column headers are required. */
@@ -14,10 +12,6 @@ export interface TableProps extends BoxProps {
      * 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/TagSet/TagSet.d.ts

@@ -8,7 +8,7 @@ export interface BaseTagSetProps extends BoxProps {
 }
 export type TagSetTypeProps = TagSetFilterProps | TagSetExploreProps;
 export type TagSetProps = BaseTagSetProps & TagSetTypeProps;
-export declare function isFilterType(type: TagSetProps["type"]): type is "filter";
+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

@@ -21,7 +21,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

@@ -20,7 +20,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 { BoxProps, ChakraComponent } from "@chakra-ui/react";
-export declare const sidebarPlacementArray: readonly ["none", "left", "right"];
-export type SidebarPlacement = typeof sidebarPlacementArray[number];
-export interface TemplateProps extends BoxProps {
-    /** 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;
+export declare const templateVariantArray: readonly ["full", "narrow", "sidebarLeft", "sidebarRight"];
+export type TemplateVariant = typeof templateVariantArray[number];
+export interface TemplateProps {
+    /** Specifies the layout and DOM structure related to the content region. */
+    variant?: TemplateVariant;
 }
-export interface TemplateMainProps extends BoxProps {
-    /** 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 extends BoxProps {
  */
 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<BoxProps>>;
+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<BoxProps>>;
+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<BoxProps>>;
+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<BoxProps>>;
-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/TextInput/TextInput.d.ts

@@ -59,7 +59,7 @@ export interface InputProps extends TextInputPropsWithHTML {
      * True by default. */
     showRequiredLabel?: boolean;
     /** FOR INTERNAL DS USE ONLY: the input variant to display. */
-    textInputType?: TextInputVariants;
+    textInputVariant?: TextInputVariants;
 }
 /**
  * The type used for `ref`s. We want to extend both `input` and `textarea`

package/dist/src/index.d.ts

@@ -1,17 +1,17 @@
 export { Box, Center, chakra, Circle, ColorModeScript, cookieStorageManager, cookieStorageManagerSSR, FocusLock, Flex, Grid, GridItem, HStack, localStorageManager, Spacer, Square, Stack, useColorMode, useColorModeValue, useStyleConfig, useMediaQuery, useMultiStyleConfig, VStack, } from "@chakra-ui/react";
 export { default as DSProvider } from "./theme/provider";
 export { default as Accordion } from "./components/Accordion/Accordion";
-export type { AccordionTypes, AccordionDataProps, } from "./components/Accordion/Accordion";
+export type { AccordionVariants, AccordionDataProps, } from "./components/Accordion/Accordion";
 export { default as AlphabetFilter } from "./components/AlphabetFilter/AlphabetFilter";
 export type { AlphabetFilterProps } from "./components/AlphabetFilter/AlphabetFilter";
 export { default as AudioPlayer } from "./components/AudioPlayer/AudioPlayer";
 export type { AudioType, AudioPlayerProps, } from "./components/AudioPlayer/AudioPlayer";
 export { default as Banner } from "./components/Banner/Banner";
-export type { BannerTypes, BannerBgColors, BannerHighlightColors, BannerProps, } from "./components/Banner/Banner";
+export type { BannerVariants, BannerBgColors, BannerHighlightColors, BannerProps, } from "./components/Banner/Banner";
 export { default as Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";
-export type { BreadcrumbsTypes, BreadcrumbProps, BreadcrumbsDataProps, } from "./components/Breadcrumbs/Breadcrumbs";
+export type { BreadcrumbsVariants, BreadcrumbProps, BreadcrumbsDataProps, } from "./components/Breadcrumbs/Breadcrumbs";
 export { default as Button } from "./components/Button/Button";
-export type { ButtonElementType, ButtonProps, ButtonSizes, ButtonTypes, } from "./components/Button/Button";
+export type { ButtonElementType, ButtonProps, ButtonSizes, ButtonVariants, } from "./components/Button/Button";
 export { default as ButtonGroup } from "./components/ButtonGroup/ButtonGroup";
 export type { ButtonGroupProps } from "./components/ButtonGroup/ButtonGroup";
 export { default as Card, CardActions, CardContent, CardHeading, } from "./components/Card/Card";
@@ -40,20 +40,20 @@ export type { HeadingLevels, HeadingProps, HeadingSizes, } from "./components/He
 export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";
 export type { HelperErrorTextProps } from "./components/HelperErrorText/HelperErrorText";
 export { default as Hero } from "./components/Hero/Hero";
-export type { HeroProps, HeroTypes } from "./components/Hero/Hero";
+export type { HeroProps, HeroVariants } from "./components/Hero/Hero";
 export { default as HorizontalRule } from "./components/HorizontalRule/HorizontalRule";
 export type { HorizontalRuleProps } from "./components/HorizontalRule/HorizontalRule";
 export { default as Icon } from "./components/Icons/Icon";
-export type { IconAlign, IconColors, IconNames, IconRotations, IconSizes, IconTypes, IconProps, } from "./components/Icons/Icon";
+export type { IconAlign, IconColors, IconNames, IconRotations, IconSizes, IconVariants, IconProps, } from "./components/Icons/Icon";
 export { default as Image } from "./components/Image/Image";
 export type { ComponentImageProps, ImageProps, ImageRatios, ImageSizes, ImageTypes, } from "./components/Image/Image";
 export { default as Label } from "./components/Label/Label";
 export type { LabelProps } from "./components/Label/Label";
 export type { DimensionTypes, LayoutTypes, SectionTypes, } from "./helpers/types";
 export { default as Link } from "./components/Link/Link";
-export type { LinkProps, LinkTypes } from "./components/Link/Link";
+export type { LinkProps, LinkVariants } from "./components/Link/Link";
 export { default as List } from "./components/List/List";
-export type { DescriptionProps, ListProps, ListTypes, } from "./components/List/List";
+export type { DescriptionProps, ListProps, ListVariants, } from "./components/List/List";
 export { default as Logo } from "./components/Logo/Logo";
 export type { LogoNames, LogoProps, LogoSizes } from "./components/Logo/Logo";
 export { default as MatchMedia } from "../src/__tests__/mediaMatchMock";
@@ -68,7 +68,7 @@ export type { MultiSelectGroupProps } from "./components/MultiSelectGroup/MultiS
 export { default as NewsletterSignup } from "./components/NewsletterSignup/NewsletterSignup";
 export type { HighlightColorTypes, NewsletterSignupProps, NewsletterSignupViewType, } from "./components/NewsletterSignup/NewsletterSignup";
 export { default as Notification } from "./components/Notification/Notification";
-export type { NotificationProps, NotificationTypes, } from "./components/Notification/Notification";
+export type { NotificationProps, NotificationVariants, } from "./components/Notification/Notification";
 export { default as Pagination } from "./components/Pagination/Pagination";
 export type { PaginationProps } from "./components/Pagination/Pagination";
 export { default as ProgressIndicator } from "./components/ProgressIndicator/ProgressIndicator";
@@ -80,7 +80,7 @@ export type { RadioGroupProps } from "./components/RadioGroup/RadioGroup";
 export { default as SearchBar } from "./components/SearchBar/SearchBar";
 export type { SearchBarProps } from "./components/SearchBar/SearchBar";
 export { default as Select } from "./components/Select/Select";
-export type { LabelPositions, SelectProps, SelectTypes, } from "./components/Select/Select";
+export type { LabelPositions, SelectProps, SelectVariants, } from "./components/Select/Select";
 export { default as SimpleGrid } from "./components/Grid/SimpleGrid";
 export type { GridGaps, SimpleGridProps } from "./components/Grid/SimpleGrid";
 export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonLoader";
@@ -92,21 +92,21 @@ export type { SliderProps } from "./components/Slider/Slider";
 export { default as SocialMediaLinks } from "./components/SocialMediaLinks/SocialMediaLinks";
 export type { SocialMediaLinkDataProps } from "./components/SocialMediaLinks/SocialMediaLinks";
 export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
-export type { StatusBadgeProps, StatusBadgeTypes, } from "./components/StatusBadge/StatusBadge";
+export type { StatusBadgeProps, StatusBadgeVariants, } from "./components/StatusBadge/StatusBadge";
 export { default as StructuredContent } from "./components/StructuredContent/StructuredContent";
 export type { StructuredContentImagePosition, StructuredContentProps, } from "./components/StructuredContent/StructuredContent";
 export { default as StyledList } from "./components/StyledList/StyledList";
 export type { StyledListProps, StyledListTextSizes, } from "./components/StyledList/StyledList";
 export { default as SubNav, SubNavButton, SubNavLink, } from "./components/SubNav/SubNav";
 export { default as Table } from "./components/Table/Table";
-export type { TableBodyTextSizes, TableProps } from "./components/Table/Table";
+export type { TableProps } from "./components/Table/Table";
 export { default as Tabs, TabList, Tab, TabPanels, TabPanel, } from "./components/Tabs/Tabs";
 export type { TabsDataProps, TabsProps } from "./components/Tabs/Tabs";
 export { default as TagSet } from "./components/TagSet/TagSet";
 export type { TagSetProps, TagSetTypeProps } from "./components/TagSet/TagSet";
 export type { TagSetExploreDataProps, TagSetExploreProps, } from "./components/TagSet/TagSetExplore";
 export type { TagSetFilterDataProps, TagSetFilterProps, } from "./components/TagSet/TagSetFilter";
-export { Template, TemplateBreakout, TemplateTop, TemplateMain, TemplateMainNarrow, TemplateSidebar, TemplateBottom, } from "./components/Template/Template";
+export { Template, TemplateBreakout, TemplateMain, TemplateSidebar, } from "./components/Template/Template";
 export { default as Text } from "./components/Text/Text";
 export type { TextProps, TextSizes } from "./components/Text/Text";
 export { default as TextInput } from "./components/TextInput/TextInput";

package/dist/src/theme/components/notification.d.ts

@@ -1,13 +1,13 @@
-import { NotificationTypes } from "../../components/Notification/Notification";
+import { NotificationVariants } from "../../components/Notification/Notification";
 import { StyleFunctionProps } from "@chakra-ui/system";
 interface NotificationBaseStyle extends StyleFunctionProps {
     isCentered: boolean;
     notificationHeading: string;
-    notificationType: NotificationTypes;
+    variant: NotificationVariants;
     showIcon: boolean;
 }
 declare const Notification: {
-    baseStyle?: ({ isCentered, notificationHeading, notificationType, }: NotificationBaseStyle) => {
+    baseStyle?: ({ isCentered, notificationHeading, variant }: NotificationBaseStyle) => {
         bg: string;
         display: string;
         fontSize: string;