@nypl/design-system-react-components 1.0.5 → 1.0.8

package/CHANGELOG.md

@@ -8,6 +8,54 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 1.0.8 (August 11, 2022)
+
+### Adds
+
+- Adds new color values under ui:
+  - `bg.default`, `bg.hover`, `bg.active`, `border.default`, `border.hover`, `typography.heading`, and `typography.body`.
+- Adds new colors values under ui.gray:
+  - `xxxx-dark` and `xxx-dark`.
+- Adds UI fills colors for dark mode in the codebase and also exported in the `useNYPLTheme` hook.
+- Adds an optional `panelMaxHeight` prop to the `Accordion` component that determines the height of the panel and displays a scrollbar if content exceeds it.
+
+### Updates
+
+- Updates color value for `xx-dark`.
+- Updates the style of the TOC on the `Style Guide` pages to match the style of the TOC on the component pages.
+- Updates the `Template` components to use CSS grid instead of flexbox.
+- Updates the `Template` documentation with the new pattern for using individual `Template` components that go above the main `TemplateContent` component.
+- Updates the `Placeholder` component's CSS to better display in the `Template` components.
+- Updates how HTML attributes are passed down in the `Image` component to the HTML `img` element.
+- Updates the `Accordion` so that its panel content only renders when the `Accordion` is open.
+
+## 1.0.7 (July 29, 2022)
+
+### Updates
+
+- Updates border color in the `Description` variant of the `List` component.
+- Updates how options are passed to the `SearchBar` component for its internal `Select` component.
+- Updates how style props are passed to the `Link` component when using with third-party libraries, such as React Router.
+- Updates the layout of the `Image` in the `Hero` "secondary" and "fiftyFifty" variants for mobile and desktop.
+
+## 1.0.6 (July 21, 2022)
+
+### Adds
+
+- Adds the `isLazy` prop to the `Image` component which is set to `false` by default.
+
+### Updates
+
+- Updates the following components to use React's `forwardRef` wrapper function to pass along refs to the correct DOM element. This is for third-party packages and components such as Chakra's `Tooltip` to work correctly.
+  - `Accordion`, `Breadcrumbs`, `Button`, `ButtonGroup`, `Card`, `ComponentWrapper`, `FieldSet`, `Form`, `SimpleGrid`, `Heading`, `HelperErrorText`, `Hero`, `HorizontalRule`, `Icon`, `Image`, `Label`, `List`, `Logo`, `Modal`, `Notification`, `Pagination`, `ProgressIndicator`, `SearchBar`, `SkeletonLoader`, `SkipNavigation`, `Slider`, `StatusBadge`, `StructuredContent`, `Table`, `Tabs`, `Template`, `TemplateAppContainer`, `Text`, `VideoPlayer`.
+- Updates `padding-left` and `padding-right` style properties to `padding-start` and `padding-end`, respectively. Updates `margin-left` and `margin-right` style properties to `margin-start` and `margin-end`, respectively. These changes apply to inline CSS, shorthand Chakra style prop syntax, and Chakra theme file syntax. Note that `margin-start/end` and `padding-start/end` get converted to `margin-inline-start/end` and `padding-inline-start/end` respectively by Chakra UI.
+- Updates the `Icon` component to include variants for legacy versions of `Account` (filled and unfilled), `Facebook`, `Instagram`, `Twitter` and `YouTube`.
+- Updates the `Icon` component to include variants for `Warning` (filled and oultine).
+
+### Removes
+
+- Removes the packages `@mdx-js/react` and `babel-loader` since they are not needed by Storybook.
+
 ## 1.0.5 (July 7, 2022)
 
 ### Adds
@@ -19,6 +67,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 - Updates the `Icon` component to include variants for `actionCheckCircleFilled`, `actionRegistration`, `decorativeEnvelope`, `decorativeLibraryCard` and `decorativeShoppingBag`.
 - Updates the docs for the `Colors` Style Guide to include additional data related to contrast and WCAG compliance.
 - Updates the `Checkbox` and `Radio` components to use `ui.gray.dark` for the default border color.
