@algolia/satellite 1.0.0-beta.160 → 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/AutoComplete.tailwind.js

@@ -20,9 +20,12 @@ var autoCompletePlugin = plugin(function (_ref) {
       cursor: "text",
       backgroundColor: theme("colors.white"),
       borderRadius: theme("borderRadius.DEFAULT"),
-      border: "1px solid ".concat(theme("colors.grey.200")),
+      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": {
+        borderColor: theme("colors.grey.600")
+      },
       // Workaround for ie
       "&::after": {
         content: '" "',

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/Button/PolymorphicIconButton.d.ts

@@ -10,7 +10,7 @@ export interface IconButtonBaseProps {
     title: string;
     showTooltip?: boolean;
     /** @default "top" */
-    tooltipPlacement?: TooltipWrapperBaseProps["placement"];
+    tooltipSide?: TooltipWrapperBaseProps["side"];
     loading?: boolean;
 }
 export declare type PolymorphicIconButtonProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, IconButtonBaseProps>;

package/cjs/Button/PolymorphicIconButton.js

@@ -16,7 +16,7 @@ var _Tooltip = require("../Tooltip");
 var _styles = require("./styles");
 var _types = require("./types");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["as", "className", "variant", "size", "icon", "title", "showTooltip", "tooltipPlacement", "loading"];
+var _excluded = ["as", "className", "variant", "size", "icon", "title", "showTooltip", "tooltipSide", "loading"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 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) { (0, _defineProperty2["default"])(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; }
@@ -43,8 +43,8 @@ var PolymorphicIconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     Icon = props.icon,
     title = props.title,
     showTooltip = props.showTooltip,
-    _props$tooltipPlaceme = props.tooltipPlacement,
-    tooltipPlacement = _props$tooltipPlaceme === void 0 ? "top" : _props$tooltipPlaceme,
+    _props$tooltipSide = props.tooltipSide,
+    tooltipSide = _props$tooltipSide === void 0 ? "top" : _props$tooltipSide,
     _props$loading = props.loading,
     loading = _props$loading === void 0 ? false : _props$loading,
     cleanedProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -61,7 +61,7 @@ var PolymorphicIconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
     delay: 500,
     show: showTooltip,
-    placement: tooltipPlacement,
+    side: tooltipSide,
     content: title,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, _objectSpread(_objectSpread({}, cleanedProps), {}, {
       className: iconButtonClassName,

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/Checkbox/Checkbox.js

@@ -67,9 +67,9 @@ var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center ", ""])), textPosition === "left" && "flex-row-reverse"), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["group inline-flex items-center ", ""])), textPosition === "left" && "flex-row-reverse"), className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            checkbox\n            ", "\n            ", "\n            ", "\n          "])), indeterminate && "checkbox-indeterminate", isChecked && "checkbox-checked", disabled && "checkbox-disabled"), STATUS_CLASSNAMES[status]),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            checkbox\n            ", "\n            ", "\n            ", "\n            ", "\n          "])), !disabled && "group-hover:border-grey-900", indeterminate && "checkbox-indeterminate", isChecked && "checkbox-checked", disabled && "checkbox-disabled"), STATUS_CLASSNAMES[status]),
       style: {
         color: checkedColor
       },
@@ -78,7 +78,7 @@ var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, checkboxProps), {}, {
         "aria-checked": indeterminate ? "mixed" : isChecked,
         id: id,
-        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n              opacity-0 absolute inset-0 cursor-pointer\n              ", "\n            "])), disabled && "cursor-not-allowed"),
+        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n              opacity-0 absolute inset-0\n              ", "\n            "])), disabled ? "cursor-not-allowed" : "cursor-pointer"),
         type: "checkbox",
         ref: ref,
         onChange: handleChange,

package/cjs/Checkbox/Checkbox.tailwind.js

@@ -18,7 +18,7 @@ var checkboxPlugin = plugin(function (_ref) {
       overflow: "hidden",
       color: theme("colors.accent.600"),
       background: "linear-gradient(180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
-      border: "1px solid ".concat(theme("colors.grey.200")),
+      border: "1px solid ".concat(theme("colors.grey.500")),
       boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
       borderRadius: theme("borderRadius.DEFAULT"),
       transition: "all 250ms cubic-bezier(0.23, 1, 0.32, 1)",

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;