import * as _react_types_shared from '@react-types/shared';
import { AriaLabelingProps, PressEvents, FocusableProps, LinkDOMProps, MultipleSelection, FocusEvents, SingleSelection, InputBase, ValueBase, AriaValidationProps, Validation, CollectionBase, DOMProps as DOMProps$1, DOMAttributes, Node, CollectionChildren, RangeValue, FocusableElement, ItemProps, SortDirection, SortDescriptor as SortDescriptor$1, Alignment, GlobalDOMAttributes as GlobalDOMAttributes$1, FocusableRefValue, Key as Key$1, Selection as Selection$1, CollectionStateBase, FocusableDOMProps } from '@react-types/shared';
export { Selection } from '@react-types/shared';
import * as React$1 from 'react';
import React__default, { ReactNode, ElementType, JSXElementConstructor, CSSProperties, RefObject, DOMAttributes as DOMAttributes$1, HTMLAttributes, ButtonHTMLAttributes, ThHTMLAttributes, ForwardedRef, ReactElement, Key, FormEvent, AriaRole, ComponentProps, Ref, AnchorHTMLAttributes, ComponentType, LabelHTMLAttributes } from 'react';
import { AriaPositionProps, AriaModalOverlayProps, AriaOverlayProps, Placement } from '@react-aria/overlays';
import { tokens } from '@danske/sapphire-css/themes';
export { tokens } from '@danske/sapphire-css/themes';
import { OverlayTriggerProps } from '@react-stately/overlays';
import { DateFieldBase } from '@react-types/datepicker';
import { SelectProps as SelectProps$1 } from '@react-types/select';
import { AriaComboBoxProps, ComboBoxProps } from '@react-types/combobox';
import { KeyboardEvents } from '@react-types/shared/src/events';
import { AriaToggleProps } from '@react-types/checkbox';
import { GlobalDOMAttributes, DOMProps, TextInputDOMProps } from '@react-types/shared/src/dom';
import { Sortable } from '@react-types/shared/src/collections';
import { AriaDialogProps } from '@react-types/dialog';
import { ThemeContextProps, DateFormatLocaleContextValue, BreakpointContextValue } from '@danske/sapphire-react-context';
import { useButton as useButton$1, AriaButtonProps, AriaToggleButtonProps } from '@react-aria/button';
import * as _internationalized_date from '@internationalized/date';
import { DateValue } from '@internationalized/date';
import { AriaCalendarProps, AriaRangeCalendarProps } from '@react-aria/calendar';
import { CalendarStateOptions as CalendarStateOptions$1, RangeCalendarStateOptions as RangeCalendarStateOptions$1 } from '@react-stately/calendar';
import * as react_aria_components from 'react-aria-components';
import { CheckboxProps as CheckboxProps$1, TableProps as TableProps$1, ColumnProps as ColumnProps$1, RowProps, CellProps, TableBodyProps as TableBodyProps$1, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, MenuSectionProps as MenuSectionProps$1, PopoverProps as PopoverProps$1, OverlayTriggerState } from 'react-aria-components';
import { AriaCheckboxGroupProps } from '@react-aria/checkbox';
import * as react_aria from 'react-aria';
import * as react_stately from 'react-stately';
import { DateValue as DateValue$1, AriaDatePickerProps, AriaDateRangePickerProps } from '@react-aria/datepicker';
import { DatePickerStateOptions as DatePickerStateOptions$1, DateRangePickerStateOptions as DateRangePickerStateOptions$1, DateSegment, DateFieldState } from '@react-stately/datepicker';
import { AriaGridListProps } from '@react-aria/gridlist';
import { Selection } from '@react-types/shared/src/selection';
import { ColumnProps } from '@react-types/table';
import { AriaLinkOptions } from '@react-aria/link';
import { AriaListBoxOptions } from '@react-aria/listbox';
import { ListState } from '@react-stately/list';
import { AriaListBoxProps } from '@react-types/listbox';
import { MenuTriggerProps } from '@react-types/menu';
import { AriaMenuTriggerProps } from '@react-aria/menu';
export { Item, Section } from '@react-stately/collections';
import { AriaTextFieldOptions } from '@react-aria/textfield';
export { Pressable } from '@react-aria/interactions';
import { AriaRadioProps, AriaRadioGroupProps } from '@react-aria/radio';
export { default as defaultTheme } from '@danske/sapphire-css/themes/default';
export { default as defaultDarkTheme } from '@danske/sapphire-css/themes/default-dark';
export { default as realkreditTheme } from '@danske/sapphire-css/themes/realkredit';
import { Theme } from '@danske/sapphire-css/themes/index';
import { AriaSearchFieldProps } from '@react-aria/searchfield';
import { ComboBoxState, useComboBoxState as useComboBoxState$1 } from '@react-stately/combobox';
import { AriaTabListProps, TabListAria } from '@react-aria/tabs';
import { AriaSelectProps } from '@react-aria/select';
import { AriaComboBoxOptions } from '@react-aria/combobox';
import { AriaSwitchProps } from '@react-aria/switch';
import { AriaTooltipProps, TooltipTriggerProps } from '@react-aria/tooltip';
import { TransitionStatus } from 'react-transition-group';
import { SelectState } from '@react-stately/select';
import { MenuTriggerState } from '@react-stately/menu';
export { useLocale } from '@react-aria/i18n';
export { useMediaQuery } from '@react-spectrum/utils';
import { OverlayTriggerProps as OverlayTriggerProps$1 } from '@react-types/overlays';
export { TableHeader } from '@react-stately/table';

/**
 * @fileoverview This file is a utility for selectively picking properties from various
 * react-aria / react-types components interfaces. The primary purpose is to enable granular
 * picking the necessary properties for specific use cases, thus enhancing stability of using
 * our components, since we will not expose props that are not actually used.
 *
 * @description The decision to implement property picking stems from the need to optimize the
 * interface consumption by components. By explicitly selecting only the necessary properties,
 * we achieve a cleaner, more maintainable, and less error-prone codebase. This is particularly
 * beneficial since our components will use some aria properties but might not use all of them,
 * so there is no need to expose all of them.
 *
 * The decision was to pick keys from existing components rather than owning the props directly,
 * and it was driven by the following considerations:
 * 1) Avoiding the ownership of props - Directly owning properties within components
 * can lead to an overhead in maintenance, since we want to use the props as they are unknownway;
 * 2) Traceability - Even though we do not own the props, picking keys allows us to
 * maintain a clear reference and traceability of where each property originates from.
 * This ease of tracing where various props come from is crucial for debugging.
 *
 * The `Pick` utility is used extensively to narrow down the properties in our components.
 * For instance:
 * - `AriaCalendarProps<T>` is stripped down to only include essential date-related properties
 *   and accessibility props, which are crucial for calendar functionality but omits others that
 *   are irrelevant in the calendar context.
 * - This selective approach is also applied to other component props like `DOMProps`,
 *   `AriaLabelingProps`, and various event handling props, ensuring that each component only
 *   deals with the properties it needs to function properly.
 */

declare type AriaLabelingPropsKeys = keyof Pick<AriaLabelingProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'>;
declare type BaseComponentKeys = AriaLabelingPropsKeys;
declare type GlobalDomAttributes = Pick<GlobalDOMAttributes, 'translate' | 'dir' | 'lang' | 'inert'> & Pick<DOMProps, 'id'>;
declare type PressEventsKeys = keyof Pick<PressEvents, 'onPress' | 'onPressStart' | 'onPressEnd' | 'onPressChange' | 'onPressUp'>;
declare type FocusablePropsKeys = keyof Pick<FocusableProps<unknown>, 'autoFocus' | FocusEventsKeys | KeyboardEventsKeys>;
declare type LinkDOMPropsKeys = keyof Pick<LinkDOMProps, 'href' | 'hrefLang' | 'target' | 'rel' | 'download' | 'ping' | 'referrerPolicy'>;
declare type TextInputDOMPropsKeys = keyof Pick<TextInputDOMProps, 'autoComplete' | 'inputMode' | 'name' | 'type' | 'minLength' | 'maxLength' | 'pattern' | 'placeholder' | 'autoCorrect' | 'spellCheck' | 'onCopy' | 'onCut' | 'onPaste' | 'onSelect' | 'onBeforeInput' | 'onInput'>;
declare type MultipleSelectionKeys = keyof Pick<MultipleSelection, 'selectedKeys' | 'defaultSelectedKeys' | 'disallowEmptySelection' | 'disabledKeys' | SingleSelectionSelectionChangeKeys>;
declare type SortableKeys = keyof Pick<Sortable, 'sortDescriptor' | 'onSortChange'>;
declare type OverlayTriggerPropsKeys = keyof Pick<OverlayTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>;
declare type FocusEventsKeys = keyof Pick<FocusEvents, 'onBlur' | 'onFocus' | 'onFocusChange'>;
declare type SingleSelectionSelectedKeyKeys = keyof Pick<SingleSelection, 'selectedKey' | 'defaultSelectedKey'>;
declare type SingleSelectionSelectionChangeKeys = keyof Pick<SingleSelection, 'onSelectionChange'>;
declare type SelectPropsKeys = keyof Pick<SelectProps$1<unknown>, OverlayTriggerPropsKeys>;
declare type KeyboardEventsKeys = keyof Pick<KeyboardEvents, 'onKeyUp' | 'onKeyDown'>;
declare type CollectionBaseItemsKeys = keyof Pick<CollectionBase<unknown>, 'items'>;
declare type CollectionBaseDisabledKeys = keyof Pick<CollectionBase<unknown>, 'disabledKeys'>;
declare type CollectionBaseKeys = CollectionBaseItemsKeys | CollectionBaseDisabledKeys;
declare type DateFieldBaseKeys = keyof Pick<DateFieldBase<any>, 'placeholderValue' | 'shouldForceLeadingZeros' | 'minValue' | 'maxValue' | 'isDateUnavailable' | InputBaseKeys | ValidationIsRequiredKey | FocusablePropsKeys | 'label'>;
declare type InputBaseKeys = keyof Pick<InputBase, 'isDisabled' | 'isReadOnly'>;
declare type ValueBasePropsKeys = keyof Pick<ValueBase<unknown, unknown>, 'value' | 'defaultValue' | 'onChange'>;
declare type AriaComboBoxPropsKeys = keyof Pick<AriaComboBoxProps<unknown>, 'shouldFocusWrap'>;
declare type AriaPositionPropsKeys = keyof Pick<AriaPositionProps, 'boundaryElement' | 'crossOffset' | 'offset' | 'placement' | 'scrollRef' | 'shouldFlip'>;
declare type AriaValidationPropsKeys = keyof Pick<AriaValidationProps, 'aria-errormessage'>;
declare type AriaTogglePropsKeys = keyof Pick<AriaToggleProps, AriaTogglePropsEssentialKeys | 'aria-controls' | 'value'>;
declare type AriaTogglePropsEssentialKeys = keyof Pick<AriaToggleProps, 'defaultSelected' | 'isSelected' | 'onChange'>;
/**
 * There are more validation keys, but at the time of writing this file were not used
 * When we will need more validation props, add them here, but keep in mind that it would
 * be better to have a more granular approach, for example adding:
 *
 * export type ValidationIsInvalidKey = keyof Pick<Validation, 'isInvalid'>;
 * export type ValidationValidationStateKey = keyof Pick<Validation, 'validationState'>;
 *
 * This is because, if extending only `ValidationIsRequiredKey`, other existing components
 * will be affected.
 */
declare type ValidationIsRequiredKey = keyof Pick<Validation, 'isRequired'>;

interface FlexStyleProps extends SapphireCommonStyleProps {
    /**
     * The direction in which to layout children. See
     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).
     * @default 'row'
     */
    flexDirection?: ResponsiveCssProp<'flexDirection'>;
    /**
     * Whether to wrap items onto multiple lines. See
     * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap).
     * @default false
     */
    flexWrap?: ResponsiveCssProp<'flexWrap'>;
    /**
     *  CSS shorthand property specifies the direction of a flex container, as well as its wrapping
     * behavior. see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow)
     */
    flexFlow?: ResponsiveCssProp<'flexFlow'>;
    justifyContent?: ResponsiveCssProp<'justifyContent'>;
    alignItems?: ResponsiveCssProp<'alignItems'>;
    alignContent?: ResponsiveCssProp<'alignContent'>;
    /** The space to display between both rows and columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). */
    gap?: ResponsiveCssProp<'gap', 'size'>;
    /** The space to display between columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap). */
    columnGap?: ResponsiveCssProp<'columnGap', 'size'>;
    /** The space to display between rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap). */
    rowGap?: ResponsiveCssProp<'rowGap', 'size'>;
    padding?: ResponsiveCssProp<'padding', 'size'>;
    paddingLeft?: ResponsiveCssProp<'padding', 'size'>;
    paddingRight?: ResponsiveCssProp<'paddingRight', 'size'>;
    paddingTop?: ResponsiveCssProp<'paddingTop', 'size'>;
    paddingBottom?: ResponsiveCssProp<'paddingBottom', 'size'>;
    container?: ResponsiveCssProp<'container'>;
    containerType?: ResponsiveCssProp<'containerType'>;
    containerName?: ResponsiveCssProp<'containerName'>;
}
interface FlexProps extends DOMProps$1, GlobalDomAttributes, Omit<DOMAttributes, 'children' | 'style' | 'className' | 'dangerouslySetInnerHTML'>, SapphireStyleProps, FlexStyleProps {
    /** Children of the flex container. */
    children: ReactNode;
    /**
     * @default 'div'
     */
    elementType?: ElementType;
}
declare const Flex: React__default.ForwardRefExoticComponent<FlexProps & React__default.RefAttributes<HTMLDivElement>>;

interface GridStyleProps extends SapphireCommonStyleProps {
    gridAutoFlow?: ResponsiveCssProp<'gridAutoFlow'>;
    gridAutoColumns?: ResponsiveCssProp<'gridAutoColumns'>;
    gridAutoRows?: ResponsiveCssProp<'gridAutoRows'>;
    gridTemplateAreas?: ResponsiveCssProp<'gridTemplateAreas'>;
    gridTemplateColumns?: ResponsiveCssProp<'gridTemplateColumns'>;
    gridTemplateRows?: ResponsiveCssProp<'gridTemplateRows'>;
    gap?: ResponsiveCssProp<'gap', 'size'>;
    columnGap?: ResponsiveCssProp<'columnGap', 'size'>;
    rowGap?: ResponsiveCssProp<'rowGap', 'size'>;
    justifyItems?: ResponsiveCssProp<'justifyItems'>;
    justifyContent?: ResponsiveCssProp<'justifyContent'>;
    alignItems?: ResponsiveCssProp<'alignItems'>;
    alignContent?: ResponsiveCssProp<'alignContent'>;
    padding?: ResponsiveCssProp<'padding', 'size'>;
    paddingLeft?: ResponsiveCssProp<'padding', 'size'>;
    paddingRight?: ResponsiveCssProp<'paddingRight', 'size'>;
    paddingTop?: ResponsiveCssProp<'paddingTop', 'size'>;
    paddingBottom?: ResponsiveCssProp<'paddingBottom', 'size'>;
}
interface GridProps extends DOMProps$1, Omit<DOMAttributes, 'children' | 'style' | 'className' | 'dangerouslySetInnerHTML'>, SapphireStyleProps, GridStyleProps, GlobalDomAttributes {
    /** Children of the grid container. */
    children: ReactNode;
}
declare const Grid: React__default.ForwardRefExoticComponent<GridProps & React__default.RefAttributes<HTMLDivElement>>;

interface ViewProps extends GlobalDomAttributes, SapphireStyleProps, SapphireViewStyleProps, DOMProps$1, Omit<DOMAttributes, 'children' | 'style' | 'className' | 'dangerouslySetInnerHTML'> {
    /**
     * The element to render as the node.
     * @default: 'div'
     */
    elementType?: string | JSXElementConstructor<any>;
    /**
     * Children to be displayed in the View.
     */
    children?: ReactNode;
}
interface SapphireViewStyleProps extends SapphireCommonStyleProps, FlexStyleProps, GridStyleProps {
    display?: ResponsiveCssProp<'display'>;
    backgroundColor?: ResponsiveCssProp<'backgroundColor', 'color'>;
    color?: ResponsiveCssProp<'color', 'color'>;
    border?: ResponsiveCssProp<'border'>;
    borderWidth?: ResponsiveCssProp<'borderWidth', 'size'>;
    borderColor?: ResponsiveCssProp<'borderColor', 'color'>;
    borderStyle?: ResponsiveCssProp<'borderColor'>;
    borderLeft?: ResponsiveCssProp<'borderLeft'>;
    borderLeftColor?: ResponsiveCssProp<'borderLeftColor', 'color'>;
    borderLeftWidth?: ResponsiveCssProp<'borderLeftWidth', 'size'>;
    borderLeftStyle?: ResponsiveCssProp<'borderLeftStyle'>;
    borderRight?: ResponsiveCssProp<'borderRight'>;
    borderRightColor?: ResponsiveCssProp<'borderRightColor', 'color'>;
    borderRightWidth?: ResponsiveCssProp<'borderRightWidth', 'size'>;
    borderRightStyle?: ResponsiveCssProp<'borderRightStyle'>;
    borderTop?: ResponsiveCssProp<'borderTop'>;
    borderTopColor?: ResponsiveCssProp<'borderTopColor', 'color'>;
    borderTopWidth?: ResponsiveCssProp<'borderTopWidth', 'size'>;
    borderTopStyle?: ResponsiveCssProp<'borderTopStyle'>;
    borderBottom?: ResponsiveCssProp<'borderBottom'>;
    borderBottomColor?: ResponsiveCssProp<'borderBottomColor', 'color'>;
    borderBottomWidth?: ResponsiveCssProp<'borderBottomWidth', 'size'>;
    borderBottomStyle?: ResponsiveCssProp<'borderBottomStyle'>;
    borderRadius?: ResponsiveCssProp<'borderRadius', 'size'>;
    borderTopLeftRadius?: ResponsiveCssProp<'borderTopLeftRadius', 'size'>;
    borderTopRightRadius?: ResponsiveCssProp<'borderTopRightRadius', 'size'>;
    borderBottomLeftRadius?: ResponsiveCssProp<'borderBottomLeftRadius', 'size'>;
    borderBottomRightRadius?: ResponsiveCssProp<'borderBottomRightRadius', 'size'>;
    boxShadow?: ResponsiveCssProp<'boxShadow', 'shadow'>;
    container?: ResponsiveCssProp<'container'>;
    containerType?: ResponsiveCssProp<'containerType'>;
    containerName?: ResponsiveCssProp<'containerName'>;
    overflow?: ResponsiveCssProp<'overflow'>;
    overflowX?: ResponsiveCssProp<'overflowX'>;
    overflowY?: ResponsiveCssProp<'overflowY'>;
}
declare const View: React__default.ForwardRefExoticComponent<ViewProps & React__default.RefAttributes<HTMLElement>>;

declare type ThemeVariant = 'primary' | 'secondary' | 'tertiary' | 'contrast';
interface SapphireProviderProps extends Omit<SapphireViewStyleProps, 'backgroundColor' | 'color'> {
    locale?: 'en-US' | 'da-DK' | 'en-DK' | 'nb-NO' | 'en-NO' | 'sv-SE' | 'en-SE' | 'fi-FI' | 'en-FI' | 'sv-FI' | 'pl-PL' | 'en-PL' | 'de-DE' | 'en-DE' | (string & NonNullable<unknown>);
    /**
     * The value provided here is an import of a theme from @danske/sapphire-react.
     */
    theme: Theme;
    /**
     * The theme variation, in case the theme supports one
     *
     * @default 'primary'
     */
    themeVariant?: ThemeVariant;
    /**
     * Option for setting base z-index for Sapphire components. Use this 'overlayZIndex' to calculate
     * new z-index values of components using this new set baseline.
     * @default 100
     */
    overlayZIndex?: number;
    /**
     * A custom locale to be used only for date formatting in those components
     * that show dates.
     * You most likely do NOT need this. Use only if you explicitly want to
     * customise date formatting to be different than the language.
     */
    customDateFormatLocale?: string | null;
    children: React__default.ReactNode;
}
declare const useThemeContext: () => ThemeContextProps<Theme, ThemeVariant>;
declare const useCustomDateFormatLocale: () => DateFormatLocaleContextValue;
declare const SapphireProvider: (props: SapphireProviderProps) => JSX.Element;

declare type BreakpointKey = keyof typeof tokens.size.breakpoint;
declare type Breakpoints = {
    [key in BreakpointKey]: number;
};

