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

package/CHANGELOG.md

@@ -8,6 +8,70 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 1.0.6 (July 21, 2022)
+
+### Adds
+
+- Adds the `isLazy` prop to the `Image` component which is set to `false` by default.
+
+### Updates
+
+- Updates the following components to use React's `forwardRef` wrapper function to pass along refs to the correct DOM element. This is for third-party packages and components such as Chakra's `Tooltip` to work correctly.
+  - `Accordion`, `Breadcrumbs`, `Button`, `ButtonGroup`, `Card`, `ComponentWrapper`, `FieldSet`, `Form`, `SimpleGrid`, `Heading`, `HelperErrorText`, `Hero`, `HorizontalRule`, `Icon`, `Image`, `Label`, `List`, `Logo`, `Modal`, `Notification`, `Pagination`, `ProgressIndicator`, `SearchBar`, `SkeletonLoader`, `SkipNavigation`, `Slider`, `StatusBadge`, `StructuredContent`, `Table`, `Tabs`, `Template`, `TemplateAppContainer`, `Text`, `VideoPlayer`.
+- Updates `padding-left` and `padding-right` style properties to `padding-start` and `padding-end`, respectively. Updates `margin-left` and `margin-right` style properties to `margin-start` and `margin-end`, respectively. These changes apply to inline CSS, shorthand Chakra style prop syntax, and Chakra theme file syntax. Note that `margin-start/end` and `padding-start/end` get converted to `margin-inline-start/end` and `padding-inline-start/end` respectively by Chakra UI.
+- Updates the `Icon` component to include variants for legacy versions of `Account` (filled and unfilled), `Facebook`, `Instagram`, `Twitter` and `YouTube`.
+- Updates the `Icon` component to include variants for `Warning` (filled and oultine).
+
+### Removes
+
+- Removes the packages `@mdx-js/react` and `babel-loader` since they are not needed by Storybook.
+
+## 1.0.5 (July 7, 2022)
+
+### Adds
+
+- Exports `ColorCard`.
+
+### Updates
+
+- Updates the `Icon` component to include variants for `actionCheckCircleFilled`, `actionRegistration`, `decorativeEnvelope`, `decorativeLibraryCard` and `decorativeShoppingBag`.
+- Updates the docs for the `Colors` Style Guide to include additional data related to contrast and WCAG compliance.
+- Updates the `Checkbox` and `Radio` components to use `ui.gray.dark` for the default border color.
+- Updates Storybook packages.
+
+### Fixes
+
+- Fixes `useNYPLBreakpoints` hook so it internally controls its own state. This eliminates server/client rendering issues on its initial load.
+
+## 1.0.4 (June 23, 2022)
+
+### Adds
+
+- Adds the `useNYPLBreakpoints` hook. This hook internally uses Chakra's `useMediaQuery` hook to get the current responsive media query breakpoint.
+- Adds `ui.gray.xx-dark` to the color palette.
+- Adds npm packages useful for lazy loading images in the `Image` component.
+- Adds text case styles for `Text` component.
+- Exports `ColorModeScript`, `cookieStorageManager`, `localStorageManager`, `useColorMode`, and `useColorModeValue` from Chakra UI for consuming application usage.
+- Adds a "Color Mode" documentation page in Storybook.
+- Adds `ui.white` as default background color to `Checkbox` and `Radio` components.
+- Adds text case styles for `Heading` component
+
+### Updates
+
+- Updates the `Logo` component to include a variant for `MLN Color`.
+- Updates the `Icon` component to include variants for `Facebook`, `Instagram`, `Tumblr`, `Twitter` and `YouTube`.
+- Updates the `Icon` component to include variants for `Building`, `Exit`, `Locator`, `Power` and `Settings`.
+- Updates to Storybook version 6.5.
+- Explicitly sets the default color mode value to `"light"`.
+- Updates how the `styles.scss` and `resources.scss` files are organized and compiled so that they can be imported in any tech stack.
+- Updates the docs for the `Table` commponent to remove the example that does not include column headers.
+- Updates the `Button`, `Select` and `TextInput` components to use NYPL standard minimum height in mobile viewport.
+- Updates the `SearchBar` component to change how the width of the internal `Select` component is handled.
+
+### Fixes
+
+- Fixes the styles for the sub-labels in the `DatePicker` component.
+
 ## 1.0.3 (June 9, 2022)
 
 ### Adds

