@nypl/design-system-react-components 0.25.11 → 0.26.0

package/CHANGELOG.md

@@ -8,6 +8,157 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 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
+
+- Adds a `contentId` prop to the `TemplateAppContainer` component and adds an `id` prop to the `TemplateContent` component. The default value of these `id`s are both set to "mainContent" and it will render as an attribute on the `main` HTML element. This is used as the target for the skip navigation link in consuming applications.
+- Adds an `Accessibility Guide` section to Storybook with a "Skip Navigation" page.
+- Adds the `isFullWidth` prop to the `CheckboxGroup` and `RadioGroup` components. This sets the wrapper element to be full width for labels that need to span its container.
+- Adds an optional key – `accordionType` to the `Accordion`'s `contentData` prop, which allows users to switch the background color of the `Accordion`'s button.
+- Created new `LayoutTypes` enum for row and column layouts.
+- Adds the value "Default" to the `IconSizes` enum.
+
+### Changes
+
+- Updates Storybook's sidebar categories and documentation.
+- Updates the `Image`'s caption font size to "12px" (`text.tag`).
+- Updates the `Checkbox`'s and `Radio`'s `labelText` prop to accept strings and JSX Elements.
+- Updates the `Toggle`'s internal styling for the default and small sizes.
+- Updates the `Accordion` button's background color when expanded, adds a border color when hovered over, and adjusts the padding.
+- Updates the `CardImage`'s margin bottom in the row and column layouts for mobile to be the same.
+- Updates the `CardImage` to have width 100% on mobile regardless of size.
+- Updates all the console warnings with consistent NYPL branding prefix label.
+- Renames the `Accordion` prop `contentData` to `accordionData`.
+- Renames the `Breadcrumbs` prop `colorVariant` to `breadcrumbsType`.
+- Renames the `Card` prop `center` to `isCentered`.
+- Updates the `Card` prop `layout` to use the `LayoutTypes` enum instead of `CardLayouts`.
+- Updates the `CheckboxGroup` prop `layout` to use the `LayoutTypes` enum instead of `CheckboxGroupLayoutTypes`.
+- Renames the `Heading` prop `displaySize` to `size.
+- Renames the `HeadingDisplaySizes` enum to `HeadingSizes.
+- Renames the `Hero` prop `image` to `imageComponent`.
+- Renames the `Image` prop `imageSize` to `size`.
+- Renames the `Notification` prop `centered` to `isCentered`.
+- Updates the `RadioGroup` prop `layout` to use the `LayoutTypes` enum instead of `RadioGroupLayoutTypes`.
+- Internal updates to the `SearchBar` component based on updates from the `Select` and `TextInput` components.
+- Renames the `Select` prop `type` to `selectType`.
+- Updates the `SkeletonLoader` prop `layout` to use the `LayoutTypes` enum instead of `SkeletonLoaderLayouts`.
+- Renames the `StructuredContentImage` prop `imageSize` to `size` (this component is based on the `Image` component).
+- Internal updates to the `StructuredContent` component based on updates from the `Image` and `Heading` components.
+- Renames the `Tabs` prop `contentData` to `tabsData`.
+- Renames the `Text` prop `displaySize` to `size`.
+- Renames the `TextInput` prop `variant` to `textInputType`.
+- Updates the `Card` image-related props into one main prop named `imageProps`. This new prop contains the following properties: alt, aspectRatio, caption, component, credit, isAtEnd, size, and src.
+- Updates the `Hero` prop `image` to `imageAlt` and `imageSrc`. Internally, an `Image` component is created.
+- Renames the `Image` component props `imageAspectRatio` to `aspectRatio`, `imageCaption` to `caption`, and `imageCredit` to `credit`.
+- Updates the `StructuredContent` image-related props into one main prop named `imageProps`. This new prop contains the following properties: alt, aspectRatio, caption, component, credit, position, size, and src.
+- Renames the `ToggleSizes.tsx` file to `ToggleTypes.tsx`. Updates the values from `Large` and `Small` to `Default` and `Small`.
+- Minor update to the logic for the `ProgressIndicator` sizing prop and styles.
+
+### Fixes
+
+- Fixes bug where the Next button in `Pagination` would navigate to the previous page.
+- Fixes the alignment of the first link in the `Pagination` component.
+- Fixes the `Breadcrumbs`' SVG arrow icon fill color for the "Blogs" variant.
+- Fixes the margin right value for list items in the `List` component for the inline style.
+- Fixes bug in the `Select` component where the SVG arrow hides when the component is focused.
+- Fixes the extra bottom spacing in the `HeroTypes.Campaign` `Hero` variant for the mobile view.
+- Fixes the `Slider` component so it doesn't cause a stack overflow client-side issue when updating the slider thumbs through the keyboard arrows. The values are now returned through Chakra's `onChange` callback instead of the `onChangeEnd` callback.
+
+### Removals
+
+- Removes the `CardLayouts`, `CheckboxGroupLayoutTypes`, `RadioGroupLayoutTypes`, and `SkeletonLoaderLayouts` enums.
+- Removes the `CardTypes.tsx`,` CheckboxGroupLayoutTypes.tsx`, and `RadioGroupLayoutTypes.tsx` files.
+
+## 0.25.12 (March 18, 2022)
+
+### Adds
+
+- Adds `Education` section colors to the color palette theme object.
+- Adds a `currentPage` prop to the `Pagination` component, a value that updates the selected page programmatically without the user explicitly requesting it.
+
+### Changes
+
+- Removes the margin from the global `.nypl p` CSS rule.
+- Updates the top and bottom margin of the `List`'s `Unordered` and `Ordered` types.
+- Updates the `Notification`'s icons to be decorative by default.
+- Updates the default placeholder value for the `SearchBar`'s `TextInput` component.
+- Updates the `SearchBar`'s `textInputProps` prop object to not require the `placeholder` property.
+- Updates the `Logo` component to include new variants for `FirstBook` and `Open eBooks`.
+- Updates the border and text styles for the `Select` component.
+- Updates the `Breadcrumbs` component to inlcude an `Education` color variant.
+- Updates the `Icon` component to include the `Education` color values.
+- Updates the default font stack to fix a typo that was disabling `sans-serif` in the stack.
+- Removes the `.nypl-ds` CSS class from the base SCSS file, from the `TemplateAppContainer` component, from the Storybook configuration, and from the entire repo.
+- Moves the base styles from the SCSS global file to the Chakra theme global JS object.
+- Updates the label font size for the `Radio` and `Checkbox` components to be "label.default".
+
+### Fixes
+
+- Fixes the styles for the `Slider` to better accomodate the slider thumbs and the width of the container.
+- Updates the alignment of the `Notifications`'s dismissible icon.
+- Fixes the border and padding from the `fieldset` HTML element by removing it.
+- Fixes alignment for long labels in the `Checkbox` and `Radio` components.
+- Fixes the line height for long labels in the `Toggle` component.
+
 ## 0.25.11 (March 3, 2022)
 
 ### Updates

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._
 
