@nypl/design-system-react-components 0.25.0 → 0.25.4

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

@@ -1,19 +1,4 @@
 export declare enum CardLayouts {
-    Horizontal = "horizontal",
-    Vertical = "vertical"
-}
-export declare enum CardImageRatios {
-    FourByThree = "four-by-three",
-    OneByTwo = "one-by-two",
-    Original = "original",
-    SixteenByNine = "sixteen-by-nine",
-    Square = "square",
-    ThreeByFour = "three-by-four",
-    ThreeByTwo = "three-by-two",
-    TwoByOne = "two-by-one"
-}
-export declare enum CardImageSizes {
-    Large = "large",
-    Medium = "medium",
-    Small = "small"
+    Row = "row",
+    Column = "column"
 }

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

@@ -2,36 +2,40 @@ import * as React from "react";
 export interface CheckboxProps {
     /** className you can add in addition to 'input' */
     className?: string;
-    /** Optional string to populate the HelperErrorText for the error state
-     * when `isInvalid` is true.
-     */
-    errorText?: string;
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** When using the Checkbox as a "controlled" form element, you can specify the
-     * Checkbox's checked state using this prop.
+    /** Optional string to populate the HelperErrorText for the error state
+     * when `isInvalid` is true. */
+    invalidText?: string;
+    /** When using the Checkbox as a "controlled" form element, you can specify
+     * the Checkbox's checked state using this prop.
      * Learn more about controlled and uncontrolled form fields:
      * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
     isChecked?: boolean;
     /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
-     * This also makes the text italic and color scheme gray.
-     */
+     * This also makes the text italic and color scheme gray. */
     isDisabled?: boolean;
+    /** Adds the indeterminate state to the `Checkbox`. */
+    isIndeterminate?: boolean;
     /** Adds the 'aria-invalid' attribute to the input when true. This also makes
-     * the color theme "NYPL error" red for the button and text.
-     */
+     * 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 checkbox's label.  This will serve as the text content for a `<label>` element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
+    /** The checkbox's label. This will serve as the text content for a `<label>`
+     * element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
     labelText: string;
-    /** The name prop indicates into which group of checkboxes this checkbox belongs.  If none is specified, 'default' will be used */
+    /** The name prop indicates into which group of checkboxes this checkbox
+     * belongs. If none is specified, 'default' will be used */
     name?: string;
     /** The action to perform on the `<input>`'s onChange function  */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Offers the ability to show the checkbox's label onscreen or hide it. Refer to the `labelText` property for more information. */
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Offers the ability to show the checkbox's label onscreen or hide it.
+     * Refer to the `labelText` property for more information. */
     showLabel?: boolean;
     /** Populates the value of the input */
     value?: string;

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

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
+export interface CheckboxGroupProps {
+    /** Any child node passed to the component. */
+    children: React.ReactNode;
+    /** Populates the initial value of the input */
+    defaultValue?: 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;
+    /** A`dds the 'aria-invalid' attribute to the input and
+     * sets the error state when true. */
+    isInvalid?: boolean;
+    /** Adds the 'required' attribute to the input when true. */
+    isRequired?: boolean;
+    /** The checkbox group label displayed in a `legend` element if `showlabel` is
+     * true, or an "aria-label" if `showLabel` is false. */
+    labelText: string;
+    /** Renders the checkbox buttons in a row or column (default). */
+    layout?: CheckboxGroupLayoutTypes;
+    /** The `name` prop indicates the form group for all the `Checkbox` 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;
+}
+/**
+ * Wrapper component to wrap `Checkbox` components. Can be displayed in a
+ * column or in a row. The `CheckboxGroup` component renders all the necessary
+ * wrapping and associated text elements, but the checkbox input elements
+ * _need_ to be child `Checkbox` components from the NYPL Design System.
+ */
+declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLInputElement>>;
+export default CheckboxGroup;

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

@@ -0,0 +1,4 @@
+export declare enum CheckboxGroupLayoutTypes {
+    Column = "column",
+    Row = "row"
+}

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 'errored' styling. */
-    errored?: 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). */
-    disabled?: 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;
+    isDisabled?: boolean;
+    /** 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/Form/Form.d.ts

@@ -1,23 +1,28 @@
 import * as React from "react";
 import { FormSpacing } from "./FormTypes";
+export interface FormChildProps {
+    /** className to be applied to FormRow */
+    className?: string;
+    /** Spacing size (internal use) */
+    gap?: FormSpacing;
+    /** ID that other components can cross reference (internal use) */
+    id?: string;
+}
 export interface FormProps {
     /** Optional form `action` attribute */
     action?: string;
-    /** Optional additional attributes passed to the `<form>` element */
-    attributes?: {
-        [key: string]: any;
-    };
     /** Optional className you can add in addition to `form` */
     className?: string;
     /** Optional ID that other components can cross reference */
     id?: string;
     /** Optional form `method` attribute */
     method?: "get" | "post";
-    /** Optional modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
     /** Optional spacing size; if omitted, the default `large` (2rem / 32px) spacing will be used; ```IMPORTANT: for general form layout, this prop should not be used``` */
     spacing?: FormSpacing;
 }
-export declare function FormRow(props: any): JSX.Element;
-export declare function FormField(props: any): JSX.Element;
+/** FormRow child-component */
+export declare function FormRow(props: React.PropsWithChildren<FormChildProps>): JSX.Element;
+/** FormField child-component */
+export declare function FormField(props: React.PropsWithChildren<FormChildProps>): JSX.Element;
+/** main Form component */
 export default function Form(props: React.ComponentProps<"form"> & FormProps): JSX.Element;

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

