import type {
    FDocViewerContent,
    FRootTooltip,
    FIconButtonVariant,
    FIconButtonType,
    FIconButtonState,
    FIconButtonSize,
    FTooltipPlacement,
    FIconState,
    FToastState,
    FProgressBarValueProp,
    FProgressBarState,
    FProgressBarWidthProp,
    FSearchSuggestions,
    FSearchState,
    FSearchScope,
    FSearchResultWhen,
    FSelectOptions,
    FSelectState,
    FSelectOptionTemplate,
    FSelectHeightProp,
    FSelectWidthProp,
    FSelectMaxOptionsWidth,
    FSelectValue,
    FFileUploadFileType,
    FFileUploadState,
    FFileUploadSizeProp,
    FFileUploadValueType,
    FTabNodeWidthProp,
    FSwitchState,
    FSuggestSuggestions,
    FSuggestState,
    FSuggestSuffixWhen,
    FSuggestWhen,
    FCounterStateProp,
    FTextAreaState,
    FRadioState,
    FAccordionBodyHeightProp,
    FAccordionPadding,
    FSpacerSizeProp,
    FInputState,
    FInputSuffixWhen,
    FTextStateProp,
    FFieldStateProp,
    FEmojiPickerState,
    RecentEmojis,
    FEmojiPickerIncludesCategories,
    FEmojiPickerExcludesCategories,
    ExcludeEmojis,
    FEmojiPickerCustomEmojiData,
    FTagCategory,
    FTagStateProp,
    FDivStateProp,
    FDivBorderProp,
    FDivPaddingProp,
    FDivWidthProp,
    FDivHeightProp,
    FCountdownDuration,
    FCountdownSizesProp,
    FCountdownLabelProp,
    FCountdownCategoryProp,
    FCountdownStateProp,
    FDateTimePickerState,
    DateValueType,
    FDateOption,
    DateDisableType,
    FGroupLabel,
    FCheckboxState,
    FButtonActions,
    FButtonAction,
    FButtonState,
    FColorPickerState,
    FBreadcrumbVariant,
    FBreadcrumbSize,
    FBreadcrumbs,
    FDividerState,
    FPictogramCategory,
    FPictogramSize,
    FPictogramState,
    FPictogramVariant,
    FPopoverPlacement,
    FPopoverSize,
    FPopoverState,
} from '../src/index';
declare global {
    namespace JSX {
        interface IntrinsicElements {
            ['f-document-viewer']: {
                content?: FDocViewerContent;

                required: array;

                jumpLinks: boolean;

                collapsibleJumpLinks: boolean;

                levelSelector: boolean;

                fDocViewerScrollContent?: FDiv;

                leftColumn?: FDiv;

                notch?: FDiv;

                notchIcon?: FIcon;

                leftColumnWrapper?: FDiv;

                fSelectLevelSelector?: FSelect;

                indexingLevelSelected: null | number;

                searchValue: string;

                deepestLevel: number;

                getAccordionPanel: undefined;

                getTextPanel: undefined;

                traverse: undefined;

                scrollToSectionMethod: undefined;

                checkInView: undefined;

                handleSelection: undefined;

                handleSearch: undefined;

                toggleLeftColumn: undefined;

                contentSectionHeader: undefined;

                jumplinksSection: undefined;

                jumplinksItems: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-icon-button']: {
                fill: string;

                iconInputClass: boolean;

                icon?: string;

                variant: FIconButtonVariant | undefined;

                category: FIconButtonType | undefined;

                size: FIconButtonSize | undefined;

                state: FIconButtonState | undefined;

                counter?: string | undefined;

                loading: boolean | undefined;

                disabled: boolean | undefined;

                effect?: 'pulse' | 'wiggle' | undefined;

                iconElement?: FIcon;

                counterElement?: FCounter | undefined;

                counterSize?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-carousel']: {
                activeContentId?: string | undefined;

                autoPlay?: boolean | undefined;

                autoPlayInterval?: number | undefined;

                slides?: HTMLElement;

                slider?: HTMLElement;

                dots?: HTMLElement;

                nextArrow?: FIcon;

                progress?: FDiv | undefined;

                prevArrow?: FIcon;

                activeSlide?: HTMLElement | null | undefined;

                slideElements?: NodeListOf<FCarouselContent> | undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-tooltip']: {
                open: boolean;

                placement: FTooltipPlacement | undefined;

                closable: boolean | undefined;

                target?: string | HTMLElement;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-icon']: {
                fill?: string | undefined;

                _source?: string;

                size: 'x-large' | 'large' | 'medium' | 'small' | 'x-small' | 'xx-small' | undefined;

                state: FIconState | undefined;

                source?: string;

                disabled: boolean | undefined;

                loading: boolean | undefined;

                clickable: boolean | undefined;

                url: boolean | undefined;

                required: array;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-grid']: {
                minCellWidth?: number | undefined;

                maxCellWidth?: number | undefined;

                cellHeight?: number | undefined;

                gap: 'x-large' | 'large' | 'medium' | 'small' | 'x-small' | undefined;

                gridTemplateColumns?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-toast']: {
                type: 'auto-hide' | 'persists' | undefined;

                duration: number | undefined;

                state: FToastState | undefined;

                ['close-button']: boolean | undefined;

                mouseover: boolean;

                removeTimeout?: ReturnType<typeof setTimeout>;

                toasterRef?: Ref<HTMLDivElement>;

                uid?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-progress-bar']: {
                value?: FProgressBarValueProp | undefined;

                variant: 'block' | 'curved' | 'circle' | undefined;

                size: 'large' | 'medium' | 'small' | 'x-small' | undefined;

                state: FProgressBarState | undefined;

                width: FProgressBarWidthProp | undefined;

                animation: boolean;

                fProgressBarFill?: FDiv | undefined;

                computedHeight?: undefined;

                circleDiameter?: undefined;

                computedWidth?: undefined;

                fill: string;

                valueInAngle?: undefined;

                valueInNumber?: undefined;

                circleProgressStyle?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-tab-content']: {
                transition: 'fade' | 'slide' | 'none' | undefined;

                duration: number | undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-search']: {
                variant: 'curved' | 'round' | 'block' | undefined;

                category: 'fill' | 'outline' | 'transparent' | undefined;

                result: FSearchSuggestions | undefined;

                disableResult: boolean;

                state: FSearchState | undefined;

                size: 'medium' | 'small' | undefined;

                value?: string | undefined;

                selectedScope?: string | undefined;

                ['selected-scope']?: undefined;

                placeholder?: string | undefined;

                scope: FSearchScope | undefined;

                disabled: boolean | undefined;

                clear: boolean | undefined;

                ['search-button']: boolean | undefined;

                loading: boolean | undefined;

                resultWhen?: FSearchResultWhen;

                ['result-when']?: undefined;

                resultMaxHeight?: string | undefined;

                labelSlot?: HTMLElement;

                descriptionSlot?: HTMLElement;

                helpSlot?: HTMLElement;

                headerSection?: FDiv;

                helperTextSection?: FDiv;

                suggestElement?: FSuggest;

                _labelNodes?: NodeListOf<HTMLElement>;

                _descriptionNodes?: NodeListOf<HTMLElement>;

                _helpNodes?: NodeListOf<HTMLElement>;

                hasLabel?: undefined;

                hasDescription?: undefined;

                hasHelperText?: undefined;

                applyStyling?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-select']: {
                _labelNodes?: NodeListOf<HTMLElement>;

                _hasLabel: boolean;

                _helpNodes?: NodeListOf<HTMLElement>;

                _hasHelperText: boolean;

                openDropdown: boolean;

                viewMoreTags: boolean;

                searchValue: string;

                selectedOptions: FSelectOptions;

                filteredOptions: FSelectOptions;

                optimizedHeight: number;

                preferredOpenDirection: string;

                optionsTop: string;

                optionsBottom: string;

                inputElement?: HTMLInputElement;

                wrapperElement?: HTMLDivElement;

                optionElement?: HTMLDivElement;

                allOptions?: NodeListOf<HTMLElement> | undefined;

                type: 'single' | 'multiple' | undefined;

                variant: 'curved' | 'round' | 'block' | undefined;

                category: 'fill' | 'outline' | 'transparent' | undefined;

                state: FSelectState | undefined;

                size?: 'medium' | 'small' | undefined;

                value?: FSelectValue | undefined;

                options?: FSelectOptions;

                placeholder?: string | undefined;

                optionTemplate?: FSelectOptionTemplate | undefined;

                ['option-template']?: undefined;

                iconLeft?: string | undefined;

                height: FSelectHeightProp;

                width: FSelectWidthProp | undefined;

                loading: boolean | undefined;

                disabled: boolean | undefined;

                searchable: boolean | undefined;

                clear: boolean | undefined;

                checkbox: boolean | undefined;

                createOption: boolean | undefined;

                autoAddOption: boolean | undefined;

                selectionLimit: number;

                maxOptionsWidth?: FSelectMaxOptionsWidth | undefined;

                useVirtualizer?: boolean | undefined;

                ['use-virtualizer']?: undefined;

                iconSize?: undefined;

                outsideClick?: undefined;

                containerScroll?: undefined;

                handleDropDownOpen: undefined;

                handleDropDownClose: undefined;

                handleOptionSelection: undefined;

                handleSelectionGroup: undefined;

                handleRemoveGroupSelection: undefined;

                handleCheckboxInput: undefined;

                handleCheckboxGroup: undefined;

                handleSelectAll: undefined;

                handleViewMoreTags: undefined;

                handleInput: undefined;

                handleBlur: undefined;

                handleKeyDown: undefined;

                handleOptionMouseOver: undefined;

                renderSingleSelection: undefined;

                renderMultipleSelectionTag: undefined;

                renderArrayOptions: undefined;

                renderGroupOptions: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-form']: {
                gap: 'large' | 'medium' | 'small' | 'x-small' | undefined;

                separator: boolean | undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-file-upload']: {
                type: 'single' | 'multiple' | undefined;

                value?: FFileUploadValueType | undefined;

                placeholder?: string | undefined;

                fileType: FFileUploadFileType | undefined;

                size: 'medium' | 'small' | undefined;

                state: FFileUploadState | undefined;

                maxSize?: FFileUploadSizeProp | undefined;

                disabled: boolean | undefined;

                loading: boolean | undefined;

                fileUploadSection?: HTMLElement;

                fileUploadHeader?: FDiv;

                fileUploadError?: FDiv;

                labelSlot?: HTMLElement;

                descriptionSlot?: HTMLElement;

                helpSlot?: HTMLElement;

                textOverflow?: FText;

                _labelNodes?: NodeListOf<HTMLElement>;

                _descriptionNodes?: NodeListOf<HTMLElement>;

                _helpNodes?: NodeListOf<HTMLElement>;

                bytes: number;

                sizeLimitFlag: boolean;

                acceptedFilesFlag: boolean;

                selectedFiles: File[] | undefined;

                fileInputRef?: Ref<HTMLInputElement>;

                hasLabel?: undefined;

                hasDescription?: undefined;

                hasHelperText?: undefined;

                fileFormatError?: undefined;

                fileSizeError?: undefined;

                dispatchValue?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-form-field']: {
                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-tab-node']: {
                width: FTabNodeWidthProp | undefined;

                contentId?: string;

                active: boolean | undefined;

                disabled: boolean | undefined;

                tabWidth?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-switch']: {
                value: boolean | undefined;

                state: FSwitchState | undefined;

                size?: 'small' | 'medium' | undefined;

                disabled: boolean | undefined;

                switchSlots?: FDiv;

                _labelNodes?: NodeListOf<HTMLElement>;

                _subtitleNodes?: NodeListOf<HTMLElement>;

                _iconTooltipNodes?: NodeListOf<HTMLElement>;

                hasLabel?: undefined;

                hasSubtitle?: undefined;

                hasIconTooltip?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-suggest']: {
                variant: 'curved' | 'round' | 'block' | undefined;

                category: 'fill' | 'outline' | 'transparent' | undefined;

                suggestions: FSuggestSuggestions | undefined;

                disableSuggestions: boolean;

                state: FSuggestState | undefined;

                size: 'medium' | 'small' | undefined;

                value?: string | undefined;

                placeholder?: string | undefined;

                iconLeft?: string | undefined;

                iconRight?: string | undefined;

                prefix: string | null;

                suffix?: string | undefined;

                maxLength?: number | undefined;

                loading: boolean | undefined;

                disabled: boolean | undefined;

                clear: boolean | undefined;

                readOnly: boolean | undefined;

                suffixWhen?: FSuggestSuffixWhen | undefined;

                suggestWhen?: FSuggestWhen;

                ['suggest-when']?: undefined;

                optionsMaxHeight?: string | undefined;

                fInput?: FInput;

                popOverElement?: FPopover | undefined;

                FSelectOptions?: FDiv | undefined;

                currentIndex: number;

                currentCategoryIndex: number;

                filteredSuggestions?: FSuggestSuggestions | undefined;

                filteredSuggestionsLength?: undefined;

                anySuggestions?: undefined;

                isStringArraySuggestions?: undefined;

                isTemplateArraySuggestions?: undefined;

                isSearchComponent?: undefined;

                displayOptions: undefined;

                displayCategories: undefined;

                displayCustomTemplate: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-counter']: {
                fill: string;

                category: 'fill' | 'outline' | 'transparent' | undefined;

                label?: number;

                size: 'large' | 'medium' | 'small' | undefined;

                state: FCounterStateProp | undefined;

                loading: boolean | undefined;

                disabled: boolean | undefined;

                required: array;

                computedLabel?: undefined;

                textColor?: undefined;

                loaderColor?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-text-area']: {
                value?: string | undefined;

                category: 'fill' | 'transparent' | 'outline' | undefined;

                state: FTextAreaState | undefined;

                size?: 'small' | 'medium' | undefined;

                rows?: number | undefined;

                placeholder?: string | undefined;

                maxLength?: number | undefined;

                resizable: boolean | undefined;

                clear: boolean | undefined;

                disabled: boolean | undefined;

                readOnly: boolean | undefined;

                maskValue: boolean | undefined;

                textareaElement?: HTMLTextAreaElement | undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-radio']: {
                value: 'selected' | 'unselected' | undefined;

                state: FRadioState | undefined;

                size?: 'small' | 'medium' | undefined;

                disabled: boolean | undefined;

                slotWrapper?: FDiv;

                nativeRadio?: HTMLInputElement;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-accordion']: {
                open: boolean | undefined;

                icon: 'chevron' | 'caret' | 'plus' | 'none' | undefined;

                iconSize: 'x-small' | 'small' | 'medium' | 'large' | undefined;

                iconPlacement: 'right' | 'left' | undefined;

                maxHeight?: FAccordionBodyHeightProp | undefined;

                headerPadding: FAccordionPadding | undefined;

                bodyPadding: FAccordionPadding | undefined;

                fAccordionBody?: FDiv | undefined;

                fAccordionHeader?: FDiv | undefined;

                headerId?: string;

                contentId?: string;

                iconName?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-spacer']: {
                size: FSpacerSizeProp | undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-input']: {
                _labelNodes?: NodeListOf<HTMLElement>;

                _hasLabel: boolean;

                _helpNodes?: NodeListOf<HTMLElement>;

                _hasHelperText: boolean;

                inputLight?: FInputLight;

                inputElement?: undefined;

                inputWrapperElement?: undefined;

                clearIcon?: undefined;

                showPassword: boolean;

                variant: 'curved' | 'round' | 'block' | undefined;

                category: 'fill' | 'outline' | 'transparent' | undefined;

                state: FInputState | undefined;

                size: 'medium' | 'small' | undefined;

                type: 'text' | 'number' | 'email' | 'password' | 'url' | 'tel' | undefined;

                value?: string | number | undefined;

                placeholder?: string | undefined;

                iconLeft?: string | undefined;

                iconRight?: string | undefined;

                prefix: string | null;

                suffix?: string | undefined;

                maxLength?: number | undefined;

                loading: boolean | undefined;

                disabled: boolean | undefined;

                clear: boolean | undefined;

                readOnly: boolean | undefined;

                suffixWhen?: FInputSuffixWhen | undefined;

                iconSize?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-input-light']: {
                inputElement?: HTMLInputElement;

                inputWrapperElement?: HTMLInputElement;

                clearIcon?: FIcon | undefined;

                iconRightTemplate?: undefined;

                passwordToggle?: undefined;

                suffixTextTemplate?: undefined;

                suffixTemplate?: undefined;

                iconleftTemplate?: undefined;

                prefixTemplate?: undefined;

                showPassword: boolean;

                variant: 'curved' | 'round' | 'block' | undefined;

                category: 'fill' | 'outline' | 'transparent' | undefined;

                state: FInputState | undefined;

                size: 'medium' | 'small' | undefined;

                type: 'text' | 'number' | 'email' | 'password' | 'url' | 'tel' | undefined;

                value?: string | number | undefined;

                placeholder?: string | undefined;

                iconLeft?: string | undefined;

                iconRight?: string | undefined;

                prefix: string | null;

                suffix?: string | undefined;

                maxLength?: number | undefined;

                loading: boolean | undefined;

                disabled: boolean | undefined;

                clear: boolean | undefined;

                readOnly: boolean | undefined;

                suffixWhen?: FInputSuffixWhen | undefined;

                iconSize?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-input-base']: {
                showPassword: boolean;

                variant: 'curved' | 'round' | 'block' | undefined;

                category: 'fill' | 'outline' | 'transparent' | undefined;

                state: FInputState | undefined;

                size: 'medium' | 'small' | undefined;

                type: 'text' | 'number' | 'email' | 'password' | 'url' | 'tel' | undefined;

                value?: string | number | undefined;

                placeholder?: string | undefined;

                iconLeft?: string | undefined;

                iconRight?: string | undefined;

                prefix: string | null;

                suffix?: string | undefined;

                maxLength?: number | undefined;

                loading: boolean | undefined;

                disabled: boolean | undefined;

                clear: boolean | undefined;

                readOnly: boolean | undefined;

                suffixWhen?: FInputSuffixWhen | undefined;

                iconSize?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-tab']: {
                tabSection?: FDiv;

                showScrollIcons: boolean;

                isOverflowing: boolean;

                variant: 'fill' | 'transparent' | 'no-border' | undefined;

                direction: 'horizontal' | 'vertical';

                alignment: 'left' | 'right' | 'center' | 'top' | 'bottom' | 'middle' | undefined;

                nodeWidth: FTabNodeWidthProp | undefined;

                tabsAlignment?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-text']: {
                fill?: string | undefined;

                variant: 'heading' | 'para' | 'code' | undefined;

                size: 'x-large' | 'large' | 'medium' | 'small' | 'x-small' | undefined;

                weight?: 'bold' | 'medium' | 'regular' | undefined;

                state: FTextStateProp | undefined;

                align: 'left' | 'center' | 'right' | undefined;

                inline: boolean | undefined;

                loading: boolean | undefined;

                disabled: boolean | undefined;

                ellipsis: boolean | undefined;

                iconSize?: undefined;

                headerLevel?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-carousel-content']: {
                contentId?: string;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-field']: {
                variant: 'inline' | 'normal' | undefined;

                state: FFieldStateProp | undefined;

                size?: 'medium' | 'small' | undefined;

                description?: string | undefined;

                canDuplicate: boolean | undefined;

                disabled: boolean | undefined;

                loading: boolean | undefined;

                readOnlyValue: boolean | undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-emoji-picker']: {
                variant: 'curved' | 'round' | 'block' | undefined;

                category: 'fill' | 'outline' | 'transparent' | undefined;

                value?: string | undefined;

                placeholder?: string | undefined;

                size: 'medium' | 'small' | undefined;

                state: FEmojiPickerState | undefined;

                recent: RecentEmojis | undefined;

                include: FEmojiPickerIncludesCategories | undefined;

                exclude: FEmojiPickerExcludesCategories | undefined;

                ['exclude-emojis']: ExcludeEmojis | undefined;

                custom: FEmojiPickerCustomEmojiData | undefined;

                ['close-on-select']: boolean | undefined;

                clear: boolean | undefined;

                disabled: boolean | undefined;

                _labelNodes?: NodeListOf<HTMLElement>;

                _descriptionNodes?: NodeListOf<HTMLElement>;

                _helpNodes?: NodeListOf<HTMLElement>;

                emojiPickerHeader?: FDiv;

                emojiPickerError?: FDiv;

                labelSlot?: HTMLElement;

                descriptionSlot?: HTMLElement;

                helpSlot?: HTMLElement;

                emojiPicker?: FDiv;

                emojiPickerPopover?: FPopover;

                picker?: Picker | undefined;

                categories: array;

                hasLabel?: undefined;

                hasDescription?: undefined;

                hasHelperText?: undefined;

                iconSize?: undefined;

                excludeCategories?: undefined;

                categroiesToDisplay?: undefined;

                outsideClick?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-tag']: {
                tagSystemIcon: boolean;

                fill: string;

                label?: string;

                size: 'large' | 'medium' | 'small' | undefined;

                category: FTagCategory | undefined;

                state: FTagStateProp | undefined;

                iconLeft?: string | undefined;

                iconRight?: string | undefined;

                counter?: number | undefined;

                loading: boolean | undefined;

                selected: boolean | undefined;

                disabled: boolean | undefined;

                clickable: boolean | undefined;

                maxWidth: string;

                labelDiv?: Ref<FDiv>;

                iconSize?: undefined;

                textColor?: undefined;

                loaderColor?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-div']: {
                fill?: string | undefined;

                variant: 'block' | 'curved' | 'round' | undefined;

                direction: 'row' | 'column' | undefined;

                state: FDivStateProp | undefined;

                border?: FDivBorderProp | undefined;

                gap:
                    | 'auto'
                    | 'x-large'
                    | 'large'
                    | 'medium'
                    | 'small'
                    | 'x-small'
                    | 'none'
                    | undefined;

                padding: FDivPaddingProp | undefined;

                align:
                    | 'top-left'
                    | 'top-center'
                    | 'top-right'
                    | 'middle-left'
                    | 'middle-center'
                    | 'middle-right'
                    | 'bottom-left'
                    | 'bottom-center'
                    | 'bottom-right'
                    | undefined;

                width: FDivWidthProp | undefined;

                height: FDivHeightProp | undefined;

                maxWidth?: FDivWidthProp | undefined;

                maxHeight?: FDivHeightProp | undefined;

                disabled: boolean | undefined;

                loading?: 'skeleton' | 'loader' | undefined;

                clickable: boolean | undefined;

                showScrollbar: boolean | undefined;

                overflow: 'wrap' | 'scroll' | 'hidden' | 'visible' | undefined;

                selected:
                    | 'none'
                    | 'background'
                    | 'border'
                    | 'notch-right'
                    | 'notch-left'
                    | undefined;

                sticky: 'none' | 'top' | 'bottom' | 'left' | 'right' | undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-countdown']: {
                category: FCountdownCategoryProp | undefined;

                duration: FCountdownDuration | undefined;

                size: FCountdownSizesProp | undefined;

                state: FCountdownStateProp | undefined;

                labelPlacement: FCountdownLabelProp | undefined;

                fill: string;

                remaining: number;

                timerText?: undefined;

                timerRef?: Ref<FText>;

                currentProgress: number;

                interval: number;

                countdownId: number;

                applyStyles?: undefined;

                applyPieStyles?: undefined;

                maskStyles?: undefined;

                outlineTimerStyle?: undefined;

                secondsDuration?: undefined;

                labelSize?: undefined;

                countdownWidth?: undefined;

                countdownAlignment?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-date-time-picker']: {
                variant: 'curved' | 'round' | 'block' | undefined;

                category: 'fill' | 'outline' | 'transparent' | undefined;

                mode: 'date-time' | 'date-only' | 'time-only' | undefined;

                value?: DateValueType | undefined;

                placeholder?: string | undefined;

                size: 'small' | 'medium' | undefined;

                state: FDateTimePickerState | undefined;

                ['min-date']?: FDateOption | undefined;

                ['max-date']?: FDateOption | undefined;

                ['disable-date']: DateDisableType | undefined;

                clear: boolean | undefined;

                ['is-range']: boolean | undefined;

                inline: boolean | undefined;

                ['week-number']: boolean | undefined;

                disabled: boolean | undefined;

                loading: boolean | undefined;

                dateTimePickerElement?: FInput;

                dateParsingError: string | null;

                flatPickerElement?: Instance | undefined;

                reqAniFrame?: number | undefined;

                placeholderText?: undefined;

                regexDateTime?: undefined;

                dateValidationMessage?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-template']: {
                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-form-group']: {
                label?: FGroupLabel | undefined;

                variant: 'normal' | 'compact' | undefined;

                direction: 'vertical' | 'horizontal' | undefined;

                gap: 'large' | 'medium' | 'small' | 'x-small' | undefined;

                collapse: 'none' | 'accordion' | 'text' | undefined;

                isCollapsed: boolean | undefined;

                canDuplicate: boolean | undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-checkbox']: {
                value: 'checked' | 'unchecked' | 'indeterminate' | undefined;

                state: FCheckboxState | undefined;

                size?: 'small' | 'medium' | undefined;

                disabled: boolean | undefined;

                slotWrapper?: FDiv;

                innerCheckbox?: HTMLInputElement;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-button']: {
                fill: string;

                label?: string;

                category: 'fill' | 'outline' | 'transparent' | 'packed' | undefined;

                size: 'large' | 'medium' | 'small' | 'x-small' | undefined;

                state: FButtonState | undefined;

                variant: 'round' | 'curved' | 'block' | undefined;

                iconLeft?: string | undefined;

                iconRight?: string | undefined;

                counter?: string | undefined;

                loading: boolean | undefined;

                disabled: boolean | undefined;

                actions: FButtonActions | undefined;

                selectedAction?: FButtonAction | undefined;

                labelWrap: boolean | undefined;

                iconElement?: FIcon;

                buttonActionsPopover?: FPopover | undefined;

                counterElement?: FCounter | undefined;

                counterSize?: undefined;

                iconSize?: undefined;

                textColor?: undefined;

                required: array;

                hasActions?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-color-picker']: {
                variant: 'curved' | 'round' | 'block' | undefined;

                state: FColorPickerState | undefined;

                size: 'medium' | 'small' | undefined;

                value?: string | undefined;

                disabled: boolean | undefined;

                readOnly: boolean | undefined;

                popoverElement?: FPopover;

                isOpen: boolean;

                inputElement?: FDiv;

                defaultHexColor: string;

                isValueEmpty?: undefined;

                sizeMap: object;

                colorPickerTypeTemplate?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-breadcrumb']: {
                size: FBreadcrumbSize | undefined;

                variant: FBreadcrumbVariant | undefined;

                crumbs?: FBreadcrumbs;

                disabled: boolean | undefined;

                popOverElement?: FPopover;

                breadCrumbPopover?: FDiv;

                initialCrumbs?: FBreadCrumbsProp;

                middlePopoverCrumbs: FBreadcrumbs;

                endingCrumbs: FBreadcrumbs;

                textSize?: undefined;

                iconSize?: undefined;

                crumbSize?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-divider']: {
                fill: string;

                variant: 'solid' | 'dashed' | 'dotted' | undefined;

                size: 'large' | 'medium' | undefined;

                state: FDividerState | undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-pictogram']: {
                variant: FPictogramVariant | undefined;

                category: FPictogramCategory | undefined;

                source?: string;

                size: FPictogramSize | undefined;

                state: FPictogramState | undefined;

                loading: boolean | undefined;

                disabled: boolean | undefined;

                clickable: boolean | undefined;

                autoBg: boolean;

                getLetters?: undefined;

                textSource?: undefined;

                textColor?: undefined;

                textColorStyling?: undefined;

                renderedHtml?: undefined;

                isSourceText?: undefined;

                hashCode?: undefined;

                hashCodeHover?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-root']: {
                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

            ['f-popover']: {
                placement: FPopoverPlacement | undefined;

                size: FPopoverSize | undefined;

                open: boolean | undefined;

                overlay: boolean | undefined;

                shadow: boolean | undefined;

                autoHeight: boolean | undefined;

                closeOnEscape: boolean | undefined;

                state: FPopoverState | undefined;

                target?: string | HTMLElement;

                cleanup?: () => void;

                isEscapeClicked: boolean;

                escapeHandler?: undefined;

                isTooltip: boolean;

                reqAniFrame?: number | undefined;

                offset: FPopOverOffset | null;

                targetElement?: undefined;

                outsideClick?: undefined;

                tooltipElement?: HTMLElement;

                tooltip?: FRootTooltip | undefined;

                tooltipText?: undefined;

                tooltipMaxWidth?: undefined;

                mouseEnter?: () => void | undefined;

                mouseLeave?: () => void | undefined;

                children?: any;
                ['class']?: string;
            } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
        }
    }
}
