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

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

@@ -10,5 +10,5 @@ export interface SimpleGridProps {
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
 }
-declare function SimpleGrid(props: React.PropsWithChildren<SimpleGridProps>): JSX.Element;
+export declare const SimpleGrid: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<SimpleGridProps>) => JSX.Element, {}>;
 export default SimpleGrid;

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { HeadingDisplaySizes, HeadingLevels } from "./HeadingTypes";
+import { HeadingSizes, HeadingLevels } from "./HeadingTypes";
 export interface HeadingProps {
     /** Optionally pass in additional Chakra-based styles. */
     additionalStyles?: {
@@ -7,14 +7,14 @@ export interface HeadingProps {
     };
     /** Optional className that appears in addition to `heading` */
     className?: string;
-    /** Optional size used to override the default styles of the semantic HTM
-     * `<h>` elements */
-    displaySize?: HeadingDisplaySizes;
     /** Optional ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed,
      * `Heading` will default to `<h2>` */
     level?: HeadingLevels;
+    /** Optional size used to override the default styles of the semantic HTM
+     * `<h>` elements */
+    size?: HeadingSizes;
     /** Inner text of the `<h*>` element */
     text?: string;
     /** Optional URL that header points to; when `url` prop is passed to
@@ -24,5 +24,5 @@ export interface HeadingProps {
     /** Optional className for the URL when the `url` prop is passed */
     urlClass?: string;
 }
-declare function Heading(props: React.PropsWithChildren<HeadingProps>): JSX.Element;
+export declare const Heading: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<HeadingProps>) => JSX.Element, {}>;
 export default Heading;

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

