@nypl/design-system-react-components 1.0.1 → 1.0.3

package/dist/components/ComponentWrapper/ComponentWrapper.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export interface ComponentWrapperProps {
+    /** The UI elements that will be wrapped by this component */
+    children: React.ReactNode;
+    /** A class name for the `div` parent element. */
+    className?: string;
+    /** Optional string to set the text for the component's description */
+    descriptionText?: string;
+    /** Optional string to set the text for a `Heading` component */
+    headingText?: string;
+    /** Optional string to set the text for a `HelperErrorText` component */
+    helperText?: HelperErrorTextType;
+    /** Styles that target the helper text. */
+    helperTextStyles?: {
+        [key: string]: any;
+    };
+    /** 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;
+    /** Sets invalid text in the error state. */
+    isInvalid?: boolean;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+}
+export declare const ComponentWrapper: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<ComponentWrapperProps>) => JSX.Element, {}>;
+export default ComponentWrapper;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,81 @@
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { TextInputRefType } from "../TextInput/TextInput";
+export declare type DatePickerTypes = "full" | "month" | "year";
+export interface FullDateType {
+    /** Date object that gets returned for the onChange
+     * function only for date ranges. */
+    endDate?: Date;
+    /** Date object that gets returned for the onChange function. */
+    startDate: Date;
+}
+interface DateRangeRowProps {
+    /** ID that other components can cross reference for accessibility purposes. */
+    id: string;
+    /** Whether to render a single date input or two for a range of two dates. */
+    isDateRange?: boolean;
+}
+interface DatePickerWrapperProps extends DateRangeRowProps {
+    /** Additional className. */
+    className?: string;
+    /** Adds the 'required' property to the input element(s). */
+    isRequired?: boolean;
+    /** Passed to the `TextInput` component to render a label associated with an input field. */
+    labelText: string;
+    /** Offers the ability to show the label onscreen or hide it. */
+    showLabel?: boolean;
+    /** Whether or not to display the "(Required)" text in the label text.
+     * True by default. */
+    showRequiredLabel?: boolean;
+}
+export interface DatePickerProps extends DatePickerWrapperProps {
+    /** The date format to display. Defaults to "yyyy-MM-dd".
+     * Must be in ISO-8601 format. */
+    dateFormat?: string;
+    /** DatePicker date types that can be rendered. */
+    dateType?: DatePickerTypes;
+    /** Populates the `HelperErrorText` component in this component. */
+    helperText?: HelperErrorTextType;
+    /** Populates the `HelperErrorText` component in the "From" `TextInput` component. */
+    helperTextFrom?: string;
+    /** Populates the `HelperErrorText` component in the "To" `TextInput` component. */
+    helperTextTo?: string;
+    /** The initial date value. This must be in the mm/dd/yyyy format. */
+    initialDate?: string;
+    /** The initialTo date value used for date ranges.
+     * This must be in the mm/dd/yyyy format. */
+    initialDateTo?: string;
+    /** Populates the `HelperErrorText` error state for both "From"
+     * and "To" input components. */
+    invalidText?: HelperErrorTextType;
+    /** Adds the 'disabled' property to the input element(s). */
+    isDisabled?: boolean;
+    /** Adds 'isInvalid' styling. */
+    isInvalid?: boolean;
+    /** Adds the 'required' property to the input element(s). */
+    isRequired?: boolean;
+    /** The maximum date value that applies to both input fields.
+     * This must be in the mm/dd/yyyy format. */
+    maxDate?: string;
+    /** The minimum date value that applies to both input fields.
+     * This must be in the mm/dd/yyyy format. */
+    minDate?: string;
+    /** Value name for the single input field or the "From" input field in a date range. */
+    nameFrom?: string;
+    /** Value name for the "To" input field */
+    nameTo?: string;
+    /** The action to perform on the `input`'s onChange function for both fields.
+     * This will return the data in an object with `startDate` and `endDate` keys.
+     */
+    onChange?: (data: FullDateType) => void;
+    /** An additional explicit React ref passed for a date range's "To"
+     * input field. Note that the "From" input takes the initial "ref" value. */
+    refTo?: React.Ref<TextInputRefType>;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+}
+/**
+ * Returns a single date input field or two date input fields for a date range.
+ */
+export declare const DatePicker: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<TextInputRefType>>, {}>;
+export default DatePicker;

