@nypl/design-system-react-components 2.0.0 → 2.1.0-rc

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

@@ -0,0 +1,65 @@
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export interface SliderProps {
+    /** Additional class name for the Slider component. */
+    className?: string;
+    /** 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;
+    /** Adds the 'disabled' state to the slider and text input(s) when true. */
+    isDisabled?: boolean;
+    /** Adds the 'invalid' state to the slider and text input(s) when true. */
+    isInvalid?: boolean;
+    /** Offers the ability to render a slider with one value or
+     * a range slider with two values. */
+    isRangeSlider?: boolean;
+    /** Adds the 'required' attribute to the input(s) when true. */
+    isRequired?: boolean;
+    /** The `Slider`'s label. In the default single slider, this will be linked to
+     * the only `TextInput` component. In the range slider, this will be linked to
+     * the first `TextInput` component. If `showLabel` is false, then this value
+     * will be set in the `Slider`'s `aria-label` attribute. */
+    labelText: string;
+    /** Maximum value allowed. */
+    max?: number;
+    /** Minimum value allowed. */
+    min?: number;
+    /** The name prop indicates into which form this component belongs to. */
+    name?: string;
+    /** Callback function that gets the value(s) selected. */
+    onChange?: (val: number | number[]) => void;
+    /** Callback function when the user is done selecting a new value. */
+    onChangeEnd?: (val: number | number[]) => void;
+    /** Offers the ability to hide the `TextInput` boxes. */
+    showBoxes?: boolean;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Offers the ability to show the label onscreen or hide it. Refer
+     * to the `labelText` property for more information. */
+    showLabel?: boolean;
+    /** Whether or not to display the "(Required)" text in the label text.
+     * True by default. */
+    showRequiredLabel?: boolean;
+    /** Offers the ability to hide the static min/max values. */
+    showValues?: boolean;
+    /** The amount to increase or decrease when using the slider thumb(s). */
+    step?: number;
+    /** The value(s) to programmatically update the Slider or RangeSlider. */
+    value?: number | number[];
+}
+/**
+ * The `Slider` component renders a singular value slider or a range slider
+ * with a min and max value. The value(s) can be updated through the slider
+ * thumb(s) or through the text input(s) elements.
+ */
+export declare const Slider: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SliderProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Slider;

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

@@ -0,0 +1,42 @@
+import { LayoutTypes } from "../../helpers/types";
+import React from "react";
+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 declare const socialMediaLinkTypeArray: string[];
+export type SocialMediaLinkType = typeof socialMediaLinkTypeArray[number];
+export interface SocialMediaLinkDataProps {
+    /** Optional override for default platform name */
+    labelText?: string;
+    /** Required. Must be one of socialMediaLinkTypeArray */
+    type: SocialMediaLinkType;
+    /** Optional override for default social media url */
+    url?: string;
+}
+export interface SocialMediaLinksProps {
+    /** Optional border: straight, circular or none. */
+    borders?: BorderType;
+    /** Optional className you can add in addition to "social-media-links." */
+    className?: string;
+    /** 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. */
+    layout?: LayoutTypes;
+    /** Optional array of social media platform types, urls, and label texts. */
+    linksData?: SocialMediaLinkDataProps[];
+    /** Optional true/false to display names of platforms along with icons.
+     *  NOTE: Labels will NOT be shown with a circular border */
+    showLabels?: boolean;
+    /** Optional size: small, medium, or large. */
+    size?: SizeType;
+}
+/**
+ * The SocialMediaLinks component renders a list of links for accessing social media sites.
+ */
+export declare const SocialMediaLinks: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SocialMediaLinksProps & React.RefAttributes<HTMLDivElement & HTMLUListElement & HTMLOListElement>>, {}>;
+export default SocialMediaLinks;

package/dist/src/components/SocialMediaLinks/SocialMediaLinksUtils.d.ts

@@ -0,0 +1,7 @@
+export declare const socialMediaDataMap: {
+    type: string;
+    iconName: string;
+    labelText: string;
+    url: string;
+}[];
+export declare function GetTableData(): any[];

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