declare type BaseResponsiveProp<T> = 
/**
 * Support design-token breakpoint values for both media queries and container queries.
 */
{
    [key in BreakpointKey]?: T;
} & {
    /**
     * Used when the resolved width is less than all breakpoints. Or if breakpoint
     * detection is not possible for any reason (like being run in SSR),
     */
    base: T;
};
declare type ViewportResponsiveProp<T> = BaseResponsiveProp<T> & {
    container?: never;
    [key: number]: never;
};
declare type ContainerResponsiveProp<T> = BaseResponsiveProp<T> & {
    /**
     * Provide a container name to target a specific container.
     * If set to `true`, the element will target the closest container.
     *
     * When a container name is provided, the string is used as a container query selector, as per
     * the documentation:
     * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries#naming_containment_contexts.
     * This functionality requires that a layout element has `containerName` property set to the same
     * value.
     */
    container: true | string;
    /**
     * Container queries support passing a number value as a breakpoint, since some components may
     * not take up the space required to hit the design-tokens breakpoints.
     */
    [key: number]: T;
};
declare type ResponsiveProp<T> = ViewportResponsiveProp<T> | ContainerResponsiveProp<T>;
declare type Responsive<T> = ResponsiveProp<T> | T;
/**
 * Represents either a single value or a set of different values for each breakpoint.
 * In both cases, the type of the value itself comes from a CSS property specified
 * by K and also a design token (a value from `theme`) of type T, if provided.
 * By default, it doesn't allow any theme value.
 */
declare type ResponsiveCssProp<K extends keyof CSSProperties, T extends keyof typeof tokens | '' = ''> = Responsive<CSSProperties[K] | (T extends keyof typeof tokens ? ValueOf<(typeof tokens)[T]> : never)>;
declare type ValueOf<T> = T[keyof T];
interface SapphireCommonStyleProps {
    margin?: ResponsiveCssProp<'margin', 'size'>;
    marginLeft?: ResponsiveCssProp<'marginLeft', 'size'>;
    marginRight?: ResponsiveCssProp<'marginRight', 'size'>;
    marginTop?: ResponsiveCssProp<'marginTop', 'size'>;
    marginBottom?: ResponsiveCssProp<'marginBottom', 'size'>;
    /**
     * Shorthand for marginLeft and marginRight
     */
    marginX?: ResponsiveCssProp<'marginBottom', 'size'>;
    /**
     * Shorthand for marginTop and marginBottom
     */
    marginY?: ResponsiveCssProp<'marginBottom', 'size'>;
    width?: ResponsiveCssProp<'width', 'size'>;
    height?: ResponsiveCssProp<'height', 'size'>;
    minWidth?: ResponsiveCssProp<'minWidth', 'size'>;
    minHeight?: ResponsiveCssProp<'minHeight', 'size'>;
    maxWidth?: ResponsiveCssProp<'maxWidth', 'size'>;
    maxHeight?: ResponsiveCssProp<'maxHeight', 'size'>;
    flex?: ResponsiveCssProp<'flex'>;
    flexGrow?: ResponsiveCssProp<'flexGrow'>;
    flexShrink?: ResponsiveCssProp<'flexShrink'>;
    flexBasis?: ResponsiveCssProp<'flexBasis'>;
    justifySelf?: ResponsiveCssProp<'justifySelf'>;
    alignSelf?: ResponsiveCssProp<'alignSelf'>;
    order?: ResponsiveCssProp<'order'>;
    gridArea?: ResponsiveCssProp<'gridArea'>;
    gridColumn?: ResponsiveCssProp<'gridColumn'>;
    gridRow?: ResponsiveCssProp<'gridRow'>;
    gridColumnStart?: ResponsiveCssProp<'gridColumnStart'>;
    gridColumnEnd?: ResponsiveCssProp<'gridColumnEnd'>;
    gridRowStart?: ResponsiveCssProp<'gridRowStart'>;
    gridRowEnd?: ResponsiveCssProp<'gridRowEnd'>;
    position?: ResponsiveCssProp<'position'>;
    zIndex?: ResponsiveCssProp<'zIndex'>;
    top?: ResponsiveCssProp<'top', 'size'>;
    bottom?: ResponsiveCssProp<'bottom', 'size'>;
    left?: ResponsiveCssProp<'left', 'size'>;
    right?: ResponsiveCssProp<'right', 'size'>;
    inset?: ResponsiveCssProp<'marginBottom', 'size'>;
    isHidden?: Responsive<boolean>;
}
declare type StyleHandler<T extends keyof CSSProperties> = keyof CSSProperties | {
    styleProp: T;
    convertValue: (value: any) => CSSProperties[T] | undefined;
} | {
    styleProps: T[];
};
declare type StyleHandlers<T extends {
    [key: string]: ResponsiveCssProp<any, any> | Responsive<any>;
} = SapphireCommonStyleProps> = {
    [key in keyof T]-?: StyleHandler<any>;
};

interface RegularStyleProps {
    style?: CSSProperties;
    className?: string;
}
interface UnsafeStyleProps {
    UNSAFE_className?: string;
    UNSAFE_style?: CSSProperties;
}
interface SapphireStyleProps extends SapphireCommonStyleProps, UnsafeStyleProps {
}
declare type FilteredProps<P, T> = Omit<P, keyof (T & RegularStyleProps & UnsafeStyleProps)>;
declare const useSapphireStyleProps: <P extends T, T extends SapphireCommonStyleProps = SapphireCommonStyleProps>({ UNSAFE_className, UNSAFE_style, ...props }: P & SapphireStyleProps, handlers?: StyleHandlers<T>) => {
    styleProps: {
        style: CSSProperties;
        className?: string;
    };
    filteredProps: FilteredProps<P, T>;
};

/**
 * There are some css properties related to text layout which
 * seem like they should be allowed to be customized, but only
 * in those components which are mean to render text.
 *
 * All the usual text-related properties (eg. font-size,
 * line-height, color etc.) are not allowed because those
 * belong to Sapphire itself.
 *
 * https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#other_properties_worth_looking_at
 */
declare type SapphireTextStyleProps = SapphireCommonStyleProps & {
    textAlign?: ResponsiveCssProp<'textAlign'>;
    textIndent?: ResponsiveCssProp<'textIndent'>;
    textOverflow?: ResponsiveCssProp<'textOverflow'>;
    textAlignLast?: ResponsiveCssProp<'textAlignLast'>;
    textJustify?: ResponsiveCssProp<'textJustify'>;
    overflowWrap?: ResponsiveCssProp<'overflowWrap'>;
    hyphens?: ResponsiveCssProp<'hyphens'>;
    whiteSpace?: ResponsiveCssProp<'whiteSpace'>;
    wordBreak?: ResponsiveCssProp<'wordBreak'>;
    overflow?: ResponsiveCssProp<'overflow'>;
    fontStyle?: Responsive<'normal' | 'italic'>;
};

declare type WithResolveSelectAllToKeysKeys<T extends {
    onSelectionChange?: (selection: Selection) => void;
}> = Omit<T, 'onSelectionChange'> & ({
    resolveSelectAllToKeys: true;
    onSelectionChange?: (keys: Exclude<Selection, 'all'>) => void;
} | {
    resolveSelectAllToKeys?: false;
    onSelectionChange?: (keys: Selection) => void;
});
interface SapphireSelectionManagerOptions {
    /**
     * By default, the behaviour of the selectAll method is to return `'all'` when the action is
     * performed. In this case, you can treat the all selection in any way you wish, but remember
     * that it refers to "all" items being selected, including those not yet loaded.
     *
     * This option allows you to change the behaviour of the selectAll method to return a detailed
     * selection array of keys when the action is performed.
     *
     * @default false
     */
    resolveSelectAllToKeys?: boolean;
    /**
     * Whether the entire collection component is disabled. It's something that's not currently
     * supported in react-aria, and we need to patch certain methods on selection manager to
     * make sure the interactions that invoke those methods are disabled.
     */
    isDisabled?: boolean;
}

/**
 * This file started off from the @react-aria's `useSingleSelectListState` implementation
 * which can be found here
 * https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/list/src/useSingleSelectListState.ts*
 *
 * At the time of writing, @react-aria did not directly support select or
 * combobox with multiple selection. The reason being that there is no such
 * ARIA pattern and some interactions of a multiselect can't be translated to a
 * native <select> which is what `useSelect` tries to emulate.
 *
 * Some relevant discussions can be found here:
 * https://github.com/adobe/react-spectrum/issues/2140
 * https://github.com/adobe/react-spectrum/discussions/2218
 */

declare type MultiSelectListState<T> = ListState<T> & {
    selectedItems: Node<T>[];
};

/**
 * This file started off from the @react-aria's `useSelectState` implementation
 * which can be found here
 * https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/select/src/useSelectState.ts
 *
 * At the time of writing, @react-aria did not directly support select or
 * combobox with multiple selection. The reason being that there is no such
 * ARIA pattern and some interactions of a multiselect can't be translated to a
 * native <select> which is what `useSelect` tries to emulate.
 *
 * Some relevant discussions can be found here:
 * https://github.com/adobe/react-spectrum/issues/2140
 * https://github.com/adobe/react-spectrum/discussions/2218
 */

declare type MultiSelectState<T> = MultiSelectListState<T> & MenuTriggerState & {
    /** Whether the select is currently focused. */
    readonly isFocused: boolean;
    /** Sets whether the select is focused. */
    setFocused(isFocused: boolean): void;
};

interface ListBoxPopoverProps<T> extends GlobalDomAttributes, SapphireStyleProps {
    state: SelectState<T> | MultiSelectState<T> | ComboBoxState<T>;
    listBoxProps: any;
    children: CollectionChildren<T>;
    selectWidth?: number;
    popoverRef: RefObject<HTMLDivElement>;
    triggerRef: RefObject<HTMLElement>;
    listBoxRef: RefObject<HTMLUListElement>;
    loadingState?: 'loading';
    loadingSkeletonRowsCount?: number;
    disableSelectedStyles?: boolean;
    emptyState?: ReactNode;
    isNonModal?: boolean;
    /**
     * @default "lg"
     */
    size?: 'lg' | 'md' | 'sm';
    /**
     * A ref to an input element that should be used for keyboard navigation
     * instead of the listbox itself.
     */
    connectedInputRef?: RefObject<HTMLInputElement>;
}
declare const ListBoxPopover: <T extends object>(props: ListBoxPopoverProps<T>) => JSX.Element | null;

/**
 * Checks if Sapphire theme context is provided. Meant to be used only inside Sapphire components.
 * @private
 */
declare const useThemeCheck: () => void;

declare const useScrollCheck: (ref: React__default.RefObject<HTMLElement>) => {
    isScrolled: boolean;
    isScrollable: boolean;
    scrollCheckProps: DOMAttributes$1<HTMLElement>;
};

/**
 * These are css properties related to text
 * which should be customizable only when we
 * explicitly allow it.
 *
 * https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#other_properties_worth_looking_at
 */
declare type TextStyleProps = SapphireTextStyleProps & {
    fontSize?: ResponsiveCssProp<'fontSize', 'size'>;
    fontWeight?: ResponsiveCssProp<'fontWeight', 'font'>;
    fontVariant?: ResponsiveCssProp<'fontVariant'>;
    fontKerning?: ResponsiveCssProp<'fontKerning'>;
    textTransform?: ResponsiveCssProp<'textTransform'>;
    textDecoration?: ResponsiveCssProp<'textDecoration'>;
    textShadow?: ResponsiveCssProp<'textShadow'>;
    textRendering?: ResponsiveCssProp<'textRendering'>;
    color?: ResponsiveCssProp<'color', 'color'>;
    lineHeight?: ResponsiveCssProp<'lineHeight', 'size'>;
    letterSpacing?: ResponsiveCssProp<'letterSpacing'>;
    wordSpacing?: ResponsiveCssProp<'wordSpacing'>;
};
declare const useTextStyleProps: (props: TextStyleProps) => {
    styleProps: {
        style: React.CSSProperties;
        className?: string;
    };
    filteredProps: FilteredProps<SapphireTextStyleProps, SapphireCommonStyleProps>;
};

declare const withTruthyZero: <T extends string | number | undefined>(value?: T | undefined) => value is Exclude<T, undefined>;

/**
 * Thin wrapper around useButton to fix a react-aria issue on touch devices.
 * https://github.com/adobe/react-spectrum/issues/1513
 */
declare const useButton: typeof useButton$1;

/**
 * Used to fix a react-aria issue on touch devices.
 * https://github.com/adobe/react-spectrum/issues/1513
 */
declare const usePreventTouchEnd: (ref: RefObject<Element | null>) => void;

declare type AlertDialogProps = AriaModalOverlayProps & GlobalDomAttributes & SapphireStyleProps & Pick<DialogProps, 'isOpen' | 'onClose'> & Omit<FeedbackMessageProps, 'heading' | 'actions'> & {
    /**
     *
     * @default "horizontal"
     */
    actionsOrientation?: 'vertical' | 'horizontal';
    /**
     * The elements that will be rendered in the footer of the dialog.
     */
    actions: ReactNode;
    /**
     * The title of the dialog.
     */
    heading: string;
};
/**
 * `AlertDialog` is a wrapper component around `Dialog` and allows you to interrupt the user's
 * experience to prompt them for important confirmations. (e.g. deleting something, confirming
 * an important or irreversible choice etc.).
 * Don't use them for less relevant of unnecessary confirmations.
 *
 * The title should be similar to the action that prompted the user to open it.
 */
declare const AlertDialog: React__default.ForwardRefExoticComponent<AriaModalOverlayProps & Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & SapphireStyleProps & Pick<DialogProps, "isOpen" | "onClose"> & Omit<FeedbackMessageProps, "heading" | "actions"> & {
    /**
     *
     * @default "horizontal"
     */
    actionsOrientation?: "horizontal" | "vertical" | undefined;
    /**
     * The elements that will be rendered in the footer of the dialog.
     */
    actions: ReactNode;
    /**
     * The title of the dialog.
     */
    heading: string;
} & React__default.RefAttributes<HTMLDivElement>>;

declare type AvatarProps = GlobalDomAttributes & SapphireStyleProps & {
    /**
     * @default 'md'
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * The decorative color of the avatar.
     * Defaults to a neutral color if none is provided.
     */
    color?: 'neutral' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
} & ({
    monogram: ReactNode;
    icon?: never;
} | {
    monogram?: never;
    icon: ReactNode;
});
declare const Avatar: ({ monogram, icon, color, size, ...props }: AvatarProps) => React__default.ReactElement;

interface BackdropProps extends GlobalDomAttributes, SapphireStyleProps {
    children: ReactNode;
    underlayProps?: HTMLAttributes<HTMLDivElement>;
    isVisible?: boolean;
}
declare const Backdrop: (props: BackdropProps) => JSX.Element;

interface BadgeProps extends GlobalDomAttributes, SapphireStyleProps {
    /**
     * The label of the badge.
     */
    children: React__default.ReactNode;
    /**
     * Whether the badge has a saturated or faint background. Applies only when
     * `color` is not decorative.
     */
    variant?: 'primary' | 'secondary';
    /**
     * The background color of the badge.
     * Can either be semantic or one of numbered decorative colors.
     *
     * @default 'positive'
     */
    color?: 'positive' | 'negative' | 'warning' | 'informative' | 'neutral' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
    /**
     * @default 'md'
     */
    size?: 'md' | 'sm';
    id?: string;
}
declare const Badge: (props: BadgeProps) => JSX.Element;

declare const SapphireBreakpointProvider: ({ breakpoints, children, }: {
    breakpoints?: Breakpoints | undefined;
    children: React__default.ReactNode;
}) => React__default.JSX.Element;

declare function useBreakpointContext(): BreakpointContextValue<Breakpoints> | null;

declare function useMatchedBreakpoints(): BreakpointKey[] | ['base'];

declare type ButtonProps<T extends 'a' | 'button'> = AriaButtonProps<T> & Omit<LinkDOMProps, 'routerOptions'> & SapphireStyleProps & GlobalDomAttributes & PressEvents & Pick<ButtonHTMLAttributes<T>, 'form' | 'formAction' | 'formEncType' | 'formMethod' | 'formNoValidate' | 'formTarget' | 'name' | 'value'> & {
    /**
     * @default 'md'
     */
    size?: 'lg' | 'md' | 'sm';
    /**
     * @default false
     */
    isLoading?: boolean;
    /**
     * The visual style of the button.
     * @default 'primary'
     */
    variant?: ButtonVariant;
    /**
     * @deprecated
     * Please use onPress instead, which has
     * [several UX
     *   improvements](https://react-spectrum.adobe.com/blog/building-a-button-part-1.html) over
     *   onClick. onPress* event handlers however don't give access to the native event, which can
     *   be an issue in rare cases where you need to call preventDefault for example. This is a
     *   temporary escape hatch for those cases until we can improve onPress* handlers to support
     *   those cases too.
     */
    UNSAFE_onClick?: React__default.MouseEventHandler;
} & (ButtonWithIconProps | ButtonWithoutIconProps);
declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'text' | 'danger' | 'danger-secondary' | 'danger-tertiary' | 'danger-text';
interface ButtonWithIconProps {
    /**
     * The icon placed either before or after the `label`, based on `iconAlign` prop.
     * */
    icon: React__default.ReactNode;
    /**
     * The icon placement relative to the `label`.
     * */
    iconAlign?: 'left' | 'right';
}
interface ButtonWithoutIconProps {
    icon?: never;
    iconAlign?: never;
}
declare const Button: React__default.ForwardRefExoticComponent<ButtonProps<"a" | "button"> & React__default.RefAttributes<_react_types_shared.FocusableRefValue<HTMLAnchorElement | HTMLButtonElement, HTMLAnchorElement | HTMLButtonElement>>>;

declare type ButtonGroupStretchType = 'none' | 'default' | 'autoVertical';
interface ButtonGroupProps extends GlobalDomAttributes, SapphireStyleProps, DOMProps$1 {
    /**
     * Alignment of buttons within the group.
     * @default "right"
     */
    align?: 'left' | 'center' | 'right';
    /**
     * Controls stretching of the contents.
     *
     * `none` - the children will not stretch and will respect the alignment set with the align prop.
     *
     * `default` - the children will stretch to take full width. If the children overflow, they will be wrapped vertically.
     *
     * `autoVertical` - same behaviour as `default`, but if there is more than 3 children, they will be wrapped vertically even if they don't overflow.
     *
     * @default "none"
     */
    stretch?: ButtonGroupStretchType;
    children: React__default.ReactNode;
    /**
     * Spacing between the buttons.
     * @default 'md'
     */
    spacing?: 'lg' | 'md' | 'sm' | 'xs';
    /**
     *
     * @default "horizontal"
     */
    orientation?: 'vertical' | 'horizontal';
}
/**
 * ButtonGroup is a utility component which ensures consistent spacing between buttons
 * All children must be of type Button. Icon buttons cannot be mixed with standard buttons.
 */
declare const ButtonGroup: React__default.ForwardRefExoticComponent<ButtonGroupProps & React__default.RefAttributes<HTMLDivElement>>;

declare type OriginalOnChange$3<T extends DateValue> = NonNullable<CalendarStateOptions$1<T>['onChange']>;
declare type CalendarView = 'days' | 'months' | 'years';
declare type CalendarGranularity = 'day' | 'month' | 'year';
declare type CalendarStateOptions<T extends DateValue, P extends string> = Pick<CalendarStateOptions$1<T>, ValueBasePropsKeys | 'locale' | 'createCalendar' | 'selectionAlignment' | 'defaultFocusedValue'> & {
    /**
     * Called whenever the value changes.
     * Second parameter is present if the selected date was predefined.
     */
    onChange?: (value: Parameters<OriginalOnChange$3<T>>[0], predefinedDate?: P) => ReturnType<OriginalOnChange$3<T>>;
    /**
     * Controls the calendar's view (day, month, year).
     */
    view?: CalendarView;
    /**
     * The view of the calendar when it first mounts (uncontrolled).
     */
    defaultView?: CalendarView;
    /**
     * Handler that is called when the view is changed.
     */
    onViewChange?: (value: CalendarView) => void;
    granularity?: CalendarGranularity;
};

interface PredefinedDate {
    label: string;
    date: DateValue;
}
interface CalendarProps<T extends DateValue = DateValue, P extends string = string> extends SapphireStyleProps, GlobalDomAttributes, Pick<AriaCalendarProps<T>, 'minValue' | 'maxValue' | 'isDateUnavailable' | 'isReadOnly' | 'autoFocus' | 'focusedValue' | 'onFocusChange' | 'isDisabled' | BaseComponentKeys>, Omit<CalendarStateOptions<T, P>, 'createCalendar'> {
    /**
     * This callback also gives you the information if the selected date was a
     * predefined date according to the `predefinedDates` prop.
     */
    onChange?: CalendarStateOptions<DateValue, P>['onChange'];
    /**
     * Whether week numbers are visible as a first column
     */
    showWeekNumbers?: boolean;
    /**
     * A set of predefined dates the user can more conveniently select.
     */
    predefinedDates?: Record<P, PredefinedDate>;
    /**
     * If the calendar should always show a fixed number of rows regardless of
     * the current month's number of weeks. This helps preserve the calendar
     * height as the user scrolls through months.
     * @default false
     */
    showFixedWeeks?: boolean;
    /**
     * The calendar size.
     * @default 'lg'
     */
    size?: 'md' | 'lg';
}
/**
 * Displays a calendar and allows users to select a single date. It displays a grid of days in one
 * month, by default, and the user can navigate to previous and next months. It's also possible
 * to navigate to months and years view, to quickly jump to a date far away from the focused date.
 */
declare const Calendar: <T extends DateValue = DateValue, P extends string = string>({ showWeekNumbers, predefinedDates, showFixedWeeks, size, ...props }: Omit<CalendarProps<T, P>, "locale">) => JSX.Element;

