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

package/cjs/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, HTMLAttributes } from "react";
+import type { HTMLAttributes } 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: import("react").ForwardRefExoticComponent<AnnouncementBadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default AnnouncementBadge;

package/cjs/AnnouncementBadge/AnnouncementBadge.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 _Satellite = require("../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,7 +28,7 @@ var SIZE_CLASSNAMES = {
   "default": (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["display-body h-6 leading-md px-2"]))),
   small: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["display-caption px-1"])))
 };
-var AnnouncementBadge = function AnnouncementBadge(_ref) {
+var AnnouncementBadge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? "default" : _ref$size,
     _ref$text = _ref.text,
@@ -39,11 +40,14 @@ var AnnouncementBadge = function AnnouncementBadge(_ref) {
   var contextLocale = (0, _Satellite.useLocale)("announcementBadge");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_LOCALE), contextLocale), propsLocale);
   var variant = typeof variantProp === "string" ? variantProp : text === "internal" ? "red" : "accent";
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     className: (0, _clsx["default"])(DEFAULT_CLASSNAME, variant === "red" ? (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-red-600"]))) : (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-600"]))), SIZE_CLASSNAMES[size], className),
     children: locale[text]
   }));
-};
+});
 exports.AnnouncementBadge = AnnouncementBadge;
+AnnouncementBadge.displayName = "AnnouncementBadge";
 var _default = AnnouncementBadge;
 exports["default"] = _default;

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -1,7 +1,7 @@
 import type { A11yStatusMessageOptions, ControllerStateAndHelpers } from "downshift";
 import { Component } from "react";
 import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from "react";
