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

package/CHANGELOG.md

@@ -8,6 +8,36 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 0.25.1 (October 14, 2021)
+
+### Adds
+
+- Updates the `Accordion` component to internally use Chakra components.
+- Adds DS `SimpleGrid` component composed from Chakra's `Simplegrid` component.
+- Adds DS `Text` component composed from Chakra's `Text` component.
+- Update the NYPL Colors with updated color names and values.
+- Composes the DS `TextInput` component from Chakra's `Input` and `Textarea` components.
+- Composes the DS `Select` component from Chakra's `Select` component.
+- Composes the DS `Hero` component from Chakra's component.
+- Composes the DS `CheckboxGroup` component from Chakra's `CheckboxGroup` component.
+- Composes the DS "Template" components (`Template`, `TemplateHeader`, `TemplateBreakout`, `TemplateContent`, `TemplateContentPrimary`, `TemplateContentSidebar`, `TemplateFooter`) from Chakra's `Box` component for page layouts through children components.
+- Composes the DS `TemplateAppContainer` component from Chakra's `Box` component for page layouts through props.
+- Composes the DS `Link` component with Chakra component and fixes the `Button` type.
+- Exports Chakra's `Grid` and `GridItem` components.
+- Composes the DS `Label` component with Chakra component and updates the font size.
+- Composes the DS `StatusBadge` component from Chakra's component.
+- Composes the DS `Forms` component using DS and Chakra components.
+- Composes the DS `Icon` component with Chakra's `Icon` component. Added new props for `Icon` sizing, alignment, name, and rotation.
+- Composes the DS `SearchBar` component from DS `Select`, `TextInput`, `Button`, and `HelperErrorText` components.
+- Composes the DS `Breadcrumbs` component from Chakra's `Breadcumb`, `BreadcrumbItem` and `BreadcrumbLink` components.
+
+### Changes
+
+- Updates spacing values to use NYPL spacing rather than "em"s.
+- Updates the `SkeletonLoaderLayouts` enum values from `Horizontal` and `Vertical` to `Row` and `Column`, respectively.
+- Updates the `CardLayouts` enum values from `Horizontal` and `Vertical` to `Row` and `Column`, respectively.
+- Updates font size of the `legend` element used in `CheckboxGroup`, `DatePicker` and `RadioGroup`.
+
 ## 0.25.0
 
 ### Breaking Changes

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

@@ -1,19 +1,19 @@
 import * as React from "react";
+export interface AccordionContentDataProps {
+    label: string;
+    panel: string | React.ReactNode;
+}
 export interface AccordionProps {
-    /** Inner label on the button that opens the accordion */
-    accordionLabel?: React.ReactNode;
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** className you can add in addition to 'input' */
-    className?: string;
-    /** Whether the accordion is open by default */
-    defaultOpen?: boolean;
+    /** Array of data to display */
+    contentData: AccordionContentDataProps[];
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** accordionLabel's input ID */
-    inputId?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
+    /** Whether the accordion is open by default only on its initial rendering */
+    isDefaultOpen?: boolean;
 }
-/** Accordion component that shows content on toggle */
-export default function Accordion(props: React.PropsWithChildren<AccordionProps>): JSX.Element;
+/**
+ * Accordion component that shows content on toggle. Can be used to display
+ * multiple accordion items together.
+ */
+declare function Accordion(props: React.PropsWithChildren<AccordionProps>): JSX.Element;
+export default Accordion;

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

@@ -1,21 +1,18 @@
 import * as React from "react";
-declare type breadcrumb = {
+import { ColorVariants } from "./BreadcrumbsTypes";
+export interface BreadcrumbsDataProps {
     url: string;
-    text: string;
-};
+    text: string | React.ReactNode;
+}
 export interface BreadcrumbProps {
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
     /** Breadcrumb links as an array */
-    breadcrumbs: breadcrumb[] | JSX.Element[];
+    breadcrumbsData: BreadcrumbsDataProps[];
     /** className you can add in addition to 'input' */
     className?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-}
-export default class Breadcrumbs extends React.Component<BreadcrumbProps, any> {
-    static defaultProps: {};
-    constructor(props: BreadcrumbProps);
-    render(): JSX.Element;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Used to control how the `Hero` component will be rendered. */
+    colorVariant?: ColorVariants;
 }
-export {};
+declare function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>): JSX.Element;
+export default Breadcrumbs;

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

@@ -0,0 +1,6 @@
+export declare enum ColorVariants {
+    BooksAndMore = "booksAndMore",
+    Locations = "locations",
+    Research = "research",
+    WhatsOn = "whatsOn"
+}

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

@@ -3,5 +3,6 @@ export declare enum ButtonTypes {
     Secondary = "secondary",
     Callout = "callout",
     Pill = "pill",
-    Link = "link"
+    Link = "link",
+    SearchBar = "searchBar"
 }

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