@@ -0,0 +1,19 @@
+import React from "react";
+export declare const statusBadgeTypeArray: readonly ["low", "medium", "high"];
+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;
+    /** Level of the status badge. Defaults to `"low"`. */
+    level?: StatusBadgeTypes;
+}
+/**
+ * The `StatusBadge` component is used to display a visual badge for three
+ * different status levels.
+ */
+export declare const StatusBadge: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<StatusBadgeProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default StatusBadge;

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { ComponentImageProps } from "../Image/Image";
+export type StructuredContentImagePosition = "left" | "right" | "center";
+interface StructuredContentImageProps extends ComponentImageProps {
+    /** Optional value to control the positioning of the internal `Image` component.
+     * Defaults to `"left"`. */
+    position?: StructuredContentImagePosition;
+}
+export interface StructuredContentProps {
+    /** Optional value to set the text for the callout heading text. */
+    calloutText?: string;
+    /** Additional class name for the `StructuredContent` component. */
+    className?: string;
+    /** Optional value to set the text for the main heading text. */
+    headingText?: string;
+    /** 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. */
+    bodyContent: string | JSX.Element;
+}
+/**
+ * The `StructuredContent` component that displays a heading, callout content,
+ * an image, and body content. All are optional except for body content.
+ */
+export declare const StructuredContent: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<StructuredContentProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default StructuredContent;

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

