@nypl/design-system-react-components 0.26.1 → 1.0.0

package/CHANGELOG.md

@@ -8,6 +8,60 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 1.0.0 (May 12, 2022)
+
+This is the first stable release of the NYPL Reservoir Design System! We've been looking forward to this moment for over two years.
+
+### Updates
+
+- Updates all links throughout the documentation to point to the new production URLs.
+
+## 0.28.0 (May 9, 2022)
+
+### Adds
+
+- Adds `max`, `maxLength`, `min`, and `onClick` props to the `TextInput` component.
+- Adds the `SkipNavigation` component and adds this component inside the `TemplateAppContainer` component. The `SkipNavigation` component renders accessible links to the main content of a page and accessibility information on NYPL.org.
+- Adds the `ButtonGroup` component for `Button` layout.
+
+### Updates
+
+- Updates how styles are passed down to internal components in `Card`, `Checkbox`, `CheckboxGroup`, `ComponentWrapper`, `DatePicker`, `Hero`, `Notification`, `Pagination`, `Radio`, `RadioGroup`, `SearchBar`, and `Slider`. This is based on removing the `additionalStyles` prop and passing down styles to the `__css` prop.
+- Updates how the `id` is passed in the `DatePicker`'s custom `TextInput` component.
+- Updates how some prop values are passed. Instead of using a Typescript enum object, a Typescript type with the string literal values is used. This still restricts the accepted values for certain props. The enum to string literal type conversion includes the following variables: `AccordionType`, `BreadcrumbsTypes`, `ButtonTypes`, `DatePickerTypes`, `FormGaps` (deleted), `GridGaps`, `HeadingSizes`, `HeadingLevels`, `HeroTypes`, `IconAlign`, `IconTypes`, `IconRotationTypes`, `IconColors`, `IconSizes`, `IconNames`, `LinkTypes`, `ListTypes`, `LogoColors`, `LogoSizes`, `LogoNames`, `NotificationTypes`, `SelectTypes`, `LabelPositions`, `SkeletonLoaderImageRatios`, `StatusBadgeTypes`, `StructuredContentImagePosition`, `TextSizes`, `TextInputTypes`, `TextInputFormats`, `TextInputVariants`, `ToggleSizes`, `VideoPlayerTypes`, `VideoPlayerAspectRatios`, and `LayoutTypes`.
+- Updates the spacing for caption and credit text from `margin-bottom` to `margin-top` in `Image` component
+- Updates how the `DatePicker` and `Slider` components internally use `TextInput`.
+- Updates how the `Pagination` component internally uses `Link`.
+- Updates how the `Tabs` component internally uses `Button`.
+- Updates how images are passed to the `Hero` component. Instead of `imageAlt` and `imageSrc` props, now an object must be passed to the `imageProps` prop.
+- Updates the values for the `name` prop for the `Icon` and `Logo` components.
+- Updates the `Table` component to allow JSX elements to be rendered in the data cells.
+
+### Removals
+
+- Removes the `additionalStyles` attributes from the `Breadcrumbs`, `Button`, `Heading`, `HelperErrorText`, `Icon`, `Link`, `List`, `Logo`, `Select`, `TextInput`, and `Toggle` components.
+- Removes `getVariant` and `getStorybookEnumValues` helper functions.
+- Removes all Typescript enum objects in favor of string literal types.
+- Remove the bottom margin attribute that is applied to the parent element for the `Select` component.
+- Removes the `attributes` prop from: `Button`, `Link`, and `TextInput` components.
+
+## 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

package/README.md

@@ -10,7 +10,7 @@ _Note: This library is still in beta. Until we release the stable `1.0.0` versio
 
 Storybook documentation
 
