@nypl/design-system-react-components 2.0.0 → 2.0.1

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

@@ -0,0 +1,29 @@
+import React from "react";
+export type AccordionTypes = "default" | "warning" | "error";
+export interface AccordionDataProps {
+    accordionType?: AccordionTypes;
+    label: string;
+    panel: string | React.ReactNode;
+}
+export interface AccordionProps {
+    /** Array of data to display, and an optional accordionType */
+    accordionData: AccordionDataProps[];
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Whether the accordion is open by default only on its initial rendering */
+    isDefaultOpen?: boolean;
+    /** Whether the contents of the Accordion should always be rendered.
+     *  Useful for form-components. `false` by default. */
+    isAlwaysRendered?: boolean;
+    /** Sets max height of accordion panel. This value should be entered with the
+     * formatting of a CSS height attribute (ex. 100px, 8rem). If height of content
+     * within accordion panel is greater than height set by panelMaxHeight, a
+     * scrollbar will appear for accordion panel. */
+    panelMaxHeight?: string;
+}
+/**
+ * Accordion component that shows content on toggle. Can be used to display
+ * multiple accordion items together.
+ */
+export declare const Accordion: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Accordion;

package/dist/src/components/AlphabetFilter/AlphabetFilter.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export interface AlphabetFilterProps {
+    /** Array of letters to specify which `Button` components should be set in an `enabled`
+     * state. By default, all buttons are `enabled`. */
+    activeLetters?: string[];
+    /** A class name for the AlphabetFilter parent div. */
+    className?: string;
+    /** The currentLetter can be used to programatically set the selected letter without the
+     * user explicitly requesting it. */
+    currentLetter?: string;
+    /** Value used to set the text for a `Text` component that will be displayed above the letter buttons. */
+    descriptionText?: string | JSX.Element;
+    /** Value used to set the text for a `Heading` component. */
+    headingText?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Adds the `disabled` prop to the AlphabetFilter when true. */
+    isDisabled?: boolean;
+    /** The callback function called when a letter button or the Show All button is clicked. */
+    onClick: (filterValue: string) => void;
+}
+export declare const AlphabetFilter: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<AlphabetFilterProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default AlphabetFilter;

package/dist/src/components/AudioPlayer/AudioPlayer.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+declare const thirdPartyServices: readonly ["libsyn", "soundcloud", "spotify"];
+export type ThirdPartyAudioType = typeof thirdPartyServices[number];
+export type AudioType = ThirdPartyAudioType | "file";
+export interface AudioPlayerProps {
+    /** Required string used to specify the type of audio playback. */
+    audioType: AudioType;
+    /** Optional className you can add in addition to `audio-player`. */
+    className?: string;
+    /** Optional string to set the text for the audio player description. */
+    descriptionText?: string;
+    /** Optional string to set a code snippet provided by Libsyn, SoundCloud or Spotify; the
+     * `AudioPlayer` component will accept the `embedCode` prop or the `filePath` prop.
+     */
+    embedCode?: string;
+    /** Optional string to set the audio file, the path can be relative or absolute
+     * referring to a locally hosted file, or a fully qualified URL pointing to a locally hosted file
+     * or to another domain altogether.
+     * TODO: This prop won't be used until a future version.
+     */
+    /** 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;
+    /** Optional title to added to the `<iframe>` element for improved accessibility. If omitted, a
+     * generic title will be added.
+     */
+    iframeTitle?: string;
+}
+/**
+ * Renders an audio player from 3rd party services such as Libsyn, SoundCloud, and Spotify.
+ */
+export declare const AudioPlayer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<AudioPlayerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+/**
+ * Parse the embedCode string to a DOM object for proper formatted HTML element.
+ * We are only interested in the iframe element.
+ */
+export declare function parseIframeEmbedCode(embedCode: string | undefined): HTMLIFrameElement | undefined;
+export default AudioPlayer;

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

@@ -0,0 +1,24 @@
+import React from "react";
+export declare const breadcrumbTypeArray: readonly ["blogs", "booksAndMore", "brand", "connect", "education", "locations", "research", "whatsOn"];
+export type BreadcrumbsTypes = typeof breadcrumbTypeArray[number];
+export interface BreadcrumbsDataProps {
+    url: string;
+    text: string | React.ReactNode;
+}
+export interface BreadcrumbProps {
+    /** Breadcrumb links as an array */
+    breadcrumbsData: BreadcrumbsDataProps[];
+    /** Used to control how the `Hero` component will be rendered. */
+    breadcrumbsType?: BreadcrumbsTypes;
+    /** className you can add in addition to 'input' */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+}
+/**
+ * The `Breadcrumbs` component is a navigation element that provides a
+ * breadcrumb path that reflects the site structure and allows a user to
+ * navigate to any page available in the breadcrumb hierarchy.
+ */
+export declare const Breadcrumbs: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Breadcrumbs;

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