declare type OriginalOnChange$2<T extends DateValue> = NonNullable<RangeCalendarStateOptions$1<T>['onChange']>;
declare type RangeCalendarStateOptions<T extends DateValue, P extends string> = Pick<RangeCalendarStateOptions$1<T>, ValueBasePropsKeys | 'locale' | 'createCalendar' | 'defaultFocusedValue' | 'allowsNonContiguousRanges' | 'visibleDuration'> & {
    onChange?: (value: Parameters<OriginalOnChange$2<T>>[0], predefinedRange?: P) => ReturnType<OriginalOnChange$2<T>>;
};

interface PredefinedDateRange {
    label: string;
    dateRange: {
        start: DateValue;
        end: DateValue;
    };
}
interface RangeCalendarProps<T extends DateValue = DateValue, P extends string = string> extends SapphireStyleProps, GlobalDomAttributes, Pick<AriaRangeCalendarProps<T>, 'autoFocus' | 'focusedValue' | 'onFocusChange' | 'minValue' | 'maxValue' | 'isDateUnavailable' | InputBaseKeys | ValueBasePropsKeys | 'autoFocus' | BaseComponentKeys> {
    /**
     * This callback also gives you the information if the selected range was a
     * predefined date according to the `predefinedRanges` prop.
     */
    onChange?: RangeCalendarStateOptions<DateValue, P>['onChange'];
    /**
     * Whether week numbers are visible as a first column
     */
    showWeekNumbers?: boolean;
    /**
     * Whether to show two months at the same time.
     */
    showTwoMonths?: boolean;
    /**
     * A set of predefined date ranges the user can more conveniently select.
     */
    predefinedRanges?: Record<P, PredefinedDateRange>;
    /**
     * Whether range is allowed to span unavailable dates.
     */
    allowUnavailableDatesWithinRange?: boolean;
    /**
     * If the calendar should always show a fixed number of rows regardless of
     * the current month's number of weeks. This helps preserve the calendar
     * height as the user scrolls through months.
     * @default false
     */
    showFixedWeeks?: boolean;
    /**
     * @default 'lg'
     */
    size?: 'md' | 'lg';
}
declare const _RangeCalendar: <T extends DateValue = DateValue, P extends string = string>({ showWeekNumbers, showTwoMonths, allowUnavailableDatesWithinRange, showFixedWeeks, predefinedRanges, size, ...props }: RangeCalendarProps<T, P>, forwardedRef: React__default.ForwardedRef<HTMLDivElement>) => JSX.Element;
/**
 * Displays a calendar and allow users to select a consecutive range of dates.
 * One or two months can be visible at the same time.
 */
declare const RangeCalendar: <T extends DateValue, P extends string>(props: RangeCalendarProps<T, P> & {
    ref?: React__default.ForwardedRef<HTMLDivElement> | undefined;
}) => ReturnType<typeof _RangeCalendar>;

declare type CheckboxProps = Pick<CheckboxProps$1, 'children' | 'isIndeterminate' | AriaTogglePropsKeys | AriaValidationPropsKeys | 'id' | FocusablePropsKeys | InputBaseKeys | 'name' | BaseComponentKeys> & SapphireStyleProps & GlobalDomAttributes & {
    /**
     * Whether user input is required on the input before form submission
     */
    isRequired?: boolean;
    /**
     * To visually indicate if this field is required or optional.
     * @default false
     */
    necessityIndicator?: boolean;
    /**
     * If set, the checkbox becomes invalid, with or without an error message.
     */
    error?: ReactNode;
    /**
     * If set, the checkbox displays note text below the main label.
     */
    note?: ReactNode;
    /**
     * @default 'lg'
     */
    size?: 'lg' | 'md';
    /**
     * Internal slot prop to allow for composition with RAC components.
     * We might decide to offer the same composition API for Sapphire components in the future,
     * but until that's a clear direction, we will keep this internal.
     */
    INTERNAL_slot?: CheckboxProps$1['slot'];
};

declare const _Checkbox: React$1.ComponentType<Omit<Pick<react_aria_components.CheckboxProps, "value" | "name" | "children" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-details" | "id" | "onBlur" | "onFocus" | "onFocusChange" | "onKeyUp" | "onKeyDown" | "autoFocus" | "isReadOnly" | "isDisabled" | "onChange" | "isSelected" | "aria-errormessage" | "defaultSelected" | "aria-controls" | "isIndeterminate"> & SapphireStyleProps & Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & {
    isRequired?: boolean | undefined;
    necessityIndicator?: boolean | undefined;
    error?: React$1.ReactNode;
    note?: React$1.ReactNode;
    size?: "md" | "lg" | undefined;
    INTERNAL_slot?: string | null | undefined;
} & React$1.RefAttributes<_react_types_shared.FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>, `INTERNAL_${string}`>>;

interface CheckboxGroupProps extends Pick<AriaCheckboxGroupProps, BaseComponentKeys | ValueBasePropsKeys | InputBaseKeys | 'name' | 'label' | ValidationIsRequiredKey | FocusEventsKeys>, GlobalDomAttributes, SapphireStyleProps {
    /**
     * The layout of the checkbox items
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * A HelpButton to render next to the label
     */
    contextualHelp?: React__default.ReactNode;
    /**
     * {@Link Checkbox} elements to be rendered within the group.
     */
    children: React__default.ReactNode;
    /**
     * If set, the checkbox group becomes invalid with this associated error message.
     */
    error?: ReactNode;
    /**
     * A note to show below the checkbox group.
     * If the checkbox group has an error message, this note will be replaced by that.
     * Use {@Link Field.Note} to render the note.
     */
    note?: ReactNode;
    /**
     * @default 'lg'
     */
    size?: 'lg' | 'md';
    /**
     * To visually indicate if this field is required or optional.
     * @default false
     */
    necessityIndicator?: boolean;
    /**
     * Places the label either above (default) or on the side of the control.
     * @default 'above'
     */
    labelPlacement?: 'side' | 'above';
}
declare const CheckboxGroup: React__default.ForwardRefExoticComponent<CheckboxGroupProps & React__default.RefAttributes<HTMLDivElement>>;

declare type HelpButtonProps = GlobalDomAttributes & SapphireStyleProps & AriaLabelingProps & OverlayTriggerProps$1 & {
    /**
     *
     * The type of contextual help which determines the icon shown.
     *
     * Use "info" for brief, contextual supplemental information. The content
     * inside should have an instructive tone.
     *
     * Use "help" variant to signal more in-depth guidance about a task or UI,
     * this may include links or images or other helpful media. The content
     * inside should have a helpful tone.
     *
     * @default 'info'
     */
    variant?: 'info' | 'help';
    /**
     * The label for the trigger of the contextual help dialog.
     * This will NOT be rendered on the screen, but it is required
     * for accessibility reasons.
     */
    'aria-label': string;
    /**
     * The header inside the popup.
     * This is strongly recommended because having a title to the contextual
     * help content always creates a better experience.
     *
     * Most often you want to use the {@link HelpButtonHeader}.
     */
    contentHeader?: React__default.ReactNode;
    /**
     * The content inside the popup.
     */
    contentBody: React__default.ReactNode;
    /**
     * The footer section of the dialog. This should ideally contain links to
     * more related information.
     */
    contentFooter?: React__default.ReactNode;
    /**
     * Placement of contextual help popover relative to the icon that triggers it.
     */
    placement?: AriaPositionProps['placement'];
    /**
     * If true, the contextual help popover won't have a max width.
     * @default false
     */
    noMaxWidth?: boolean;
};

declare const _HelpButton: React$1.ForwardRefExoticComponent<Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & SapphireStyleProps & _react_types_shared.AriaLabelingProps & react_stately.OverlayTriggerProps & {
    variant?: "help" | "info" | undefined;
    'aria-label': string;
    contentHeader?: React$1.ReactNode;
    contentBody: React$1.ReactNode;
    contentFooter?: React$1.ReactNode;
    placement?: react_aria.Placement | undefined;
    noMaxWidth?: boolean | undefined;
} & React$1.RefAttributes<_react_types_shared.FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> & {
    ContentHeader: ({ children, }: {
        children: React$1.ReactNode;
    }) => React$1.JSX.Element;
};

declare type OriginalOnChange$1<T extends DateValue> = NonNullable<DatePickerStateOptions$1<T>['onChange']>;
declare type DatePickerStateOptions<T extends DateValue, P extends string, O extends OriginalOnChange$1<T> = OriginalOnChange$1<T>> = Pick<DatePickerStateOptions$1<T>, DateFieldBaseKeys | 'isInvalid'> & {
    onChange?: (value: Parameters<O>[0] | null, predefinedDate?: P) => ReturnType<O>;
};

declare type DateFieldProps<T extends DateValue$1, P extends string> = Pick<AriaDatePickerProps<T>, DateFieldBaseKeys | ValueBasePropsKeys | 'name' | BaseComponentKeys | OverlayTriggerPropsKeys> & SapphireStyleProps & GlobalDomAttributes & Pick<CalendarProps, 'granularity'> & {
    /**
     * Handler that is called when the value changes.
     */
    onChange?: DatePickerStateOptions<DateValue$1, P>['onChange'];
    /**
     * Whether week numbers are visible as a first column
     */
    showWeekNumbers?: boolean;
    /**
     * Whether the input should render as having an error and an error message.
     * This also sets the appropriate `aria` attributes on the input.
     *
     * A `boolean` sets the error state. Can be paired with the "note" prop with Field.Note variant="error"
     * A `ReactNode` sets the error state with an additional error message.
     *
     * **An error message is strongly recommended because an error should
     * always have an explanation about how to fix it.**
     */
    error?: boolean | ReactNode;
    /**
     * A note to show below the input.
     * If the input has an error message, this note will be replaced by that.
     * Use {@Link Field.Note} to render the note.
     */
    note?: ReactNode;
    /**
     * A HelpButton to render next to the label.
     */
    contextualHelp?: ReactNode;
    /**
     * If it should hide the "clear" button when input is not empty.
     *
     * @default false
     */
    noClearButton?: boolean;
    /**
     * If it should hide the "calendar" button
     *
     * @default false
     */
    noCalendarButton?: boolean;
    /**
     * @default 'lg'
     */
    size?: 'lg' | 'md';
    /**
     * To visually indicate if this field is required or optional.
     * @default false
     */
    necessityIndicator?: boolean;
    /**
     * Places the label either above (default) or on the side of the control.
     * @default 'above'
     */
    labelPlacement?: 'side' | 'above';
    /**
     * A set of predefined dates that the user can more conveniently select.
     */
    predefinedDates?: Record<P, PredefinedDate>;
};
/**
 * A date field allows users to enter or edit date values using the keyboard
 * and/or mouse.
 */
declare const DateField: <T extends DateValue$1, P extends string>(props: Pick<AriaDatePickerProps<T>, "value" | "name" | "label" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-details" | "onBlur" | "onFocus" | "onFocusChange" | "onKeyUp" | "onKeyDown" | "autoFocus" | "isOpen" | "defaultOpen" | "onOpenChange" | "isReadOnly" | "isDisabled" | "defaultValue" | "onChange" | "isRequired" | "minValue" | "maxValue" | "placeholderValue" | "shouldForceLeadingZeros" | "isDateUnavailable"> & SapphireStyleProps & Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & Pick<CalendarProps<_internationalized_date.DateValue, string>, "granularity"> & {
    /**
     * Handler that is called when the value changes.
     */
    onChange?: ((value: DateValue$1 | null, predefinedDate?: P | undefined) => void) | undefined;
    /**
     * Whether week numbers are visible as a first column
     */
    showWeekNumbers?: boolean | undefined;
    /**
     * Whether the input should render as having an error and an error message.
     * This also sets the appropriate `aria` attributes on the input.
     *
     * A `boolean` sets the error state. Can be paired with the "note" prop with Field.Note variant="error"
     * A `ReactNode` sets the error state with an additional error message.
     *
     * **An error message is strongly recommended because an error should
     * always have an explanation about how to fix it.**
     */
    error?: boolean | ReactNode;
    /**
     * A note to show below the input.
     * If the input has an error message, this note will be replaced by that.
     * Use {@Link Field.Note} to render the note.
     */
    note?: ReactNode;
    /**
     * A HelpButton to render next to the label.
     */
    contextualHelp?: ReactNode;
    /**
     * If it should hide the "clear" button when input is not empty.
     *
     * @default false
     */
    noClearButton?: boolean | undefined;
    /**
     * If it should hide the "calendar" button
     *
     * @default false
     */
    noCalendarButton?: boolean | undefined;
    /**
     * @default 'lg'
     */
    size?: "md" | "lg" | undefined;
    /**
     * To visually indicate if this field is required or optional.
     * @default false
     */
    necessityIndicator?: boolean | undefined;
    /**
     * Places the label either above (default) or on the side of the control.
     * @default 'above'
     */
    labelPlacement?: "above" | "side" | undefined;
    /**
     * A set of predefined dates that the user can more conveniently select.
     */
    predefinedDates?: Record<P, PredefinedDate> | undefined;
} & {
    ref?: React__default.RefObject<HTMLDivElement> | undefined;
}) => React__default.ReactElement;

declare type OriginalOnChange<T extends DateValue> = NonNullable<DateRangePickerStateOptions$1<T>['onChange']>;
declare type DateRangePickerStateOptions<T extends DateValue, P extends string, O extends OriginalOnChange<T> = OriginalOnChange<T>> = Pick<DateRangePickerStateOptions$1<T>, 'allowsNonContiguousRanges' | 'isDateUnavailable'> & {
    onChange?: (value: Parameters<O>[0] | null, predefinedRange?: P) => ReturnType<O>;
};

declare type DateRangeFieldProps<T extends DateValue$1, P extends string> = Pick<AriaDateRangePickerProps<T>, 'endName' | 'startName' | DateFieldBaseKeys | ValueBasePropsKeys | BaseComponentKeys | OverlayTriggerPropsKeys> & SapphireStyleProps & GlobalDomAttributes & {
    /**
     * Handler that is called when the value changes.
     */
    onChange?: DateRangePickerStateOptions<DateValue$1, P>['onChange'];
    /**
     * Whether week numbers are visible as a first column
     */
    showWeekNumbers?: boolean;
    /**
     * Whether to show two months at the same time.
     */
    showTwoMonths?: boolean;
    /**
     * A set of predefined date ranges the user can more conveniently select.
     */
    predefinedRanges?: Record<P, PredefinedDateRange>;
    /**
     * Whether range is allowed to span unavailable dates.
     * @default false
     */
    allowUnavailableDatesWithinRange?: boolean;
    /**
     * Whether the input should render as having an error and an error message.
     * This also sets the appropriate `aria` attributes on the input.
     *
     * A `boolean` sets the error state. Can be paired with the "note" prop with Field.Note variant="error"
     * A `ReactNode` sets the error state with an additional error message.
     *
     * **An error message is strongly recommended because an error should
     * always have an explanation about how to fix it.**
     */
    error?: boolean | ReactNode;
    /**
     * A note to show below the input.
     * If the input has an error message, this note will be replaced by that.
     * Use {@Link Field.Note} to render the note.
     */
    note?: ReactNode;
    /**
     * A HelpButton to render next to the label.
     */
    contextualHelp?: ReactNode;
    /**
     * If it should hide the "clear" button when input is not empty.
     *
     * @default false
     */
    noClearButton?: boolean;
    /**
     * If it should hide the "calendar" button
     *
     * @default false
     */
    noCalendarButton?: boolean;
    /**
     * Locale (eg. "da-DK", "en-US", "sv-SE" etc.)
     *
     * THIS IS A TEMPORARY SOLUTION FOR THE INTERFACE OF LOCALIZATION. THIS API
     * MAY CHANGE OR EVEN BE REPLACED WITH SOMETHING DIFFERENT IN A FUTURE VERSION.
     */
    locale?: string;
    /**
     * @default 'lg'
     */
    size?: 'lg' | 'md';
    /**
     * To visually indicate if this field is required or optional.
     * @default false
     */
    necessityIndicator?: boolean;
    /**
     * Places the label either above (default) or on the side of the control.
     * @default 'above'
     */
    labelPlacement?: 'side' | 'above';
};
/**
 * A date range field allows users to select a range of dates by selecting a to and a from date with keyboard and/or mouse.
 */
declare const DateRangeField: <T extends DateValue$1, P extends string>(props: Pick<AriaDateRangePickerProps<T>, "value" | "label" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-details" | "onBlur" | "onFocus" | "onFocusChange" | "onKeyUp" | "onKeyDown" | "autoFocus" | "isOpen" | "defaultOpen" | "onOpenChange" | "isReadOnly" | "isDisabled" | "defaultValue" | "onChange" | "isRequired" | "minValue" | "maxValue" | "placeholderValue" | "shouldForceLeadingZeros" | "isDateUnavailable" | "startName" | "endName"> & SapphireStyleProps & Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & {
    /**
     * Handler that is called when the value changes.
     */
    onChange?: ((value: react_aria.RangeValue<DateValue$1> | null, predefinedRange?: P | undefined) => void) | undefined;
    /**
     * Whether week numbers are visible as a first column
     */
    showWeekNumbers?: boolean | undefined;
    /**
     * Whether to show two months at the same time.
     */
    showTwoMonths?: boolean | undefined;
    /**
     * A set of predefined date ranges the user can more conveniently select.
     */
    predefinedRanges?: Record<P, PredefinedDateRange> | undefined;
    /**
     * Whether range is allowed to span unavailable dates.
     * @default false
     */
    allowUnavailableDatesWithinRange?: boolean | undefined;
    /**
     * Whether the input should render as having an error and an error message.
     * This also sets the appropriate `aria` attributes on the input.
     *
     * A `boolean` sets the error state. Can be paired with the "note" prop with Field.Note variant="error"
     * A `ReactNode` sets the error state with an additional error message.
     *
     * **An error message is strongly recommended because an error should
     * always have an explanation about how to fix it.**
     */
    error?: boolean | ReactNode;
    /**
     * A note to show below the input.
     * If the input has an error message, this note will be replaced by that.
     * Use {@Link Field.Note} to render the note.
     */
    note?: ReactNode;
    /**
     * A HelpButton to render next to the label.
     */
    contextualHelp?: ReactNode;
    /**
     * If it should hide the "clear" button when input is not empty.
     *
     * @default false
     */
    noClearButton?: boolean | undefined;
    /**
     * If it should hide the "calendar" button
     *
     * @default false
     */
    noCalendarButton?: boolean | undefined;
    /**
     * Locale (eg. "da-DK", "en-US", "sv-SE" etc.)
     *
     * THIS IS A TEMPORARY SOLUTION FOR THE INTERFACE OF LOCALIZATION. THIS API
     * MAY CHANGE OR EVEN BE REPLACED WITH SOMETHING DIFFERENT IN A FUTURE VERSION.
     */
    locale?: string | undefined;
    /**
     * @default 'lg'
     */
    size?: "md" | "lg" | undefined;
    /**
     * To visually indicate if this field is required or optional.
     * @default false
     */
    necessityIndicator?: boolean | undefined;
    /**
     * Places the label either above (default) or on the side of the control.
     * @default 'above'
     */
    labelPlacement?: "above" | "side" | undefined;
} & {
    ref?: React__default.RefObject<HTMLDivElement> | undefined;
}) => React__default.ReactElement;

interface DateSegmentProps {
    segment: DateSegment;
    state: DateFieldState;
}

/**
 * The helpers in this file are meant for external use.
 * We're exporting these.
 */

declare const isEndDateBeforeStartDate: (dateRange?: RangeValue<DateValue$1> | null) => boolean;
declare const isDateOutsideValidRange: (value?: DateValue$1 | null, minValue?: DateValue$1 | null, maxValue?: DateValue$1 | null) => 'before' | 'after' | false;
declare const rangeContainsUnavailableDate: (dateRange: RangeValue<DateValue$1> | null, isDateUnavailable?: ((date: DateValue$1) => boolean) | undefined) => boolean;

