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

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

@@ -0,0 +1,166 @@
+/// <reference types="react" />
+declare const _default: {
+    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;
+    }>;
+    nycpsBlack: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nycpsColor: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    nycpsWhite: 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/Logo/logoVariables.d.ts

@@ -0,0 +1,2 @@
+export declare const logoNamesArray: readonly ["appleAppStoreBlack", "appleAppStoreWhite", "bplBlack", "bplWhite", "cleverBadgeColor", "cleverColor", "cleverWhite", "digitalCollectionsBlack", "digitalCollectionsWhite", "firstbookColor", "firstbookColorNegative", "googlePlayBlack", "lpaBlack", "lpaColor", "lpaWhite", "mlnBlack", "mlnColor", "mlnWhite", "nycdoeBlack", "nycdoeColor", "nycdoeWhite", "nycpsBlack", "nycpsColor", "nycpsWhite", "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 const logoSizesArray: readonly ["default", "xxsmall", "xsmall", "small", "medium", "large"];

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

@@ -0,0 +1,35 @@
+import 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<React.ForwardRefExoticComponent<ModalProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>, {}>;
+/**
+ * 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>) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
+};
+export {};

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

@@ -0,0 +1,52 @@
+import React from "react";
+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;
+    /** Optional custom `Icon` that will override the default `Icon`. */
+    icon?: JSX.Element;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Optional prop to control horizontal alignment of the `Notification` content */
+    isCentered?: boolean;
+    /** Content to be rendered in a `NotificationHeading` component. */
+    notificationHeading?: string;
+    /** Optional prop to control the coloring of the `Notification` text and the
+     * visibility of an applicable icon. */
+    notificationType?: NotificationTypes;
+    /** Prop to display the `Notification` icon. Defaults to `true`. */
+    showIcon?: boolean;
+}
+type NotificationHeadingProps = Omit<BasePropsWithoutAlignText, "notificationHeading" | "showIcon">;
+type NotificationContentProps = Omit<BaseProps, "icon">;
+type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
+export interface NotificationProps extends BasePropsWithoutAlignText {
+    /** Label used to describe the `Notification`'s aside HTML element. */
+    ariaLabel?: string;
+    /** Additional `className` to add.  */
+    className?: string;
+    /** Optional prop to control whether a `Notification` can be dismissed
+     * (closed) by a user. */
+    dismissible?: boolean;
+    /** Optional custom `Icon` that will override the default `Icon`. */
+    icon?: JSX.Element;
+    /** Optional prop to control the margin around the `Notification` component. */
+    noMargin?: boolean;
+    /** Content to be rendered in a `NotificationContent` component. */
+    notificationContent: string | JSX.Element;
+}
+/**
+ * NotificationHeading child-component.
+ */
+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>) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
+/**
+ * Component used to present users with three different levels of notifications:
+ * standard, announcement, and warning.
+ */
+export declare const Notification: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Notification;

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

@@ -0,0 +1,27 @@
+import React from "react";
+export interface PaginationProps {
+    /** Additional className. */
+    className?: string;
+    /** The currentPage can be used to programatically force the selected page to change
+     * without the user explicitly requesting it – for example, if the user should be
+     * brought back to the first page of a set of results after a new search. */
+    currentPage?: number;
+    /** The callback function that takes a page number and returns a string
+     * to use for a link's `href` attribute. This is used when the current
+     * page should refresh when navigating. */
+    getPageHref?: undefined | ((pageNumber: number) => string);
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** The initially selected page (default value is 1). */
+    initialPage?: number;
+    /** The callback function called when an item is selected and the current
+     * page should not refresh. */
+    onPageChange?: (selected: number) => void;
+    /** The total number of pages. */
+    pageCount: number;
+}
+/**
+ * A component that provides a navigational list of page items.
+ */
+export declare const Pagination: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Pagination;

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

@@ -0,0 +1,32 @@
+import React from "react";
+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;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id: string;
+    /** Whether the `ProgressIndicator` should be linear or circular. */
+    indicatorType?: ProgressIndicatorTypes;
+    /** Whether the progress animation should display because the `value` prop is
+     * not known. When this is set to `true`, the `value` prop will be ignored. */
+    isIndeterminate?: boolean;
+    /** The text to display in an HTML `label` element. */
+    labelText: string;
+    /** Visually show or hide the label text. When set to `false`, then the label
+     * text will be added to the parent component as its `aria-label` attribute. */
+    showLabel?: boolean;
+    /** The size of the linear or circular progress. */
+    size?: ProgressIndicatorSizes;
+    /** A number between 0 to 100 that defines the progress' value. */
+    value?: number;
+}
+/**
+ * A component that displays a progress status for any task that takes a long
+ * time to complete or consists of multiple steps. Examples include downloading,
+ * uploading, or processing.
+ */
+export declare const ProgressIndicator: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default ProgressIndicator;

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