@@ -0,0 +1,35 @@
+import React from "react";
+export declare const buttonElementTypeArray: readonly ["submit", "button", "reset"];
+export declare const buttonSizesArray: readonly ["small", "medium", "large"];
+export declare const buttonTypesArray: readonly ["primary", "secondary", "text", "callout", "pill", "noBrand", "link"];
+export type ButtonElementType = typeof buttonElementTypeArray[number];
+export type ButtonSizes = typeof buttonSizesArray[number];
+export type ButtonTypes = typeof buttonTypesArray[number];
+interface ButtonProps {
+    /** The button variation to render based on the `ButtonTypes` type.*/
+    buttonType?: ButtonTypes;
+    /** Additional className to use. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id: string;
+    /** Adds 'disabled' property to the button. */
+    isDisabled?: boolean;
+    /** Trigger the Button's action through the `mouseDown` event handler instead
+     * of `onClick`. `false` by default. */
+    mouseDown?: boolean;
+    /** The action to perform on the `<button>`'s onClick function. */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** Visibly hidden text that will only be read by screenreaders. */
+    screenreaderOnlyText?: string;
+    /** The size of the `Button`. */
+    size?: ButtonSizes;
+    /** The HTML button type attribute. */
+    type?: ButtonElementType;
+}
+/**
+ * Renders a simple `button` element with custom variant styles.
+ */
+export declare const Button: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ButtonProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>, {}>;
+export default Button;

package/dist/src/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { LayoutTypes } from "../../helpers/types";
+export declare const buttonGroupWidthsArray: readonly ["default", "full"];
+export type ButtonGroupWidths = typeof buttonGroupWidthsArray[number];
+interface ButtonGroupProps {
+    /** Sets the width to "default" (for "fit-content") or "full". */
+    buttonWidth?: ButtonGroupWidths;
+    /** Additional className to use. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Set's the disabled state to all the internal `Button` components. */
+    isDisabled?: boolean;
+    /** Renders the layout of `Button` components in a row or column. */
+    layout?: LayoutTypes;
+}
+/**
+ * A simple wrapper to group `Button` components together. The layout can be set
+ * to row or column and the width of internal `Button` components can be set to
+ * the parent's full width or the `Button`'s content width
+ */
+export declare const ButtonGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ButtonGroupProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default ButtonGroup;

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { LayoutTypes } from "../../helpers/types";
+import { ComponentImageProps } from "../Image/Image";
+interface CardBaseProps {
+    /** Optional value to control the alignment of the text and elements. */
+    isCentered?: boolean;
+    /** Optional value to render the layout in a row or column.
+     * Default is `"column"`. */
+    layout?: LayoutTypes;
+}
+interface CardWrapperProps {
+    /** Optional CSS class name to add. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Main link to use when the full `Card` component should be clickable. */
+    mainActionLink?: string;
+    /** Additional object for styling the `Card`'s `div` wrapper. */
+    styles?: any;
+}
+interface CardImageProps extends ComponentImageProps {
+    /** Optional boolean value to control the position of the `CardImage`. */
+    isAtEnd?: boolean;
+}
+interface CardActionsProps extends CardBaseProps {
+    /** Optional boolean value to control visibility of border on the bottom edge
+     * of the card actions element */
+    bottomBorder?: boolean;
+    /** Optional boolean value to control visibility of border on the top edge of
+     * the card actions element */
+    topBorder?: boolean;
+}
+export interface CardProps extends CardBaseProps, CardWrapperProps {
+    /** Optional hex color value used to set the card background color. */
+    backgroundColor?: string;
+    /** Optional hex color value used to override the default text color. */
+    foregroundColor?: string;
+    /** Optional boolean value to control the visibility of a border around
+     * the card. */
+    isBordered?: boolean;
+    /** Object used to create and render the `Image` component. */
+    imageProps?: CardImageProps;
+    /** Set CardActions to the right content side. This only works in
+     * the row layout. */
+    isAlignedRightActions?: boolean;
+}
+export declare const CardHeading: import("@chakra-ui/react").ChakraComponent<import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<import("../Heading/Heading").HeadingProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLHeadingElement>>, {}>, {}>;
+export declare const CardContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<{}>) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
+export declare const CardActions: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<CardActionsProps>) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
+export declare const Card: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CardProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Card;

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