declare type DialogProps = AriaModalOverlayProps & AriaDialogProps & SapphireStyleProps & GlobalDomAttributes & {
    children: ReactNode;
    size?: 'xs' | 'sm' | 'md' | 'lg';
    /**
     * Whether the dialog is currently open.
     */
    isOpen: boolean;
    /** Handler that is called when the dialog should close. */
    onClose?: () => void;
    /**
     * Callback for when the modal exit transition is done and not visible
     * anymore. This happens a short while after the `isOpen` state is set to
     * `false`.
     */
    onCloseTransitionDone?: () => void;
    /**
     * Whether to close the dialog when the backdrop is clicked/touched.
     * @default false
     */
    isDismissable?: boolean;
    /**
     * Whether pressing the escape key to close the dialog should be disabled.
     * @default false
     */
    isKeyboardDismissDisabled?: boolean;
    /**
     * Whether the dialog has a default padding or not. This is necessary only
     * if not using the `ModalLayout` inside the dialog.
     */
    withPadding?: boolean;
    /** @deprecated Prop is not applicable to dialogs and was included by mistake and will be removed in a future major version. */
    shouldCloseOnBlur?: boolean;
    /** @deprecated Prop is not applicable to dialogs and was included by mistake and will be removed in a future major version. */
    shouldCloseOnInteractOutside?: (element: Element) => boolean;
};
declare const Dialog: React__default.ForwardRefExoticComponent<AriaModalOverlayProps & AriaDialogProps & SapphireStyleProps & Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & {
    children: ReactNode;
    size?: "xs" | "sm" | "md" | "lg" | undefined;
    /**
     * Whether the dialog is currently open.
     */
    isOpen: boolean;
    /** Handler that is called when the dialog should close. */
    onClose?: (() => void) | undefined;
    /**
     * Callback for when the modal exit transition is done and not visible
     * anymore. This happens a short while after the `isOpen` state is set to
     * `false`.
     */
    onCloseTransitionDone?: (() => void) | undefined;
    /**
     * Whether to close the dialog when the backdrop is clicked/touched.
     * @default false
     */
    isDismissable?: boolean | undefined;
    /**
     * Whether pressing the escape key to close the dialog should be disabled.
     * @default false
     */
    isKeyboardDismissDisabled?: boolean | undefined;
    /**
     * Whether the dialog has a default padding or not. This is necessary only
     * if not using the `ModalLayout` inside the dialog.
     */
    withPadding?: boolean | undefined;
    /** @deprecated Prop is not applicable to dialogs and was included by mistake and will be removed in a future major version. */
    shouldCloseOnBlur?: boolean | undefined;
    /** @deprecated Prop is not applicable to dialogs and was included by mistake and will be removed in a future major version. */
    shouldCloseOnInteractOutside?: ((element: Element) => boolean) | undefined;
} & React__default.RefAttributes<HTMLDivElement>>;

interface ConfirmationDialogProps extends Pick<DialogProps, 'onClose' | 'onCloseTransitionDone' | 'isOpen'> {
    /**
     * Textual heading of the dialog.
     */
    heading: React__default.ReactNode;
    /**
     * The message shown in the body of the dialog.
     */
    content: React__default.ReactNode;
    onPrimaryAction: ButtonProps<'button'>['onPress'];
    onSecondaryAction: ButtonProps<'button'>['onPress'];
    primaryActionLabel: string;
    secondaryActionLabel: string;
}
declare const ConfirmationDialog: ({ heading, content, onPrimaryAction, onSecondaryAction, primaryActionLabel, secondaryActionLabel, ...otherProps }: ConfirmationDialogProps) => JSX.Element;

interface DangerDialogProps extends Pick<DialogProps, 'onClose' | 'onCloseTransitionDone' | 'isOpen'> {
    /**
     * Textual heading of the dialog.
     */
    heading: React__default.ReactNode;
    /**
     * The message shown in the body of the dialog.
     */
    content: React__default.ReactNode;
    onPrimaryAction: ButtonProps<'button'>['onPress'];
    onSecondaryAction: ButtonProps<'button'>['onPress'];
    primaryActionLabel: string;
    secondaryActionLabel: string;
}
declare const DangerDialog: ({ heading, content, onPrimaryAction, onSecondaryAction, primaryActionLabel, secondaryActionLabel, ...otherProps }: DangerDialogProps) => JSX.Element;

interface ModalLayoutSectionProps extends DOMProps$1, GlobalDomAttributes, Pick<SapphireStyleProps, 'UNSAFE_style' | 'UNSAFE_className'> {
    title: React__default.ReactNode;
    children: React__default.ReactNode;
    isFormSection?: boolean;
}

interface ModalLayoutFooterProps extends DOMProps$1, GlobalDomAttributes, Pick<SapphireStyleProps, 'UNSAFE_style' | 'UNSAFE_className'> {
    children?: React__default.ReactNode;
}

interface ModalLayoutBodyProps extends DOMProps$1, GlobalDomAttributes, DOMAttributes$1<HTMLDivElement>, Pick<SapphireStyleProps, 'UNSAFE_style' | 'UNSAFE_className'> {
    children: React__default.ReactNode;
    noPadding?: boolean;
}

interface ModalLayoutHeaderProps extends DOMProps$1, GlobalDomAttributes, Pick<SapphireStyleProps, 'UNSAFE_style' | 'UNSAFE_className'> {
    /**
     * Main heading of the modal.
     */
    heading: React__default.ReactNode;
    /**
     * Optional subheading, rendered below the heading, in a secondary-looking
     * style.
     */
    subheading?: React__default.ReactNode;
    /**
     * Slot for optional back button, rendered to the left of heading and subheading.
     * Useful for modals with inner navigation.
     *
     * Use {@link IconButton} to render the content.
     */
    backButton?: React__default.ReactNode;
    /**
     * Slot for optional action button, rendered next to the close button.
     * Useful for actions or menus on a modal.
     *
     * Use {@link IconButton} to render the content.
     */
    actionButton?: React__default.ReactNode;
    /**
     * Whether the close icon button should not be rendered. Useful to avoid
     * redundant actions when there is already a button in for closing/canceling
     * the modal.
     * @default false
     */
    hideCloseButton?: boolean;
    /**
     * Slot for optional extra content (such as a {@link Badge}) rendered under the heading and subheading.
     */
    extra?: React__default.ReactNode;
    /**
     * Slot for optional progress indicator, rendered along the bottom of the header.
     * Use {@link ProgressIndicator} to render the content.
     */
    progressIndicator?: React__default.ReactNode;
}

interface ModalLayoutProps extends DOMProps$1, Pick<AriaLabelingProps, AriaLabelingPropsKeys>, SapphireStyleProps, GlobalDomAttributes {
    /**
     * Content placed in the "header" slot. Typically, a {@link ModalLayout.Header} element.
     *
     * @example
     * ```
     * <ModalLayout
     *   header={
     *     <ModalLayout.Header heading="Heading" subheading="Subheading" />
     *   }
     * />
     * ```
     */
    header: React__default.ReactNode;
    /**
     * Scrollable content placed in the "body" slot. Typically, a {@link ModalLayout.Body}
     * element.
     *
     * @example
     * ```
     * <ModalLayout body={<ModalLayout.Body>...</ModalLayout.Body>} />
     * ```
     */
    body: React__default.ReactNode;
    /**
     * Content placed in the "footer" slot. Typically, a {@link ModalLayout.Footer} element.
     *
     * @example
     * ```
     * <ModalLayout
     *   footer={
     *     <ModalLayout.Footer>
     *       <ButtonGroup>...</ButtonGroup>
     *     </ModalLayout.Footer>
     *   }
     * />
     * ```
     */
    footer?: React__default.ReactNode;
}

interface ModalLayoutContextProps {
    /**
     * Props that should be applied to the modal title, to make the entire modal labeled by it.
     */
    titleProps: DOMAttributes$1<FocusableElement>;
    /**
     * Called when the close button in the header is pressed.
     */
    onClose?: () => void;
}
/**
 * Rendered in modal components to provide modal props that are needed in modal layout parts.
 * @internal
 */
declare const ModalLayoutContext: React__default.Context<ModalLayoutContextProps>;

declare const ModalLayout: React$1.ForwardRefExoticComponent<ModalLayoutProps & React$1.RefAttributes<HTMLDivElement>> & {
    Header: React$1.ForwardRefExoticComponent<ModalLayoutHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
    Body: React$1.ForwardRefExoticComponent<ModalLayoutBodyProps & React$1.RefAttributes<HTMLDivElement>>;
    Footer: React$1.ForwardRefExoticComponent<ModalLayoutFooterProps & React$1.RefAttributes<HTMLDivElement>>;
    Section: React$1.ForwardRefExoticComponent<ModalLayoutSectionProps & React$1.RefAttributes<HTMLFieldSetElement>>;
};

/**
 * Allows for rendering a custom title for the dialog, to have the dialog
 * labeled by the title, when the default `Dialog.Header` can't be used.
 * Should not be used when the default Dialog.Header is used.
 * @param children render prop that accepts dom props to be applied on the title element
 */
declare const DialogTitle: ({ children, }: {
    children: (titleProps: ModalLayoutContextProps['titleProps']) => React__default.ReactNode;
}) => JSX.Element;

declare type FeedbackMessageVariant = 'success' | 'error' | 'warning' | 'informative' | 'neutral';
interface FeedbackMessageProps extends GlobalDomAttributes, SapphireStyleProps {
    /**
     * Heading content, rendered in a sapphire Heading component.
     */
    heading: React__default.ReactNode | string;
    /**
     * The type of message.
     * The 'error' and 'success' are meant to attract more attention.
     *
     * @default 'neutral'
     */
    variant?: FeedbackMessageVariant;
    /**
     * Optional icon to override the default icon for the message type.
     */
    icon?: React__default.ReactNode;
    /**
     * Optional description, rendered as a section below heading.
     */
    body?: React__default.ReactNode;
    /**
     *  Optional actions, rendered at the bottom. Use {@link ButtonGroup}
     *  for the content.
     */
    actions?: React__default.ReactNode;
}
/**
 * Implements layout and style of a feedback message.
 */
declare const FeedbackMessage: ({ heading, body, actions, variant, icon, ...otherProps }: FeedbackMessageProps) => JSX.Element;

declare type FieldsetProps = GlobalDomAttributes & SapphireStyleProps & {
    /**
     * A label that describes the groups of fields.
     * The label is required because a fieldset that is not labelled is not
     * better than separate labelled fields.
     */
    label?: ReactNode;
    /**
     * Whether the input is disabled.
     * */
    isDisabled?: boolean;
    /**
     * Whether the input is required.
     * */
    isRequired?: boolean;
    /**
     * Whether the input should render as having an error and an error message.
     * This also sets the appropriate `aria` attributes on the input.
     *
     * A `boolean` sets the error state. Can be paired with the "note" prop with Field.Note variant="error"
     * A `ReactNode` sets the error state with an additional error message.
     *
     * **An error message is strongly recommended because an error should
     * always have an explanation about how to fix it.**
     */
    error?: boolean | ReactNode;
    /**
     * A note to show below the input.
     * If the input has an error message, this note will be replaced by that.
     * Use {@Link Field.Note} to render the note.
     */
    note?: ReactNode;
    /**
     * A HelpButton to render next to the label.
     */
    contextualHelp?: ReactNode;
    /**
     * @default 'lg'
     */
    size?: 'lg' | 'md';
    /**
     * To visually indicate if this field is required or optional.
     * @default false
     */
    necessityIndicator?: boolean;
    /**
     * Children should be two or more form controls without labels, notes or
     * error messages.
     *
     * We recommend you only use these fields inside: `<TextField>`, `<Select> `,
     * `<SearchableSelect>`, `<MultiSelect>`, `<SearchableMultiSelect>`,
     * `<DateField>` or `<DateRangeField>`.
     *
     * Example:
     * ```jsx
     * <Fieldset label="Phone Number">
     *   <Select aria-label="Country code" placeholder="+00" width={90}>
     *     <SelectItem>+40</SelectItem>
     *     <SelectItem>+42</SelectItem>
     *     <SelectItem>+45</SelectItem>
     *   </Select>
     *   <TextField
     *     aria-label="Phone number"
     *     placeholder="000-000-0000"
     *   ></TextField>
     * </Fieldset>
     * ```
     */
    children: ReactNode;
    /**
     * Places the label either above (default) or on the side of the control.
     * @default 'above'
     */
    labelPlacement?: 'side' | 'above';
};
/**
 * Sapphire search input field.
 */
declare const Fieldset: ({ label, contextualHelp, note, error, isDisabled, isRequired, necessityIndicator, children, size, labelPlacement, ...props }: FieldsetProps) => React__default.JSX.Element;

declare type PageGridStyleProps = Pick<SapphireViewStyleProps, 'backgroundColor' | 'marginTop' | 'marginBottom'>;
interface PageGridProps extends DOMProps$1, PageGridStyleProps, Omit<DOMAttributes, 'children' | 'style' | 'className' | 'dangerouslySetInnerHTML'> {
    children: ReactNode;
}
declare const PageGrid: React__default.ForwardRefExoticComponent<PageGridProps & React__default.RefAttributes<HTMLDivElement>>;

declare type IconProps = GlobalDomAttributes & SapphireStyleProps & {
    'aria-label'?: string;
    /**
     * The size of the icon.
     * @default 'md'
     */
    size?: 'sm' | 'md' | 'lg' | 'xl';
    /**
     * The semantic color of the icon
     * @default 'inherit'
     */
    color?: 'inherit' | 'primary' | 'secondary' | 'positive' | 'negative' | 'warning' | 'informative';
    children: React__default.ReactNode;
};
declare const Icon: React__default.ForwardRefExoticComponent<Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & SapphireStyleProps & {
    'aria-label'?: string | undefined;
    /**
     * The size of the icon.
     * @default 'md'
     */
    size?: "sm" | "md" | "lg" | "xl" | undefined;
    /**
     * The semantic color of the icon
     * @default 'inherit'
     */
    color?: "inherit" | "primary" | "secondary" | "positive" | "negative" | "warning" | "informative" | undefined;
    children: React__default.ReactNode;
} & React__default.RefAttributes<HTMLSpanElement>>;

declare type IconButtonProps<T extends 'a' | 'button'> = Omit<Pick<AriaButtonProps<T>, BaseComponentKeys | 'autoFocus' | 'onFocus' | 'onBlur' | 'isDisabled' | 'elementType' | 'excludeFromTabOrder' | 'type'>, 'aria-label'> & Pick<LinkDOMProps, LinkDOMPropsKeys> & SapphireStyleProps & GlobalDomAttributes & PressEvents & {
    /**
     * The content of the button. This should be an svg icon.
     * Usually imports from `@danske/sapphire-icons`.
     *
     */
    children: React__default.ReactNode;
    /**
     * @default 'md'
     */
    size?: 'xs' | 'sm' | 'md' | 'lg';
    /**
     * @default false
     */
    isLoading?: boolean;
    /**
     * The visual appearance of the button.
     * @default 'tertiary'
     */
    variant?: IconButtonVariant;
    /**
     * @deprecated
     * Please use onPress instead, which has
     * [several UX
     *   improvements](https://react-spectrum.adobe.com/blog/building-a-button-part-1.html) over
     *   onClick, or onClick if accessing the mouse event is necessary.
     */
    UNSAFE_onClick?: React__default.MouseEventHandler;
    /**
     * Prevent focus when the button is clicked.
     * Should only be used in special cases. By default, buttons should receive focus when pressed.
     *
     */
    UNSAFE_preventFocusOnPress?: boolean;
} & ({
    /**
     * The button's label. This is not shown on the screen but it is required
     * for accessibility reasons.
     */
    'aria-label': string;
    'aria-hidden'?: never;
} | {
    'aria-hidden': true | 'true';
    'aria-label'?: never;
});
declare type IconButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'danger-secondary' | 'danger-tertiary';
declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps<"a" | "button"> & React__default.RefAttributes<_react_types_shared.FocusableRefValue<HTMLAnchorElement | HTMLButtonElement, HTMLAnchorElement | HTMLButtonElement>>>;

declare type InteractiveListProps<T> = WithResolveSelectAllToKeysKeys<Pick<AriaGridListProps<T>, BaseComponentKeys | MultipleSelectionKeys | 'selectionMode' | 'items' | 'children' | 'onAction' | 'autoFocus'>> & SapphireStyleProps & GlobalDomAttributes & {
    /**
     * Sets HTML tag of outermost element.
     * @default "ul"
     * @deprecated was not used
     */
    elementType?: 'ul' | 'ol';
    /**
     * Removes the divider after the last list item.
     * Useful when rendered in a container which already has borders.
     */
    hideLastDivider?: boolean;
    /** Loading state type */
    loadingState?: 'loadingMore' | 'loading';
    /**
     * Callback called when the user scrolled to the bottom of the list.
     * Useful when implementing infinite scroll.
     */
    onLoadMore?: () => void;
    /**
     * How should the loading skeleton row look like.
     */
    renderLoadingSkeleton?: (index: number) => React__default.ReactNode;
    /**
     * How many loading rows should be shown when "loadingState" is used.
     * @default 3
     */
    loadingSkeletonRowsCount?: number;
    /**
     * Add custom sized padding to the sides of the list items.
     *
     * @example
     * ```tsx
     * <InteractiveList
     *    sidePadding={tokens.size.spacingContainerHorizontalM.value} hasNegativeSideMargin>
     * </InteractiveList>
     * ```
     */
    sidePadding?: number | string;
    /**
     * Counter acts the side padding, so that list is shifted to the left with
     * same amount and having side padding * 2 added to width – resulting in full
     * width list.
     * Useful in scenarions where list is inside a padded container and desired
     * layout has list going from edge to edge horizontally.
     *
     * @example
     * ```tsx
     * <InteractiveList hasNegativeSideMargin>...</InteractiveList>
     * ```
     */
    hasNegativeSideMargin?: boolean;
    /**
     * Whether interaction with the table is disabled or not.
     * @default false
     */
    isDisabled?: boolean;
};
declare const InteractiveList: <T extends object>(props: InteractiveListProps<T> & {
    ref?: React__default.ForwardedRef<HTMLUListElement> | undefined;
}) => React__default.ReactElement;

interface InteractiveListItemProps<T> extends Omit<ItemProps<T>, 'children'> {
    contentLeft: ReactNode;
    contentRight?: ReactNode;
}
declare const InteractiveListItem: <T>(props: InteractiveListItemProps<T>) => JSX.Element;

interface TableFooterProps extends SapphireStyleProps {
    /**
     * Note: Currently, only native HTML table elements are supported.
     * The styles are designed with the assumption
     * that the CSS `display` property is set to `table-header-group`.
     * TODO: Update CSS styles to accommodate other element types.
     *
     * @default 'tfoot'
     */
    elementType?: 'tfoot' | 'div';
    children?: React__default.ReactNode;
}

interface TableProps extends Omit<DOMAttributes<HTMLTableElement>, 'className' | 'style' | 'dangerouslySetInnerHTML'>, SapphireStyleProps {
    /**
     * Note: Currently, we don't officially support non-table elements.
     *
     *  @default 'table'
     */
    elementType?: 'table';
    /**
     * The spacing inside table cells.
     * @default 'md'
     */
    cellSpacing?: CellSpacing;
    /**
     * Same as CSS table-layout property.
     * @default 'auto'
     */
    layout?: 'auto' | 'fixed';
    children?: React__default.ReactNode;
}

interface TableBodyProps extends Omit<DOMAttributes<HTMLTableSectionElement>, 'className' | 'style' | 'dangerouslySetInnerHTML'>, SapphireStyleProps {
    /**
     * Note: Currently, we don't officially support non-table elements.
     *
     * @default 'tbody'
     */
    elementType?: 'tbody';
    children?: React__default.ReactNode;
}

interface TableRowProps extends Omit<DOMAttributes<HTMLTableRowElement>, 'className' | 'style' | 'dangerouslySetInnerHTML'>, SapphireStyleProps {
    /**
     * Note: Currently, we don't officially support non-table elements.
     *
     * @default 'tr'
     */
    elementType?: 'tr';
    children?: React__default.ReactNode;
    /**
     * Content, rendered after the row element.
     * Used to show some details for each row, which is not included in the columns.
     */
    expandedView?: ReactNode;
    isDisabled?: boolean;
    /** Used for the pressed state, relevant for  interactive rows */
    isActive?: boolean;
    /** Marks the row as selected */
    isSelected?: boolean;
    /** Marks the row as highlighted */
    isHighlighted?: boolean;
    /**
     * Marks the row as interactive. Should be `true` when the row has an action
     * that can be triggered by clicking the row.
     * when the {@Link Table.Container} has a prop isInteractive, the value is overridden
     */
    isInteractive?: boolean;
    /**
     * The number of columns in the row
     */
    columnCount?: number;
}

declare type TableCellProps = Omit<DOMAttributes<HTMLTableCellElement>, 'className' | 'style' | 'dangerouslySetInnerHTML'> & SapphireStyleProps & {
    /**
     * Note: Currently, we don't officially support non-table elements.
     *
     * @default 'td'
     */
    elementType?: 'td';
    children?: React__default.ReactNode;
    /**
     * A function that allows you to wrap the cell contents.
     *
     * This is useful for those cases where you need something in the cell that
     * is not affected by the cell's overflow behaviour.
     */
    wrapCellContent?: (cellContent: React__default.ReactNode) => React__default.ReactNode;
    /**
     * Tooltip text that's shown when overflow is set to "truncate" and the cell content doesn't fit.
     * Useful when the cell content is not plain text. If not provided, the text content of the cell
     * is used.
     * TODO(v6): rename to something like overflowTooltip that is more after what it does.
     */
    textValue?: React__default.ReactNode;
    width?: SapphireStyleProps['width'] | null;
    minWidth?: SapphireStyleProps['minWidth'] | null;
    maxWidth?: SapphireStyleProps['maxWidth'] | null;
} & ColStyleProps & Pick<ThHTMLAttributes<HTMLTableCellElement>, 'headers' | 'abbr' | 'scope' | 'colSpan' | 'rowSpan'>;

interface TableHeaderProps extends Omit<DOMAttributes<HTMLTableSectionElement>, 'className' | 'style' | 'dangerouslySetInnerHTML'>, SapphireStyleProps {
    /** If the table header should be sticky relative to the container.
     * when the {@Link Table.Container} has a prop stickyHeader, the value is overridden
     **/
    sticky?: boolean;
    /**
     * Note: Currently, we don't officially support non-table elements.
     *
     * @default 'thead'
     */
    elementType?: 'thead';
    children?: React__default.ReactNode;
}

