@nypl/design-system-react-components 0.25.1 → 0.25.5

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface ComponentWrapperProps {
+    /** The UI elements that will be wrapped by this component */
+    children: React.ReactNode;
+    /** Optional string to set the text for a video description */
+    descriptionText?: string;
+    /** Optional string to set the text for a `Heading` component */
+    headingText?: string;
+    /** Optional string to set the text for a `HelperErrorText` component */
+    helperText?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+}
+declare function ComponentWrapper(props: React.PropsWithChildren<ComponentWrapperProps>): JSX.Element;
+export default ComponentWrapper;

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

@@ -2,29 +2,36 @@ import React from "react";
 import { DatePickerTypes } from "./DatePickerTypes";
 import { TextInputRefType } from "../TextInput/TextInput";
 interface FullDateType {
-    startDate: Date;
+    /** Date object that gets returned for the onChange
+     * function only for date ranges. */
     endDate?: Date;
+    /** Date object that gets returned for the onChange function. */
+    startDate: Date;
 }
 interface DateRangeRowProps {
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
     /** Whether to render a single date input or two for a range of two dates. */
-    dateRange?: boolean;
+    isDateRange?: boolean;
 }
 interface DatePickerWrapperProps extends DateRangeRowProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
+    /** Additional className. */
+    className?: string;
+    /** Adds the 'required' property to the input element(s). */
+    isRequired?: boolean;
     /** Passed to the `TextInput` component to render a label associated with an input field. */
     labelText: string;
     /** Offers the ability to show the label onscreen or hide it. */
     showLabel?: boolean;
-    /** Additional className for use with BEM. See how to work with blockNames and
-     * BEM here: http://getbem.com/introduction/ */
-    className?: string;
+    /** Whether or not to display the "Required"/"Optional" text in the label text. */
+    showOptReqLabel?: boolean;
 }
 export interface DatePickerProps extends DatePickerWrapperProps {
+    /** The date format to display. Defaults to "yyyy-MM-dd".
+     * Must be in ISO-8601 format. */
+    dateFormat?: string;
     /** DatePicker date types that can be rendered. */
     dateType?: DatePickerTypes;
-    /** The date format to display. Defaults to "yyyy-MM-dd". */
-    dateFormat?: string;
     /** Populates the `HelperErrorText` component in this component. */
     helperText?: string;
     /** Populates the `HelperErrorText` component in the "From" `TextInput` component. */
@@ -34,43 +41,38 @@ export interface DatePickerProps extends DatePickerWrapperProps {
     /** The initial date value. This must be in the mm/dd/yyyy format. */
     initialDate?: string;
     /** The initialTo date value used for date ranges.
-     * This must be in the mm/dd/yyyy format.
-     */
+     * This must be in the mm/dd/yyyy format. */
     initialDateTo?: string;
-    /** The minimum date value that applies to both input fields.
-     * This must be in the mm/dd/yyyy format.
-     */
-    minDate?: string;
-    /** The maximum date value that applies to both input fields.
-     * This must be in the mm/dd/yyyy format.
-     */
-    maxDate?: string;
-    /** Populates the `HelperErrorText` error state for both "From" and "To" input components. */
+    /** Populates the `HelperErrorText` error state for both "From"
+     * and "To" input components. */
     invalidText?: string;
-    /** Helper for modifiers array; adds 'isInvalid' styling. */
-    isInvalid?: boolean;
-    /** Adds the 'required' property to the input element(s). */
-    required?: boolean;
-    /** Whether or not to display the "Required"/"Optional" text in the label text. */
-    showOptReqLabel?: boolean;
     /** Adds the 'disabled' property to the input element(s). */
     isDisabled?: boolean;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM
-     * here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** BlockName for use with BEM. See how to work with blockNames and BEM
-     * here: http://getbem.com/introduction/ */
-    blockName?: string;
+    /** Adds 'isInvalid' styling. */
+    isInvalid?: boolean;
+    /** Adds the 'required' property to the input element(s). */
+    isRequired?: boolean;
+    /** The maximum date value that applies to both input fields.
+     * This must be in the mm/dd/yyyy format. */
+    maxDate?: string;
+    /** The minimum date value that applies to both input fields.
+     * This must be in the mm/dd/yyyy format. */
+    minDate?: string;
     /** Value name for the single input field or the "From" input field in a date range. */
     nameFrom?: string;
     /** Value name for the "To" input field */
     nameTo?: string;
-    /** An additional explicit React ref passed for a date range's "From" input field. */
-    refTo?: React.Ref<TextInputRefType>;
     /** The action to perform on the `input`'s onChange function for both fields.
      * This will return the data in an object with `startDate` and `endDate` keys.
      */
     onChange?: (data: FullDateType) => void;
+    /** An additional explicit React ref passed for a date range's "To"
+     * input field. Note that the "From" input takes the initial "ref" value. */
+    refTo?: React.Ref<TextInputRefType>;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Whether or not to display the "Required"/"Optional" text in the label text. */
+    showOptReqLabel?: boolean;
 }
 /**
  * Returns a single date input field or two date input fields for a date range.

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

@@ -0,0 +1,25 @@
+import React from "react";
+interface FieldsetProps {
+    /** Children to render. Typically form-related components are used. */
+    children: React.ReactNode;
+    /** Additional class name to add. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Flag to show or hide the text in the `legend` element. False by default. */
+    isLegendHidden?: boolean;
+    /** Flag to render "Required" or "Optional" in the `legend`.
+     * False/"Optional" by default. */
+    isRequired?: boolean;
+    /** Text to display in the `legend` element. */
+    legendText?: string;
+    /** Flag to show or hide the "Required"/"Optional" text in the `legend`.
+     * True by default. */
+    optReqFlag?: boolean;
+}
+/**
+ * A wrapper component that renders a `fieldset` element along with a `legend`
+ * element as its first child. Commonly used to wrap form components.
+ */
+declare const Fieldset: React.FC<FieldsetProps>;
+export default Fieldset;

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

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { HeadingDisplaySizes, HeadingLevels } from "./HeadingTypes";
 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 size used to override the default styles of the semantic HTML `<h>` elements */