@@ -0,0 +1,47 @@
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+interface CheckboxIconProps {
+    /** 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 indeterminate state to the `Checkbox`. */
+    isIndeterminate?: boolean;
+}
+export interface CheckboxProps extends CheckboxIconProps {
+    /** className you can add in addition to 'input' */
+    className?: string;
+    /** Optional string to populate the HelperErrorText for standard state */
+    helperText?: HelperErrorTextType;
+    /** ID that other components can cross reference for accessibility purposes */
+    id: string;
+    /** Optional string to populate the HelperErrorText for the error state
+     * when `isInvalid` is true. */
+    invalidText?: HelperErrorTextType;
+    /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
+     * This also makes the text italic and color scheme gray. */
+    isDisabled?: boolean;
+    /** Adds the 'aria-invalid' attribute to the input when true. This also makes
+     * the color theme "NYPL error" red for the button and text. */
+    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. */
+    labelText: string | JSX.Element;
+    /** 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 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;
+}
+export declare const Checkbox: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>, {}>;
+export default Checkbox;

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

@@ -0,0 +1,51 @@
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { LayoutTypes } from "../../helpers/types";
+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?: HelperErrorTextType;
+    /** ID that other components can cross reference for accessibility purposes */
+    id: string;
+    /** Optional string to populate the HelperErrorText for error state */
+    invalidText?: HelperErrorTextType;
+    /** Adds the 'disabled' prop to the input when true. */
+    isDisabled?: boolean;
+    /** Set's the `Checkbox`s' wrapper to be full width. */
+    isFullWidth?: 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?: LayoutTypes;
+    /** 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;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Offers the ability to show the group's legend onscreen or hide it. Refer
+     * to the `labelText` property for more information. */
+    showLabel?: boolean;
+    /** Whether or not to display the "(Required)" text in the label text.
+     * True by default. */
+    showRequiredLabel?: boolean;
+    /** The values to programmatically update the selected `Checkbox`es. */
+    value?: string[];
+}
+/**
+ * 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.
+ */
+export declare const CheckboxGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default CheckboxGroup;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export interface ComponentWrapperProps {
+    /** The UI elements that will be wrapped by this component */
+    children: React.ReactNode;
+    /** A class name for the `div` parent element. */
+    className?: string;
+    /** Optional string to set the text for the component's description */
+    descriptionText?: string | JSX.Element;
+    /** Optional string to set the text for a `Heading` component */
+    headingText?: string;
+    /** Optional string to set the text for a `HelperErrorText` component */
+    helperText?: HelperErrorTextType;
+    /** Styles that target the helper text. */
+    helperTextStyles?: {
+        [key: string]: any;
+    };
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Optional string to populate the `HelperErrorText` for the error state
+     * when `isInvalid` is true. */
+    invalidText?: HelperErrorTextType;
+    /** Sets invalid text in the error state. */
+    isInvalid?: boolean;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+}
+export declare const ComponentWrapper: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ComponentWrapperProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default ComponentWrapper;

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