-- [Production - deployed to Github Pages](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/introduction--page)
+- [Production - deployed to Github Pages](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/welcome--page)
 - [Development - deployed to Tugboat QA](https://development-6y1v6na1ceqnmojvc5akrm5ewys3cshs.tugboat.qa/?path=/story/introduction--page)
 
 | Table of Contents |                                                                                     |
@@ -194,7 +194,7 @@ The list of re-exported Chakra components can be found in the main [index.ts](/s
 Find more information about the Design System's internal use of Chakra to create and refactor components in the Storybook documentation page. The following two links have the same information but in different formats for your reading preference:
 
 - [MDX format](/src/docs/Chakra.stories.mdx)
-- [Storybook page](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page)
+- [Storybook page](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/chakra-ui--page)
 
 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).
 
@@ -216,7 +216,7 @@ You can check out a working Codepen with unpkg [here](https://codepen.io/edwingu
 
 ## 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/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.
+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.
 
 ### Documentation Instances
 
@@ -224,7 +224,7 @@ There are currently two main instances of the Reservoir Design System Storybook
 
 **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 Reservoir 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/reservoir/v1/?path=/story/welcome--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.
 
@@ -261,13 +261,13 @@ To help consuming application developers understand which version of the DS is r
 
 ### Static Build
 
-There should be no need to run the static Storybook instance while actively developing -- it's used exclusively for building out the `gh-pages` environment and deploying it to [Github Pages](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/introduction--page). In the event that you do run the static Storybook npm script, run:
+There should be no need to run the static Storybook instance while actively developing -- it's used exclusively for building out the `gh-pages` environment and deploying it to [Github Pages](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/welcome--page). In the event that you do run the static Storybook npm script, run:
 
 ```sh
-$ npm run build-storybook
+$ npm run build-storybook:v1
 ```
 
-You can then view `/storybook-static/index.html` in your browser. _Make sure not to commit this directory_.
+You can then view `/reservoir/v1/index.html` in your browser. _Make sure not to commit this directory_.
 
 ## Typescript Usage
 

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { AccordionTypes } from "./AccordionTypes";
+export declare type AccordionTypes = "default" | "warning" | "error";
 export interface AccordionDataProps {
     accordionType?: AccordionTypes;
     label: string;

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

@@ -1,14 +1,10 @@
 import * as React from "react";
-import { BreadcrumbsTypes } from "./BreadcrumbsTypes";
+export declare type BreadcrumbsTypes = "blogs" | "booksAndMore" | "education" | "locations" | "research" | "whatsOn";
 export interface BreadcrumbsDataProps {
     url: string;
     text: string | React.ReactNode;
 }
 export interface BreadcrumbProps {
-    /** Optionally pass in additional Chakra-based styles. */
-    additionalStyles?: {
-        [key: string]: any;
-    };
     /** Breadcrumb links as an array */
     breadcrumbsData: BreadcrumbsDataProps[];
     /** Used to control how the `Hero` component will be rendered. */

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

@@ -1,16 +1,8 @@
 import * as React from "react";
-import { ButtonTypes } from "./ButtonTypes";
 export declare type ButtonElementType = "submit" | "button" | "reset";
+export declare type ButtonTypes = "primary" | "secondary" | "callout" | "pill" | "link" | "noBrand";
 interface ButtonProps {
-    /** Optionally pass in additional Chakra-based styles. */
-    additionalStyles?: {
-        [key: string]: any;
-    };
-    /** Additional attributes passed to the button. */
-    attributes?: {
-        [key: string]: any;
-    };
-    /** The kind of button assigned through the `ButtonTypes` enum. */
+    /** The button variation to render based on the `ButtonTypes` type.*/
     buttonType?: ButtonTypes;
     /** Additional className to use. */
     className?: string;

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { LayoutTypes } from "../../helpers/types";
+export declare type ButtonGroupWidths = "default" | "full";
+interface ButtonGroupProps {
+    /** Sets the width to "default" (for "fit-content") or "full". */
+    buttonWidth?: ButtonGroupWidths;
+    /** Additional className to use. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Set's the disabled state to all the internal `Button` components. */
+    isDisabled?: boolean;
+    /** Renders the layout of `Button` components in a row or column. */
+    layout?: LayoutTypes;
+}
+/**
+ * A simple wrapper to group `Button` components together. The layout can be set
+ * 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 default ButtonGroup;

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

@@ -1,11 +1,11 @@
 import * as React from "react";
-import { LayoutTypes } from "../../helpers/enums";
+import { LayoutTypes } from "../../helpers/types";
 import { ComponentImageProps } from "../Image/Image";
 interface CardBaseProps {
     /** Optional value to control the alignment of the text and elements. */
     isCentered?: boolean;
     /** Optional value to render the layout in a row or column.
-     * Default is `LayoutTypes.Column`. */
+     * Default is `"column"`. */
     layout?: LayoutTypes;
 }
 interface CardLinkBoxProps {

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

@@ -1,6 +1,15 @@
 import * as React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export interface CheckboxProps {
+interface CheckboxIconProps {
+    /** When using the Checkbox as a "controlled" form element, you can specify
+     * the Checkbox's checked state using this prop.
+     * Learn more about controlled and uncontrolled form fields:
+     * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
+    isChecked?: boolean;
+    /** Adds the indeterminate state to the `Checkbox`. */
+    isIndeterminate?: boolean;
+}
+export interface CheckboxProps extends CheckboxIconProps {
     /** className you can add in addition to 'input' */
     className?: string;
     /** Optional string to populate the HelperErrorText for standard state */
@@ -10,16 +19,9 @@ export interface CheckboxProps {
     /** Optional string to populate the HelperErrorText for the error state
      * when `isInvalid` is true. */
     invalidText?: HelperErrorTextType;
-    /** When using the Checkbox as a "controlled" form element, you can specify
-     * the Checkbox's checked state using this prop.
-     * Learn more about controlled and uncontrolled form fields:
-     * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
-    isChecked?: boolean;
     /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
      * This also makes the text italic and color scheme gray. */
     isDisabled?: boolean;
-    /** Adds the indeterminate state to the `Checkbox`. */
-    isIndeterminate?: boolean;
     /** Adds the 'aria-invalid' attribute to the input when true. This also makes
      * the color theme "NYPL error" red for the button and text. */
     isInvalid?: boolean;

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-import { LayoutTypes } from "../../helpers/enums";
+import { LayoutTypes } from "../../helpers/types";
 export interface CheckboxGroupProps {
     /** Any child node passed to the component. */
     children: React.ReactNode;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { DatePickerTypes } from "./DatePickerTypes";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { TextInputRefType } from "../TextInput/TextInput";
+export declare type DatePickerTypes = "full" | "month" | "year";
 export interface FullDateType {
     /** Date object that gets returned for the onChange
      * function only for date ranges. */

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

@@ -1,12 +1,12 @@
 import * as React from "react";
-import { FormGaps } from "./FormTypes";
+import { GridGaps } from "../Grid/SimpleGrid";
 interface FormBaseProps {
     /** className to be applied to FormRow, FormField, and Form */
     className?: string;
     /** Optional spacing size; if omitted, the default `large` (2rem / 32px)
      * spacing will be used; ```IMPORTANT: for general form layout, this prop
      * should not be used``` */
-    gap?: FormGaps;
+    gap?: GridGaps;
     /** ID that other components can cross reference (internal use) */
     id: string;
 }

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

@@ -1,11 +1,14 @@
 import * as React from "react";
-import { GridGaps } from "./GridTypes";
+export declare type GridGaps = "grid.xxs" | "grid.xs" | "grid.s" | "grid.m" | "grid.l" | "grid.xl" | "grid.xxl";
 export interface SimpleGridProps {
     /** Additional class name. */
     className?: string;
-    /** Optional numeric value to override the default column count; the default column count is 3 */
+    /** Optional numeric value to override the default column count; the default
+     * column count is 3. */
     columns?: number;
-    /** Optional gap size; if omitted, the default `large` (2rem / 32px) spacing will be used; ```IMPORTANT: for standard grid layouts, this prop should not be used``` */
+    /** Optional gap size; if omitted, the default `large` (2rem / 32px) spacing
+     * will be used; `IMPORTANT: for standard grid layouts, this prop should
+     * not be used.` */
     gap?: GridGaps;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;

package/dist/components/Heading/Heading.d.ts

@@ -1,10 +1,7 @@
 import * as React from "react";
-import { HeadingSizes, HeadingLevels } from "./HeadingTypes";
+export declare type HeadingSizes = "primary" | "secondary" | "tertiary" | "callout";
+export declare type HeadingLevels = "one" | "two" | "three" | "four" | "five" | "six";
 export interface HeadingProps {
-    /** Optionally pass in additional Chakra-based styles. */
-    additionalStyles?: {
-        [key: string]: any;
-    };
     /** Optional className that appears in addition to `heading` */
     className?: string;
     /** Optional ID that other components can cross reference for accessibility purposes */

package/dist/components/HelperErrorText/HelperErrorText.d.ts

@@ -2,10 +2,6 @@
 export declare type AriaLiveValues = "assertive" | "off" | "polite";
 export declare type HelperErrorTextType = string | JSX.Element;
 interface HelperErrorTextProps {
-    /** Optionally pass in additional Chakra-based styles. */
-    additionalStyles?: {
-        [key: string]: any;
-    };
     /** Aria attribute. When true, assistive technologies will
      * read the entire DOM element. When false, only changes (additionals or
      * removals) will be read. True by default. */
@@ -29,5 +25,5 @@ interface HelperErrorTextProps {
 /**
  * Helper or error text for forms components.
  */
-export declare const HelperErrorText: import("@chakra-ui/react").ChakraComponent<({ additionalStyles, ariaAtomic, ariaLive, className, id, isInvalid, text, ...rest }: HelperErrorTextProps) => JSX.Element, {}>;
+export declare const HelperErrorText: import("@chakra-ui/react").ChakraComponent<({ ariaAtomic, ariaLive, className, id, isInvalid, text, ...rest }: HelperErrorTextProps) => JSX.Element, {}>;
 export default HelperErrorText;

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

@@ -1,5 +1,9 @@
 import * as React from "react";
-import { HeroTypes } from "./HeroTypes";
+import { ComponentImageProps } from "../Image/Image";
+export declare type HeroTypes = "primary" | "secondary" | "secondaryBooksAndMore" | "secondaryLocations" | "secondaryResearch" | "secondaryWhatsOn" | "tertiary" | "campaign" | "fiftyFifty";
+export declare const heroSecondaryTypes: string[];
+export interface HeroImageProps extends Pick<ComponentImageProps, "alt" | "src"> {
+}
 export interface HeroProps {
     /** Optional hex color value used to override the default background
      * color for a given `Hero` variation.
@@ -17,14 +21,14 @@ export interface HeroProps {
     heading?: JSX.Element;
     /** Used to control how the `Hero` component will be rendered. */
     heroType?: HeroTypes;
-    /** 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 `imageSrc` used for SECONDARY, FIFTYFIFTY and CAMPAIGN
-     * `Hero` types; Note: `imageSrc` can only be used in conjunction with
-     * `backgroundImageSrc` for the CAMPAIGN `Hero` type.
-     * Note: not all `Hero` variations utilize this prop. */
-    imageSrc?: string;
+    /** Object used to create and render the `Image` component. Note that only
+     * `src` and `alt` are the available attributes to pass. If `imageProps.alt`
+     * is left blank, a warning will be logged to the console and will cause
+     * accessibility issues. For `imageProps.src`, it will only work for the
+     * "secondary", "fiftyFifty" and "campaign" `Hero` types; Note: `imageProps.src`
+     * can only be used in conjunction with `backgroundImageSrc` for the "campaign"
+     * `Hero` type. Note: not all `Hero` variations utilize this prop. */
+    imageProps?: HeroImageProps;
     /** Optional details area that contains location data.
      * Note: not all `Hero` variations utilize this prop. */
     locationDetails?: JSX.Element;

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

@@ -1,10 +1,11 @@
 import * as React from "react";
-import { IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes } from "./IconTypes";
+export declare type IconAlign = "left" | "right" | "none";
+export declare type IconColors = "ui.black" | "ui.white" | "brand.primary" | "brand.secondary" | "section.blogs.primary" | "section.blogs.secondary" | "section.books-and-more.primary" | "section.books-and-more.secondary" | "section.education.primary" | "section.education.secondary" | "section.locations.primary" | "section.locations.secondary" | "section.research.primary" | "section.research.secondary" | "section.research-library.lpa" | "section.research-library.schomburg" | "section.research-library.schwartzman" | "section.whats-on.primary" | "section.whats-on.secondary";
+export declare type IconNames = "accessibilityFull" | "accessibilityPartial" | "actionCheckCircle" | "actionHelpDefault" | "actionHelpOutline" | "actionLaunch" | "alertNotificationImportant" | "arrow" | "check" | "clock" | "close" | "download" | "errorFilled" | "errorOutline" | "fileTypeAudio" | "fileTypeDoc" | "fileTypeGenericDoc" | "fileTypeImage" | "fileTypePdf" | "fileTypeSpreadsheet" | "fileTypeVideo" | "headset" | "minus" | "plus" | "search" | "speakerNotes" | "utilityAccountFilled" | "utilityAccountUnfilled" | "utilityHamburger" | "utilitySearch";
+export declare type IconRotationTypes = "rotate0" | "rotate90" | "rotate180" | "rotate270";
+export declare type IconSizes = "default" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
+export declare type IconTypes = "default" | "breadcrumbs";
 export interface IconProps {
-    /** Optionally pass in additional Chakra-based styles. */
-    additionalStyles?: {
-        [key: string]: any;
-    };
     /** Aligns the icon. */
     align?: IconAlign;
     /** Optional className that will be added to the parent element */

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

@@ -1,33 +1,33 @@
 declare const _default: {
-    accessibility_full: string;
-    accessibility_partial: string;
-    action_check_circle: string;
-    action_help_default: string;
-    action_help_outline: string;
-    action_launch: string;
-    alert_notification_important: string;
+    accessibilityFull: string;
+    accessibilityPartial: string;
+    actionCheckCircle: string;
+    actionHelpDefault: string;
+    actionHelpOutline: string;
+    actionLaunch: string;
+    alertNotificationImportant: string;
     arrow: string;
     check: string;
     clock: string;
     close: string;
     download: string;
-    error_filled: string;
-    error_outline: string;
-    file_type_audio: string;
-    file_type_doc: string;
-    file_type_generic_doc: string;
-    file_type_image: string;
-    file_type_pdf: string;
-    file_type_spreadsheet: string;
-    file_type_video: string;
+    errorFilled: string;
+    errorOutline: string;
+    fileTypeAudio: string;
+    fileTypeDoc: string;
+    fileTypeGenericDoc: string;
+    fileTypeImage: string;
+    fileTypePdf: string;
+    fileTypeSpreadsheet: string;
+    fileTypeVideo: string;
     headset: string;
     minus: string;
     plus: string;
     search: string;
-    speaker_notes: string;
-    utility_account_filled: string;
-    utility_account_unfilled: string;
-    utility_hamburger: string;
-    utility_search: string;
+    speakerNotes: string;
+    utilityAccountFilled: string;
+    utilityAccountUnfilled: string;
+    utilityHamburger: string;
+    utilitySearch: string;
 };
 export default _default;

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
+export declare type ImageRatios = "fourByThree" | "oneByTwo" | "original" | "sixteenByNine" | "square" | "threeByFour" | "threeByTwo" | "twoByOne";
+export declare type ImageSizes = "default" | "xxsmall" | "xsmall" | "small" | "medium" | "large";
+export declare type ImageTypes = "default" | "circle";
 export interface ComponentImageProps {
     /** String value used to populate the `alt` attribute of the internal `Image`
      * component's `img` element. @NOTE if an image is used, this value must be passed. */
@@ -14,7 +16,7 @@ export interface ComponentImageProps {
     /** Optional value to render as a credit for the internal `Image` component. */
     credit?: string;
     /** Optional value to control the size of the internal `Image` component.
-     * Defaults to `ImageSizes.Medium`. */
+     * Defaults to `ImageSizes.Default`. */
     size?: ImageSizes;
     /** Optional value that contains the path to an image. If omitted, the internal
      * DS `Image` component will not render. */
@@ -27,7 +29,8 @@ interface ImageWrapperProps {
     };
     /** ClassName you can add in addition to 'image' */
     className?: string;
-    /** Optional value to control the aspect ratio of the cartd image; default value is `square` */
+    /** Optional value to control the aspect ratio of the card image; default
+     * value is `"original"` */
     aspectRatio?: ImageRatios;
     /** Optional value to control the size of the image */
     size?: ImageSizes;
@@ -42,7 +45,7 @@ export interface ImageProps extends ImageWrapperProps {
         [key: string]: any;
     };
     /** Alternate text description of the image */
-    alt: string;
+    alt?: string;
     /** Adding will wrap the image in a <figure> */
     caption?: string;
     /** Custom image component */
@@ -52,7 +55,7 @@ export interface ImageProps extends ImageWrapperProps {
     /** Optional value for the image type */
     imageType?: ImageTypes;
     /** The src attribute is required, and contains the path to the image you want to embed. */
-    src: string;
+    src?: string;
 }
 export declare const Image: import("@chakra-ui/react").ChakraComponent<(props: ImageProps) => JSX.Element, {}>;
 export default Image;

package/dist/components/Link/Link.d.ts

@@ -1,14 +1,6 @@
 import * as React from "react";
-import { LinkTypes } from "./LinkTypes";
+export declare type LinkTypes = "action" | "backwards" | "button" | "default" | "external" | "forwards";
 export interface LinkProps {
-    /** Optionally pass in additional Chakra-based styles. */
-    additionalStyles?: {
-        [key: string]: any;
-    };
-    /** Additional attributes, such as `rel=nofollow`, to pass to the `<a>` tag. */
-    attributes?: {
-        [key: string]: any;
-    };
     /** Any child node passed to the component. */
     children: React.ReactNode;
     /** Additional class name to render in the `Link` component. */

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

@@ -1,25 +1,21 @@
 import * as React from "react";
-import { ListTypes } from "./ListTypes";
+export declare type ListTypes = "ol" | "ul" | "dl";
 interface DescriptionProps {
     term: string;
     description: string | JSX.Element;
 }
 export interface ListProps {
-    /** Optionally pass in additional Chakra-based styles. */
-    additionalStyles?: {
-        [key: string]: any;
-    };
     /** ClassName you can add in addition to 'list' */
     className?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** Display the list in a row. */
     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.Description` `List` types,
-     * the data structure is an array of objects with `term` and `description`
-     * properties to render `dt` and `dd` elements, respectively.
+    /** Data to render if children are not passed. For `listTypes` orderd `"ol"`
+     * and unordered `"ul"` `List` types, the data structure is an array of strings
+     * to renders as `li` items. For descroption `"dl"` `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 | DescriptionProps)[];
     /** Remove list styling. */
@@ -27,7 +23,7 @@ export interface ListProps {
     /** An optional title that will appear over the list. This prop only applies
      * to Description Lists. */
     title?: string;
-    /** The type of list: Ordered, Unordered, or Description. Unordered by default. */
+    /** The type of list: "ol", "ul", or "dl". "ul" by default. */
     type: ListTypes;
 }
 /**

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

@@ -1,10 +1,7 @@
 import * as React from "react";
-import { LogoNames, LogoSizes } from "./LogoTypes";
+export declare type LogoNames = "bplBlack" | "bplWhite" | "cleverColor" | "cleverWhite" | "firstbookColor" | "firstbookColorNegative" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnWhite" | "nyplFullBlack" | "nyplFullWhite" | "nyplLionBlack" | "nyplLionWhite" | "openebooksColor" | "openebooksNegative" | "openebooksWithTextColor" | "openebooksWithTextNegative" | "qplAltBlack" | "qplAltWhite" | "qplBlack" | "qplColor" | "qplWhite" | "reservoirIconColor" | "reservoirVerticalColor" | "schomburgBlack" | "schomburgCircleBlack" | "schomburgCircleColor" | "schomburgCircleWhite" | "schomburgColor" | "schomburgWhite" | "simplyeBlack" | "simplyeWhite" | "simplyeColor" | "snflBlack" | "snflWhite" | "treasuresColor" | "treasuresColorNegative";
+export declare type LogoSizes = "default" | "xxsmall" | "xsmall" | "small" | "medium" | "large";
 export interface LogoProps {
-    /** Optionally pass in additional Chakra-based styles. */
-    additionalStyles?: {
-        [key: string]: any;
-    };
     /** Optional className that will be added to the parent element */
     className?: string;
     /** Logos designated as decorative will be ignored by screenreaders. False