@@ -9,10 +13,6 @@ export interface HeadingProps {
     id?: string;
     /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed, `Heading` will default to `<h2>` */
     level?: HeadingLevels;
-    /** Optionally pass in additional Chakra-based styles. */
-    sx?: {
-        [key: string]: any;
-    };
     /** Inner text of the `<h*>` element */
     text?: string;
     /** Optional URL that header points to; when `url` prop is passed to `Heading`, a child `<a>` element is created and the heading text becomes an active link */

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

@@ -1,23 +1,26 @@
 import * as React from "react";
+export declare type AriaLiveValues = "assertive" | "off" | "polite";
 interface HelperErrorTextProps {
-    /** Added prop when HelperText is errored */
-    ariaLive?: "polite" | "off" | "assertive";
-    /** Added prop when HelperText is errored */
-    ariaAtomic?: boolean;
-    /** Additional attributes passed to <HelperErrorText> */
-    attributes?: {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
         [key: string]: any;
     };
-    /** Additional className to add to the helperErrorText */
+    /** 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. */
+    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. */
+    ariaLive?: AriaLiveValues;
+    /** Additional className to add. */
     className?: string;
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** unique ID for helper */
+    /** Unique ID for accessibility purposes. */
     id?: string;
-    /** Toggles between helper and error styling */
-    isError: boolean;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
+    /** Toggles between helper and invalid styling. */
+    isInvalid?: boolean;
 }
 /**
  * Helper or Error text for forms

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

@@ -1,18 +1,19 @@
 import * as 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 horizobntal rule will have a default center alignment. */
+    /** 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
+     * will have a default center alignment. */
     align?: "left" | "right";
-    /** Additional attributes passed to the horizontal rule */
-    attributes?: {
-        [key: string]: any;
-    };
     /** 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 (ex. `2%`, `5px`, `1.5rem`).  If omitted, the horizobntal rule will have a default height of 2px. */
+    /** 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;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: 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 horizobntal rule will have a default width of 100%. */
+    /** 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 "auto". */
     width?: string;
 }
 export default function HorizontalRule(props: React.ComponentProps<"hr"> & HorizontalRuleProps): JSX.Element;

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

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, LogoNames } from "./IconTypes";
 export interface IconProps {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
+        [key: string]: any;
+    };
     /** Aligns the icon. */
     align?: IconAlign;
     /** className that appears in addition to "icon" */
@@ -18,6 +22,10 @@ export interface IconProps {
     name?: IconNames | LogoNames;
     /** Sets the icon size. */
     size?: IconSizes;
+    /** For accessibility purposes, the text passed in the `title` prop gets
+     * rendered in a `title` element in the SVG. This descriptive text is not
+     * visible but is needed for screenreaders to describe the graphic. */
+    title?: string;
     /** Sets the icon variant type. */
     type?: IconTypes;
 }

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