package/README.md

@@ -13,108 +13,27 @@ Storybook documentation
 
 | Table of Contents |                                                                                     |
 | ----------------- | ----------------------------------------------------------------------------------- |
-| 1.                | [Contributing Quickstart](#contributing-quickstart)                                 |
-| 2.                | [Developing with NPM Link](#developing-with-npm-link)                               |
-| 3.                | [Using the Design System in Your Product](#using-the-design-system-in-your-product) |
-| 4.                | [Using Chakra UI Components](#using-chakra-ui-components)                           |
-| 5.                | [Storybook](#storybook)                                                             |
-| 6.                | [Typescript Usage](#typescript-usage)                                               |
-| 7.                | [Unit Testing](#unit-testing)                                                       |
-| 8.                | [Accessibility](#accessibility)                                                     |
+| 1.                | [Using the Design System in Your Product](#using-the-design-system-in-your-product) |
+| 2.                | [Using Chakra UI Components](#using-chakra-ui-components)                           |
+| 3.                | [Storybook](#storybook)                                                             |
+| 4.                | [Accessibility](#accessibility)                                                     |
+| 5.                | [Contributing Quickstart](#contributing-quickstart)                                 |
+| 6.                | [Developing with NPM Link](#developing-with-npm-link)                               |
+| 7.                | [Typescript Usage](#typescript-usage)                                               |
+| 8.                | [Unit Testing](#unit-testing)                                                       |
 | 9.                | [CDN](#cdn)                                                                         |
 
-## Contributing Quickstart
-
-Follow these steps to setup a local installation of the project:
-
-1. Clone the repo
-
-```sh
-$ git clone https://github.com/NYPL/nypl-design-system.git
-```
-
-2. Install all the dependencies
-
-```sh
-$ npm install
-```
-
-3. Run the Storybook instance and view it at `http://localhost:6006`
-
-```sh
-$ npm run storybook
-```
-
-You can now edit styles or templates in the `src` directory, and they will automatically re-build and update in the Storybook instance. Adding new stories or changing story names will require a page refresh.
-
-Information about active maintainers, how we run reviews, and more can be found in our wiki page for [Contributing to the Design System](https://github.com/NYPL/nypl-design-system/wiki/Contributing-to-the-React-Library).
-
-Follow the [contribution document](/.github/CONTRIBUTING.md) to follow git branching convetions, component creation and update guidelines, testing methodoly, and documentation guidelines.
-
-### Node Version
-
-We recommend using Node version 12.22.x since the DS has some issues with versions higher than 12.x. The Github Actions for linting, automated testing, deploying to Github Pages, and releasing to npm are all running on Node 12.x.
-
-If you are using `nvm`, the local `.nvmrc` file can be use to set your local Node version with the `nvm use` command (will be set to `12.22.x`).
-
-## Developing with NPM Link
-
-To develop with a local version of the Design System:
-
-1. In the Design System directory, run:
-
-```sh
-$ npm link
-```
-
-2. Go to the consuming application directory and run:
-
-```sh
-$ npm link @nypl/design-system-react-components
-```
-
-3. Go back to the Design System directory and run the following command. It allos the local Design System to be rebuilt and exported automatically:
-
-```sh
-$ npm start
-```
-
-### Error Troubleshooting
-
-It's possible when running `npm link` that you'll get an `Invalid Hook` issue. If this occurs, it's most likely caused by having two versions of React when trying to run the application while the NYPL DS package is linked. This [Duplicate React](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react) issue is covered by the React team.
-
-To be more specific, you should run the following in your local DS directory, where `[../path/to/application]` is the local directory of the consuming application.
-
-```sh
-$ npm link [../path/to/application]/node_modules/react
-```
-
-Now you should be able to run `npm start` in the DS directory and `npm run dev` (or whatever your application uses) in the application directory and not get an `Invalid Hook` error.
-
-### npm Unlink
-
-To unlink the DS codebase:
-
-1. Run `npm unlink` in the Design System directory.
-2. Run `npm unlink --no-save @nypl/design-system-react-components` in the consuming application.
-
 ## Using the Design System in Your Product
 
-To use the Design System in your project:
+The Reservoir Design System package is distributed on npm.
 
-1. Install the DS:
+1. Install the package in your app's directory:
 
 ```sh
 $ npm install @nypl/design-system-react-components
 ```
 
-2. Import the styles in your main css file
-
-```css
-@import "~@nypl/design-system-react-components/dist/styles.css";
-```
-
-3. Import the `DSProvider` component
+2. Import the `DSProvider` component
 
 In order to use DS components in a consuming application, there is a necessary step that must be done for component styles to properly render. Consuming applications need to wrap all the DS components with a simple provider component. Fortunately, this only needs to be done once at the top level of the consuming application.
 
@@ -138,7 +57,59 @@ const ApplicationContainer = (props) => {
 };
 ```
 
-4. Use DS components!
+3. Import the minified styles `@nypl/design-system-react-components/dist/styles.css` file in your app.
+
+This file contains normalized reset CSS rules, system fonts, the `react-datepicker`'s styles, breakpoint CSS variables, and overriding styles for a few components.
+
+Importing this file varies on the stack of the application. For Nextjs apps, the file can be imported in the `_app.tsx` file:
+
+```tsx
+// _app.tsx
+@import "@nypl/design-system-react-components/dist/styles.css";
+
+import {
+  DSProvider,
+  TemplateAppContainer,
+} from "@nypl/design-system-react-components";
+...
+```
+
+Otherwise, it can be imported in the app's main SCSS file:
+
+```scss
+// main.scss (for example)
+@import "@nypl/design-system-react-components/dist/styles.css";
+
+body {
+  ....
+}
+```
+
+Note: Using tilde to import scss/css is no longer a best practice for apps using _recent_ versions of webpack or parcel.
+
+```scss
+// No longer a best practice:
+@import "~@nypl/design-system-react-components/dist/styles.css";
+```
+
+For apps using parcel, prepend the string import with `npm:` such as :
+
+```scss
+@import "npm:@nypl/design-system-react-components/dist/styles.css";
+```
+
+4. Optionally import the `@nypl/design-system-react-components/dist/resources.scss` file in your main _scss_ file. This file contains useful SCSS mixins that can be used for global or component style rules.
+
+```scss
+@import "@nypl/design-system-react-components/dist/resources.scss";
+
+// `screenreader-only` is one example of a mixing from `resources.scss`:
+legend {
+  @include screenreader-only;
+}
+```
+
+5. Use DS components!
 
 Consult Storybook for the list of available components and props that they require.
 
@@ -196,22 +167,6 @@ Find more information about the Design System's internal use of Chakra to create
 
 Chakra was integrated into the Design System in version `0.25.0`. For those looking to update to a version greater than or equal `0.25.0`, check out our [Chakra Migration Guide](/CHAKRA_MIGRATION_GUIDE.md).
 
-## CDN
-
-You can also use the Design System styles in your project through the `unpkg` CDN:
-
-```jsx
-<link href="https://unpkg.com/@nypl/design-system-react-components/dist/styles.css">
-```
-
-If you need to reference a particular version you can do do by including the version number in the URL:
-
-```jsx
-<link href="https://unpkg.com/@nypl/design-system-react-components@0.9.1/dist/styles.css">
-```
-
-You can check out a working Codepen with unpkg [here](https://codepen.io/edwinguzman/pen/ExmXGKx).
-
 ## Storybook
 
 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/reservoir/v1/?path=/story/welcome--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.
@@ -267,6 +222,101 @@ $ npm run build-storybook:v1
 
 You can then view `/reservoir/v1/index.html` in your browser. _Make sure not to commit this directory_.
 
+## Accessibility
+
+### Development and Storybook
+
+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, and much more.
+
+We make use of:
+
+- `eslint-plugin-jsx-a11y` for finding accessibility errors through linting and through IDE environments.
+- `jest-axe` for running [`axe-core`](https://github.com/dequelabs/axe-core) on _every_ component's unit test file. This is part of the automated tests that run in Github Actions through the `npm test` command.
+- `@storybook/addon-a11y` for real-time accessibility testing in the browser through Storybook. _Every_ component has a tab that displays violations, passes, and incomplete checks performed by `axe-core`.
+
+If applicable, DS components have section(s) on accessibility in their Storybook documentation. For example, in the `Slider`'s [Storybook file](/src/components/Slider/Slider.stories.mdx), there are two "Accessibility" sections for each of the two `Slider` types, "single" and "range". This gives an explanation on additional changes we made to make the combination of elements in the `Slider` component accessible.
+
+### Product Requirements
+
+The Reservoir Design System provides accessible stories, but real 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.
+
+## Contributing Quickstart
+
+Follow these steps to setup a local installation of the project:
+
+1. Clone the repo
+
+```sh
+$ git clone https://github.com/NYPL/nypl-design-system.git
+```
+
+2. Install all the dependencies
+
+```sh
+$ npm install
+```
+
+3. Run the Storybook instance and view it at `http://localhost:6006`
+
+```sh
+$ npm run storybook
+```
+
+You can now edit styles or templates in the `src` directory, and they will automatically re-build and update in the Storybook instance. Adding new stories or changing story names will require a page refresh.
+
+Information about active maintainers, how we run reviews, and more can be found in our wiki page for [Contributing to the Design System](https://github.com/NYPL/nypl-design-system/wiki/Contributing-to-the-React-Library).
+
+Follow the [contribution document](/.github/CONTRIBUTING.md) to follow git branching convetions, component creation and update guidelines, testing methodoly, and documentation guidelines.
+
+### Node Version
+
+We recommend using Node version 12.22.x since the DS has some issues with versions higher than 12.x. The Github Actions for linting, automated testing, deploying to Github Pages, and releasing to npm are all running on Node 12.x.
+
+If you are using `nvm`, the local `.nvmrc` file can be use to set your local Node version with the `nvm use` command (will be set to `12.22.x`).
+
+## Developing with NPM Link
+
+To develop with a local version of the Design System:
+
+1. In the Design System directory, run:
+
+```sh
+$ npm link
+```
+
+2. Go to the consuming application directory and run:
+
+```sh
+$ npm link @nypl/design-system-react-components
+```
+
+3. Go back to the Design System directory and run the following command. It allos the local Design System to be rebuilt and exported automatically:
+
+```sh
+$ npm start
+```
+
+### Error Troubleshooting
+
+It's possible when running `npm link` that you'll get an `Invalid Hook` issue. If this occurs, it's most likely caused by having two versions of React when trying to run the application while the NYPL DS package is linked. This [Duplicate React](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react) issue is covered by the React team.
+
+To be more specific, you should run the following in your local DS directory, where `[../path/to/application]` is the local directory of the consuming application.
+
+```sh
+$ npm link [../path/to/application]/node_modules/react
+```
+
+Now you should be able to run `npm start` in the DS directory and `npm run dev` (or whatever your application uses) in the application directory and not get an `Invalid Hook` error.
+
+### npm Unlink
+
+To unlink the DS codebase:
+
+1. Run `npm unlink` in the Design System directory.
+2. Run `npm unlink --no-save @nypl/design-system-react-components` in the consuming application.
+
 ## Typescript Usage
 
 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.
@@ -353,38 +403,26 @@ Through the [`@storybook/addon-jest`](https://www.npmjs.com/package/@storybook/a
 
 After writing new tests, run `npm run test:generate-output` to create a new JSON file that is used by Storybook. This JSON file contains all the test suites for all the components and Storybook picks this up and automatically combines a component with its relevant unit tests. Make sure to commit this file although new builds on Github Pages will recreate this file for the production Storybook instance.
 
-## Accessibility
-
-### Development and Storybook
-
-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:
-
-- `eslint-plugin-jsx-a11y` for finding accessibility errors through linting and through IDE environments.
-- `jest-axe` for running [`axe-core`](https://github.com/dequelabs/axe-core) on _every_ component's unit test file. This is part of the automated tests that run in Github Actions through the `npm test` command.
-- `@storybook/addon-a11y` for real-time accessibility testing in the browser through Storybook. _Every_ component has a tab that displays violations, passes, and incomplete checks performed by `axe-core`.
-
-If applicable, DS components have section(s) on accessibility in their Storybook documentation. For example, in the `Slider`'s [Storybook file](/src/components/Slider/Slider.stories.mdx), there are two "Accessibility" sections for each of the two `Slider` types, "single" and "range". This gives an explanation on additional changes we made to make the combination of elements in the `Slider` component accessible.
-
-### Product Requirements
-
-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.
-
 ## CDN
 
 You can also use the Design System styles in your project through the `unpkg` CDN:
 
-```jsx
-<link href="https://unpkg.com/@nypl/design-system-react-components/dist/styles.css">
+```html
+<link
+  href="https://unpkg.com/@nypl/design-system-react-components/dist/styles.css"
+/>
+<script src="https://unpkg.com/@nypl/design-system-react-components/dist/design-system-react-components.cjs.production.min.js" />
+<script src="https://unpkg.com/@nypl/design-system-react-components/dist/design-system-react-components.esm.js" />
 ```
 
 If you need to reference a particular version you can do do by including the version number in the URL:
 
-```jsx
-<link href="https://unpkg.com/@nypl/design-system-react-components@0.9.1/dist/styles.css">
+```html
+<link
+  href="https://unpkg.com/@nypl/design-system-react-components@1.0.0/dist/styles.css"
+/>
+<script src="https://unpkg.com/@nypl/design-system-react-components@1.0.0/dist/design-system-react-components.cjs.production.min.js" />
+<script src="https://unpkg.com/@nypl/design-system-react-components@1.0.0/dist/design-system-react-components.esm.js" />
 ```
 
 You can check out a working Codepen with unpkg [here](https://codepen.io/edwinguzman/pen/ExmXGKx).

package/dist/__tests__/mediaMatchMock.d.ts

@@ -0,0 +1,79 @@
+/**
+ * NYPL Note:
+ * This file is directly taken from Chakra:
+ * https://github.com/chakra-ui/chakra-ui/blob/main/packages/media-query/tests/matchmedia-mock-plus.ts
+ *
+ * We need this to test the `useNYPLBreakpoints` hook and, unfortunately,
+ * this function is not exported by Chakra.
+ */
+/**
+ * This mock is a combination of jest-matchmedia-mock
+ * https://github.com/dyakovk/jest-matchmedia-mock and
+ * mq-polyfill https://github.com/bigslycat/mq-polyfill.
+ *
+ * A solution which allowed resizing and a more realistic implementation of
+ * matchMedia was the reason for its creation. Neither project provided a good
+ * solution. Combining their strong points does. The class will listen for a
+ * resize event which is provided by a resizeTo function defined in the test:
+ *
+ *  window.resizeTo = function resizeTo(width, height) {
+ *    Object.assign(this, {
+ *      innerWidth: width,
+ *      innerHeight: height,
+ *      outerWidth: width,
+ *      outerHeight: height,
+ *    }).dispatchEvent(new this.Event('resize'))
+ *  }
+ *
+ * Listeners are only called if there has been a change in the match
+ * status for their media query.
+ */
+declare type MediaQueryListener = (this: MediaQueryList) => void;
+interface MediaQueryList {
+    readonly matches: boolean;
+    readonly media: string;
+    onchange: MediaQueryListener | null;
+    addListener(listener: MediaQueryListener): void;
+    removeListener(listener: MediaQueryListener): void;
+    addEventListener(type: "change", listener: MediaQueryListener): void;
+    removeEventListener(type: "change", listener: MediaQueryListener): void;
+    dispatchEvent(event: Event): boolean;
+}
+export default class MatchMedia {
+    private mediaQueries;
+    private prevMatchMap;
+    private mediaQueryList;
+    constructor();
+    private compileQuery;
+    private evalQuery;
+    /**
+     *
+     * Adds a listener function for the window resize event
+     * @private
+     */
+    private handleResize;
+    private addListener;
+    private removeListener;
+    /**
+     * Returns an array listing the media queries for which the matchMedia has registered listeners
+     * @public
+     */
+    getMediaQueries(): string[];
+    /**
+     * Returns a copy of the array of listeners for the specified media query
+     * @public
+     */
+    getListeners(mediaQuery: string): MediaQueryListener[];
+    /**
+     * Clears all registered media queries and their listeners
+     * @public
+     */
+    clear(): void;
+    /**
+     * Clears all registered media queries and their listeners,
+     * and destroys the implementation of `window.matchMedia`
+     * @public
+     */
+    destroy(): void;
+}
+export {};

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type AccordionTypes = "default" | "warning" | "error";
 export interface AccordionDataProps {
     accordionType?: AccordionTypes;
@@ -17,5 +17,5 @@ export interface AccordionProps {
  * Accordion component that shows content on toggle. Can be used to display
  * multiple accordion items together.
  */
-export declare const Accordion: import("@chakra-ui/react").ChakraComponent<(props: AccordionProps) => JSX.Element, {}>;
+export declare const Accordion: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Accordion;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type BreadcrumbsTypes = "blogs" | "booksAndMore" | "education" | "locations" | "research" | "whatsOn";
 export interface BreadcrumbsDataProps {
     url: string;
@@ -14,5 +14,5 @@ export interface BreadcrumbProps {
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
 }
-export declare const Breadcrumbs: import("@chakra-ui/react").ChakraComponent<(props: BreadcrumbProps) => JSX.Element, {}>;
+export declare const Breadcrumbs: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Breadcrumbs;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type ButtonElementType = "submit" | "button" | "reset";
 export declare type ButtonTypes = "primary" | "secondary" | "callout" | "pill" | "link" | "noBrand";
 interface ButtonProps {
@@ -21,5 +21,7 @@ interface ButtonProps {
 /**
  * Renders a simple `button` element with custom variant styles.
  */
-export declare const Button: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<ButtonProps>) => JSX.Element, {}>;
+export declare const Button: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ButtonProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>, {}>;
 export default Button;

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { LayoutTypes } from "../../helpers/types";
 export declare type ButtonGroupWidths = "default" | "full";
 interface ButtonGroupProps {
@@ -18,5 +18,7 @@ interface ButtonGroupProps {
  * to row or column and the width of internal `Button` components can be set to
  * the parent's full width or the `Button`'s content width
  */
-export declare const ButtonGroup: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<ButtonGroupProps>) => JSX.Element, {}>;
+export declare const ButtonGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ButtonGroupProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default ButtonGroup;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { LayoutTypes } from "../../helpers/types";
 import { ComponentImageProps } from "../Image/Image";
 interface CardBaseProps {
@@ -44,8 +44,12 @@ export interface CardProps extends CardBaseProps, CardWrapperProps {
      * the row layout. */
     isAlignedRightActions?: boolean;
 }
-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 CardHeading: import("@chakra-ui/react").ChakraComponent<import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<import("../Heading/Heading").HeadingProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLHeadingElement>>, {}>, {}>;
 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 declare const Card: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CardProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Card;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 interface CheckboxIconProps {
     /** When using the Checkbox as a "controlled" form element, you can specify

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { LayoutTypes } from "../../helpers/types";
 export interface CheckboxGroupProps {
@@ -45,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.
  */
-export declare const CheckboxGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLInputElement>>, {}>;
+export declare const CheckboxGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default CheckboxGroup;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export interface ComponentWrapperProps {
     /** The UI elements that will be wrapped by this component */
@@ -25,5 +25,7 @@ export interface ComponentWrapperProps {
     /** Offers the ability to hide the helper/invalid text. */
     showHelperInvalidText?: boolean;
 }
-export declare const ComponentWrapper: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<ComponentWrapperProps>) => JSX.Element, {}>;
+export declare const ComponentWrapper: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ComponentWrapperProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default ComponentWrapper;

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

@@ -18,5 +18,7 @@ interface FieldsetProps {
  * A wrapper component that renders a `fieldset` element along with a `legend`
  * element as its first child. Commonly used to wrap form components.
  */
-export declare const Fieldset: import("@chakra-ui/react").ChakraComponent<({ children, className, id, isLegendHidden, isRequired, legendText, showRequiredLabel, ...rest }: React.PropsWithChildren<FieldsetProps>) => JSX.Element, {}>;
+export declare const Fieldset: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<FieldsetProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & HTMLFieldSetElement>>, {}>;
 export default Fieldset;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { GridGaps } from "../Grid/SimpleGrid";
 interface FormBaseProps {
     /** className to be applied to FormRow, FormField, and Form */
@@ -25,5 +25,7 @@ export declare const FormRow: import("@chakra-ui/react").ChakraComponent<(props:
 /** FormField child-component */
 export declare const FormField: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<FormChildProps>) => JSX.Element, {}>;
 /** Main Form component */
-export declare const Form: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<FormProps>) => JSX.Element, {}>;
+export declare const Form: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<FormProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLFormElement>>, {}>;
 export default Form;