@@ -0,0 +1,348 @@
+import { PropsWithChildren } 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;
+    }[];
+    connect: {
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        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. */
+    dataBgPageColor: string[];
+    /** Contrast and WCAG compliance data related to the color ui.bg.default when
+     * used with the current color. */
+    dataBgDefaultColor: string[];
+    /** Contrast and WCAG compliance data related to the color dark.ui.bg.page when
+     * used with the current color. */
+    dataDarkBgPageColor: string[];
+    /** Contrast and WCAG compliance data related to the color dark.ui.bg.default when
+     * used with the current color. */
+    dataDarkBgDefaultColor: string[];
+    /** Contrast and WCAG compliance data related to the color black when used
+     * with the current color. */
+    dataBlackColor: string[];
+    /** Contrast and WCAG compliance data related to the NYPL Brand primary color
+     * when used with the current color. */
+    dataBrandPrimaryColor: string[];
+    /** Contrast and WCAG compliance data related to the default color for basic
+     * text elements when used with the current color. */
+    dataDarkBodyColor?: string[];
+    /** Contrast and WCAG compliance data related to the NYPL Brand secondary color
+     * when used with the current color. */
+    dataBrandSecondaryColor: string[];
+    /** Contrast and WCAG compliance data related to the default color for
+     * heading elements when used with the current color. */
+    dataDarkHeadingColor?: string[];
+    /** Contrast and WCAG compliance data related to the color white when used
+     * with the current color. */
+    dataWhiteColor: string[];
+    /** The color to use for text in the color card. */
+    textColor: string;
+}
+export interface ColorCardProps extends DataTableProps {
+    /** The backgroundColor of the color card. */
+    backgroundColor: string;
+    /** The name of a color's javascript theme object. */
+    colorName: string;
+    /** The name of the color that the current color is based on. */
+    colorSource: string;
+}
+export declare const DataTable: (props: PropsWithChildren<DataTableProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ColorCard: (props: PropsWithChildren<ColorCardProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ColorCard;

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

@@ -0,0 +1,26 @@
+import React from "react";
+export declare const textSizesArray: readonly ["default", "body1", "body2", "caption", "tag", "mini"];
+export type TextSizes = 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;
+    /** Data to render if `li` children elements are not passed. It must be an
+     * array of strings or JSX elements. */
+    listItems?: (string | JSX.Element)[];
+    /** The style used to render the StyledList component. For its initial release,
+     * there is only one variant style which is the default, "capped". */
+    style?: "capped";
+    /** The font size of the `li` elements. */
+    textSize?: TextSizes;
+}
+/**
+ * The `StyledList` component renders an HTML list with styles that do not
+ * adhere to traditional numbered and bulleted list styles. Unlike
+ * the `List` component, `StyledList` only renders an unordered list.
+ */
+export declare const StyledList: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<StyledListProps & React.RefAttributes<HTMLDivElement & HTMLUListElement>>, {}>;
+export default StyledList;

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

@@ -0,0 +1,32 @@
+import React from "react";
+export interface TableProps {
+    /** Additional class name for the `Table` component. */
+    className?: string;
+    /** Array of string values used to populate the `Table` column headers.
+     * For improved accessibility, column headers are required. */
+    columnHeaders: string[];
+    /** Hex value to set the background color of the column headers. */
+    columnHeadersBackgroundColor?: string;
+    /** Hex value to set the text color of the column headers. */
+    columnHeadersTextColor?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** If true, a border will be displayed between each row in the `Table`
+     * component. The default value is false. */
+    showRowDividers?: boolean;
+    /** Two-dimensional array used to populate the table rows. */
+    tableData: (string | JSX.Element)[][];
+    /** Displays `Table` title element. */
+    titleText?: string;
+    /** If true, the first cell of each row in the `Table` component will be
+     * visually styled as a header. The default value is false */
+    useRowHeaders?: boolean;
+}
+/**
+ * Basic `Table` component used to organize and display tabular data in
+ * rows and columns.
+ */
+export declare const Table: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TableProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLTableElement>>, {}>;
+export default Table;

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

@@ -0,0 +1,28 @@
+import { Tab, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
+import React from "react";
+export interface TabsDataProps {
+    label: string;
+    content: string | React.ReactNode;
+}
+export interface TabsProps {
+    /** The index of the tab to display for controlled situations. */
+    defaultIndex?: number;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** The callback function invoked on every tab change event. */
+    onChange?: (index: number) => any;
+    /** Array of data to display */
+    tabsData?: TabsDataProps[];
+    /** Render a hash in the url for each tab. Only available when data is
+     * passed through the `data` props. */
+    useHash?: boolean;
+}
+/**
+ * Renders Chakra's `Tab` component with specific variants, props,
+ * and controlled styling.
+ */
+export declare const Tabs: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TabsProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export { TabList, Tab, TabPanels, TabPanel };
+export default Tabs;

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { TagSetExploreProps } from "./TagSetExplore";
+import { TagSetFilterProps } from "./TagSetFilter";
+export interface BaseTagSetProps {
+    /** Additional class for the component. */
+    className?: string;
+}
+export type TagSetTypeProps = TagSetFilterProps | TagSetExploreProps;
+export type TagSetProps = BaseTagSetProps & TagSetTypeProps;
+export declare function isFilterType(type: TagSetProps["type"]): type 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
+ * exploratory linkable elements, whereas the "filter" tags are used to display
+ * the filter values that were selected through another UI. Only "filter" tags
+ * can be dismissible.
+ *
+ * The width of a single tag will never be greater than 200px. If necessary, a
+ * tag’s label text will be truncated to keep a tag’s width at or below 200px.
+ * 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<React.ForwardRefExoticComponent<TagSetProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default TagSet;

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { IconNames } from "../Icons/Icon";
+export interface TagSetExploreDataProps {
+    /** The name of the SVG `Icon` to render before the tag label. */
+    iconName?: IconNames;
+    /** The content to display; should be a link-type component. */
+    label: JSX.Element;
+}
+export interface TagSetExploreProps {
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** 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.  This prop is not used in the "explore" variant.*/
+    onClick?: never;
+    /** The array of data to display as tags. */
+    tagSetData: TagSetExploreDataProps[];
+    /** The `TagSet` variant to render; "filter" by default. */
+    type: "explore";
+}
+/**
+ * The "explore" `TagSet` variant will always display the tags passed as data.
+ * 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) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
+export default TagSetExplore;