@danske/sapphire-react-lab 0.88.1 → 0.90.2

package/build/index.d.ts

@@ -1,169 +1,13 @@
-import * as _react_types_shared from '@react-types/shared';
-import { PressEvents, Validation, RangeValue, HelpTextProps, LabelableProps, CollectionBase, DOMProps, Expandable, ItemProps, AriaLabelingProps, FocusableRefValue } from '@react-types/shared';
 import * as React from 'react';
-import React__default, { ReactNode, ForwardedRef, ComponentType, RefObject, Key } from 'react';
-import { AriaToggleButtonProps } from '@react-aria/button';
-import { SapphireStyleProps, PopoverTriggerProps, HeadingProps, TextStyleProps, DialogProps } from '@danske/sapphire-react';
-import { DateValue } from '@internationalized/date';
-import { AriaCalendarProps, AriaRangeCalendarProps } from '@react-aria/calendar';
-import { CalendarStateOptions, 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';
+import React__default, { ReactNode, RefObject, Key } from 'react';
+import { SapphireStyleProps, PopoverTriggerProps, TypographyHeadingProps } from '@danske/sapphire-react';
+import { CollectionBase, DOMProps, Expandable, ItemProps, AriaLabelingProps, Validation, FocusableRefValue, PressEvents } from '@react-types/shared';
 import { HoverProps } from '@react-aria/interactions';
 import { DropOptions } from '@react-aria/dnd';
-import { AriaModalOverlayProps } from '@react-aria/overlays';
 import { AriaNumberFieldProps } from '@react-aria/numberfield';
 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);
-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;
-}
-/**
- * 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';
-interface SapphireCalendarStateOptions<T extends DateValue> extends CalendarStateOptions<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;
-}
-
-interface SapphireCalendarProps<T extends DateValue = DateValue> extends SapphireStyleProps, Omit<AriaCalendarProps<T>, 'validationState' | 'errorMessage'>, Omit<SapphireCalendarStateOptions<T>, 'createCalendar'> {
-    /**
-     * 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: <T extends DateValue = DateValue>({ showWeekNumbers, ...props }: Omit<SapphireCalendarProps<T>, "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>>;
-};
-
-interface PredefinedDateRange {
-    label: string;
-    dateRange: {
-        start: DateValue;
-        end: DateValue;
-    };
-}
-interface SapphireRangeCalendarProps<T extends DateValue = DateValue, P extends string = string> extends SapphireStyleProps, Omit<AriaRangeCalendarProps<T>, '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;
-}
-declare const _RangeCalendar: <T extends DateValue = DateValue, P extends string = string>({ showWeekNumbers, showTwoMonths, allowUnavailableDatesWithinRange, predefinedRanges, ...props }: SapphireRangeCalendarProps<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: SapphireRangeCalendarProps<T, P> & {
-    ref?: React__default.ForwardedRef<HTMLDivElement> | undefined;
-}) => ReturnType<typeof _RangeCalendar>;
-
-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 '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'> {
+interface FilterDropdownProps extends SapphireStyleProps, Pick<PopoverTriggerProps, 'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'> {
     /**
      * "Filter by" label, shown inside the trigger button.
      */
@@ -192,9 +36,14 @@ interface SapphireFilterDropdownProps extends SapphireStyleProps, Pick<PopoverTr
      */
     onClear?: () => void;
     /**
-     * Wheter the button is disabled.
+     * Whether the button is disabled.
      */
     isDisabled?: boolean;
