@nypl/design-system-react-components 0.25.13 → 0.27.0

package/CHANGELOG.md

@@ -8,6 +8,91 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 0.27.0 (April 27, 2022)
+
+### Adds
+
+- Adds two patterns for rendering the updated `Modal` component. This is still an ongoing work-in-progress as the `Modal` gets finalized but it is now using Chakra under-the-hood.
+- Adds `@chakra-ui/storybook-addon` so stories automatically pick up the Chakra-based NYPL theme.
+
+### Updates
+
+- Updates React and React DOM to version 17.
+- Updates Chakra packages `@chakra-ui/react` and `@chakra-ui/system`.
+- Updates the `HelperErrorText` styling to correctly display when used with a `Select` element with a `labelPosition` of inline.
+
+### Removals
+
+- Removes the following packages: `@storybook/addon-queryparams` and `react-router-dom`.
+
+## 0.26.1 (April 22, 2022)
+
+### Updates
+
+- Updates storybook URL from /reservoir/v0_26 to /reservoir/v0.
+
+### Fixes
+
+- Adds updated package-lock file to fix bad installations.
+
+## 0.26.0 (April 22, 2022)
+
+### Adds
+
+- Exports the `useCarouselStyles` and `useWindowSize` hooks and adds documentation for all hooks in Storybook.
+- Adds additional semantic design tokens from `fontWeights` and `fontSizes` to the `useNYPLTheme` hook.
+- Adds a warning if a required `id` prop is not passed to one of the "Form Elements": `Button`, `Checkbox`, `CheckboxGroup`, `DatePicker`, `Fieldset`, `Form`, `Label`, `ProgressIndicator`, `Radio`, `RadioGroup`, `SearchBar`, `Select`, `Slider`, `TextInput`, `Toggle`.
+- Adds the `isRequired` prop to the `Label` component.
+- Adds the `labelPosition` prop to the `Select` component, so that the label can be styled inline with the select input.
+- Adds Chakra's "Style Props" functionality to every Reservoir component. For composed components, such as the `SearchBar` component, these style props are passed to wrapper element. This update also updates the snapshot tests for every component.
+- Adds the functionality to pass all valid HTML attributes to a Reservoir component, such as `data-*` props.
+- Adds semantic design tokens for `spacing` theme object.
+- Adds the `isAlignedRightActions` prop to the `Card` component to render `CardActions` components to the right of the main content area. This only works for the `Card`'s row layout.
+- Adds styles to target native HTML basic elements inside the `StructuredContent` component.
+- Adds `Reservoir` branding to Storybook.
+
+### Changes
+
+- Updates the hex color value for `ui.gray.light-cool`, `ui.disabled.primary` and `section.blogs.primary`.
+- Updates the default background color used in the `Accordion` component.
+- Updates the default background color used in the `Hero` component.
+- Updates the background color used in the `SkeletonLoader` component.
+- Updates the background color used in the `VideoPlayer` component.
+- Updates the background colors used in the `Tabs` component.
+- Updates the colors for "secondary" and "pill" variants of the `Button` component.
+- Updates the color values used in the `disabled` state for the `Checkbox`, `Radio`, `Select`, `Slider`, `TextInput` and `Toggle` components.
+- Updates the `Checkbox` component to use "3px" for the border radius.
+- Makes the id prop required for all "Form Elements".
+- Updates how the `Required` text in the `Label` and `Fieldset` components is displayed. Instead of floating to the right of the label and legend elements, it is now displayed inlined as `(Required)`.
+- Renames the `optReqFlag` prop to `showRequiredLabel` in the `CheckboxGroup`, `Fieldset`, `RadioGroup`, and `Slider` components.
+- Renames the `showOptReqLabel` prop to `showRequiredLabel` in the `DatePicker`, `Select`, and `TextInput` components.
+- Uses the design token "text.caption" variable for the `Notification`'s font size.
+- Updates the styling for the `HelperErrorText` to be consistent for all components that use it
+- Refactors the `Checkbox`, `CheckboxGroup`, `ComponentWrapper`, `DatePicker`, `Fieldset`, `Label`, `Radio`, `RadioGroup`, `Select`, `Slider`, `TextInput`, and `Toggle` to better use the updated `HelperErrorText` styling.
+- Renames the `Card`'s `center` prop to `isCentered` and `border` prop to `isBordered`.
+- Renames the `SkeletonLoader` component's `border` prop to `isBordered`.
+- Refactors the DS `RadioGroup` component so it internally implements Chakra's `RadioGroup` component rather than the `useRadioGroup` hook. The "uncontrolled" version of Chakra's `RadioGroup` is not working and will be investigated in the future. It is recommended to use the controlled component pattern.
+- Updates the `Fieldset` component to render the "Optional"/"Required" text in the `legend` element as pseudo CSS in the `::after` rule.
+- Passes the `isRequired` prop in the `RadioGroup` and `CheckboxGroup` to the `Fieldset` wrapper component.
+- Updates the `focus` styles for the `Radio`, `Select` and `TextInput` components.
+- Updates the references of the `<dl>` element from "Definition" to "Description", as that's the official name in HTML5. This affects the `List` element and its `ListTypes.Description` enum value.
+- Updates styles for `React Datepicker`'s calendar popup in the `DatePicker` component.
+- Updates storybook URL from /storybook-static/ to /reservoir/v0_26.
+- Updates all references to "design system" in the Storybook documentation to include "Reservoir" in the name of the design system.
+- Updates language on the `Welcome` page.
+
+### Removals
+
+- Removes the default `Optional` text displayed in the `Label` and `Fieldset` components.
+- Removes the `optReqFlag` prop in the `Label` component.
+- Removes the default autogenerated id for all components, as well as the `uuid` package.
+- Removes the `HorizontalRule`'s `height` and `width` props from its prop interface in favor of Chakra's style props; the default values are still set for `height` and `width`.
+
+### Fixes
+
+- Fixes how the `Button` component gets rendered inside the `Form` and `FormField` component layout.
+- Fixes how the `Select` component is controlled in the `SearchBar` component.
+
 ## 0.25.13 (April 1, 2022)
 
 ### Adds