@@ -1,6 +1,10 @@
 declare const _default: {
     accessibility_full: string;
     accessibility_partial: string;
+    action_check_circle: string;
+    action_help_default: string;
+    action_help_outline: string;
+    action_launch: string;
     arrow: string;
     brooklyn: string;
     check: string;
@@ -9,6 +13,13 @@ declare const _default: {
     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;
     headset: string;
     logo_brooklyn: string;
     logo_nypl: string;

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

@@ -43,6 +43,10 @@ export declare enum IconSizes {
 export declare enum IconNames {
     AccessibilityFull = "accessibility_full",
     AccessibilityPartial = "accessibility_partial",
+    ActionCheckCircle = "action_check_circle",
+    ActionHelpDefault = "action_help_default",
+    ActionHelpOutline = "action_help_outline",
+    ActionLaunch = "action_launch",
     Arrow = "arrow",
     Check = "check",
     Clock = "clock",
@@ -50,6 +54,13 @@ export declare enum IconNames {
     Download = "download",
     ErrorFilled = "error_filled",
     ErrorOutline = "error_outline",
+    FileTypeAudio = "file_type_audio",
+    FileTypeDoc = "file_type_doc",
+    FileTypeGenericDoc = "file_type_generic_doc",
+    FileTypeImage = "file_type_image",
+    FileTypePdf = "file_type_pdf",
+    FileTypeSpreadsheet = "file_type_spreadsheet",
+    FileTypeVideo = "file_type_video",
     Headset = "headset",
     Minus = "minus",
     Plus = "plus",

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

@@ -1,22 +1,32 @@
 import * as React from "react";
-export interface ImageProps {
-    /** Text description of the image */
-    alt: string;
-    /** Additional attributes passed to the image */
-    attributes?: {
+import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
+interface ImageWrapperProps {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
         [key: string]: any;
     };
-    /** BlockName for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
     /** 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;
+    /** Optional value to control the size of the image */
+    imageSize?: ImageSizes;
+}
+export interface ImageProps extends ImageWrapperProps {
+    /** Alternate text description of the image */
+    alt: 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;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
+    /** Optional value to control the size of the image */
+    imageSize?: ImageSizes;
+    /** 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: React.ComponentProps<"img"> & ImageProps): JSX.Element;
+export {};

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

@@ -0,0 +1,20 @@
+export declare enum ImageRatios {
+    FourByThree = "fourByThree",
+    OneByTwo = "oneByTwo",
+    Original = "original",
+    SixteenByNine = "sixteenByNine",
+    Square = "square",
+    ThreeByFour = "threeByFour",
+    ThreeByTwo = "threeByTwo",
+    TwoByOne = "twoByOne"
+}
+export declare enum ImageSizes {
+    Default = "default",
+    Large = "large",
+    Medium = "medium",
+    Small = "small"
+}
+export declare enum ImageTypes {
+    Default = "default",
+    Circle = "circle"
+}

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

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { LinkTypes } from "./LinkTypes";
 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;

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

@@ -5,30 +5,35 @@ interface DefinitionProps {
     definition: string;
 }
 export interface ListProps {
-    /** BlockName for use with BEM. See how to work with blockNames and
-     * BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
+    /** 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;
-    /** Modifiers array for use with BEM. See how to work with modifiers and
-     * BEM here: http://getbem.com/introduction/ */
-    modifiers?: any[];
-    /** An optional title that will appear over the list. This prop only applies
-     * to Definition Lists. */
-    title?: string;
-    /** Ordered, Unordered, or Definition */
-    type: ListTypes;
+    /** 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.Definition` `List` types,
      * the data structure is an array of objects with `term` and `definition`
      * properties to render `dt` and `dd` elements, respectively.
      */
-    listItems?: (string | DefinitionProps)[];
+    listItems?: (string | JSX.Element | DefinitionProps)[];
+    /** Remove list styling. */
+    noStyling?: boolean;
+    /** An optional title that will appear over the list. This prop only applies
+     * to Definition Lists. */
+    title?: string;
+    /** The type of list: Ordered, Unordered, or Definition. Unordered by default. */
+    type: ListTypes;
 }
-/** A component that renders list item `li` elements or definition item `dt`
- * and `dd` elements based on the `type` prop. */
+/**
+ * A component that renders list item `li` elements or definition item `dt`
+ * and `dd` elements based on the `type` prop. Note that the `title` prop will
+ * only display for the `Definition` list type.
+ */
 export default function List(props: React.PropsWithChildren<ListProps>): any;
 export {};

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

@@ -1,25 +1,46 @@
 import React from "react";
 import { NotificationTypes } from "./NotificationTypes";
-export interface NotificationProps {
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
+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 `className` that appears in addition to "notification" */
+    /** Optional custom `Icon` that will override the default `Icon`. */
+    icon?: JSX.Element;
+    /** 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">;
+export interface NotificationProps extends BasePropsWithoutAlignText {
+    /** Additional `className` to add.  */
     className?: string;
-    /** Optional prop to control whether a `Notification` can be dismissed (closed) by a user */
+    /** Optional prop to control whether a `Notification` can be dismissed
+     * (closed) by a user. */
     dismissible?: boolean;
-    /** Optional custom `Icon` that will override the default `Icon` */
-    icon?: React.ReactNode;
-    /** ID that other components can cross reference for accessibility purposes */
+    /** 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 the margin around the `Notification` component */
+    /** Optional prop to control the margin around the `Notification` component. */
     noMargin?: boolean;
-    /** Optional prop to control the coloring of notification text and the visibility of an applicable icon */
-    notificationType?: NotificationTypes;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
+    /** Content to be rendered in a `NotificationContent` component. */
+    notificationContent: string | JSX.Element;
+    /** Content to be rendered in a `NotificationHeading` component. */
+    notificationHeading?: string;
 }
-export declare function NotificationHeading(props: any): JSX.Element;
-export declare function NotificationContent(props: any): JSX.Element;
-export default function Notification(props: React.PropsWithChildren<NotificationProps>): JSX.Element;
+/**
+ * NotificationHeading child-component.
+ */
+export declare function NotificationHeading(props: React.PropsWithChildren<BasePropsWithoutAlignText>): JSX.Element;
+/**
+ * NotificationContent child-component.
+ */
+export declare function NotificationContent(props: React.PropsWithChildren<BasePropsWithoutCentered>): 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 {};

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

@@ -1,20 +1,23 @@
-import * as React from "react";
+import React from "react";
 export interface PaginationProps {
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** Additional className for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
+    /** Additional className. */
     className?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** The total number of pages. */
-    pageCount: 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. */
-    currentPage: number;
-    /** A method that returns a Link component given the target page */
-    getPageHref?: (pageNumber: number) => string;
-    /** The method to callback when an item is selected. Passes the selected page to the consuming app as an argument. */
+    initialPage: number;
+    /** The callback function called when an item is selected and the current
+     * page should not refresh. */
     onPageChange?: (selected: number) => void;
+    /** The total number of pages. */
+    pageCount: number;
 }
-/** A component that provides a navigational list of page items. */
+/**
+ * A component that provides a navigational list of page items.
+ */
 declare const Pagination: React.FC<PaginationProps>;
 export default Pagination;

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

@@ -2,6 +2,8 @@ import { Story } from "@storybook/react/types-6-0";
 import { PaginationProps } from "./Pagination";
 /**
  * PaginationGetPageHref will refresh the browser as a new page is selected.
+ * In this example, `getPageHref` creates the `href` attribute for each
+ * page URL.
  */
 export declare const PaginationGetPageHref: Story<PaginationProps>;
 /**

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

@@ -0,0 +1,29 @@
+import React from "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;
+    /** Whether the `ProgressIndicator` should be linear or circular. */
+    indicatorType?: ProgressIndicatorTypes;
+    /** Whether the progress animation should display because the `value` prop is
+     * not known. When this is set to `true`, the `value` prop will be ignored. */
+    isIndeterminate?: boolean;
+    /** The text to display in an HTML `label` element. */
+    labelText: string;
+    /** Visually show or hide the label text. When set to `false`, then the label
+     * text will be added to the parent component as its `aria-label` attribute. */
+    showLabel?: boolean;
+    /** The size of the linear or circular progress. */
+    size?: ProgressIndicatorSizes;
+    /** A number between 0 to 100 that defines the progress' value. */
+    value?: number;
+}
+/**
+ * A component that displays a progress status for any task that takes a long
+ * time to complete or consists of multiple steps. Examples include downloading,
+ * uploading, or processing.
+ */
+declare const ProgressIndicator: React.FC<ProgressIndicatorProps>;
+export default ProgressIndicator;

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

@@ -0,0 +1,8 @@
+export declare enum ProgressIndicatorSizes {
+    Default = "default",
+    Small = "small"
+}
+export declare enum ProgressIndicatorTypes {
+    Circular = "circular",
+    Linear = "linear"
+}

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

@@ -32,6 +32,8 @@ export interface RadioProps {
     name?: string;
     /** Should be passed along with `isChecked` for controlled components. */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
     /** Offers the ability to show the radio's label onscreen or hide it. Refer
      * to the `labelText` property for more information. */
     showLabel?: boolean;

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

@@ -7,12 +7,12 @@ export interface RadioGroupProps {
     className?: string;
     /** Populates the initial value of the input */
     defaultValue?: string;
-    /** Optional string to populate the HelperErrorText for error state */
-    invalidText?: string;
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
+    /** Optional string to populate the HelperErrorText for error state */
+    invalidText?: string;
     /** Adds the 'disabled' prop to the input when true. */
     isDisabled?: boolean;
     /** Adds the 'aria-invalid' attribute to the input and
@@ -31,6 +31,8 @@ export interface RadioGroupProps {
     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;