+    /**
+     * Whether the 'Apply' button is disabled.
+     */
+    isApplyDisabled?: boolean;
+    /**
     /**
      * The label of the 'Clear' button.
      * @default "Clear"
@@ -209,371 +58,11 @@ interface SapphireFilterDropdownProps extends SapphireStyleProps, Pick<PopoverTr
 /**
  * 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;
-    /**
-     * Places the label either above (default) or on the side of the control.
-     * @default 'above'
-     */
-    labelPlacement?: 'side' | 'above';
-};
-/**
- * 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;
-    /**
-     * 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;
-
-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;
-    /**
-     * 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: 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;
-    /**
-     * 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;
-
-/**
- * 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;
-
-declare type FeedbackMessageVariant = 'success' | 'error' | 'warning' | 'informative' | 'neutral';
-interface SapphireFeedbackMessageProps extends 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 }: 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;
-}) & {
-    loadingState?: 'loading';
-    loadingSkeletonRowsCount?: number;
-};
-interface 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;
-}
-declare type SapphireSearchFieldPropsWithRef<T extends object> = SapphireSearchFieldProps<T> & {
-    forwardedRef?: ForwardedRef<HTMLInputElement>;
-};
-/**
- * Sapphire search input field.
- */
-declare function SearchField<T extends object>(propsAndRef: SapphireSearchFieldPropsWithRef<T>): React__default.JSX.Element;
-
-declare type VerticalPlacement = 'top' | 'bottom';
-declare type HorizontalPlacement = 'left' | 'right';
-declare type ToastRegionProps<T> = AriaToastRegionProps & SapphireStyleProps & {
-    state: ToastState<T>;
-    /**
-     * Placement of the Toast notifications on the page.
-     */
-    placement?: VerticalPlacement | `${VerticalPlacement}-${HorizontalPlacement}`;
-};
-
-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, placement, ...props }: ToastProviderProps) => React__default.JSX.Element;
-
-declare type ShowToastFn = (content: ReactNode, options?: ShowToastOptions) => void;
-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';
-    icon?: ReactNode;
-}
-declare const useShowToast: () => ShowToastFn;
+declare function FilterDropdown({ children, label, value, isDisabled, isApplyDisabled, isOpen: isOpenProp, applyButtonLabel, clearButtonLabel, defaultOpen, hasApplyButton, noMaxWidth, onApply, onClear, onOpenChange, }: FilterDropdownProps): JSX.Element;
 
 declare type TreeExpansionMode = 'single' | 'multiple';
 
