@danske/sapphire-react-lab 0.76.0

package/build/index.d.ts

@@ -0,0 +1,746 @@
+import * as _react_types_shared from '@react-types/shared';
+import { PressEvents, Validation, RangeValue, HelpTextProps, LabelableProps, CollectionBase, DOMProps, Expandable, ItemProps } from '@react-types/shared';
+import * as React from 'react';
+import React__default, { ReactNode, ComponentType } from 'react';
+import { AriaToggleButtonProps } from '@react-aria/button';
+import { SapphireStyleProps, PopoverTriggerProps, HeadingProps, TextStyleProps } from '@danske/sapphire-react';
+import { DateValue } from '@internationalized/date';
+import { AriaCalendarProps, AriaRangeCalendarProps } from '@react-aria/calendar';
+import { RangeCalendarStateOptions as RangeCalendarStateOptions$1 } from '@react-stately/calendar';
+import { DateValue as DateValue$1, AriaDatePickerProps, AriaDateRangePickerProps } from '@react-aria/datepicker';
+import { DateRangePickerStateOptions as DateRangePickerStateOptions$1 } from '@react-stately/datepicker';
+import { ComboBoxProps } from '@react-types/combobox';
+import { AriaSearchFieldProps } from '@react-aria/searchfield';
+import { AriaToastRegionProps } from '@react-aria/toast';
+import { ToastState } from '@react-stately/toast';
+export { useLocale } from '@react-aria/i18n';
+
+declare type SapphireToggleButtonProps = Omit<AriaToggleButtonProps<'button'>, 'elementType' | 'type'> & SapphireStyleProps & PressEvents & {
+    /**
+     * @default 'medium'
+     */
+    size?: 'large' | 'medium' | 'small';
+    onChange?: (selected: boolean) => void;
+    isSelected?: boolean;
+    defaultSelected?: boolean;
+} & (ButtonWithIconProps | ButtonWithoutIconProps);
+declare type 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';
+};
+declare type ButtonWithoutIconProps = {
+    icon?: never;
+    iconAlign?: never;
+};
+/**
+ * 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<SapphireToggleButtonProps & React__default.RefAttributes<_react_types_shared.FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
+
+declare type CalendarView = 'days' | 'months' | 'years';
+declare type SapphireCalendarStateOptions = {
+    /**
+     * 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;
+};
+
+interface SapphireCalendarProps extends SapphireStyleProps, Omit<AriaCalendarProps<DateValue>, 'validationState' | 'errorMessage'>, SapphireCalendarStateOptions {
+    /**
+     * Whether week numbers are visible as a first column
+     */
+    showWeekNumbers?: boolean;
+}
+/**
+ * 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: ({ showWeekNumbers, ...props }: Omit<SapphireCalendarProps, 'locale'>) => JSX.Element;
+
+declare type OriginalOnChange$1<T extends DateValue> = NonNullable<RangeCalendarStateOptions$1<T>['onChange']>;
+declare type RangeCalendarStateOptions<T extends DateValue, P extends string> = Omit<RangeCalendarStateOptions$1<T>, 'onChange'> & {
+    onChange?: (value: Parameters<OriginalOnChange$1<T>>[0], predefinedRange?: P) => ReturnType<OriginalOnChange$1<T>>;
+};
+
+declare type PredefinedDateRange = {
+    label: string;
+    dateRange: {
+        start: DateValue;
+        end: DateValue;
+    };
+};
+interface SapphireRangeCalendarProps<P extends string = string> extends SapphireStyleProps, Omit<AriaRangeCalendarProps<DateValue>, 'validationState' | 'errorMessage' | 'allowsNonContiguousRanges' | 'onChange'> {
+    /**
+     * 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;
+}
+/**
+ * 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 string>({ showWeekNumbers, showTwoMonths, allowUnavailableDatesWithinRange, predefinedRanges, ...props }: SapphireRangeCalendarProps<T>, forwardedRef: React__default.ForwardedRef<HTMLDivElement>) => JSX.Element;
+declare const RangeCalendar: <T extends string>(props: SapphireRangeCalendarProps<T> & {
+    ref?: React__default.ForwardedRef<HTMLDivElement> | undefined;
+}) => ReturnType<typeof _RangeCalendar>;
+
+declare type SpinnerProps = {
+    /**
+     * @default 'm'
+     */
+    size?: 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+} & SapphireStyleProps & ({
+    '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, ...props }: SpinnerProps) => JSX.Element;
+
+declare type NotificationBadgeProps = {
+    /**
+     * 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 'medium'
+     */
+    size?: 'large' | 'medium' | 'small';
+    /**
+     * Boolean to show/hide the badge
+     *
+     * @default true
+     */
+    show?: boolean;
+} & SapphireStyleProps & ({
+    'aria-labelledby': string;
+} | {
+    'aria-label': string;
+});
+declare const NotificationBadge: (props: NotificationBadgeProps) => JSX.Element;
+
+interface SapphireFilterDropdownProps extends SapphireStyleProps, Pick<PopoverTriggerProps, 'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'> {
+    /**
+     * "Filter by" label, shown inside the trigger button.
+     */
+    label: ReactNode;
+    /**
+     * Filter value, shown inside the trigger button. `null`, `undefined` and empty string are
+     * considered as unset value.
+     */
+    value: ReactNode;
+    /**
+     * Filtering UI controls, rendered in a popover.
+     */
+    children: ReactNode;
+    /**
+     * Called when:
+     * - `Enter` is pressed on form fields rendered inside the popover.
+     * - 'Apply' button is pressed (if `hasApplyButton` is true)
+     */
+    onApply?: () => void;
+    /**
+     * Whether to show the 'Apply' button.
+     */
+    hasApplyButton?: boolean;
+    /**
+     * Called when 'Clear' button is pressed.
+     */
+    onClear?: () => void;
+    /**
+     * Wheter the button is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The label of the 'Clear' button.
+     * @default "Clear"
+     */
+    clearButtonLabel?: ReactNode;
+    /**
+     * The label of the 'Apply' button.
+     * @default "Apply"
+     */
+    applyButtonLabel?: ReactNode;
+}
+/**
+ * A button with a dropdown, used for filtering UI.
+ */
+declare function FilterDropdown({ children, label, value, isOpen: isOpenProp, clearButtonLabel, applyButtonLabel, defaultOpen, onOpenChange, hasApplyButton, onApply, onClear, noMaxWidth, isDisabled, }: SapphireFilterDropdownProps): JSX.Element;
+
+declare type DateFieldProps<T extends DateValue$1> = Omit<AriaDatePickerProps<T>, keyof Omit<Validation<unknown>, 'isRequired'> | 'errorMessage' | 'description' | 'granularity' | 'hourCycle' | 'hideTimeZone'> & SapphireStyleProps & {
+    /**
+     * 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.
+     * A `string` 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 | string;
+    /**
+     * A note to show below the input.
+     * If the input has an error message, this note will be replaced by that.
+     */
+    note?: ReactNode;
+    /**
+     * A ContextualHelp to render next to the label.
+     */
+    contextualHelp?: ReactNode;
+    /**
+     * If it should hide the "clear" button when input is not empty.
+     *
+     * @default false
+     */
+    noClearButton?: boolean;
+    /**
+     * @default 'large'
+     */
+    size?: 'large' | 'medium';
+    /**
+     * To visually indicate if this field is required or optional.
+     * @default false
+     */
+    necessityIndicator?: boolean;
+};
+/**
+ * A date field allows users to enter or edit date values using the keyboard
+ * and/or mouse.
+ */
+declare const DateField: <T extends DateValue$1>(props: Omit<AriaDatePickerProps<T>, "isInvalid" | "validationState" | "validationBehavior" | "validate" | "errorMessage" | "hourCycle" | "granularity" | "hideTimeZone" | "description"> & SapphireStyleProps & {
+    /**
+     * 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.
+     * A `string` 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?: string | boolean | undefined;
+    /**
+     * A note to show below the input.
+     * If the input has an error message, this note will be replaced by that.
+     */
+    note?: ReactNode;
+    /**
+     * A ContextualHelp 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;
+    /**
+     * @default 'large'
+     */
+    size?: "large" | "medium" | undefined;
+    /**
+     * To visually indicate if this field is required or optional.
+     * @default false
+     */
+    necessityIndicator?: boolean | 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>> = Omit<DateRangePickerStateOptions$1<T>, 'onChange'> & {
+    onChange?: (value: Parameters<O>[0] | null, predefinedRange?: P) => ReturnType<O>;
+};
+
+declare type DateRangeFieldProps<T extends DateValue$1, P extends string> = Omit<AriaDateRangePickerProps<T>, keyof Omit<Validation<unknown>, 'isRequired'> | 'errorMessage' | 'description' | 'granularity' | 'hourCycle' | 'hideTimeZone' | 'allowsNonContiguousRanges' | 'onChange'> & SapphireStyleProps & {
+    /**
+     * 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.
+     */
+    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.
+     * A `string` 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 | string;
+    /**
+     * A note to show below the input.
+     * If the input has an error message, this note will be replaced by that.
+     */
+    note?: ReactNode;
+    /**
+     * A ContextualHelp to render next to the label.
+     */
+    contextualHelp?: ReactNode;
+    /**
+     * If it should hide the "clear" button when input is not empty.
+     *
+     * @default false
+     */
+    noClearButton?: 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 'large'
+     */
+    size?: 'large' | 'medium';
+    /**
+     * To visually indicate if this field is required or optional.
+     * @default false
+     */
+    necessityIndicator?: boolean;
+};
+/**
+ * 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: Omit<AriaDateRangePickerProps<T>, "onChange" | "isInvalid" | "validationState" | "validationBehavior" | "validate" | "errorMessage" | "allowsNonContiguousRanges" | "hourCycle" | "granularity" | "hideTimeZone" | "description"> & SapphireStyleProps & {
+    /**
+     * Handler that is called when the value changes.
+     */
+    onChange?: ((value: _react_types_shared.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.
+     */
+    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.
+     * A `string` 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?: string | boolean | undefined;
+    /**
+     * A note to show below the input.
+     * If the input has an error message, this note will be replaced by that.
+     */
+    note?: ReactNode;
+    /**
+     * A ContextualHelp 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;
+    /**
+     * 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 'large'
+     */
+    size?: "large" | "medium" | undefined;
+    /**
+     * To visually indicate if this field is required or optional.
+     * @default false
+     */
+    necessityIndicator?: boolean | undefined;
+} & {
+    ref?: React__default.RefObject<HTMLDivElement> | undefined;
+}) => React__default.ReactElement;
+
+/**
+ * The helpers in this file are meant for external use.
+ * We're exporting these.
+ */
+
+declare const isEndDateBeforeStartDate: (dateRange?: RangeValue<DateValue$1> | null) => boolean | null | undefined;
+declare const isDateOutsideValidRange: (value?: DateValue$1 | null, minValue?: DateValue$1 | null, maxValue?: DateValue$1 | null) => "after" | "before" | undefined;
+
+interface SapphireFeedbackMessageProps extends SapphireStyleProps {
+    /**
+     * Heading content, rendered in a sapphire Heading component.
+     */
+    heading: React__default.ReactNode;
+    /**
+     * The type of message.
+     * The 'error' and 'success' are meant to attract more attention.
+     *
+     * @default 'neutral'
+     */
+    type?: 'error' | 'success' | 'neutral';
+    /**
+     * 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, type, ...otherProps }: SapphireFeedbackMessageProps) => JSX.Element;
+
+declare type SapphireSearchFieldProps<T extends object> = SapphireStyleProps & Omit<AriaSearchFieldProps, keyof HelpTextProps | keyof Validation<unknown> | keyof LabelableProps> & AutocompleteProps<T> & {
+    /**
+     * @default 'large'
+     */
+    size?: 'large' | 'medium';
+    /**
+     * Adjusts the style for the type of surface it is rendered on.
+     * @default 'primary'
+     */
+    surface?: 'primary' | 'secondary';
+} & ({
+    'aria-labelledby': string;
+} | {
+    'aria-label': string;
+});
+declare type AutocompleteProps<T extends object> = {
+    items?: ComboBoxProps<T>['items'];
+    defaultItems?: ComboBoxProps<T>['defaultItems'];
+    children?: ComboBoxProps<T>['children'];
+    onOpenChange?: ComboBoxProps<T>['onOpenChange'];
+    defaultFilter?: (textValue: string, inputValue: string) => boolean;
+};
+/**
+ * Sapphire search input field.
+ */
+declare const SearchField: React__default.ForwardRefExoticComponent<SapphireSearchFieldProps<object> & React__default.RefAttributes<HTMLInputElement>>;
+
+declare type ToastRegionProps<T> = AriaToastRegionProps & SapphireStyleProps & {
+    state: ToastState<T>;
+};
+
+declare type ToastProviderProps = Omit<ToastRegionProps<ReactNode>, 'state'> & {
+    children: React__default.ReactNode;
+};
+/**
+ * Sapphire toast provider.
+ * Render this at the root of your app.
+ */
+declare const ToastProvider: ({ children, ...props }: ToastProviderProps) => React__default.JSX.Element;
+
+declare type ShowToastFn = (content: ReactNode, options?: ShowToastOptions) => void;
+declare type 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;
+};
+declare const useShowToast: () => ShowToastFn;
+
+declare type TreeExpansionMode = 'single' | 'multiple';
+
+interface SapphireAccordionProps<T> extends SapphireStyleProps, CollectionBase<T>, DOMProps, Expandable {
+    /** Allow one or many expanded items
+     * @default 'multiple'
+     */
+    expansionMode?: TreeExpansionMode;
+    /** Set aria-level attribute for item's header. Accessibility requirement.
+     * Defines the hierarchical level of an element within a page structure.
+     * @default 5
+     */
+    headerLevel?: HeadingProps['level'];
+    /**
+     * Removes the divider after the last list item.
+     * Useful when rendered in a container which already has borders.
+     */
+    hideLastDivider?: boolean;
+}
+
+interface SapphireAccordionHeadingProps extends DOMProps {
+    children?: ReactNode;
+}
+
+interface SapphireAccordionItemProps<T> extends Omit<ItemProps<T>, 'title'> {
+    heading: ReactNode;
+}
+
+declare const _Accordion: (<T extends object>(props: SapphireAccordionProps<T> & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+    Heading: ({ children, ...props }: SapphireAccordionHeadingProps) => React.JSX.Element;
+    Item: <T_1>(props: SapphireAccordionItemProps<T_1>) => JSX.Element;
+};
+
+declare type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+declare type TypographyHeadingProps = DOMProps & TextStyleProps & SapphireStyleProps & {
+    children: React__default.ReactNode;
+    /**
+     * The level of the heading.
+     */
+    level: HeadingLevel;
+    elementType?: `h${HeadingLevel}`;
+    fontVariant?: 'default' | 'alternative';
+};
+
+declare type TypographySubheadingProps = DOMProps & TextStyleProps & SapphireStyleProps & {
+    children: React__default.ReactNode;
+    /**
+     * The actual DOM element to render.
+     * @default 'div'
+     */
+    elementType?: string;
+    /**
+     * Sets level of the hierarchy of the subheading.
+     * @default 1
+     */
+    level?: 1 | 2;
+    /**
+     * If text is bold
+     * @default false
+     */
+    isBold?: boolean;
+};
+
+declare type TypographyBodyProps = DOMProps & TextStyleProps & SapphireStyleProps & {
+    children: React__default.ReactNode;
+    /**
+     * The actual DOM element to render.
+     * @default 'p'
+     */
+    elementType?: string;
+    /**
+     * Sets the level of the hierarchy of the text.
+     * @default 1
+     */
+    level?: 1 | 2 | 3;
+    /**
+     * If text should be underlined.
+     * @default false
+     */
+    isUnderlined?: boolean;
+    /**
+     * If text is bold.
+     * @default false
+     */
+    isBold?: boolean;
+};
+
+declare type TypographyCaptionProps = DOMProps & TextStyleProps & SapphireStyleProps & {
+    children: React__default.ReactNode;
+    /**
+     * The actual DOM element to render.
+     * @default 'div'
+     */
+    elementType?: string;
+    /**
+     * Sets the level of the hierarchy of the caption.
+     * @default 1
+     */
+    level?: 1 | 2;
+};
+
+declare const Typography: {
+    Heading: ComponentType<TypographyHeadingProps>;
+    Subheading: ComponentType<TypographySubheadingProps>;
+    Body: ComponentType<TypographyBodyProps>;
+    Caption: ComponentType<TypographyCaptionProps>;
+};
+
+declare type FieldsetProps = 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 disabled.
+     * */
+    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.
+     * A `string` 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 | string;
+    /**
+     * A note to show below the input.
+     * If the input has an error message, this note will be replaced by that.
+     */
+    note?: ReactNode;
+    /**
+     * A ContextualHelp to render next to the label.
+     */
+    contextualHelp?: ReactNode;
+    /**
+     * @default 'large'
+     */
+    size?: 'large' | 'medium';
+    /**
+     * 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;
+};
+/**
+ * Sapphire search input field.
+ */
+declare const Fieldset: ({ label, contextualHelp, note, error, isDisabled, isRequired, necessityIndicator, children, size, ...props }: FieldsetProps) => React__default.JSX.Element;
+
+declare type SapphireAvatarProps = SapphireStyleProps & {
+    /**
+     * @default 'medium'
+     */
+    size?: 'large' | 'medium' | 'small' | 'extraSmall';
+    /**
+     * The background color of the avatar.
+     * Can either be semantic or one of the named decorative colors.
+     *
+     * @default 'informative'
+     */
+    color?: 'positive' | 'negative' | 'warning' | 'informative' | 'passive' | 'aqua' | 'copper' | 'electro' | 'indigo' | 'lime' | 'pink' | 'violet' | 'gold' | 'beige' | 'orchid' | 'gray' | 'cobalt' | 'forestGreen' | 'teal' | 'orange';
+} & ({
+    monogram: ReactNode;
+    icon?: never;
+} | {
+    monogram?: never;
+    icon: ReactNode;
+});
+declare const Avatar: ({ monogram, icon, color, size, ...props }: SapphireAvatarProps) => React__default.ReactElement;
+
+export { _Accordion as Accordion, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FilterDropdown, NotificationBadge, NotificationBadgeProps, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, Spinner, SpinnerProps, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };