@kaizen/components 0.0.0-canary-test-slack-notify-20230816042051

package/dist/index.d.ts

@@ -0,0 +1,1123 @@
+/// <reference types="react" />
+import React$1, { MouseEvent, FocusEvent, ComponentType, ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, CSSProperties, Context, ReactNode } from 'react';
+import { DateInputProps, CalendarSingleProps, DisabledDays, DateRange } from '@kaizen/date-picker';
+export { DateRange, DisabledDays } from '@kaizen/date-picker';
+import { FieldMessageStatus } from '@kaizen/draft-form';
+import { CalendarRangeProps } from '@kaizen/date-picker/src/_subcomponents/Calendar';
+import { DateInputProps as DateInputProps$1 } from '@kaizen/date-picker/src/_subcomponents/DateInput';
+import * as _kaizen_button from '@kaizen/button';
+import { ButtonProps as ButtonProps$1 } from '@kaizen/button';
+import { Node, SelectionMode, Selection } from '@react-types/shared';
+import { AriaMenuOptions } from '@react-aria/menu';
+import { MenuTriggerState } from '@react-stately/menu';
+import { ListState } from '@react-stately/list';
+import { SelectProps } from '@react-stately/select';
+import { TooltipProps } from '@kaizen/draft-tooltip';
+import { ValidateDateArgs } from '@kaizen/date-picker/src/utils/validateDate';
+import * as _kaizen_design_tokens from '@kaizen/design-tokens';
+import { Theme as Theme$1 } from '@kaizen/design-tokens';
+import { DefaultTagProps } from '@kaizen/draft-tag';
+
+type CustomButtonProps = {
+    id?: string;
+    className: string;
+    href?: string;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent<any>) => void;
+    onFocus?: (e: FocusEvent<HTMLElement>) => void;
+    onBlur?: (e: FocusEvent<HTMLElement>) => void;
+    children?: React$1.ReactNode;
+};
+type ButtonFormAttributes = Pick<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "form" | "formAction" | "formMethod" | "formEncType" | "formTarget" | "formNoValidate">;
+type GenericProps = {
+    id?: string;
+    reversed?: boolean;
+    onClick?: (e: MouseEvent) => void;
+    onMouseDown?: (e: MouseEvent) => void;
+    href?: string;
+    newTabAndIUnderstandTheAccessibilityImplications?: boolean;
+    disableTabFocusAndIUnderstandTheAccessibilityImplications?: boolean;
+    onFocus?: (e: FocusEvent<HTMLElement>) => void;
+    onBlur?: (e: FocusEvent<HTMLElement>) => void;
+    component?: ComponentType<CustomButtonProps>;
+    classNameOverride?: string;
+};
+type ButtonType = "submit" | "reset" | "button";
+type WorkingProps = {
+    working: true;
+    workingLabel: string;
+    workingLabelHidden?: boolean;
+};
+type WorkingUndefinedProps = {
+    working?: false;
+};
+type BadgeProps = {
+    text: string;
+    animateChange?: boolean;
+    variant?: "default" | "dark" | "active";
+    reversed?: boolean;
+};
+type RenderProps = ButtonProps & {
+    additionalContent?: React$1.ReactNode;
+    iconButton?: boolean;
+    directionalLink?: boolean;
+    paginationLink?: boolean;
+    isActive?: boolean;
+};
+type ButtonRef = {
+    focus: () => void;
+};
+type ButtonProps = GenericProps & ButtonFormAttributes & (WorkingProps | WorkingUndefinedProps) & {
+    label: string;
+    primary?: boolean;
+    destructive?: boolean;
+    secondary?: boolean;
+    /** @default "regular" */
+    size?: "small" | "regular";
+    badge?: BadgeProps;
+    type?: "submit" | "reset" | "button";
+    fullWidth?: boolean;
+    iconPosition?: "start" | "end";
+    icon?: JSX.Element;
+    disabled?: boolean;
+};
+
+/**
+ * {@link https://cultureamp.design/components/button/ Guidance} |
+ * {@link https://cultureamp.design/storybook/?path=/docs/components-button--default-kaizen-site-demo Storybook}
+ */
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<ButtonRef | undefined>>;
+
+type OverrideClassName<T extends Record<string, any>> = Omit<T, "className"> & {
+    classNameOverride?: string;
+};
+
+interface ClearButtonProps extends Omit<OverrideClassName<ButtonHTMLAttributes<HTMLButtonElement>>, "children"> {
+    isReversed?: boolean;
+}
+declare const ClearButton: {
+    ({ classNameOverride, isReversed, ...restProps }: ClearButtonProps): JSX.Element;
+    displayName: string;
+};
+
+type FilterTriggerRef = {
+    triggerRef?: React.RefObject<HTMLButtonElement>;
+};
+
+interface FilterProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
+    children: React$1.ReactNode;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    renderTrigger: (triggerProps: {
+        onClick: () => void;
+        isOpen: boolean;
+    }) => JSX.Element & {
+        ref?: React$1.RefObject<FilterTriggerRef>;
+    };
+    onMount?: (triggerRef: React$1.RefObject<HTMLButtonElement>) => void;
+}
+declare const Filter: {
+    ({ children, isOpen, setIsOpen, renderTrigger, classNameOverride, onMount, ...restProps }: FilterProps): JSX.Element;
+    displayName: string;
+};
+
+interface FilterContentsProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
+    children: React$1.ReactNode;
+}
+declare const FilterContents: {
+    ({ children, classNameOverride, ...restProps }: FilterContentsProps): JSX.Element;
+    displayName: string;
+};
+
+interface FilterButtonBaseProps extends OverrideClassName<ButtonHTMLAttributes<HTMLButtonElement>> {
+    children: React$1.ReactNode;
+}
+
+interface FilterButtonProps extends Omit<FilterButtonBaseProps, "children"> {
+    label: string;
+    selectedValue?: string | JSX.Element;
+    isOpen?: boolean;
+}
+declare const FilterButton: React$1.ForwardRefExoticComponent<FilterButtonProps & React$1.RefAttributes<FilterTriggerRef>>;
+
+type DataAttributes = {
+    [key: `data-${string}`]: string | undefined;
+};
+
+interface ButtonGroupProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
+    children: React$1.ReactElement<FilterButtonBaseProps | TooltipProps> | Array<React$1.ReactElement<FilterButtonBaseProps | TooltipProps>>;
+}
+
+interface FilterButtonRemovableProps extends Omit<ButtonGroupProps, "children"> {
+    triggerButtonProps: FilterButtonProps & DataAttributes;
+    removeButtonProps: Partial<Omit<FilterButtonBaseProps, "children">> & DataAttributes & {
+        tooltipText?: string;
+    };
+}
+type FilterButtonRemovableRefs = FilterTriggerRef & {
+    removeButtonRef?: React$1.RefObject<HTMLButtonElement>;
+};
+declare const FilterButtonRemovable: React$1.ForwardRefExoticComponent<FilterButtonRemovableProps & React$1.RefAttributes<FilterButtonRemovableRefs>>;
+
+interface DateInputDescriptionProps {
+    description?: string | JSX.Element;
+    locale: Locale;
+}
+
+type StringSuggestions<T extends string> = T | (string & Record<never, never>);
+
+type FilterDateSupportedLocales = StringSuggestions<"en-US" | "en-AU">;
+
+type DateValidationResponse = {
+    date: Date | undefined;
+    inputValue: string | undefined;
+    validationMessage: ValidationMessage | undefined;
+    isDisabled: boolean;
+    isInvalid: boolean;
+    isEmpty: boolean;
+    isValidDate: boolean;
+};
+type ValidationMessage = {
+    status: FieldMessageStatus;
+    message: string | React$1.ReactElement;
+};
+
+interface DateInputFieldProps extends Omit<DateInputProps, "id" | "labelText"> {
+    id: string;
+    locale: Locale;
+    /**
+     * A description that provides context for the text field
+     */
+    description?: DateInputDescriptionProps["description"];
+    isReversed?: boolean;
+    validationMessage?: ValidationMessage;
+    disabled?: boolean;
+    labelText?: DateInputProps["labelText"];
+}
+
+type FilterInputProps$1<InputProps> = Omit<Partial<InputProps>, "value"> & DataAttributes;
+interface FilterDatePickerFieldProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
+    id?: string;
+    locale: FilterDateSupportedLocales;
+    /**
+     * Sets first displayed month to month of provided date if there isn't a date set.
+     */
+    defaultMonth?: CalendarSingleProps["defaultMonth"];
+    /**
+     * The date range passed in from the consumer that renders in the inputs and calendar.
+     */
+    selectedDate: Date | undefined;
+    /**
+     * Callback when date is updated either by the calendar picker or by typing and blurring.
+     * Date will return as `undefined` if empty, invalid or disabled.
+     */
+    onDateChange: (date: Date | undefined) => void;
+    /**
+     * Callback when date is saved/committed/submitted valid date by either by the calendar picker or by typing and blurring.
+     * Date will return as `undefined` if empty, invalid or disabled.
+     *
+     * Distinctly different from `change` where that is triggered on any kind of event, we expect the final valid date in this function.
+     */
+    onDateSubmit?: (date: Date | undefined) => void;
+    /**
+     * See https://react-day-picker.js.org/api/types/Matcher
+     */
+    disabledDays?: DisabledDays;
+    inputProps?: FilterInputProps$1<DateInputFieldProps>;
+    /**
+     * Custom description to provide extra context (input format help text remains).
+     */
+    description?: DateInputDescriptionProps["description"];
+    validationMessage?: ValidationMessage;
+    /**
+     * Callback when a date is selected. Utilises internal validation if not set.
+     */
+    onValidate?: (validationResponse: DateValidationResponse) => void;
+    setIsFilterOpen?: FilterProps["setIsOpen"];
+}
+declare const FilterDatePickerField: ({ id: propsId, inputProps, locale: propsLocale, defaultMonth, selectedDate, onDateChange, onDateSubmit, disabledDays, description, validationMessage, onValidate, classNameOverride, ...restProps }: FilterDatePickerFieldProps) => JSX.Element;
+
+interface FilterDatePickerProps extends Omit<FilterDatePickerFieldProps, "id"> {
+    id?: string;
+    label: string;
+    isOpen: FilterProps["isOpen"];
+    setIsOpen: FilterProps["setIsOpen"];
+    renderTrigger: (triggerProps: FilterButtonProps) => JSX.Element;
+}
+declare const FilterDatePicker: {
+    ({ isOpen, setIsOpen, renderTrigger, selectedDate, label, locale, onDateSubmit, ...restProps }: FilterDatePickerProps): JSX.Element;
+    displayName: string;
+};
+
+type ValidateDateResponse = {
+    validationResponse: DateValidationResponse;
+    newDate: Date | undefined;
+};
+declare const validateDate: (args: ValidateDateArgs) => ValidateDateResponse;
+
+type UseDateValidationArgs = {
+    inputLabel?: React.ReactNode;
+    disabledDays?: DisabledDays;
+    validationMessage?: ValidationMessage;
+    onValidate?: (validationResponse: DateValidationResponse) => void;
+};
+type UseDateValidationValue = {
+    validationMessage: ValidationMessage | undefined;
+    validateDate: (args: {
+        date: Date | undefined;
+        inputValue: string;
+    }) => ReturnType<typeof validateDate>;
+    updateValidation: (validationResponse: DateValidationResponse) => void;
+};
+declare const useDateValidation: ({ inputLabel, disabledDays, validationMessage, onValidate, }: UseDateValidationArgs) => UseDateValidationValue;
+
+type GetDateValidationHandlerArgs = {
+    onValidate: ((validationResponse: DateValidationResponse) => void) | undefined;
+    setInbuiltValidationMessage: (validationMessage: ValidationMessage | undefined) => void;
+    inputLabel?: React$1.ReactNode;
+};
+declare const getDateValidationHandler: ({ onValidate, setInbuiltValidationMessage, inputLabel, }: GetDateValidationHandlerArgs) => (validationResponse: DateValidationResponse) => void;
+
+type FilterBarDatePickerProps = Omit<FilterDatePickerProps, "id" | "label" | "renderTrigger" | "isOpen" | "setIsOpen" | "selectedDate" | "onDateChange" | "locale"> & {
+    id?: string;
+    locale?: FilterDatePickerProps["locale"];
+    onDateChange?: FilterDatePickerProps["onDateChange"];
+};
+
+type DateRangeFieldValidationMessage = {
+    dateStart?: ValidationMessage;
+    dateEnd?: ValidationMessage;
+};
+
+interface DateRangeValidationMessageProps {
+    validationMessage?: DateRangeFieldValidationMessage;
+    dateStartId?: string;
+    dateEndId?: string;
+    isReversed?: boolean;
+}
+
+interface DateRangeInputFieldProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
+    id: string;
+    legend: string;
+    inputStartDateProps: Omit<DateInputProps$1, "id">;
+    inputEndDateProps: Omit<DateInputProps$1, "id">;
+    locale: Locale;
+    /**
+     * A description that provides context for the text field
+     */
+    description?: DateInputDescriptionProps["description"];
+    isReversed?: boolean;
+    validationMessage?: DateRangeValidationMessageProps["validationMessage"];
+    disabled?: boolean;
+}
+
+type InputStartDateProps = DateRangeInputFieldProps["inputStartDateProps"];
+type InputEndDateProps = DateRangeInputFieldProps["inputEndDateProps"];
+type FilterInputProps<InputProps> = Omit<Partial<InputProps>, "value"> & DataAttributes;
+interface FilterDateRangePickerFieldProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
+    id: string;
+    label: string;
+    locale: FilterDateSupportedLocales;
+    /**
+     * Sets first displayed month to month of provided date if there isn't a date set.
+     */
+    defaultMonth?: CalendarRangeProps["defaultMonth"];
+    /**
+     * The date range passed in from the consumer that renders in the inputs and calendar.
+     */
+    selectedRange: DateRange | undefined;
+    /**
+     * Callback when date is updated either by the calendar picker or by typing and blurring.
+     * Date will return as `undefined` if empty, invalid or disabled.
+     */
+    onRangeChange: (range: DateRange | undefined) => void;
+    /**
+     * See https://react-day-picker.js.org/api/types/Matcher
+     */
+    disabledDays?: DisabledDays;
+    inputStartDateProps?: FilterInputProps<InputStartDateProps>;
+    inputEndDateProps?: FilterInputProps<InputEndDateProps>;
+    /**
+     * Custom description to provide extra context (input format help text remains).
+     */
+    description?: DateRangeInputFieldProps["description"];
+    validationMessage?: DateRangeFieldValidationMessage;
+    /**
+     * Callback when a date is selected. Utilises internal validation if not set.
+     */
+    onValidate?: {
+        dateStart?: (validationResponse: DateValidationResponse) => void;
+        dateEnd?: (validationResponse: DateValidationResponse) => void;
+    };
+}
+
+interface FilterDateRangePickerProps extends Omit<FilterDateRangePickerFieldProps, "id"> {
+    id?: string;
+    isOpen: FilterProps["isOpen"];
+    setIsOpen: FilterProps["setIsOpen"];
+    renderTrigger: (triggerProps: FilterButtonProps) => JSX.Element;
+}
+declare const FilterDateRangePicker: {
+    ({ id: propsId, isOpen, setIsOpen, renderTrigger, selectedRange, label, locale, ...restProps }: FilterDateRangePickerProps): JSX.Element;
+    displayName: string;
+};
+
+type FilterBarDateRangePickerProps = Omit<FilterDateRangePickerProps, "id" | "label" | "renderTrigger" | "isOpen" | "setIsOpen" | "selectedRange" | "onRangeChange" | "locale"> & {
+    id?: string;
+    onRangeChange?: FilterDateRangePickerProps["onRangeChange"];
+    locale?: FilterDateRangePickerProps["locale"];
+};
+
+interface NoResultsProps extends HTMLAttributes<HTMLDivElement> {
+    children: React$1.ReactNode;
+}
+
+interface MenuFooterProps {
+    children: React$1.ReactNode;
+}
+
+interface MenuLoadingSkeletonProps {
+    isAnimated?: boolean;
+}
+
+type ValueType = React.Key;
+interface ItemType {
+    label: string;
+    value: ValueType;
+    count?: string;
+    isDisabled?: boolean;
+}
+type MultiSelectItem = Node<ItemType>;
+
+interface MultiSelectOptionProps {
+    item: MultiSelectItem;
+}
+
+interface ListBoxSectionProps$1 {
+    items: MultiSelectItem[];
+    /**
+     * Becomes an aria-label on the section, informing
+     * unsighted users
+     */
+    sectionName: string;
+    children: (item: MultiSelectItem) => React$1.ReactNode;
+}
+
+type ListBoxItems = {
+    selectedItems: MultiSelectItem[];
+    unselectedItems: MultiSelectItem[];
+    disabledItems: MultiSelectItem[];
+    allItems: MultiSelectItem[];
+    hasNoItems: boolean;
+};
+interface ListBoxProps {
+    children: (items: ListBoxItems) => React$1.ReactNode;
+}
+
+interface SearchInputProps {
+    label?: string;
+    id?: string;
+    isLoading?: boolean;
+}
+
+type FilterTriggerButtonProps = {
+    label: string;
+    selectedOptionLabels: string[];
+    /**
+     * Character limit of the button label.
+     * It will always show the first selected label regardless if it exceeds the given character limit.
+     */
+    labelCharacterLimitBeforeTruncate?: number;
+    classNameOverride?: string;
+};
+
+type RemovableFilterTriggerProps = FilterTriggerButtonProps & {
+    onRemove: () => void;
+};
+
+interface MenuTriggerProviderProps {
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    children: React$1.ReactNode;
+}
+interface MenuTriggerProviderContextType {
+    menuTriggerProps: HTMLAttributes<HTMLElement>;
+    buttonProps: ButtonHTMLAttributes<HTMLButtonElement>;
+    menuProps: AriaMenuOptions<ItemType>;
+    menuTriggerState: MenuTriggerState;
+    buttonRef: React$1.RefObject<HTMLButtonElement>;
+}
+declare function MenuTriggerProvider({ isOpen, defaultOpen, onOpenChange, children, }: MenuTriggerProviderProps): JSX.Element;
+declare const useMenuTriggerContext: () => MenuTriggerProviderContextType;
+declare const MenuTriggerConsumer: React$1.Consumer<MenuTriggerProviderContextType>;
+
+interface SelectionProviderProps {
+    selectionMode: SelectionMode;
+    children: React$1.ReactNode;
+    items?: ItemType[];
+    onSelectionChange?: (keys: Selection) => void;
+    /** The currently selected keys in the collection (controlled). */
+    selectedKeys?: Selection;
+    /** The initial selected keys in the collection (uncontrolled). */
+    defaultSelectedKeys?: Selection;
+    label: string;
+    disabledKeys?: Selection;
+    onSearchInputChange?: (searchInput: string) => void;
+}
+interface SelectionProviderContextType {
+    listBoxProps: HTMLAttributes<HTMLElement>;
+    labelProps: HTMLAttributes<HTMLElement>;
+    selectionState: ListState<ItemType>;
+    listRef: React$1.RefObject<HTMLUListElement>;
+    searchQuery?: string;
+    setSearchQuery: React$1.Dispatch<React$1.SetStateAction<string>>;
+}
+declare const SelectionProvider: {
+    (props: SelectionProviderProps): JSX.Element;
+    displayName: string;
+};
+declare const useSelectionContext: () => SelectionProviderContextType;
+declare const SelectionConsumer: React$1.Consumer<SelectionProviderContextType>;
+
+interface MenuPopupProps {
+    isLoading?: boolean;
+    loadingSkeleton?: React$1.ReactNode;
+    children: React$1.ReactNode;
+}
+
+interface SelectionProps {
+    label: string;
+    items: ItemType[];
+    selectedKeys?: Selection;
+    defaultSelectedKeys?: Selection;
+    onSelectionChange?: (keys: Selection) => void;
+    selectionMode?: SelectionMode;
+    onSearchInputChange?: (searchInput: string) => void;
+}
+interface RootProps extends Omit<MenuPopupProps, "children">, Omit<MenuTriggerProviderProps, "children">, SelectionProps {
+    trigger: (value?: MenuTriggerProviderContextType) => React$1.ReactNode;
+    children: (value?: SelectionProviderContextType) => React$1.ReactNode;
+}
+
+type FilterMultiSelectProps = RootProps;
+declare const FilterMultiSelect: {
+    ({ trigger, children, isOpen, defaultOpen, onOpenChange, isLoading, loadingSkeleton, label, items, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionMode, onSearchInputChange, }: RootProps): JSX.Element;
+    displayName: string;
+} & {
+    TriggerButton: {
+        ({ selectedOptionLabels, label, classNameOverride, labelCharacterLimitBeforeTruncate, }: FilterTriggerButtonProps): JSX.Element;
+        displayName: string;
+    };
+    RemovableTrigger: {
+        ({ label, selectedOptionLabels, labelCharacterLimitBeforeTruncate, classNameOverride, onRemove, }: RemovableFilterTriggerProps): JSX.Element;
+        displayName: string;
+    };
+    SearchInput: {
+        ({ label, id, isLoading, }: SearchInputProps): JSX.Element;
+        displayName: string;
+    };
+    ListBox: {
+        ({ children }: ListBoxProps): JSX.Element;
+        displayName: string;
+    };
+    ListBoxSection: {
+        ({ items, sectionName, children, }: ListBoxSectionProps$1): JSX.Element;
+        displayName: string;
+    };
+    SectionDivider: {
+        (): JSX.Element;
+        displayName: string;
+    };
+    Option: {
+        ({ item, }: MultiSelectOptionProps): JSX.Element;
+        displayName: string;
+    };
+    SelectAllButton: {
+        (): JSX.Element;
+        displayName: string;
+    };
+    ClearButton: {
+        (): JSX.Element;
+        displayName: string;
+    };
+    MenuFooter: {
+        ({ children }: MenuFooterProps): JSX.Element;
+        displayName: string;
+    };
+    MenuLoadingSkeleton: {
+        ({ isAnimated, }: MenuLoadingSkeletonProps): JSX.Element;
+        displayName: string;
+    };
+    LoadMoreButton: {
+        (props: _kaizen_button.ButtonProps): JSX.Element;
+        displayName: string;
+    };
+    NoResults: {
+        ({ children, ...restProps }: NoResultsProps): JSX.Element;
+        displayName: string;
+    };
+};
+
+type LoadMoreButtonProps = ButtonProps$1;
+
+declare const getTruncatedLabels: (labels: string[], limit: number) => string;
+
+declare const getSelectedOptionLabels: (keys?: Selection, items?: ItemType[]) => string[];
+
+declare const getSelectedOptionKeys: (keys?: Selection, items?: ItemType[]) => React$1.Key[];
+
+type FilterBarMultiSelectProps = Omit<FilterMultiSelectProps, "isOpen" | "setIsOpen" | "renderTrigger" | "label" | "selectedKeys" | "trigger"> & {
+    id?: string;
+};
+
+type SelectOption = {
+    label: string;
+    value: React.Key;
+    disabled?: boolean;
+    options?: never;
+};
+type SelectOptionGroup<Option extends SelectOption> = {
+    label: string;
+    options: Iterable<Option>;
+};
+type SelectItem<Option extends SelectOption = SelectOption> = Option | SelectOptionGroup<Option>;
+interface SelectOptionNode<Option extends SelectOption = SelectOption> extends Node<Option> {
+    type: "item";
+    hasChildNodes: false;
+}
+interface SelectOptionGroupNode<Option extends SelectOption = SelectOption> extends Omit<Node<SelectOptionGroup<Option>>, "childNodes"> {
+    type: "section";
+    hasChildNodes: true;
+    childNodes: Array<SelectOptionNode<Option>>;
+}
+type SelectItemNode<Option extends SelectOption = SelectOption> = SelectOptionNode<Option> | SelectOptionGroupNode<Option>;
+
+type ListItemProps<Option extends SelectOption = SelectOption> = {
+    item: SelectItemNode<Option>;
+};
+
+interface OptionProps<Option extends SelectOption = SelectOption> extends OverrideClassName<Omit<HTMLAttributes<HTMLLIElement>, "children">> {
+    item: SelectOptionNode<Option>;
+}
+
+interface ListBoxSectionProps<Option extends SelectOption> {
+    section: SelectOptionGroupNode<Option>;
+}
+
+type OmittedAriaSelectProps = "label" | "children" | "isOpen" | "onOpenChange" | "defaultOpen" | "items";
+interface FilterSelectProps<Option extends SelectOption = SelectOption> extends OverrideClassName<Omit<SelectProps<Option>, OmittedAriaSelectProps>> {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    renderTrigger: (triggerButtonProps: FilterButtonProps) => JSX.Element;
+    label: string;
+    children?: (args: {
+        items: Array<SelectItemNode<Option>>;
+    }) => React$1.ReactNode;
+    items: Array<SelectItem<Option>>;
+}
+declare const FilterSelect: {
+    <Option extends SelectOption = SelectOption>({ isOpen, setIsOpen, renderTrigger, label, children, items, classNameOverride, selectedKey, ...restProps }: FilterSelectProps<Option>): JSX.Element;
+    displayName: string;
+    Section: {
+        <Option_1 extends SelectOption = SelectOption>({ section, }: ListBoxSectionProps<Option_1>): JSX.Element;
+        displayName: string;
+    };
+    SectionDivider: {
+        (): JSX.Element;
+        displayName: string;
+    };
+    Option: {
+        <Option_2 extends SelectOption = SelectOption>({ item, classNameOverride, ...props }: OptionProps<Option_2>): JSX.Element;
+        displayName: string;
+    };
+    ItemDefaultRender: {
+        <Option_3 extends SelectOption = SelectOption>({ item, }: ListItemProps<Option_3>): JSX.Element;
+        displayName: string;
+    };
+};
+
+type FilterBarSelectProps<Option extends SelectOption = SelectOption> = Omit<FilterSelectProps<Option>, "isOpen" | "setIsOpen" | "renderTrigger" | "label" | "selectedKey"> & {
+    id?: string;
+};
+
+type FiltersValues = Record<string, any>;
+type SourceFilterAttributes<Id, Value> = {
+    id: Id;
+    name: string;
+    value?: Value;
+    isActive: boolean;
+};
+type SourceFiltersState<ValuesMap extends FiltersValues> = {
+    [K in keyof ValuesMap]: SourceFilterAttributes<K, ValuesMap[K]>;
+};
+type FilterIsUsableWhen<ValuesMap extends FiltersValues> = (state: SourceFiltersState<ValuesMap>) => boolean;
+type FilterAttributes<ValuesMap extends FiltersValues, Id = keyof ValuesMap> = {
+    id: Id;
+    name: string;
+    Component: React.ReactElement;
+    isRemovable?: boolean;
+    isUsableWhen?: FilterIsUsableWhen<ValuesMap>;
+};
+type Filters<ValuesMap extends FiltersValues> = Array<FilterAttributes<ValuesMap>>;
+type FilterState<Id, Value> = {
+    id: Id;
+    name: string;
+    isRemovable: boolean;
+    isUsableWhen?: never;
+    isUsable: boolean;
+    isOpen: boolean;
+    value?: Value;
+    isActive: boolean;
+};
+
+type MappedFilters<ValuesMap extends FiltersValues> = {
+    [K in keyof ValuesMap]: FilterAttributes<ValuesMap, K>;
+};
+type FilterStateEditableAttributes = {
+    isOpen: boolean;
+};
+type InternalFilterState<ValuesMap extends FiltersValues, Id extends keyof ValuesMap> = {
+    id: Id;
+    name: string;
+    isRemovable: boolean;
+    isUsableWhen?: FilterIsUsableWhen<ValuesMap>;
+    isUsable: boolean;
+    isOpen: boolean;
+    value?: never;
+    isActive?: never;
+};
+type FilterBarStateFilters<ValuesMap extends FiltersValues> = {
+    [K in keyof ValuesMap]: InternalFilterState<ValuesMap, K>;
+};
+type FilterBarState<ValuesMap extends FiltersValues> = {
+    hasUpdatedValues: boolean;
+    filters: FilterBarStateFilters<ValuesMap>;
+    activeFilterIds: Set<keyof ValuesMap>;
+    values: Partial<ValuesMap>;
+    dependentFilterIds: Set<keyof ValuesMap>;
+};
+type ActiveFiltersArray<ValuesMap extends FiltersValues> = Array<FilterAttributes<ValuesMap>>;
+
+type FilterBarContextValue<Value, ValuesMap extends FiltersValues = Record<string, Value>> = {
+    getFilterState: <Id extends keyof ValuesMap>(id: Id) => FilterState<keyof ValuesMap, ValuesMap[Id]>;
+    getActiveFilterValues: () => Partial<ValuesMap>;
+    /**
+     * @deprecated Use `setFilterOpenState` instead.
+     */
+    toggleOpenFilter: <Id extends keyof ValuesMap>(id: Id, isOpen: boolean) => void;
+    setFilterOpenState: <Id extends keyof ValuesMap>(id: Id, isOpen: boolean) => void;
+    openFilter: <Id extends keyof ValuesMap>(id: Id) => void;
+    updateValue: <Id extends keyof ValuesMap>(id: Id, value: ValuesMap[Id]) => void;
+    showFilter: <Id extends keyof ValuesMap>(id: Id) => void;
+    hideFilter: <Id extends keyof ValuesMap>(id: Id) => void;
+    getInactiveFilters: () => Array<FilterAttributes<ValuesMap>>;
+    clearAllFilters: () => void;
+};
+declare const useFilterBarContext: <Value, Values extends FiltersValues = Record<string, Value>>() => FilterBarContextValue<Value, Values>;
+type FilterBarProviderProps<ValuesMap extends FiltersValues> = {
+    children: (activeFilters: ActiveFiltersArray<ValuesMap>) => JSX.Element;
+    filters: Filters<ValuesMap>;
+    values: Partial<ValuesMap>;
+    onValuesChange: (values: Partial<ValuesMap>) => void;
+};
+declare const FilterBarProvider: <ValuesMap extends FiltersValues>({ children, filters, values, onValuesChange, }: FilterBarProviderProps<ValuesMap>) => JSX.Element;
+
+type FilterBarProps<ValuesMap extends FiltersValues> = OverrideClassName<Omit<FilterBarProviderProps<ValuesMap>, "children">>;
+declare const FilterBar: {
+    <ValuesMap extends FiltersValues>({ filters, classNameOverride, ...providerProps }: FilterBarProps<ValuesMap>): JSX.Element;
+    displayName: string;
+    DatePicker: {
+        ({ id, onDateChange, locale, ...props }: FilterBarDatePickerProps): JSX.Element;
+        displayName: string;
+    };
+    DateRangePicker: {
+        ({ id, onRangeChange, locale, ...props }: FilterBarDateRangePickerProps): JSX.Element;
+        displayName: string;
+    };
+    MultiSelect: {
+        ({ id, items: propsItems, children, onSelectionChange, ...props }: FilterBarMultiSelectProps): JSX.Element | null;
+        displayName: string;
+    };
+    Select: {
+        <Option extends SelectOption = SelectOption>({ id, items: propsItems, onSelectionChange, ...props }: FilterBarSelectProps<Option>): JSX.Element;
+        displayName: string;
+    };
+};
+
+interface InputSearchProps extends OverrideClassName<Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue">> {
+    id: string;
+    reversed?: boolean;
+    loading?: boolean;
+    secondary?: boolean;
+    onClear?: () => void;
+}
+declare const InputSearch: {
+    (props: InputSearchProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Use this class to set and apply themes, and to access or subscribe to the currently active one.
+ * This class fulfills the idea of theming and runtime theme switching by relying on CSS variables,
+ * and the ability to update them in JavaScript - a framework agnostic method.
+ *
+ * It works by converting a Theme interface to a flattened map of CSS variable keys and values, then calling `document.documentElement.style.setProperty(key, value)`.
+ */
+declare class ThemeManager<Theme extends Theme$1 = Theme$1> {
+    private themeChangeListeners;
+    private theme;
+    private rootElement;
+    private rootElementId;
+    constructor(theme: Theme, rootElementId?: string, apply?: boolean);
+    getRootElement: () => HTMLElement | null;
+    getRootElementId: () => string;
+    getCurrentTheme: () => Theme;
+    setRootElement: (element: HTMLElement) => void;
+    setRootElementId: (rootElementId: string) => string;
+    setAndApplyTheme: (theme: Theme, force?: boolean) => void;
+    addThemeChangeListener: (listener: (theme: Theme) => void) => void;
+    removeThemeChangeListener: (listener: (theme: Theme) => void) => void;
+    applyCurrentTheme: () => void;
+    private notifyThemeChangeListeners;
+}
+
+/**
+ * Use a custom type for CSS properties becauase we should eventually write a more strongly typed version using template literal types.
+ * This could definitely be contributed back to the community too. An example starting point here https://github.com/ghoullier/awesome-template-literal-types#css-parser
+ * For example:
+ * ```ts
+ * type Font = {
+ *   fontSize: `${number}rem`,
+ *
+ *  }
+ * type HexDigit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F ;
+ * type Color = `rgba(${number}, ${number}, ${number}, ${number}) | #${HexDigit}${HexDigit}${HexDigit}` // You get the point
+ *
+ * ```
+ * */
+type KaizenCSSProperties = CSSProperties;
+type Hex = string;
+type TypographyFont = {
+    fontFamily: KaizenCSSProperties["fontFamily"];
+    fontWeight: KaizenCSSProperties["fontWeight"];
+    fontSize: KaizenCSSProperties["fontSize"];
+    lineHeight: KaizenCSSProperties["lineHeight"];
+    letterSpacing: KaizenCSSProperties["letterSpacing"];
+};
+type ThemeKey = "heart" | "custom";
+type Theme = {
+    themeKey: ThemeKey;
+    border: {
+        solid: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+            borderColor: KaizenCSSProperties["borderColor"];
+        };
+        dashed: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+        };
+        borderless: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+            borderColor: KaizenCSSProperties["borderColor"];
+        };
+        focusRing: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+        };
+    };
+    animation: {
+        easingFunction: {
+            easeInOut: string;
+            easeIn: string;
+            easeOut: string;
+            linear: string;
+            bounceIn: string;
+            bounceOut: string;
+            bounceInOut: string;
+        };
+        duration: {
+            instant: string;
+            immediate: string;
+            rapid: string;
+            fast: string;
+            slow: string;
+            deliberate: string;
+        };
+    };
+    color: {
+        purple: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+            "800": Hex;
+        };
+        blue: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        green: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        yellow: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        red: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        orange: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        gray: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+        };
+        white: Hex;
+    };
+    dataViz: {
+        favorable: Hex;
+        unfavorable: Hex;
+    };
+    layout: {
+        contentMaxWidth: string;
+        contentMaxWidthWithSidebar: string;
+        contentSideMargin: string;
+        mobileActionsDrawerHeight: string;
+        navigationBarHeight: string;
+        breakpoints: {
+            medium: string;
+            large: string;
+        };
+    };
+    shadow: {
+        small: {
+            boxShadow: string;
+        };
+        large: {
+            boxShadow: string;
+        };
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+        xxxl: string;
+        xxxxl: string;
+        xxxxxl: string;
+        0: string;
+        1: string;
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+        32: string;
+        40: string;
+        48: string;
+        56: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+        112: string;
+        128: string;
+        160: string;
+        200: string;
+        240: string;
+        280: string;
+        320: string;
+    };
+    typography: {
+        dataLarge: TypographyFont;
+        dataLargeUnits: TypographyFont;
+        dataMedium: TypographyFont;
+        dataMediumUnits: TypographyFont;
+        dataSmall: TypographyFont;
+        dataSmallUnits: TypographyFont;
+        display0: TypographyFont;
+        heading1: TypographyFont;
+        heading2: TypographyFont;
+        heading3: TypographyFont;
+        heading4: TypographyFont;
+        heading5: TypographyFont;
+        heading6: TypographyFont;
+        paragraphIntroLede: TypographyFont;
+        paragraphBody: TypographyFont;
+        paragraphSmall: TypographyFont;
+        paragraphExtraSmall: TypographyFont;
+        paragraphBold: {
+            fontWeight: KaizenCSSProperties["fontWeight"];
+        };
+        buttonPrimary: TypographyFont;
+        buttonSecondary: TypographyFont;
+    };
+};
+type DeepMapObjectLeafs<T, LeafType> = T extends string | number | bigint | boolean | symbol | null | undefined | ((...params: any[]) => any) ? LeafType : T extends Record<any, any> ? {
+    [Key in keyof T]: DeepMapObjectLeafs<T[Key], LeafType>;
+} : T;
+/**
+ * Apologies for the complex types.
+ * This type represents the Theme type but with every leaf value in the tree mapped strictly to a string, rather than a number or a more complex type such as a string union.
+ * The reason for this is to have a more accurate type for the generated hierarchy of design tokens which are represented as CSS custom properties, e.g. `var(--color-purple-800)`.
+ */
+type CSSVariableTheme = DeepMapObjectLeafs<Theme, string>;
+
+declare const heartTheme: Theme;
+
+declare const defaultTheme: Theme;
+
+declare const ThemeContext: Context<Theme>;
+/**
+ * Wrap your application in this provider using a ThemeManager, to synchronise it with a react context.
+ * This allows child react elements to more easily use theme variables, using the {@link useTheme} hook.
+ */
+declare const ThemeProvider: ({ themeManager, ...props }: {
+    themeManager?: ThemeManager<_kaizen_design_tokens.Theme> | undefined;
+    children: React$1.ReactNode;
+}) => JSX.Element;
+declare const useTheme: () => Theme;
+
+interface KaizenProviderProps {
+    children: React$1.ReactNode;
+    themeManager?: ThemeManager;
+    locale?: string;
+}
+declare const KaizenProvider: {
+    ({ children, themeManager, locale, }: KaizenProviderProps): JSX.Element;
+    displayName: string;
+};
+
+interface ProgressStepperProps {
+    stepName: string;
+    steps: [string, ...string[]];
+    isComplete?: boolean;
+}
+
+interface FooterProps extends OverrideClassName<Omit<HTMLAttributes<HTMLElement>, "children">>, ProgressStepperProps {
+    /** An action to return to a previous step */
+    previousAction?: JSX.Element;
+    /** An action to progress to the next step or submit the form */
+    nextAction?: JSX.Element;
+}
+
+type WorkflowStatus = {
+    /** @default: "statusDraft" */
+    variant?: DefaultTagProps["variant"];
+    content?: string;
+};
+interface WorkflowTitlesProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
+    workflowName: string;
+    stepName: string;
+    status?: WorkflowStatus;
+}
+
+interface WorkflowActionsProps extends OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "children">> {
+    /**
+     * Header actions will render in order of the array.
+     */
+    headerActions?: JSX.Element[];
+}
+
+type HeaderProps = WorkflowTitlesProps & WorkflowActionsProps;
+
+type WorkflowMainProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
+    children: ReactNode;
+};
+
+type WorkflowWrapperProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
+    children: ReactNode;
+};
+
+type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & FooterProps & HeaderProps;
+/**
+ * @deprecated Use { Workflow } from `@kaizen/components/future`
+ */
+declare const Workflow: (({ stepName, steps, isComplete, workflowName, status, headerActions, children, nextAction, previousAction, classNameOverride, ...restProps }: WorkflowProps) => JSX.Element) & {
+    Header: {
+        ({ workflowName, stepName, status, headerActions, ...restProps }: HeaderProps): JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ steps, stepName, isComplete, previousAction, nextAction, ...restProps }: FooterProps): JSX.Element;
+        displayName: string;
+    };
+    Main: {
+        ({ children, classNameOverride, ...restProps }: WorkflowMainProps): JSX.Element;
+        displayName: string;
+    };
+    ProgressStepper: {
+        ({ stepName, steps, isComplete, ...restprops }: ProgressStepperProps): JSX.Element;
+        displayName: string;
+    };
+    Wrapper: {
+        ({ children, classNameOverride, ...restProps }: WorkflowWrapperProps): JSX.Element;
+        displayName: string;
+    };
+};
+
+declare const statusCodes: readonly ["400", "401", "403", "404", "422", "500", "502", "503", "504"];
+type ErrorStatuses = (typeof statusCodes)[number];
+
+type ErrorPageProps = {
+    code: ErrorStatuses;
+    title?: string;
+    message?: React$1.ReactNode | string;
+    callToAction?: {
+        onContactSupport: () => void;
+        homeHref?: string;
+    };
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
+declare function ErrorPage({ code, title, message, callToAction, classNameOverride, }: ErrorPageProps): JSX.Element;
+declare namespace ErrorPage {
+    var displayName: string;
+}
+
+export { ActiveFiltersArray, BadgeProps, Button, ButtonFormAttributes, ButtonProps, ButtonRef, ButtonType, CSSVariableTheme, ClearButton, ClearButtonProps, CustomButtonProps, DateRangeFieldValidationMessage, DateValidationResponse, DeepMapObjectLeafs, ErrorPage, ErrorPageProps, Filter, FilterAttributes, FilterBar, FilterBarContextValue, FilterBarProps, FilterBarProvider, FilterBarProviderProps, FilterBarState, FilterBarStateFilters, FilterButton, FilterButtonProps, FilterButtonRemovable, FilterButtonRemovableProps, FilterButtonRemovableRefs, FilterContents, FilterContentsProps, FilterDatePicker, FilterDatePickerField, FilterDatePickerFieldProps, FilterDatePickerProps, FilterDateRangePicker, FilterDateRangePickerProps, FilterDateSupportedLocales, FilterIsUsableWhen, FilterMultiSelect, FilterMultiSelectProps, FilterProps, FilterSelect, FilterSelectProps, FilterState, FilterStateEditableAttributes, FilterTriggerButtonProps, FilterTriggerRef, Filters, FiltersValues, GenericProps, GetDateValidationHandlerArgs, InputSearch, InputSearchProps, InternalFilterState, ItemType, KaizenProvider, KaizenProviderProps, ListBoxItems, ListBoxProps, ListBoxSectionProps$1 as ListBoxSectionProps, LoadMoreButtonProps, MappedFilters, MenuFooterProps, MenuLoadingSkeletonProps, MenuTriggerConsumer, MenuTriggerProvider, MenuTriggerProviderContextType, MenuTriggerProviderProps, MultiSelectItem, MultiSelectOptionProps, NoResultsProps, RemovableFilterTriggerProps, RenderProps, SearchInputProps, SelectItem, SelectItemNode, SelectOption, SelectOptionGroup, SelectOptionGroupNode, SelectOptionNode, SelectionConsumer, SelectionProvider, SelectionProviderContextType, SelectionProviderProps, SourceFiltersState, Theme, ThemeContext, ThemeKey, ThemeManager, ThemeProvider, TypographyFont, UseDateValidationArgs, UseDateValidationValue, ValidateDateResponse, ValidationMessage, ValueType, Workflow, WorkflowProps, WorkingProps, WorkingUndefinedProps, defaultTheme, getDateValidationHandler, getSelectedOptionKeys, getSelectedOptionLabels, getTruncatedLabels, heartTheme, useDateValidation, useFilterBarContext, useMenuTriggerContext, useSelectionContext, useTheme, validateDate };