@algolia/satellite 1.0.0-beta.161 → 1.0.0-beta.162

package/cjs/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, HTMLAttributes } from "react";
+import type { HTMLAttributes, VFC } from "react";
 export declare type AnnouncementBadgeSizes = "default" | "small";
 export declare type AnnouncementBadgeTexts = "new" | "beta" | "internal" | "pilot";
 export declare type AnnouncementBadgeLocale = {
@@ -17,5 +17,5 @@ export interface AnnouncementBadgeProps extends HTMLAttributes<HTMLSpanElement>
     locale?: AnnouncementBadgeLocale;
     children?: never;
 }
-export declare const AnnouncementBadge: FunctionComponent<AnnouncementBadgeProps>;
+export declare const AnnouncementBadge: VFC<AnnouncementBadgeProps>;
 export default AnnouncementBadge;

package/cjs/AutoComplete/components/AutoCompleteEmptyState.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import { MedallionVariant } from "../../Medallion";
 import type { IconComponentType } from "../../types";
 export interface AutoCompleteEmptyStateProps {
@@ -9,5 +9,5 @@ export interface AutoCompleteEmptyStateProps {
     /** Optional description to explain why the screen is empty or define next steps */
     description?: ReactNode;
 }
-export declare const AutoCompleteEmptyState: ({ icon, variant, title, description, }: AutoCompleteEmptyStateProps) => JSX.Element;
+export declare const AutoCompleteEmptyState: VFC<AutoCompleteEmptyStateProps>;
 export default AutoCompleteEmptyState;

package/cjs/AutoComplete/components/DefaultOptionItem.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { AutoCompleteLocale, OptionItemProps } from "../types";
 declare type DefaultOptionItemProps = OptionItemProps & {
     locale?: AutoCompleteLocale;
 };
-declare const DefaultOptionItem: ({ option, multiple, locale }: DefaultOptionItemProps) => JSX.Element;
+declare const DefaultOptionItem: VFC<DefaultOptionItemProps>;
 export default DefaultOptionItem;

package/cjs/Avatars/ApplicationAvatar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { ApplicationAvatarSize, MinimalApplication } from "./types";
 export interface ApplicationAvatarProps {
     /** A minimal application object containing `applicationID` and `name`. */
@@ -9,5 +9,5 @@ export interface ApplicationAvatarProps {
     className?: string;
 }
 /** The `ApplicationAvatar` is used as a visual representation of an application. */
-export declare const ApplicationAvatar: ({ className, application, size }: ApplicationAvatarProps) => JSX.Element;
+export declare const ApplicationAvatar: VFC<ApplicationAvatarProps>;
 export default ApplicationAvatar;

package/cjs/Avatars/UserAvatar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { MinimalUser } from "./types";
 export declare type UserAvatarLocale = {
     fallbackText?: string;
@@ -16,5 +16,5 @@ export interface UserAvatarProps {
     locale?: UserAvatarLocale;
 }
 /** The `UserAvatar` is used as a visual representation of a user. */
-export declare const UserAvatar: ({ className, user, size, locale: propsLocale }: UserAvatarProps) => JSX.Element;
+export declare const UserAvatar: VFC<UserAvatarProps>;
 export default UserAvatar;

package/cjs/Badge/Badge.d.ts

@@ -1,8 +1,8 @@
-import type { FunctionComponent, HTMLAttributes, ReactNode } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 import type { AtLeastOne, ColorVariant, IconComponentType } from "../types";
 export declare type BadgeSizes = "small" | "medium" | "large";
 export declare type BadgeVariants = ColorVariant | "pink";
-interface BaseBadgeProps extends HTMLAttributes<HTMLDivElement> {
+interface BaseBadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** @default "grey" */
     variant?: BadgeVariants;
     /** @default "default" */
@@ -31,5 +31,5 @@ export declare type BadgeProps = BaseBadgeProps & AtLeastOne<BadgeContentProps>;
  * - To indicate problem with an index
  * - To display numeric values for multiple items (similar to a "tag cloud")
  */
-export declare const Badge: FunctionComponent<BadgeProps>;
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Badge;

package/cjs/Badge/Badge.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _isRenderedChild = _interopRequireDefault(require("../utils/isRenderedChild"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -47,7 +48,7 @@ var SIZE_CLASSNAMES = {
  * - To indicate problem with an index
  * - To display numeric values for multiple items (similar to a "tag cloud")
  */
-var Badge = function Badge(_ref) {
+var Badge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     value = _ref.value,
     Icon = _ref.icon,
@@ -58,7 +59,8 @@ var Badge = function Badge(_ref) {
     className = _ref.className,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var badgeClassName = (0, _clsx["default"])(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
     className: badgeClassName,
     children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
@@ -71,7 +73,8 @@ var Badge = function Badge(_ref) {
       children: value
     })]
   }));
-};
+});
 exports.Badge = Badge;
+Badge.displayName = "Badge";
 var _default = Badge;
 exports["default"] = _default;

package/cjs/Banners/Alert/Alert.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, FunctionComponent, ReactNode } from "react";
+import type { CSSProperties, ReactNode, VFC } from "react";
 import type { ColorVariant, IconComponentType } from "../../types";
 export declare type AlertContextType = "page" | "section";
 export declare type AlertColorVariant = Exclude<ColorVariant, "blue">;
@@ -74,5 +74,5 @@ export interface AlertProps {
 * ## Accessibility
 * TODO
  */
-export declare const Alert: FunctionComponent<AlertProps>;
+export declare const Alert: VFC<AlertProps>;
 export default Alert;

package/cjs/Banners/BigBertha/BigBertha.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import type { IconComponentType } from "../../types";
 export interface BigBerthaProps {
     icon?: IconComponentType;
@@ -37,5 +37,5 @@ export interface BigBerthaProps {
 * ## Accessibility
 * TODO
  */
-export declare const BigBertha: FC<BigBerthaProps>;
+export declare const BigBertha: VFC<BigBerthaProps>;
 export default BigBertha;

package/cjs/Banners/Promote/Promote.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 declare type PromoteVariants = "large" | "compact";
 interface CompactPromoteProps {
     variant?: Extract<PromoteVariants, "compact">;
@@ -53,5 +53,5 @@ export declare type PromoteProps = {
 * ## Accessibility
 * TODO
  */
-export declare const Promote: FC<PromoteProps>;
+export declare const Promote: VFC<PromoteProps>;
 export default Promote;

package/cjs/Button/ButtonGroup.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export interface ButtonGroupProps {
     /**
      * Specify HTML element `ButtonGroup` should be presented as.
@@ -14,5 +14,5 @@ export interface ButtonGroupProps {
  * - Group buttons logically into sets based on usage and importance.
  * - Common placement of grouped buttons is the view switch (e.g. list vs grid view)
  */
-export declare const ButtonGroup: FunctionComponent<ButtonGroupProps>;
+export declare const ButtonGroup: VFC<ButtonGroupProps>;
 export default ButtonGroup;

package/cjs/Card/components/CardHeader.d.ts

@@ -1,6 +1,6 @@
-import type { FunctionComponent, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type CardHeaderProps = JSX.IntrinsicElements["div"] & {
     children: ReactNode;
 };
-export declare const CardHeader: FunctionComponent<CardHeaderProps>;
+export declare const CardHeader: VFC<CardHeaderProps>;
 export default CardHeader;

package/cjs/Card/components/CardTitle.d.ts

@@ -1,6 +1,6 @@
-import type { FunctionComponent, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type CardTitleProps = JSX.IntrinsicElements["h2"] & {
     children: ReactNode;
 };
-export declare const CardTitle: FunctionComponent<CardTitleProps>;
+export declare const CardTitle: VFC<CardTitleProps>;
 export default CardTitle;

package/cjs/ClickAwayContainer/ClickAwayContainer.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 interface ClickAwayContextType {
     registerElement(element: HTMLElement): void;
     unregisterElement(element: HTMLElement): void;
@@ -24,5 +24,5 @@ export interface ClickAwayContainerProps {
  * but it's not the case when using portals.
  * This component allows click-away functionality even when portals are involved.
  */
-export declare const ClickAwayContainer: FC<ClickAwayContainerProps>;
+export declare const ClickAwayContainer: VFC<ClickAwayContainerProps>;
 export default ClickAwayContainer;

package/cjs/DatePicker/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import type { Dispatch, FunctionComponent, MouseEvent, ReactNode } from "react";
+import type { Dispatch, MouseEvent, ReactNode, VFC } from "react";
 import type { CalendarProps } from "../components/Calendar";
 import type { DisplayProps } from "../components/Display";
 import type { FooterActionsProps } from "../components/FooterActions";
@@ -30,5 +30,5 @@ export declare type DatePickerProps = {
     initialValue?: Date | null;
     buttonSize?: DisplayProps["size"];
 } & SharedDatePickerProps;
-declare const DatePicker: FunctionComponent<DatePickerProps>;
+declare const DatePicker: VFC<DatePickerProps>;
 export default DatePicker;

package/cjs/DatePicker/DateRangePicker/DateRangePicker.d.ts

@@ -1,4 +1,4 @@
-import type { Dispatch, FunctionComponent, ReactNode } from "react";
+import type { Dispatch, ReactNode, VFC } from "react";
 import type { CalendarProps } from "../components/Calendar";
 import type { SharedDatePickerProps } from "../types";
 import type { DateRangePickerDisplayProps } from "./DateRangePickerDisplay";
@@ -30,5 +30,5 @@ export declare type DateRangePickerProps = {
     renderRightPanel?: (args: RightSidePanelComponentArgs) => ReactNode;
     buttonSize?: DateRangePickerDisplayProps["buttonSize"];
 } & SharedDatePickerProps;
-export declare const DateRangePicker: FunctionComponent<DateRangePickerProps>;
+export declare const DateRangePicker: VFC<DateRangePickerProps>;
 export default DateRangePicker;

package/cjs/DatePicker/DateRangePicker/DateRangePickerDisplay.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent } from "react";
+import type { VFC } from "react";
 import type { WithRequiredProperty } from "../../types";
 import { DisplayProps } from "../components/Display";
 import type { DatePickerLocale } from "../types";
@@ -10,5 +10,5 @@ export interface DateRangePickerDisplayProps {
     buttonSize?: DisplayProps["size"];
     locale: WithRequiredProperty<DatePickerLocale, "openButton">;
 }
-declare const DateRangePickerDisplay: FunctionComponent<DateRangePickerDisplayProps>;
+declare const DateRangePickerDisplay: VFC<DateRangePickerDisplayProps>;
 export default DateRangePickerDisplay;

package/cjs/DatePicker/components/Calendar.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent } from "react";
+import type { VFC } from "react";
 import { DayPickerDefaultProps, DayPickerRangeProps, DayPickerSingleProps } from "react-day-picker";
 import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
@@ -13,5 +13,5 @@ export declare type EditableYearProps = {
 export declare type CalendarProps = Omit<Omit<DayPickerSingleProps | DayPickerRangeProps | DayPickerDefaultProps, "locale">, ExcludedDayPickerProps> & EditableYearProps & {
     locale: WithRequiredProperty<DatePickerLocale, "nextMonth" | "previousMonth">;
 };
-declare const Calendar: FunctionComponent<CalendarProps>;
+declare const Calendar: VFC<CalendarProps>;
 export default Calendar;

package/cjs/DatePicker/components/Display.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import type { ButtonProps, ButtonSize } from "../../Button";
 export interface DisplayProps {
     id?: string;
@@ -6,5 +6,5 @@ export interface DisplayProps {
     children: ReactNode;
     size?: ButtonSize;
 }
-declare const Display: FunctionComponent<DisplayProps>;
+declare const Display: VFC<DisplayProps>;
 export default Display;

package/cjs/DatePicker/components/Footer.d.ts

@@ -1,6 +1,6 @@
-import type { FunctionComponent, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type FooterProps = {
     children: ReactNode;
 };
-declare const Footer: FunctionComponent<FooterProps>;
+declare const Footer: VFC<FooterProps>;
 export default Footer;

package/cjs/DatePicker/components/FooterActions.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent } from "react";
+import type { VFC } from "react";
 import { ButtonProps } from "../../Button";
 import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
@@ -8,5 +8,5 @@ export interface FooterActionsProps {
     disableApply: boolean;
     locale: WithRequiredProperty<DatePickerLocale, "cancel" | "apply">;
 }
-declare const FooterActions: FunctionComponent<FooterActionsProps>;
+declare const FooterActions: VFC<FooterActionsProps>;
 export default FooterActions;

package/cjs/DatePicker/components/Modal.d.ts

@@ -1,5 +1,5 @@
 import type { Placement, StrictModifiers } from "@popperjs/core";
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import type { StrictModifier } from "react-popper";
 import type { ClickAwayContainerProps } from "../../ClickAwayContainer";
 export interface ModalProps {
@@ -12,5 +12,5 @@ export interface ModalProps {
     onClickAway?: ClickAwayContainerProps["onClickAway"];
 }
 export declare const DEFAULT_DATE_PICKER_MODAL_POPPER_MODIFIERS: StrictModifier[];
-declare const Modal: FC<ModalProps>;
+declare const Modal: VFC<ModalProps>;
 export default Modal;

package/cjs/DatePicker/components/NavBar.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent } from "react";
+import type { VFC } from "react";
 import { CaptionProps } from "react-day-picker";
 import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
@@ -6,5 +6,5 @@ import type { EditableYearProps } from "./Calendar";
 export declare type NavBarProps = CaptionProps & EditableYearProps & {
     locale: WithRequiredProperty<DatePickerLocale, "nextMonth" | "previousMonth">;
 };
-declare const NavBar: FunctionComponent<NavBarProps>;
+declare const NavBar: VFC<NavBarProps>;
 export default NavBar;

package/cjs/DatePicker/components/SidePanel.d.ts

@@ -1,6 +1,6 @@
-import type { FunctionComponent, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type SidePanelProps = {
     children: ReactNode;
 };
-declare const SidePanel: FunctionComponent<SidePanelProps>;
+declare const SidePanel: VFC<SidePanelProps>;
 export default SidePanel;

package/cjs/Dropdown/Dropdown.d.ts

@@ -1,6 +1,15 @@
 import type { StrictModifiers } from "@popperjs/core";
+import { VFC } from "react";
 import type { ReactNode } from "react";
 import { StrictModifier } from "react-popper";
+import DropdownButtonItem from "./components/DropdownButtonItem";
+import { DropdownCollapsibleItem } from "./components/DropdownCollapsibleItem";
+import DropdownDivider from "./components/DropdownDivider";
+import DropdownFooterItem from "./components/DropdownFooterItem";
+import DropdownLinkItem from "./components/DropdownLinkItem";
+import DropdownRadioItem from "./components/DropdownRadioItem";
+import DropdownTitle from "./components/DropdownTitle";
+import DropdownToggleItem from "./components/DropdownToggleItem";
 export interface RenderTargetParams {
     toggle: (open?: boolean) => any;
     isShowingMenu: boolean;
@@ -16,6 +25,16 @@ export interface DropdownProps {
     renderFooter?: (params: RenderTargetParams) => ReactNode;
     children?: ReactNode;
 }
+declare type DropdownSubComponents = {
+    ButtonItem: typeof DropdownButtonItem;
+    LinkItem: typeof DropdownLinkItem;
+    RadioItem: typeof DropdownRadioItem;
+    ToggleItem: typeof DropdownToggleItem;
+    CollapsibleItem: typeof DropdownCollapsibleItem;
+    FooterItem: typeof DropdownFooterItem;
+    Divider: typeof DropdownDivider;
+    Title: typeof DropdownTitle;
+};
 export declare const DEFAULT_DROPDOWN_POPPER_MODIFIERS: StrictModifier[];
 /**
  * ## Best practices
@@ -27,38 +46,5 @@ export declare const DEFAULT_DROPDOWN_POPPER_MODIFIERS: StrictModifier[];
  * - Clearly label options based on what each one will do
  * - Make sure the most common options are listed. These can be grouped into sub-categories under headings
  */
-export declare const Dropdown: {
-    ({ placement, menuClassName, modifiers, renderTarget, renderFooter, children, }: DropdownProps): JSX.Element;
-    ButtonItem: {
-        (props: import("./components/DropdownButtonItem").DropdownButtonItemProps): JSX.Element;
-        defaultProps: {
-            toggle: boolean;
-        };
-    };
-    LinkItem: {
-        (props: import("./components/DropdownLinkItem").DropdownLinkItemProps): JSX.Element;
-        defaultProps: {
-            toggle: boolean;
-        };
-    };
-    RadioItem: {
-        (props: import("./components/DropdownRadioItem").DropdownRadioItemProps): JSX.Element;
-        defaultProps: {
-            toggle: boolean;
-        };
-    };
-    ToggleItem: {
-        (props: import("./components/DropdownToggleItem").DropdownToggleItemProps): JSX.Element;
-        defaultProps: {
-            toggle: boolean;
-        };
-    };
-    CollapsibleItem: import("react").FC<import("./components/DropdownCollapsibleItem").DropdownCollapsibleItemProps>;
-    FooterItem: ({ children, className, ...props }: {
-        className?: string | undefined;
-        children: ReactNode;
-    }) => JSX.Element | null;
-    Divider: () => JSX.Element;
-    Title: import("react").FunctionComponent<import("./components/DropdownTitle").DropdownTitleProps>;
-};
+export declare const Dropdown: VFC<DropdownProps> & DropdownSubComponents;
 export default Dropdown;

package/cjs/Dropdown/components/DropdownButtonItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { IconComponentType } from "../../types";
 import { DropdownBaseItemProps } from "../useDropdownItemProps";
 export declare type DropdownButtonItemProps = DropdownBaseItemProps<HTMLButtonElement> & JSX.IntrinsicElements["button"] & {
@@ -10,10 +10,5 @@ export declare type DropdownButtonItemProps = DropdownBaseItemProps<HTMLButtonEl
      */
     variant?: "default" | "destructive";
 };
-export declare const DropdownButtonItem: {
-    (props: DropdownButtonItemProps): JSX.Element;
-    defaultProps: {
-        toggle: boolean;
-    };
-};
+export declare const DropdownButtonItem: VFC<DropdownButtonItemProps>;
 export default DropdownButtonItem;

package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.d.ts

@@ -1,4 +1,4 @@
-import type { FC, MouseEvent, ReactNode } from "react";
+import type { MouseEvent, ReactNode, VFC } from "react";
 export interface DropdownCollapsibleItemProps {
     title: ReactNode;
     name?: string;
@@ -6,5 +6,5 @@ export interface DropdownCollapsibleItemProps {
     onClick?: (evt: MouseEvent<HTMLElement>, name: string, expandedItems: readonly string[]) => void;
     children: ReactNode;
 }
-export declare const DropdownCollapsibleItem: FC<DropdownCollapsibleItemProps>;
+export declare const DropdownCollapsibleItem: VFC<DropdownCollapsibleItemProps>;
 export default DropdownCollapsibleItem;

package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type DropdownCollapsibleItemsGroupProps = {
     expandedItems: string[];
     onItemClick(name: string): void;
     children: ReactNode;
 };
-export declare const DropdownCollapsibleItemsGroup: ({ expandedItems, onItemClick, children, }: DropdownCollapsibleItemsGroupProps) => JSX.Element;
+export declare const DropdownCollapsibleItemsGroup: VFC<DropdownCollapsibleItemsGroupProps>;

package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.d.ts

@@ -1,3 +1,4 @@
+import { VFC } from "react";
 import type { ReactNode } from "react";
 export declare type DropdownCollapsibleItemsMultiGroupProps = {
     initialExpandedItems?: string[];
@@ -6,4 +7,4 @@ export declare type DropdownCollapsibleItemsMultiGroupProps = {
 /**
  * Multiple collapsible item can be open at a given time
  */
-export declare const DropdownCollapsibleItemsMultiGroup: ({ initialExpandedItems, children, }: DropdownCollapsibleItemsMultiGroupProps) => JSX.Element;
+export declare const DropdownCollapsibleItemsMultiGroup: VFC<DropdownCollapsibleItemsMultiGroupProps>;

package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.d.ts

@@ -1,3 +1,4 @@
+import { VFC } from "react";
 import type { ReactNode } from "react";
 export declare type DropdownCollapsibleItemsExclusiveGroupProps = {
     initialExpandedItem?: string;
@@ -6,4 +7,4 @@ export declare type DropdownCollapsibleItemsExclusiveGroupProps = {
 /**
  * Only one collapsible item can be open at a given time (unless you manually override)
  */
-export declare const DropdownCollapsibleItemsSingleGroup: ({ initialExpandedItem, children, }: DropdownCollapsibleItemsExclusiveGroupProps) => JSX.Element;
+export declare const DropdownCollapsibleItemsSingleGroup: VFC<DropdownCollapsibleItemsExclusiveGroupProps>;

package/cjs/Dropdown/components/DropdownFooterItem.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 declare type DropdownFooterItemProps = {
     className?: string;
     children: ReactNode;
 };
-export declare const DropdownFooterItem: ({ children, className, ...props }: DropdownFooterItemProps) => JSX.Element | null;
+export declare const DropdownFooterItem: VFC<DropdownFooterItemProps>;
 export default DropdownFooterItem;

package/cjs/Dropdown/components/DropdownLinkItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { IconComponentType } from "../../types";
 import { DropdownBaseItemProps } from "../useDropdownItemProps";
 export declare type DropdownLinkItemProps = DropdownBaseItemProps<HTMLAnchorElement> & JSX.IntrinsicElements["a"] & {
@@ -6,10 +6,5 @@ export declare type DropdownLinkItemProps = DropdownBaseItemProps<HTMLAnchorElem
     /** Left aligned icon */
     startIcon?: IconComponentType;
 };
-export declare const DropdownLinkItem: {
-    (props: DropdownLinkItemProps): JSX.Element;
-    defaultProps: {
-        toggle: boolean;
-    };
-};
+export declare const DropdownLinkItem: VFC<DropdownLinkItemProps>;
 export default DropdownLinkItem;

package/cjs/Dropdown/components/DropdownRadioItem.d.ts

@@ -1,13 +1,8 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import { RadioButtonProps } from "../../RadioGroup";
 import { DropdownBaseItemProps } from "../useDropdownItemProps";
 export interface DropdownRadioItemProps extends RadioButtonProps, DropdownBaseItemProps<HTMLInputElement> {
     children?: ReactNode;
 }
-export declare const DropdownRadioItem: {
-    (props: DropdownRadioItemProps): JSX.Element;
-    defaultProps: {
-        toggle: boolean;
-    };
-};
+export declare const DropdownRadioItem: VFC<DropdownRadioItemProps>;
 export default DropdownRadioItem;

package/cjs/Dropdown/components/DropdownTitle.d.ts

@@ -1,6 +1,6 @@
-import type { FunctionComponent, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type DropdownTitleProps = JSX.IntrinsicElements["h4"] & {
     children: ReactNode;
 };
-export declare const DropdownTitle: FunctionComponent<DropdownTitleProps>;
+export declare const DropdownTitle: VFC<DropdownTitleProps>;
 export default DropdownTitle;

package/cjs/Dropdown/components/DropdownToggleItem.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import { ToggleProps } from "../../Toggle";
 import type { IconComponentType } from "../../types";
 import { DropdownBaseItemProps } from "../useDropdownItemProps";
@@ -7,10 +7,5 @@ export interface DropdownToggleItemProps extends ToggleProps, DropdownBaseItemPr
     startIcon?: IconComponentType;
     children?: ReactNode;
 }
-export declare const DropdownToggleItem: {
-    (props: DropdownToggleItemProps): JSX.Element;
-    defaultProps: {
-        toggle: boolean;
-    };
-};
+export declare const DropdownToggleItem: VFC<DropdownToggleItemProps>;
 export default DropdownToggleItem;

package/cjs/Dropzone/Dropzone.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { VFC } from "react";
 import { FileRejection, DropzoneProps as ReactDropZoneProps } from "react-dropzone";
 export declare type DropzoneLocale = {
     clearInput?: string;
@@ -16,5 +16,5 @@ export interface DropzoneBaseProps {
     locale?: DropzoneLocale;
 }
 export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "onDropAccepted" | "onDropRejected" | "multiple">;
-export declare const Dropzone: FC<DropzoneProps>;
+export declare const Dropzone: VFC<DropzoneProps>;
 export default Dropzone;

package/cjs/EmptyState/EmptyState.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { EmptyStateProps } from "./types";
 /**
  * Empty states are used when a list, table, chart or page has no items or data to show. This is an opportunity to provide explanation or guidance to help users progress. This can also be shown when a features hasn't been enable.
@@ -24,5 +24,5 @@ import type { EmptyStateProps } from "./types";
  * - Use illustrations thoughtfully
  * - Use only one primary call-to-action button
  */
-export declare const EmptyState: (props: EmptyStateProps) => JSX.Element;
+export declare const EmptyState: VFC<EmptyStateProps>;
 export default EmptyState;

package/cjs/Field/Field.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, ReactChild, ReactNode } from "react";
+import type { ReactChild, ReactNode, VFC } from "react";
 import { FieldState } from "./FieldStateContext";
 export interface FieldProps {
     /** @ignore */
@@ -50,5 +50,5 @@ export interface FieldProps {
  * - If you need to ask users to provide optional information, mark the field optional by placing the text “(optional)” at the end of the field's label
  * - Don't mark required fields with asterisks
  */
-export declare const Field: FunctionComponent<FieldProps>;
+export declare const Field: VFC<FieldProps>;
 export default Field;

package/cjs/Flag/Flag.d.ts

@@ -1,6 +1,6 @@
-import type { FunctionComponent } from "react";
+import type { VFC } from "react";
 import type { Notification } from "./types";
 export declare type FlagLocale = Notification["locale"];
 export declare type FlagProps = Omit<Notification, "id" | "content">;
-export declare const Flag: FunctionComponent<FlagProps>;
+export declare const Flag: VFC<FlagProps>;
 export default Flag;

package/cjs/Flag/Flags.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { Notification } from "./types";
 export interface FlagsProps {
     /**
@@ -44,5 +44,5 @@ export interface FlagsProps {
  *
  * When there are multiple flags, they will stack on top of one another with the most recent flag on top. When a user dismisses a flag, any older flags 'below' will come to the top. Careful consideration should be taken to take into account the ordering and priority of flags in the stack. Never use dismissible and non-dismissible flags in a stack as flags that automatically dismiss can do so and not be visible to the user.
  */
-export declare const Flags: ({ notifications }: FlagsProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const Flags: VFC<FlagsProps>;
 export default Flags;