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

package/CHANGELOG.md

@@ -8,6 +8,62 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 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
+
+- Updates storybook URL from /reservoir/v0_26 to /reservoir/v0.
+
+### Fixes
+
+- Adds updated package-lock file to fix bad installations.
+
 ## 0.26.0 (April 22, 2022)
 
 ### Adds

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

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

@@ -1,42 +1,42 @@
 declare const _default: {
-    logo_bpl_black: string;
-    logo_bpl_white: string;
-    logo_clever_color: string;
-    logo_clever_white: string;
-    logo_firstbook_color: string;
-    logo_firstbook_color_negative: string;
-    logo_lpa_black: string;
-    logo_lpa_color: string;
-    logo_lpa_white: string;
-    logo_mln_black: string;
-    logo_mln_white: string;
-    logo_nypl_full_black: string;
-    logo_nypl_full_white: string;
-    logo_nypl_lion_black: string;
-    logo_nypl_lion_white: string;
-    logo_openebooks_color: string;
-    logo_openebooks_negative: string;
-    logo_openebooks_wtext_color: string;
-    logo_openebooks_wtext_negative: string;
-    logo_qpl_alt_black: string;
-    logo_qpl_alt_white: string;
-    logo_qpl_black: string;
-    logo_qpl_color: string;
-    logo_qpl_white: string;
-    logo_reservoir_icon_color: string;
-    logo_reservoir_vertical_color: string;
-    logo_schomburg_black: string;
-    logo_schomburg_circle_black: string;
-    logo_schomburg_circle_color: string;
-    logo_schomburg_circle_white: string;
-    logo_schomburg_color: string;
-    logo_schomburg_white: string;
-    logo_simplye_black: string;
-    logo_simplye_white: string;
-    logo_simplye_color: string;
-    logo_snfl_black: string;
-    logo_snfl_white: string;
-    logo_treasures_color: string;
-    logo_treasures_color_negative: string;
+    bplBlack: string;
+    bplWhite: string;
+    cleverColor: string;
+    cleverWhite: string;
+    firstbookColor: string;
+    firstbookColorNegative: string;
+    lpaBlack: string;
+    lpaColor: string;
+    lpaWhite: string;
+    mlnBlack: string;
+    mlnWhite: string;
+    nyplFullBlack: string;
+    nyplFullWhite: string;
+    nyplLionBlack: string;
+    nyplLionWhite: string;
+    openebooksColor: string;
+    openebooksNegative: string;
+    openebooksWithTextColor: string;
+    openebooksWithTextNegative: string;
+    qplAltBlack: string;
+    qplAltWhite: string;
+    qplBlack: string;
+    qplColor: string;
+    qplWhite: string;
+    reservoirIconColor: string;
+    reservoirVerticalColor: string;
+    schomburgBlack: string;
+    schomburgCircleBlack: string;
+    schomburgCircleColor: string;
+    schomburgCircleWhite: string;
+    schomburgColor: string;
+    schomburgWhite: string;
+    simplyeBlack: string;
+    simplyeWhite: string;
+    simplyeColor: string;
+    snflBlack: string;
+    snflWhite: string;
+    treasuresColor: string;
+    treasuresColorNegative: string;
 };
 export default _default;

package/dist/components/Modal/Modal.d.ts

@@ -1,13 +1,33 @@
 import * as React from "react";
-export interface ModalProps {
-    /** ClassName that appears in addition to "modal" */
-    className?: string;
+interface BaseModalProps {
+    bodyContent?: string | JSX.Element;
+    closeButtonLabel?: string;
+    headingText?: string | JSX.Element;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
+    isOpen?: boolean;
+    onClose?: () => void;
 }
-/** Full-screen modal that appears on top of the body of the page. */
-export default class Modal extends React.Component<ModalProps, any> {
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
+export interface ModalProps {
+    buttonText?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    modalProps: BaseModalProps;
 }
+/**
+ * The `ModalTrigger` component renders a button that you click to open the
+ * internal `Modal` component. Note that props to update the internal `Modal`
+ * component are passed through to the `modalProps` prop.
+ */
+export declare const ModalTrigger: import("@chakra-ui/react").ChakraComponent<({ buttonText, id, modalProps, ...rest }: React.PropsWithChildren<ModalProps>) => JSX.Element, {}>;
+/**
+ * This hook function can be used to render the `Modal` component with a custom
+ * open button(s) and optional custom close button(s). You must render your own
+ * button and pass the appropriate `onOpen` and ` handler for the modal to open.
+ */
+export declare function useModal(): {
+    onClose: () => void;
+    onOpen: () => void;
+    Modal: import("@chakra-ui/react").ChakraComponent<({ bodyContent, closeButtonLabel, headingText, id, ...rest }: React.PropsWithChildren<BaseModalProps>) => JSX.Element, {}>;
+};
+export {};

package/dist/components/Notification/Notification.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { NotificationTypes } from "./NotificationTypes";
+export declare type NotificationTypes = "standard" | "announcement" | "warning";
 interface BaseProps {
     /** Optional prop to control text alignment in `NotificationContent` */
     alignText?: boolean;