@nypl/design-system-react-components 1.6.0-vite-rc → 1.6.0-vite-rc-3

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

@@ -1,54 +1,157 @@
+/// <reference types="react" />
 declare const _default: {
-    appleAppStoreBlack: string;
-    appleAppStoreWhite: string;
-    bplBlack: string;
-    bplWhite: string;
-    cleverBadgeColor: string;
-    cleverColor: string;
-    cleverWhite: string;
-    digitalCollectionsBlack: string;
-    digitalCollectionsWhite: string;
-    firstbookColor: string;
-    firstbookColorNegative: string;
-    googlePlayBlack: string;
-    lpaBlack: string;
-    lpaColor: string;
-    lpaWhite: string;
-    mlnBlack: string;
-    mlnColor: string;
-    mlnWhite: string;
-    nycdoeBlack: string;
-    nycdoeColor: string;
-    nycdoeWhite: string;
-    nyplFullBlack: string;
-    nyplFullWhite: string;
-    nyplLionBlack: string;
-    nyplLionWhite: string;
-    nyplTextBlack: string;
-    nyplTextWhite: string;
-    openebooksColor: string;
-    openebooksNegative: string;
-    openebooksWithTextColor: string;
-    openebooksWithTextNegative: string;
-    qplAltBlack: string;
-    qplAltWhite: string;
-    qplBlack: string;
-    qplColor: string;
-    qplWhite: string;
-    reservoirIconColor: string;
-    reservoirVerticalColor: string;
-    schomburgBlack: string;
-    schomburgCircleBlack: string;
-    schomburgCircleColor: string;
-    schomburgCircleWhite: string;
-    schomburgColor: string;
-    schomburgWhite: string;
-    simplyeBlack: string;
-    simplyeWhite: string;
-    simplyeColor: string;
-    snflBlack: string;
-    snflWhite: string;
-    treasuresColor: string;
-    treasuresColorNegative: string;
+    appleAppStoreBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    appleAppStoreWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    bplBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    bplWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    cleverBadgeColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    cleverColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    cleverWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    digitalCollectionsBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    digitalCollectionsWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    firstbookColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    firstbookColorNegative: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    googlePlayBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    lpaBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    lpaColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    lpaWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    mlnBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    mlnColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    mlnWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nycdoeBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nycdoeColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nycdoeWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nyplFullBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nyplFullWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nyplLionBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nyplLionWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nyplTextBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nyplTextWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    openebooksColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    openebooksNegative: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    openebooksWithTextColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    openebooksWithTextNegative: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    qplAltBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    qplAltWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    qplBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    qplColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    qplWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    reservoirIconColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    reservoirVerticalColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    schomburgBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    schomburgCircleBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    schomburgCircleColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    schomburgCircleWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    schomburgColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    schomburgWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    simplyeBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    simplyeWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    simplyeColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    snflBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    snflWhite: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    treasuresColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    treasuresColorNegative: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
 };
 export default _default;

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

@@ -30,6 +30,6 @@ export declare const ModalTrigger: import("@chakra-ui/react").ChakraComponent<Re
 export declare function useModal(): {
     onClose: () => void;
     onOpen: () => void;
-    Modal: import("@chakra-ui/react").ChakraComponent<({ bodyContent, closeButtonLabel, headingText, id, ...rest }: React.PropsWithChildren<BaseModalProps>) => JSX.Element, {}>;
+    Modal: import("@chakra-ui/react").ChakraComponent<({ bodyContent, closeButtonLabel, headingText, id, ...rest }: React.PropsWithChildren<BaseModalProps>) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
 };
 export {};

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

@@ -4,7 +4,8 @@ export interface MultiSelectItem {
     name: string;
     children?: MultiSelectItem[];
 }