@@ -55,7 +55,7 @@ export interface CardProps {
     imageSize?: CardImageSizes;
     /** The path to the image displayed with the card */
     imageSrc?: string;
-    /** Optional value to control the position of the image placeholder; default value is `vertical` */
+    /** Optional value to control the position of the image placeholder; default value is `column` */
     layout?: CardLayouts;
     /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
     modifiers?: string[];

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

@@ -1,6 +1,6 @@
 export declare enum CardLayouts {
-    Horizontal = "horizontal",
-    Vertical = "vertical"
+    Row = "row",
+    Column = "column"
 }
 export declare enum CardImageRatios {
     FourByThree = "four-by-three",

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

@@ -0,0 +1,43 @@
+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 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;
+    /** 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 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/DatePicker/DatePicker.d.ts

@@ -47,14 +47,14 @@ export interface DatePickerProps extends DatePickerWrapperProps {
     maxDate?: string;
     /** Populates the `HelperErrorText` error state for both "From" and "To" input components. */
     invalidText?: string;
-    /** Helper for modifiers array; adds 'errored' styling. */
-    errored?: boolean;
+    /** 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). */
-    disabled?: boolean;
+    isDisabled?: boolean;
     /** Modifiers array for use with BEM. See how to work with modifiers and BEM
      * here: http://getbem.com/introduction/ */
     modifiers?: string[];

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,6 @@
 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;
     /** 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 +9,10 @@ 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[];
+    /** 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/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/Icons/Icon.d.ts

@@ -1,28 +1,25 @@
 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?: {
-        [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;
+    /** Sets the icon variant type. */
+    type?: IconTypes;
 }
 /**
  * Renders SVG-based icons.

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

@@ -1,71 +1,85 @@
-export declare enum IconRotationTypes {
-    rotate0 = "rotate-0",
-    rotate90 = "rotate-90",
-    rotate180 = "rotate-180",
-    rotate270 = "rotate-270"
+export declare enum IconAlign {
+    Left = "left",
+    Right = "right",
+    None = "none"
 }
-export declare enum IconNames {
-    accessibility_full = "accessibility_full",
-    accessibility_partial = "accessibility_partial",
-    arrow = "arrow",
-    check = "check",
-    clock = "clock",
-    close = "close",
-    download = "download",
-    error_filled = "error_filled",
-    error_outline = "error_outline",
-    headset = "headset",
-    minus = "minus",
-    plus = "plus",
-    search = "search",
-    speaker_notes = "speaker_notes",
-    utility_account_filled = "utility_account_filled",
-    utility_account_unfilled = "utility_account_unfilled",
-    utility_hamburger = "utility_hamburger",
-    utility_search = "utility_search"
+export declare enum IconTypes {
+    Default = "default",
+    Breadcrumbs = "breadcrumbs"
 }
-export declare enum LogoNames {
-    brooklyn = "brooklyn",
-    logo_brooklyn = "logo_brooklyn",
-    logo_nypl = "logo_nypl",
-    logo_nypl_negative = "logo_nypl_negative",
-    logo_queens = "logo_queens",
-    lpa_negative = "lpa_negative",
-    lpa_positive = "lpa_positive",
-    nypl_circle_negative = "nypl_circle_negative",
-    nypl_circle_positive = "nypl_circle_positive",
-    nypl_full_lock_up_negative = "nypl_full_lock_up_negative",
-    nypl_full_lock_up = "nypl_full_lock_up",
-    nypl_no_lion_negative = "nypl_no_lion_negative",
-    nypl_no_lion_positive = "nypl_no_lion_positive",
-    queens_long = "queens_long",
-    queens_stacked = "queens_stacked",
-    schomburg_circle = "schomburg_circle",
-    schomburg_positive = "schomburg_positive",
-    simplye_black = "simplye_black",
-    simplye_color = "simplye_color",
-    snfl_negative = "snfl_negative",
-    snfl_positive = "snfl_positive"
+export declare enum IconRotationTypes {
+    Rotate0 = "rotate0",
+    Rotate90 = "rotate90",
+    Rotate180 = "rotate180",
+    Rotate270 = "rotate270"
 }
 export declare enum IconColors {
-    ui_black = "ui-black",
-    ui_white = "ui-white",
-    brand_primary = "brand-primary",
-    brand_secondary = "brand-secondary",
-    section_whats_on_primary = "section-whats-on-primary",
-    section_books_and_more_primary = "section-books-and-more-primary",
-    section_research_primary = "section-research-primary",
-    section_research_secondary = "section-research-secondary",
-    section_locations_primary = "section-locations-primary",
-    section_research_library_lpa = "section-research-library-lpa",
-    section_research_library_schomburg = "section-research-library-schomburg",
-    section_research_library_schwartzman = "section-research-library-schwartzman"
+    UiBlack = "ui.black",
+    UiWhite = "ui.white",
+    BrandPrimary = "brand.primary",
+    BrandSecondary = "brand.secondary",
+    SectionWhatsOnPrimary = "section.whats-on.primary",
+    SectionWhatsOnSecondary = "section.whats-on.secondary",
+    SectionBooksAndMorePrimary = "section.books-and-more.primary",
+    SectionBooksAndMoreSecondary = "section.books-and-more.secondary",
+    SectionResearchPrimary = "section.research.primary",
+    SectionResearchSecondary = "section.research.secondary",
+    SectionLocationsPrimary = "section.locations.primary",
+    SectionLocationsSecondary = "section.locations.secondary",
+    SectionBlogsPrimary = "section.blogs.primary",
+    SectionBlogsSecondary = "section.blogs.secondary",
+    SectionResearchLibraryLpa = "section.research-library.lpa",
+    SectionResearchLibrarySchomburg = "section.research-library.schomburg",
+    SectionResearchLibrarySchwartzman = "section.research-library.schwartzman"
 }
 export declare enum IconSizes {
-    small = "small",
-    medium = "medium",
-    large = "large",
-    xlarge = "xlarge",
-    xxlarge = "xxlarge",
-    xxxlarge = "xxxlarge"
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+    ExtraLarge = "xlarge",
+    ExtraExtraLarge = "xxlarge",
+    ExtraExtraExtraLarge = "xxxlarge"
+}
+export declare enum IconNames {
+    AccessibilityFull = "accessibility_full",
+    AccessibilityPartial = "accessibility_partial",
+    Arrow = "arrow",
+    Check = "check",
+    Clock = "clock",
+    Close = "close",
+    Download = "download",
+    ErrorFilled = "error_filled",
+    ErrorOutline = "error_outline",
+    Headset = "headset",
+    Minus = "minus",
+    Plus = "plus",
+    Search = "search",
+    SpeakerNotes = "speaker_notes",
+    UtilityAccountFilled = "utility_account_filled",
+    UtilityAccountUnfilled = "utility_account_unfilled",
+    UtilityHamburger = "utility_hamburger",
+    UtilitySearch = "utility_search"
+}
+export declare enum LogoNames {
+    Brooklyn = "brooklyn",
+    LogoBrooklyn = "logo_brooklyn",
+    LogoNypl = "logo_nypl",
+    LogoNyplNegative = "logo_nypl_negative",
+    LogoQueens = "logo_queens",
+    LpaNegative = "lpa_negative",
+    LpaPositive = "lpa_positive",
+    NyplCircleNegative = "nypl_circle_negative",
+    NyplCirclePositive = "nypl_circle_positive",
+    NyplFullLockUpNegative = "nypl_full_lock_up_negative",
+    NyplFullLockUp = "nypl_full_lock_up",
+    NyplNoLionNegative = "nypl_no_lion_negative",
+    NyplNoLionPositive = "nypl_no_lion_positive",
+    QueensLong = "queens_long",
+    QueensStacked = "queens_stacked",
+    SchomburgCircle = "schomburg_circle",
+    SchomburgPositive = "schomburg_positive",
+    SimplyeBlack = "simplye_black",
+    SimplyeColor = "simplye_color",
+    SnflNegative = "snfl_negative",
+    SnflPositive = "snfl_positive"
 }

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

@@ -1,29 +1,17 @@
 import * as React from "react";
 declare type optReqFlagType = "Required" | "Optional" | "" | undefined;
 interface LabelProps {
-    /** Additional attributes to pass to the <label> tag */
-    attributes?: {
-        [key: string]: any;
-    };
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** className that appears in addition to "label" */
+    /** Additional CSS class name to render in the `label` element. */
     className?: string;
-    /** The id of the html element that this `Label` is describing */
-    htmlFor?: string;
+    /** The id of the html element that this `Label` is describing. */
+    htmlFor: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Modifiers for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
     /** Displays "Required" or "Optional" string alongside the label */
     optReqFlag?: optReqFlagType;
 }
 /**
  * A label for form inputs. It should never be used alone.
  */
-export default function Label(props: React.PropsWithChildren<LabelProps>): React.DetailedReactHTMLElement<{
-    className: string;
-    htmlFor: string;
-    id: string;
-}, HTMLElement>;
-export {};
+declare function Label(props: React.PropsWithChildren<LabelProps>): JSX.Element;
+export default Label;

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

@@ -5,24 +5,20 @@ export interface LinkProps {
     attributes?: {
         [key: string]: any;
     };
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** className that appears in addition to "link" */
+    /** Any child node passed to the component. */
+    children: React.ReactNode;
+    /** Additional class name to render in the `Link` component. */
     className?: string;
-    /** Href attribute */
+    /** The `href` attribute for the anchor element. */
     href?: string;
-    /** ID */
+    /** ID used for accessibility purposes. */
     id?: string;
-    /** Controls the link visuals—action, button, or default. */
+    /** Controls the link visuals: action, button, backwards, forwards, or default. */
     type?: LinkTypes;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Any child node passed to the component. */
-    children: React.ReactNode;
 }
 /**
- * A component that uses an `href` prop or a child anchor element, to create an
- * anchor element with added styling and conventions.
+ * 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 default Link;