@nypl/design-system-react-components 3.6.2 → 4.0.0-alpha-rc

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

@@ -1,10 +1,10 @@
-import { Tab, TabList, TabPanels, TabPanel, ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, Tab, TabList, TabPanels, TabPanel, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export interface TabsDataProps {
     label: string;
     content: string | React.ReactNode;
 }
-export interface TabsProps {
+export interface TabsProps extends Omit<BoxProps, "onChange"> {
     /** The index of the tab to display on the initial render. */
     defaultIndex?: number;
     /** ID that other components can cross reference for accessibility purposes */

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

@@ -1,10 +1,8 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { TagSetExploreProps } from "./TagSetExplore";
 import { TagSetFilterProps } from "./TagSetFilter";
-export interface BaseTagSetProps {
-    /** Additional class for the component. */
-    className?: string;
+export interface BaseTagSetProps extends BoxProps {
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
 }

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

@@ -1,52 +1,18 @@
-import { ChakraComponent } from "@chakra-ui/react";
-import React from "react";
-export interface TemplateProps {
+/// <reference types="react" />
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
+export declare const sidebarPlacementArray: readonly ["none", "left", "right"];
+export type SidebarPlacement = typeof sidebarPlacementArray[number];
+export interface TemplateProps extends BoxProps {
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
+    /** Renders the `TemplateSidebar` component either on the left or
+     * right side of the `TemplateMain` component. */
+    sidebar?: SidebarPlacement;
 }
-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;
+export interface TemplateMainProps extends BoxProps {
     /** 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;
-    /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
-    /** Render the `SkipNavigation` component or not. False by default. */
-    renderSkipNavigation?: boolean;
 }
 /**
  * The main top-level parent component that wraps all template-related
@@ -54,88 +20,43 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
  */
 declare const Template: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<TemplateProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<TemplateProps>>;
 /**
- * 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: React.FC<any>;
-/**
- * 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: React.FC<any>;
-/**
- * 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: React.FC<any>;
-/**
- * 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: React.FC<any>;
-/**
- * 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).
+ * This optional component renders its children above the main content
+ * and spans edge-to-edge. It is most useful for `Breadcrumbs`, `Hero`,
+ * or other banner-like components.
  */
-declare const TemplateContentTop: React.FC<any>;
+declare const TemplateBreakout: React.FC<React.PropsWithChildren<BoxProps>>;
 /**
- * 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).
+ * This optional component renders content at a max width of 1280px and
+ * will render below `TemplateBreakout` (if being used) and above the
+ * main content and sidebar (if one exists).
  */
-declare const TemplateContentBottom: React.FC<any>;
+declare const TemplateTop: React.FC<React.PropsWithChildren<BoxProps>>;
 /**
- * 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.
+ * This component 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 component should not be used in conjunction with
+ * `TemplateMainNarrow`.
  */
-declare const TemplateContentPrimary: React.FC<any>;
+declare const TemplateMain: React.FC<React.PropsWithChildren<TemplateMainProps>>;
 /**
- * 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.
+ * This component renders an HTML `<main>` element with an id of "mainContent".
+ * The "mainContent" id should be used as the consuming application's skip
+ * navigation link. It provides a narrower container for better readability if
+ * the main content includes long text. This component is meant to be used in
+ * lieu of `TemplateMain`, and should not be used in conjunction with
+ * `TemplateSidebar`.
  */
-declare const TemplateContentSidebar: React.FC<any>;
+declare const TemplateMainNarrow: React.FC<React.PropsWithChildren<TemplateMainProps>>;
 /**
- * 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`.
+ * This optional component is used to render content in a sidebar column.
+ * It must be paired with the `TemplateMain` component. An optional `sidebar`
+ * prop value of "left" or "right" must be passed to the `Template` wrapper
+ * to render the correct CSS styles.
  */
-declare const TemplateFooter: React.FC<any>;
+declare const TemplateSidebar: React.FC<React.PropsWithChildren<BoxProps>>;
 /**
- * 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`.
+ * This optional component renders content at a max width of 1280px and
+ * will always render below the main content and sidebar (if one exists).
  */
-export declare const TemplateAppContainer: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<TemplateAppContainerProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<TemplateAppContainerProps>>;
-export { Template, TemplateAboveHeader, TemplateBreakout, TemplateContent, TemplateContentBottom, TemplateContentPrimary, TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, };
-export default TemplateAppContainer;
+declare const TemplateBottom: React.FC<React.PropsWithChildren<BoxProps>>;
+export { Template, TemplateBreakout, TemplateTop, TemplateMain, TemplateMainNarrow, TemplateSidebar, TemplateBottom, };

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

@@ -1,10 +1,8 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 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;
+export interface TextProps extends BoxProps {
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
     /** Optional prop used to show bolded text */
@@ -19,8 +17,6 @@ export interface TextProps {
     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;
 }

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

@@ -1,4 +1,4 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent, ChakraProps } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import type { AutoCompleteValues } from "../../utils/constantValues";
@@ -14,7 +14,13 @@ export declare const TextInputFormats: {
     url: string;
 };
 export type TextInputVariants = "default" | "searchBar" | "searchBarSelect";
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+type InputElementProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "color" | "height" | "width">;
+type TextAreaElementProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "color" | "height" | "width">;
+interface BaseTextInputProps extends Pick<BoxProps, keyof ChakraProps> {
+    type?: TextInputTypes;
+}
+export type TextInputPropsWithHTML = BaseTextInputProps & (BaseTextInputProps["type"] extends "textarea" ? TextAreaElementProps : InputElementProps);
+export interface InputProps extends TextInputPropsWithHTML {
     /** FOR INTERNAL DS USE ONLY: Adds an aria-label or appends to an existing aria-label for screen readers.*/
     additionalAriaLabel?: string;
     /** FOR INTERNAL DS USE ONLY: additional helper text id(s) to be used for the input's `aria-describedby` value.
@@ -22,10 +28,6 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     additionalHelperTextIds?: string;
     /** String value used to set the autocomplete attribute. */
     autoComplete?: AutoCompleteValues;
-    /** 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 */
@@ -45,25 +47,6 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     /** 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 | JSX.Element;
-    /** 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;
@@ -75,14 +58,8 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     /** 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`

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

@@ -1,9 +1,9 @@
-import { ChakraComponent } from "@chakra-ui/react";
-import React from "react";
+import { BoxProps, ChakraComponent, ChakraProps } from "@chakra-ui/react";
+import React, { InputHTMLAttributes } from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export declare const toggleSizesArray: readonly ["default", "small"];
 export type ToggleSizes = typeof toggleSizesArray[number];
-export interface ToggleProps {
+export interface ToggleProps extends Pick<BoxProps, keyof ChakraProps>, Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "height" | "size" | "width"> {
     /** 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;
@@ -28,11 +28,6 @@ export interface ToggleProps {
     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;
 }

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

@@ -1,12 +1,8 @@
 import React from "react";
-import { ChakraComponent } from "@chakra-ui/react";
-export interface TooltipProps {
-    /** Any child node passed to the component. */
-    children: React.ReactNode;
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
+export interface TooltipProps extends Omit<BoxProps, "content"> {
     /** 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. */

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

@@ -1,16 +1,14 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 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 {
+export interface VideoPlayerProps extends BoxProps {
     /** 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

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

@@ -12,7 +12,11 @@ export default function useMultiSelect(initialState?: SelectedItems): {
     selectedItems: {} | SelectedItems;
     setSelectedItems: (newState: SelectedItems) => void;
     onChange: (itemId: string, multiSelectId: string) => void;
-    onMixedStateChange: (parentId: string, multiSelectId: string, items: MultiSelectItem[]) => void;
+    onMixedStateChange: ({ parentId, multiSelectId, items, }: {
+        parentId: string;
+        multiSelectId: string;
+        items: MultiSelectItem[];
+    }) => void;
     onClear: (multiSelectId: string) => void;
     onClearAll: () => void;
 };

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

@@ -6,8 +6,13 @@
 declare const useNYPLBreakpoints: () => {
     isLargerThanSmall: any;
     isLargerThanMedium: any;
-    isLargerThanMobile: any;
     isLargerThanLarge: any;
     isLargerThanXLarge: any;
+    isLargerThanSmallMobile: any;
+    isLargerThanLargeMobile: any;
+    isLargerThanSmallTablet: any;
+    isLargerThanLargeTablet: any;
+    isLargerThanMobile: any;
+    isLargerThanTablet: any;
 };
 export default useNYPLBreakpoints;

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

@@ -0,0 +1,23 @@
+/**
+ * A custom hook This hook returns responsive gap and padding values that align
+ * with NYPL design standards for responsive grids and columns. The values will
+ * adjust based on the width of the viewport.
+ */
+declare function useResponsiveSpacing(): {
+    responsiveGap: {
+        base: string;
+        md: string;
+        xl: string;
+    };
+    responsiveMargin: {
+        base: string;
+        md: string;
+        xl: string;
+    };
+    responsivePadding: {
+        base: string;
+        md: string;
+        xl: string;
+    };
+};
+export default useResponsiveSpacing;

package/dist/src/index.d.ts

@@ -35,7 +35,6 @@ export { default as FilterBarPopup, useFilterBarPopup, } from "./components/Filt
 export type { FilterBarPopupProps } from "./components/FilterBarPopup/FilterBarPopup";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
 export type { FormProps } from "./components/Form/Form";
-export { default as Header } from "./components/Header/Header";
 export { default as Heading } from "./components/Heading/Heading";
 export type { HeadingLevels, HeadingProps, HeadingSizes, } from "./components/Heading/Heading";
 export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";
@@ -45,7 +44,7 @@ export type { HeroProps, HeroTypes } from "./components/Hero/Hero";
 export { default as HorizontalRule } from "./components/HorizontalRule/HorizontalRule";
 export type { HorizontalRuleProps } from "./components/HorizontalRule/HorizontalRule";
 export { default as Icon } from "./components/Icons/Icon";
-export type { IconAlign, IconColors, IconNames, IconRotations, IconRotationTypes, IconSizes, IconTypes, IconProps, } from "./components/Icons/Icon";
+export type { IconAlign, IconColors, IconNames, IconRotations, IconSizes, IconTypes, IconProps, } from "./components/Icons/Icon";
 export { default as Image } from "./components/Image/Image";
 export type { ComponentImageProps, ImageProps, ImageRatios, ImageSizes, ImageTypes, } from "./components/Image/Image";
 export { default as Label } from "./components/Label/Label";
@@ -93,7 +92,7 @@ export type { SliderProps } from "./components/Slider/Slider";
 export { default as SocialMediaLinks } from "./components/SocialMediaLinks/SocialMediaLinks";
 export type { SocialMediaLinkDataProps } from "./components/SocialMediaLinks/SocialMediaLinks";
 export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
-export type { StatusBadgeLevels, StatusBadgeProps, StatusBadgeTypes, } from "./components/StatusBadge/StatusBadge";
+export type { StatusBadgeProps, StatusBadgeTypes, } from "./components/StatusBadge/StatusBadge";
 export { default as StructuredContent } from "./components/StructuredContent/StructuredContent";
 export type { StructuredContentImagePosition, StructuredContentProps, } from "./components/StructuredContent/StructuredContent";
 export { default as StyledList } from "./components/StyledList/StyledList";
@@ -107,8 +106,7 @@ export { default as TagSet } from "./components/TagSet/TagSet";
 export type { TagSetProps, TagSetTypeProps } from "./components/TagSet/TagSet";
 export type { TagSetExploreDataProps, TagSetExploreProps, } from "./components/TagSet/TagSetExplore";
 export type { TagSetFilterDataProps, TagSetFilterProps, } from "./components/TagSet/TagSetFilter";
-export { TemplateAppContainer, Template, TemplateAboveHeader, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, } from "./components/Template/Template";
-export type { TemplateAppContainerProps, TemplateProps, TemplateContentProps, TemplateFooterProps, TemplateHeaderProps, TemplateSidebarProps, } from "./components/Template/Template";
+export { Template, TemplateBreakout, TemplateTop, TemplateMain, TemplateMainNarrow, TemplateSidebar, TemplateBottom, } from "./components/Template/Template";
 export { default as Text } from "./components/Text/Text";
 export type { TextProps, TextSizes } from "./components/Text/Text";
 export { default as TextInput } from "./components/TextInput/TextInput";
@@ -121,10 +119,11 @@ export { default as VideoPlayer } from "./components/VideoPlayer/VideoPlayer";
 export type { VideoPlayerAspectRatios, VideoPlayerProps, VideoPlayerTypes, } from "./components/VideoPlayer/VideoPlayer";
 export { default as useCarouselStyles } from "./hooks/useCarouselStyles";
 export { default as useCloseDropDown } from "./hooks/useCloseDropDown";
+export { default as useFormatNumber } from "./hooks/useFormatNumber";
 export { default as useMultiSelect } from "./hooks/useMultiSelect";
 export { default as useNYPLBreakpoints } from "./hooks/useNYPLBreakpoints";
 export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
-export { default as useWindowSize } from "./hooks/useWindowSize";
+export { default as useResponsiveSpacing } from "./hooks/useResponsiveSpacing";
 export { default as useScrollFadeStyles } from "./hooks/useScrollFadeStyles";
-export { default as useFormatNumber } from "./hooks/useFormatNumber";
+export { default as useWindowSize } from "./hooks/useWindowSize";
 export type { AutoCompleteValues } from "./utils/constantValues";

package/dist/src/theme/components/breadcrumb.d.ts

@@ -257,7 +257,7 @@ declare const Breadcrumb: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "blogs" | "booksAndMore" | "brand" | "connect" | "digitalCollections" | "education" | "locations" | "research" | "whatsOn";
+        variant?: "blogs" | "research" | "whatsOn" | "connect" | "booksAndMore" | "brand" | "digitalCollections" | "education" | "locations";
         colorScheme?: string;
     };
 };

package/dist/src/theme/components/button.d.ts

@@ -181,9 +181,6 @@ declare const Button: {
         text: ({ buttonSize }: any) => {
             base: any;
         };
-        link: ({ buttonSize }: any) => {
-            base: any;
-        };
         pill: ({ buttonSize }: any) => {
             base: any;
         };
@@ -199,7 +196,7 @@ declare const Button: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "link" | "text" | "primary" | "secondary" | "callout" | "pill" | "iconOnly" | "noBrand";
+        variant?: "text" | "primary" | "secondary" | "pill" | "iconOnly" | "callout" | "noBrand";
         colorScheme?: string;
     };
     parts: ("base" | "screenreaderOnly")[];

package/dist/src/theme/components/heading.d.ts

@@ -353,79 +353,6 @@ declare const Heading: {
                 width: string;
             };
         };
-        one: {
-            base: {
-                width: string;
-                a: {
-                    textUnderlineOffset: string;
-                };
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                letterSpacing: string;
-                lineHeight: string;
-            };
-        };
-        two: {
-            base: {
-                width: string;
-                a: {
-                    textUnderlineOffset: string;
-                };
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        three: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        four: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        five: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        six: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
         display1: {
             base: {
                 fontSize: {
@@ -573,61 +500,10 @@ declare const Heading: {
                 width: string;
             };
         };
-        primary: {
-            base: {
-                width: string;
-                a: {
-                    textUnderlineOffset: string;
-                };
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                letterSpacing: string;
-                lineHeight: string;
-            };
-        };
-        secondary: {
-            base: {
-                width: string;
-                a: {
-                    textUnderlineOffset: string;
-                };
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        tertiary: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        callout: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "heading7" | "heading8" | "primary" | "secondary" | "tertiary" | "callout" | "one" | "two" | "three" | "four" | "five" | "six";
+        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "heading7" | "heading8";
         colorScheme?: string;
     };
     parts: ("base" | "headingWrapper")[];