@@ -116,17 +116,7 @@ $ npm install @nypl/design-system-react-components
 @import "~@nypl/design-system-react-components/dist/styles.css";
 ```
 
-3. Add the `nypl-ds` CSS class
-
-Some CSS rules in the Design System, such as the universal focus styling and the box-model, are namespaced to the `.nypl-ds` class. To include those in your app, add `.nypl-ds` to whichever wrapper tag makes sense in your application (e.g., `<div class="app">` or `<div class="container">`).
-
-```jsx
-<div class="app nypl-ds">
-  <!-- your code here -->
-</div>
-```
-
-4. Import the `DSProvider` component
+3. 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.
 
@@ -141,7 +131,7 @@ const ApplicationContainer = (props) => {
   // ...
   return (
     <DSProvider>
-      <div className="my-app nypl-ds">
+      <div className="my-app">
         // ...
         {children}
       </div>
@@ -150,7 +140,7 @@ const ApplicationContainer = (props) => {
 };
 ```
 
-5. Use DS components!
+4. Use DS components!
 
 Consult Storybook for the list of available components and props that they require.
 
@@ -181,13 +171,11 @@ function NewComponent(props) {
 
 ### NYPL DS, NYPL Header, and NYPL Footer
 
-Please note that, if used, the NYPL Header and Footer components should be _outside_ of the `.nypl-ds` wrapper class.
-
 ```jsx
 <body>
   <NYPLHeader />
 
-  <div class="app nypl-ds">
+  <div class="app">
     <!-- your code here -->
   </div>
 
@@ -197,7 +185,7 @@ Please note that, if used, the NYPL Header and Footer components should be _outs
 
 ## 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:
 
@@ -228,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.
 
@@ -283,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:
 
@@ -371,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:
 
@@ -383,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

@@ -1,11 +1,13 @@
 import * as React from "react";
-export interface AccordionContentDataProps {
+import { AccordionTypes } from "./AccordionTypes";
+export interface AccordionDataProps {
+    accordionType?: AccordionTypes;
     label: string;
     panel: string | React.ReactNode;
 }
 export interface AccordionProps {
-    /** Array of data to display */
-    contentData: AccordionContentDataProps[];
+    /** Array of data to display, and an optional accordionType */
+    accordionData: AccordionDataProps[];
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** Whether the accordion is open by default only on its initial rendering */
@@ -15,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/Accordion/AccordionTypes.d.ts

@@ -0,0 +1,5 @@
+export declare enum AccordionTypes {
+    Default = "default",
+    Warning = "warning",
+    Error = "error"
+}

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ColorVariants } from "./BreadcrumbsTypes";
+import { BreadcrumbsTypes } from "./BreadcrumbsTypes";
 export interface BreadcrumbsDataProps {
     url: string;
     text: string | React.ReactNode;
@@ -11,12 +11,12 @@ export interface BreadcrumbProps {
     };
     /** Breadcrumb links as an array */
     breadcrumbsData: BreadcrumbsDataProps[];
+    /** Used to control how the `Hero` component will be rendered. */
+    breadcrumbsType?: BreadcrumbsTypes;
     /** className you can add in addition to 'input' */
     className?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Used to control how the `Hero` component will be rendered. */
-    colorVariant?: ColorVariants;
 }
-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/Breadcrumbs/BreadcrumbsTypes.d.ts

@@ -1,6 +1,7 @@
-export declare enum ColorVariants {
+export declare enum BreadcrumbsTypes {
     Blogs = "blogs",
     BooksAndMore = "booksAndMore",
+    Education = "education",
     Locations = "locations",
     Research = "research",
     WhatsOn = "whatsOn"

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,18 +1,21 @@
 import * as React from "react";
-import { CardLayouts } from "./CardTypes";
-import Heading from "../Heading/Heading";
-import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
+import { LayoutTypes } from "../../helpers/enums";
+import { ComponentImageProps } from "../Image/Image";
 interface CardBaseProps {
     /** Optional value to control the alignment of the text and elements. */
-    center?: boolean;
+    isCentered?: boolean;
     /** Optional value to render the layout in a row or column.
-     * Default is `CardLayouts.Column`. */
-    layout?: CardLayouts;
+     * Default is `LayoutTypes.Column`. */
+    layout?: LayoutTypes;
 }
 interface CardLinkBoxProps {
     /** Main link to use when the full `Card` component should be clickable. */
     mainActionLink?: string;
 }
+interface CardImageProps extends ComponentImageProps {
+    /** Optional boolean value to control the position of the `CardImage`. */
+    isAtEnd?: boolean;
+}
 interface CardActionsProps extends CardBaseProps {
     /** Optional boolean value to control visibility of border on the bottom edge
      * of the card actions element */
@@ -24,33 +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;
-    /** Text description of the image; to follow best practices for accessibility,
-     * this prop should not be left blank if `imageSrc` is passed. */
-    imageAlt?: string;
-    /** Optional value to control the aspect ratio of the `CardImage`; default
-     * value is `ImageRatios.Square`. */
-    imageAspectRatio?: ImageRatios;
-    /** Optional boolean value to control the position of the `CardImage`. */
-    imageAtEnd?: boolean;
-    /** Custom image component used in place of DS `Image` component. */
-    imageComponent?: JSX.Element;
-    /** Optional value to control the size of the `CardImage`. Default value is
-     * `ImageSizes.Default`. */
-    imageSize?: ImageSizes;
-    /** The path to the image displayed within the `Card` component. */
-    imageSrc?: 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;
@@ -27,7 +27,7 @@ export interface CheckboxProps {
     isRequired?: boolean;
     /** The checkbox's label. This will serve as the text content for a `<label>`
      * element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
-    labelText: string;
+    labelText: string | JSX.Element;
     /** The name prop indicates into which group of checkboxes this checkbox
      * belongs. If none is specified, 'default' will be used */
     name?: string;
@@ -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

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { LayoutTypes } from "../../helpers/enums";
 export interface CheckboxGroupProps {
     /** Any child node passed to the component. */
     children: React.ReactNode;
@@ -9,11 +9,13 @@ 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. */
     isDisabled?: boolean;
+    /** Set's the `Checkbox`s' wrapper to be full width. */
+    isFullWidth?: boolean;
     /** A`dds the 'aria-invalid' attribute to the input and
      * sets the error state when true. */
     isInvalid?: boolean;
@@ -23,18 +25,19 @@ export interface CheckboxGroupProps {
      * true, or an "aria-label" if `showLabel` is false. */
     labelText: string;
     /** Renders the checkbox buttons in a row or column (default). */
-    layout?: CheckboxGroupLayoutTypes;
+    layout?: LayoutTypes;
     /** The `name` prop indicates the form group for all the `Checkbox` children. */
     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
@@ -42,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"
 }