@@ -0,0 +1,82 @@
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { TextInputRefType } from "../TextInput/TextInput";
+export declare const datePickerTypesArray: readonly ["full", "month", "year"];
+export type DatePickerTypes = typeof datePickerTypesArray[number];
+export interface FullDateType {
+    /** 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. */
+    isDateRange?: boolean;
+}
+interface DatePickerWrapperProps extends DateRangeRowProps {
+    /** 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;
+    /** Whether or not to display the "(Required)" text in the label text.
+     * True by default. */
+    showRequiredLabel?: 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;
+    /** Populates the `HelperErrorText` component in this component. */
+    helperText?: HelperErrorTextType;
+    /** Populates the `HelperErrorText` component in the "From" `TextInput` component. */
+    helperTextFrom?: string;
+    /** Populates the `HelperErrorText` component in the "To" `TextInput` component. */
+    helperTextTo?: string;
+    /** 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. */
+    initialDateTo?: string;
+    /** Populates the `HelperErrorText` error state for both "From"
+     * and "To" input components. */
+    invalidText?: HelperErrorTextType;
+    /** Adds the 'disabled' property to the input element(s). */
+    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;
+    /** 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;
+}
+/**
+ * Returns a single date input field or two date input fields for a date range.
+ */
+export declare const DatePicker: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<TextInputRefType>>, {}>;
+export default DatePicker;

package/dist/src/components/FeedbackBox/FeedbackBox.d.ts

@@ -0,0 +1,64 @@
+import React from "react";
+export declare const feedbackBoxViewTypeArray: readonly ["form", "confirmation", "error"];
+export type FeedbackBoxViewType = typeof feedbackBoxViewTypeArray[number];
+interface FeedbackBoxProps {
+    /** Additional class name to add. */
+    className?: string;
+    /** Used to add additional information to the default confirmation message in
+     * the confirmation view. */
+    confirmationText?: string | JSX.Element;
+    /** Used to add description text above the form input fields in
+     * the initial/form view. */
+    descriptionText?: string | JSX.Element;
+    /** A data object containing key/value pairs that will be added to the form
+     * field submitted data. */
+    hiddenFields?: any;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Toggles the invalid state for the comment field. */
+    isInvalidComment?: boolean;
+    /** Toggles the invalid state for the email field. */
+    isInvalidEmail?: boolean;
+    /** Only used for internal purposes. */
+    isOpen?: boolean;
+    /** Used to add a notification above the description in the
+     * initial/form view.*/
+    notificationText?: string | JSX.Element;
+    /** Only used for internal purposes. */
+    onClose?: any;
+    /** Only used for internal purposes. */
+    onOpen?: any;
+    /** Callback function that will be invoked when the form is submitted.
+     * The returned data object contains key/value pairs including the
+     * values from the `hiddenFields` prop.
+     */
+    onSubmit: (values: {
+        [key: string]: string;
+    }) => any;
+    /** Toggles the category radio group field. */
+    showCategoryField?: boolean;
+    /** Toggles the email input field. When set to `true`, an additional
+     * confirmation message will be rendered. */
+    showEmailField?: boolean;
+    /** Used to populate the label on the open button and the `Drawer`'s
+     * header title. */
+    title: string;
+    /** Used to specify what screen should be displayed. */
+    view?: FeedbackBoxViewType;
+}
+/**
+ * The `FeedbackBox` component renders a fixed-positioned button on the bottom
+ * right corner of a page that opens a Chakra `Drawer` popup component. Inside
+ * of the popup, a form is rendered with fields that allows users to provide
+ * feedback. The `FeedbackBox` component does *not* call any API with the
+ * submitted data; that feature is the responsibility of the consuming
+ * application.
+ */
+export declare const FeedbackBox: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<FeedbackBoxProps & React.RefAttributes<any>>, {}>;
+export declare function useFeedbackBox(): {
+    isOpen: boolean;
+    onClose: () => void;
+    onOpen: () => void;
+    FeedbackBox: import("@chakra-ui/react").ChakraComponent<(props: any) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
+};
+export default FeedbackBox;

package/dist/src/components/FeedbackBox/useFeedbackBoxReducer.d.ts

@@ -0,0 +1,19 @@
+interface FeedbackBoxState {
+    category?: string;
+    comment: string;
+    email?: string;
+}
+/**
+ * DS internal helper reducer hook to manage internal state for the FeedbackBox
+ * component. Note: this custom hook is not tested directly as it's an
+ * implementation detail of the FeedbackBox component, following the guidance
+ * of RTL: https://testing-library.com/docs/example-react-hooks-useReducer
+ */
+declare function useFeedbackBoxReducer(): {
+    state: FeedbackBoxState;
+    setCategory: (category: string) => void;
+    setComment: (comment: string) => void;
+    setEmail: (email: string) => void;
+    clearValues: () => void;
+};
+export default useFeedbackBoxReducer;

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

@@ -0,0 +1,24 @@
+import React from "react";
+interface FieldsetProps {
+    /** 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" in the `legend`. True by default. */
+    isRequired?: boolean;
+    /** Text to display in the `legend` element. */
+    legendText?: string;
+    /** Whether or not to display the "(Required)" text in the `legend` text.
+     * True by default. */
+    showRequiredLabel?: boolean;
+}
+/**
+ * A wrapper component that renders a `fieldset` element along with a `legend`
+ * element as its first child. Commonly used to wrap form components.
+ */
+export declare const Fieldset: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<FieldsetProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & HTMLFieldSetElement>>, {}>;
+export default Fieldset;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { GridGaps } from "../Grid/SimpleGrid";
+interface FormBaseProps {
+    /** className to be applied to FormRow, FormField, and Form */
+    className?: 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``` */
+    gap?: GridGaps;
+    /** ID that other components can cross reference (internal use) */
+    id: string;
+}
+export interface FormChildProps extends Partial<FormBaseProps> {
+}
+export interface FormProps extends FormBaseProps {
+    /** Optional form `action` attribute */
+    action?: string;
+    /** Optional form `method` attribute */
+    method?: "get" | "post";
+    /** Function to call for the `onSubmit` form event. */
+    onSubmit?: (e: React.FormEvent<any>) => void;
+}
+/** FormRow child-component */
+export declare const FormRow: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<FormChildProps>) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
+/** FormField child-component */
+export declare const FormField: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<FormChildProps>) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
+/** Main Form component */
+export declare const Form: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<FormProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & HTMLFormElement>>, {}>;
+export default Form;

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

@@ -0,0 +1,20 @@
+import React from "react";
+export declare const gridGapsArray: readonly ["grid.xxs", "grid.xs", "grid.s", "grid.m", "grid.l", "grid.xl", "grid.xxl"];
+export type GridGaps = typeof gridGapsArray[number];
+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;
+}
+export declare const SimpleGrid: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SimpleGridProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default SimpleGrid;