declare type TableHeaderCellProps = Omit<DOMAttributes<HTMLTableHeaderCellElement>, 'className' | 'style' | 'dangerouslySetInnerHTML'> & {
    children?: React__default.ReactNode;
    /**
     * Note: Currently, we don't officially support non-table elements.
     *
     * @default 'th'
     */
    elementType?: 'th';
    render?: (props: DOMAttributes<HTMLElement> & {
        ref: ForwardedRef<any>;
    }) => React__default.ReactElement;
    /** Whether the column allows sorting. */
    allowsSorting?: boolean;
    sortDirection?: SortDirection;
    /** If the sorting indicator should be displayed
     * @deprecated using the right combination of allowsSorting and sortDirection is enough
     **/
    isActiveSort?: boolean;
    /**
     * Tooltip text that's shown when overflow is set to "truncate" and the cell content doesn't fit.
     * Useful when the cell content is not plain text. If not provided, the text content of the cell
     * is used.
     */
    textValue?: React__default.ReactNode;
    width?: SapphireStyleProps['width'] | null;
    minWidth?: SapphireStyleProps['minWidth'] | null;
    maxWidth?: SapphireStyleProps['maxWidth'] | null;
} & ColStyleProps & Pick<ThHTMLAttributes<HTMLTableHeaderCellElement>, 'scope' | 'headers' | 'abbr' | 'colSpan' | 'rowSpan'> & SapphireStyleProps;

interface TableHeaderRowProps extends Omit<DOMAttributes<HTMLTableRowElement>, 'className' | 'style' | 'dangerouslySetInnerHTML'>, SapphireStyleProps {
    /**
     * Note: Currently, we don't officially support non-table elements.
     *
     * @default 'tr'
     */
    elementType?: 'tr';
    children?: React__default.ReactNode;
}

declare type TableContainerProps = GlobalDomAttributes & SapphireStyleProps & Omit<DOMAttributes$1<HTMLDivElement>, 'className' | 'style' | 'dangerouslySetInnerHTML'> & {
    /**
     * Element rendered after all the elements of the table.
     * Normally this is where you would render a <Pagination> component.
     *
     * This should not be confused with a table footer, which is a part of the
     * table and renders a `tfoot` element.
     */
    footer?: ReactElement;
    /**
     * If the table header should be sticky relative to the first ancestor with
     * an `overflow`.
     * `auto` means it is is `true` if the table has a custom `height` or
     * `maxHeight` and `false` otherwise.
     *
     * @default 'auto'
     */
    stickyHeader?: StickyPosition;
    /**
     * If the table's footer should be sticky relative to the first ancestor
     * with an `overflow`.
     * `auto` means it is is `true` if the table has a custom `height` or
     * `maxHeight` and `false` otherwise.
     *
     * @default 'auto'
     */
    stickyFooter?: StickyPosition;
    isInteractive?: boolean;
    /**
     * Removes the divider after the last table row.
     * Useful when rendered in a container which already has borders.
     */
    hideLastDivider?: boolean;
    children?: React__default.ReactNode;
};

declare type ColSizeProps = Pick<ColumnProps<any>, 'maxWidth' | 'minWidth' | 'width'>;
declare type ColumnAlignment = 'left' | 'center' | 'right';

interface TableRowContextProps {
    expandedViewId?: string;
}
declare function useTableRowContext(): TableRowContextProps;

/**
 * Tooltip that is shown only when there is overflow.
 * @param children a function that accepts a ref and optional tooltip trigger props, and returns the tooltip trigger.
 * In order for tooltip to be shown when there is overflow, the ref must be set on the trigger (or
 * the part of the trigger that can have overflow). The tooltip trigger props should be spread onto
 * the actual DOM element that should trigger the tooltip (not wrapper components).
 * @param title tooltip content
 */
interface TooltipIfNeededProps<R> {
    children: (ref: RefObject<R>, tooltipTriggerProps?: React__default.HTMLAttributes<HTMLElement> & {
        ref: React__default.Ref<R>;
    }) => React__default.ReactElement;
    title?: React__default.ReactNode;
}
declare const TooltipIfNeeded: <R extends HTMLElement>({ children, title, }: TooltipIfNeededProps<R>) => React__default.ReactElement;

declare const _Table: React$1.ForwardRefExoticComponent<TableProps & React$1.RefAttributes<HTMLTableElement>> & {
    Body: React$1.ForwardRefExoticComponent<TableBodyProps & React$1.RefAttributes<HTMLTableSectionElement>>;
    Row: React$1.ForwardRefExoticComponent<TableRowProps & React$1.RefAttributes<HTMLTableRowElement>>;
    Cell: React$1.ForwardRefExoticComponent<Omit<_react_types_shared.DOMAttributes<HTMLTableCellElement>, "style" | "className" | "dangerouslySetInnerHTML"> & SapphireStyleProps & {
        elementType?: "td" | undefined;
        children?: React$1.ReactNode;
        wrapCellContent?: ((cellContent: React$1.ReactNode) => React$1.ReactNode) | undefined;
        textValue?: React$1.ReactNode;
        width?: ResponsiveCssProp<"width", "size"> | null;
        minWidth?: ResponsiveCssProp<"minWidth", "size"> | null;
        maxWidth?: ResponsiveCssProp<"maxWidth", "size"> | null;
    } & ColStyleProps & Pick<React$1.ThHTMLAttributes<HTMLTableCellElement>, "abbr" | "colSpan" | "headers" | "rowSpan" | "scope"> & React$1.RefAttributes<HTMLTableCellElement>>;
    Header: React$1.ForwardRefExoticComponent<TableHeaderProps & React$1.RefAttributes<HTMLTableSectionElement>>;
    HeaderCell: React$1.ForwardRefExoticComponent<Omit<_react_types_shared.DOMAttributes<HTMLTableHeaderCellElement>, "style" | "className" | "dangerouslySetInnerHTML"> & {
        children?: React$1.ReactNode;
        elementType?: "th" | undefined;
        render?: ((props: _react_types_shared.DOMAttributes<HTMLElement> & {
            ref: React$1.ForwardedRef<any>;
        }) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>) | undefined;
        allowsSorting?: boolean | undefined;
        sortDirection?: react_stately.SortDirection | undefined;
        isActiveSort?: boolean | undefined;
        textValue?: React$1.ReactNode;
        width?: ResponsiveCssProp<"width", "size"> | null;
        minWidth?: ResponsiveCssProp<"minWidth", "size"> | null;
        maxWidth?: ResponsiveCssProp<"maxWidth", "size"> | null;
    } & ColStyleProps & Pick<React$1.ThHTMLAttributes<HTMLTableHeaderCellElement>, "abbr" | "colSpan" | "headers" | "rowSpan" | "scope"> & SapphireStyleProps & React$1.RefAttributes<HTMLTableCellElement>>;
    HeaderRow: React$1.ForwardRefExoticComponent<TableHeaderRowProps & React$1.RefAttributes<HTMLTableRowElement>>;
    Container: React$1.ForwardRefExoticComponent<Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & SapphireStyleProps & Omit<React$1.DOMAttributes<HTMLDivElement>, "style" | "className" | "dangerouslySetInnerHTML"> & {
        footer?: React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | undefined;
        stickyHeader?: StickyPosition | undefined;
        stickyFooter?: StickyPosition | undefined;
        isInteractive?: boolean | undefined;
        hideLastDivider?: boolean | undefined;
        children?: React$1.ReactNode;
    } & React$1.RefAttributes<HTMLDivElement>>;
    Footer: React$1.ForwardRefExoticComponent<TableFooterProps & React$1.RefAttributes<HTMLTableSectionElement>>;
};

interface ColStyleProps {
    align?: ColumnAlignment;
    overflow?: CellOverflow;
}
declare type CellOverflow = 'wrap' | 'truncate';
declare type CellSpacing = 'sm' | 'md' | 'lg' | 'xl';
declare type StickyPosition = 'auto' | boolean;

interface RowExpansionProps {
    /**
     * Defines row expansion behavior as below:
     *
     * - single: Maintain a single expanded row at a time, by collapsing other rows when a row is
     * expanded
     * - multiple: allow for multiple rows to be expanded at the same time
     */
    expansionMode?: 'single' | 'multiple' | 'none';
    /**
     * Ids of expanded rows. Used to control the state of expanded rows.
     **/
    expandedKeys?: Iterable<Key>;
    /**
     * Ids of the rows that should be expanded by default. The state of expanded rows will
     * be uncontrolled and local to InteractiveTable.
     **/
    defaultExpandedKeys?: Iterable<Key>;
    onExpandedKeysChange?: (keys: Set<Key>) => void;
}

declare type InteractiveTableProps = RowExpansionProps & WithResolveSelectAllToKeysKeys<Pick<TableProps$1, MultipleSelectionKeys | SortableKeys | 'children' | 'selectionMode'>> & Pick<TableContainerProps, 'hideLastDivider' | 'footer'> & SapphireStyleProps & GlobalDomAttributes & {
    /**
     * A table must have an accessibility label.
     * This will not be visible to the average users.
     */
    'aria-label': string;
    /**
     * Allows custom position in the tabbing order (preserving focus on latest focused cell).
     * Use -1 to remove from the tab order.
     * Useful when you want a table to more closely represent a static table
     */
    tabIndex?: number;
    /**
     * Whether text within a table cell should be truncated and followed by
     * 3 dots or it should wrap.
     *
     * @default 'truncate'
     */
    cellOverflow?: CellOverflow;
    /**
     * The spacing inside table cells.
     * @default 'md'
     */
    cellSpacing?: CellSpacing;
    /**
     * Same as CSS table-layout property.
     * Only applicable for non-virtualized tables.
     * @default 'auto'
     * @deprecated layout "auto" is only applicable to native table layout which won't be available
     * in v6 where virtualization will be non-optional.
     */
    layout?: 'auto' | 'fixed';
    /**
     * Disables table virtualization and renders native table elements.
     * @default false
     * @deprecated InteractiveTable will be virtualized unconditionally in v6.
     * Read more about it in v5 release post.
     */
    isNonVirtualized?: boolean;
    /**
     * If the table header should be sticky relative to the first ancestor with
     * an `overflow`.
     *
     * @deprecated This option has no effect unless `isNonVirtualized` is set to true,
     * and will be removed in v6. Read more about it in V5 release post.
     * @default 'auto'
     */
    stickyHeader?: StickyPosition;
    /**
     * If the table's footer should be sticky relative to the first ancestor
     * with an `overflow`.
     * @deprecated This option has no effect unless `isNonVirtualized` is set to true,
     * and will be removed in v6. Read more about it in V5 release post.
     * @default 'auto'
     */
    stickyFooter?: StickyPosition;
    /**
     * Handler that is called when a user performs an action on a row.
     */
    onRowAction?: (key: Key) => void;
    /**
     * Optional function property designed to render a custom action bar based
     * on the selected rows in a table, identified by their keys.
     *
     * @deprecated Please render {@link BulkActionsBar} above the table instead.
     */
    renderSelectionActionBar?: (selectedRowKeys: React__default.Key[]) => React__default.ReactNode;
    /**
     * keys of rows that should be highlighted. Highlighted rows are shown in a selected state
     * which is different from the normal selection with checkboxes. The primary use case is when
     * the row action is to update an external view (such as a row detail view), to
     * show its connection with the selected row.
     */
    highlightedRows?: Key[];
    /**
     * Disables selection and row action on the entire table
     * @default false
     */
    isDisabled?: boolean;
    /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
    onLoadMore?: () => void;
    /** Whether table is loading or not. */
    loadingState?: 'loading' | 'loadingMore';
    /**
     * Number of loading skeleton rows to render.
     * Use it to match amount of actual content rows being loaded as closely as possible.
     * @default 3
     */
    loadingSkeletonRowsCount?: number;
    /**
     * Estimated height of each row in pixels.
     * Used for optimizing rendering performance.
     */
    estimatedRowHeight?: number;
};
interface InteractiveTableColumnProps extends Pick<ColumnProps$1, 'children' | 'id' | 'width' | 'maxWidth' | 'minWidth' | 'allowsSorting' | 'isRowHeader'> {
    align?: ColumnAlignment;
    /**
     * A string representation of the column's header cell contents, used for accessibility
     * announcements.
     *
     * Also used for the tooltip text that's shown when overflow is set to "truncate" and the cell
     * content doesn't fit. If not provided, the text content of the cell is used for the tooltip.
     */
    textValue?: string;
    /**
     * Custom {@link InteractiveTableProps.cellOverflow} for this column.
     */
    overflow?: CellOverflow;
}
interface InteractiveTableRowProps<T> extends Pick<RowProps<T>, 'id' | 'textValue' | 'columns' | 'children'> {
    /**
     * The expanded view to show when the row is expanded.
     * Adds another row to the table with the expanded view.
     * Does NOT work with virtualization.
     */
    expandedView?: ReactNode;
}
interface InteractiveTableCellProps extends Pick<CellProps, 'id' | 'children'> {
    /**
     * Use this prop to disable the table's keyboard navigation
     * while the focus is within this cell.
     *
     * This prop is meant to mitigate the issues when one needs
     * to render in the cell components which have keyboard
     * listeners that conflict with the table's.
     *
     * The long term solution will be to implement the "editable
     * grid pattern" recommended by ARIA
     * https://www.w3.org/WAI/ARIA/apg/patterns/grid/#gridNav_inside
     *
     * Issue in react-aria:
     * https://github.com/adobe/react-spectrum/issues/2328
     *
     * **NOTE**:
     * This should be used sparingly as the experience for end
     * users is not ideal.
     * @deprecated use <InteractiveTable.DisableKeyboardNav> to wrap interactive content in cells.
     **/
    disableKeyboardNav?: boolean;
    /**
     * A string representation of the cell contents, used for accessibility announcements.
     * Also used for the tooltip text that's shown when overflow is set to "truncate" and the cell
     * content doesn't fit. Useful when the cell content is not plain text. If not provided,
     * the text content of the cell is used for the tooltip.
     */
    textValue?: string;
    /**
     * Forcefully allow text selection on the cell, which is disabled by default on actionable rows.
     */
    forceAllowTextSelection?: boolean;
    /**
     * Indicates how many columns the data cell spans.
     *
     */
    colSpan?: number | 'remaining';
    /**
     * A function that allows you to wrap the cell contents with custom
     * components.
     *
     * This is useful for those cases where you need something in the cell that
     * is not affected by the cell's overflow behaviour.
     */
    wrapCellContent?: (cellContent: React__default.ReactNode) => React__default.ReactNode;
    /**
     * Whether the default padding of the cell should not be applied.
     */
    INTERNAL_noPadding?: boolean;
    INTERNAL_shouldSelectOnPressUp?: boolean;
}
/**
 * A wrapper for interactive content that disable the table's keyboard navigation
 * while the focus is within its boundary.
 * It's meant to mitigate the issues when one needs
 * to render in the cell components which have keyboard
 * listeners that conflict with the table's.
 *
 * The long term solution will be to implement the "editable
 * grid pattern" recommended by ARIA
 * https://www.w3.org/WAI/ARIA/apg/patterns/grid/#gridNav_inside
 *
 * Issue in react-aria:
 * https://github.com/adobe/react-spectrum/issues/2328
 *
 * **NOTE**:
 * This should be used sparingly as the experience for end
 * users is not ideal.
 */
declare function DisableKeyboardNav({ children, }: {
    children: ReactNode;
}): ReactElement;
interface InteractiveTableBodyProps<T> extends Pick<TableBodyProps$1<T>, 'children' | 'items'> {
}

interface EditableCellProps extends InteractiveTableCellProps {
    /**
     * A function that renders the editable form content.
     * This should typically contain form inputs like TextField or Select.
     */
    renderEditor: () => ReactNode;
    /**
     * Callback fired when the user submits the edit (via Enter key or checkmark button).
     * If this returns false, the editor popover is not closed. This is useful
     * when the field contains errors.
     */
    onSubmit?: (e: FormEvent<HTMLFormElement>) => boolean | void;
    /**
     * Callback fired when the user cancels the edit (via Escape key).
     */
    onCancel?: () => void;
    /**
     * aria-label of the edit button
     * @default: 'Edit'
     */
    editButtonLabel?: string;
    /**
     * aria-label of the save button
     * @default: 'Save'
     */
    saveButtonLabel?: string;
}

declare const _InteractiveTable: (<T extends object>(props: InteractiveTableProps & React$1.RefAttributes<HTMLDivElement>) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null) & {
    Body: <T_1 extends object>(props: InteractiveTableBodyProps<T_1> & React$1.RefAttributes<HTMLTableSectionElement>) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
    Column: React$1.ForwardRefExoticComponent<InteractiveTableColumnProps & React$1.RefAttributes<HTMLElement>>;
    Row: <T_2 extends object>(props: InteractiveTableRowProps<T_2> & React$1.RefAttributes<HTMLDivElement>) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
    Cell: React$1.ComponentType<Omit<InteractiveTableCellProps & React$1.RefAttributes<HTMLElement>, `INTERNAL_${string}`>>;
    EditableCell: React$1.ForwardRefExoticComponent<EditableCellProps & React$1.RefAttributes<HTMLDivElement>>;
    Header: <T_3 extends object>(props: react_aria_components.TableHeaderProps<T_3> & React$1.RefAttributes<HTMLElement>) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
    Footer: (props: {
        children?: React$1.ReactNode;
    } & React$1.RefAttributes<HTMLTableSectionElement>) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
    DisableKeyboardNav: typeof DisableKeyboardNav;
};

declare type SortDescriptor = SortDescriptor$1;

interface LinkProps extends Pick<AriaLinkOptions, 'isDisabled' | PressEventsKeys | FocusablePropsKeys | LinkDOMPropsKeys | AriaLabelingPropsKeys>, SapphireStyleProps, GlobalDomAttributes, Pick<DOMAttributes, 'tabIndex'> {
    /**
     * The content of the Link can be a string, span or an anchor tag.
     */
    children: ReactNode;
    /**
     * @default 'primary'
     */
    variant?: 'primary' | 'secondary';
}
declare const Link: React__default.FC<LinkProps>;

interface ListProps extends Pick<AriaLabelingProps, AriaLabelingPropsKeys>, SapphireStyleProps, GlobalDomAttributes {
    /**
     * The items within the list.
     */
    children: ReactNode;
    /**
     * Sets HTML tag of outermost element.
     * @default "ul"
     */
    elementType?: 'ul' | 'ol' | 'div';
    /**
     * The ARIA role
     */
    role?: AriaRole;
    /**
     * Removes the divider after the last list item.
     * Useful when rendered in a container which already has borders.
     */
    hideLastDivider?: boolean;
    /** Loading state type */
    loadingState?: 'loadingMore' | 'loading';
    /** List Item placeholder that will be rendered until loadingState is removed */
    renderLoadingSkeleton?: (index: number) => React__default.ReactNode;
    /**
     * Defines how many ListItem placeholders should be placed.
     * @default 3
     */
    loadingSkeletonRowsCount?: number;
    /**
     * Add custom sized padding to the sides of the list items.
     * @example
     * ```tsx
     * <List sidePadding={tokens.size.spacingContainerHorizontalMd.value} hasNegativeSideMargin>...</List>
     * ```
     */
    sidePadding?: number | string;
    /**
     * Counter acts the side padding of the parent element, so that List is shifted to the left with same amount
     * and having side padding * 2 added to width – resulting in full width List.
     * Useful in scenarions where List is inside a padded container and desired layout has List going from edge to edge horizontally.
     * @example
     * ```tsx
     * <List hasNegativeSideMargin>...</List>
     * ```
     */
    hasNegativeSideMargin?: boolean;
}
declare const List: React__default.ForwardRefExoticComponent<ListProps & React__default.RefAttributes<HTMLOListElement>>;

interface ListItemProps extends Pick<AriaLabelingProps, AriaLabelingPropsKeys>, SapphireStyleProps, GlobalDomAttributes {
    /**
     * The html element to render as list item.
     * @default 'li'
     */
    elementType?: 'li' | 'div';
    role?: AriaRole;
    /**
     * The content of the list item. Use {@link ListItem.Content}. Wrap in a
     * {@link ListItem.Button} if list item should be interactive.
     */
    children: ReactNode;
}
declare const _ListItem: React__default.ForwardRefExoticComponent<ListItemProps & React__default.RefAttributes<HTMLElement>> & {
    Content: ({ left, contentLeft, right, contentRight, }: {
        /**
         * The content displayed to the left on the list item.
         *
         * @deprecated This will be removed in the next major version. Use
         * `contentLeft` instead.
         */
        left?: React__default.ReactNode;
        /**
         * The content displayed to the left on the list item.
         */
        contentLeft?: React__default.ReactNode;
        /**
         * The content displayed to the right on the list item.
         *
         * @deprecated This will be removed in the next major version. Use
         * `contentRight` instead.
         */
        right?: React__default.ReactNode;
        /**
         * The content displayed to the right on the list item.
         */
        contentRight?: React__default.ReactNode;
    }) => JSX.Element;
    Button: React__default.ForwardRefExoticComponent<Pick<AriaButtonProps<"div">, "children" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onBlur" | "onFocus" | "onFocusChange" | "onKeyUp" | "onKeyDown" | "autoFocus" | "isDisabled"> & React__default.RefAttributes<HTMLDivElement>>;
    Link: ({ children, }: {
        /**
         * Render function which is expected to return a native or custom link element.
         * It's given the props to be applied on the rendered link element, to make
         * the list item be interactive.
         */
        children: (props: HTMLAttributes<HTMLAnchorElement>) => JSX.Element;
    }) => JSX.Element;
};

