@nypl/design-system-react-components 2.0.0 → 2.0.1

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

@@ -0,0 +1,42 @@
+import React from "react";
+export declare const headingSizesArray: readonly ["display1", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "primary", "secondary", "tertiary", "callout"];
+export declare const headingLevelsArray: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "one", "two", "three", "four", "five", "six"];
+export type HeadingSizes = typeof headingSizesArray[number];
+export type HeadingLevels = typeof headingLevelsArray[number];
+export interface HeadingProps {
+    /** Optional className that appears in addition to `heading` */
+    className?: string;
+    /** Optional ID that other components can cross reference for accessibility
+     * purposes */
+    id?: string;
+    /** Optional prop used to show capitalized text */
+    isCapitalized?: boolean;
+    /** Optional prop used to show upper case text */
+    isUppercase?: boolean;
+    /** Optional prop used to show lower case text */
+    isLowercase?: boolean;
+    /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed,
+     * `Heading` will default to `<h2>` */
+    level?: HeadingLevels;
+    /** Optional prop used to remove default spacing */
+    noSpace?: boolean;
+    /** String to populate the overline element */
+    overline?: string;
+    /** Optional size used to override the default styles of the native HTML `<h>`
+     * elements */
+    size?: HeadingSizes;
+    /** String to populate the subtitle element */
+    subtitle?: string;
+    /** Inner text of the `<h*>` element */
+    text?: string;
+    /** Optional URL that header points to; when `url` prop is passed to
+     * `Heading`, a child `<a>` element is created and the heading text becomes an
+     * active link */
+    url?: string;
+    /** Optional className for the URL when the `url` prop is passed */
+    urlClass?: string;
+}
+export declare const Heading: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<HeadingProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLHeadingElement>>, {}>;
+export default Heading;

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

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export type AriaLiveValues = "assertive" | "off" | "polite" | undefined;
+export type HelperErrorTextType = string | JSX.Element;
+interface HelperErrorTextProps {
+    /** Aria attribute. When true, assistive technologies will read the entire
+     * DOM element. When false, only changes (additionals or removals) will be
+     * read. True by default. */
+    ariaAtomic?: boolean;
+    /** Aria attribute used to handle live updates for the helper and error text.
+     * This indicates the priority of the text and when it should be presented to
+     * users using screen readers; "off" indicates that the content should not be
+     * presented, "polite" that it will be announced at the next available time
+     * slot, and "assertive" that it should be announced immediately. This is set
+     * to "polite" by default. */
+    ariaLive?: AriaLiveValues;
+    /** Additional className to add. */
+    className?: string;
+    /** Unique ID for accessibility purposes. */
+    id?: string;
+    /** Toggles between helper and invalid styling. */
+    isInvalid?: boolean;
+    /** Offers the ability to render or not render the content passed in
+     * the `text` prop; `true` by default. */
+    isRenderedText?: boolean;
+    /** The text to display. */
+    text: HelperErrorTextType;
+}
+/**
+ * Component that always renders a div even if the text content is not passed.
+ * This pattern guarantees accessibility guidelines are met if the text content
+ * is dynamically updated by the app or component that implements it.
+ */
+export declare const HelperErrorText: import("@chakra-ui/react").ChakraComponent<import("react").ForwardRefExoticComponent<HelperErrorTextProps & import("react").RefAttributes<HTMLDivElement>>, {}>;
+export default HelperErrorText;

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

@@ -0,0 +1,49 @@
+import React from "react";
+import { ComponentImageProps } from "../Image/Image";
+export declare const heroTypesArray: readonly ["primary", "secondary", "secondaryBooksAndMore", "secondaryLocations", "secondaryResearch", "secondaryWhatsOn", "tertiary", "campaign", "fiftyFifty"];
+export type HeroTypes = typeof heroTypesArray[number];
+export declare const heroSecondaryTypes: string[];
+export interface HeroImageProps extends Pick<ComponentImageProps, "alt" | "src"> {
+}
+export interface HeroProps {
+    /**
+     * Optional background color for the backdrop only in the `campaign` variant.
+     * When both `backdropBackgroundColor` and `backgroundImageSrc` are passed,
+     * the `backgroundImageSrc` will take precedence.
+     */
+    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. */
+    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. */
+    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. */
+    foregroundColor?: string;
+    /** Optional heading element. */
+    heading?: JSX.Element;
+    /** Used to control how the `Hero` component will be rendered. */
+    heroType?: HeroTypes;
+    /** Object used to create and render the `Image` component. Note that only
+     * `src` and `alt` are the available attributes to pass. If `imageProps.alt`
+     * is left blank, a warning will be logged to the console and will cause
+     * accessibility issues. For `imageProps.src`, it will only work for the
+     * "secondary", "fiftyFifty" and "campaign" `Hero` types; Note: `imageProps.src`
+     * can only be used in conjunction with `backgroundImageSrc` for the "campaign"
+     * `Hero` type. Note: not all `Hero` variations utilize this prop. */
+    imageProps?: HeroImageProps;
+    /** Optional details area that contains location data.
+     * Note: not all `Hero` variations utilize this prop. */
+    locationDetails?: JSX.Element;
+    /** Optional string used for the subheader that displays
+     * underneath the heading element. */
+    subHeaderText?: string | JSX.Element;
+}
+export declare const Hero: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<HeroProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Hero;

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