package/dist/components/Fieldset/Fieldset.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+interface FieldsetProps {
+    /** Additional class name to add. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id: string;
+    /** Flag to show or hide the text in the `legend` element. False by default. */
+    isLegendHidden?: boolean;
+    /** Flag to render "Required" in the `legend`. True by default. */
+    isRequired?: boolean;
+    /** Text to display in the `legend` element. */
+    legendText?: string;
+    /** Whether or not to display the "(Required)" text in the `legend` text.
+     * True by default. */
+    showRequiredLabel?: boolean;
+}
+/**
+ * A wrapper component that renders a `fieldset` element along with a `legend`
+ * element as its first child. Commonly used to wrap form components.
+ */
+export declare const Fieldset: import("@chakra-ui/react").ChakraComponent<({ children, className, id, isLegendHidden, isRequired, legendText, showRequiredLabel, ...rest }: React.PropsWithChildren<FieldsetProps>) => JSX.Element, {}>;
+export default Fieldset;

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { GridGaps } from "../Grid/SimpleGrid";
+interface FormBaseProps {
+    /** className to be applied to FormRow, FormField, and Form */
+    className?: string;
+    /** Optional spacing size; if omitted, the default `large` (2rem / 32px)
+     * spacing will be used; ```IMPORTANT: for general form layout, this prop
+     * should not be used``` */
+    gap?: GridGaps;
+    /** ID that other components can cross reference (internal use) */
+    id: string;
+}
+export interface FormChildProps extends Partial<FormBaseProps> {
+}
+export interface FormProps extends FormBaseProps {
+    /** Optional form `action` attribute */
+    action?: string;
+    /** Optional form `method` attribute */
+    method?: "get" | "post";
+    /** Function to call for the `onSubmit` form event. */
+    onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+}
+/** FormRow child-component */
+export declare const FormRow: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<FormChildProps>) => JSX.Element, {}>;
+/** FormField child-component */
+export declare const FormField: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<FormChildProps>) => JSX.Element, {}>;
+/** Main Form component */
+export declare const Form: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<FormProps>) => JSX.Element, {}>;
+export default Form;