@@ -0,0 +1,43 @@
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export interface RadioProps {
+    /** Additional class name. */
+    className?: string;
+    /** Optional string to populate the HelperErrorText for the 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;
+    /** When using the Radio as a "controlled" form element, you can specify the
+     * `Radio`'s checked state using this prop. You must also pass an onChange prop.
+     * Learn more about controlled and uncontrolled form fields: https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
+    isChecked?: boolean;
+    /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
+     * This also makes the text italic and color scheme gray. */
+    isDisabled?: boolean;
+    /** Adds the 'aria-invalid' attribute to the input when true. This also makes
+     * the color theme "NYPL error" red for the button and text. */
+    isInvalid?: boolean;
+    /** Adds the 'required' attribute to the input when true. */
+    isRequired?: boolean;
+    /** The radio button's label. This will serve as the text content for the
+     * `<label>` element if `showlabel` is true, or an "aria-label" if `showLabel`
+     * is false. */
+    labelText: string | JSX.Element;
+    /** Used to reference the input element in forms. */
+    name?: string;
+    /** Should be passed along with `isChecked` for controlled components. */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Offers the ability to show the radio's label onscreen or hide it. Refer
+     * to the `labelText` property for more information. */
+    showLabel?: boolean;
+    /** Populates the value of the input. */
+    value?: string;
+}
+export declare const Radio: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>, {}>;
+export default Radio;

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

@@ -0,0 +1,51 @@
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { LayoutTypes } from "../../helpers/types";
+export interface RadioGroupProps {
+    /** Additional class name. */
+    className?: string;
+    /** Populates the initial value of the input */
+    defaultValue?: string;
+    /** 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 error state */
+    invalidText?: HelperErrorTextType;
+    /** Adds the 'disabled' prop to the input when true. */
+    isDisabled?: boolean;
+    /** Set's the `Radio`s' wrapper to be full width. */
+    isFullWidth?: boolean;
+    /** Adds the 'aria-invalid' attribute to the input and
+     * sets the error state when true. */
+    isInvalid?: boolean;
+    /** Adds the 'required' attribute to the input when true. */
+    isRequired?: boolean;
+    /** The radio group label displayed in a `legend` element if `showlabel` is
+     * true, or an "aria-label" if `showLabel` is false. */
+    labelText: string;
+    /** Renders the Radio buttons in a row or column (default). */
+    layout?: LayoutTypes;
+    /** The `name` prop indicates the form group for all the Radio children. */
+    name: string;
+    /** The action to perform on the `<input>`'s onChange function  */
+    onChange?: (value: string) => void;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Offers the ability to show the group's legend 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;
+}
+/**
+ * RadioGroup is a wrapper for DS `Radio` components that renders as a fieldset
+ * HTML element along with optional helper text. The `name` prop is essential
+ * for this form group element and is not needed for individual DS `Radio`
+ * components when `RadioGroup` is used.
+ */
+export declare const RadioGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<RadioGroupProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default RadioGroup;

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

@@ -0,0 +1,58 @@
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { SelectProps as InitialSelectProps } from "../Select/Select";
+import { InputProps as InitialInputProps } from "../TextInput/TextInput";
+interface SelectOptionsProps {
+    text: string;
+    value: string;
+}
+export type SelectProps = Partial<Pick<InitialSelectProps, "id" | "labelText" | "name" | "onChange" | "value">> & {
+    optionsData: SelectOptionsProps[];
+};
+export type TextInputProps = Pick<InitialInputProps, "labelText" | "name"> & Partial<Pick<InitialInputProps, "defaultValue" | "id" | "isClearable" | "isClearableCallback" | "max" | "maxLength" | "min" | "onChange" | "pattern" | "placeholder" | "value">>;
+export interface SearchBarProps {
+    /** Adds 'action' property to the `form` element. */
+    action?: string;
+    /** The onClick callback function for the `Button` component. */
+    buttonOnClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** A class name for the `form` element. */
+    className?: string;
+    /** Optional string for the SearchBar's description above the component. */
+    descriptionText?: string;
+    /** Optional string for the SearchBar's heading text above the component. */
+    headingText?: string;
+    /** The text to display below the form in a `HelperErrorText` component. */
+    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;
+    /** Sets children form components in the disabled state. */
+    isDisabled?: boolean;
+    /** Sets children form components in the error state. */
+    isInvalid?: boolean;
+    /** Sets children form components in the required state. */
+    isRequired?: boolean;
+    /** Populates the `aria-label` attribute on the form element. */
+    labelText: string;
+    /** Adds 'method' property to the `form` element. */
+    method?: string;
+    /** Sets the `Button` variant type to `noBrand` when true;
+     * false by default which sets the type to `primary`. */
+    noBrandButtonType?: boolean;
+    /** Handler function when the form is submitted. */
+    onSubmit: (event: React.FormEvent) => void;
+    /** Required props to render a `Select` element. */
+    selectProps?: SelectProps | undefined;
+    /** Custom input element to render instead of a `TextInput` element. */
+    textInputElement?: JSX.Element;
+    /** Required props to render a `TextInput` element. */
+    textInputProps?: TextInputProps | undefined;
+}
+/**
+ * Renders a wrapper `form` element to be used with `Select` (optional),
+ * `Input`, and `Button` components together.
+ */
+export declare const SearchBar: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default SearchBar;

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

