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

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

@@ -0,0 +1,25 @@
+import { IconNames } from "../Icons/Icon";
+export interface TagSetFilterDataProps {
+    /** The name of the SVG `Icon` to render before the tag label. */
+    iconName?: IconNames;
+    /** The string label to display. */
+    label: string;
+}
+export interface TagSetFilterProps {
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Whether the tags should be removable. */
+    isDismissible?: boolean;
+    /** The function to perform when a tag is clicked when `isDismissible` is true. */
+    onClick?: (tagLabel: string) => void;
+    /** The array of data to display as tags. */
+    tagSetData: TagSetFilterDataProps[];
+    /** The `TagSet` variant to render; "filter" by default. */
+    type: "filter";
+}
+/**
+ * The "filter" `TagSet` variant will display tags that can be removed when
+ * `isDismissible` is true and they are clicked.
+ */
+export declare const TagSetFilter: import("@chakra-ui/react").ChakraComponent<(props: TagSetFilterProps) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
+export default TagSetFilter;

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

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * This helper component wrapper renders a DS `Tooltip` component if the text is
+ * long or a React fragment. This assumes that the `label` prop is a rather
+ * simple single root JSX element, such as `<Link ...>....</Link>`.
+ */
+export declare const TooltipWrapper: ({ label, children, }: React.PropsWithChildren<{
+    label: any;
+}>) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,140 @@
+import React from "react";
+export interface TemplateProps {
+}
+export interface TemplateHeaderProps {
+    /** Flag to render an HTML header element. True by default. */
+    renderHeaderElement?: boolean;
+}
+export interface TemplateFooterProps {
+    /** Flag to render an HTML footer element. True by default. */
+    renderFooterElement?: boolean;
+}
+export interface TemplateSidebarProps {
+    /** Renders the `TemplateContentSidebar` component either on the left or
+     * right side of the `TemplateContentPrimary` component. */
+    sidebar?: "none" | "left" | "right";
+}
+export interface TemplateContentProps extends TemplateSidebarProps {
+    /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
+     * anchor for the application skip navigation. */
+    id?: string;
+}
+export interface TemplateAppContainerProps extends TemplateFooterProps, TemplateHeaderProps, TemplateSidebarProps {
+    /** DOM that will be rendered before the rest of the components in
+     * `TemplateAppContainer` and immediately before the `TemplateHeader` component. */
+    aboveHeader?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateBreakout` component section. */
+    breakout?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateContentBottom` component section. */
+    contentBottom?: React.ReactElement;
+    /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
+     * anchor for the application skip navigation. */
+    contentId?: string;
+    /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
+    contentPrimary?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateContentSidebar` component section. */
+    contentSidebar?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateContentTop` component section. */
+    contentTop?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateFooter` component section. */
+    footer?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateHeader` component section. */
+    header?: React.ReactElement;
+    /** Render the `SkipNavigation` component or not. False by default. */
+    renderSkipNavigation?: boolean;
+}
+/**
+ * The main top-level parent component that wraps all template-related
+ * components.
+ */
+declare const Template: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TemplateProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+/**
+ * This optional component renders its children from edge-to-edge and should
+ * be used for alerts or notifications that are typically site-wide. This must
+ * be rendered immediately before the `TemplateHeader` component. This is meant
+ * for components that render an `aside` HTML element or HTML element with the
+ * `role="complementary"` attribute. These elements should *not* be rendered
+ * in the `header` HTML section since that's an accessibility violation.
+ */
+declare const TemplateAboveHeader: (props: React.PropsWithChildren<TemplateProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * This optional component should be the first child of the `Template`
+ * component. This is rendered as an HTML `<header>` element. If an HTML
+ * `<header>` element is already passed in a custom component as the children,
+ * set `renderFooterElement` to `false`. Otherwise, the parent wrapper will
+ * render an HTML `<header>` element.
+ */
+declare const TemplateHeader: ({ children, renderHeaderElement, }: React.PropsWithChildren<TemplateHeaderProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * This component should be used inside the `Template` component to contain both
+ * the `TemplateAboveHeader` and `TemplateHeader` components. This is meant to
+ * render its children from edge to edge and is most useful for the headers,
+ * `Breadcrumbs`, and `Hero` components or other banner-like components.
+ */
+declare const TemplateBreakout: (props: React.PropsWithChildren<TemplateProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * This component is most useful to render content on the page. This renders an
+ * HTML `<main>` element with an id of "mainContent". The "mainContent" id should
+ * be used as the consuming application's skip navigation link. The `TemplateContent`
+ * component also takes a `sidebar` prop with optional "left" or "right" values.
+ * This will set the correct *styling* needed for the `TemplateContentPrimary`
+ * and `TemplateContentSidebar` components. Note that `TemplateContentPrimary`
+ * and `TemplateContentSidebar` must be ordered correctly as children elements
+ * for the appropriate styles to take effect.
+ */
+declare const TemplateContent: (props: React.PropsWithChildren<TemplateContentProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * This optional component must be used inside the `TemplateContent` component.
+ * This renders content in the main width of the container and will always render
+ * above the primary component and the sidebar component (if any).
+ */
+declare const TemplateContentTop: (props: React.PropsWithChildren<TemplateProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * This optional component must be used inside the `TemplateContent` component
+ * and after the `TemplateContentPrimary` or `TemplateContentSidebar` component.
+ * This renders content in the main width of the container and should always
+ * render below the primary component and the sidebar component (if any).
+ */
+declare const TemplateContentBottom: (props: React.PropsWithChildren<TemplateProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * This component is used to render content in a column when there must be a
+ * sidebar component on either its left or right side. It must go inside the
+ * `TemplateContent` component. An optional `sidebar` prop value of "left" or
+ * "right" can be passed to render the correct CSS styles. If the `sidebar`
+ * prop is used in the `TemplateContent` component, there is no need to pass
+ * the `sidebar` prop to this component -- `TemplateContent` will handle it.
+ */
+declare const TemplateContentPrimary: (props: React.PropsWithChildren<TemplateContentProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * This component is used to render content in a sidebar column. It must go
+ * inside the `TemplateContent` component and must be paired with the
+ * `TemplateContentPrimary` component. If this is a left sidebar, it needs to be
+ * rendered before the `TemplateContentPrimary` component. If this is a right
+ * sidebar, it needs to be rendered after the `TemplateContentPrimary` component.
+ * An optional `sidebar` prop value of "left" or "right" can be passed to render
+ * the correct CSS styles. If the `sidebar` prop is used in the `TemplateContent`
+ * component, there is no need to pass the `sidebar` prop to this component --
+ * `TemplateContent` will handle it.
+ */
+declare const TemplateContentSidebar: (props: React.PropsWithChildren<TemplateContentProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * This optional component should be the last child of the `Template`
+ * component. This is rendered as an HTML `<footer>` element and spans the full
+ * width of the page. If an HTML `<footer>` element is already passed in a
+ * custom component, set `renderFooterElement` to `false`.
+ */
+declare const TemplateFooter: ({ children, renderFooterElement, }: React.PropsWithChildren<TemplateFooterProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * This single component can be used instead of all the individual template
+ * components. Instead of importing and rendering the needed "template"
+ * components, each section is passed as a prop to the section where it should
+ * be rendered. For example, if you want to render content in the
+ * `TemplateContentPrimary` section, then pass it as a prop to `contentPrimary`.
+ */
+export declare const TemplateAppContainer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TemplateAppContainerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export { Template, TemplateAboveHeader, TemplateBreakout, TemplateContent, TemplateContentBottom, TemplateContentPrimary, TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, };
+export default TemplateAppContainer;

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

@@ -0,0 +1,27 @@
+import React from "react";
+export declare const textSizesArray: readonly ["default", "body1", "body2", "caption", "tag", "mini", "overline1", "overline2", "subtitle1", "subtitle2"];
+export type TextSizes = typeof textSizesArray[number];
+export interface TextProps {
+    /** Additional class name to render in the `Text` component. */
+    className?: string;
+    /** Optional prop used to show bolded text */
+    isBold?: boolean;
+    /** Optional prop used to show itlicized text */
+    isItalic?: boolean;
+    /** 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 prop used to remove default spacing */
+    noSpace?: boolean;
+    /** Optional prop used to explicitly set the ARIA role */
+    role?: string;
+    /** Optional prop to control the text styling */
+    size?: TextSizes;
+}
+export declare const Text: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TextProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Text;

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

@@ -0,0 +1,92 @@
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export declare const textInputTypesArray: readonly ["email", "hidden", "number", "password", "text", "textarea", "tel", "url"];
+export type TextInputTypes = typeof textInputTypesArray[number];
+export declare const TextInputFormats: {
+    email: string;
+    hidden: string;
+    password: string;
+    text: string;
+    tel: string;
+    textarea: string;
+    url: string;
+};
+export type TextInputVariants = "default" | "searchBar" | "searchBarSelect";
+export interface InputProps {
+    /** FOR INTERNAL DS USE ONLY: additional helper text id(s) to be used for the input's `aria-describedby` value.
+     * If more than one, separate each with a space */
+    additionalHelperTextIds?: string;
+    /** A class name for the TextInput parent div. */
+    className?: string;
+    /** The starting value of the input field. */
+    defaultValue?: string;
+    /** Populates the HelperErrorText for the standard state */
+    helperText?: HelperErrorTextType;
+    /** ID that other components can cross reference for accessibility purposes */
+    id: string;
+    /** Populates the HelperErrorText for the error state */
+    invalidText?: HelperErrorTextType;
+    /** Adds a button to clear existing text in the input field. */
+    isClearable?: boolean;
+    /** The callback function that is called when the clear button is clicked. */
+    isClearableCallback?: () => void;
+    /** Adds the `disabled` and `aria-disabled` prop to the input when true */
+    isDisabled?: boolean;
+    /** Adds errored styling to the input/textarea and helper text elements */
+    isInvalid?: boolean;
+    /** Will add `required` and `aria-required` props to the input/textarea elements */
+    isRequired?: boolean;
+    /** Provides text for a `Label` component if `showLabel` is set to true;
+     * populates an `aria-label` attribute if `showLabel` is set to false. */
+    labelText: string;
+    /** The max number for a `number` TextInput type. */
+    max?: number;
+    /** The max length of the input field. This prop is for all input types
+     * except for the `number` type. */
+    maxLength?: number;
+    /** The min number for a `number` TextInput type. */
+    min?: number;
+    /** Used to reference the input element in forms. */
+    name?: string;
+    /** The action to perform on the `input`/`textarea`'s onChange function  */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /** The action to perform on the `input`/`textarea`'s onClick function  */
+    onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+    /** The action to perform on the `input`/`textarea`'s onFocus function  */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Regex to query the user input against. */
+    pattern?: string;
+    /** Populates the placeholder for the input/textarea elements */
+    placeholder?: string;
+    /** Allows the '(Required)' text to be changed for language purposes
+     * Note: Parenthesis will be added automatically by the component */
+    requiredLabelText?: string;
+    /** 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;
+    /** The amount to increase or decrease when using the number type. */
+    step?: number;
+    /** FOR INTERNAL DS USE ONLY: the input variant to display. */
+    textInputType?: TextInputVariants;
+    /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
+    type?: TextInputTypes;
+    /** Populates the value of the input/textarea elements */
+    value?: string;
+}
+/**
+ * The type used for `ref`s. We want to extend both `input` and `textarea`
+ * since both are available to create through `TextInput`.
+ */
+export type TextInputRefType = HTMLInputElement & HTMLTextAreaElement;
+/**
+ * Renders either an `input` element with a specified type or a `textarea`
+ * element. All types will render an accessible `Label` component and an
+ * optional `HelperErrorText` component.
+ */
+export declare const TextInput: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInputRefType>>, {}>;
+export default TextInput;

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

@@ -0,0 +1,43 @@
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export declare const toggleSizesArray: readonly ["default", "small"];
+export type ToggleSizes = typeof toggleSizesArray[number];
+export interface ToggleProps {
+    /** Used for uncontrolled scenarios.  Sets the state of the Toggle when the page first loads.
+     *   If true, the toggle will be initially set to the "on" position. */
+    defaultChecked?: boolean;
+    /** 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;
+    /** When using the Toggle as a "controlled" form element, you can specify
+     * the Toggle's checked state using this 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. */
+    isInvalid?: boolean;
+    /** Adds the 'required' attribute to the input when true. */
+    isRequired?: boolean;
+    /** The toggle's label. This will serve as the text content for the `<label>` element */
+    labelText: string;
+    /** The name prop indicates the `Toggle`'s form element name. If none is
+     * specified, 'default' will be used. */
+    name?: string;
+    /** The action to perform on the `<input>`'s onChange function  */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** The size of the Toggle. Defaults to "large". */
+    size?: ToggleSizes;
+}
+export declare const onChangeDefault: () => void;
+/**
+ * Component that renders Chakra's `Switch` component along with NYPL defaults.
+ */
+export declare const Toggle: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>, {}>;
+export default Toggle;

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

@@ -0,0 +1,17 @@
+import React from "react";
+export interface TooltipProps {
+    /** Any child node passed to the component. */
+    children: React.ReactNode;
+    /** Value used to populate the tooltip content. */
+    content: string | number | React.ReactNode;
+    /** A class name for the Tooltip parent div. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Adds the `disabled` prop to the Tooltip when true. */
+    isDisabled?: boolean;
+    /** Wraps the children of the tooltip in `ComponentWrapper` with `tabIndex=0` when true. */
+    shouldWrapChildren?: boolean;
+}
+export declare const Tooltip: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Tooltip;

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export declare const VideoPlayerAspectRatiosArray: readonly ["fourByThree", "sixteenByNine", "square"];
+export declare const VideoPlayerTypesArray: readonly ["vimeo", "youtube"];
+export type VideoPlayerAspectRatios = typeof VideoPlayerAspectRatiosArray[number];
+export type VideoPlayerTypes = typeof VideoPlayerTypesArray[number];
+export interface VideoPlayerProps {
+    /** Optional aspect ratio prop to control the sizing of the video player; if
+     * omitted, the video player defaults to `sixteen-by-nine` */
+    aspectRatio?: VideoPlayerAspectRatios;
+    /** Optional className you can add in addition to `video-player` */
+    className?: string;
+    /** Optional string to set the text for a video description */
+    descriptionText?: string;
+    /** Optional string to set a code snippet provided by YouTube or Vimeo; the
+     * `videoPlayer` component will accept the `embedCode` prop or the `videoId`
+     * and `videoType` props */
+    embedCode?: 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;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Optional title to be added to the `<iframe>` element for improved
+     * accessibility; this title should describe in a few words the content of
+     * the video; if omitted, a generic title will be added; if a `title`
+     * attribute is already present in the `embedCode` prop, this prop will be
+     * ignored */
+    iframeTitle?: string;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Required YouTube or Vimeo video ID. This value can be pulled from a
+     * video's YouTube or Vimeo URL. */
+    videoId?: string;
+    /** Required. Used to specify which video service is being used. */
+    videoType?: VideoPlayerTypes;
+}
+export declare const VideoPlayer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<VideoPlayerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default VideoPlayer;

package/dist/src/helpers/getSectionColors.d.ts

@@ -0,0 +1,8 @@
+import { SectionTypes } from "./types";
+type ColorSection = {
+    primary: string;
+    secondary: string | null;
+};
+type ColorVal = string;
+export declare function getSectionColors(type: SectionTypes, colorVal?: "primary" | "secondary"): ColorSection | ColorVal;
+export {};

package/dist/src/helpers/types.d.ts

@@ -0,0 +1,50 @@
+export declare const layoutTypesArray: readonly ["column", "row"];
+export type LayoutTypes = typeof layoutTypesArray[number];
+export declare const sectionDataMap: {
+    blogs: {
+        primary: string;
+        secondary: string;
+    };
+    booksAndMore: {
+        primary: string;
+        secondary: string;
+    };
+    brand: {
+        primary: string;
+        secondary: string;
+    };
+    connect: {
+        primary: string;
+        secondary: string;
+    };
+    education: {
+        primary: string;
+        secondary: string;
+    };
+    locations: {
+        primary: string;
+        secondary: string;
+    };
+    research: {
+        primary: string;
+        secondary: string;
+    };
+    researchLibraryLpa: {
+        primary: string;
+        secondary: any;
+    };
+    researchLibrarySchomburg: {
+        primary: string;
+        secondary: any;
+    };
+    researchLibrarySchwarzman: {
+        primary: string;
+        secondary: any;
+    };
+    whatsOn: {
+        primary: string;
+        secondary: string;
+    };
+};
+export declare const sectionTypeArray: string[];
+export type SectionTypes = typeof sectionTypeArray[number];

package/dist/src/hooks/useCarouselStyles.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Custom hook that controls the sliding function for the carousel wrapper.
+ * This returns functions to use for the "previous" and "next" buttons as well
+ * as a CSS style object that should be use to transition between slides. There
+ * is also a function to programmatically slide to the first slide.
+ * Inspired by: https://codesandbox.io/s/fxjeo
+ */
+export declare const useCarouselStyles: (slidesCount?: number, slideWidth?: number) => {
+    prevSlide: () => void;
+    nextSlide: () => void;
+    carouselStyle: {
+        transition: string;
+        marginStart: string;
+    };
+    goToStart: () => void;
+};
+export default useCarouselStyles;

package/dist/src/hooks/useCloseDropDown.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Close dropdowns when clicking outside of them or by pressing
+ * the escape key. It expects an action callback that will set
+ * the dropdown state to false (close).
+ */
+declare const useCloseDropDown: (actionCb: (val: boolean) => void, ref: React.RefObject<HTMLDivElement>) => void;
+export default useCloseDropDown;

package/dist/src/hooks/useNYPLBreakpoints.d.ts

@@ -0,0 +1,13 @@
+/**
+ * This hook is used to determine if the current screen size is larger than
+ * the specific NYPL breakpoint values. The returned value is an object with
+ * boolean values for each breakpoint.
+ */
+declare const useNYPLBreakpoints: () => {
+    isLargerThanSmall: any;
+    isLargerThanMedium: any;
+    isLargerThanMobile: any;
+    isLargerThanLarge: any;
+    isLargerThanXLarge: any;
+};
+export default useNYPLBreakpoints;

package/dist/src/hooks/useNYPLTheme.d.ts

@@ -0,0 +1,75 @@
+/**
+ * A custom hook that returns the Chakra-based NYPL theme object. This must be
+ * used inside a component that is wrapped in the `DSProvider` component, so
+ * that the theme object can be available to use.
+ */
+declare function useNYPLTheme(): {
+    breakpoints?: undefined;
+    colors?: undefined;
+    fontSizes?: undefined;
+    fontWeights?: undefined;
+    fonts?: undefined;
+    radii?: undefined;
+    space?: undefined;
+} | {
+    breakpoints: any;
+    colors: {
+        brand: any;
+        dark: any;
+        section: any;
+        transparent: any;
+        ui: any;
+    };
+    fontSizes: {
+        "-3": any;
+        "-2": any;
+        "-1": any;
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        breadcrumbs: any;
+        button: any;
+        desktop: any;
+        heading: any;
+        helper: any;
+        label: any;
+        mobile: any;
+        text: any;
+    };
+    fontWeights: {
+        light: any;
+        regular: any;
+        medium: any;
+        semibold: any;
+        bold: any;
+        body: any;
+        breadcrumbs: any;
+        button: any;
+        caption: any;
+        default: any;
+        heading: any;
+        helper: any;
+        label: any;
+        overline: any;
+        subtitle: any;
+        text: any;
+    };
+    fonts: {
+        body: any;
+        heading: any;
+    };
+    radii: any;
+    space: {
+        xxs: any;
+        xs: any;
+        s: any;
+        m: any;
+        l: any;
+        xl: any;
+        xxl: any;
+        xxxl: any;
+    };
+};
+export default useNYPLTheme;

package/dist/src/hooks/useStateWithDependencies.d.ts

@@ -0,0 +1,8 @@
+/**
+ * DS internal helper hook to use state with prop dependencies.
+ *
+ * This hook should NOT be used by consuming apps. DS components should use this hook rather than useState() whenever
+ * a change in state is expected for a given prop from a consuming app. The hook updates the DS component with useEffect().
+ */
+declare function useStateWithDependencies(initialValue: any): typeof initialValue;
+export default useStateWithDependencies;

package/dist/src/hooks/useWindowSize.d.ts

@@ -0,0 +1,10 @@
+interface WindowSize {
+    width: number;
+    height: number;
+}
+/**
+ * React hook used to get the window size on device resizing.
+ * Based on https://usehooks-typescript.com/react-hook/use-window-size
+ */
+declare function useWindowSize(): WindowSize;
+export default useWindowSize;