interface ListItemTextProps extends Pick<AriaLabelingProps, AriaLabelingPropsKeys>, SapphireStyleProps, GlobalDomAttributes {
    /**
     * The label text, placed on top of the primary text.
     */
    label?: ReactNode;
    /**
     * The most emphasized text.
     */
    primary: ReactNode;
    /**
     * The least emphasized text.
     */
    secondary?: ReactNode;
    /**
     * Reverses order of primary and secondary text,
     * so that secondary text is displayed above the primary.
     *
     * @deprecated Will be removed in v6. use `label` prop instead.
     */
    reverseOrder?: boolean;
}
declare const ListItemText: React__default.ForwardRefExoticComponent<ListItemTextProps & React__default.RefAttributes<HTMLDivElement>>;

interface ListItemButtonGroupProps extends Pick<AriaLabelingProps, AriaLabelingPropsKeys>, SapphireStyleProps, GlobalDomAttributes {
    children: React__default.ReactNode;
}
/**
 * ListItemButton ensures that list item loses background style when the Button is hovered.
 * Any button used in list item should be wrapped with this component.
 *
 * @deprecated Will be removed in the next major version
 */
declare const ListItemButton: React__default.ForwardRefExoticComponent<ListItemButtonGroupProps & React__default.RefAttributes<HTMLSpanElement>>;

/**
 * Component not exported externally which can render and manage the UI of the
 * listbox.
 * The `state` needs to be provided.
 */
declare type StatelessListBoxProps<T> = Pick<AriaListBoxOptions<T>, 'shouldUseVirtualFocus' | 'onAction' | 'autoFocus' | MultipleSelectionKeys | CollectionBaseKeys | 'id' | 'selectionMode'> & Pick<AriaListBoxProps<T>, 'children'> & SapphireStyleProps & GlobalDomAttributes & {
    loadingState?: 'loading';
    loadingSkeletonRowsCount?: number;
    /**
     * Callback called when the user scrolled to the bottom of the listbox.
     * Useful when implementing infinite scroll.
     */
    onLoadMore?: () => void;
    disableSelectedStyles?: boolean;
    state: ListState<T>;
    renderLoadingSkeleton?: (index: number) => React__default.ReactNode;
    /**
     * Renders a message indicating the list is empty.
     * Default is a simple "No results" (in given language) message.
     * Passing `null` will hide the empty state message.
     */
    emptyState?: React__default.ReactNode;
    /**
     * @deprecated use marginX instead. negativeSideMargin={x} => marginX={`calc(-1 * ${x})`}
     */
    negativeSideMargin?: number | string;
    /**
     * Allows for connecting a (search) input to the ListBox, so that the ListBox
     * items can be navigated and selected by keyboard when the input is focused.
     */
    connectedInputRef?: RefObject<HTMLElement>;
    /**
     * Whether top and bottom dividers should be shown to mark ListBox's scrollable area.
     * The top divider will be shown when the list is **scrolled** down,
     * and the bottom divider will be shown when the list is **scrollable**.
     */
    hasScrollDividers?: boolean;
    /**
     * Whether the listbox items should use virtual focus instead of being focused directly.
     *
     * @default `true` if `connectedInputRef` is provided, `false` otherwise
     */
    shouldUseVirtualFocus?: boolean;
};

declare type ListBoxProps<T> = WithResolveSelectAllToKeysKeys<Omit<StatelessListBoxProps<T>, 'state' | 'disableSelectedStyles'> & ({
    'aria-labelledby': string;
} | {
    'aria-label': string;
}) & {
    /**
     * Whether selected items should be grouped in a section at the top,
     * @default true
     */
    groupSelectedItemsOnTop?: boolean;
    /**
     * Filter for the items.
     * @param textValue - The `textValue` of the current node to filter.
     */
    filter?: (textValue: Node<T>['textValue']) => boolean;
}>;
declare const ListBox: <T extends object>(props: ListBoxProps<T> & {
    ref?: React__default.Ref<HTMLUListElement> | undefined;
}) => React__default.ReactElement;

interface ListBoxItemProps<T> extends ItemProps<T> {
    /**
     * Icon place on the right side of the ListBox item.
     */
    rightIcon?: React__default.ReactNode;
    /**
     * Icon place on the left side of the ListBox item.
     */
    leftIcon?: React__default.ReactNode;
    /**
     * @deprecated Use `rightIcon` instead
     */
    icon?: React__default.ReactNode;
    /**
     * @deprecated Will be removed in a future major version
     */
    avatar?: React__default.ReactNode;
    /**
     * Secondary text with less emphasised style, rendered below the main content.
     */
    secondaryText?: React__default.ReactNode;
}
declare const ListBoxItem: <T>(props: ListBoxItemProps<T>) => JSX.Element;

interface ListBoxItemSkeletonProps {
    index?: number;
    /**
     * Can be used for rendering custom skeleton (ReactNode) instead of primaryText
     * @default 'true'
     */
    primaryText?: boolean | React__default.ReactNode;
    secondaryText?: boolean | React__default.ReactNode;
    icon?: boolean | React__default.ReactNode;
    /**
     * The size of the skeleton icon.
     * @default 'lg'
     */
    iconSize?: 'sm' | 'md' | 'lg' | 'xl';
}
declare const ListBoxItemSkeleton: React__default.FC<ListBoxItemSkeletonProps>;

declare type MenuProps<T extends object> = Pick<MenuProps$1<T>, 'children' | BaseComponentKeys | 'autoFocus' | 'onAction' | 'items' | 'onClose'> & MenuTriggerProps & Pick<AriaMenuTriggerProps, 'isDisabled'> & SapphireStyleProps & GlobalDomAttributes & {
    triggerElement: ReactElement<ButtonProps<'button'>>;
    /**
     * @deprecated use {@link MenuItemProps.isDangerous isDangerous} prop on MenuItem instead.
     */
    dangerKeys?: Iterable<Key>;
    /**
     * ids of the disabled menu items.
     * @deprecated use `isDisabled` prop on `MenuItem` instead.
     */
    disabledKeys?: MultipleSelection['disabledKeys'];
    /**
     * Alignment of the menu relative to the trigger.
     * @default 'start'
     */
    align?: Alignment;
    /**
     * Where the Menu opens relative to its trigger.
     * @default 'bottom'
     */
    direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end';
    /**
     * Whether the menu should automatically flip direction when space is
     * limited.
     * @default true
     */
    shouldFlip?: boolean;
    /**
     * Whether the Menu closes when a selection is made.
     * @default true
     */
    closeOnSelect?: boolean;
};
/**
 * A menu displays a list of actions or options that a user can choose.
 */
declare function Menu<T extends object>({ children, triggerElement, direction, align, shouldFlip, dangerKeys, ...props }: MenuProps<T>): React__default.JSX.Element;

interface MenuItemProps<T> extends Pick<MenuItemProps$1, 'id' | 'textValue' | 'aria-label' | 'children' | 'isDisabled' | keyof LinkDOMProps> {
    /**
     * @deprecated Unused prop. Will be removed in the next major version.
     */
    hasChildItems?: ItemProps<T>['hasChildItems'];
    /**
     * @deprecated Unused prop. Will be removed in the next major version.
     */
    childItems?: ItemProps<T>['childItems'];
    /**
     * @deprecated Will be removed in the next major version.
     */
    title?: ItemProps<T>['title'];
    /**
     * Menu item icon
     * @deprecated use `rightIcon` instead.
     */
    icon?: React__default.ReactNode;
    /**
     * An icon rendered on the right side of the menu item.
     */
    rightIcon?: React__default.ReactNode;
    /**
     * An icon rendered on the left side of the menu item.
     */
    leftIcon?: React__default.ReactNode;
    /**
     * A secondary text rendered as an extra, less-emphasized line.
     */
    secondaryText?: React__default.ReactNode;
    /**
     * Whether the action is a dangerous.
     */
    isDangerous?: boolean;
    /**
     * Handler that is called when the item is selected.
     * */
    onAction?: () => void;
    /**
     * **Not recommended** – use onAction instead.
     * onClick is provided only for compatibility with other libraries.
     */
    onClick?: MenuItemProps$1['onClick'];
}
declare function MenuItem<T>({ icon, rightIcon, leftIcon, ...props }: MenuItemProps<T>): React__default.JSX.Element;

interface MenuSectionProps<T extends object> extends Pick<MenuSectionProps$1<T>, 'id' | 'items' | 'children' | 'aria-label' | keyof GlobalDOMAttributes$1<HTMLElement>>, Pick<MultipleSelection, 'selectionMode' | 'disallowEmptySelection'> {
    /**
     * A visible heading for the section.
     * Sections without a heading require an aria-label for accessibility.
     */
    heading?: ReactNode;
    /** The initial selected keys in the collection (uncontrolled). */
    defaultSelectedKeys?: Exclude<MultipleSelection['defaultSelectedKeys'], 'all'>;
    /** The currently selected keys in the collection (controlled). */
    selectedKeys?: Exclude<MultipleSelection['defaultSelectedKeys'], 'all'>;
    /** Handler that is called when the selection changes. */
    onSelectionChange?: (keys: Set<Key>) => void;
}
/**
 * A MenuSection represents a section within a Menu.
 */
declare function MenuSection<T extends object>({ heading, items, children, selectionMode, ...props }: MenuSectionProps<T>): React__default.JSX.Element;

declare type NotificationBadgeProps = {
    /**
     * Boolean to perform or not perform the animation
     * @default 'true'
     */
    animate?: boolean;
    /**
     * Badge will be added relative to the children. It is rendered inline if there is no children provided
     * */
    children?: React__default.ReactNode;
    /**
     * The shape of the container, based on which badge should be positioned. Badge is positioned on the border of the container
     * @default 'circle'
     * */
    containerType?: 'circle' | 'rectangle';
    /**
     * Number to show in badge
     * */
    count: number;
    /**
     * The variation of badge which determines the badge's color.
     *
     * @default 'primary'
     */
    variant?: 'primary' | 'secondary';
    /**
     * @default 'md'
     */
    size?: 'lg' | 'md' | 'sm';
    /**
     * Boolean to show/hide the badge
     *
     * @default true
     */
    show?: boolean;
} & SapphireStyleProps & GlobalDomAttributes & ({
    'aria-labelledby': string;
} | {
    'aria-label': string;
});
declare const NotificationBadge: (props: NotificationBadgeProps) => JSX.Element;

interface PaginationState {
    page: number;
    pageSize: number;
}

interface PaginationProps extends GlobalDomAttributes, SapphireStyleProps, DOMProps$1, Pick<AriaLabelingProps, AriaLabelingPropsKeys> {
    /** Total data count. */
    itemCount: number;
    /** Options for changing the number of items per page being displayed. */
    pageSizeOptions?: Array<number>;
    /** The current page (controlled). */
    page?: number;
    /** The default page (uncontrolled). */
    defaultPage?: number;
    /** The current pageSize (controlled). */
    pageSize?: number;
    /** The default pageSize (uncontrolled). */
    defaultPageSize?: number;
    /** Callback to handle page and page size change.*/
    onChange?: (newState: PaginationState) => void;
    /** Disable pagination. */
    isDisabled?: boolean;
    /**
     * Allow selection of individual selection
     * @default false
     */
    allowPageSelection?: boolean;
    /**
     * The amount of page numbers to display on either side of the
     * selected page in the page selection row.
     * Note: Only relevant if `allowPageSelection` is `true`.
     *
     * @default 1
     */
    pageSiblingCount?: number;
    /**
     * The amount of page numbers to display on either end of the
     * the page selection row.
     * Note: Only relevant if `allowPageSelection` is `true`.
     *
     * @default 1
     */
    pageBoundaryCount?: number;
}
declare const Pagination: React__default.ForwardRefExoticComponent<PaginationProps & React__default.RefAttributes<HTMLDivElement>>;

declare type PanelProps = AriaOverlayProps & AriaDialogProps & SapphireStyleProps & GlobalDomAttributes & {
    /**
     * The content of the panel. Typically, a {@link ModalLayout} element.
     */
    children?: ReactNode;
    /**
     * @default 'lg'
     */
    size?: 'lg' | 'sm';
    /**
     * Callback for when the modal exit transition is done and not visible
     * anymore. This happens a short while after the `isOpen` state is set to
     * `false`.
     */
    onCloseTransitionDone?: () => void;
    /**
     * Whether the panel should be left-aligned relative to the window. This
     * should be used rarely and only when the trigger is on the left side of
     * the window (eg. for Sidebars)
     * @default false
     */
    alignLeft?: boolean;
    /**
     * Whether the panel is currently open.
     */
    isOpen: boolean;
};
declare const Panel: React__default.ForwardRefExoticComponent<AriaOverlayProps & AriaDialogProps & SapphireStyleProps & Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & {
    /**
     * The content of the panel. Typically, a {@link ModalLayout} element.
     */
    children?: ReactNode;
    /**
     * @default 'lg'
     */
    size?: "sm" | "lg" | undefined;
    /**
     * Callback for when the modal exit transition is done and not visible
     * anymore. This happens a short while after the `isOpen` state is set to
     * `false`.
     */
    onCloseTransitionDone?: (() => void) | undefined;
    /**
     * Whether the panel should be left-aligned relative to the window. This
     * should be used rarely and only when the trigger is on the left side of
     * the window (eg. for Sidebars)
     * @default false
     */
    alignLeft?: boolean | undefined;
    /**
     * Whether the panel is currently open.
     */
    isOpen: boolean;
} & React__default.RefAttributes<HTMLDivElement>>;

declare type TextFieldRef = FocusableRefValue<HTMLInputElement | HTMLTextAreaElement, HTMLDivElement> & {
    getInputElement(): HTMLInputElement | HTMLTextAreaElement | null;
};

interface CharacterCounter {
    max: number;
    current: number;
}
interface SapphireTextFieldProps<T extends 'input' | 'textarea'> extends Pick<AriaTextFieldOptions<T>, ValueBasePropsKeys | TextInputDOMPropsKeys | FocusablePropsKeys | InputBaseKeys | ValidationIsRequiredKey | 'label' | 'inputElementType' | 'autoFocus' | 'autoCapitalize'> {
    /**
     * Whether the input should render as having an error and an error message.
     * This also sets the appropriate `aria` attributes on the input.
     *
     * A `boolean` sets the error state. Can be paired with the "note" prop with Field.Note variant="error"
     * A `ReactNode` sets the error state with an additional error message.
     *
     * **An error message is strongly recommended because an error should always have an explanation about how to fix it.**
     */
    error?: boolean | ReactNode;
    /**
     * A note to show below the input.
     * If the input has an error message, this note will be replaced by that.
     * Use {@Link Field.Note} as a content wrapper.
     */
    note?: ReactNode;
    /**
     * Shows the character counter with the provided max and current values.
     */
    characterCounter?: CharacterCounter;
    /**
     * A HelpButton to render next to the label.
     */
    contextualHelp?: ReactNode;
    /**
     * To visually indicate if this field is required or optional.
     * @default false
     */
    necessityIndicator?: boolean;
}

declare type TextAreaResizableProps = {
    minRows?: number;
    maxRows?: number;
    rows?: never;
    resizable: 'auto';
} | {
    minRows?: never;
    maxRows?: never;
    rows?: number;
    resizable?: boolean;
};
declare type TextAreaProps = SapphireTextFieldProps<'textarea'> & PressEvents & SapphireStyleProps & GlobalDomAttributes & TextAreaResizableProps & {
    /**
     * @default 'lg'
     */
    size?: 'lg' | 'md';
    /**
     * Places the label either above (default) or on the side of the control.
     * @default 'above'
     */
    labelPlacement?: 'side' | 'above';
};
declare const TextArea: React__default.ForwardRefExoticComponent<TextAreaProps & React__default.RefAttributes<TextFieldRef>>;

declare type TextFieldProps = SapphireTextFieldProps<'input'> & PressEvents & SapphireStyleProps & GlobalDomAttributes & {
    prefix?: ReactNode;
    postfix?: ReactNode;
    inputRef?: RefObject<HTMLInputElement | null>;
    /**
     * @default 'lg'
     */
    size?: 'lg' | 'md';
    /**
     * Aligns the text inside the input fields without affecting the positioning of the label of the field.
     */
    alignInputRight?: boolean;
    /**
     * Places the label either above (default) or on the side of the control.
     * @default 'above'
     */
    labelPlacement?: 'side' | 'above';
};
declare const TextField: React__default.ForwardRefExoticComponent<SapphireTextFieldProps<"input"> & PressEvents & SapphireStyleProps & Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & {
    prefix?: ReactNode;
    postfix?: ReactNode;
    inputRef?: React__default.RefObject<HTMLInputElement | null> | undefined;
    /**
     * @default 'lg'
     */
    size?: "md" | "lg" | undefined;
    /**
     * Aligns the text inside the input fields without affecting the positioning of the label of the field.
     */
    alignInputRight?: boolean | undefined;
    /**
     * Places the label either above (default) or on the side of the control.
     * @default 'above'
     */
    labelPlacement?: "above" | "side" | undefined;
} & React__default.RefAttributes<TextFieldRef>>;

declare type PasswordFieldProps = Omit<TextFieldProps, 'prefix' | 'postfix'> & {
    /**
     * Shows or hides the password visibility toggle button.
     * @default false
     */
    showVisibilityToggle?: boolean;
};
declare const PasswordField: React__default.ForwardRefExoticComponent<Omit<TextFieldProps, "prefix" | "postfix"> & {
    /**
     * Shows or hides the password visibility toggle button.
     * @default false
     */
    showVisibilityToggle?: boolean | undefined;
} & React__default.RefAttributes<TextFieldRef>>;

declare type PasswordFieldRef = FocusableRefValue<HTMLInputElement, HTMLDivElement> & {
    getInputElement(): HTMLInputElement | null;
};

interface PopoverProps extends Pick<PopoverProps$1, 'triggerRef' | 'isNonModal' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | AriaPositionPropsKeys>, SapphireStyleProps, GlobalDomAttributes {
    state?: OverlayTriggerState;
    children: React__default.ReactNode;
    /**
     * Whether to include the default popover padding.
     * @default false
     */
    padded?: boolean;
    /**
     * Whether it has a predefined size constraint. Useful when the popover is
     * used as a dropdown of selects, menus etc.
     * @default false
     */
    defaultMaxWidth?: boolean;
}
/**
 * Helper component intended for internal use within Sapphire in components
 * like Select and Menu.
 *
 * *Popovers* are containers used to display transient content such as menus,
 * options, additional actions etc.
 *
 * @internal
 */
declare const Popover: React__default.ForwardRefExoticComponent<PopoverProps & React__default.RefAttributes<HTMLDivElement>>;

interface PopoverTriggerProps extends Pick<ComponentProps<typeof Popover>, 'placement' | 'offset' | 'crossOffset' | 'shouldFlip' | 'shouldCloseOnInteractOutside' | 'isKeyboardDismissDisabled' | 'scrollRef' | 'boundaryElement'>, OverlayTriggerProps, GlobalDomAttributes {
    children: React__default.ReactNode;
    /**
     * The content of the popover. If you need to render buttons
     * that should close the popover, pass a render function which accepts `close`
     * function in its first argument.
     */
    popoverContent: React__default.ReactNode | ((props: {
        close: () => void;
        titleProps: HTMLAttributes<HTMLElement>;
    }) => React__default.ReactNode);
    /**
     * If true, popover won't have the default padding.
     * @default false
     */
    noPadding?: boolean;
    /**
     * If true, popover won't have the max width.
     * @default false
     */
    noMaxWidth?: boolean;
}
/**
 *
 * `PopoverTrigger` is a generic component which lets you render arbitrary
 * content in a popover overlay which is linked to a trigger, and is accessible
 * as [dialog](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role).
 */
declare const PopoverTrigger: React__default.ForwardRefExoticComponent<PopoverTriggerProps & React__default.RefAttributes<FocusableRefValue<HTMLElement, HTMLElement>>>;

declare type RadioProps = AriaRadioProps & SapphireStyleProps & {
    /**
     * @default 'lg'
     */
    size?: 'lg' | 'md';
    /**
     * If set, the radio button displays note text below the main label.
     */
    note?: ReactNode;
};
declare const Radio: React__default.ForwardRefExoticComponent<AriaRadioProps & SapphireStyleProps & {
    /**
     * @default 'lg'
     */
    size?: "md" | "lg" | undefined;
    /**
     * If set, the radio button displays note text below the main label.
     */
    note?: ReactNode;
} & React__default.RefAttributes<_react_types_shared.FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>>;