@@ -1,4 +1,4 @@
-export declare enum HeadingDisplaySizes {
+export declare enum HeadingSizes {
     Primary = "primary",
     Secondary = "secondary",
     Tertiary = "tertiary",

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

@@ -10,11 +10,12 @@ interface HelperErrorTextProps {
      * read the entire DOM element. When false, only changes (additionals or
      * removals) will be read. True by default. */
     ariaAtomic?: boolean;
-    /** Aria attribute only used in the invalid state to read error text. This
-     * indicates the priority of the text and when it should be presented to users
-     * using screen readers; "off" indicates that the content should not be presented,
-     * "polite" that it will be announced at the next available time slot, and
-     * "assertive" that it should be announced immediately. "polite" by default. */
+    /** Aria attribute used in the invalid state to read error text by default.
+     * This indicates the priority of the text and when it should be presented to
+     * users using screen readers; "off" indicates that the content should not be
+     * presented, "polite" that it will be announced at the next available time
+     * slot, and "assertive" that it should be announced immediately. This is set
+     * to "off" by default and to "polite" by when `isInvalid` is true. */
     ariaLive?: AriaLiveValues;
     /** Additional className to add. */
     className?: string;
@@ -26,7 +27,7 @@ interface HelperErrorTextProps {
     text: HelperErrorTextType;
 }
 /**
- * Helper or Error text for forms
+ * Helper or error text for forms components.
  */
-export default function HelperErrorText({ additionalStyles, ariaAtomic, ariaLive, className, id, isInvalid, text, }: HelperErrorTextProps): JSX.Element;
-export {};
+export declare const HelperErrorText: import("@chakra-ui/react").ChakraComponent<({ additionalStyles, ariaAtomic, ariaLive, className, id, isInvalid, text, ...rest }: HelperErrorTextProps) => JSX.Element, {}>;
+export default HelperErrorText;

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

@@ -17,11 +17,14 @@ export interface HeroProps {
     heading?: JSX.Element;
     /** Used to control how the `Hero` component will be rendered. */
     heroType?: HeroTypes;
-    /** Optional `Image` component used for SECONDARY, FIFTYFIFTY and CAMPAIGN
-     * `Hero` types; Note: `image` can only be used in conjunction with
-     * `backgroundImageSrc` for CAMPAIGN the `Hero` type.
+    /** 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. */
-    image?: JSX.Element;
+    imageSrc?: string;
     /** Optional details area that contains location data.
      * Note: not all `Hero` variations utilize this prop. */
     locationDetails?: JSX.Element;
@@ -29,4 +32,5 @@ export interface HeroProps {
      * underneath the heading element. */
     subHeaderText?: string | JSX.Element;
 }
-export default function Hero(props: React.PropsWithChildren<HeroProps>): JSX.Element;
+export declare const Hero: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<HeroProps>) => JSX.Element, {}>;
+export default Hero;

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

@@ -6,14 +6,6 @@ export interface HorizontalRuleProps {
     align?: "left" | "right";
     /** ClassName you can add in addition to `horizontal-rule` */
     className?: string;
-    /** Optional height value. This value should be entered with the same
-     * formatting as a CSS height attribute except for percent values (ex. `2`,
-     * `5px`, `1.5rem`). If this prop is omitted or a percent value is used, the
-     * horizontal rule will have a default height of 2px. */
-    height?: string;
-    /** Optional width value. This value should be entered with the same
-     * formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`). If
-     * omitted, the horizontal rule will have a default width of "100%". */
-    width?: string;
 }
-export default function HorizontalRule(props: HorizontalRuleProps): JSX.Element;
+export declare const HorizontalRule: import("@chakra-ui/react").ChakraComponent<(props: HorizontalRuleProps) => JSX.Element, {}>;
+export default HorizontalRule;

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

@@ -32,4 +32,5 @@ export interface IconProps {
 /**
  * Renders SVG-based icons.
  */
-export default function Icon(props: React.PropsWithChildren<IconProps>): JSX.Element;
+export declare const Icon: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<IconProps>) => JSX.Element, {}>;
+export default Icon;

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

@@ -18,21 +18,24 @@ export declare enum IconColors {
     UiWhite = "ui.white",
     BrandPrimary = "brand.primary",
     BrandSecondary = "brand.secondary",
-    SectionWhatsOnPrimary = "section.whats-on.primary",
-    SectionWhatsOnSecondary = "section.whats-on.secondary",
+    SectionBlogsPrimary = "section.blogs.primary",
+    SectionBlogsSecondary = "section.blogs.secondary",
     SectionBooksAndMorePrimary = "section.books-and-more.primary",
     SectionBooksAndMoreSecondary = "section.books-and-more.secondary",
-    SectionResearchPrimary = "section.research.primary",
-    SectionResearchSecondary = "section.research.secondary",
+    SectionEducationPrimary = "section.education.primary",
+    SectionEducationSecondary = "section.education.secondary",
     SectionLocationsPrimary = "section.locations.primary",
     SectionLocationsSecondary = "section.locations.secondary",
-    SectionBlogsPrimary = "section.blogs.primary",
-    SectionBlogsSecondary = "section.blogs.secondary",
+    SectionResearchPrimary = "section.research.primary",
+    SectionResearchSecondary = "section.research.secondary",
     SectionResearchLibraryLpa = "section.research-library.lpa",
     SectionResearchLibrarySchomburg = "section.research-library.schomburg",
-    SectionResearchLibrarySchwartzman = "section.research-library.schwartzman"
+    SectionResearchLibrarySchwartzman = "section.research-library.schwartzman",
+    SectionWhatsOnPrimary = "section.whats-on.primary",
+    SectionWhatsOnSecondary = "section.whats-on.secondary"
 }
 export declare enum IconSizes {
+    Default = "default",
     Small = "small",
     Medium = "medium",
     Large = "large",

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

@@ -1,5 +1,25 @@
 /// <reference types="react" />
 import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
+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. */
+    alt?: string;
+    /** Optional value to control the aspect ratio of the internal `Image` component.
+     * Defaults to `ImageRatios.Square`. */
+    aspectRatio?: ImageRatios;
+    /** Optional value to render as a caption for the internal `Image` component. */
+    caption?: string;
+    /** Optional DOM element to use instead of the DS `Image` component. */
+    component?: JSX.Element;
+    /** 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`. */
+    size?: ImageSizes;
+    /** Optional value that contains the path to an image. If omitted, the internal
+     * DS `Image` component will not render. */
+    src?: string;
+}
 interface ImageWrapperProps {
     /** Optionally pass in additional Chakra-based styles. */
     additionalWrapperStyles?: {
@@ -8,9 +28,9 @@ 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` */
-    imageAspectRatio?: ImageRatios;
+    aspectRatio?: ImageRatios;
     /** Optional value to control the size of the image */
-    imageSize?: ImageSizes;
+    size?: ImageSizes;
 }
 export interface ImageProps extends ImageWrapperProps {
     /** Optionally pass in additional Chakra-based styles only for the figure. */
@@ -23,18 +43,16 @@ export interface ImageProps extends ImageWrapperProps {
     };
     /** Alternate text description of the image */
     alt: string;
+    /** Adding will wrap the image in a <figure> */
+    caption?: string;
     /** Custom image component */
     component?: JSX.Element | null;
     /** Adding will wrap the image in a <figure> */
-    imageCaption?: string;
-    /** Adding will wrap the image in a <figure> */
-    imageCredit?: string;
-    /** Optional value to control the size of the image */
-    imageSize?: ImageSizes;
+    credit?: string;
     /** 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;
 }
-export default function Image(props: ImageProps): JSX.Element;
-export {};
+export declare const Image: import("@chakra-ui/react").ChakraComponent<(props: ImageProps) => JSX.Element, {}>;
+export default Image;

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

@@ -10,11 +10,11 @@ export declare enum ImageRatios {
 }
 export declare enum ImageSizes {
     Default = "default",
-    Large = "large",
-    Medium = "medium",
-    Small = "small",
+    ExtraExtraSmall = "xxsmall",
     ExtraSmall = "xsmall",
-    ExtraExtraSmall = "xxsmall"
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
 }
 export declare enum ImageTypes {
     Default = "default",

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

@@ -1,5 +1,4 @@
 import * as React from "react";
-declare type optReqFlagType = "Required" | "Optional" | "" | undefined;
 interface LabelProps {
     /** Additional CSS class name to render in the `label` element. */
     className?: string;
@@ -7,11 +6,15 @@ interface LabelProps {
     htmlFor: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Displays "Required" or "Optional" string alongside the label */
-    optReqFlag?: optReqFlagType;
+    /** Controls whether the label should be inline with the input it goes with.
+     * This prop should only be used internally. */
+    isInlined?: boolean;
+    /** Controls whether the "(Required)" text should be displayed alongside the
+     * label's text. False by default. */
+    isRequired?: boolean;
 }
 /**
  * A label for form inputs. It should never be used alone.
  */
-declare function Label(props: React.PropsWithChildren<LabelProps>): JSX.Element;
+export declare const Label: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<LabelProps>) => JSX.Element, {}>;
 export default Label;

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

@@ -24,5 +24,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.
  */
-declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const Link: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>, {}>;
 export default Link;

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { ListTypes } from "./ListTypes";
-interface DefinitionProps {
+interface DescriptionProps {
     term: string;
-    definition: string | JSX.Element;
+    description: string | JSX.Element;
 }
 export interface ListProps {
     /** Optionally pass in additional Chakra-based styles. */
@@ -17,23 +17,23 @@ export interface ListProps {
     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.Definition` `List` types,
-     * the data structure is an array of objects with `term` and `definition`
+     * 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.
      */
-    listItems?: (string | JSX.Element | DefinitionProps)[];
+    listItems?: (string | JSX.Element | DescriptionProps)[];
     /** Remove list styling. */
     noStyling?: boolean;
     /** An optional title that will appear over the list. This prop only applies
-     * to Definition Lists. */
+     * to Description Lists. */
     title?: string;
-    /** The type of list: Ordered, Unordered, or Definition. Unordered by default. */
+    /** The type of list: Ordered, Unordered, or Description. Unordered by default. */
     type: ListTypes;
 }
 /**
- * A component that renders list item `li` elements or definition item `dt`
+ * A component that renders list item `li` elements or description item `dt`
  * and `dd` elements based on the `type` prop. Note that the `title` prop will
- * only display for the `Definition` list type.
+ * only display for the `Description` list type.
  */
-export default function List(props: React.PropsWithChildren<ListProps>): any;
-export {};
+export declare const List: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<ListProps>) => any, {}>;
+export default List;

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

@@ -1,5 +1,5 @@
 export declare enum ListTypes {
     Ordered = "ol",
     Unordered = "ul",
-    Definition = "dl"
+    Description = "dl"
 }

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

@@ -25,4 +25,5 @@ export interface LogoProps {
  * The `Logo` component renders SVG-based logos and color variants that are
  * commonly used by the New York Public Library.
  */
-export default function Logo(props: React.PropsWithChildren<LogoProps>): JSX.Element;
+export declare const Logo: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<LogoProps>) => JSX.Element, {}>;
+export default Logo;

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

@@ -3,6 +3,8 @@ declare const _default: {
     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;
@@ -12,11 +14,17 @@ declare const _default: {
     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;

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

@@ -4,18 +4,20 @@ export declare enum LogoColors {
     UiWhite = "ui.white"
 }
 export declare enum LogoSizes {
+    Default = "default",
     ExtraExtraSmall = "xxsmall",
     ExtraSmall = "xsmall",
     Small = "small",
     Medium = "medium",
-    Large = "large",
-    Default = "default"
+    Large = "large"
 }
 export declare enum LogoNames {
     BrooklynPublicLibraryBlack = "logo_bpl_black",
     BrooklynPublicLibraryWhite = "logo_bpl_white",
     CleverColor = "logo_clever_color",
     CleverWhite = "logo_clever_white",
+    FirstBookColor = "logo_firstbook_color",
+    FirstBookColorNegative = "logo_firstbook_color_negative",
     LPAColor = "logo_lpa_color",
     LPABlack = "logo_lpa_black",
     LPAWhite = "logo_lpa_white",
@@ -25,11 +27,17 @@ export declare enum LogoNames {
     NYPLWhite = "logo_nypl_full_white",
     NYPLLionBlack = "logo_nypl_lion_black",
     NYPLLionWhite = "logo_nypl_lion_white",
+    OpenEBooksColor = "logo_openebooks_color",
+    OpenEBooksNegative = "logo_openebooks_negative",
+    OpenEBooksWithTextColor = "logo_openebooks_wtext_color",
+    OpenEBooksWithTextNegative = "logo_openebooks_wtext_negative",
     QueensPublicLibraryColor = "logo_qpl_color",
     QueensPublicLibraryBlack = "logo_qpl_black",
     QueensPublicLibraryWhite = "logo_qpl_white",
     QueensPublicLibraryAltBlack = "logo_qpl_alt_black",
     QueensPublicLibraryAltWhite = "logo_qpl_alt_white",
+    ReservoirIconColor = "logo_reservoir_icon_color",
+    ReservoirVerticalColor = "logo_reservoir_vertical_color",
     SchomburgColor = "logo_schomburg_color",
     SchomburgBlack = "logo_schomburg_black",
     SchomburgWhite = "logo_schomburg_white",

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

@@ -3,18 +3,18 @@ import { NotificationTypes } from "./NotificationTypes";
 interface BaseProps {
     /** Optional prop to control text alignment in `NotificationContent` */
     alignText?: boolean;
-    /** Optional prop to control horizontal alignment of the `Notification` content */
-    centered?: boolean;
     /** Optional custom `Icon` that will override the default `Icon`. */
     icon?: JSX.Element;
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
+    /** Optional prop to control horizontal alignment of the `Notification` content */
+    isCentered?: boolean;
     /** Optional prop to control the coloring of the `Notification` text and the
      * visibility of an applicable icon. */
     notificationType?: NotificationTypes;
 }
 declare type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
-declare type BasePropsWithoutCentered = Omit<BaseProps, "centered">;
+declare type BasePropsWithoutIsCentered = Omit<BaseProps, "isCentered">;
 export interface NotificationProps extends BasePropsWithoutAlignText {
     /** Label used to describe the `Notification`'s aside HTML element. */
     ariaLabel?: string;
@@ -37,14 +37,14 @@ export interface NotificationProps extends BasePropsWithoutAlignText {
 /**
  * NotificationHeading child-component.
  */
-export declare function NotificationHeading(props: React.PropsWithChildren<BasePropsWithoutAlignText>): JSX.Element;
+export declare const NotificationHeading: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<BasePropsWithoutAlignText>) => JSX.Element, {}>;
 /**
  * NotificationContent child-component.
  */
-export declare function NotificationContent(props: React.PropsWithChildren<BasePropsWithoutCentered>): JSX.Element;
+export declare const NotificationContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<BasePropsWithoutIsCentered>) => JSX.Element, {}>;
 /**
  * Component used to present users with three different levels of notifications:
  * standard, announcement, and warning.
  */
-export default function Notification(props: NotificationProps): JSX.Element;
-export {};
+export declare const Notification: import("@chakra-ui/react").ChakraComponent<(props: NotificationProps) => JSX.Element, {}>;
+export default Notification;

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

@@ -1,15 +1,19 @@
-import React from "react";
+/// <reference types="react" />
 export interface PaginationProps {
     /** Additional className. */
     className?: string;
+    /** The currentPage can be used to programatically force the selected page to change
+     * without the user explicitly requesting it – for example, if the user should be
+     * brought back to the first page of a set of results after a new search. */
+    currentPage?: number;
     /** The callback function that takes a page number and returns a string
      * to use for a link's `href` attribute. This is used when the current
      * page should refresh when navigating. */
     getPageHref?: undefined | ((pageNumber: number) => string);
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
-    /** The current page selected. */
-    initialPage: number;
+    /** The initially selected page (default value is 1). */
+    initialPage?: number;
     /** The callback function called when an item is selected and the current
      * page should not refresh. */
     onPageChange?: (selected: number) => void;
@@ -19,5 +23,5 @@ export interface PaginationProps {
 /**
  * A component that provides a navigational list of page items.
  */
-declare const Pagination: React.FC<PaginationProps>;
+export declare const Pagination: import("@chakra-ui/react").ChakraComponent<(props: PaginationProps) => JSX.Element, {}>;
 export default Pagination;

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

@@ -1,10 +1,10 @@
-import React from "react";
+/// <reference types="react" />
 import { ProgressIndicatorSizes, ProgressIndicatorTypes } from "./ProgressIndicatorTypes";
 export interface ProgressIndicatorProps {
     /** Flag to render the component in a dark background. */
     darkMode?: boolean;
     /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
+    id: string;
     /** Whether the `ProgressIndicator` should be linear or circular. */
     indicatorType?: ProgressIndicatorTypes;
     /** Whether the progress animation should display because the `value` prop is
@@ -25,5 +25,5 @@ export interface ProgressIndicatorProps {
  * time to complete or consists of multiple steps. Examples include downloading,
  * uploading, or processing.
  */
-declare const ProgressIndicator: React.FC<ProgressIndicatorProps>;
+export declare const ProgressIndicator: import("@chakra-ui/react").ChakraComponent<(props: ProgressIndicatorProps) => JSX.Element, {}>;
 export default ProgressIndicator;

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

@@ -6,7 +6,7 @@ export interface RadioProps {
     /** Optional string to populate the HelperErrorText for the standard state. */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+    id: string;
     /** Optional string to populate the HelperErrorText for the error state
      * when `isInvalid` is true.
      */
@@ -16,19 +16,17 @@ export interface RadioProps {
      * 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.
-     */
+     * This also makes the text italic and color scheme gray. */
     isDisabled?: 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.
-     */
+     * the color theme "NYPL error" red for the button and text. */
     isInvalid?: boolean;
     /** Adds the 'required' attribute to the input when true. */
     isRequired?: boolean;
     /** The radio button's label. This will serve as the text content for the
      * `<label>` element if `showlabel` is true, or an "aria-label" if `showLabel`
      * is false. */
-    labelText: string;
+    labelText: string | JSX.Element;
     /** Used to reference the input element in forms. */
     name?: string;
     /** Should be passed along with `isChecked` for controlled components. */
@@ -41,5 +39,5 @@ export interface RadioProps {
     /** Populates the value of the input. */
     value?: string;
 }
-declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Radio: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>, {}>;
 export default Radio;

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-import { RadioGroupLayoutTypes } from "./RadioGroupLayoutTypes";
+import { LayoutTypes } from "../../helpers/enums";
 export interface RadioGroupProps {
     /** Additional class name. */
     className?: string;
@@ -9,11 +9,13 @@ export interface RadioGroupProps {
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+    id: string;
     /** Optional string to populate the HelperErrorText for error state */
     invalidText?: HelperErrorTextType;
     /** Adds the 'disabled' prop to the input when true. */
     isDisabled?: boolean;
+    /** Set's the `Radio`s' wrapper to be full width. */
+    isFullWidth?: boolean;
     /** Adds the 'aria-invalid' attribute to the input and
      * sets the error state when true. */
     isInvalid?: boolean;
@@ -23,21 +25,27 @@ export interface RadioGroupProps {
      * true, or an "aria-label" if `showLabel` is false. */
     labelText: string;
     /** Renders the Radio buttons in a row or column (default). */
-    layout?: RadioGroupLayoutTypes;
+    layout?: LayoutTypes;
     /** The `name` prop indicates the form group for all the Radio children. */
     name: string;
     /** The action to perform on the `<input>`'s onChange function  */
     onChange?: (value: string) => void;
-    /** Whether or not to display "Required"/"Optional" in the label text. */
-    optReqFlag?: boolean;
     /** Offers the ability to hide the helper/invalid text. */
     showHelperInvalidText?: boolean;
     /** Offers the ability to show the group's legend onscreen or hide it. Refer
      * to the `labelText` property for more information. */
     showLabel?: boolean;
+    /** Whether or not to display the "(Required)" text in the label text.
+     * True by default. */
+    showRequiredLabel?: boolean;
 }
-export declare const onChangeDefault: () => void;
-declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & {
+/**
+ * RadioGroup is a wrapper for DS `Radio` components that renders as a fieldset
+ * HTML element along with optional helper text. The `name` prop is essential
+ * for this form group element and is not needed for individual DS `Radio`
+ * components when `RadioGroup` is used.
+ */
+export declare const RadioGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<RadioGroupProps & {
     children?: React.ReactNode;
-} & React.RefAttributes<HTMLInputElement>>;
+} & React.RefAttributes<HTMLInputElement>>, {}>;
 export default RadioGroup;

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

@@ -4,13 +4,13 @@ interface BaseProps {
     labelText: string;
     name: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
+    value?: string;
 }
 export interface SelectProps extends BaseProps {
     optionsData: string[];
 }
 export interface TextInputProps extends BaseProps {
-    placeholder: string;
-    value?: string;
+    placeholder?: string;
 }
 export interface SearchBarProps {
     /** Adds 'action' property to the `form` element. */
@@ -26,7 +26,7 @@ export interface SearchBarProps {
     /** The text to display below the form in a `HelperErrorText` component. */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+    id: string;
     /** Optional string to populate the `HelperErrorText` for the error state
      * when `isInvalid` is true. */
     invalidText?: HelperErrorTextType;
@@ -56,5 +56,5 @@ export interface SearchBarProps {
  * Renders a wrapper `form` element to be used with `Select` (optional),
  * `Input`, and `Button` components together.
  */
-export default function SearchBar(props: SearchBarProps): JSX.Element;
-export {};
+export declare const SearchBar: import("@chakra-ui/react").ChakraComponent<(props: SearchBarProps) => JSX.Element, {}>;
+export default SearchBar;