@@ -0,0 +1,11 @@
+import React from "react";
+export interface HorizontalRuleProps {
+    /** Optional alignment value to align the horizontal rule to one side or the
+     * other when the width is less than 100%. If omitted, the horizontal rule
+     * will have a default center alignment. */
+    align?: "left" | "right";
+    /** ClassName you can add in addition to `horizontal-rule` */
+    className?: string;
+}
+export declare const HorizontalRule: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<HorizontalRuleProps & React.RefAttributes<HTMLDivElement & HTMLHRElement>>, {}>;
+export default HorizontalRule;

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { iconAlignArray, iconColorsArray, iconNamesArray, iconRotationsArray, iconSizesArray, iconTypesArray } 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 IconRotationTypes = typeof iconRotationsArray[number];
+export type IconSizes = typeof iconSizesArray[number];
+export type IconTypes = typeof iconTypesArray[number];
+export interface IconProps {
+    /** Aligns the icon. */
+    align?: IconAlign;
+    /** Optional className that will be added to the parent element */
+    className?: string;
+    /** Overrides default icon color (black). */
+    color?: IconColors;
+    /** Icons designated as decorative will be ignored by screenreaders. True
+     * by default. */
+    decorative?: boolean;
+    /** Rotates the icon clockwise in increments of 90deg */
+    iconRotation?: IconRotations;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** The name of the icon you want to use. */
+    name?: IconNames;
+    /** Sets the icon size. */
+    size?: IconSizes;
+    /** For accessibility purposes, the text passed in the `title` prop gets
+     * rendered in a `title` element in the SVG. This descriptive text is not
+     * visible but is needed for screenreaders to describe the graphic. */
+    title?: string;
+    /** FOR INTERNAL DS USE ONLY: the icon variant to display. */
+    type?: IconTypes;
+}
+/**
+ * Renders SVG-based icons.
+ */
+export declare const Icon: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<IconProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & SVGSVGElement>>, {}>;
+export default Icon;

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

@@ -0,0 +1,196 @@
+/// <reference types="react" />
+declare const _default: {
+    accessibilityFull: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    accessibilityPartial: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    actionCheckCircle: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    actionCheckCircleFilled: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    actionExit: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    actionHelpDefault: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    actionHelpOutline: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    actionIdentity: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    actionIdentityFilled: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    actionLaunch: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    actionPower: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    actionRegistration: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    actionSearch: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    actionSettings: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    alertNotificationImportant: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    alertWarningFilled: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    alertWarningOutline: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    arrow: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    building: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    check: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    clock: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    close: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    decorativeEnvelope: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    decorativeLibraryCard: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    decorativeShoppingBag: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    download: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    errorFilled: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    errorOutline: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    fileTypeAudio: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    fileTypeDoc: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    fileTypeGenericDoc: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    fileTypeImage: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    fileTypePdf: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    fileTypeSpreadsheet: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    fileTypeVideo: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    headset: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    legacyAccountFilled: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    legacyAccountUnfilled: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    legacySocialFacebook: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    legacySocialInstagram: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    legacySocialTwitter: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    legacySocialYoutube: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    locator: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    mapsPlace: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    minus: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    moonCrescent: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    plus: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    search: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    socialFacebook: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    socialInstagram: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    socialPinterest: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    socialSoundCloud: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    socialSpotify: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    socialTikTok: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    socialTumblr: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    socialTwitter: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    socialVimeo: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    socialYoutube: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    speakerNotes: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    sunFull: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    utilityAccountFilled: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    utilityAccountUnfilled: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    utilityHamburger: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    utilitySearch: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+};
+export default _default;

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