interface RadioGroupProps extends Pick<AriaRadioGroupProps, 'orientation' | 'label' | InputBaseKeys | FocusEventsKeys | ValueBasePropsKeys | 'name' | AriaValidationPropsKeys | ValidationIsRequiredKey | BaseComponentKeys>, GlobalDomAttributes, SapphireStyleProps {
    /**
     * A HelpButton to render next to the label
     */
    contextualHelp?: React__default.ReactNode;
    /**
     * The Radio(s) contained within the RadioGroup.
     */
    children: ReactNode;
    /**
     * If set, the radio group becomes invalid with this associated error message.
     */
    error?: ReactNode;
    /**
     * A note to show below the radio group.
     * If the radio group has an error message, this note will be replaced by that.
     * Use {@Link Field.Note} to render the note.
     */
    note?: ReactNode;
    /**
     * @default 'lg'
     */
    size?: 'lg' | 'md';
    /**
     * To visually indicate if this field is required or optional.
     * @default false
     */
    necessityIndicator?: boolean;
    /**
     * Places the label either above (default) or on the side of the control.
     * @default 'above'
     */
    labelPlacement?: 'side' | 'above';
}
declare const RadioGroup: React__default.ForwardRefExoticComponent<RadioGroupProps & React__default.RefAttributes<HTMLDivElement>>;

declare type SearchFieldProps<T extends object> = GlobalDomAttributes & SapphireStyleProps & Pick<AriaSearchFieldProps, 'onSubmit' | 'onClear' | FocusablePropsKeys | TextInputDOMPropsKeys | ValueBasePropsKeys | InputBaseKeys | 'label' | BaseComponentKeys> & AutocompleteProps<T> & {
    /**
     * @default 'lg'
     */
    size?: 'lg' | 'md';
} & {
    /**
     * @deprecated
     * Will be removed in the next major version and the autocomplete
     * functionality in the SearchField will be offered by the Autocomplete
     * component.
     */
    loadingState?: 'loading';
    /**
     * @deprecated
     * Will be removed in the next major version and the autocomplete
     * functionality in the SearchField will be offered by the Autocomplete
     * component.
     */
    loadingSkeletonRowsCount?: number;
    /**
     * This prop is badly named. It is NOT related to a selection state being
     * changed since there is no selection state in this component.
     *
     * This callback simply notifies you when the user filled in the text field
     * by selecting an option from the autocomplete dropdown. Similar to an
     * onClick.
     *
     * @deprecated
     * Will be removed in the next major version and the autocomplete
     * functionality in the SearchField will be offered by the Autocomplete
     * component.
     */
    onSelectionChange?: ComboBoxProps<T>['onSelectionChange'];
};
/**
 * @deprecated - use Autocomplete instead
 */
interface AutocompleteProps<T extends object> {
    /** @deprecated - use Autocomplete instead */
    items?: ComboBoxProps<T>['items'];
    /** @deprecated - use Autocomplete instead */
    defaultItems?: ComboBoxProps<T>['defaultItems'];
    /** @deprecated - use Autocomplete instead */
    children?: ComboBoxProps<T>['children'];
    onOpenChange?: ComboBoxProps<T>['onOpenChange'];
    /** @deprecated - use Autocomplete instead */
    defaultFilter?: (textValue: string, inputValue: string) => boolean;
}
declare type SearchFieldPropsWithRef<T extends object> = SearchFieldProps<T> & {
    /**
     * @deprecated Use `inputRef` instead. Will be removed in v6.
     */
    forwardedRef?: ForwardedRef<HTMLInputElement>;
    /**
     * Ref to the HTMLInput element.
     */
    inputRef?: Ref<HTMLInputElement>;
};
/**
 * Sapphire search input field.
 */
declare function SearchField<T extends object>(propsAndRef: SearchFieldPropsWithRef<T>): React__default.JSX.Element;

/**
 * A wrapper for `useComboBoxState` to make the combobox more like "autocomplete":
 *
 * 1) We don't want to allow opening the combobox "manually".
 * In react-aria terms "manual" opening means where the user explicitly
 * wants to open the popover.
 * In the autocomplete feature we don't want such behaviour because the
 * popover has the role of assisting typing, not "selecting" a value.
 *
 * 2) We don't want to show any options if the query is empty.
 *
 * More details here
 * https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/combobox/src/useComboBox.ts
 */
declare const useComboBoxState: typeof useComboBoxState$1;

interface SegmentedRadioGroupProps extends Omit<AriaRadioGroupProps, keyof Validation<unknown> | 'orientation' | 'label' | 'isReadOnly' | 'description' | 'errorMessage'>, SapphireStyleProps, GlobalDomAttributes {
    /**
     * The SegmentedRadio(s) contained within the SegmentedRadioGroup.
     */
    children: ReactElement<AriaRadioProps> | ReactElement<AriaRadioProps>[];
    /**
     * @default "md"
     */
    size?: 'sm' | 'md' | 'lg';
    'aria-label': string;
    /**
     * Alignment of the radio buttons group.
     * @default "left"
     */
    align?: 'left' | 'center' | 'right' | 'stretch';
}
declare const SegmentedRadioGroup: React__default.ForwardRefExoticComponent<SegmentedRadioGroupProps & React__default.RefAttributes<HTMLDivElement>>;

declare type SegmentedRadioProps = AriaRadioProps & SapphireStyleProps & GlobalDomAttributes;
declare const SegmentedRadio: React__default.ForwardRefExoticComponent<AriaRadioProps & SapphireStyleProps & Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & React__default.RefAttributes<HTMLLabelElement>>;

interface SegmentedTabsProps<T> extends Pick<AriaTabListProps<T>, 'children' | 'keyboardActivation' | 'isDisabled' | CollectionBaseKeys | SingleSelectionSelectionChangeKeys | SingleSelectionSelectedKeyKeys | BaseComponentKeys>, GlobalDomAttributes, SapphireStyleProps {
    children: CollectionChildren<T>;
    /**
     * @default "md"
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * Alignment of tabs' buttons group.
     * @default "left"
     */
    align?: 'left' | 'center' | 'right' | 'stretch';
    /**
     * Whether to keep tab panels mounted in the DOM after they've been visited.
     *
     * When false (default): Tab panels are unmounted when you switch away from them, losing their state.
     * When true: Tab panels are mounted when first visited and then kept in the DOM using CSS display: none,
     * preserving their state when you switch between tabs.
     *
     * @default false
     */
    keepMounted?: boolean;
}
declare const SegmentedTabs: <T extends object>(props: SegmentedTabsProps<T> & {
    ref?: React__default.Ref<HTMLDivElement> | undefined;
}) => React__default.ReactElement;

interface SelectProps<T, M extends 'single' | 'multiple' = 'single'> extends Pick<AriaSelectProps<T, M>, 'children' | 'autoComplete' | 'label' | SelectPropsKeys | FocusEventsKeys | FocusablePropsKeys | BaseComponentKeys | 'value' | 'defaultValue' | 'onChange' | 'selectionMode'>, SapphireStyleProps, GlobalDomAttributes {
    /**
     * The name of the input, used when submitting an HTML form.
     */
    name?: string;
    /**
     * Whether the select is disabled.
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Wheter the select is loading.
     * This should be used to show that the items in the select
     * dropdown are loading.
     */
    loadingState?: 'loading';
    /**
     * Number of loading skeleton rows to render in the loading state. Use it to
     * match amount of actual content rows being loaded as closely as possible.
     *
     * @default 4
     */
    loadingSkeletonRowsCount?: number;
    /**
     * Renders a message indicating the list is empty.
     * Default is a simple "No results" (in given language) message.
     * Passing `null` will hide the popover with the empty state message.
     */
    emptyState?: ReactNode;
    /**
     * An error message which, if present, renders the select in its error state.
     * This also sets the appropriate `aria` attributes to reflect this.
     *
     *  * A `boolean` sets the error state. Can be paired with the "note" prop with Field.Note variant="error"
     * A `ReactNode` sets the error state with an additional error message.
     *
     * *A message is required because an error should always have an explanation
     * on how to fix it.*
     */
    error?: boolean | ReactNode;
    /**
     * A note to show below the input.
     * If the input has an error message, this note will be replaced by that.
     */
    note?: ReactNode;
    /**
     * A HelpButton to render next to the label.
     */
    contextualHelp?: ReactNode;
    /**
     * Whether the element should receive focus on render.
     */
    autoFocus?: boolean;
    /**
     * The placeholder text
     */
    placeholder?: string;
    /**
     * Whether user input is required on the input before form submission.
     */
    isRequired?: boolean;
    /**
     * A description for the field. Provides a hint such as specific requirements for what to choose.
     */
    description?: ReactNode;
    /**
     * Whether the items are currently loading.
     */
    isLoading?: boolean;
    /**
     * Item objects in the collection.
     */
    items?: Iterable<T>;
    /**
     * The currently selected key in the collection (controlled).
     * @deprecated Use `value` instead.
     */
    selectedKey?: Key$1 | null;
    /**
     * The initial selected key in the collection (uncontrolled).
     * @deprecated Use `defaultValue` instead.
     */
    defaultSelectedKey?: Key$1;
    /**
     * The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
     */
    disabledKeys?: Iterable<Key$1>;
    /**
     * @default "lg"
     */
    size?: 'lg' | 'md';
    /**
     * To visually indicate if this field is required or optional.
     * @default false
     */
    necessityIndicator?: boolean;
    /**
     * Places the label either above (default) or on the side of the control.
     * @default 'above'
     */
    labelPlacement?: 'side' | 'above';
    /**
     * Content to show inside the field.
     */
    prefix?: ReactNode;
    /**
     *  Handler that is called when the selection changes.
     * @deprecated Use `onChange` instead.
     */
    onSelectionChange?: (key: Key$1) => void;
}

interface SelectComponentProps<T extends object, M extends 'single' | 'multiple'> extends SelectProps<T, M> {
    /**
     * Function to customize the rendered text in the field for a given selection.
     * Note that if there is only one item seleted, that one is rendered in the field.
     * @default (selectedItems) => `${selectedItems.length} selected`
     */
    renderSelectionText?: (selectedItems: Node<T>[]) => string;
}
declare const Select: <T extends object, M extends "single" | "multiple" = "single">(props: SelectComponentProps<T, M> & {
    ref?: React__default.Ref<HTMLDivElement> | undefined;
}) => React__default.ReactElement;

declare type MultiSelectProps<T> = Omit<SelectProps<T>, 'onSelectionChange' | 'defaultSelectedKey' | 'selectedKey' | 'value' | 'defaultValue' | 'onChange' | 'selectionMode'> & WithResolveSelectAllToKeysKeys<Pick<MultipleSelection, MultipleSelectionKeys>> & {
    /**
     * @deprecated
     */
    selectionMode?: MultipleSelection['selectionMode'];
    /**
     * The function to customize the rendered text in the field for a given selection.
     *
     * Note that if there is only one item seleted, that one is rendered in the field.
     *
     * Note that if the selection is the string "all" it refers to the explicit
     * choice of selecting all items (even if not all were rendered), this can
     * be caused by the user pressing ctrl+a or cmd+a.
     *
     * @default (selection, selectedItems) => selection === 'all' ? 'All selected' : `${selection.size} selected`
     *
     */
    renderSelectionText?: (selection: Selection$1, selectedItems: Node<T>[]) => string;
} & Pick<SapphireSelectionManagerOptions, 'resolveSelectAllToKeys'>;
declare const MultiSelect: <T extends object>(props: MultiSelectProps<T> & {
    ref?: React__default.Ref<HTMLDivElement> | undefined;
}) => React__default.ReactElement;

/**
 * The SelectButtons shares a lot with the Select, but not everything.
 * So we must pick only the relevant props.
 */
interface SelectButtonProps<T, M extends 'single' | 'multiple' = 'single'> extends Omit<SelectProps<T, M>, 'size'>, SapphireStyleProps {
    /**
     * Visual variations
     * @default 'tertiary'
     */
    variant?: 'primary' | 'secondary' | 'tertiary';
    /**
     * @default 'md'
     */
    size?: 'lg' | 'md' | 'sm';
    /**
     * Handler that is called when the selection changes.
     *
     * @deprecated Use `onChange` instead.
     */
    onSelectionChange?: (key: Key | null) => void;
    /**
     * Function to customize the rendered text in the field for a given selection.
     * Note that if there is only one item seleted, that one is rendered in the field.
     * @default (selectedItems) => `${selectedItems.length} selected`
     */
    renderSelectionText?: (selectedItems: Node<T>[]) => string;
}
declare const SelectButton: <T extends object, M extends "single" | "multiple" = "single">(props: SelectButtonProps<T, M> & {
    ref?: React__default.Ref<HTMLDivElement> | undefined;
}) => React__default.ReactElement;

interface SearchableSelectProps<T extends object> extends Omit<SelectProps<T, 'single'>, 'onOpenChange' | 'selectionMode'>, Pick<AriaComboBoxOptions<T>, 'inputValue' | 'onInputChange' | 'defaultInputValue' | 'defaultItems' | 'onOpenChange' | AriaComboBoxPropsKeys> {
    /**
     * Filter function used when `items` is not controlled, to determine which
     * items should be included in the dropdown, based on a search query.
     * By default, a string "includes" filter is used.
     *
     * TODO: change the input to the filter to take the whole node.
     */
    defaultFilter?: (textValue: string, searchQuery: string) => boolean;
    selectTextOnOpen?: boolean;
    /**
     * @deprecated
     */
    selectionMode?: SelectProps<T>['selectionMode'];
}
declare const SearchableSelect: <T extends object>(props: SearchableSelectProps<T> & {
    ref?: React__default.Ref<HTMLDivElement> | undefined;
}) => React__default.ReactElement;

/**
 * This file started off from the @react-aria's `useComboBoxState`
 * implementation which can be found here
 * https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/combobox/src/useComboBoxState.ts
 *
 * At the time of writing, @react-aria did not directly support select or
 * combobox with multiple selection. The reason being that there is no such
 * ARIA pattern and some interactions of a multiselect can't be translated to a
 * native <select> which is what `useSelect` tries to emulate.
 *
 * Some relevant discussions can be found here:
 * https://github.com/adobe/react-spectrum/issues/2140
 * https://github.com/adobe/react-spectrum/discussions/2218
 */

declare type FilterFn<T> = (node: Node<T>, inputValue: string) => boolean;
declare type MultiComboBoxStateOptions<T> = Omit<ComboBoxProps<T>, keyof SingleSelection | 'children' | 'allowsCustomValue'> & MultipleSelection & CollectionStateBase<T> & {
    /** The filter function used to determine if a option should be included in
     * the combo box list. */
    filter: FilterFn<T>;
    /** Whether the combo box allows the menu to be open when the collection is
     * empty. */
    allowsEmptyCollection?: boolean;
    /** Whether the combo box menu should close on blur. */
    shouldCloseOnBlur?: boolean;
    noInputResetOnSelect?: boolean;
    /** Render the input value based on the selection */
    renderSelectionText: (selection: Selection$1, selectedItems: Node<T>[]) => string;
    /**
     * Whether selected items should be grouped in a section at the top.
     * @default true
     */
    groupSelectedItemsOnTop?: boolean;
};

declare type SearchableMultiSelectProps<T extends object> = Omit<MultiSelectProps<T>, 'resolveSelectAllToKeys'> & Pick<MultipleSelection, 'onSelectionChange'> & Pick<AriaComboBoxOptions<T>, 'defaultItems' | 'inputValue' | 'defaultInputValue' | 'onInputChange' | 'name' | AriaComboBoxPropsKeys | BaseComponentKeys> & Pick<MultiComboBoxStateOptions<T>, 'groupSelectedItemsOnTop' | 'noInputResetOnSelect'> & {
    /**
     * Filter function used when `items` is not controlled, to determine which
     * items should be included in the dropdown, based on a search query. By
     * default, a "String.includes" filter is used on the "textValue" of the
     * node.
     */
    filter?: (node: Node<T>, searchQuery: string) => boolean;
};
declare const SearchableMultiSelect: <T extends object>(props: Omit<MultiSelectProps<T>, "resolveSelectAllToKeys"> & Pick<MultipleSelection, "onSelectionChange"> & Pick<AriaComboBoxOptions<T>, "name" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-details" | "shouldFocusWrap" | "defaultItems" | "inputValue" | "defaultInputValue" | "onInputChange"> & Pick<MultiComboBoxStateOptions<T>, "groupSelectedItemsOnTop" | "noInputResetOnSelect"> & {
    /**
     * Filter function used when `items` is not controlled, to determine which
     * items should be included in the dropdown, based on a search query. By
     * default, a "String.includes" filter is used on the "textValue" of the
     * node.
     */
    filter?: ((node: Node<T>, searchQuery: string) => boolean) | undefined;
} & {
    ref?: React__default.Ref<HTMLDivElement> | undefined;
}) => React__default.ReactElement;

/**
 * Based on: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/divider/src/Divider.tsx
 */

interface SeparatorProps extends DOMProps$1, GlobalDomAttributes, SapphireStyleProps {
    /**
     * The orientation of the separator.
     *
     * @default 'horizontal'
     */
    orientation?: 'horizontal' | 'vertical';
}
declare const Separator: React__default.ForwardRefExoticComponent<SeparatorProps & React__default.RefAttributes<HTMLElement>>;

interface SkeletonProps extends Pick<SapphireStyleProps, 'UNSAFE_style' | 'UNSAFE_className'>, GlobalDomAttributes {
    /**
     * Index of the row that the bar is rendred in (eg. within lists and tables).
     * Used for delaying animation for each row.
     */
    index?: number;
}

declare type SkeletonBlockProps = SkeletonProps;

interface SkeletonTextFixedWidth {
    /**
     * Width type. Will be used to determine width calculation.
     * @default 'randomPct'
     * */
    widthType?: 'fixed';
    /** Allowed width of a skeleton */
    width: number;
    minWidth?: never;
    maxWidth?: never;
}
interface SkeletonTextRandomPxWidth {
    /**
     * Width type. Will be used to determine width calculation.
     * @default 'randomPct'
     */
    widthType?: 'randomPx';
    /** Min width of skeleton. Used internally to calculate width of a component */
    minWidth?: number;
    /** Max width of skeleton. Used internally to calculate width of a component */
    maxWidth?: number;
}
interface SkeletonTextRandomPcWidth {
    /**
     * Width type. Will be used to determine width calculation.
     * @default 'randomPct'
     */
    widthType?: 'randomPct';
    /** Min width of skeleton. Used internally to calculate width of a component */
    minWidth?: number;
    /** Max width of skeleton. Used internally to calculate width of a component */
    maxWidth?: number;
}
declare type SkeletonTextProps = SkeletonProps & (SkeletonTextFixedWidth | SkeletonTextRandomPxWidth | SkeletonTextRandomPcWidth);

declare type SkeletonCircleProps = SkeletonProps;

interface SkeletonFromProps extends SkeletonProps, SapphireStyleProps {
    /** Content which properties would be inferred by skeleton */
    children: React__default.ReactElement;
}

declare const Skeleton: {
    Block: React$1.FC<SkeletonProps>;
    Circle: React$1.FC<SkeletonProps>;
    Text: React$1.FC<SkeletonTextProps>;
    From: React$1.FC<SkeletonFromProps>;
};

declare type SpinnerProps = {
    /**
     * @default 'm'
     */
    size?: '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * The color variant of the spinner. Using `default` will use predefined colors, while `inherit` will use the text color.
     * @default 'default'
     */
    variant?: 'default' | 'inherit';
} & SapphireStyleProps & GlobalDomAttributes & ({
    'aria-labelledby': string;
} | {
    'aria-label': string;
});
/**
 * Animated element that show that some data is still loading or some process
 * is in progress. The hidden label is required for accessibility reasons.
 */
declare const Spinner: ({ size, variant, ...props }: SpinnerProps) => JSX.Element;

interface SwitchProps extends InputBase, FocusableProps, FocusableDOMProps, Pick<AriaSwitchProps, BaseComponentKeys | 'children' | AriaLabelingPropsKeys | 'name' | 'id' | AriaTogglePropsEssentialKeys | 'value'>, Pick<AriaLabelingProps, AriaLabelingPropsKeys>, SapphireStyleProps, GlobalDomAttributes {
    /**
     * @default
     */
    size?: 'lg' | 'md';
    /**
     * If set, the switch displays note text below the main label.
     */
    note?: ReactNode;
}
declare const Switch: React__default.ForwardRefExoticComponent<SwitchProps & React__default.RefAttributes<_react_types_shared.FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>>;

interface TabsProps<T> extends Pick<AriaTabListProps<T>, 'isDisabled' | 'keyboardActivation' | 'children' | CollectionBaseKeys | SingleSelectionSelectionChangeKeys | BaseComponentKeys>, Pick<SingleSelection, SingleSelectionSelectedKeyKeys>, Pick<UnderlinedTabsProps, 'size' | 'align'>, SapphireStyleProps {
    children: CollectionChildren<any>;
    /**
     * Whether to keep tab panels mounted in the DOM after they've been visited.
     *
     * When false (default): Tab panels are unmounted when you switch away from them, losing their state.
     * When true: Tab panels are mounted when first visited and then kept in the DOM using CSS display: none,
     * preserving their state when you switch between tabs.
     *
     * @default false
     */
    keepMounted?: boolean;
}
declare type TabsSize = 'sm' | 'md' | 'lg';
interface UnderlinedTabsProps {
    /**
     * The size of the tabs.
     *
     * @default 'md'
     */
    size?: TabsSize;
    /**
     * Whether the bottom border should be hidden.
     *
     * @default false
     */
    hideBorderBottom?: boolean;
    /**
     * Whether to render the tabs as an inline element.
     *
     * @default false
     */
    isInline?: boolean;
    /**
     * Alignment of tabs' buttons group.
     * @default "left"
     */
    align?: 'left' | 'center' | 'right';
}
interface TabProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
    isDisabled?: boolean;
    isActive?: boolean;
    children: React.ReactNode;
}