-export type MultiSelectWidths = "default" | "fitContent" | "full";
+export declare const multiSelectWidthsArray: readonly ["default", "fitContent", "full"];
+export type MultiSelectWidths = typeof multiSelectWidthsArray[number];
 export interface SelectedItems {
     [name: string]: {
         items: string[];

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

@@ -5,7 +5,9 @@ export interface MultiSelectGroupProps {
     children: React.ReactNode;
     /** Additional className to use. */
     className?: string;
+    /** 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. */
     layout?: LayoutTypes;

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

@@ -1,5 +1,6 @@
 import React from "react";
-export type NotificationTypes = "standard" | "announcement" | "warning";
+export declare const notificationTypesArray: readonly ["standard", "announcement", "warning"];
+export type NotificationTypes = typeof notificationTypesArray[number];
 interface BaseProps {
     /** Optional prop to control text alignment in `NotificationContent` */
     alignText?: boolean;
@@ -38,11 +39,11 @@ export interface NotificationProps extends BasePropsWithoutAlignText {
 /**
  * NotificationHeading child-component.
  */
-export declare const NotificationHeading: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<NotificationHeadingProps>) => JSX.Element, {}>;
+export declare const NotificationHeading: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<NotificationHeadingProps>) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
 /**
  * NotificationContent child-component.
  */
-export declare const NotificationContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<NotificationContentProps>) => JSX.Element, {}>;
+export declare const NotificationContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<NotificationContentProps>) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
 /**
  * Component used to present users with three different levels of notifications:
  * standard, announcement, and warning.

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

@@ -1,6 +1,8 @@
 import React from "react";
-export type ProgressIndicatorSizes = "default" | "small";
-export type ProgressIndicatorTypes = "circular" | "linear";
+export declare const progressIndicatorSizesArray: readonly ["default", "small"];
+export declare const progressIndicatorTypesArray: readonly ["circular", "linear"];
+export type ProgressIndicatorSizes = typeof progressIndicatorSizesArray[number];
+export type ProgressIndicatorTypes = typeof progressIndicatorTypesArray[number];
 export interface ProgressIndicatorProps {
     /** The darkMode prop is deprecated and should no longer be used. */
     darkMode?: boolean;

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

@@ -1,7 +1,9 @@
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export type SelectTypes = "default" | "searchbar";
-export type LabelPositions = "default" | "inline";
+export declare const selectTypesArray: string[];
+export declare const labelPositionsArray: string[];
+export type SelectTypes = typeof selectTypesArray[number];
+export type LabelPositions = typeof labelPositionsArray[number];
 export interface SelectProps {
     /** A class name for the `div` parent element. */
     className?: string;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { LayoutTypes } from "../../helpers/types";
-export type SkeletonLoaderImageRatios = "landscape" | "portrait" | "square";
+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;

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

@@ -1,5 +1,6 @@
 import React from "react";
-export type StatusBadgeTypes = "low" | "medium" | "high";
+export declare const statusBadgeTypeArray: readonly ["low", "medium", "high"];
+export type StatusBadgeTypes = typeof statusBadgeTypeArray[number];
 export interface StatusBadgeProps {
     /** Additional class for the component */
     className?: string;

package/dist/src/components/StyleGuide/ColorCard.d.ts

@@ -1,4 +1,300 @@
 import * as React from "react";
+export declare const colorContrastData: {
+    brand: {
+        primary: {
+            dataBlackColor: string[];
+            dataWhiteColor: string[];
+            textColor: string;
+        };
+        secondary: {
+            dataBlackColor: string[];
+            dataWhiteColor: string[];
+            textColor: string;
+        };
+    };
+    ui: {
+        black: {
+            dataBlackColor: string[];
+            dataWhiteColor: string[];
+            textColor: string;
+        };
+        gray: {
+            xxxxDark: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            xxxDark: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            xxDark: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            xDark: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            dark: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            semiDark: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            medium: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            semiMedium: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            lightCool: {
+                dataBlackColor: string[];
+                dataWhiteColor: string[];
+                textColor: string;
+            };
+            xLightCool: {
+                dataBlackColor: string[];
+                dataWhiteColor: string[];
+                textColor: string;
+            };
+            xxLightCool: {
+                dataBlackColor: string[];
+                dataWhiteColor: string[];
+                textColor: string;
+            };
+            lightWarm: {
+                dataBlackColor: string[];
+                dataWhiteColor: string[];
+                textColor: string;
+            };
+            xLightWarm: {
+                dataBlackColor: string[];
+                dataWhiteColor: string[];
+                textColor: string;
+            };
+        };
+        white: {
+            dataBlackColor: string[];
+            dataWhiteColor: string[];
+            textColor: string;
+        };
+    };
+    dark: {
+        ui: {
+            gray: {
+                xxDark: {
+                    dataHeadingColor: string[];
+                    dataBodyColor: string[];
+                };
+                xDark: {
+                    dataHeadingColor: string[];
+                    dataBodyColor: string[];
+                };
+            };
+        };
+    };
+};
+export declare const cssVars: {
+    brand: {
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    }[];
+    blogs: {
+        colorSource: string;
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        textColor: string;
+    }[];
+    booksAndMore: {
+        colorSource: string;
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    }[];
+    education: {
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    }[];
+    locations: {
+        colorSource: string;
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    }[];
+    research: {
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    }[];
+    researchLibraries: ({
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+        colorSource?: undefined;
+    } | {
+        colorSource: string;
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    })[];
+    whatsOn: ({
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+        colorSource?: undefined;
+    } | {
+        colorSource: string;
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    })[];
+    ui: ({
+        colorSource: string;
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        textColor: string;
+        dataBgPageColor?: undefined;
+        dataBgDefaultColor?: undefined;
+        dataBrandPrimaryColor?: undefined;
+        dataBrandSecondaryColor?: undefined;
+    } | {
+        colorSource: string;
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        dataBgPageColor: string[];
+        dataBgDefaultColor: string[];
+        textColor: string;
+        dataBrandPrimaryColor?: undefined;
+        dataBrandSecondaryColor?: undefined;
+    } | {
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        dataBgPageColor: any[];
+        dataBgDefaultColor: any[];
+        textColor: string;
+        colorSource?: undefined;
+        dataBrandPrimaryColor?: undefined;
+        dataBrandSecondaryColor?: undefined;
+    } | {
+        colorSource: string;
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        dataBrandPrimaryColor: any[];
+        dataBrandSecondaryColor: any[];
+        dataBgPageColor: string[];
+        dataBgDefaultColor: any[];
+        textColor: string;
+    })[];
+    grayscaleRoot: {
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    }[];
+    grayscaleCool: {
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        textColor: string;
+    }[];
+    grayscaleWarm: {
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    }[];
+    dark: ({
+        colorSource: string;
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        dataHeadingColor: string[];
+        dataBodyColor: string[];
+        textColor: string;
+        dataDarkBgPageColor?: undefined;
+        dataDarkBgDefaultColor?: undefined;
+        dataBrandPrimaryColor?: undefined;
+        dataBrandSecondaryColor?: undefined;
+    } | {
+        colorSource: string;
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        dataDarkBgPageColor: any[];
+        dataDarkBgDefaultColor: any[];
+        textColor: string;
+        dataHeadingColor?: undefined;
+        dataBodyColor?: undefined;
+        dataBrandPrimaryColor?: undefined;
+        dataBrandSecondaryColor?: undefined;
+    } | {
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        dataDarkBgPageColor: any[];
+        dataDarkBgDefaultColor: any[];
+        textColor: string;
+        colorSource?: undefined;
+        dataHeadingColor?: undefined;
+        dataBodyColor?: undefined;
+        dataBrandPrimaryColor?: undefined;
+        dataBrandSecondaryColor?: undefined;
+    } | {
+        name: string;
+        dataDarkBgPageColor: string[];
+        dataDarkBgDefaultColor: string[];
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        dataHeadingColor: string[];
+        dataBodyColor: string[];
+        textColor: string;
+        colorSource?: undefined;
+        dataBrandPrimaryColor?: undefined;
+        dataBrandSecondaryColor?: undefined;
+    } | {
+        colorSource: string;
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        dataBrandPrimaryColor: any[];
+        dataBrandSecondaryColor: any[];
+        dataDarkBgPageColor: any[];
+        dataDarkBgDefaultColor: any[];
+        textColor: string;
+        dataHeadingColor?: undefined;
+        dataBodyColor?: undefined;
+    })[];
+};
+export declare const makeColorCard: (data: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const getColorCards: (category: any) => any[];
 export interface DataTableProps {
     /** Contrast and WCAG compliance data related to the color ui.bg.page when
      * used with the current color. */
@@ -41,6 +337,6 @@ export interface ColorCardProps extends DataTableProps {
     /** The name of the color that the current color is based on. */
     colorSource: string;
 }
-export declare const DataTable: (props: React.PropsWithChildren<DataTableProps>) => JSX.Element;
-export declare const ColorCard: (props: React.PropsWithChildren<ColorCardProps>) => JSX.Element;
+export declare const DataTable: (props: React.PropsWithChildren<DataTableProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ColorCard: (props: React.PropsWithChildren<ColorCardProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default ColorCard;

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

@@ -1,4 +1,3 @@
-import { As } from "@chakra-ui/react";
 import React from "react";
 import { TagSetExploreProps } from "./TagSetExplore";
 import { TagSetFilterProps } from "./TagSetFilter";
@@ -9,14 +8,6 @@ export interface BaseTagSetProps {
 export type TagSetTypeProps = TagSetFilterProps | TagSetExploreProps;
 export type TagSetProps = BaseTagSetProps & TagSetTypeProps;
 export declare function isFilterType(type: TagSetProps["type"]): type is "filter";
-/**
- * This helper component wrapper renders a DS `Tooltip` component if the text is
- * long or a React fragment. This assumes that the `label` prop is a rather
- * simple single root JSX element, such as `<Link ...>....</Link>`.
- */
-export declare const TooltipWrapper: ({ label, children, }: React.PropsWithChildren<{
-    label: any;
-}>) => JSX.Element;
 /**
  * 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
@@ -29,5 +20,5 @@ export declare const TooltipWrapper: ({ label, children, }: React.PropsWithChild
  * The full label text will be automatically revealed when the tag is hovered
  * with a DS `Tooltip` component.
  */
-export declare const TagSet: import("@chakra-ui/react").ChakraComponent<As<TagSetProps>, TagSetProps>;
+export declare const TagSet: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TagSetProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default TagSet;

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

@@ -9,9 +9,10 @@ export interface TagSetExploreDataProps {
 export interface TagSetExploreProps {
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
-    /** Whether the tags should be removable. */
+    /** Whether the tags should be removable. This prop is not used in the "explore" variant. */
     isDismissible?: never;
-    /** The function to perform when a tag is clicked when `isDismissible` is true. */
+    /** The function to perform when a tag is clicked when `isDismissible` is
+     * true.  This prop is not used in the "explore" variant.*/
     onClick?: never;
     /** The array of data to display as tags. */
     tagSetData: TagSetExploreDataProps[];
@@ -23,5 +24,5 @@ export interface TagSetExploreProps {
  * The `label` property in the `tagSetData` prop should be set to a link-type
  * JSX component for linking to specific content.
  */
-export declare const TagSetExplore: import("@chakra-ui/react").ChakraComponent<(props: TagSetExploreProps) => JSX.Element, {}>;
+export declare const TagSetExplore: import("@chakra-ui/react").ChakraComponent<(props: TagSetExploreProps) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
 export default TagSetExplore;