@@ -0,0 +1,6 @@
+export declare const iconAlignArray: readonly ["left", "right", "none"];
+export declare const iconColorsArray: readonly ["ui.black", "ui.white", "brand.primary", "brand.secondary", "ui.error.primary", "ui.error.secondary", "ui.status.primary", "ui.status.secondary", "ui.success.primary", "ui.success.secondary", "ui.warning.primary", "ui.warning.secondary", "section.blogs.primary", "section.blogs.secondary", "section.books-and-more.primary", "section.books-and-more.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.schwartzman", "section.whats-on.primary", "section.whats-on.secondary", "dark.ui.error.primary", "dark.ui.error.secondary", "dark.ui.status.primary", "dark.ui.status.secondary", "dark.ui.success.primary", "dark.ui.success.secondary", "dark.ui.warning.primary", "dark.ui.warning.secondary"];
+export declare const iconNamesArray: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionIdentity", "actionIdentityFilled", "actionLaunch", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "mapsPlace", "minus", "moonCrescent", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialSpotify", "socialTikTok", "socialTumblr", "socialTwitter", "socialVimeo", "socialYoutube", "speakerNotes", "sunFull", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
+export declare const iconRotationsArray: readonly ["rotate0", "rotate90", "rotate180", "rotate270"];
+export declare const iconSizesArray: readonly ["default", "xsmall", "small", "medium", "large", "xlarge", "xxlarge", "xxxlarge"];
+export declare const iconTypesArray: readonly ["default", "breadcrumbs"];

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

@@ -0,0 +1,68 @@
+import React, { ImgHTMLAttributes } from "react";
+export declare const imageRatiosArray: readonly ["fourByThree", "oneByTwo", "original", "sixteenByNine", "square", "threeByFour", "threeByTwo", "twoByOne"];
+export declare const imageSizesArray: readonly ["default", "xxxsmall", "xxsmall", "xsmall", "small", "medium", "large"];
+export declare const imageTypesArray: readonly ["default", "circle"];
+export type ImageRatios = typeof imageRatiosArray[number];
+export type ImageSizes = typeof imageSizesArray[number];
+export type ImageTypes = typeof imageTypesArray[number];
+export interface ComponentImageProps extends Partial<HTMLImageElement> {
+    /** String value used to populate the `alt` attribute of the internal `Image`
+     * component's `img` element. @NOTE if an image is used, this value must be passed. */
+    alt?: string;
+    /** Optional value to control the aspect ratio of the internal `Image` component.
+     * Defaults to `ImageRatios.Square`. */
+    aspectRatio?: ImageRatios;
+    /** Optional value to render as a caption for the internal `Image` component. */
+    caption?: string;
+    /** Optional DOM element to use instead of the DS `Image` component. */
+    component?: JSX.Element;
+    /** Optional value to render as a credit for the internal `Image` component. */
+    credit?: string;
+    /** Flag to set the internal `Image` component to `isLazy` mode. */
+    isLazy?: boolean;
+    /** Optional value to control the size of the internal `Image` component.
+     * Defaults to `ImageSizes.Default`. */
+    size?: ImageSizes;
+    /** Optional value that contains the path to an image. If omitted, the internal
+     * DS `Image` component will not render. */
+    src?: string;
+}
+interface ImageWrapperProps {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalWrapperStyles?: {
+        [key: string]: any;
+    };
+    /** ClassName you can add in addition to 'image' */
+    className?: string;
+    /** Optional value to control the aspect ratio of the card image; default
+     * value is `"original"` */
+    aspectRatio?: ImageRatios;
+    /** Optional value to control the size of the image */
+    size?: ImageSizes;
+}
+export interface ImageProps extends ImageWrapperProps, ImgHTMLAttributes<HTMLImageElement> {
+    /** Optionally pass in additional Chakra-based styles only for the figure. */
+    additionalFigureStyles?: {
+        [key: string]: any;
+    };
+    /** Optionally pass in additional Chakra-based styles only for the image. */
+    additionalImageStyles?: {
+        [key: string]: any;
+    };
+    /** Alternate text description of the image */
+    alt?: string;
+    /** Adding will wrap the image in a <figure> */
+    caption?: string;
+    /** Custom image component */
+    component?: JSX.Element | null;
+    /** Adding will wrap the image in a <figure> */
+    credit?: string;
+    /** Optional value for the image type */
+    imageType?: ImageTypes;
+    /** Flag to set the internal `Image` component to `isLazy` mode. */
+    isLazy?: boolean;
+    /** The src attribute is required, and contains the path to the image you want to embed. */
+    src?: string;
+}
+export declare const Image: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Image;

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