package/dist/components/Grid/SimpleGrid.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export declare type GridGaps = "grid.xxs" | "grid.xs" | "grid.s" | "grid.m" | "grid.l" | "grid.xl" | "grid.xxl";
+export interface SimpleGridProps {
+    /** Additional class name. */
+    className?: string;
+    /** Optional numeric value to override the default column count; the default
+     * column count is 3. */
+    columns?: number;
+    /** Optional gap size; if omitted, the default `large` (2rem / 32px) spacing
+     * will be used; `IMPORTANT: for standard grid layouts, this prop should
+     * not be used.` */
+    gap?: GridGaps;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+}
+export declare const SimpleGrid: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<SimpleGridProps>) => JSX.Element, {}>;
+export default SimpleGrid;

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+export declare type HeadingSizes = "primary" | "secondary" | "tertiary" | "callout";
+export declare type HeadingLevels = "one" | "two" | "three" | "four" | "five" | "six";
+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 number 1-6 used to create the `<h*>` tag; if prop is not passed,
+     * `Heading` will default to `<h2>` */
+    level?: HeadingLevels;
+    /** Optional size used to override the default styles of the semantic HTM
+     * `<h>` elements */
+    size?: HeadingSizes;
+    /** Optional prop used to remove default spacing */
+    noSpace?: boolean;
+    /** 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<(props: React.PropsWithChildren<HeadingProps>) => JSX.Element, {}>;
+export default Heading;

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare type AriaLiveValues = "assertive" | "off" | "polite";
+export declare 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 in the invalid state to read error text by default.
+     * 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 "off" by default and to "polite" by when `isInvalid` is true. */
+    ariaLive?: AriaLiveValues;
+    /** Additional className to add. */
+    className?: string;
+    /** Unique ID for accessibility purposes. */
+    id?: string;
+    /** Toggles between helper and invalid styling. */
+    isInvalid?: boolean;
+    /** The text to display. */
+    text: HelperErrorTextType;
+}
+/**
+ * Helper or error text for forms components.
+ */
+export declare const HelperErrorText: import("@chakra-ui/react").ChakraComponent<({ ariaAtomic, ariaLive, className, id, isInvalid, text, ...rest }: HelperErrorTextProps) => JSX.Element, {}>;
+export default HelperErrorText;

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { ComponentImageProps } from "../Image/Image";
+export declare type HeroTypes = "primary" | "secondary" | "secondaryBooksAndMore" | "secondaryLocations" | "secondaryResearch" | "secondaryWhatsOn" | "tertiary" | "campaign" | "fiftyFifty";
+export declare const heroSecondaryTypes: string[];
+export interface HeroImageProps extends Pick<ComponentImageProps, "alt" | "src"> {
+}
+export interface HeroProps {
+    /** 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<(props: React.PropsWithChildren<HeroProps>) => JSX.Element, {}>;
+export default Hero;

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

@@ -0,0 +1,11 @@
+/// <reference types="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<(props: HorizontalRuleProps) => JSX.Element, {}>;
+export default HorizontalRule;

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+export declare type IconAlign = "left" | "right" | "none";
+export declare type IconColors = "ui.black" | "ui.white" | "brand.primary" | "brand.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";
+export declare type IconNames = "accessibilityFull" | "accessibilityPartial" | "actionCheckCircle" | "actionHelpDefault" | "actionHelpOutline" | "actionLaunch" | "alertNotificationImportant" | "arrow" | "check" | "clock" | "close" | "download" | "errorFilled" | "errorOutline" | "fileTypeAudio" | "fileTypeDoc" | "fileTypeGenericDoc" | "fileTypeImage" | "fileTypePdf" | "fileTypeSpreadsheet" | "fileTypeVideo" | "headset" | "minus" | "plus" | "search" | "speakerNotes" | "utilityAccountFilled" | "utilityAccountUnfilled" | "utilityHamburger" | "utilitySearch";
+export declare type IconRotationTypes = "rotate0" | "rotate90" | "rotate180" | "rotate270";
+export declare type IconSizes = "default" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
+export declare type IconTypes = "default" | "breadcrumbs";
+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?: IconRotationTypes;
+    /** 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<(props: React.PropsWithChildren<IconProps>) => JSX.Element, {}>;
+export default Icon;

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

@@ -0,0 +1,33 @@
+declare const _default: {
+    accessibilityFull: string;
+    accessibilityPartial: string;
+    actionCheckCircle: string;
+    actionHelpDefault: string;
+    actionHelpOutline: string;
+    actionLaunch: string;
+    alertNotificationImportant: string;
+    arrow: string;
+    check: string;
+    clock: string;
+    close: string;
+    download: string;
+    errorFilled: string;
+    errorOutline: string;
+    fileTypeAudio: string;
+    fileTypeDoc: string;
+    fileTypeGenericDoc: string;
+    fileTypeImage: string;
+    fileTypePdf: string;
+    fileTypeSpreadsheet: string;
+    fileTypeVideo: string;
+    headset: string;
+    minus: string;
+    plus: string;
+    search: string;
+    speakerNotes: string;
+    utilityAccountFilled: string;
+    utilityAccountUnfilled: string;
+    utilityHamburger: string;
+    utilitySearch: string;
+};
+export default _default;

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

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+export declare type ImageRatios = "fourByThree" | "oneByTwo" | "original" | "sixteenByNine" | "square" | "threeByFour" | "threeByTwo" | "twoByOne";
+export declare type ImageSizes = "default" | "xxsmall" | "xsmall" | "small" | "medium" | "large";
+export declare type ImageTypes = "default" | "circle";
+export interface ComponentImageProps {
+    /** 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;
+    /** 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 {
+    /** 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;
+    /** 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<(props: ImageProps) => JSX.Element, {}>;
+export default Image;

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

@@ -0,0 +1,20 @@
+import * as 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;
+}
+/**
+ * A label for form inputs. It should never be used alone.
+ */
+export declare const Label: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<LabelProps>) => JSX.Element, {}>;
+export default Label;

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+export declare type LinkTypes = "action" | "backwards" | "button" | "default" | "external" | "forwards";
+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;
+    /** Controls the link visuals: action, button, backwards, forwards, 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<HTMLAnchorElement>>, {}>;
+export default Link;

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+export declare type ListTypes = "ol" | "ul" | "dl";
+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` orderd `"ol"`
+     * and unordered `"ul"` `List` types, the data structure is an array of strings
+     * to renders as `li` items. For descroption `"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<(props: React.PropsWithChildren<ListProps>) => any, {}>;
+export default List;

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+export declare type LogoNames = "appleAppStoreBlack" | "appleAppStoreWhite" | "bplBlack" | "bplWhite" | "cleverBadgeColor" | "cleverColor" | "cleverWhite" | "firstbookColor" | "firstbookColorNegative" | "googlePlayBlack" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnWhite" | "nyplFullBlack" | "nyplFullWhite" | "nyplLionBlack" | "nyplLionWhite" | "nyplTextBlack" | "nyplTextWhite" | "openebooksColor" | "openebooksNegative" | "openebooksWithTextColor" | "openebooksWithTextNegative" | "qplAltBlack" | "qplAltWhite" | "qplBlack" | "qplColor" | "qplWhite" | "reservoirIconColor" | "reservoirVerticalColor" | "schomburgBlack" | "schomburgCircleBlack" | "schomburgCircleColor" | "schomburgCircleWhite" | "schomburgColor" | "schomburgWhite" | "simplyeBlack" | "simplyeWhite" | "simplyeColor" | "snflBlack" | "snflWhite" | "treasuresColor" | "treasuresColorNegative";
+export declare type LogoSizes = "default" | "xxsmall" | "xsmall" | "small" | "medium" | "large";
+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<(props: React.PropsWithChildren<LogoProps>) => JSX.Element, {}>;
+export default Logo;

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

@@ -0,0 +1,48 @@
+declare const _default: {
+    appleAppStoreBlack: string;
+    appleAppStoreWhite: string;
+    bplBlack: string;
+    bplWhite: string;
+    cleverBadgeColor: string;
+    cleverColor: string;
+    cleverWhite: string;
+    firstbookColor: string;
+    firstbookColorNegative: string;
+    googlePlayBlack: string;
+    lpaBlack: string;
+    lpaColor: string;
+    lpaWhite: string;
+    mlnBlack: string;
+    mlnWhite: 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;
+};
+export default _default;

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+interface BaseModalProps {
+    bodyContent?: string | JSX.Element;
+    closeButtonLabel?: string;
+    headingText?: string | JSX.Element;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    isOpen?: boolean;
+    onClose?: () => void;
+}
+export interface ModalProps {
+    buttonText?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    modalProps: BaseModalProps;
+}
+/**
+ * The `ModalTrigger` component renders a button that you click to open the
+ * internal `Modal` component. Note that props to update the internal `Modal`
+ * component are passed through to the `modalProps` prop.
+ */
+export declare const ModalTrigger: import("@chakra-ui/react").ChakraComponent<({ buttonText, id, modalProps, ...rest }: React.PropsWithChildren<ModalProps>) => JSX.Element, {}>;
+/**
+ * This hook function can be used to render the `Modal` component with a custom
+ * open button(s) and optional custom close button(s). You must render your own
+ * button and pass the appropriate `onOpen` and ` handler for the modal to open.
+ */
+export declare function useModal(): {
+    onClose: () => void;
+    onOpen: () => void;
+    Modal: import("@chakra-ui/react").ChakraComponent<({ bodyContent, closeButtonLabel, headingText, id, ...rest }: React.PropsWithChildren<BaseModalProps>) => JSX.Element, {}>;
+};
+export {};