@cfpb/design-system-react 0.0.1

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

@@ -0,0 +1,20 @@
+import type { HeadingLevel } from '../../types/headingLevel';
+interface HeroProperties extends React.HTMLAttributes<HTMLDivElement> {
+    backgroundColor?: string;
+    heading?: React.ReactNode;
+    headingLevel?: HeadingLevel;
+    image?: string;
+    imageAltText?: string;
+    imageIsPhoto?: boolean;
+    is5050?: boolean;
+    isJumbo?: boolean;
+    isKnockout?: boolean;
+    subheading?: React.ReactNode;
+    subheadingLevel?: HeadingLevel | 'p';
+    textColor?: string;
+}
+/**
+ * https://cfpb.github.io/design-system/patterns/heroes
+ */
+export default function Hero({ backgroundColor, heading, headingLevel, image, imageAltText, imageIsPhoto, is5050, isJumbo, isKnockout, subheading, subheadingLevel, textColor, className, ...properties }: HeroProperties): JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+interface HeroImageProperties {
+    image?: string;
+    altText?: string;
+}
+export declare const HeroImage: ({ image, altText }: HeroImageProperties) => JSX.Element | null;
+export {};

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

@@ -0,0 +1,9 @@
+import type { Ref } from 'react';
+/**
+ * Add inline styles which apply a background-image to the referenced <div>
+ *
+ * @param image Image URL
+ * @param shoudAddStyles Flag to indicate that inline styles should be included
+ * @returns Ref that should be attached to the wrapper <div>
+ */
+export declare const useBackgroundImage: (image?: string, shoudAddStyles?: boolean) => Ref<HTMLDivElement>;

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

@@ -0,0 +1,27 @@
+interface IconProperties {
+    name: string;
+    alt?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+    isPresentational?: boolean;
+    withBg?: boolean;
+    size?: string;
+}
+/**
+ * CFPB DS Icon
+ *
+ * https://cfpb.github.io/design-system/foundation/iconography
+ *
+ * @param name Canonical icon name
+ * @param alt Alt text for image
+ * @param ariaLabel Labels the SVG for accessibility
+ * @param ariaLabelledby ID of element that labels the SVG for accessibility
+ * @param ariaDescribedby ID of element that describes the SVG for accessibility
+ * @param isPresentational Is SVG purely presentational and should be ignored by screen readers?
+ * @param withBg With background?
+ * @param size Match the icon size to a specified HTML element or provide a custom size. By default the icon size is determined by it's parent element's font-size.
+ * @returns ReactElement | null
+ */
+export declare const Icon: ({ name, alt, ariaLabel, ariaLabelledby, ariaDescribedby, isPresentational, withBg, size, ...others }: IconProperties) => JSX.Element | null;
+export {};

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

@@ -0,0 +1,9 @@
+export declare const navigationIcons: string[];
+export declare const statusIcons: string[];
+export declare const socialIcons: string[];
+export declare const communicationIcons: string[];
+export declare const numberIcons: string[];
+export declare const documentIcons: string[];
+export declare const financialIcons: string[];
+export declare const expenseIcons: string[];
+export declare const webIcons: string[];

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

@@ -0,0 +1,8 @@
+interface LabelProperties {
+    children: React.ReactNode;
+    inline?: boolean;
+    htmlFor: string;
+    className?: string;
+}
+export declare const Label: ({ children, inline, htmlFor, className, ...other }: JSX.IntrinsicElements['label'] & LabelProperties) => React.ReactElement | null;
+export default Label;

package/dist/components/Layout/LayoutContent.d.ts