+- Updates Storybook packages.
 
 ### Fixes
 

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type AccordionTypes = "default" | "warning" | "error";
 export interface AccordionDataProps {
     accordionType?: AccordionTypes;
@@ -12,10 +12,15 @@ export interface AccordionProps {
     id?: string;
     /** Whether the accordion is open by default only on its initial rendering */
     isDefaultOpen?: boolean;
+    /** Sets max height of accordion panel. This value should be entered with the
+     * formatting of a CSS height attribute (ex. 100px, 8rem). If height of content
+     * within accordion panel is greater than height set by panelMaxHeight, a
+     * scrollbar will appear for accordion panel. */
+    panelMaxHeight?: string;
 }
 /**
  * Accordion component that shows content on toggle. Can be used to display
  * multiple accordion items together.
  */
-export declare const Accordion: import("@chakra-ui/react").ChakraComponent<(props: AccordionProps) => JSX.Element, {}>;
+export declare const Accordion: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Accordion;

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { LayoutTypes } from "../../helpers/types";
 export interface CheckboxGroupProps {
@@ -45,5 +45,5 @@ export interface CheckboxGroupProps {
  * wrapping and associated text elements, but the checkbox input elements
  * _need_ to be child `Checkbox` components from the NYPL Design System.
  */
-export declare const CheckboxGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLInputElement>>, {}>;
+export declare const CheckboxGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default CheckboxGroup;

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type GridGaps = "grid.xxs" | "grid.xs" | "grid.s" | "grid.m" | "grid.l" | "grid.xl" | "grid.xxl";
 export interface SimpleGridProps {
     /** Additional class name. */
@@ -13,5 +13,7 @@ export interface SimpleGridProps {
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
 }
-export declare const SimpleGrid: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<SimpleGridProps>) => JSX.Element, {}>;
+export declare const SimpleGrid: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SimpleGridProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default SimpleGrid;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type HeadingSizes = "primary" | "secondary" | "tertiary" | "callout";
 export declare type HeadingLevels = "one" | "two" | "three" | "four" | "five" | "six";
 export interface HeadingProps {
@@ -29,5 +29,7 @@ export interface HeadingProps {
     /** Optional className for the URL when the `url` prop is passed */
     urlClass?: string;
 }
-export declare const Heading: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<HeadingProps>) => JSX.Element, {}>;
+export declare const Heading: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<HeadingProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLHeadingElement>>, {}>;
 export default Heading;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export declare type AriaLiveValues = "assertive" | "off" | "polite";
 export declare type HelperErrorTextType = string | JSX.Element;
 interface HelperErrorTextProps {
@@ -25,5 +25,5 @@ interface HelperErrorTextProps {
 /**
  * Helper or error text for forms components.
  */
-export declare const HelperErrorText: import("@chakra-ui/react").ChakraComponent<({ ariaAtomic, ariaLive, className, id, isInvalid, text, ...rest }: HelperErrorTextProps) => JSX.Element, {}>;
+export declare const HelperErrorText: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<HelperErrorTextProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default HelperErrorText;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ComponentImageProps } from "../Image/Image";
 export declare type HeroTypes = "primary" | "secondary" | "secondaryBooksAndMore" | "secondaryLocations" | "secondaryResearch" | "secondaryWhatsOn" | "tertiary" | "campaign" | "fiftyFifty";
 export declare const heroSecondaryTypes: string[];
@@ -36,5 +36,7 @@ export interface HeroProps {
      * underneath the heading element. */
     subHeaderText?: string | JSX.Element;
 }
-export declare const Hero: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<HeroProps>) => JSX.Element, {}>;
+export declare const Hero: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<HeroProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Hero;

package/dist/components/HorizontalRule/HorizontalRule.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export interface HorizontalRuleProps {
     /** Optional alignment value to align the horizontal rule to one side or the
      * other when the width is less than 100%. If omitted, the horizontal rule
@@ -7,5 +7,5 @@ export interface HorizontalRuleProps {
     /** ClassName you can add in addition to `horizontal-rule` */
     className?: string;
 }
-export declare const HorizontalRule: import("@chakra-ui/react").ChakraComponent<(props: HorizontalRuleProps) => JSX.Element, {}>;
+export declare const HorizontalRule: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<HorizontalRuleProps & React.RefAttributes<HTMLDivElement & HTMLHRElement>>, {}>;
 export default HorizontalRule;

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

@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 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" | "actionCheckCircleFilled" | "actionExit" | "actionHelpDefault" | "actionHelpOutline" | "actionLaunch" | "actionPower" | "actionRegistration" | "actionSettings" | "alertNotificationImportant" | "arrow" | "building" | "check" | "clock" | "close" | "decorativeEnvelope" | "decorativeLibraryCard" | "decorativeShoppingBag" | "download" | "errorFilled" | "errorOutline" | "fileTypeAudio" | "fileTypeDoc" | "fileTypeGenericDoc" | "fileTypeImage" | "fileTypePdf" | "fileTypeSpreadsheet" | "fileTypeVideo" | "headset" | "locator" | "minus" | "plus" | "search" | "socialFacebook" | "socialInstagram" | "socialTumblr" | "socialTwitter" | "socialYoutube" | "speakerNotes" | "utilityAccountFilled" | "utilityAccountUnfilled" | "utilityHamburger" | "utilitySearch";
+export declare type IconNames = "accessibilityFull" | "accessibilityPartial" | "actionCheckCircle" | "actionCheckCircleFilled" | "actionExit" | "actionHelpDefault" | "actionHelpOutline" | "actionLaunch" | "actionPower" | "actionRegistration" | "actionSettings" | "alertNotificationImportant" | "alertWarningFilled" | "alertWarningOutline" | "arrow" | "building" | "check" | "clock" | "close" | "decorativeEnvelope" | "decorativeLibraryCard" | "decorativeShoppingBag" | "download" | "errorFilled" | "errorOutline" | "fileTypeAudio" | "fileTypeDoc" | "fileTypeGenericDoc" | "fileTypeImage" | "fileTypePdf" | "fileTypeSpreadsheet" | "fileTypeVideo" | "headset" | "legacyAccountFilled" | "legacyAccountUnfilled" | "legacySocialFacebook" | "legacySocialInstagram" | "legacySocialTwitter" | "legacySocialYoutube" | "locator" | "minus" | "plus" | "search" | "socialFacebook" | "socialInstagram" | "socialTumblr" | "socialTwitter" | "socialYoutube" | "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";
@@ -33,5 +33,7 @@ export interface IconProps {
 /**
  * Renders SVG-based icons.
  */
-export declare const Icon: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<IconProps>) => JSX.Element, {}>;
+export declare const Icon: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<IconProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & SVGSVGElement>>, {}>;
 export default Icon;

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

@@ -11,6 +11,8 @@ declare const _default: {
     actionRegistration: string;
     actionSettings: string;
     alertNotificationImportant: string;
+    alertWarningFilled: string;
+    alertWarningOutline: string;
     arrow: string;
     building: string;
     check: string;
@@ -30,6 +32,12 @@ declare const _default: {
     fileTypeSpreadsheet: string;
     fileTypeVideo: string;
     headset: string;
+    legacyAccountFilled: string;
+    legacyAccountUnfilled: string;
+    legacySocialFacebook: string;
+    legacySocialInstagram: string;
+    legacySocialTwitter: string;
+    legacySocialYoutube: string;
     locator: string;
     minus: string;
     plus: string;

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React, { ImgHTMLAttributes } from "react";
 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 {
+export interface ComponentImageProps extends Partial<HTMLImageElement> {
     /** 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. */
     alt?: string;
@@ -15,6 +15,8 @@ export interface ComponentImageProps {
     component?: JSX.Element;
     /** Optional value to render as a credit for the internal `Image` component. */
     credit?: string;
+    /** Flag to set the internal `Image` component to `isLazy` mode. */
+    isLazy?: boolean;
     /** Optional value to control the size of the internal `Image` component.
      * Defaults to `ImageSizes.Default`. */
     size?: ImageSizes;
@@ -35,7 +37,7 @@ interface ImageWrapperProps {
     /** Optional value to control the size of the image */
     size?: ImageSizes;
 }
-export interface ImageProps extends ImageWrapperProps {
+export interface ImageProps extends ImageWrapperProps, ImgHTMLAttributes<HTMLImageElement> {
     /** Optionally pass in additional Chakra-based styles only for the figure. */
     additionalFigureStyles?: {
         [key: string]: any;
@@ -54,8 +56,10 @@ export interface ImageProps extends ImageWrapperProps {
     credit?: string;
     /** Optional value for the image type */
     imageType?: ImageTypes;
+    /** Flag to set the internal `Image` component to `isLazy` mode. */
+    isLazy?: boolean;
     /** The src attribute is required, and contains the path to the image you want to embed. */
     src?: string;
 }
-export declare const Image: import("@chakra-ui/react").ChakraComponent<(props: ImageProps) => JSX.Element, {}>;
+export declare const Image: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Image;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 interface LabelProps {
     /** Additional CSS class name to render in the `label` element. */
     className?: string;
@@ -16,5 +16,7 @@ interface LabelProps {
 /**
  * A label for form inputs. It should never be used alone.
  */
-export declare const Label: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<LabelProps>) => JSX.Element, {}>;
+export declare const Label: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<LabelProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & HTMLLabelElement>>, {}>;
 export default Label;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type LinkTypes = "action" | "backwards" | "button" | "default" | "external" | "forwards";
 export interface LinkProps {
     /** Any child node passed to the component. */
@@ -16,5 +16,5 @@ export interface LinkProps {
  * A component that uses an `href` prop or a child anchor element, to create
  * an anchor element with added styling and conventions.
  */
-export declare const Link: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>, {}>;
+export declare const Link: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLDivElement & HTMLAnchorElement>>, {}>;
 export default Link;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type ListTypes = "ol" | "ul" | "dl";
 interface DescriptionProps {
     term: string;
@@ -31,5 +31,7 @@ export interface ListProps {
  * and `dd` elements based on the `type` prop. Note that the `title` prop will
  * only display for the `Description` list type.
  */
-export declare const List: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<ListProps>) => any, {}>;
+export declare const List: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ListProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & HTMLUListElement & HTMLOListElement>>, {}>;
 export default List;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type LogoNames = "appleAppStoreBlack" | "appleAppStoreWhite" | "bplBlack" | "bplWhite" | "cleverBadgeColor" | "cleverColor" | "cleverWhite" | "firstbookColor" | "firstbookColorNegative" | "googlePlayBlack" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnColor" | "mlnWhite" | "nyplFullBlack" | "nyplFullWhite" | "nyplLionBlack" | "nyplLionWhite" | "nyplTextBlack" | "nyplTextWhite" | "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 {
@@ -22,5 +22,7 @@ export interface LogoProps {
  * The `Logo` component renders SVG-based logos and color variants that are
  * commonly used by the New York Public Library.
  */
-export declare const Logo: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<LogoProps>) => JSX.Element, {}>;
+export declare const Logo: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<LogoProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & SVGSVGElement>>, {}>;
 export default Logo;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 interface BaseModalProps {
     bodyContent?: string | JSX.Element;
     closeButtonLabel?: string;
@@ -19,7 +19,9 @@ export interface ModalProps {
  * 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, {}>;
+export declare const ModalTrigger: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ModalProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>, {}>;
 /**
  * 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

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

@@ -46,5 +46,5 @@ export declare const NotificationContent: import("@chakra-ui/react").ChakraCompo
  * Component used to present users with three different levels of notifications:
  * standard, announcement, and warning.
  */
-export declare const Notification: import("@chakra-ui/react").ChakraComponent<(props: NotificationProps) => JSX.Element, {}>;
+export declare const Notification: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Notification;

package/dist/components/Pagination/Pagination.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export interface PaginationProps {
     /** Additional className. */
     className?: string;
@@ -23,5 +23,5 @@ export interface PaginationProps {
 /**
  * A component that provides a navigational list of page items.
  */
-export declare const Pagination: import("@chakra-ui/react").ChakraComponent<(props: PaginationProps) => JSX.Element, {}>;
+export declare const Pagination: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Pagination;

package/dist/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export declare type ProgressIndicatorSizes = "default" | "small";
 export declare type ProgressIndicatorTypes = "circular" | "linear";
 export interface ProgressIndicatorProps {
@@ -26,5 +26,5 @@ export interface ProgressIndicatorProps {
  * time to complete or consists of multiple steps. Examples include downloading,
  * uploading, or processing.
  */
-export declare const ProgressIndicator: import("@chakra-ui/react").ChakraComponent<(props: ProgressIndicatorProps) => JSX.Element, {}>;
+export declare const ProgressIndicator: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default ProgressIndicator;

package/dist/components/Radio/Radio.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export interface RadioProps {
     /** Additional class name. */

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { LayoutTypes } from "../../helpers/types";
 export interface RadioGroupProps {
@@ -47,5 +47,5 @@ export interface RadioGroupProps {
  */
 export declare const RadioGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<RadioGroupProps & {
     children?: React.ReactNode;
-} & React.RefAttributes<HTMLInputElement>>, {}>;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default RadioGroup;

package/dist/components/SearchBar/SearchBar.d.ts

@@ -1,13 +1,18 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 interface BaseProps {
+    id?: string;
     labelText: string;
     name: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     value?: string;
 }
+interface SelectOptionsProps {
+    text: string;
+    value: string;
+}
 export interface SelectProps extends BaseProps {
-    optionsData: string[];
+    optionsData: SelectOptionsProps[];
     onChange?: (event: React.FormEvent) => void;
 }
 export interface TextInputProps extends BaseProps {
@@ -57,5 +62,5 @@ export interface SearchBarProps {
  * Renders a wrapper `form` element to be used with `Select` (optional),
  * `Input`, and `Button` components together.
  */
-export declare const SearchBar: import("@chakra-ui/react").ChakraComponent<(props: SearchBarProps) => JSX.Element, {}>;
+export declare const SearchBar: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default SearchBar;

package/dist/components/SkeletonLoader/SkeletonLoader.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { LayoutTypes } from "../../helpers/types";
 export declare type SkeletonLoaderImageRatios = "landscape" | "portrait" | "square";
 export interface SkeletonLoaderProps {
@@ -35,5 +35,7 @@ export interface SkeletonLoaderProps {
  * The `SkeletonLoader` component renders a placeholder to be used while
  * dynamic content is loading.
  */
-export declare const SkeletonLoader: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<SkeletonLoaderProps>) => JSX.Element, {}>;
+export declare const SkeletonLoader: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SkeletonLoaderProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default SkeletonLoader;

package/dist/components/SkipNavigation/SkipNavigation.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 interface SkipNavigationProps {
     /** Additional CSS class name to render in the `nav` element. */
     className?: string;
@@ -13,5 +13,7 @@ interface SkipNavigationProps {
  * the `#mainContent` id, and the second link points to accessibility information
  * on NYPL.org. These links are visually hidden but can be read by screenreaders.
  */
-export declare const SkipNavigation: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<SkipNavigationProps>) => JSX.Element, {}>;
+export declare const SkipNavigation: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SkipNavigationProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default SkipNavigation;

package/dist/components/Slider/Slider.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export interface SliderProps {
     /** Additional class name for the Slider component. */
@@ -55,5 +55,7 @@ export interface SliderProps {
  * with a min and max value. The value(s) can be updated through the slider
  * thumb(s) or through the text input(s) elements.
  */
-export declare const Slider: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<SliderProps>) => JSX.Element, {}>;
+export declare const Slider: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SliderProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Slider;

package/dist/components/StatusBadge/StatusBadge.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type StatusBadgeTypes = "low" | "medium" | "high";
 export interface StatusBadgeProps {
     /** Additional class for the component */
@@ -12,5 +12,7 @@ export interface StatusBadgeProps {
  * The `StatusBadge` component is used to display a visual badge for three
  * different status levels.
  */
-export declare const StatusBadge: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<StatusBadgeProps>) => JSX.Element, {}>;
+export declare const StatusBadge: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<StatusBadgeProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default StatusBadge;