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

package/cjs/Tooltip/types.d.ts

@@ -1,5 +1,5 @@
 import type { TooltipContentProps } from "@radix-ui/react-tooltip";
-import type { ReactNode } from "react";
+import type { ReactElement, ReactText } from "react";
 import type { TooltipVariant } from "./Tooltip";
 export interface TooltipWrapperBaseProps {
     /**
@@ -61,5 +61,5 @@ export interface TooltipWrapperBaseProps {
      * @default true
      */
     avoidCollisions?: boolean;
-    children: ReactNode;
+    children: ReactElement | ReactText;
 }

package/cjs/UserContent/UserContent.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 export interface UserContentProps {
     styled?: boolean;
     className?: string;
     content?: string;
 }
-export declare const UserContent: ({ className, content, styled }: UserContentProps) => JSX.Element | null;
+export declare const UserContent: VFC<UserContentProps>;
 export default UserContent;

package/cjs/styles/tailwind.config.js

@@ -80,7 +80,9 @@ module.exports = {
         z200: "0px 0px 0px 1px ".concat(theme("colors.shadow.5"), ", 0px 4px 8px -2px ").concat(theme("colors.shadow.25")),
         z300: "0px 0px 0px 1px ".concat(theme("colors.shadow.5"), ", 0px 8px 16px -4px ").concat(theme("colors.shadow.25")),
         z400: "0px 0px 0px 1px ".concat(theme("colors.shadow.5"), ", 0px 12px 24px -6px ").concat(theme("colors.shadow.25")),
-        z500: "0px 0px 0px 1px ".concat(theme("colors.shadow.5"), ", 0px 20px 32px -8px ").concat(theme("colors.shadow.25"))
+        z500: "0px 0px 0px 1px ".concat(theme("colors.shadow.5"), ", 0px 20px 32px -8px ").concat(theme("colors.shadow.25")),
+        field: "inset 0px 1px 4px 0px ".concat(rgba(colors.grey[500], 0.3)),
+        "field-focused": "0px 1px 0px 0px ".concat(theme("colors.shadow.5"))
       };
     },
     opacity: {

package/cjs/utils/isReactText.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from "react";
+export declare const isReactText: (children: ReactNode) => children is string | number;

package/cjs/utils/isReactText.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isReactText = void 0;
+var isReactText = function isReactText(children) {
+  return typeof children === "string" || typeof children === "number";
+};
+exports.isReactText = isReactText;

package/esm/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/esm/AnnouncementBadge/AnnouncementBadge.js

@@ -6,6 +6,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import cx from "clsx";
+import { forwardRef } from "react";
 import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,7 +21,7 @@ var SIZE_CLASSNAMES = {
   "default": stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["display-body h-6 leading-md px-2"]))),
   small: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-caption px-1"])))
 };
-export var AnnouncementBadge = function AnnouncementBadge(_ref) {
+export var AnnouncementBadge = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? "default" : _ref$size,
     _ref$text = _ref.text,
@@ -32,9 +33,12 @@ export var AnnouncementBadge = function AnnouncementBadge(_ref) {
   var contextLocale = useLocale("announcementBadge");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_LOCALE), contextLocale), propsLocale);
   var variant = typeof variantProp === "string" ? variantProp : text === "internal" ? "red" : "accent";
-  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     className: cx(DEFAULT_CLASSNAME, variant === "red" ? stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-red-600"]))) : stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-accent-600"]))), SIZE_CLASSNAMES[size], className),
     children: locale[text]
   }));
-};
+});
+AnnouncementBadge.displayName = "AnnouncementBadge";
 export default AnnouncementBadge;

package/esm/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/esm/AutoComplete/AutoComplete.tailwind.js

@@ -24,7 +24,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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/Badge/Badge.js

@@ -6,6 +6,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import cx from "clsx";
+import { forwardRef } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import isRenderedChild from "../utils/isRenderedChild";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -41,7 +42,7 @@ var SIZE_CLASSNAMES = {
  * - To indicate problem with an index
  * - To display numeric values for multiple items (similar to a "tag cloud")
  */
-export var Badge = function Badge(_ref) {
+export var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     value = _ref.value,
     Icon = _ref.icon,
@@ -52,7 +53,8 @@ export var Badge = function Badge(_ref) {
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   var badgeClassName = cx(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/_jsxs("span", _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
     className: badgeClassName,
     children: [Icon && /*#__PURE__*/_jsx("span", {
       children: /*#__PURE__*/_jsx(Icon, {
@@ -65,5 +67,6 @@ export var Badge = function Badge(_ref) {
       children: value
     })]
   }));
-};
+});
+Badge.displayName = "Badge";
 export default Badge;

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/Button/PolymorphicButton.js

@@ -17,6 +17,7 @@ var BASE_CLASSNAMES = stl(_templateObject || (_templateObject = _taggedTemplateL
 var ICON_SIZE = 16;
 /**
  * `PolymorphicButton` is intended for internal use
+ * @ignore
  */
 export var PolymorphicButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$as = props.as,

package/esm/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/esm/Button/PolymorphicIconButton.js

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

package/esm/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/esm/Button/index.js

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

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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;