@@ -0,0 +1,8 @@
+interface LayoutContentProperties {
+    children: JSX.Element | JSX.Element[] | string;
+    flushAllOnSmall?: boolean;
+    flushBottom?: boolean;
+    flushTopOnSmall?: boolean;
+}
+export declare const LayoutContent: ({ children, flushBottom, flushTopOnSmall, flushAllOnSmall, ...properties }: LayoutContentProperties & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export {};

package/dist/components/Layout/LayoutMain.d.ts

@@ -0,0 +1,8 @@
+interface LayoutMainProperties {
+    children: JSX.Element | JSX.Element[];
+    classes?: string;
+    id?: string;
+    layout?: '1-3' | '2-1';
+}
+export declare const LayoutMain: ({ children, classes, id, layout }: LayoutMainProperties) => JSX.Element;
+export {};

package/dist/components/Layout/LayoutSidebar.d.ts

@@ -0,0 +1,8 @@
+interface LayoutSidebarProperties {
+    children: JSX.Element | JSX.Element[] | string;
+    flushBottom?: boolean;
+    flushTopOnSmall?: boolean;
+    flushAllOnSmall?: boolean;
+}
+export declare const LayoutSidebar: ({ children, flushBottom, flushTopOnSmall, flushAllOnSmall, ...properties }: LayoutSidebarProperties & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export {};

package/dist/components/Layout/LayoutWrapper.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ~ Usage ~
+ *
+ * <Layout.Main>
+ *  <Hero />
+ *  <Layout.Wrapper>
+ *    <Layout.Content>
+ *      Main Content
+ *    </Layout.Content>
+ *    <Layout.Sidebar>
+ *      Sidebar Content
+ *    </Layout.Sidebar>
+ *  </Layout.Wrapper>
+ * </Layout.Main>
+ */
+interface LayoutWrapperProperties {
+    children: JSX.Element | JSX.Element[] | string;
+}
+export declare const LayoutWrapper: ({ children, ...properties }: LayoutWrapperProperties & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export {};

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

@@ -0,0 +1,20 @@
+import type { JSXElement } from '../../types/jsxElement';
+export interface LinkProperties extends React.HTMLProps<HTMLAnchorElement> {
+    children?: React.ReactNode;
+    hasIcon?: boolean;
+    href?: string;
+    isJump?: boolean;
+    isRouterLink?: boolean;
+    noWrap?: boolean;
+    ref?: React.Ref<HTMLAnchorElement>;
+    type?: 'default' | 'destructive' | 'list';
+}
+/**
+ * Links are navigational elements that connect users to other locations, either on the current page or to a different page or site. In contrast, <a href="https://cfpb.github.io/design-system/components/buttons">buttons</a> are used to signal important actions.
+ *
+ * Source: https://cfpb.github.io/design-system/components/links
+ */
+export default function Link({ children, hasIcon, href, isJump, isRouterLink, noWrap, type, ...others }: LinkProperties): JSXElement;
+export declare const LinkText: ({ children, ...others }: React.HTMLProps<HTMLSpanElement>) => JSX.Element;
+export declare const ListLink: (properties: LinkProperties) => JSXElement;
+export declare const DestructiveLink: (properties: LinkProperties) => JSXElement;

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

@@ -0,0 +1,11 @@
+interface ListProperties {
+    children: JSX.Element | JSX.Element[];
+    className?: string;
+    isHorizontal?: boolean;
+    isLinks?: boolean;
+    isOrdered?: boolean;
+    isSpaced?: boolean;
+    isUnstyled?: boolean;
+}
+export default function List({ children, className, isHorizontal, isLinks, isOrdered, isSpaced, isUnstyled }: ListProperties): JSX.Element;
+export {};

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

@@ -0,0 +1,34 @@
+import React from 'react';
+export default function ListItem({ children, className, ...properties }: React.HTMLProps<HTMLLIElement>): JSX.Element;
+interface ListItemBuilderProperties {
+    children: JSX.Element[];
+    className?: string;
+    itemClassname?: string;
+}
+/**
+ * A utility component that wraps each child element in an <li>,
+ * while adding the provided `className` prop to the newly wrapped element.
+ *
+ * Example:
+ * <ListItemBuilder className='u-w33pct' itemClassname='m-list__link'>
+ *   <a className='selected' href='/home' key='home'>Homepage</a>
+ *   <a href='/away' key='away'>Other page</a>
+ * </ListItemBuilder>
+ *
+ * Example Output:
+ * <>
+ *   <li class='m-list__item u-w33pct' key='home'>
+ *     <a class='m-list__link selected' href='/home'>Homepage</a>
+ *   </li>
+ *   <li class='m-list__item u-w33pct' key='away'>
+ *     <a class='m-list__link' href='/away'>Other page</a>
+ *   </li>
+ * </>
+ *
+ * @param children Elements to be wrapped in <li>
+ * @param itemClassname Class name to be applied each of the `children` elements (not the <li>)
+ * @param className Class name to be applied each of the <li> elements
+ * @returns Single nestable JSX element
+ */
+export declare function ListItemBuilder({ children, itemClassname, className }: ListItemBuilderProperties): JSX.Element;
+export {};

package/dist/components/Navbar/Navbar.d.ts

@@ -0,0 +1,11 @@
+interface CfpbLogoProperties {
+    href?: string;
+}
+export declare function CfpbLogo({ href }: CfpbLogoProperties): JSX.Element;
+interface NavbarProperties {
+    links?: JSX.Element[];
+    href?: string;
+}
+export default function Navbar({ links, href }: NavbarProperties): JSX.Element;
+export declare const ExampleLinks: JSX.Element[];
+export {};

package/dist/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,9 @@
+import type { User } from '../ResponsiveMenu/ResponsiveMenu';
+interface PageHeaderProperties {
+    links?: JSX.Element[];
+    user?: User;
+    href?: string;
+    withBottomBorder?: boolean;
+}
+export default function PageHeader({ links, user, href, withBottomBorder }: PageHeaderProperties): JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+import type { ReactElement } from 'react';
+export interface PaginationProperties {
+    /** Identifier of the table this element controls */
+    tableId?: string;
+    /** Currently displayed page number  */
+    page: number;
+    /** Total number of available pages */
+    pageCount: number;
+    /** Event handler for `Previous` button */
+    onClickPrevious: () => void;
+    /** Event handler for `Next` button */
+    onClickNext: () => void;
+    /** Event handler for `Go` button */
+    onClickGo: (value: number) => void;
+    /** Text label for Previous button */
+    previousLabel?: string;
+    /** Text label for Next button */
+    nextLabel?: string;
+}
+/**
+ * Pagination is used to help split up long sets of data or content into shorter pieces, so as to make it easier for users to consume information.
+ *
+ * Source: https://cfpb.github.io/design-system/components/pagination
+ */
+export declare const Pagination: ({ tableId, page, pageCount, onClickPrevious, onClickNext, onClickGo, previousLabel, nextLabel }: PaginationProperties) => ReactElement;

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

@@ -0,0 +1,2 @@
+export declare const MIN_PAGE = 1;
+export declare const DEFAULT_PER_PAGE = 20;

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

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { PaginationProperties } from './Pagination';
+export declare const ONE = 1;
+interface UsePaginationProperties {
+    isPaginated?: boolean;
+    startPage?: number;
+    rows?: ReactNode[][];
+    perPage?: number;
+}
+/**
+ * Hook to determine which data is visible for the currently selected page as well as derive props for Pagination based on the provided list of items and configuration options
+ *
+ *  In the return array:
+ * - VisibleRows = Rows for the currently selected page (or all rows when not paginating)
+ * - PaginationProperties = Props that should be passed to the <Pagination /> component
+ *
+ * @returns [VisibleRows, PaginationProperties]
+ */
+export declare const usePagination: ({ isPaginated, startPage, rows, perPage }: UsePaginationProperties) => [ReactNode[][], PaginationProperties];
+export {};

package/dist/components/Paragraph/Paragraph.d.ts

@@ -0,0 +1,10 @@
+interface ParagraphProperties extends React.HTMLProps<HTMLParagraphElement> {
+    isLead?: boolean;
+}
+/**
+ * Paragraph text should provide an efficient and pleasant experience on every viewport size. Readable text makes good use of alignment, spacing, line length and height, and contrast.
+ *
+ * Source: https://cfpb.github.io/design-system/foundation/paragraphs
+ */
+export declare function Paragraph({ children, isLead, className, ...properties }: ParagraphProperties): JSX.Element;
+export default Paragraph;

package/dist/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+import type { ReactNode } from 'react';
+interface RadioProperties {
+    id: string;
+    label: ReactNode;
+    className?: string;
+    helperText?: string;
+    inputRef?: React.RefObject<HTMLInputElement> | string | ((instance: HTMLInputElement | null) => void) | null | undefined;
+    disabled?: boolean;
+    isLarge?: boolean;
+    name?: string;
+    labelClassName: string;
+    labelInline: boolean /** Removes/Adds 'label__heading' class to the Label * */;
+}
+export declare const RadioButton: ({ id, name, helperText, className, disabled, isLarge, labelClassName, labelInline, label, inputRef, ...properties }: JSX.IntrinsicElements['input'] & RadioProperties) => React.ReactElement;
+export default RadioButton;

package/dist/components/ResponsiveMenu/ResponsiveMenu.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface CfpbLogoProperties {
+    href?: string;
+}
+export declare function CfpbLogo({ href }: CfpbLogoProperties): JSX.Element;
+interface ResponsiveMenuProperties {
+    links?: React.ReactNode[];
+    href?: string;
+}
+export default function ResponsiveMenu({ links, href }: ResponsiveMenuProperties): JSX.Element;
+export declare const ExampleLinks: React.ReactNode[];
+export {};

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,25 @@
+import type { SelectHTMLAttributes } from 'react';
+export interface SelectOption {
+    value: string;
+    label: string;
+    selected?: boolean;
+}
+export interface SelectProperties extends SelectHTMLAttributes<HTMLSelectElement> {
+    disabled?: boolean;
+    id: string;
+    isMulti?: boolean;
+    label?: string;
+    onChange?: (selected: SelectOption | SelectOption[] | undefined) => void;
+    options: SelectOption[];
+    maxSelections?: number;
+    className?: string;
+    value?: string;
+    defaultOptionLabel?: string;
+}
+/**
+ * Selects allow users to make a single selection or multiple selections from a finite list of options. They are not always the best choice from a usability perspective; see the use cases section below for more details.
+ *
+ * Source: https://cfpb.github.io/design-system/components/selects
+ */
+export declare const Select: ({ isMulti, onChange, ...properties }: SelectProperties) => JSX.Element;
+export default Select;

package/dist/components/Select/SelectMulti.d.ts

@@ -0,0 +1,2 @@
+import type { SelectProperties } from './Select';
+export declare const SelectMulti: ({ id, options, label, onChange, defaultOptionLabel, maxSelections, ...properties }: SelectProperties) => JSX.Element;

package/dist/components/Select/SelectSingle.d.ts

@@ -0,0 +1,2 @@
+import type { SelectProperties } from './Select';
+export declare const SelectSingle: ({ id, options, label, onChange, maxSelections, value, defaultOptionLabel, ...properties }: SelectProperties) => JSX.Element;

package/dist/components/Select/selectUtils.d.ts

@@ -0,0 +1,3 @@
+import type { SelectOption } from './Select';
+export declare const buildOptions: (options: SelectOption[], defaultOptionLabel: string) => JSX.Element[];
+export declare const findOptionByValue: (options: SelectOption[], value: string) => SelectOption | undefined;

package/dist/components/SkipNav/SkipNav.d.ts

@@ -0,0 +1,5 @@
+import type { JSXElement } from '../../types/jsxElement';
+export default function SkipNav({ href, text }: {
+    href?: string | undefined;
+    text?: string | undefined;
+}): JSXElement;

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,34 @@
+import type { ForwardedRef, HTMLProps } from 'react';
+import { type ReactNode } from 'react';
+import { type WidthPercent } from '../../types/WidthPercent';
+export interface TableColumnConfiguration {
+    header: string;
+    alignRight?: boolean | undefined;
+    width?: WidthPercent;
+    cellWordBreak?: boolean;
+    cellDisableWordWrap?: boolean;
+    headerWordWrap?: boolean;
+}
+export type TableColumn = TableColumnConfiguration | string;
+export interface TableProperties {
+    id?: string;
+    caption?: ReactNode;
+    columns: TableColumn[];
+    rows: ReactNode[][];
+    isResponsive?: boolean;
+    isScrollableHorizontal?: boolean;
+    isStriped?: boolean;
+    isPaginated?: boolean;
+    startPage?: number;
+    perPage?: number;
+    className?: string;
+    divRef?: ForwardedRef<HTMLDivElement>;
+    tableRef?: ForwardedRef<HTMLTableElement>;
+}
+/**
+ * Tables allow for the presentation of many data points grouped together in a visual way. They serve a unique purpose of allowing easy organization or comparison of more complex data than a chart or graph. They can be read either vertically (by columns) or horizontally (by rows).
+ *
+ * Source: https://cfpb.github.io/design-system/components/tables
+ */
+export declare const Table: import("react").ForwardRefExoticComponent<Pick<HTMLProps<HTMLTableElement> & TableProperties, "children" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "caption" | "cite" | "data" | "form" | "label" | "span" | "summary" | "pattern" | "list" | "name" | "alt" | "size" | "href" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "key" | "columns" | "isPaginated" | "startPage" | "perPage" | "isResponsive" | "isScrollableHorizontal" | "isStriped" | "divRef" | "tableRef"> & import("react").RefAttributes<HTMLDivElement>>;
+export default Table;

package/dist/components/Table/tableUtils.d.ts

@@ -0,0 +1,3 @@
+import type { TableProperties } from './Table';
+export declare const buildColumnHeaders: (columns: TableProperties['columns']) => JSX.Element | null;
+export declare const buildRows: (rows: TableProperties['rows'], columns: TableProperties['columns']) => JSX.Element | null;

package/dist/components/Tagline/Tagline.d.ts

@@ -0,0 +1,7 @@
+import type { JSXElement } from '../../types/jsxElement';
+interface TaglineProperties {
+    children: JSX.Element | string;
+    isLarge?: boolean;
+}
+export declare const Tagline: ({ isLarge, children }: TaglineProperties) => JSXElement;
+export {};

package/dist/components/TextInput/TextArea.d.ts

@@ -0,0 +1,14 @@
+import { type TextInputStatusType } from './TextInputStatus';
+export interface TextAreaType {
+    id: string;
+    onChange?: (value: string) => void;
+    className?: string;
+    isDisabled?: boolean;
+    isFullWidth?: boolean;
+    placeholder?: string;
+    status?: TextInputStatusType;
+}
+/**
+ * Source: <a href='https://cfpb.github.io/design-system/components/text-inputs#text-area-input-1' target='_blank'> https://cfpb.github.io/design-system/components/text-inputs#text-area-input-1</a>
+ */
+export declare const TextArea: import("react").ForwardRefExoticComponent<Pick<import("react").ClassAttributes<HTMLTextAreaElement> & import("react").TextareaHTMLAttributes<HTMLTextAreaElement> & TextAreaType, "children" | "className" | "status" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "name" | "autoComplete" | "autoFocus" | "cols" | "disabled" | "maxLength" | "minLength" | "readOnly" | "required" | "rows" | "value" | "wrap" | "key" | "isDisabled" | "isFullWidth" | "dirName"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/TextInput/TextInput.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { type ReactNode } from 'react';
+import type { TextInputStatusType } from './TextInputStatus';
+type TextInputReference = ReactNode;
+export type InputType = 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
+interface RequiredTextInputProperties {
+    id: string;
+    name: string;
+}
+interface CustomTextInputProperties extends ComponentPropsWithoutRef<'input'> {
+    className?: string;
+    inputProps?: JSX.IntrinsicElements['input'];
+    inputRef?: TextInputReference;
+    isDisabled?: boolean;
+    status?: TextInputStatusType;
+    type?: InputType;
+    isFullWidth?: boolean;
+}
+export type OptionalTextInputProperties = CustomTextInputProperties;
+export type TextInputProperties = OptionalTextInputProperties & RequiredTextInputProperties;
+/**
+ * Source: <a href='https://cfpb.github.io/design-system/components/text-inputs' target='_blank'> https://cfpb.github.io/design-system/components/text-inputs</a>
+ */
+export declare const TextInput: import("react").ForwardRefExoticComponent<CustomTextInputProperties & RequiredTextInputProperties & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/TextInput/TextInputStatus.d.ts

@@ -0,0 +1,3 @@
+export type TextInputStatusType = 'error' | 'info' | 'success' | 'warning';
+export declare const TextInputStatusClassMap: Record<TextInputStatusType, string>;
+export declare const getTextInputStatusClass: (status: TextInputStatusType) => string;

package/dist/components/TextIntroduction/TextIntroduction.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+interface TextIntroductionProperties extends React.HTMLProps<HTMLDivElement> {
+    heading: string;
+    subheading: string;
+    description?: ReactNode;
+    callToAction?: JSX.Element;
+}
+/**
+ * The text introduction is the standard page introduction pattern used across all pages that do not have a <a href="https://cfpb.github.io/design-system/patterns/heroes">hero</a> or <a href="https://cfpb.github.io/design-system/patterns/item-introductions">item introduction</a>. They introduce a page, or collection of pages, with a brief description of the goals of that section.
+ *
+ * Source: https://cfpb.github.io/design-system/patterns/text-introductions
+ */
+export declare const TextIntroduction: {
+    ({ heading, subheading, description, callToAction, className, ...properties }: TextIntroductionProperties): JSX.Element;
+    Container({ className, children, ...properties }: React.HTMLProps<HTMLDivElement>): JSX.Element;
+    Heading({ children }: TextIntroductionSubProperties): JSX.Element;
+    Description({ children }: TextIntroductionSubProperties): ReactNode;
+    Subheading({ children }: TextIntroductionSubProperties): JSX.Element;
+};
+export declare const TextIntroductionContainer: ({ className, children, ...properties }: React.HTMLProps<HTMLDivElement>) => JSX.Element;
+interface TextIntroductionSubProperties {
+    children: ReactNode;
+}
+export declare const TextIntroductionHeading: ({ children }: TextIntroductionSubProperties) => JSX.Element;
+export declare const TextIntroductionDescription: ({ children }: TextIntroductionSubProperties) => ReactNode;
+export declare const TextIntroductionSubheading: ({ children }: TextIntroductionSubProperties) => JSX.Element;
+export default TextIntroduction;

package/dist/components/Well/Well.d.ts

@@ -0,0 +1,20 @@
+import type { HeadingLevel } from '../../types/headingLevel';
+interface WellContainerProperties {
+    children?: (JSX.Element | string | null)[] | JSX.Element | string;
+    className?: string;
+}
+/**
+ * Wells are used to highlight specific information within a designated section of a page. This breaks up the flow of content on the page and helps to emphasize and set apart the content that is included. They are generally used on <a href="https://cfpb.github.io/design-system/pages/browse-pages">browse</a>, <a href="https://cfpb.github.io/design-system/pages/learn-pages">learn</a>, and <a href="https://cfpb.github.io/design-system/pages/document-detail-pages">document detail pages</a>.
+ *
+ * Source: https://cfpb.github.io/design-system/patterns/wells
+ */
+declare const WellContainer: ({ children, className, ...properties }: WellContainerProperties) => JSX.Element;
+interface WellContentProperties {
+    heading?: string;
+    headingLevel?: HeadingLevel;
+    links?: JSX.Element[];
+    text?: JSX.Element | string;
+    className?: string;
+}
+declare function WellContent({ heading, headingLevel, links, text, className, ...properties }: WellContentProperties): JSX.Element;
+export { WellContainer, WellContent };

package/dist/copy-C-9fXJZh.mjs

@@ -0,0 +1,4 @@
+const a = '<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--copy" viewBox="0 0 12 19"><path d="M11.415 5.068v9.16a.463.463 0 0 1-.462.461H9.477v1.477a.463.463 0 0 1-.462.462H1.047a.463.463 0 0 1-.462-.462V4.976a.463.463 0 0 1 .462-.462h1.476V3.037a.463.463 0 0 1 .462-.462h5.937zM8.369 7.874H6.628a.53.53 0 0 1-.527-.527V5.622H1.693v9.897H8.37zm-4.737-4.19v.83h3.352l1.095 1.095a.5.5 0 0 1-.04-.2V3.684zm5.845 3.323v6.574h.83V5.936h-1.74a.5.5 0 0 1-.2-.04z"/></svg>';
+export {
+  a as default
+};

package/dist/copy-DY5dvnQq.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a='<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--copy" viewBox="0 0 12 19"><path d="M11.415 5.068v9.16a.463.463 0 0 1-.462.461H9.477v1.477a.463.463 0 0 1-.462.462H1.047a.463.463 0 0 1-.462-.462V4.976a.463.463 0 0 1 .462-.462h1.476V3.037a.463.463 0 0 1 .462-.462h5.937zM8.369 7.874H6.628a.53.53 0 0 1-.527-.527V5.622H1.693v9.897H8.37zm-4.737-4.19v.83h3.352l1.095 1.095a.5.5 0 0 1-.04-.2V3.684zm5.845 3.323v6.574h.83V5.936h-1.74a.5.5 0 0 1-.2-.04z"/></svg>';exports.default=a;

package/dist/copy-round-Be5_Zxr-.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a='<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--copy-round" viewBox="0 0 17 19"><path d="M16.417 9.579A7.917 7.917 0 1 1 8.5 1.662a7.917 7.917 0 0 1 7.917 7.917m-5.629-.421v-.21H8.27a.267.267 0 0 1-.265-.265V6.176H5.054a.317.317 0 0 0-.317.316v7.612a.317.317 0 0 0 .317.316h5.418a.317.317 0 0 0 .316-.316zM6.21 5.384h2.635a.8.8 0 0 1 .505.228l.128.128V4.703H6.526a.32.32 0 0 0-.317.317zm2.565.807v1.99h2zm1.472.516h2.001l-2-1.988zm2.014.978v-.21h-1.037l.127.127a.8.8 0 0 1 .23.483v4.863h.364a.317.317 0 0 0 .316-.317z"/></svg>';exports.default=a;

package/dist/copy-round-scmMfLQQ.mjs

@@ -0,0 +1,4 @@
+const a = '<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--copy-round" viewBox="0 0 17 19"><path d="M16.417 9.579A7.917 7.917 0 1 1 8.5 1.662a7.917 7.917 0 0 1 7.917 7.917m-5.629-.421v-.21H8.27a.267.267 0 0 1-.265-.265V6.176H5.054a.317.317 0 0 0-.317.316v7.612a.317.317 0 0 0 .317.316h5.418a.317.317 0 0 0 .316-.316zM6.21 5.384h2.635a.8.8 0 0 1 .505.228l.128.128V4.703H6.526a.32.32 0 0 0-.317.317zm2.565.807v1.99h2zm1.472.516h2.001l-2-1.988zm2.014.978v-.21h-1.037l.127.127a.8.8 0 0 1 .23.483v4.863h.364a.317.317 0 0 0 .316-.317z"/></svg>';
+export {
+  a as default
+};

package/dist/court-DmZvq-YK.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a='<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--court" viewBox="0 0 15 19"><path d="M9.316 14.722a.477.477 0 0 1-.475.475H1.433a.477.477 0 0 1-.475-.475v-.863a.477.477 0 0 1 .475-.475h7.408a.476.476 0 0 1 .475.475zm-2.767-2.587a.55.55 0 0 1-.392-.163L2.96 8.776a.554.554 0 0 1 .784-.784L6.94 11.19a.554.554 0 0 1-.392.946zm7.33.992L9.435 8.682l1.085-1.084-3.173-3.173-2.97 2.97 3.173 3.172 1.102-1.101 4.445 4.445a.554.554 0 1 0 .784-.784zm-2.33-5.993a.55.55 0 0 1-.391-.162L7.96 3.775a.554.554 0 1 1 .784-.784l3.196 3.197a.554.554 0 0 1-.391.946"/></svg>';exports.default=a;

package/dist/court-V4GUZc8F.mjs

@@ -0,0 +1,4 @@
+const a = '<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--court" viewBox="0 0 15 19"><path d="M9.316 14.722a.477.477 0 0 1-.475.475H1.433a.477.477 0 0 1-.475-.475v-.863a.477.477 0 0 1 .475-.475h7.408a.476.476 0 0 1 .475.475zm-2.767-2.587a.55.55 0 0 1-.392-.163L2.96 8.776a.554.554 0 0 1 .784-.784L6.94 11.19a.554.554 0 0 1-.392.946zm7.33.992L9.435 8.682l1.085-1.084-3.173-3.173-2.97 2.97 3.173 3.172 1.102-1.101 4.445 4.445a.554.554 0 1 0 .784-.784zm-2.33-5.993a.55.55 0 0 1-.391-.162L7.96 3.775a.554.554 0 1 1 .784-.784l3.196 3.197a.554.554 0 0 1-.391.946"/></svg>';
+export {
+  a as default
+};

package/dist/court-round-5M_FQ6zv.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a='<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--court-round" viewBox="0 0 17 19"><path d="M16.417 9.579A7.917 7.917 0 1 1 8.5 1.662a7.917 7.917 0 0 1 7.917 7.917m-6.37 2.817a.317.317 0 0 0-.316-.317H4.15a.32.32 0 0 0-.317.317v.715a.32.32 0 0 0 .317.317h5.58a.317.317 0 0 0 .317-.317zM5.362 8.655l2.362 2.362a.396.396 0 0 0 .56-.56L5.921 8.096a.396.396 0 1 0-.56.56zm8.05 3.235-3.285-3.285.81-.81L8.593 5.45 6.398 7.644l2.345 2.344.823-.823 3.285 3.285a.396.396 0 1 0 .56-.56zM9.056 4.96l2.363 2.362a.396.396 0 1 0 .56-.56L9.615 4.4a.396.396 0 1 0-.56.56z"/></svg>';exports.default=a;

package/dist/court-round-B-GBxAU_.mjs

@@ -0,0 +1,4 @@
+const a = '<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--court-round" viewBox="0 0 17 19"><path d="M16.417 9.579A7.917 7.917 0 1 1 8.5 1.662a7.917 7.917 0 0 1 7.917 7.917m-6.37 2.817a.317.317 0 0 0-.316-.317H4.15a.32.32 0 0 0-.317.317v.715a.32.32 0 0 0 .317.317h5.58a.317.317 0 0 0 .317-.317zM5.362 8.655l2.362 2.362a.396.396 0 0 0 .56-.56L5.921 8.096a.396.396 0 1 0-.56.56zm8.05 3.235-3.285-3.285.81-.81L8.593 5.45 6.398 7.644l2.345 2.344.823-.823 3.285 3.285a.396.396 0 1 0 .56-.56zM9.056 4.96l2.363 2.362a.396.396 0 1 0 .56-.56L9.615 4.4a.396.396 0 1 0-.56.56z"/></svg>';
+export {
+  a as default
+};

package/dist/credit-card-DNyhsBzo.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t='<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--credit-card" viewBox="0 0 17 19"><path d="M15.982 7.895H1.076V6.867A1.11 1.11 0 0 1 2.184 5.76h12.69a1.11 1.11 0 0 1 1.108 1.108zM1.076 9.003h14.906v5.109a1.11 1.11 0 0 1-1.108 1.108H2.184a1.11 1.11 0 0 1-1.108-1.108zm2.24 4.064h4.868v-1.109H3.316z"/></svg>';exports.default=t;

package/dist/credit-card-DrnhIRdx.mjs

@@ -0,0 +1,4 @@
+const s = '<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--credit-card" viewBox="0 0 17 19"><path d="M15.982 7.895H1.076V6.867A1.11 1.11 0 0 1 2.184 5.76h12.69a1.11 1.11 0 0 1 1.108 1.108zM1.076 9.003h14.906v5.109a1.11 1.11 0 0 1-1.108 1.108H2.184a1.11 1.11 0 0 1-1.108-1.108zm2.24 4.064h4.868v-1.109H3.316z"/></svg>';
+export {
+  s as default
+};

package/dist/credit-card-round-CGcIhGBy.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t='<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--credit-card-round" viewBox="0 0 17 19"><path d="M16.417 9.583A7.917 7.917 0 1 1 8.5 1.666a7.917 7.917 0 0 1 7.917 7.917M3.243 7.019v.72h10.572v-.72a.794.794 0 0 0-.791-.792H4.035a.794.794 0 0 0-.792.792m10.572 5.127V8.53H3.243v3.615a.794.794 0 0 0 .792.791h8.989a.794.794 0 0 0 .791-.791zm-5.52-1.525H4.843v.792h3.452z"/></svg>';exports.default=t;