@@ -0,0 +1,25 @@
+import React from "react";
+interface LabelProps {
+    /** Additional CSS class name to render in the `label` element. */
+    className?: string;
+    /** The id of the html element that this `Label` is describing. */
+    htmlFor: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Controls whether the label should be inline with the input it goes with.
+     * This prop should only be used internally. */
+    isInlined?: boolean;
+    /** Controls whether the "(Required)" text should be displayed alongside the
+     * label's text. False by default. */
+    isRequired?: boolean;
+    /** Allows the '(Required)' text to be changed for language purposes
+     * Note: Parenthesis will be added automatically by the component */
+    requiredLabelText?: string;
+}
+/**
+ * A label for form inputs. It should never be used alone.
+ */
+export declare const Label: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<LabelProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & HTMLLabelElement>>, {}>;
+export default Label;

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

@@ -0,0 +1,32 @@
+import React from "react";
+export declare const linkTypesArray: readonly ["action", "backwards", "button", "buttonPrimary", "buttonSecondary", "buttonPill", "buttonCallout", "buttonNoBrand", "buttonDisabled", "default", "external", "forwards", "standalone"];
+export type LinkTypes = typeof linkTypesArray[number];
+export interface LinkProps {
+    /** Any child node passed to the component. */
+    children: React.ReactNode;
+    /** Additional class name to render in the `Link` component. */
+    className?: string;
+    /** The `href` attribute for the anchor element. */
+    href?: string;
+    /** ID used for accessibility purposes. */
+    id?: string;
+    /** Used to explicitly set the underline style for a text link. If true, link
+     * text will always be underlined; if false, link text will only show
+     * underline in hover state. */
+    isUnderlined?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement, MouseEvent>) => void;
+    rel?: string;
+    /** Visibly hidden text that will only be read by screenreaders. */
+    screenreaderOnlyText?: string;
+    /** Prop that sets the HTML attribute to target where the link should go. */
+    target?: "_blank" | "_parent" | "_self" | "_top";
+    /** Controls the link visuals: action, button, backwards, forwards,
+     * standalone, or default. */
+    type?: LinkTypes;
+}
+/**
+ * A component that uses an `href` prop or a child anchor element, to create
+ * an anchor element with added styling and conventions.
+ */
+export declare const Link: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLDivElement & HTMLAnchorElement>>, {}>;
+export default Link;

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

@@ -0,0 +1,43 @@
+import React from "react";
+export declare const listTypesArray: readonly ["ol", "ul", "dl"];
+export type ListTypes = typeof listTypesArray[number];
+export interface DescriptionProps {
+    term: string;
+    description: string | JSX.Element;
+}
+export interface ListProps {
+    /** ClassName you can add in addition to 'list' */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Display the list in a row. */
+    inline?: boolean;
+    /** Data to render if children are not passed. For `listTypes` ordered `"ol"`
+     * and unordered `"ul"` `List` types, the data structure is an array of strings
+     * to renders as `li` items. For description `"dl"` `List` types, the data
+     * structure is an array of objects with `term` and `description` properties
+     * to render `dt` and `dd` elements, respectively.
+     */
+    listItems?: (string | JSX.Element | DescriptionProps)[];
+    /** Remove list styling. */
+    noStyling?: boolean;
+    /** An optional title that will appear over the list. This prop only applies
+     * to Description Lists. */
+    title?: string;
+    /** The type of list: "ol", "ul", or "dl". "ul" by default. */
+    type: ListTypes;
+}
+/**
+ * A component that renders list item `li` elements or description item `dt`
+ * and `dd` elements based on the `type` prop. Note that the `title` prop will
+ * only display for the `Description` list type.
+ */
+export declare const List: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ListProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & HTMLUListElement & HTMLOListElement>>, {}>;
+/**
+ * Checks for `li` elements and consoles a warning if the
+ * children are different HTML elements.
+ */
+export declare const checkListChildrenError: (children: React.ReactNode, listType?: string, componentName?: string) => void;
+export default List;

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { logoNamesArray, logoSizesArray } from "./logoVariables";
+export type LogoNames = typeof logoNamesArray[number];
+export type LogoSizes = typeof logoSizesArray[number];
+export interface LogoProps {
+    /** Optional className that will be added to the parent element */
+    className?: string;
+    /** Logos designated as decorative will be ignored by screenreaders. False
+     * by default. */
+    decorative?: boolean;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** The name of the logo you want to use. */
+    name?: LogoNames;
+    /** Sets the logo size. */
+    size?: LogoSizes;
+    /** For accessibility purposes, the text passed in the `title` prop gets
+     * rendered in a `title` element in the SVG. This descriptive text is not
+     * visible but is needed for screenreaders to describe the graphic. */
+    title?: string;
+}
+/**
+ * The `Logo` component renders SVG-based logos and color variants that are
+ * commonly used by the New York Public Library.
+ */
+export declare const Logo: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<LogoProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & SVGSVGElement>>, {}>;
+export default Logo;