@@ -1,8 +1,2 @@
-export declare enum FormSpacing {
-    ExtraExtraSmall = "extra-extra-small",
-    ExtraSmall = "extra-small",
-    Small = "small",
-    Medium = "medium",
-    Large = "large",
-    ExtraLarge = "extra-large"
-}
+import { GridGaps as FormSpacing } from "../Grid/GridTypes";
+export { FormSpacing };

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

@@ -0,0 +1,9 @@
+export declare enum GridGaps {
+    ExtraExtraSmall = "xxs",
+    ExtraSmall = "xs",
+    Small = "s",
+    Medium = "m",
+    Large = "l",
+    ExtraLarge = "xl",
+    ExtraExtraLarge = "xxl"
+}

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { GridGaps } from "./GridTypes";
+export interface SimpleGridProps {
+    /** Additional class name. */
+    className?: string;
+    /** Optional numeric value to override the default column count; the default column count is 3 */
+    columns?: number;
+    /** Optional gap size; if omitted, the default `large` (2rem / 32px) spacing will be used; ```IMPORTANT: for standard grid layouts, this prop should not be used``` */
+    gap?: GridGaps;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+}
+declare function SimpleGrid(props: React.PropsWithChildren<SimpleGridProps>): JSX.Element;
+export default SimpleGrid;

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

@@ -1,8 +1,10 @@
 import * as React from "react";
 import { HeadingDisplaySizes, HeadingLevels } from "./HeadingTypes";
 export interface HeadingProps {
-    /** 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;
+    };
     /** Optional className that appears in addition to `heading` */
     className?: string;
     /** Optional size used to override the default styles of the semantic HTML `<h>` elements */
@@ -11,8 +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;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
     /** 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/Hero/Hero.d.ts

@@ -1,27 +1,32 @@
 import * as React from "react";
 import { HeroTypes } from "./HeroTypes";
 export interface HeroProps {
-    /** Optional hex color value used to override the default background color for a given `Hero` variation; Note: not all `Hero` variations utilize this prop */
+    /** Optional hex color value used to override the default background
+     * color for a given `Hero` variation.
+     * Note: not all `Hero` variations utilize this prop. */
     backgroundColor?: string;
-    /** Optional path to an image that will be used as a background image for the `Hero` component; Note: not all `Hero` variations utilize this prop */
+    /** Optional path to an image that will be used as a background image for the
+     * `Hero` component.
+     * Note: not all `Hero` variations utilize this prop. */
     backgroundImageSrc?: string;
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** Optional className that appears in addition to `hero` */
-    className?: string;
-    /** Optional hex color value used to override the default text color for a given `Hero` variation; Note: not all `Hero` variations utilize this prop */
+    /** Optional hex color value used to override the default text color for a
+     * given `Hero` variation.
+     * Note: not all `Hero` variations utilize this prop. */
     foregroundColor?: string;
-    /** Required heading element. */
+    /** Optional heading element. */
     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 Hero type; Note: not all `Hero` variations utilize this prop */
+    /** 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.
+     * Note: not all `Hero` variations utilize this prop. */
     image?: JSX.Element;
-    /** Optional details area that contains location data; Note: not all `Hero` variations utilize this prop */
+    /** Optional details area that contains location data.
+     * Note: not all `Hero` variations utilize this prop. */
     locationDetails?: JSX.Element;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Optional string used for the subheader that displays underneath the heading element */
-    subHeaderText?: JSX.Element;
+    /** Optional string used for the subheader that displays
+     * underneath the heading element. */
+    subHeaderText?: string | JSX.Element;
 }
 export default function Hero(props: React.PropsWithChildren<HeroProps>): JSX.Element;

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

@@ -1,7 +1,12 @@
 export declare enum HeroTypes {
-    Campaign = "CAMPAIGN",
-    FiftyFifty = "FIFTYFIFTY",
-    Primary = "PRIMARY",
-    Secondary = "SECONDARY",
-    Tertiary = "TERTIARY"
+    Primary = "primary",
+    Secondary = "secondary",
+    SecondaryBooksAndMore = "secondaryBooksAndMore",
+    SecondaryLocations = "secondaryLocations",
+    SecondaryResearch = "secondaryResearch",
+    SecondaryWhatsOn = "secondaryWhatsOn",
+    Tertiary = "tertiary",
+    Campaign = "campaign",
+    FiftyFifty = "fiftyfifty"
 }
+export declare const HeroSecondaryTypes: HeroTypes[];

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,28 +1,33 @@
 import * as React from "react";
-import { IconRotationTypes, IconNames, LogoNames, IconColors, IconSizes } from "./IconTypes";
+import { IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, LogoNames } from "./IconTypes";
 export interface IconProps {
-    /** Additional attributes to pass to the `<svg>` tag. */
-    attributes?: {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
         [key: string]: any;
     };
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
+    /** Aligns the icon. */
+    align?: IconAlign;
     /** className that appears in addition to "icon" */
     className?: string;
-    /** Icons designated as decorative will be ignored by screenreaders */
+    /** Overrides default icon color (black). */
+    color?: IconColors;
+    /** Icons designated as decorative will be ignored by screenreaders. True
+     * by default. */
     decorative?: boolean;
-    /** This text will be added as a child `<title>` element inside the `<svg>` tag.  It is recommended to do this for increased accessibility. */
-    titleText?: string;
     /** Rotates the icon clockwise in increments of 90deg */
     iconRotation?: IconRotationTypes;
-    /** Overrides default icon color (black). */
-    color?: IconColors;
-    /** Sets the icon size. */
-    size?: IconSizes;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
     /** The name of the icon you want to use. */
     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;
 }
 /**
  * Renders SVG-based icons.

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;