-interface SapphireAccordionProps<T> extends SapphireStyleProps, CollectionBase<T>, DOMProps, Expandable {
+interface AccordionProps<T> extends SapphireStyleProps, CollectionBase<T>, DOMProps, Expandable {
     /** Allow one or many expanded items
      * @default 'multiple'
      */
@@ -582,206 +71,51 @@ interface SapphireAccordionProps<T> extends SapphireStyleProps, CollectionBase<T
      * Defines the hierarchical level of an element within a page structure.
      * @default 5
      */
-    headerLevel?: HeadingProps['level'];
+    headerLevel?: TypographyHeadingProps['level'];
     /**
-     * Removes the divider after the last list item.
+     * Removes the divider after the last accordion 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;
-interface TypographyHeadingProps extends DOMProps, TextStyleProps, SapphireStyleProps {
-    children: React__default.ReactNode;
     /**
-     * The level of the heading.
+     * Counter acts the side padding, so that accordion is shifted to the left with same amount
+     * and having side padding * 2 added to width – resulting in full width accordion.
+     * Useful in scenarions where accordion is inside a padded container and desired layout has accordion going from edge to edge horizontally.
+     * @example
+     * ```tsx
+     * <Accordion hasNegativeSideMargin>...</Accordion>
+     * ```
      */
-    level: HeadingLevel;
-    elementType?: `h${HeadingLevel}`;
+    hasNegativeSideMargin?: boolean;
     /**
-     * @deprecated 'alternative' variant will not be a part of the new CVI
+     * Add custom sized padding to the sides of the accordion items.
+     * @example
+     * ```tsx
+     * <Accordion sidePadding={tokens.size.spacingContainerHorizontalM.value} hasNegativeSideMargin>...</Accordion>
+     * ```
      */
-    fontVariant?: 'default' | 'alternative';
+    sidePadding?: number | string;
 }
 
-interface TypographySubheadingProps extends 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;
+interface AccordionHeadingProps extends DOMProps {
+    children?: ReactNode;
 }
 
-interface TypographyBodyProps extends 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;
+interface AccordionItemProps<T> extends Omit<ItemProps<T>, 'title'> {
+    heading: ReactNode;
 }
 
-interface TypographyCaptionProps extends 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;
+interface AccordionContextProps {
+    sidePadding?: number | string;
 }
+declare const AccordionContext: React__default.Context<AccordionContextProps>;
 
-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;
-    /**
-     * Places the label either above (default) or on the side of the control.
-     * @default 'above'
-     */
-    labelPlacement?: 'side' | 'above';
+declare const _Accordion: (<T extends object>(props: AccordionProps<T> & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+    Heading: ({ children, ...props }: AccordionHeadingProps) => React.JSX.Element;
+    Item: <T_1>(props: AccordionItemProps<T_1>) => JSX.Element;
 };
-/**
- * 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 SapphireAvatarProps = SapphireStyleProps & {
-    /**
-     * @default 'medium'
-     */
-    size?: 'extraLarge' | '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;
 
 interface FileSelectProps {
     /**
@@ -808,7 +142,7 @@ interface FileTriggerProps extends FileSelectProps {
 }
 declare const FileTrigger: React__default.ForwardRefExoticComponent<FileTriggerProps & React__default.RefAttributes<HTMLInputElement>>;
 
-interface FileDropzoneProps extends SapphireStyleProps, Omit<DropOptions, 'hasDropButton'>, HoverProps, FileSelectProps, AriaLabelingProps {
+interface FileDropzoneProps extends SapphireStyleProps, Pick<DropOptions, 'getDropOperation' | 'onDropEnter' | 'onDropActivate' | 'onDropMove' | 'onDropExit' | 'onDrop'>, HoverProps, FileSelectProps, AriaLabelingProps {
     /**
      * Whether the dropzone has an error
      * @default false
@@ -826,46 +160,7 @@ interface FileDropzoneProps extends SapphireStyleProps, Omit<DropOptions, 'hasDr
      */
     onFileSelectOpen?: () => void;
 }
-declare const FileDropzone: React__default.ForwardRefExoticComponent<Omit<FileDropzoneProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
-
-declare type SapphireAlertDialogProps = AriaModalOverlayProps & SapphireStyleProps & Pick<DialogProps, 'isOpen' | 'onClose'> & Omit<SapphireFeedbackMessageProps, '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 & SapphireStyleProps & Pick<DialogProps, "isOpen" | "onClose"> & Omit<SapphireFeedbackMessageProps, "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<_react_types_shared.DOMRefValue<HTMLDivElement>>>;
+declare const FileDropzone: React__default.ForwardRefExoticComponent<FileDropzoneProps & React__default.RefAttributes<HTMLDivElement>>;
 
 interface SapphireNumberFieldProps
 /**
@@ -900,7 +195,7 @@ interface NumberFieldProps extends SapphireNumberFieldProps, PressEvents, Sapphi
      */
     note?: ReactNode;
     /**
-     * A ContextualHelp to render next to the label.
+     * A HelpButton to render next to the label.
      */
     contextualHelp?: ReactNode;
     /**
@@ -909,9 +204,9 @@ interface NumberFieldProps extends SapphireNumberFieldProps, PressEvents, Sapphi
      */
     necessityIndicator?: boolean;
     /**
-     * @default 'large'
+     * @default 'lg'
      */
-    size?: 'large' | 'medium';
+    size?: 'lg' | 'md';
     /**
      * Aligns the text inside the input fields without affecting the positioning of the label of the field.
      */
@@ -931,7 +226,7 @@ declare const NumberField: React__default.ForwardRefExoticComponent<NumberFieldP
 
 interface TagGroupProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProps, SapphireStyleProps {
     /**
-     * A ContextualHelp element to place next to the label.
+     * A HelpButton element to place next to the label.
      */
     contextualHelp?: ReactNode;
     /**
@@ -974,7 +269,7 @@ declare const TagItem: <T>(props: TagItemProps<T>) => JSX.Element;
 interface LabeledValueProps extends DOMProps, SapphireStyleProps {
     children?: React__default.ReactNode;
     /**
-     * A ContextualHelp element to place next to the label.
+     * A HelpButton element to place next to the label.
      */
     contextualHelp?: ReactNode;
     /**
@@ -987,10 +282,10 @@ interface LabeledValueProps extends DOMProps, SapphireStyleProps {
      */
     labelPlacement?: 'above' | 'side';
     /**
-     * @default 'large'
+     * @default 'lg'
      */
-    size?: 'large' | 'medium';
+    size?: 'lg' | 'md';
 }
 declare function LabeledValue(props: LabeledValueProps): React__default.JSX.Element;
 
-export { _Accordion as Accordion, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, LabeledValue, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, TagGroup, TagGroupProps, TagItem, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };
+export { _Accordion as Accordion, AccordionContext, AccordionHeadingProps, AccordionItemProps, AccordionProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, FilterDropdownProps, LabeledValue, NumberField, NumberFieldProps, NumberFieldRef, TagGroup, TagGroupProps, TagItem };