-import { FieldState } from "../Field/FieldStateContext";
+import type { FieldState } from "../Field/FieldStateContext";
 import type { AutoCompleteLocale, AutoCompleteProps, Option, OptionItemProps } from "./types";
 interface State {
     inputFocused: boolean;

package/cjs/AutoComplete/AutoComplete.tailwind.js

@@ -23,7 +23,7 @@ var autoCompletePlugin = plugin(function (_ref) {
       border: "1px solid ".concat(theme("colors.grey.500")),
       boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       transition: "all 100ms ease-in-out",
-      "&:not(.autocomplete-disabled):hover": {
+      "&:not(.autocomplete-disabled, .autocomplete-focused):hover": {
         borderColor: theme("colors.grey.600")
       },
       // Workaround for ie

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

@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import { MedallionVariant } from "../../Medallion";
+import type { ReactNode, VFC } from "react";
+import type { MedallionVariant } from "../../Medallion";
 import type { IconComponentType } from "../../types";
 export interface AutoCompleteEmptyStateProps {
     icon?: IconComponentType;
@@ -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/Button/PolymorphicButton.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
-import { ButtonBaseProps, PolymorphicComponentPropWithRef } from "./types";
+import type { ButtonBaseProps, PolymorphicComponentPropWithRef } from "./types";
 export declare type PolymorphicButtonProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, ButtonBaseProps>;
 declare type PolymorphicButtonComponent = (<C extends React.ElementType = "button">(props: PolymorphicButtonProps<C>) => React.ReactElement | null) & {
     displayName?: string;
 };
 /**
  * `PolymorphicButton` is intended for internal use
+ * @ignore
  */
 export declare const PolymorphicButton: PolymorphicButtonComponent;
 export {};

package/cjs/Button/PolymorphicButton.js

@@ -26,6 +26,7 @@ var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_te
 var ICON_SIZE = 16;
 /**
  * `PolymorphicButton` is intended for internal use
+ * @ignore
  */
 var PolymorphicButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$as = props.as,

package/cjs/Button/PolymorphicIconButton.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { TooltipWrapperBaseProps } from "../Tooltip/types";
 import type { IconComponentType } from "../types";
-import { ButtonSize, ButtonVariant, PolymorphicComponentPropWithRef } from "./types";
+import type { ButtonSize, ButtonVariant, PolymorphicComponentPropWithRef } from "./types";
 export interface IconButtonBaseProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -19,6 +19,7 @@ declare type PolymorphicIconButtonComponent = (<C extends React.ElementType = "b
 };
 /**
  * `PolymorphicIconButton` is intended for internal use
+ * @ignore
  */
 export declare const PolymorphicIconButton: PolymorphicIconButtonComponent;
 export {};

package/cjs/Button/PolymorphicIconButton.js

@@ -31,6 +31,7 @@ var VARIANT_CLASSNAMES = _objectSpread(_objectSpread({}, _styles.BUTTON_VARIANT_
 });
 /**
  * `PolymorphicIconButton` is intended for internal use
+ * @ignore
  */
 var PolymorphicIconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$as = props.as,

package/cjs/Button/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./Button";
 export * from "./IconButton";
 export * from "./ButtonGroup";
-export { ButtonSize, ButtonVariant } from "./types";
+export type { ButtonSize, ButtonVariant } from "./types";
 export { default } from "./Button";

package/cjs/Button/index.js

@@ -4,22 +4,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  ButtonSize: true,
-  ButtonVariant: true
-};
-Object.defineProperty(exports, "ButtonSize", {
-  enumerable: true,
-  get: function get() {
-    return _types.ButtonSize;
-  }
-});
-Object.defineProperty(exports, "ButtonVariant", {
-  enumerable: true,
-  get: function get() {
-    return _types.ButtonVariant;
-  }
-});
+var _exportNames = {};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -62,6 +47,5 @@ Object.keys(_ButtonGroup).forEach(function (key) {
     }
   });
 });
-var _types = require("./types");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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,9 +1,9 @@
-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";
 import type { SharedDatePickerProps } from "../types";
-import { DatePickerReducerAction, DatePickerReducerState } from "./datePickerReducer";
+import type { DatePickerReducerAction, DatePickerReducerState } from "./datePickerReducer";
 interface LeftFooterComponentArgs {
     state: DatePickerReducerState;
     dispatch: Dispatch<DatePickerReducerAction>;
@@ -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,8 +1,9 @@
-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";
-import { dateRangePickerReducer, DateRangePickerReducerAction, DateRangePickerReducerState } from "./dateRangePickerReducer";
+import type { DateRangePickerReducerAction, DateRangePickerReducerState } from "./dateRangePickerReducer";
+import { dateRangePickerReducer } from "./dateRangePickerReducer";
 import type { DateRangePickerTimeRange } from "./dateRangePickerTimeRange";
 interface LeftFooterComponentArgs {
     state: DateRangePickerReducerState;
@@ -30,5 +31,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,8 +1,8 @@
-import type { FunctionComponent } from "react";
+import type { VFC } from "react";
 import type { WithRequiredProperty } from "../../types";
-import { DisplayProps } from "../components/Display";
+import type { DisplayProps } from "../components/Display";
 import type { DatePickerLocale } from "../types";
-import { DateRangePickerTimeRange } from "./dateRangePickerTimeRange";
+import type { DateRangePickerTimeRange } from "./dateRangePickerTimeRange";
 export interface DateRangePickerDisplayProps {
     id?: string;
     onClick: DisplayProps["onClick"];
@@ -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/DateRangePicker/dateRangePickerReducer.d.ts

@@ -1,5 +1,5 @@
 import type { MouseEvent, Reducer } from "react";
-import { DateRangePickerCompleteTimeRange, DateRangePickerTimeRange } from "./dateRangePickerTimeRange";
+import type { DateRangePickerCompleteTimeRange, DateRangePickerTimeRange } from "./dateRangePickerTimeRange";
 export declare enum DateRangePickerActionTypes {
     show = "show",
     dateSelect = "date select",

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

@@ -1,5 +1,5 @@
-import type { FunctionComponent } from "react";
-import { DayPickerDefaultProps, DayPickerRangeProps, DayPickerSingleProps } from "react-day-picker";
+import type { VFC } from "react";
+import type { DayPickerDefaultProps, DayPickerRangeProps, DayPickerSingleProps } from "react-day-picker";
 import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
 declare type ExcludedDayPickerProps = "captionElement" | "showOutsideDays" | "enableOutsideDaysClick" | "fixedWeeks" | "labels" | "navbarElement" | "onTodayButtonClick" | "pagedNavigation" | "renderDay" | "renderWeek" | "reverseMonths" | "showWeekNumber" | "showWeekDays" | "weekdayElement" | "weekdaysLong" | "weekdaysShort";
@@ -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,5 +1,5 @@
-import type { FunctionComponent } from "react";
-import { ButtonProps } from "../../Button";
+import type { VFC } from "react";
+import type { ButtonProps } from "../../Button";
 import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
 export interface FooterActionsProps {
@@ -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,10 +1,10 @@
-import type { FunctionComponent } from "react";
-import { CaptionProps } from "react-day-picker";
+import type { VFC } from "react";
+import type { CaptionProps } from "react-day-picker";
 import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
 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,14 @@
 import type { StrictModifiers } from "@popperjs/core";
-import type { ReactNode } from "react";
-import { StrictModifier } from "react-popper";
+import type { ReactNode, VFC } from "react";
+import type { 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 +24,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 +45,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/DropdownButton.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from "react";
-import { ButtonProps } from "../Button";
-import { RenderTargetParams } from "./Dropdown";
+import type { ReactNode } from "react";
+import type { ButtonProps } from "../Button";
+import type { RenderTargetParams } from "./Dropdown";
 export interface DropdownButtonProps extends Omit<ButtonProps, "title" | "endIcon"> {
     /** Descriptive title for `Dropdown` */
     title: ReactNode;

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { IconComponentType } from "../../types";
-import { DropdownBaseItemProps } from "../useDropdownItemProps";
+import type { DropdownBaseItemProps } from "../useDropdownItemProps";
 export declare type DropdownButtonItemProps = DropdownBaseItemProps<HTMLButtonElement> & JSX.IntrinsicElements["button"] & {
     /** Left aligned icon */
     startIcon?: IconComponentType;
@@ -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;