declare const ButtonTabs: React__default.ForwardRefExoticComponent<TabsProps<object> & React__default.RefAttributes<HTMLDivElement>>;

interface ButtonNavTabsProps extends GlobalDomAttributes, SapphireStyleProps, DOMProps$1 {
    children: React__default.ReactNode;
}
declare const ButtonNavTabs: React__default.ForwardRefExoticComponent<ButtonNavTabsProps & React__default.RefAttributes<HTMLDivElement>>;

declare const ButtonNavTab: React__default.ForwardRefExoticComponent<TabProps & React__default.RefAttributes<HTMLAnchorElement | HTMLDivElement>>;

declare const UnderlinedTabs: React__default.ForwardRefExoticComponent<TabsProps<object> & UnderlinedTabsProps & React__default.RefAttributes<HTMLDivElement>>;

interface UnderlinedTabListProps extends UnderlinedTabsProps, SapphireStyleProps, DOMProps$1 {
    children: React__default.ReactNode;
    tabListProps?: TabListAria['tabListProps'];
}
declare type TabElementType = HTMLDivElement | HTMLAnchorElement;

declare type UnderlinedNavTabsProps = UnderlinedTabListProps;
declare const UnderlinedNavTabs: React$1.ForwardRefExoticComponent<UnderlinedTabListProps & React$1.RefAttributes<HTMLDivElement>>;

declare const UnderlinedNavTab: React__default.ForwardRefExoticComponent<TabProps & React__default.RefAttributes<TabElementType>>;

declare type VerticalPlacement = 'top' | 'bottom';
declare type HorizontalPlacement = 'left' | 'right';
declare type ToastRegionProps = SapphireStyleProps & {
    /**
     * Placement of the Toast notifications on the page.
     */
    placement?: VerticalPlacement | `${VerticalPlacement}-${HorizontalPlacement}`;
};

declare type ToastProviderProps = ToastRegionProps & {
    children: React__default.ReactNode;
};
/**
 * Sapphire toast provider.
 * Render this at the root of your app.
 */
declare const ToastProvider: ({ children, placement, ...props }: ToastProviderProps) => React__default.JSX.Element;

interface Toast {
    close: () => void;
}
declare type ShowToastFn = (content: ReactNode, options?: ShowToastOptions) => Toast;
interface ShowToastOptions {
    /**
     * Handler that is called when the toast is closed, either by the user
     * or after a timeout.
     */
    onClose?: () => void;
    /**
     * A timeout to automatically close the toast after, in milliseconds.
     * Note that if the toast is hovered or interacted with, the timeout is
     * paused.
     *
     * @default 3000
     */
    timeout?: number;
    variant?: 'neutral' | 'success' | 'error';
    /**
     * Optional title for the toast.
     */
    title?: ReactNode;
}
declare const useShowToast: () => ShowToastFn;

declare type ToggleButtonProps = Pick<AriaToggleButtonProps<'button'>, BaseComponentKeys | 'children' | 'isDisabled' | 'autoFocus' | 'onFocus' | 'onBlur'> & SapphireStyleProps & GlobalDomAttributes & PressEvents & {
    /**
     * @default 'md'
     */
    size?: 'lg' | 'md' | 'sm';
    onChange?: (selected: boolean) => void;
    isSelected?: boolean;
    defaultSelected?: boolean;
} & (ButtonWithIconProps | ButtonWithoutIconProps);
/**
 * A button with a toggleable `isSelected` state. By default, the selection is toggled when the
 * button is pressed, allowing user to switch between two states or modes.
 */
declare const ToggleButton: React__default.ForwardRefExoticComponent<ToggleButtonProps & React__default.RefAttributes<_react_types_shared.FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;

declare type ToggleIconButtonProps = Pick<AriaToggleButtonProps, 'children' | 'isDisabled' | PressEventsKeys | FocusablePropsKeys | 'id' | AriaLabelingPropsKeys | AriaTogglePropsEssentialKeys> & SapphireStyleProps & GlobalDomAttributes & PressEvents & {
    /**
     * @default 'md'
     */
    size?: 'lg' | 'md' | 'sm';
    onChange?: (selected: boolean) => void;
    isSelected?: boolean;
    defaultSelected?: boolean;
    /**
     * @default 'primary'
     */
    variant?: 'primary' | 'secondary';
} & ({
    /**
     * The button's label. This is not shown on the screen but it is required
     * for accessibility reasons since only an Icon is shown.
     */
    'aria-label': string;
    'aria-hidden'?: never;
} | {
    'aria-hidden': true | 'true';
    'aria-label'?: never;
});
/**
 * Must have an `icon`, but behaves like a ToggleButton. By default, the selection is toggled when the
 * button is pressed, allowing user to switch between two states or modes.
 */
declare const ToggleIconButton: React__default.ForwardRefExoticComponent<ToggleIconButtonProps & React__default.RefAttributes<_react_types_shared.FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;

declare type TooltipChildren = React__default.ReactNode | ((props: React__default.HTMLAttributes<HTMLElement> & {
    ref: React__default.Ref<HTMLElement>;
}) => React__default.ReactNode);
declare type TooltipProps = Pick<AriaTooltipProps, BaseComponentKeys> & Pick<TooltipTriggerProps, 'trigger' | 'isDisabled' | OverlayTriggerPropsKeys> & SapphireStyleProps & GlobalDomAttributes & {
    /**
     * Tooltip text.
     */
    title: ReactNode;
    /**
     * The trigger for the tooltip. It can be:
     * - A focusable Sapphire component (preferred)
     * - A native html element
     * - A function that accepts trigger props and renders any component,
     *   passing the trigger props.
     */
    children: TooltipChildren;
    /**
     * 	The placement of the tooltip element with respect to its anchor element.
     * @default 'bottom'
     */
    placement?: Placement;
    /**
     * Delay time for opening the tooltip (only on hover) in milliseconds. Keyboard focus will
     * always open it immediately for better accessibility. It can be either set to 0s or in a
     * range of 300 - 500ms.
     * @default 500
     */
    delay?: number;
    /**
     * The delay time for the tooltip to close
     */
    closeDelay?: number;
};
declare const Tooltip: React__default.ForwardRefExoticComponent<Pick<AriaTooltipProps, "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-details"> & Pick<TooltipTriggerProps, "isOpen" | "defaultOpen" | "onOpenChange" | "isDisabled" | "trigger"> & SapphireStyleProps & Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & {
    /**
     * Tooltip text.
     */
    title: ReactNode;
    /**
     * The trigger for the tooltip. It can be:
     * - A focusable Sapphire component (preferred)
     * - A native html element
     * - A function that accepts trigger props and renders any component,
     *   passing the trigger props.
     */
    children: TooltipChildren;
    /**
     * 	The placement of the tooltip element with respect to its anchor element.
     * @default 'bottom'
     */
    placement?: Placement | undefined;
    /**
     * Delay time for opening the tooltip (only on hover) in milliseconds. Keyboard focus will
     * always open it immediately for better accessibility. It can be either set to 0s or in a
     * range of 300 - 500ms.
     * @default 500
     */
    delay?: number | undefined;
    /**
     * The delay time for the tooltip to close
     */
    closeDelay?: number | undefined;
} & React__default.RefAttributes<_react_types_shared.FocusableRefValue<HTMLDivElement, HTMLDivElement>>>;

interface ThemeRootProps extends SapphireStyleProps, Omit<SapphireViewStyleProps, 'backgroundColor' | 'color'>, DOMProps$1, Omit<DOMAttributes, 'children' | 'style' | 'className' | 'dangerouslySetInnerHTML'> {
    /**
     * The theme variation, if the theme supports any.
     */
    variant?: ThemeVariant;
    noSurface?: boolean;
    children: ReactNode;
}
/**
 * ThemeRoot wraps the children with an element that provides the design tokens
 * in the DOM subtree. Also renders the necessary background surface for the
 * theme's components to be rendered on.
 */
declare const ThemeRoot: React__default.ForwardRefExoticComponent<ThemeRootProps & React__default.RefAttributes<HTMLDivElement>>;

declare type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
interface TypographyHeadingProps extends DOMProps$1, TextStyleProps, SapphireStyleProps, GlobalDomAttributes {
    children: React__default.ReactNode;
    /**
     * The level of the heading.
     */
    level: HeadingLevel;
    /**
     * The semantic color of the text
     * @default 'primary'
     */
    color?: 'primary' | 'secondary' | 'positive' | 'negative' | 'warning' | 'informative';
    elementType?: `h${HeadingLevel}` | ElementType;
}

interface TypographySubheadingProps extends DOMProps$1, TextStyleProps, SapphireStyleProps, GlobalDomAttributes {
    children: React__default.ReactNode;
    /**
     * The actual DOM element to render.
     * @default 'div'
     */
    elementType?: string;
    /**
     * Sets level of the hierarchy of the subheading.
     * @default 'md'
     */
    size?: 'md' | 'sm';
    /**
     * The semantic color of the text
     * @default 'primary'
     */
    color?: 'primary' | 'secondary' | 'positive' | 'negative' | 'warning' | 'informative';
    /**
     * If text is bold
     * @default false
     */
    isBold?: boolean;
}

interface TypographyBodyProps extends DOMProps$1, TextStyleProps, SapphireStyleProps, GlobalDomAttributes {
    children: React__default.ReactNode;
    /**
     * The actual DOM element to render.
     * @default 'p'
     */
    elementType?: string;
    /**
     * Sets the level of the hierarchy of the text.
     * @default 'md'
     */
    size?: 'lg' | 'md' | 'sm' | 'xs';
    /**
     * The semantic color of the text
     * @default 'primary'
     */
    color?: 'primary' | 'secondary' | 'positive' | 'negative' | 'warning' | 'informative';
    /**
     * If text should be underlined.
     * @default false
     */
    isUnderlined?: boolean;
    /**
     * If text is bold.
     * @default false
     */
    isBold?: boolean;
    /**
     * If text is semibold.
     * @default false
     */
    isSemibold?: boolean;
}

interface TypographyCaptionProps extends DOMProps$1, TextStyleProps, SapphireStyleProps, GlobalDomAttributes {
    children: React__default.ReactNode;
    /**
     * The actual DOM element to render.
     * @default 'div'
     */
    elementType?: string;
    /**
     * Sets the level of the hierarchy of the caption.
     * @default 'md'
     */
    size?: 'md' | 'sm';
    /**
     * The semantic color of the text
     * @default 'primary'
     */
    color?: 'primary' | 'secondary' | 'positive' | 'negative' | 'warning' | 'informative';
}

declare const Typography: {
    Heading: ComponentType<TypographyHeadingProps>;
    Subheading: ComponentType<TypographySubheadingProps>;
    Body: ComponentType<TypographyBodyProps>;
    Caption: ComponentType<TypographyCaptionProps>;
};

interface FieldProps extends GlobalDomAttributes, SapphireStyleProps, DOMProps$1 {
    /**
     * @default 'large'
     */
    size?: 'lg' | 'md';
    isDisabled?: boolean;
    noShrink?: boolean;
    /**
     * Sets wrapping element type
     * @default 'div'
     */
    elementType?: 'div' | 'fieldset';
    children?: React__default.ReactNode;
    /**
     * @default 'above'
     */
    labelPlacement?: 'side' | 'above';
    /**
     * Controls like RadioGroup require label to be aligned with the first item,
     * while it's center aligned for TextFields.
     * Only relevant for  labelPlacement="side"
     * @default 'center'
     */
    labelVerticalAlignment?: 'center' | 'top';
    /**
     * Opt out of the default width
     * @default false
     */
    noDefaultWidth?: boolean;
}

declare const _Field: React$1.ForwardRefExoticComponent<FieldProps & React$1.RefAttributes<HTMLDivElement | HTMLFieldSetElement>> & {
    Control: ({ children, isGroup, }: {
        children?: React$1.ReactNode;
        isGroup?: boolean | undefined;
    }) => React$1.JSX.Element;
    Label: ({ elementType: CustomElement, children, }: {
        elementType?: "div" | "legend" | undefined;
        children?: React$1.ReactNode;
    }) => React$1.JSX.Element;
    Footer: ({ children, }: {
        children?: React$1.ReactNode;
    }) => React$1.JSX.Element;
    Note: ({ children, variant, ...props }: {
        children?: React$1.ReactNode;
        variant?: "error" | "warning" | "success" | "neutral" | undefined;
    } & React$1.HTMLAttributes<HTMLElement>) => React$1.JSX.Element;
    Context: ({ children, descriptionProps, }: {
        children: React$1.ReactNode;
        descriptionProps?: React$1.HTMLAttributes<HTMLElement> | undefined;
    }) => React$1.JSX.Element;
};

declare type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & GlobalDomAttributes & {
    /**
     * @default 'lg'
     */
    size?: 'lg' | 'md';
    /**
     * A HelpButton to render next to the label.
     */
    contextualHelp?: React__default.ReactNode;
    /**
     * To visually indicate if this field is required or optional.
     */
    necessityIndicator?: 'required' | 'optional';
    children?: React__default.ReactNode;
};
declare const Label: ({ size, contextualHelp, necessityIndicator, children, ...htmlLabelProps }: LabelProps) => React__default.JSX.Element;

declare type ModalProps = AriaOverlayProps & AriaDialogProps & GlobalDomAttributes & {
    backdropProps?: HTMLAttributes<HTMLDivElement>;
    onCloseTransitionDone?: () => void;
    children: (props: {
        titleProps: DOMAttributes$1<FocusableElement>;
        transitionState: TransitionStatus;
    }) => React__default.ReactNode;
};
/**
 * Internal helper component for building accessible dialog modals without
 * a trigger (for the moment).
 *
 * A *modal* is a piece of UI on top of the whole screen which is auto focused
 * and it contains the focus scope. It also disables page scroll and adds
 * "aria-hidden" to everything except the modal.
 *
 * A *dialog* refers to a a few accessibility properties marking up the
 * overlayed content as a dialog. The "titleProps" from the render function in
 * "children" should be applied on the element which contains the title text of
 * the dialog.
 *
 * In react-aria a modal and a dialog are separate constructs, but to get a
 * fully accessible modal you always need to render a dialog inside; hence this
 * component. https://react-spectrum.adobe.com/react-aria/useModalOverlay.html#features
 *
 * TODO: add support for optionally binding the trigger to the modal (see
 * `useOverlayTrigger` from `@react-aria/overlays`).
 */
declare const Modal: React__default.ForwardRefExoticComponent<AriaOverlayProps & AriaDialogProps & Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & {
    backdropProps?: React__default.HTMLAttributes<HTMLDivElement> | undefined;
    onCloseTransitionDone?: (() => void) | undefined;
    children: (props: {
        titleProps: DOMAttributes$1<FocusableElement>;
        transitionState: TransitionStatus;
    }) => React__default.ReactNode;
} & React__default.RefAttributes<HTMLDivElement>>;

interface BulkActionsBarProps extends GlobalDomAttributes, SapphireStyleProps {
    /**
     * Title displayed on the left side of the bar.
     * Typically used to show number of selected items.
     */
    title: React__default.ReactNode;
    /**
     * Action buttons rendered inside a {@link ButtonGroup} on the right side of the bar.
     */
    actions: ComponentProps<typeof ButtonGroup>['children'];
}
/**
 * Helper component to be used together with {@link InteractiveTable}
 * or {@link InteractiveList} to implement the layout and appearance of
 * Sapphire UI for bulk actions.
 */
declare const BulkActionsBar: React__default.ForwardRefExoticComponent<BulkActionsBarProps & React__default.RefAttributes<HTMLDivElement>>;

/**
 * @deprecated TableSelectionActionBar is renamed to BulkActionsBar. Please use BulkActionsBar instead.
 */
declare const TableSelectionActionBar: React$1.ForwardRefExoticComponent<BulkActionsBarProps & React$1.RefAttributes<HTMLDivElement>>;
/**
 * @deprecated TableSelectionActionBar is renamed to BulkActionsBar. Please use BulkActionsBarProps instead.
 */
declare type TableSelectionActionBarProps = BulkActionsBarProps;

export { AlertDialog, AlertDialogProps, Avatar, AvatarProps, Backdrop, BackdropProps, Badge, BadgeProps, BreakpointKey, SapphireBreakpointProvider as BreakpointProvider, BulkActionsBar, BulkActionsBarProps, Button, ButtonGroup, ButtonGroupProps, ButtonNavTab, ButtonNavTabs, ButtonNavTabsProps, ButtonProps, ButtonTabs, ButtonVariant, ButtonWithIconProps, ButtonWithoutIconProps, Calendar, CalendarGranularity, CalendarProps, CalendarView, CellOverflow, CellSpacing, _Checkbox as Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ColSizeProps, ColStyleProps, ColumnAlignment, ConfirmationDialog, ConfirmationDialogProps, DangerDialog, DangerDialogProps, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, DateSegmentProps, Dialog, DialogProps, DialogTitle, EditableCellProps, FeedbackMessage, FeedbackMessageProps, _Field as Field, FieldProps, Fieldset, FieldsetProps, Flex, FlexProps, GlobalDomAttributes, Grid, GridProps, _HelpButton as HelpButton, HelpButtonProps, Icon, IconButton, IconButtonProps, IconProps, InteractiveList, InteractiveListItem, InteractiveListItemProps, InteractiveListProps, _InteractiveTable as InteractiveTable, InteractiveTableBodyProps, InteractiveTableCellProps, InteractiveTableColumnProps, InteractiveTableProps, InteractiveTableRowProps, Label, LabelProps, Link, LinkProps, List, ListBox, ListBoxItem, ListBoxItemProps, ListBoxItemSkeleton, ListBoxPopover, ListBoxPopoverProps, ListBoxProps, _ListItem as ListItem, ListItemButton, ListItemButtonGroupProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, Menu, MenuItem, MenuItemProps, MenuProps, MenuSection, MenuSectionProps, Modal, ModalLayout, ModalLayoutContext, ModalLayoutContextProps, ModalLayoutHeaderProps, ModalLayoutProps, ModalLayoutSectionProps, ModalProps, MultiSelect, MultiSelectProps, NotificationBadge, NotificationBadgeProps, PageGrid, PageGridProps, Pagination, PaginationProps, PaginationState, Panel, PanelProps, PasswordField, PasswordFieldProps, PasswordFieldRef, Popover, PopoverProps, PopoverTrigger, PopoverTriggerProps, PredefinedDate, PredefinedDateRange, Radio, RadioGroup, RadioGroupProps, RadioProps, RangeCalendar, RangeCalendarProps, SapphireProvider, SapphireProviderProps, SapphireStyleProps, SapphireViewStyleProps, SearchField, SearchFieldProps, SearchFieldPropsWithRef, SearchableMultiSelect, SearchableMultiSelectProps, SearchableSelect, SearchableSelectProps, SegmentedRadio, SegmentedRadioGroup, SegmentedRadioGroupProps, SegmentedRadioProps, SegmentedTabs, SegmentedTabsProps, Select, SelectButton, SelectButtonProps, SelectComponentProps, ListBoxItem as SelectItem, ListBoxItemProps as SelectItemProps, SelectProps, Separator, SeparatorProps, ShowToastFn, ShowToastOptions, Skeleton, SkeletonBlockProps, SkeletonCircleProps, SkeletonFromProps, SkeletonTextProps, SortDescriptor, Spinner, SpinnerProps, StickyPosition, Switch, SwitchProps, TabProps, _Table as Table, TableBodyProps, TableCellProps, TableContainerProps, TableHeaderCellProps, TableHeaderProps, TableHeaderRowProps, TableProps, TableRowProps, TableSelectionActionBar, TableSelectionActionBarProps, TabsProps, TextArea, TextAreaProps, TextField, TextFieldProps, TextFieldRef, TextStyleProps, ThemeRoot, ThemeRootProps, ThemeVariant, Toast, ToastProvider, ToastProviderProps, ToggleButton, ToggleButtonProps, ToggleIconButton, ToggleIconButtonProps, Tooltip, TooltipIfNeeded, TooltipIfNeededProps, TooltipProps, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, UnderlinedNavTab, UnderlinedNavTabs, UnderlinedNavTabsProps, UnderlinedTabs, UnderlinedTabsProps, View, isDateOutsideValidRange, isEndDateBeforeStartDate, rangeContainsUnavailableDate, useBreakpointContext, useButton, useComboBoxState, useCustomDateFormatLocale, useMatchedBreakpoints, usePreventTouchEnd, useSapphireStyleProps, useScrollCheck, useShowToast, useTableRowContext, useTextStyleProps, useThemeCheck, useThemeContext, withTruthyZero };