package/README.md

@@ -1,10 +1,10 @@
-# NYPL Design System
+# Reservoir Design System
 
 ![Build Status](https://github.com/nypl/nypl-design-system/actions/workflows/ci.yml/badge.svg?branch=development)
 
 [![npm version](https://badge.fury.io/js/%40nypl%2Fdesign-system-react-components.svg)](https://badge.fury.io/js/%40nypl%2Fdesign-system-react-components)
 
-The NYPL Design System (DS) is NYPL’s open-source extensible React library for products and experiences with the accessibility as its foundation. It ships functional, stateless components with consistent NYPL styling. You can learn more about the project and its goals [on the project's wiki](https://github.com/NYPL/nypl-design-system/wiki).
+The Reservoir Design System (DS) is NYPL’s open-source extensible React library for products and experiences with the accessibility as its foundation. It ships functional, stateless components with consistent NYPL styling. You can learn more about the project and its goals [on the project's wiki](https://github.com/NYPL/nypl-design-system/wiki).
 
 _Note: This library is still in beta. Until we release the stable `1.0.0` version, we are loosely using semantic versioning._
 
@@ -185,7 +185,7 @@ function NewComponent(props) {
 
 ## Using Chakra UI Components
 
-The Chakra UI component library has been integrated into the NYPL Design System. We are still progressing towards using Chakra components and patterns to build DS components, and therefore documentation and features are expected to change. While the implementation details of DS components will use Chakra, the DS package itself will export _some_ Chakra components.
+The Chakra UI component library has been integrated into the Reservoir Design System. We are still progressing towards using Chakra components and patterns to build DS components, and therefore documentation and features are expected to change. While the implementation details of DS components will use Chakra, the DS package itself will export _some_ Chakra components.
 
 The list of re-exported Chakra components can be found in the main [index.ts](/src/index.ts) file. They include:
 
@@ -216,15 +216,15 @@ You can check out a working Codepen with unpkg [here](https://codepen.io/edwingu
 
 ## Storybook
 
-The NYPL Design System leverages Storybook to document all the React components and style guidelines. The Storybook documentation can be found [here](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/introduction--page). For your convenience, the NYPL Design System components have been organized into logical categories based on both form and function. Please refer to the COMPONENTS section in the Storybook sidebar.
+The Reservoir Design System leverages Storybook to document all the React components and style guidelines. The Storybook documentation can be found [here](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/introduction--page). For your convenience, the Reservoir Design System components have been organized into logical categories based on both form and function. Please refer to the COMPONENTS section in the Storybook sidebar.
 
 ### Documentation Instances
 
-There are currently two main instances of the NYPL Design System Storybook documentation. There are also "preview" sites that are used to quickly and easily view pull request changes.
+There are currently two main instances of the Reservoir Design System Storybook documentation. There are also "preview" sites that are used to quickly and easily view pull request changes.
 
 **Production**
 
-The production Storybook documentation is deployed to [Github Pages](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/introduction--page). This is the main instance we use to share the latest stable release of the NYPL Design System. This documentation site is deployed through [Github Actions](/.github/workflows/gh-pages.yml) only on merges to the `release` branch.
+The production Storybook documentation is deployed to [Github Pages](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/introduction--page). This is the main instance we use to share the latest stable release of the Reservoir Design System. This documentation site is deployed through [Github Actions](/.github/workflows/gh-pages.yml) only on merges to the `release` branch.
 
 As of July, 2021, the Github Pages production site gets deployed every two weeks on the same schedule as npm releases.
 
@@ -271,11 +271,11 @@ You can then view `/storybook-static/index.html` in your browser. _Make sure not
 
 ## Typescript Usage
 
-The NYPL Design System is built with Typescript. Check out the Design System's [Typescript documentation](/TYPESCRIPT.md) for more information on why we chose to build React components in Typescript and the benefits and the gotchas we encountered.
+The Reservoir Design System is built with Typescript. Check out the Design System's [Typescript documentation](/TYPESCRIPT.md) for more information on why we chose to build React components in Typescript and the benefits and the gotchas we encountered.
 
 ## Unit Testing
 
-The NYPL Design System runs unit tests with Jest and React Testing Library.
+The Reservoir Design System runs unit tests with Jest and React Testing Library.
 
 To run all tests once:
 
@@ -359,7 +359,7 @@ After writing new tests, run `npm run test:generate-output` to create a new JSON
 
 ### Development and Storybook
 
-The NYPL Design System is built with accessibility in mind. By using Chakra UI as our foundational base, the custom DS components built with Chakra have accessibility concerns already implemented. On top of built-in accessible elements, DS components internally work to link labels with input elements, to add correct `aria-*` attributes, to visually hide text but still associate it with the correct element for titles and descriptions, to auto-generate a random `id` attribute if none was passed, and much more.
+The Reservoir Design System is built with accessibility in mind. By using Chakra UI as our foundational base, the custom DS components built with Chakra have accessibility concerns already implemented. On top of built-in accessible elements, DS components internally work to link labels with input elements, to add correct `aria-*` attributes, to visually hide text but still associate it with the correct element for titles and descriptions, to auto-generate a random `id` attribute if none was passed, and much more.
 
 We make use of:
 
@@ -371,7 +371,7 @@ If applicable, DS components have section(s) on accessibility in their Storybook
 
 ### Product Requirements
 
-The NYPL Design System provides accessible stories, but real live data can necessitate additional accessibility requirements beyond what we're committed to in our generic, extensible components. To ensure your products' final result is accessible, please adhere to the accessibility requirements put together by NYPL's accessibility coordinator on [Metronome](http://themetronome.co/).
+The Reservoir Design System provides accessible stories, but real live data can necessitate additional accessibility requirements beyond what we're committed to in our generic, extensible components. To ensure your products' final result is accessible, please adhere to the accessibility requirements put together by NYPL's accessibility coordinator on [Metronome](http://themetronome.co/).
 
 NYPL's Metronome instance is currently password protected. For access to Metronome, please contact NYPL's UX team or Design System team.
 

package/dist/components/Accordion/Accordion.d.ts

@@ -17,5 +17,5 @@ export interface AccordionProps {
  * Accordion component that shows content on toggle. Can be used to display
  * multiple accordion items together.
  */
-declare function Accordion(props: React.PropsWithChildren<AccordionProps>): JSX.Element;
+export declare const Accordion: import("@chakra-ui/react").ChakraComponent<(props: AccordionProps) => JSX.Element, {}>;
 export default Accordion;

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -18,5 +18,5 @@ export interface BreadcrumbProps {
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
 }
-declare function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>): JSX.Element;
+export declare const Breadcrumbs: import("@chakra-ui/react").ChakraComponent<(props: BreadcrumbProps) => JSX.Element, {}>;
 export default Breadcrumbs;

package/dist/components/Button/Button.d.ts

@@ -15,7 +15,7 @@ interface ButtonProps {
     /** Additional className to use. */
     className?: string;
     /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
+    id: string;
     /** Adds 'disabled' property to the button. */
     isDisabled?: boolean;
     /** Trigger the Button's action through the `mouseDown` event handler instead
@@ -29,5 +29,5 @@ interface ButtonProps {
 /**
  * Renders a simple `button` element with custom variant styles.
  */
-declare function Button(props: React.PropsWithChildren<ButtonProps>): JSX.Element;
+export declare const Button: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<ButtonProps>) => JSX.Element, {}>;
 export default Button;

package/dist/components/Card/Card.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { LayoutTypes } from "../../helpers/enums";
-import Heading from "../Heading/Heading";
 import { ComponentImageProps } from "../Image/Image";
 interface CardBaseProps {
     /** Optional value to control the alignment of the text and elements. */
@@ -28,20 +27,23 @@ interface CardActionsProps extends CardBaseProps {
 export interface CardProps extends CardBaseProps, CardLinkBoxProps {
     /** Optional hex color value used to set the card background color. */
     backgroundColor?: string;
-    /** Optional boolean value to control the visibility of a border around
-     * the card. */
-    border?: boolean;
     /** Optional CSS class name to add. */
     className?: string;
     /** Optional hex color value used to override the default text color. */
     foregroundColor?: string;
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
+    /** Optional boolean value to control the visibility of a border around
+     * the card. */
+    isBordered?: boolean;
     /** Object used to create and render the `Image` component. */
     imageProps?: CardImageProps;
+    /** Set CardActions to the right content side. This only works in
+     * the row layout. */
+    isAlignedRightActions?: boolean;
 }
-export declare const CardHeading: typeof Heading;
-export declare function CardContent(props: React.PropsWithChildren<{}>): JSX.Element;
-export declare function CardActions(props: React.PropsWithChildren<CardActionsProps>): JSX.Element;
-export default function Card(props: React.PropsWithChildren<CardProps>): JSX.Element;
-export {};
+export declare const CardHeading: import("@chakra-ui/react").ChakraComponent<import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<import("../Heading/Heading").HeadingProps>) => JSX.Element, {}>, {}>;
+export declare const CardContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<{}>) => JSX.Element, {}>;
+export declare const CardActions: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<CardActionsProps>) => JSX.Element, {}>;
+export declare const Card: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<CardProps>) => JSX.Element, {}>;
+export default Card;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -6,7 +6,7 @@ export interface CheckboxProps {
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+    id: string;
     /** Optional string to populate the HelperErrorText for the error state
      * when `isInvalid` is true. */
     invalidText?: HelperErrorTextType;
@@ -42,5 +42,5 @@ export interface CheckboxProps {
     value?: string;
 }
 export declare const onChangeDefault: () => void;
-declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>, {}>;
 export default Checkbox;

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -9,7 +9,7 @@ export interface CheckboxGroupProps {
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+    id: string;
     /** Optional string to populate the HelperErrorText for error state */
     invalidText?: HelperErrorTextType;
     /** Adds the 'disabled' prop to the input when true. */
@@ -30,13 +30,14 @@ export interface CheckboxGroupProps {
     name: string;
     /** The action to perform on the `<input>`'s onChange function  */
     onChange?: (value: string[]) => void;
-    /** Whether or not to display "Required"/"Optional" in the label text. */
-    optReqFlag?: boolean;
     /** 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;
 }
 /**
  * Wrapper component to wrap `Checkbox` components. Can be displayed in a
@@ -44,5 +45,5 @@ export interface CheckboxGroupProps {
  * wrapping and associated text elements, but the checkbox input elements
  * _need_ to be child `Checkbox` components from the NYPL Design System.
  */
-declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLInputElement>>;
+export declare const CheckboxGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLInputElement>>, {}>;
 export default CheckboxGroup;

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

@@ -17,5 +17,5 @@ export interface ComponentWrapperProps {
     /** Sets invalid text in the error state. */
     isInvalid?: boolean;
 }
-declare function ComponentWrapper(props: React.PropsWithChildren<ComponentWrapperProps>): JSX.Element;
+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

@@ -11,7 +11,7 @@ export interface FullDateType {
 }
 interface DateRangeRowProps {
     /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
+    id: string;
     /** Whether to render a single date input or two for a range of two dates. */
     isDateRange?: boolean;
 }
@@ -24,8 +24,9 @@ interface DatePickerWrapperProps extends DateRangeRowProps {
     labelText: string;
     /** Offers the ability to show the label onscreen or hide it. */
     showLabel?: boolean;
-    /** Whether or not to display the "Required"/"Optional" text in the label text. */
-    showOptReqLabel?: 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".
@@ -72,11 +73,9 @@ export interface DatePickerProps extends DatePickerWrapperProps {
     refTo?: React.Ref<TextInputRefType>;
     /** Offers the ability to hide the helper/invalid text. */
     showHelperInvalidText?: boolean;
-    /** Whether or not to display the "Required"/"Optional" text in the label text. */
-    showOptReqLabel?: boolean;
 }
 /**
  * Returns a single date input field or two date input fields for a date range.
  */
-declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<TextInputRefType>>;
+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

@@ -3,21 +3,20 @@ interface FieldsetProps {
     /** Additional class name to add. */
     className?: string;
     /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+    id: string;
     /** Flag to show or hide the text in the `legend` element. False by default. */
     isLegendHidden?: boolean;
-    /** Flag to render "Required" or "Optional" in the `legend`.
-     * False/"Optional" by default. */
+    /** Flag to render "Required" in the `legend`. True by default. */
     isRequired?: boolean;
     /** Text to display in the `legend` element. */
     legendText?: string;
-    /** Flag to show or hide the "Required"/"Optional" text in the `legend`.
+    /** Whether or not to display the "(Required)" text in the `legend` text.
      * True by default. */
-    optReqFlag?: boolean;
+    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.
  */
-declare const Fieldset: ({ children, className, id, isLegendHidden, isRequired, legendText, optReqFlag, }: React.PropsWithChildren<FieldsetProps>) => JSX.Element;
+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

@@ -8,9 +8,9 @@ interface FormBaseProps {
      * should not be used``` */
     gap?: FormGaps;
     /** ID that other components can cross reference (internal use) */
-    id?: string;
+    id: string;
 }
-export interface FormChildProps extends FormBaseProps {
+export interface FormChildProps extends Partial<FormBaseProps> {
 }
 export interface FormProps extends FormBaseProps {
     /** Optional form `action` attribute */
@@ -21,9 +21,9 @@ export interface FormProps extends FormBaseProps {
     onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
 }
 /** FormRow child-component */
-export declare function FormRow(props: React.PropsWithChildren<FormChildProps>): JSX.Element;
+export declare const FormRow: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<FormChildProps>) => JSX.Element, {}>;
 /** FormField child-component */
-export declare function FormField(props: React.PropsWithChildren<FormChildProps>): JSX.Element;
+export declare const FormField: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<FormChildProps>) => JSX.Element, {}>;
 /** Main Form component */
-export default function Form(props: React.PropsWithChildren<FormProps>): JSX.Element;
-export {};
+export declare const Form: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<FormProps>) => JSX.Element, {}>;
+export default Form;

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

@@ -1,9 +1,9 @@
 export declare enum GridGaps {
-    ExtraExtraSmall = "xxs",
-    ExtraSmall = "xs",
-    Small = "s",
-    Medium = "m",
-    Large = "l",
-    ExtraLarge = "xl",
-    ExtraExtraLarge = "xxl"
+    ExtraExtraSmall = "grid.xxs",
+    ExtraSmall = "grid.xs",
+    Small = "grid.s",
+    Medium = "grid.m",
+    Large = "grid.l",
+    ExtraLarge = "grid.xl",
+    ExtraExtraLarge = "grid.xxl"
 }

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

@@ -10,5 +10,5 @@ export interface SimpleGridProps {
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
 }
-declare function SimpleGrid(props: React.PropsWithChildren<SimpleGridProps>): JSX.Element;
+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

@@ -24,5 +24,5 @@ export interface HeadingProps {
     /** Optional className for the URL when the `url` prop is passed */
     urlClass?: string;
 }
-declare function Heading(props: React.PropsWithChildren<HeadingProps>): JSX.Element;
+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

@@ -10,11 +10,12 @@ interface HelperErrorTextProps {
      * read the entire DOM element. When false, only changes (additionals or
      * removals) will be read. True by default. */
     ariaAtomic?: boolean;
-    /** Aria attribute only used in the invalid state to read error text. This
-     * indicates the priority of the text and when it should be presented to users
-     * using screen readers; "off" indicates that the content should not be presented,
-     * "polite" that it will be announced at the next available time slot, and
-     * "assertive" that it should be announced immediately. "polite" by default. */
+    /** 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;
@@ -26,7 +27,7 @@ interface HelperErrorTextProps {
     text: HelperErrorTextType;
 }
 /**
- * Helper or Error text for forms
+ * Helper or error text for forms components.
  */
-export default function HelperErrorText({ additionalStyles, ariaAtomic, ariaLive, className, id, isInvalid, text, }: HelperErrorTextProps): JSX.Element;
-export {};
+export declare const HelperErrorText: import("@chakra-ui/react").ChakraComponent<({ additionalStyles, ariaAtomic, ariaLive, className, id, isInvalid, text, ...rest }: HelperErrorTextProps) => JSX.Element, {}>;
+export default HelperErrorText;

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

@@ -32,4 +32,5 @@ export interface HeroProps {
      * underneath the heading element. */
     subHeaderText?: string | JSX.Element;
 }
-export default function Hero(props: React.PropsWithChildren<HeroProps>): 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

@@ -6,14 +6,6 @@ export interface HorizontalRuleProps {
     align?: "left" | "right";
     /** ClassName you can add in addition to `horizontal-rule` */
     className?: string;
-    /** Optional height value. This value should be entered with the same
-     * formatting as a CSS height attribute except for percent values (ex. `2`,
-     * `5px`, `1.5rem`). If this prop is omitted or a percent value is used, the
-     * horizontal rule will have a default height of 2px. */
-    height?: string;
-    /** Optional width value. This value should be entered with the same
-     * formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`). If
-     * omitted, the horizontal rule will have a default width of "100%". */
-    width?: string;
 }
-export default function HorizontalRule(props: HorizontalRuleProps): JSX.Element;
+export declare const HorizontalRule: import("@chakra-ui/react").ChakraComponent<(props: HorizontalRuleProps) => JSX.Element, {}>;
+export default HorizontalRule;

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

@@ -32,4 +32,5 @@ export interface IconProps {
 /**
  * Renders SVG-based icons.
  */
-export default function Icon(props: React.PropsWithChildren<IconProps>): JSX.Element;
+export declare const Icon: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<IconProps>) => JSX.Element, {}>;
+export default Icon;

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

@@ -54,5 +54,5 @@ export interface ImageProps extends ImageWrapperProps {
     /** The src attribute is required, and contains the path to the image you want to embed. */
     src: string;
 }
-export default function Image(props: ImageProps): JSX.Element;
-export {};
+export declare const Image: import("@chakra-ui/react").ChakraComponent<(props: ImageProps) => JSX.Element, {}>;
+export default Image;

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

@@ -1,5 +1,4 @@
 import * as React from "react";
-declare type optReqFlagType = "Required" | "Optional" | "" | undefined;
 interface LabelProps {
     /** Additional CSS class name to render in the `label` element. */
     className?: string;
@@ -7,11 +6,15 @@ interface LabelProps {
     htmlFor: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Displays "Required" or "Optional" string alongside the label */
-    optReqFlag?: optReqFlagType;
+    /** 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.
  */
-declare function Label(props: React.PropsWithChildren<LabelProps>): JSX.Element;
+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

@@ -24,5 +24,5 @@ export interface LinkProps {
  * A component that uses an `href` prop or a child anchor element, to create
  * an anchor element with added styling and conventions.
  */
-declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { ListTypes } from "./ListTypes";
-interface DefinitionProps {
+interface DescriptionProps {
     term: string;
-    definition: string | JSX.Element;
+    description: string | JSX.Element;
 }
 export interface ListProps {
     /** Optionally pass in additional Chakra-based styles. */
@@ -17,23 +17,23 @@ export interface ListProps {
     inline?: boolean;
     /** Data to render if children are not passed. For `ListTypes.Ordered` and
      * `ListTypes.Unordered` `List` types, the data structure is an array of
-     * strings to renders as `li` items. For `ListTypes.Definition` `List` types,
-     * the data structure is an array of objects with `term` and `definition`
+     * strings to renders as `li` items. For `ListTypes.Description` `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 | DefinitionProps)[];
+    listItems?: (string | JSX.Element | DescriptionProps)[];
     /** Remove list styling. */
     noStyling?: boolean;
     /** An optional title that will appear over the list. This prop only applies
-     * to Definition Lists. */
+     * to Description Lists. */
     title?: string;
-    /** The type of list: Ordered, Unordered, or Definition. Unordered by default. */
+    /** The type of list: Ordered, Unordered, or Description. Unordered by default. */
     type: ListTypes;
 }
 /**
- * A component that renders list item `li` elements or definition item `dt`
+ * 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 `Definition` list type.
+ * only display for the `Description` list type.
  */
-export default function List(props: React.PropsWithChildren<ListProps>): any;
-export {};
+export declare const List: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<ListProps>) => any, {}>;
+export default List;

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

@@ -1,5 +1,5 @@
 export declare enum ListTypes {
     Ordered = "ol",
     Unordered = "ul",
-    Definition = "dl"
+    Description = "dl"
 }

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

@@ -25,4 +25,5 @@ export interface LogoProps {
  * The `Logo` component renders SVG-based logos and color variants that are
  * commonly used by the New York Public Library.
  */
-export default function Logo(props: React.PropsWithChildren<LogoProps>): JSX.Element;
+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

@@ -23,6 +23,8 @@ declare const _default: {
     logo_qpl_black: string;
     logo_qpl_color: string;
     logo_qpl_white: string;
+    logo_reservoir_icon_color: string;
+    logo_reservoir_vertical_color: string;
     logo_schomburg_black: string;
     logo_schomburg_circle_black: string;
     logo_schomburg_circle_color: string;

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

@@ -36,6 +36,8 @@ export declare enum LogoNames {
     QueensPublicLibraryWhite = "logo_qpl_white",
     QueensPublicLibraryAltBlack = "logo_qpl_alt_black",
     QueensPublicLibraryAltWhite = "logo_qpl_alt_white",
+    ReservoirIconColor = "logo_reservoir_icon_color",
+    ReservoirVerticalColor = "logo_reservoir_vertical_color",
     SchomburgColor = "logo_schomburg_color",
     SchomburgBlack = "logo_schomburg_black",
     SchomburgWhite = "logo_schomburg_white",