@@ -0,0 +1,59 @@
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export declare const selectTypesArray: string[];
+export declare const labelPositionsArray: string[];
+export type SelectTypes = typeof selectTypesArray[number];
+export type LabelPositions = typeof labelPositionsArray[number];
+export interface SelectProps {
+    /** A class name for the `div` parent element. */
+    className?: string;
+    /** Optional string to populate the `HelperErrorText` for the 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` and `aria-disabled` attributes to the select when true */
+    isDisabled?: boolean;
+    /** Adds the `aria-invalid` attribute to the select when true. This also makes
+     * the color theme "NYPL error" red for the select and text. */
+    isInvalid?: boolean;
+    /** Adds the `required` and `aria-required` attributes to the input when true. */
+    isRequired?: boolean;
+    /** Optional value to render the label inline, rather than the default (on top)
+     * of the select element. */
+    labelPosition?: LabelPositions;
+    /** Provides text for a `Label` component if `showLabel` is set to `true`;
+     * populates an `aria-label` attribute on the select input if `showLabel` is
+     * set to `false`. */
+    labelText: string;
+    /** Used to reference the select element in forms. */
+    name: string;
+    /** The callback function to get the selected value.
+     * Should be passed along with `value` for controlled components. */
+    onChange?: (event: React.FormEvent) => void;
+    /** Placeholder text in the select element. */
+    placeholder?: string;
+    /** The variant to display. */
+    selectType?: SelectTypes;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Offers the ability to show the select's label onscreen or hide it. Refer
+     * 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;
+    /** The value of the selected option.
+     * Should be passed along with `onChange` for controlled components. */
+    value?: string;
+}
+/**
+ * Component that renders Chakra's `Select` component along with an accessible
+ * `Label` and optional `HelperErrorText` component.
+ */
+export declare const Select: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SelectProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSelectElement>>, {}>;
+export default Select;

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { LayoutTypes } from "../../helpers/types";
+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;
+    /** Optional numeric value to control the number of lines for content
+     * placeholder; default value is `3`. */
+    contentSize?: number;
+    /** Optional numeric value to control the number of lines for heading
+     * placeholder; default value is `1`. */
+    headingSize?: number;
+    /** Optional value to control the aspect ratio of the image placeholder;
+     * default value is `"square"`. */
+    imageAspectRatio?: SkeletonLoaderImageRatios;
+    /** Optional boolean value to control visibility of border around skeleton loader. */
+    isBordered?: boolean;
+    /** Optional value to control the position of the image placeholder;
+     * default value is `"column"`. */
+    layout?: LayoutTypes;
+    /** Optional boolean value to control visibility of button placeholder. */
+    showButton?: boolean;
+    /** Optional boolean value to control visibility of content placeholder. */
+    showContent?: boolean;
+    /** Optional boolean value to control visibility of heading placeholder. */
+    showHeading?: boolean;
+    /** Optional boolean value to control visibility of image placeholder. */
+    showImage?: boolean;
+    /** Optional width value. This value should be entered with the same
+     * formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`).
+     * If omitted, the skeleton loader will have a default width of 100%. */
+    width?: string;
+}
+/**
+ * The `SkeletonLoader` component renders a placeholder to be used while
+ * dynamic content is loading.
+ */
+export declare const SkeletonLoader: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SkeletonLoaderProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default SkeletonLoader;

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

@@ -0,0 +1,19 @@
+import React from "react";
+interface SkipNavigationProps {
+    /** Additional CSS class name to render in the `nav` element. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** The anchor target for the main skip link. The default is "#mainContent". */
+    target?: string;
+}
+/**
+ * SkipNavigation is a component that is used to provide a navigational list of
+ * links. The first link is used to skip to the main content of the page using
+ * the `#mainContent` id, and the second link points to accessibility information
+ * on NYPL.org. These links are visually hidden but can be read by screenreaders.
+ */
+export declare const SkipNavigation: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SkipNavigationProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default SkipNavigation;