@fluentui/react-components
Version:
Suite package for converged React components
825 lines • 198 kB
TypeScript
import { __css } from '@griffel/react';
import { __resetCSS } from '@griffel/react';
import { __resetStyles } from '@griffel/react';
import { __styles } from '@griffel/react';
import { Accordion } from '@fluentui/react-accordion';
import { accordionClassNames } from '@fluentui/react-accordion';
import { AccordionContextValue } from '@fluentui/react-accordion';
import { AccordionContextValues } from '@fluentui/react-accordion';
import { AccordionHeader } from '@fluentui/react-accordion';
import { accordionHeaderClassNames } from '@fluentui/react-accordion';
import { AccordionHeaderContextValue } from '@fluentui/react-accordion';
import { AccordionHeaderContextValues } from '@fluentui/react-accordion';
import { AccordionHeaderExpandIconPosition } from '@fluentui/react-accordion';
import { AccordionHeaderProps } from '@fluentui/react-accordion';
import { AccordionHeaderSize } from '@fluentui/react-accordion';
import { AccordionHeaderSlots } from '@fluentui/react-accordion';
import { AccordionHeaderState } from '@fluentui/react-accordion';
import { AccordionIndex } from '@fluentui/react-accordion';
import { AccordionItem } from '@fluentui/react-accordion';
import { accordionItemClassNames } from '@fluentui/react-accordion';
import { AccordionItemContextValue } from '@fluentui/react-accordion';
import { AccordionItemContextValues } from '@fluentui/react-accordion';
import { AccordionItemProps } from '@fluentui/react-accordion';
import { AccordionItemProvider } from '@fluentui/react-accordion';
import { AccordionItemSlots } from '@fluentui/react-accordion';
import { AccordionItemState } from '@fluentui/react-accordion';
import { AccordionItemValue } from '@fluentui/react-accordion';
import { AccordionPanel } from '@fluentui/react-accordion';
import { accordionPanelClassNames } from '@fluentui/react-accordion';
import { AccordionPanelProps } from '@fluentui/react-accordion';
import { AccordionPanelSlots } from '@fluentui/react-accordion';
import { AccordionPanelState } from '@fluentui/react-accordion';
import { AccordionProps } from '@fluentui/react-accordion';
import { AccordionProvider } from '@fluentui/react-accordion';
import { AccordionSlots } from '@fluentui/react-accordion';
import { AccordionState } from '@fluentui/react-accordion';
import { AccordionToggleData } from '@fluentui/react-accordion';
import { AccordionToggleEvent } from '@fluentui/react-accordion';
import { AccordionToggleEventHandler } from '@fluentui/react-accordion';
import { AlphaSlider } from '@fluentui/react-color-picker';
import { alphaSliderClassNames } from '@fluentui/react-color-picker';
import { AlphaSliderProps } from '@fluentui/react-color-picker';
import { AlphaSliderSlots } from '@fluentui/react-color-picker';
import { AlphaSliderState } from '@fluentui/react-color-picker';
import { AnnounceContextValue } from '@fluentui/react-shared-contexts';
import { AnnounceProvider } from '@fluentui/react-shared-contexts';
import { AppItem } from '@fluentui/react-nav';
import { appItemClassNames } from '@fluentui/react-nav';
import { AppItemProps } from '@fluentui/react-nav';
import { AppItemSlots } from '@fluentui/react-nav';
import { AppItemState } from '@fluentui/react-nav';
import { AppItemStatic } from '@fluentui/react-nav';
import { appItemStaticClassNames } from '@fluentui/react-nav';
import { AppItemStaticProps } from '@fluentui/react-nav';
import { AppItemStaticSlots } from '@fluentui/react-nav';
import { AppItemStaticState } from '@fluentui/react-nav';
import { AriaLiveAnnouncer } from '@fluentui/react-aria';
import { AriaLiveAnnouncerProps } from '@fluentui/react-aria';
import { AriaLiveAnnouncerState } from '@fluentui/react-aria';
import { arrowHeights } from '@fluentui/react-popover';
import { assertSlots } from '@fluentui/react-utilities';
import { AtomMotion } from '@fluentui/react-motion';
import { AtomMotionFn } from '@fluentui/react-motion';
import { Avatar } from '@fluentui/react-avatar';
import { avatarClassNames } from '@fluentui/react-avatar';
import { AvatarGroup } from '@fluentui/react-avatar';
import { avatarGroupClassNames } from '@fluentui/react-avatar';
import { AvatarGroupContextValue } from '@fluentui/react-avatar';
import { AvatarGroupContextValues } from '@fluentui/react-avatar';
import { AvatarGroupItem } from '@fluentui/react-avatar';
import { avatarGroupItemClassNames } from '@fluentui/react-avatar';
import { AvatarGroupItemProps } from '@fluentui/react-avatar';
import { AvatarGroupItemSlots } from '@fluentui/react-avatar';
import { AvatarGroupItemState } from '@fluentui/react-avatar';
import { AvatarGroupPopover } from '@fluentui/react-avatar';
import { avatarGroupPopoverClassNames } from '@fluentui/react-avatar';
import { AvatarGroupPopoverProps } from '@fluentui/react-avatar';
import { AvatarGroupPopoverSlots } from '@fluentui/react-avatar';
import { AvatarGroupPopoverState } from '@fluentui/react-avatar';
import { AvatarGroupProps } from '@fluentui/react-avatar';
import { AvatarGroupProvider } from '@fluentui/react-avatar';
import { AvatarGroupSlots } from '@fluentui/react-avatar';
import { AvatarGroupState } from '@fluentui/react-avatar';
import { AvatarNamedColor } from '@fluentui/react-avatar';
import { AvatarProps } from '@fluentui/react-avatar';
import { AvatarSize } from '@fluentui/react-avatar';
import { AvatarSizes } from '@fluentui/react-avatar';
import { AvatarSlots } from '@fluentui/react-avatar';
import { AvatarState } from '@fluentui/react-avatar';
import { Badge } from '@fluentui/react-badge';
import { badgeClassNames } from '@fluentui/react-badge';
import { BadgeProps } from '@fluentui/react-badge';
import { BadgeSlots } from '@fluentui/react-badge';
import { BadgeState } from '@fluentui/react-badge';
import { Body1 } from '@fluentui/react-text';
import { body1ClassNames } from '@fluentui/react-text';
import { Body1Strong } from '@fluentui/react-text';
import { body1StrongClassNames } from '@fluentui/react-text';
import { Body1Stronger } from '@fluentui/react-text';
import { body1StrongerClassNames } from '@fluentui/react-text';
import { Body2 } from '@fluentui/react-text';
import { body2ClassNames } from '@fluentui/react-text';
import { BorderRadiusTokens } from '@fluentui/react-theme';
import { BrandVariants } from '@fluentui/react-theme';
import { Breadcrumb } from '@fluentui/react-breadcrumb';
import { BreadcrumbButton } from '@fluentui/react-breadcrumb';
import { breadcrumbButtonClassNames } from '@fluentui/react-breadcrumb';
import { BreadcrumbButtonProps } from '@fluentui/react-breadcrumb';
import { BreadcrumbButtonSlots } from '@fluentui/react-breadcrumb';
import { BreadcrumbButtonState } from '@fluentui/react-breadcrumb';
import { breadcrumbClassNames } from '@fluentui/react-breadcrumb';
import { BreadcrumbContextValues } from '@fluentui/react-breadcrumb';
import { BreadcrumbDivider } from '@fluentui/react-breadcrumb';
import { breadcrumbDividerClassNames } from '@fluentui/react-breadcrumb';
import { BreadcrumbDividerProps } from '@fluentui/react-breadcrumb';
import { BreadcrumbDividerSlots } from '@fluentui/react-breadcrumb';
import { BreadcrumbDividerState } from '@fluentui/react-breadcrumb';
import { BreadcrumbItem } from '@fluentui/react-breadcrumb';
import { breadcrumbItemClassNames } from '@fluentui/react-breadcrumb';
import { BreadcrumbItemProps } from '@fluentui/react-breadcrumb';
import { BreadcrumbItemSlots } from '@fluentui/react-breadcrumb';
import { BreadcrumbItemState } from '@fluentui/react-breadcrumb';
import { BreadcrumbProps } from '@fluentui/react-breadcrumb';
import { BreadcrumbProvider } from '@fluentui/react-breadcrumb';
import { BreadcrumbSlots } from '@fluentui/react-breadcrumb';
import { BreadcrumbState } from '@fluentui/react-breadcrumb';
import { Button } from '@fluentui/react-button';
import { buttonClassNames } from '@fluentui/react-button';
import { ButtonProps } from '@fluentui/react-button';
import { ButtonSlots } from '@fluentui/react-button';
import { ButtonState } from '@fluentui/react-button';
import { Caption1 } from '@fluentui/react-text';
import { caption1ClassNames } from '@fluentui/react-text';
import { Caption1Strong } from '@fluentui/react-text';
import { caption1StrongClassNames } from '@fluentui/react-text';
import { Caption1Stronger } from '@fluentui/react-text';
import { caption1StrongerClassNames } from '@fluentui/react-text';
import { Caption2 } from '@fluentui/react-text';
import { caption2ClassNames } from '@fluentui/react-text';
import { Caption2Strong } from '@fluentui/react-text';
import { caption2StrongClassNames } from '@fluentui/react-text';
import { Card } from '@fluentui/react-card';
import { cardClassNames } from '@fluentui/react-card';
import { cardCSSVars } from '@fluentui/react-card';
import { CardFooter } from '@fluentui/react-card';
import { cardFooterClassNames } from '@fluentui/react-card';
import { CardFooterProps } from '@fluentui/react-card';
import { CardFooterSlots } from '@fluentui/react-card';
import { CardFooterState } from '@fluentui/react-card';
import { CardHeader } from '@fluentui/react-card';
import { cardHeaderClassNames } from '@fluentui/react-card';
import { cardHeaderCSSVars } from '@fluentui/react-card';
import { CardHeaderProps } from '@fluentui/react-card';
import { CardHeaderSlots } from '@fluentui/react-card';
import { CardHeaderState } from '@fluentui/react-card';
import { CardPreview } from '@fluentui/react-card';
import { cardPreviewClassNames } from '@fluentui/react-card';
import { CardPreviewProps } from '@fluentui/react-card';
import { CardPreviewSlots } from '@fluentui/react-card';
import { CardPreviewState } from '@fluentui/react-card';
import { CardProps } from '@fluentui/react-card';
import { CardSlots } from '@fluentui/react-card';
import { CardState } from '@fluentui/react-card';
import { Carousel } from '@fluentui/react-carousel';
import { CarouselAnnouncerFunction } from '@fluentui/react-carousel';
import { CarouselAutoplayButton } from '@fluentui/react-carousel';
import { carouselAutoplayButtonClassNames } from '@fluentui/react-carousel';
import { CarouselAutoplayButtonProps } from '@fluentui/react-carousel';
import { CarouselAutoplayButtonSlots } from '@fluentui/react-carousel';
import { CarouselAutoplayButtonState } from '@fluentui/react-carousel';
import { CarouselButton } from '@fluentui/react-carousel';
import { carouselButtonClassNames } from '@fluentui/react-carousel';
import { CarouselButtonProps } from '@fluentui/react-carousel';
import { CarouselButtonSlots } from '@fluentui/react-carousel';
import { CarouselButtonState } from '@fluentui/react-carousel';
import { CarouselCard } from '@fluentui/react-carousel';
import { carouselCardClassNames } from '@fluentui/react-carousel';
import { CarouselCardProps } from '@fluentui/react-carousel';
import { CarouselCardSlots } from '@fluentui/react-carousel';
import { CarouselCardState } from '@fluentui/react-carousel';
import { carouselClassNames } from '@fluentui/react-carousel';
import { carouselContextDefaultValue } from '@fluentui/react-carousel';
import { CarouselContextValue } from '@fluentui/react-carousel';
import { CarouselContextValues } from '@fluentui/react-carousel';
import { CarouselIndexChangeData } from '@fluentui/react-carousel';
import { CarouselNav } from '@fluentui/react-carousel';
import { CarouselNavButton } from '@fluentui/react-carousel';
import { carouselNavButtonClassNames } from '@fluentui/react-carousel';
import { CarouselNavButtonProps } from '@fluentui/react-carousel';
import { CarouselNavButtonSlots } from '@fluentui/react-carousel';
import { CarouselNavButtonState } from '@fluentui/react-carousel';
import { carouselNavClassNames } from '@fluentui/react-carousel';
import { CarouselNavContainer } from '@fluentui/react-carousel';
import { carouselNavContainerClassNames } from '@fluentui/react-carousel';
import { CarouselNavContainerProps } from '@fluentui/react-carousel';
import { CarouselNavContainerSlots } from '@fluentui/react-carousel';
import { CarouselNavContainerState } from '@fluentui/react-carousel';
import { CarouselNavImageButton } from '@fluentui/react-carousel';
import { carouselNavImageButtonClassNames } from '@fluentui/react-carousel';
import { CarouselNavImageButtonProps } from '@fluentui/react-carousel';
import { CarouselNavImageButtonSlots } from '@fluentui/react-carousel';
import { CarouselNavImageButtonState } from '@fluentui/react-carousel';
import { CarouselNavProps } from '@fluentui/react-carousel';
import { CarouselNavSlots } from '@fluentui/react-carousel';
import { CarouselNavState } from '@fluentui/react-carousel';
import { CarouselProps } from '@fluentui/react-carousel';
import { CarouselProvider } from '@fluentui/react-carousel';
import { CarouselSlider } from '@fluentui/react-carousel';
import { carouselSliderClassNames } from '@fluentui/react-carousel';
import { CarouselSliderProps } from '@fluentui/react-carousel';
import { CarouselSliderSlots } from '@fluentui/react-carousel';
import { CarouselSliderState } from '@fluentui/react-carousel';
import { CarouselSlots } from '@fluentui/react-carousel';
import { CarouselState } from '@fluentui/react-carousel';
import { CarouselViewport } from '@fluentui/react-carousel';
import { carouselViewportClassNames } from '@fluentui/react-carousel';
import { CarouselViewportProps } from '@fluentui/react-carousel';
import { CarouselViewportSlots } from '@fluentui/react-carousel';
import { CarouselViewportState } from '@fluentui/react-carousel';
import { CellRenderFunction } from '@fluentui/react-table';
import { Checkbox } from '@fluentui/react-checkbox';
import { checkboxClassNames } from '@fluentui/react-checkbox';
import { CheckboxOnChangeData } from '@fluentui/react-checkbox';
import { CheckboxProps } from '@fluentui/react-checkbox';
import { CheckboxSlots } from '@fluentui/react-checkbox';
import { CheckboxState } from '@fluentui/react-checkbox';
import { ColorArea } from '@fluentui/react-color-picker';
import { colorAreaClassNames } from '@fluentui/react-color-picker';
import { ColorAreaProps } from '@fluentui/react-color-picker';
import { ColorAreaSlots } from '@fluentui/react-color-picker';
import { ColorAreaState } from '@fluentui/react-color-picker';
import { ColorPaletteTokens } from '@fluentui/react-theme';
import { ColorPicker } from '@fluentui/react-color-picker';
import { colorPickerClassNames } from '@fluentui/react-color-picker';
import { ColorPickerProps } from '@fluentui/react-color-picker';
import { ColorPickerSlots } from '@fluentui/react-color-picker';
import { ColorPickerState } from '@fluentui/react-color-picker';
import { ColorSlider } from '@fluentui/react-color-picker';
import { colorSliderClassNames } from '@fluentui/react-color-picker';
import { ColorSliderProps } from '@fluentui/react-color-picker';
import { ColorSliderSlots } from '@fluentui/react-color-picker';
import { ColorSliderState } from '@fluentui/react-color-picker';
import { ColorSwatch } from '@fluentui/react-swatch-picker';
import { colorSwatchClassNames } from '@fluentui/react-swatch-picker';
import { ColorSwatchProps } from '@fluentui/react-swatch-picker';
import { ColorSwatchSlots } from '@fluentui/react-swatch-picker';
import { ColorSwatchState } from '@fluentui/react-swatch-picker';
import { ColorTokens } from '@fluentui/react-theme';
import { ColumnIdContextProvider } from '@fluentui/react-table';
import { Combobox } from '@fluentui/react-combobox';
import { comboboxClassNames } from '@fluentui/react-combobox';
import { ComboboxContextValue } from '@fluentui/react-combobox';
import { ComboboxContextValues } from '@fluentui/react-combobox';
import { ComboboxOpenChangeData } from '@fluentui/react-combobox';
import { ComboboxOpenEvents } from '@fluentui/react-combobox';
import { ComboboxProps } from '@fluentui/react-combobox';
import { ComboboxProvider } from '@fluentui/react-combobox';
import { ComboboxSlots } from '@fluentui/react-combobox';
import { ComboboxState } from '@fluentui/react-combobox';
import { ComponentProps } from '@fluentui/react-utilities';
import { ComponentState } from '@fluentui/react-utilities';
import { CompoundButton } from '@fluentui/react-button';
import { compoundButtonClassNames } from '@fluentui/react-button';
import { CompoundButtonProps } from '@fluentui/react-button';
import { CompoundButtonSlots } from '@fluentui/react-button';
import { CompoundButtonState } from '@fluentui/react-button';
import { CounterBadge } from '@fluentui/react-badge';
import { counterBadgeClassNames } from '@fluentui/react-badge';
import { CounterBadgeProps } from '@fluentui/react-badge';
import { CounterBadgeState } from '@fluentui/react-badge';
import { createCSSRuleFromTheme } from '@fluentui/react-provider';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
import { CreateCustomFocusIndicatorStyleOptions } from '@fluentui/react-tabster';
import { createDarkTheme } from '@fluentui/react-theme';
import { createDOMRenderer } from '@griffel/react';
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
import { CreateFocusOutlineStyleOptions } from '@fluentui/react-tabster';
import { createHighContrastTheme } from '@fluentui/react-theme';
import { createLightTheme } from '@fluentui/react-theme';
import { createMotionComponent } from '@fluentui/react-motion';
import { createMotionComponentVariant } from '@fluentui/react-motion';
import { createPresenceComponent } from '@fluentui/react-motion';
import { createPresenceComponentVariant } from '@fluentui/react-motion';
import { createTableColumn } from '@fluentui/react-table';
import { CreateTableColumnOptions } from '@fluentui/react-table';
import { createTeamsDarkTheme } from '@fluentui/react-theme';
import { CurveTokens } from '@fluentui/react-theme';
import { DATA_OVERFLOW_DIVIDER } from '@fluentui/react-overflow';
import { DATA_OVERFLOW_ITEM } from '@fluentui/react-overflow';
import { DATA_OVERFLOW_MENU } from '@fluentui/react-overflow';
import { DATA_OVERFLOWING } from '@fluentui/react-overflow';
import { DataGrid } from '@fluentui/react-table';
import { DataGridBody } from '@fluentui/react-table';
import { dataGridBodyClassNames } from '@fluentui/react-table';
import { DataGridBodyProps } from '@fluentui/react-table';
import { DataGridBodySlots } from '@fluentui/react-table';
import { DataGridBodyState } from '@fluentui/react-table';
import { DataGridCell } from '@fluentui/react-table';
import { dataGridCellClassNames } from '@fluentui/react-table';
import { DataGridCellFocusMode } from '@fluentui/react-table';
import { DataGridCellProps } from '@fluentui/react-table';
import { DataGridCellSlots } from '@fluentui/react-table';
import { DataGridCellState } from '@fluentui/react-table';
import { dataGridClassNames } from '@fluentui/react-table';
import { DataGridContextProvider } from '@fluentui/react-table';
import { DataGridContextValue } from '@fluentui/react-table';
import { DataGridContextValues } from '@fluentui/react-table';
import { DataGridFocusMode } from '@fluentui/react-table';
import { DataGridHeader } from '@fluentui/react-table';
import { DataGridHeaderCell } from '@fluentui/react-table';
import { dataGridHeaderCellClassNames } from '@fluentui/react-table';
import { DataGridHeaderCellProps } from '@fluentui/react-table';
import { DataGridHeaderCellSlots } from '@fluentui/react-table';
import { DataGridHeaderCellState } from '@fluentui/react-table';
import { dataGridHeaderClassNames } from '@fluentui/react-table';
import { DataGridHeaderProps } from '@fluentui/react-table';
import { DataGridHeaderSlots } from '@fluentui/react-table';
import { DataGridHeaderState } from '@fluentui/react-table';
import { DataGridProps } from '@fluentui/react-table';
import { DataGridRow } from '@fluentui/react-table';
import { dataGridRowClassNames } from '@fluentui/react-table';
import { DataGridRowProps } from '@fluentui/react-table';
import { DataGridRowSlots } from '@fluentui/react-table';
import { DataGridRowState } from '@fluentui/react-table';
import { DataGridSelectionCell } from '@fluentui/react-table';
import { dataGridSelectionCellClassNames } from '@fluentui/react-table';
import { DataGridSelectionCellProps } from '@fluentui/react-table';
import { DataGridSelectionCellSlots } from '@fluentui/react-table';
import { DataGridSelectionCellState } from '@fluentui/react-table';
import { DataGridSlots } from '@fluentui/react-table';
import { DataGridState } from '@fluentui/react-table';
import { Dialog } from '@fluentui/react-dialog';
import { DialogActions } from '@fluentui/react-dialog';
import { dialogActionsClassNames } from '@fluentui/react-dialog';
import { DialogActionsPosition } from '@fluentui/react-dialog';
import { DialogActionsProps } from '@fluentui/react-dialog';
import { DialogActionsSlots } from '@fluentui/react-dialog';
import { DialogActionsState } from '@fluentui/react-dialog';
import { DialogBody } from '@fluentui/react-dialog';
import { dialogBodyClassNames } from '@fluentui/react-dialog';
import { DialogBodyProps } from '@fluentui/react-dialog';
import { DialogBodySlots } from '@fluentui/react-dialog';
import { DialogBodyState } from '@fluentui/react-dialog';
import { DialogContent } from '@fluentui/react-dialog';
import { dialogContentClassNames } from '@fluentui/react-dialog';
import { DialogContentProps } from '@fluentui/react-dialog';
import { DialogContentSlots } from '@fluentui/react-dialog';
import { DialogContentState } from '@fluentui/react-dialog';
import { DialogContextValue } from '@fluentui/react-dialog';
import { DialogModalType } from '@fluentui/react-dialog';
import { DialogOpenChangeData } from '@fluentui/react-dialog';
import { DialogOpenChangeEvent } from '@fluentui/react-dialog';
import { DialogProps } from '@fluentui/react-dialog';
import { DialogProvider } from '@fluentui/react-dialog';
import { DialogSlots } from '@fluentui/react-dialog';
import { DialogState } from '@fluentui/react-dialog';
import { DialogSurface } from '@fluentui/react-dialog';
import { dialogSurfaceClassNames } from '@fluentui/react-dialog';
import { DialogSurfaceContextValue } from '@fluentui/react-dialog';
import { DialogSurfaceContextValues } from '@fluentui/react-dialog';
import { DialogSurfaceProps } from '@fluentui/react-dialog';
import { DialogSurfaceSlots } from '@fluentui/react-dialog';
import { DialogSurfaceState } from '@fluentui/react-dialog';
import { DialogTitle } from '@fluentui/react-dialog';
import { dialogTitleClassNames } from '@fluentui/react-dialog';
import { DialogTitleProps } from '@fluentui/react-dialog';
import { DialogTitleSlots } from '@fluentui/react-dialog';
import { DialogTitleState } from '@fluentui/react-dialog';
import { DialogTrigger } from '@fluentui/react-dialog';
import { DialogTriggerAction } from '@fluentui/react-dialog';
import { DialogTriggerChildProps } from '@fluentui/react-dialog';
import { DialogTriggerProps } from '@fluentui/react-dialog';
import { DialogTriggerState } from '@fluentui/react-dialog';
import { Display } from '@fluentui/react-text';
import { displayClassNames } from '@fluentui/react-text';
import { Divider } from '@fluentui/react-divider';
import { dividerClassNames } from '@fluentui/react-divider';
import { DividerProps } from '@fluentui/react-divider';
import { DividerSlots } from '@fluentui/react-divider';
import { DividerState } from '@fluentui/react-divider';
import { Drawer } from '@fluentui/react-drawer';
import { DrawerBody } from '@fluentui/react-drawer';
import { drawerBodyClassNames } from '@fluentui/react-drawer';
import { DrawerBodyProps } from '@fluentui/react-drawer';
import { DrawerBodySlots } from '@fluentui/react-drawer';
import { DrawerBodyState } from '@fluentui/react-drawer';
import { DrawerContextValue } from '@fluentui/react-drawer';
import { DrawerFooter } from '@fluentui/react-drawer';
import { drawerFooterClassNames } from '@fluentui/react-drawer';
import { DrawerFooterProps } from '@fluentui/react-drawer';
import { DrawerFooterSlots } from '@fluentui/react-drawer';
import { DrawerFooterState } from '@fluentui/react-drawer';
import { DrawerHeader } from '@fluentui/react-drawer';
import { drawerHeaderClassNames } from '@fluentui/react-drawer';
import { DrawerHeaderNavigation } from '@fluentui/react-drawer';
import { drawerHeaderNavigationClassNames } from '@fluentui/react-drawer';
import { DrawerHeaderNavigationProps } from '@fluentui/react-drawer';
import { DrawerHeaderNavigationSlots } from '@fluentui/react-drawer';
import { DrawerHeaderNavigationState } from '@fluentui/react-drawer';
import { DrawerHeaderProps } from '@fluentui/react-drawer';
import { DrawerHeaderSlots } from '@fluentui/react-drawer';
import { DrawerHeaderState } from '@fluentui/react-drawer';
import { DrawerHeaderTitle } from '@fluentui/react-drawer';
import { drawerHeaderTitleClassNames } from '@fluentui/react-drawer';
import { DrawerHeaderTitleProps } from '@fluentui/react-drawer';
import { DrawerHeaderTitleSlots } from '@fluentui/react-drawer';
import { DrawerHeaderTitleState } from '@fluentui/react-drawer';
import { DrawerProps } from '@fluentui/react-drawer';
import { DrawerProvider } from '@fluentui/react-drawer';
import { DrawerSlots } from '@fluentui/react-drawer';
import { DrawerState } from '@fluentui/react-drawer';
import { Dropdown } from '@fluentui/react-combobox';
import { dropdownClassNames } from '@fluentui/react-combobox';
import { DropdownContextValues } from '@fluentui/react-combobox';
import { DropdownOpenChangeData } from '@fluentui/react-combobox';
import { DropdownOpenEvents } from '@fluentui/react-combobox';
import { DropdownProps } from '@fluentui/react-combobox';
import { DropdownSlots } from '@fluentui/react-combobox';
import { DropdownState } from '@fluentui/react-combobox';
import { DurationTokens } from '@fluentui/react-theme';
import { EmptySwatch } from '@fluentui/react-swatch-picker';
import { emptySwatchClassNames } from '@fluentui/react-swatch-picker';
import { EmptySwatchProps } from '@fluentui/react-swatch-picker';
import { EmptySwatchSlots } from '@fluentui/react-swatch-picker';
import { EmptySwatchState } from '@fluentui/react-swatch-picker';
import { Field } from '@fluentui/react-field';
import { fieldClassNames } from '@fluentui/react-field';
import { FieldContextProvider } from '@fluentui/react-field';
import { FieldContextValue } from '@fluentui/react-field';
import { FieldContextValues } from '@fluentui/react-field';
import { FieldControlProps } from '@fluentui/react-field';
import { FieldControlPropsOptions } from '@fluentui/react-field';
import { FieldProps } from '@fluentui/react-field';
import { FieldSlots } from '@fluentui/react-field';
import { FieldState } from '@fluentui/react-field';
import { flattenTree_unstable } from '@fluentui/react-tree';
import { FlattenTreeItem } from '@fluentui/react-tree';
import { FlatTree } from '@fluentui/react-tree';
import { flatTreeClassNames } from '@fluentui/react-tree';
import { FlatTreeItem } from '@fluentui/react-tree';
import { FlatTreeItemProps } from '@fluentui/react-tree';
import { FlatTreeProps } from '@fluentui/react-tree';
import { FlatTreeSlots } from '@fluentui/react-tree';
import { FlatTreeState } from '@fluentui/react-tree';
import { FluentProvider } from '@fluentui/react-provider';
import { fluentProviderClassNames } from '@fluentui/react-provider';
import { FluentProviderContextValues } from '@fluentui/react-provider';
import { FluentProviderCustomStyleHooks } from '@fluentui/react-provider';
import { FluentProviderProps } from '@fluentui/react-provider';
import { FluentProviderSlots } from '@fluentui/react-provider';
import { FluentProviderState } from '@fluentui/react-provider';
import { FontFamilyTokens } from '@fluentui/react-theme';
import { FontSizeTokens } from '@fluentui/react-theme';
import { FontWeightTokens } from '@fluentui/react-theme';
import { ForwardRefComponent } from '@fluentui/react-utilities';
import { getIntrinsicElementProps } from '@fluentui/react-utilities';
import { getNativeElementProps } from '@fluentui/react-utilities';
import { getPartitionedNativeProps } from '@fluentui/react-utilities';
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
import { getSlots } from '@fluentui/react-utilities';
import { GriffelRenderer } from '@griffel/react';
import { GriffelResetStyle } from '@griffel/react';
import { GriffelStyle } from '@griffel/react';
import { Hamburger } from '@fluentui/react-nav';
import { hamburgerClassNames } from '@fluentui/react-nav';
import { HamburgerProps } from '@fluentui/react-nav';
import { HamburgerState } from '@fluentui/react-nav';
import { HeadlessFlatTree } from '@fluentui/react-tree';
import { HeadlessFlatTreeItem } from '@fluentui/react-tree';
import { HeadlessFlatTreeItemProps } from '@fluentui/react-tree';
import { HeadlessFlatTreeOptions } from '@fluentui/react-tree';
import { HorizontalSpacingTokens } from '@fluentui/react-theme';
import { IdPrefixProvider } from '@fluentui/react-utilities';
import { Image as Image_2 } from '@fluentui/react-image';
import { imageClassNames } from '@fluentui/react-image';
import { ImageProps } from '@fluentui/react-image';
import { ImageSlots } from '@fluentui/react-image';
import { ImageState } from '@fluentui/react-image';
import { ImageSwatch } from '@fluentui/react-swatch-picker';
import { imageSwatchClassNames } from '@fluentui/react-swatch-picker';
import { ImageSwatchProps } from '@fluentui/react-swatch-picker';
import { ImageSwatchSlots } from '@fluentui/react-swatch-picker';
import { ImageSwatchState } from '@fluentui/react-swatch-picker';
import { InfoButton } from '@fluentui/react-infolabel';
import { infoButtonClassNames } from '@fluentui/react-infolabel';
import { InfoButtonProps } from '@fluentui/react-infolabel';
import { InfoButtonSlots } from '@fluentui/react-infolabel';
import { InfoButtonState } from '@fluentui/react-infolabel';
import { InfoLabel } from '@fluentui/react-infolabel';
import { infoLabelClassNames } from '@fluentui/react-infolabel';
import { InfoLabelProps } from '@fluentui/react-infolabel';
import { InfoLabelSlots } from '@fluentui/react-infolabel';
import { InfoLabelState } from '@fluentui/react-infolabel';
import { InlineDrawer } from '@fluentui/react-drawer';
import { inlineDrawerClassNames } from '@fluentui/react-drawer';
import { InlineDrawerProps } from '@fluentui/react-drawer';
import { InlineDrawerSlots } from '@fluentui/react-drawer';
import { InlineDrawerState } from '@fluentui/react-drawer';
import { Input } from '@fluentui/react-input';
import { inputClassNames } from '@fluentui/react-input';
import { InputOnChangeData } from '@fluentui/react-input';
import { InputProps } from '@fluentui/react-input';
import { InputSlots } from '@fluentui/react-input';
import { InputState } from '@fluentui/react-input';
import { InteractionTag } from '@fluentui/react-tags';
import { interactionTagClassNames } from '@fluentui/react-tags';
import { InteractionTagPrimary } from '@fluentui/react-tags';
import { interactionTagPrimaryClassNames } from '@fluentui/react-tags';
import { InteractionTagPrimaryContextValues } from '@fluentui/react-tags';
import { InteractionTagPrimaryProps } from '@fluentui/react-tags';
import { InteractionTagPrimarySlots } from '@fluentui/react-tags';
import { InteractionTagPrimaryState } from '@fluentui/react-tags';
import { InteractionTagProps } from '@fluentui/react-tags';
import { InteractionTagSecondary } from '@fluentui/react-tags';
import { interactionTagSecondaryClassNames } from '@fluentui/react-tags';
import { InteractionTagSecondaryProps } from '@fluentui/react-tags';
import { InteractionTagSecondarySlots } from '@fluentui/react-tags';
import { InteractionTagSecondaryState } from '@fluentui/react-tags';
import { InteractionTagSlots } from '@fluentui/react-tags';
import { InteractionTagState } from '@fluentui/react-tags';
import { isHTMLElement } from '@fluentui/react-utilities';
import { isTruncatableBreadcrumbContent } from '@fluentui/react-breadcrumb';
import { JSXElement } from '@fluentui/react-utilities';
import { JSXIntrinsicElement } from '@fluentui/react-utilities';
import { JSXIntrinsicElementKeys } from '@fluentui/react-utilities';
import { Label } from '@fluentui/react-label';
import { labelClassNames } from '@fluentui/react-label';
import { LabelProps } from '@fluentui/react-label';
import { LabelSlots } from '@fluentui/react-label';
import { LabelState } from '@fluentui/react-label';
import { LargeTitle } from '@fluentui/react-text';
import { largeTitleClassNames } from '@fluentui/react-text';
import { LineHeightTokens } from '@fluentui/react-theme';
import { Link } from '@fluentui/react-link';
import { linkClassNames } from '@fluentui/react-link';
import { LinkProps } from '@fluentui/react-link';
import { LinkSlots } from '@fluentui/react-link';
import { LinkState } from '@fluentui/react-link';
import { List } from '@fluentui/react-list';
import { Listbox } from '@fluentui/react-combobox';
import { listboxClassNames } from '@fluentui/react-combobox';
import { ListboxContextValue } from '@fluentui/react-combobox';
import { ListboxContextValues } from '@fluentui/react-combobox';
import { ListboxProps } from '@fluentui/react-combobox';
import { ListboxProvider } from '@fluentui/react-combobox';
import { ListboxSlots } from '@fluentui/react-combobox';
import { ListboxState } from '@fluentui/react-combobox';
import { listClassNames } from '@fluentui/react-list';
import { ListItem } from '@fluentui/react-list';
import { listItemClassNames } from '@fluentui/react-list';
import { ListItemProps } from '@fluentui/react-list';
import { ListItemSlots } from '@fluentui/react-list';
import { ListItemState } from '@fluentui/react-list';
import { ListProps } from '@fluentui/react-list';
import { ListSlots } from '@fluentui/react-list';
import { ListState } from '@fluentui/react-list';
import { makeResetStyles } from '@griffel/react';
import { makeStaticStyles } from '@griffel/react';
import { makeStyles } from '@griffel/react';
import { Menu } from '@fluentui/react-menu';
import { MenuButton } from '@fluentui/react-button';
import { menuButtonClassNames } from '@fluentui/react-button';
import { MenuButtonProps } from '@fluentui/react-button';
import { MenuButtonSlots } from '@fluentui/react-button';
import { MenuButtonState } from '@fluentui/react-button';
import { MenuCheckedValueChangeData } from '@fluentui/react-menu';
import { MenuCheckedValueChangeEvent } from '@fluentui/react-menu';
import { MenuContextValue } from '@fluentui/react-menu';
import { MenuContextValues } from '@fluentui/react-menu';
import { MenuDivider } from '@fluentui/react-menu';
import { menuDividerClassNames } from '@fluentui/react-menu';
import { MenuDividerProps } from '@fluentui/react-menu';
import { MenuDividerSlots } from '@fluentui/react-menu';
import { MenuDividerState } from '@fluentui/react-menu';
import { MenuGroup } from '@fluentui/react-menu';
import { menuGroupClassNames } from '@fluentui/react-menu';
import { MenuGroupContextProvider } from '@fluentui/react-menu';
import { MenuGroupContextValue } from '@fluentui/react-menu';
import { MenuGroupContextValues } from '@fluentui/react-menu';
import { MenuGroupHeader } from '@fluentui/react-menu';
import { menuGroupHeaderClassNames } from '@fluentui/react-menu';
import { MenuGroupHeaderProps } from '@fluentui/react-menu';
import { MenuGroupHeaderSlots } from '@fluentui/react-menu';
import { MenuGroupHeaderState } from '@fluentui/react-menu';
import { MenuGroupProps } from '@fluentui/react-menu';
import { MenuGroupSlots } from '@fluentui/react-menu';
import { MenuGroupState } from '@fluentui/react-menu';
import { MenuItem } from '@fluentui/react-menu';
import { MenuItemCheckbox } from '@fluentui/react-menu';
import { menuItemCheckboxClassNames } from '@fluentui/react-menu';
import { MenuItemCheckboxProps } from '@fluentui/react-menu';
import { MenuItemCheckboxState } from '@fluentui/react-menu';
import { menuItemClassNames } from '@fluentui/react-menu';
import { MenuItemLink } from '@fluentui/react-menu';
import { menuItemLinkClassNames } from '@fluentui/react-menu';
import { MenuItemLinkProps } from '@fluentui/react-menu';
import { MenuItemLinkSlots } from '@fluentui/react-menu';
import { MenuItemLinkState } from '@fluentui/react-menu';
import { MenuItemProps } from '@fluentui/react-menu';
import { MenuItemRadio } from '@fluentui/react-menu';
import { menuItemRadioClassNames } from '@fluentui/react-menu';
import { MenuItemRadioProps } from '@fluentui/react-menu';
import { MenuItemRadioState } from '@fluentui/react-menu';
import { MenuItemSelectableProps } from '@fluentui/react-menu';
import { MenuItemSelectableState } from '@fluentui/react-menu';
import { MenuItemSlots } from '@fluentui/react-menu';
import { MenuItemState } from '@fluentui/react-menu';
import { MenuItemSwitch } from '@fluentui/react-menu';
import { menuItemSwitchClassNames } from '@fluentui/react-menu';
import { MenuList } from '@fluentui/react-menu';
import { menuListClassNames } from '@fluentui/react-menu';
import { MenuListContextValue } from '@fluentui/react-menu';
import { MenuListContextValues } from '@fluentui/react-menu';
import { MenuListProps } from '@fluentui/react-menu';
import { MenuListProvider } from '@fluentui/react-menu';
import { MenuListSlots } from '@fluentui/react-menu';
import { MenuListState } from '@fluentui/react-menu';
import { MenuOpenChangeData } from '@fluentui/react-menu';
import { MenuOpenEvent } from '@fluentui/react-menu';
import { MenuOpenEvents } from '@fluentui/react-menu';
import { MenuPopover } from '@fluentui/react-menu';
import { menuPopoverClassNames } from '@fluentui/react-menu';
import { MenuPopoverProps } from '@fluentui/react-menu';
import { MenuPopoverSlots } from '@fluentui/react-menu';
import { MenuPopoverState } from '@fluentui/react-menu';
import { MenuProps } from '@fluentui/react-menu';
import { MenuProvider } from '@fluentui/react-menu';
import { MenuSlots } from '@fluentui/react-menu';
import { MenuSplitGroup } from '@fluentui/react-menu';
import { menuSplitGroupClassNames } from '@fluentui/react-menu';
import { MenuSplitGroupProps } from '@fluentui/react-menu';
import { MenuSplitGroupSlots } from '@fluentui/react-menu';
import { MenuSplitGroupState } from '@fluentui/react-menu';
import { MenuState } from '@fluentui/react-menu';
import { MenuTrigger } from '@fluentui/react-menu';
import { MenuTriggerChildProps } from '@fluentui/react-menu';
import { MenuTriggerContextProvider } from '@fluentui/react-menu';
import { MenuTriggerProps } from '@fluentui/react-menu';
import { MenuTriggerState } from '@fluentui/react-menu';
import { mergeCallbacks } from '@fluentui/react-utilities';
import { mergeClasses } from '@griffel/react';
import { MessageBar } from '@fluentui/react-message-bar';
import { MessageBarActions } from '@fluentui/react-message-bar';
import { messageBarActionsClassNames } from '@fluentui/react-message-bar';
import { MessageBarActionsContextValues } from '@fluentui/react-message-bar';
import { MessageBarActionsProps } from '@fluentui/react-message-bar';
import { MessageBarActionsSlots } from '@fluentui/react-message-bar';
import { MessageBarActionsState } from '@fluentui/react-message-bar';
import { MessageBarBody } from '@fluentui/react-message-bar';
import { messageBarBodyClassNames } from '@fluentui/react-message-bar';
import { MessageBarBodyProps } from '@fluentui/react-message-bar';
import { MessageBarBodySlots } from '@fluentui/react-message-bar';
import { MessageBarBodyState } from '@fluentui/react-message-bar';
import { messageBarClassNames } from '@fluentui/react-message-bar';
import { MessageBarContextProvider } from '@fluentui/react-message-bar';
import { MessageBarContextValue } from '@fluentui/react-message-bar';
import { MessageBarContextValues } from '@fluentui/react-message-bar';
import { MessageBarGroup } from '@fluentui/react-message-bar';
import { messageBarGroupClassNames } from '@fluentui/react-message-bar';
import { MessageBarGroupProps } from '@fluentui/react-message-bar';
import { MessageBarGroupSlots } from '@fluentui/react-message-bar';
import { MessageBarGroupState } from '@fluentui/react-message-bar';
import { MessageBarIntent } from '@fluentui/react-message-bar';
import { MessageBarProps } from '@fluentui/react-message-bar';
import { MessageBarSlots } from '@fluentui/react-message-bar';
import { MessageBarState } from '@fluentui/react-message-bar';
import { MessageBarTitle } from '@fluentui/react-message-bar';
import { messageBarTitleClassNames } from '@fluentui/react-message-bar';
import { MessageBarTitleProps } from '@fluentui/react-message-bar';
import { MessageBarTitleSlots } from '@fluentui/react-message-bar';
import { MessageBarTitleState } from '@fluentui/react-message-bar';
import { MessageBarTransitionContextValue } from '@fluentui/react-message-bar';
import { MotionComponentProps } from '@fluentui/react-motion';
import { MotionImperativeRef } from '@fluentui/react-motion';
import { motionTokens } from '@fluentui/react-motion';
import { Nav } from '@fluentui/react-nav';
import { NavButtonRenderFunction } from '@fluentui/react-carousel';
import { NavCategory } from '@fluentui/react-nav';
import { NavCategoryContextValues } from '@fluentui/react-nav';
import { NavCategoryItem } from '@fluentui/react-nav';
import { navCategoryItemClassNames } from '@fluentui/react-nav';
import { NavCategoryItemContextValues } from '@fluentui/react-nav';
import { NavCategoryItemProps } from '@fluentui/react-nav';
import { NavCategoryItemProvider } from '@fluentui/react-nav';
import { NavCategoryItemSlots } from '@fluentui/react-nav';
import { NavCategoryItemState } from '@fluentui/react-nav';
import { NavCategoryProps } from '@fluentui/react-nav';
import { NavCategoryProvider } from '@fluentui/react-nav';
import { NavCategoryState } from '@fluentui/react-nav';
import { navClassNames } from '@fluentui/react-nav';
import { NavContextValue } from '@fluentui/react-nav';
import { NavContextValues } from '@fluentui/react-nav';
import { NavDensity } from '@fluentui/react-nav';
import { NavDivider } from '@fluentui/react-nav';
import { navDividerClassNames } from '@fluentui/react-nav';
import { NavDividerProps } from '@fluentui/react-nav';
import { NavDividerState } from '@fluentui/react-nav';
import { NavDrawer } from '@fluentui/react-nav';
import { NavDrawerBody } from '@fluentui/react-nav';
import { navDrawerBodyClassNames } from '@fluentui/react-nav';
import { NavDrawerBodyProps } from '@fluentui/react-nav';
import { NavDrawerBodySlots } from '@fluentui/react-nav';
import { NavDrawerBodyState } from '@fluentui/react-nav';
import { navDrawerClassNames } from '@fluentui/react-nav';
import { NavDrawerFooter } from '@fluentui/react-nav';
import { navDrawerFooterClassNames } from '@fluentui/react-nav';
import { NavDrawerFooterProps } from '@fluentui/react-nav';
import { NavDrawerFooterSlots } from '@fluentui/react-nav';
import { NavDrawerFooterState } from '@fluentui/react-nav';
import { NavDrawerHeader } from '@fluentui/react-nav';
import { navDrawerHeaderClassNames } from '@fluentui/react-nav';
import { NavDrawerHeaderProps } from '@fluentui/react-nav';
import { NavDrawerHeaderSlots } from '@fluentui/react-nav';
import { NavDrawerHeaderState } from '@fluentui/react-nav';
import { NavDrawerProps } from '@fluentui/react-nav';
import { NavDrawerSlots } from '@fluentui/react-nav';
import { NavDrawerState } from '@fluentui/react-nav';
import { NavItem } from '@fluentui/react-nav';
import { navItemClassNames } from '@fluentui/react-nav';
import { NavItemProps } from '@fluentui/react-nav';
import { NavItemRegisterData } from '@fluentui/react-nav';
import { NavItemSlots } from '@fluentui/react-nav';
import { NavItemState } from '@fluentui/react-nav';
import { NavItemValue } from '@fluentui/react-nav';
import { NavProps } from '@fluentui/react-nav';
import { NavProvider } from '@fluentui/react-nav';
import { NavSectionHeader } from '@fluentui/react-nav';
import { navSectionHeaderClassNames } from '@fluentui/react-nav';
import { NavSectionHeaderProps } from '@fluentui/react-nav';
import { NavSectionHeaderSlots } from '@fluentui/react-nav';
import { NavSectionHeaderState } from '@fluentui/react-nav';
import { NavSlots } from '@fluentui/react-nav';
import { NavState } from '@fluentui/react-nav';
import { NavSubItem } from '@fluentui/react-nav';
import { navSubItemClassNames } from '@fluentui/react-nav';
import { NavSubItemGroup } from '@fluentui/react-nav';
import { navSubItemGroupClassNames } from '@fluentui/react-nav';
import { NavSubItemGroupProps } from '@fluentui/react-nav';
import { NavSubItemGroupSlots } from '@fluentui/react-nav';
import { NavSubItemGroupState } from '@fluentui/react-nav';
import { NavSubItemProps } from '@fluentui/react-nav';
import { NavSubItemSlots } from '@fluentui/react-nav';
import { NavSubItemState } from '@fluentui/react-nav';
import { OnNavItemSelectData } from '@fluentui/react-nav';
import { OnOpenChangeData } from '@fluentui/react-popover';
import { OnSelectionChangeCallback } from '@fluentui/react-utilities';
import { OnSelectionChangeData } from '@fluentui/react-utilities';
import { OnVisibleChangeData } from '@fluentui/react-tooltip';
import { OpenPopoverEvents } from '@fluentui/react-popover';
import { Option as Option_2 } from '@fluentui/react-combobox';
import { optionClassNames } from '@fluentui/react-combobox';
import { OptionGroup } from '@fluentui/react-combobox';
import { optionGroupClassNames } from '@fluentui/react-combobox';
import { OptionGroupProps } from '@fluentui/react-combobox';
import { OptionGroupSlots } from '@fluentui/react-combobox';
import { OptionGroupState } from '@fluentui/react-combobox';
import { OptionOnSelectData } from '@fluentui/react-combobox';
import { OptionProps } from '@fluentui/react-combobox';
import { OptionSlots } from '@fluentui/react-combobox';
import { OptionState } from '@fluentui/react-combobox';
import { Overflow } from '@fluentui/react-overflow';
import { OverflowDivider } from '@fluentui/react-overflow';
import { OverflowItem } from '@fluentui/react-overflow';
import { OverflowItemProps } from '@fluentui/react-overflow';
import { OverflowProps } from '@fluentui/react-overflow';
import { OverlayDrawer } from '@fluentui/react-drawer';
import { overlayDrawerClassNames } from '@fluentui/react-drawer';
import { OverlayDrawerProps } from '@fluentui/react-drawer';
import { OverlayDrawerSlots } from '@fluentui/react-drawer';
import { OverlayDrawerState } from '@fluentui/react-drawer';
import { PartialTheme } from '@fluentui/react-theme';
import { PartitionAvatarGroupItems } from '@fluentui/react-avatar';
import { partitionAvatarGroupItems } from '@fluentui/react-avatar';
import { PartitionAvatarGroupItemsOptions } from '@fluentui/react-avatar';
import { PartitionBreadcrumbItems } from '@fluentui/react-breadcrumb';
import { partitionBreadcrumbItems } from '@fluentui/react-breadcrumb';
import { PartitionBreadcrumbItemsOptions } from '@fluentui/react-breadcrumb';
import { Persona } from '@fluentui/react-persona';
import { personaClassNames } from '@fluentui/react-persona';
import { PersonaProps } from '@fluentui/react-persona';
import { PersonaSlots } from '@fluentui/react-persona';
import { PersonaState } from '@fluentui/react-persona';
import { Popover } from '@fluentui/react-popover';
import { PopoverContextValue } from '@fluentui/react-popover';
import { PopoverProps } from '@fluentui/react-popover';
import { PopoverProvider } from '@fluentui/react-popover';
import { PopoverSize } from '@fluentui/react-popover';
import { PopoverState } from '@fluentui/react-popover';
import { PopoverSurface } from '@fluentui/react-popover';
import { popoverSurfaceClassNames } from '@fluentui/react-popover';
import { PopoverSurfaceProps } from '@fluentui/react-popover';
import { PopoverSurfaceSlots } from '@fluentui/react-popover';
import { PopoverSurfaceState } from '@fluentui/react-popover';
import { PopoverTrigger } from '@fluentui/react-popover';
import { PopoverTriggerChildProps } from '@fluentui/react-popover';
import { PopoverTriggerProps } from '@fluentui/react-popover';
import { PopoverTriggerState } from '@fluentui/react-popover';
import { Portal } from '@fluentui/react-portal';
import { PortalMountNodeProvider } from '@fluentui/react-shared-contexts';
import { PortalProps } from '@fluentui/react-portal';
import { PortalState } from '@fluentui/react-portal';
import { PositioningBoundary } from '@fluentui/react-positioning';
import { PositioningConfigurationFn } from '@fluentui/react-positioning';
import { PositioningConfigurationFnOptions } from '@fluentui/react-positioning';
import { PositioningConfigurationProvider } from '@fluentui/react-positioning';
import { PositioningImperativeRef } from '@fluentui/react-positioning';
import { PositioningProps } from '@fluentui/react-positioning';
import { PositioningRect } from '@fluentui/react-positioning';
import { PositioningShorthand } from '@fluentui/react-positioning';
import { PositioningShorthandValue } from '@fluentui/react-positioning';
import { PositioningVirtualElement } from '@fluentui/react-positioning';
import { presenceAvailableFilled } from '@fluentui/react-badge';
import { presenceAvailableRegular } from '@fluentui/react-badge';
import { presenceAwayFilled } from '@fluentui/react-badge';
import { presenceAwayRegular } from '@fluentui/react-badge';
import { PresenceBadge } from '@fluentui/react-badge';
import { presenceBadgeClassNames } from '@fluentui/react-badge';
import { PresenceBadgeProps } from '@fluentui/react-badge';
import { PresenceBadgeState } from '@fluentui/react-badge';
import { PresenceBadgeStatus } from '@fluentui/react-badge';
import { presenceBlockedRegular } from '@fluentui/react-badge';
import { presenceBusyFilled } from '@fluentui/react-badge';
import { PresenceComponent } from '@fluentui/react-motion';
import { PresenceComponentProps } from '@fluentui/react-motion';
import { presenceDndFilled } from '@fluentui/react-