@algolia/satellite 1.0.0-beta.175 → 1.0.0-beta.176

package/esm/Dropdown/Dropdown.js

@@ -29,13 +29,7 @@ export var DEFAULT_DROPDOWN_POPPER_MODIFIERS = [{
     offset: [0, 16]
   }
 }];
-
-/**
- * The `Dropdown` component helps users select an item from a list of available options.
- *
- * See the [Dropdown documentation page](https://satellite.algolia.com/components/actions/dropdown) for more information.
- */
-export var Dropdown = function Dropdown(_ref) {
+var _Dropdown = function _Dropdown(_ref) {
   var _renderFooter;
   var _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
@@ -111,12 +105,15 @@ export var Dropdown = function Dropdown(_ref) {
     })
   });
 };
-Dropdown.ButtonItem = DropdownButtonItem;
-Dropdown.LinkItem = DropdownLinkItem;
-Dropdown.RadioItem = DropdownRadioItem;
-Dropdown.ToggleItem = DropdownToggleItem;
-Dropdown.CollapsibleItem = DropdownCollapsibleItem;
-Dropdown.FooterItem = DropdownFooterItem;
-Dropdown.Divider = DropdownDivider;
-Dropdown.Title = DropdownTitle;
+_Dropdown.ButtonItem = DropdownButtonItem;
+_Dropdown.LinkItem = DropdownLinkItem;
+_Dropdown.RadioItem = DropdownRadioItem;
+_Dropdown.ToggleItem = DropdownToggleItem;
+_Dropdown.CollapsibleItem = DropdownCollapsibleItem;
+_Dropdown.FooterItem = DropdownFooterItem;
+_Dropdown.Divider = DropdownDivider;
+_Dropdown.Title = DropdownTitle;
+
+/** @deprecated use `MenuButton` instead */
+export var Dropdown = _Dropdown;
 export default Dropdown;

package/esm/Dropdown/DropdownButton.d.ts

@@ -7,5 +7,8 @@ export interface DropdownButtonProps extends Omit<ButtonProps, "title" | "endIco
     renderFooter?: (args: RenderTargetParams) => ReactNode;
     children: ReactNode;
 }
+/**
+ * @deprecated use `MenuButton` instead
+ */
 export declare const DropdownButton: import("react").ForwardRefExoticComponent<DropdownButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default DropdownButton;

package/esm/Dropdown/DropdownButton.js

@@ -8,6 +8,9 @@ import { ChevronDown } from "react-feather";
 import Button from "../Button";
 import Dropdown from "./Dropdown";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated use `MenuButton` instead
+ */
 export var DropdownButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     title = _ref.title,

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

@@ -10,5 +10,6 @@ export declare type DropdownButtonItemProps = DropdownBaseItemProps<HTMLButtonEl
      */
     variant?: "default" | "destructive";
 };
+/** @deprecated */
 export declare const DropdownButtonItem: VFC<DropdownButtonItemProps>;
 export default DropdownButtonItem;

package/esm/Dropdown/components/DropdownButtonItem.js

@@ -10,7 +10,7 @@ import stl from "../../styles/helpers/satellitePrefixer";
 import useDropdownItemProps from "../useDropdownItemProps";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var DropdownButtonItem = function DropdownButtonItem(props) {
+var _DropdownButtonItem = function _DropdownButtonItem(props) {
   var dropdownItemProps = useDropdownItemProps(props);
   // `toggle` is destructured here because we don't want it passed to the `button`
   var _props$dropdownItemPr = _objectSpread(_objectSpread({}, props), dropdownItemProps),
@@ -32,7 +32,10 @@ export var DropdownButtonItem = function DropdownButtonItem(props) {
     })]
   }));
 };
-DropdownButtonItem.defaultProps = {
+_DropdownButtonItem.defaultProps = {
   toggle: true
 };
+
+/** @deprecated */
+export var DropdownButtonItem = _DropdownButtonItem;
 export default DropdownButtonItem;

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

@@ -6,5 +6,6 @@ export interface DropdownCollapsibleItemProps {
     onClick?: (evt: MouseEvent<HTMLElement>, name: string, expandedItems: readonly string[]) => void;
     children: ReactNode;
 }
+/** @deprecated */
 export declare const DropdownCollapsibleItem: VFC<DropdownCollapsibleItemProps>;
 export default DropdownCollapsibleItem;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.js

@@ -8,6 +8,7 @@ import { uniqueId } from "../../../utils";
 import { useDropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroupContext";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+/** @deprecated */
 export var DropdownCollapsibleItem = function DropdownCollapsibleItem(_ref) {
   var title = _ref.title,
     name = _ref.name,

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

@@ -4,4 +4,5 @@ export declare type DropdownCollapsibleItemsGroupProps = {
     onItemClick(name: string): void;
     children: ReactNode;
 };
+/** @deprecated */
 export declare const DropdownCollapsibleItemsGroup: VFC<DropdownCollapsibleItemsGroupProps>;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.js

@@ -1,5 +1,6 @@
 import { DropdownCollapsibleItemsGroupContext } from "./DropdownCollapsibleItemsGroupContext";
 import { jsx as _jsx } from "react/jsx-runtime";
+/** @deprecated */
 export var DropdownCollapsibleItemsGroup = function DropdownCollapsibleItemsGroup(_ref) {
   var expandedItems = _ref.expandedItems,
     onItemClick = _ref.onItemClick,

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroupContext.d.ts

@@ -4,4 +4,5 @@ export interface DropdownCollapsibleItemsGroupContextInterface {
     onItemClick(name: string): void;
 }
 export declare const DropdownCollapsibleItemsGroupContext: import("react").Context<DropdownCollapsibleItemsGroupContextInterface | null>;
+/** @deprecated */
 export declare const useDropdownCollapsibleItemsGroup: () => DropdownCollapsibleItemsGroupContextInterface;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroupContext.js

@@ -1,5 +1,7 @@
 import { createContext, useContext } from "react";
 export var DropdownCollapsibleItemsGroupContext = /*#__PURE__*/createContext(null);
+
+/** @deprecated */
 export var useDropdownCollapsibleItemsGroup = function useDropdownCollapsibleItemsGroup() {
   var context = useContext(DropdownCollapsibleItemsGroupContext);
   if (!context) {

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

@@ -5,5 +5,6 @@ export declare type DropdownCollapsibleItemsMultiGroupProps = {
 };
 /**
  * Multiple collapsible item can be open at a given time
+ * @deprecated
  */
 export declare const DropdownCollapsibleItemsMultiGroup: VFC<DropdownCollapsibleItemsMultiGroupProps>;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.js

@@ -5,6 +5,7 @@ import { DropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroup";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Multiple collapsible item can be open at a given time
+ * @deprecated
  */
 export var DropdownCollapsibleItemsMultiGroup = function DropdownCollapsibleItemsMultiGroup(_ref) {
   var initialExpandedItems = _ref.initialExpandedItems,

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

@@ -5,5 +5,6 @@ export declare type DropdownCollapsibleItemsExclusiveGroupProps = {
 };
 /**
  * Only one collapsible item can be open at a given time (unless you manually override)
+ * @deprecated
  */
 export declare const DropdownCollapsibleItemsSingleGroup: VFC<DropdownCollapsibleItemsExclusiveGroupProps>;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.js

@@ -4,6 +4,7 @@ import { DropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroup";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Only one collapsible item can be open at a given time (unless you manually override)
+ * @deprecated
  */
 export var DropdownCollapsibleItemsSingleGroup = function DropdownCollapsibleItemsSingleGroup(_ref) {
   var initialExpandedItem = _ref.initialExpandedItem,

package/esm/Dropdown/components/DropdownDivider.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
+/** @deprecated */
 export declare const DropdownDivider: () => JSX.Element;
 export default DropdownDivider;

package/esm/Dropdown/components/DropdownDivider.js

@@ -1,6 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import stl from "../../styles/helpers/satellitePrefixer";
+
+/** @deprecated */
 import { jsx as _jsx } from "react/jsx-runtime";
 export var DropdownDivider = function DropdownDivider() {
   return /*#__PURE__*/_jsx("div", {

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

@@ -4,5 +4,6 @@ declare type DropdownFooterItemProps = {
     className?: string;
     children: ReactNode;
 };
+/** @deprecated */
 export declare const DropdownFooterItem: VFC<DropdownFooterItemProps>;
 export default DropdownFooterItem;

package/esm/Dropdown/components/DropdownFooterItem.js

@@ -8,6 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import cx from "clsx";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
+/** @deprecated */
 export var DropdownFooterItem = function DropdownFooterItem(_ref) {
   var children = _ref.children,
     className = _ref.className,

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

@@ -6,5 +6,6 @@ export declare type DropdownLinkItemProps = DropdownBaseItemProps<HTMLAnchorElem
     /** Left aligned icon */
     startIcon?: IconComponentType;
 };
+/** @deprecated */
 export declare const DropdownLinkItem: VFC<DropdownLinkItemProps>;
 export default DropdownLinkItem;

package/esm/Dropdown/components/DropdownLinkItem.js

@@ -12,7 +12,7 @@ import useLinkProps from "../../utils/useLinkProps";
 import useDropdownItemProps from "../useDropdownItemProps";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var DropdownLinkItem = function DropdownLinkItem(props) {
+var _DropdownLinkItem = function _DropdownLinkItem(props) {
   var dropdownItemProps = useDropdownItemProps(props);
   var linkProps = useLinkProps(_objectSpread(_objectSpread({}, props), dropdownItemProps));
   var isExternalLink = linkProps.target === "_blank";
@@ -40,7 +40,10 @@ export var DropdownLinkItem = function DropdownLinkItem(props) {
     })]
   }));
 };
-DropdownLinkItem.defaultProps = {
+_DropdownLinkItem.defaultProps = {
   toggle: true
 };
+
+/** @deprecated */
+export var DropdownLinkItem = _DropdownLinkItem;
 export default DropdownLinkItem;

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

@@ -4,5 +4,6 @@ import type { DropdownBaseItemProps } from "../useDropdownItemProps";
 export interface DropdownRadioItemProps extends RadioButtonProps, DropdownBaseItemProps<HTMLInputElement> {
     children?: ReactNode;
 }
+/** @deprecated */
 export declare const DropdownRadioItem: VFC<DropdownRadioItemProps>;
 export default DropdownRadioItem;

package/esm/Dropdown/components/DropdownRadioItem.js

@@ -10,7 +10,8 @@ import stl from "../../styles/helpers/satellitePrefixer";
 import useDropdownItemProps from "../useDropdownItemProps";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var DropdownRadioItem = function DropdownRadioItem(props) {
+/** @deprecated */
+var _DropdownRadioItem = function _DropdownRadioItem(props) {
   var dropdownItemProps = useDropdownItemProps(props);
   // `toggle` is destructured here because we don't want it passed to the `RadioButton`
   var _props$dropdownItemPr = _objectSpread(_objectSpread({}, props), dropdownItemProps),
@@ -31,7 +32,10 @@ export var DropdownRadioItem = function DropdownRadioItem(props) {
     })
   });
 };
-DropdownRadioItem.defaultProps = {
+_DropdownRadioItem.defaultProps = {
   toggle: false
 };
+
+/** @deprecated */
+export var DropdownRadioItem = _DropdownRadioItem;
 export default DropdownRadioItem;

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

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

package/esm/Dropdown/components/DropdownTitle.js

@@ -8,6 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import cx from "clsx";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
+/** @deprecated */
 export var DropdownTitle = function DropdownTitle(_ref) {
   var className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);

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

@@ -7,5 +7,6 @@ export interface DropdownToggleItemProps extends ToggleProps, DropdownBaseItemPr
     startIcon?: IconComponentType;
     children?: ReactNode;
 }
+/** @deprecated */
 export declare const DropdownToggleItem: VFC<DropdownToggleItemProps>;
 export default DropdownToggleItem;

package/esm/Dropdown/components/DropdownToggleItem.js

@@ -11,7 +11,8 @@ import { Toggle } from "../../Toggle";
 import useDropdownItemProps from "../useDropdownItemProps";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var DropdownToggleItem = function DropdownToggleItem(props) {
+/** @deprecated */
+var _DropdownToggleItem = function _DropdownToggleItem(props) {
   var dropdownItemProps = useDropdownItemProps(props);
   // `toggle` is destructured here because we don't want it passed to the `Toggle`
   var _props$dropdownItemPr = _objectSpread(_objectSpread({}, props), dropdownItemProps),
@@ -34,7 +35,10 @@ export var DropdownToggleItem = function DropdownToggleItem(props) {
     }, toggleProps))]
   });
 };
-DropdownToggleItem.defaultProps = {
+_DropdownToggleItem.defaultProps = {
   toggle: false
 };
+
+/** @deprecated */
+export var DropdownToggleItem = _DropdownToggleItem;
 export default DropdownToggleItem;

package/esm/EmptyState/EmptyState.js

@@ -1,7 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
 import cx from "clsx";
-import FlexGrid from "../FlexGrid";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -72,16 +71,12 @@ var renderEmptyState = function renderEmptyState(_ref) {
       }), !!description && /*#__PURE__*/_jsx("div", {
         className: descriptionClassNames,
         children: description
-      }), !!actions && /*#__PURE__*/_jsx(FlexGrid, {
-        className: actionsClassNames,
-        alignment: centered ? "center" : "leading",
-        distribution: centered ? "center" : "leading",
-        direction: actionsDirection !== null && actionsDirection !== void 0 ? actionsDirection : centered ? "column" : "row",
-        spacing: "sm",
+      }), !!actions && /*#__PURE__*/_jsx("div", {
+        className: cx(stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["flex gap-2"]))), centered ? stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["items-center justify-center"]))) : stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["items-start justify-start"]))), actionsDirection === "column" || centered ? stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["flex-col"]))) : stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["flex-row"]))), actionsClassNames),
         children: actions
       })]
     }), !centered && usageContext === "page" && /*#__PURE__*/_jsx("div", {
-      className: stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["empty-state-illustration ml-16 hidden lg:flex items-center justify-center"]))),
+      className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["empty-state-illustration ml-16 hidden lg:flex items-center justify-center"]))),
       children: pageIllustration
     })]
   });

package/esm/MenuButton/MenuButton.d.ts

@@ -1,25 +1,27 @@
 /// <reference types="react" />
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import type { DropdownMenuProps } from "@radix-ui/react-dropdown-menu";
-import type { DropdownMenuContentProps } from "@radix-ui/react-dropdown-menu";
 export declare type MenuButtonProps = DropdownMenuProps;
-export declare type MenuButtonContentProps = Omit<DropdownMenuContentProps, "asChild">;
-export declare const Content: ({ children, align, side, className }: MenuButtonContentProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-declare const ExperimentalMenuButton: {
+/**
+ * The `MenuButton` component helps users select an item from a list of available options.
+ *
+ * See the [MenuButton documentation page](https://satellite.algolia.com/components/actions/dropdown) for more information.
+ */
+export declare const MenuButton: {
     ({ ...props }: MenuButtonProps): JSX.Element;
-    Content: ({ children, align, side, className }: MenuButtonContentProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     CollapsibleItem: import("react").FC<import("./components/collapsible").CollapsibleItemProps>;
-    CollapsibleItemsSingleGroup: import("react").FC<import("./components/collapsible").CollapsibleItemsExclusiveGroupProps>;
     CollapsibleItemsMultipleGroup: import("react").FC<import("./components/collapsible").CollapsibleItemsMultiGroupProps>;
+    CollapsibleItemsSingleGroup: import("react").FC<import("./components/collapsible").CollapsibleItemsExclusiveGroupProps>;
+    Content: ({ children, align, side, className }: import("./components/Content").MenuButtonContentProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    CustomTrigger: import("react").FC<import("./components/CustomTrigger").CustomTriggerProps>;
     Divider: () => JSX.Element;
+    Item: import("react").FC<import("./components/items").ItemProps>;
     Label: import("react").FC<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
-    Trigger: import("react").FC<import("./components/DefaultTrigger").DefaultTriggerProps>;
-    CustomTrigger: import("react").FC<import("./components/CustomTrigger").CustomTriggerProps>;
-    ButtonItem: import("react").FC<import("./components/items").ButtonItemProps>;
     LinkItem: import("react").FC<import("./components/items").LinkItemProps>;
+    RadioGroup: import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
     RadioItem: import("react").FC<import("./components/items").RadioItemProps>;
     ToggleItem: import("react").FC<import("./components/items").ToggleItemProps>;
-    RadioGroup: import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<import("./components/DefaultTrigger").DefaultTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
     displayName: string;
 };
-export default ExperimentalMenuButton;
+export default MenuButton;

package/esm/MenuButton/MenuButton.js

@@ -1,62 +1,38 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
-var _templateObject, _templateObject2;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import cx from "clsx";
-import { Card } from "../Card";
-import { useCreatePortal } from "../Satellite";
-import stl from "../styles/helpers/satellitePrefixer";
 import { CollapsibleItem, CollapsibleItemsMultipleGroup, CollapsibleItemsSingleGroup } from "./components/collapsible";
+import { Content } from "./components/Content";
 import CustomTrigger from "./components/CustomTrigger";
 import DefaultTrigger from "./components/DefaultTrigger";
 import Divider from "./components/Divider";
-import { ButtonItem, LinkItem, RadioItem, ToggleItem } from "./components/items";
+import { Item, LinkItem, RadioItem, ToggleItem } from "./components/items";
 import Label from "./components/Label";
 import { jsx as _jsx } from "react/jsx-runtime";
-var MenuButton = function MenuButton(_ref) {
+/**
+ * The `MenuButton` component helps users select an item from a list of available options.
+ *
+ * See the [MenuButton documentation page](https://satellite.algolia.com/components/actions/dropdown) for more information.
+ */
+export var MenuButton = function MenuButton(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/_jsx(DropdownMenu.Root, _objectSpread({}, props));
 };
-export var Content = function Content(_ref2) {
-  var children = _ref2.children,
-    _ref2$align = _ref2.align,
-    align = _ref2$align === void 0 ? "start" : _ref2$align,
-    _ref2$side = _ref2.side,
-    side = _ref2$side === void 0 ? "bottom" : _ref2$side,
-    className = _ref2.className;
-  var createPortal = useCreatePortal();
-  return createPortal( /*#__PURE__*/_jsx(DropdownMenu.Content, {
-    align: align,
-    side: side,
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["z-dropdown min-w-64 max-w-128"]))), className),
-    sideOffset: 15,
-    children: /*#__PURE__*/_jsx(CollapsibleItemsSingleGroup, {
-      children: /*#__PURE__*/_jsx(Card, {
-        fullBleed: true,
-        elevation: "300",
-        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col py-1 text-grey-900"]))),
-        children: children
-      })
-    })
-  }));
-};
-MenuButton.Content = Content;
 MenuButton.CollapsibleItem = CollapsibleItem;
-MenuButton.CollapsibleItemsSingleGroup = CollapsibleItemsSingleGroup;
 MenuButton.CollapsibleItemsMultipleGroup = CollapsibleItemsMultipleGroup;
+MenuButton.CollapsibleItemsSingleGroup = CollapsibleItemsSingleGroup;
+MenuButton.Content = Content;
+MenuButton.CustomTrigger = CustomTrigger;
 MenuButton.Divider = Divider;
+MenuButton.Item = Item;
 MenuButton.Label = Label;
-MenuButton.Trigger = DefaultTrigger;
-MenuButton.CustomTrigger = CustomTrigger;
-MenuButton.ButtonItem = ButtonItem;
 MenuButton.LinkItem = LinkItem;
+MenuButton.RadioGroup = DropdownMenu.RadioGroup;
 MenuButton.RadioItem = RadioItem;
 MenuButton.ToggleItem = ToggleItem;
-MenuButton.RadioGroup = DropdownMenu.RadioGroup;
+MenuButton.Trigger = DefaultTrigger;
 MenuButton.displayName = "MenuButton";
-var ExperimentalMenuButton = MenuButton;
-export default ExperimentalMenuButton;
+export default MenuButton;

package/esm/MenuButton/components/Content.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type DropdownMenuContentProps } from "@radix-ui/react-dropdown-menu";
+export declare type MenuButtonContentProps = Omit<DropdownMenuContentProps, "asChild">;
+export declare const Content: ({ children, align, side, className }: MenuButtonContentProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/esm/MenuButton/components/Content.js

@@ -0,0 +1,32 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { Content as DropdownMenuContent } from "@radix-ui/react-dropdown-menu";
+import cx from "clsx";
+import Card from "../../Card";
+import { useCreatePortal } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { CollapsibleItemsSingleGroup } from "./collapsible";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Content = function Content(_ref) {
+  var children = _ref.children,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "start" : _ref$align,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? "bottom" : _ref$side,
+    className = _ref.className;
+  var createPortal = useCreatePortal();
+  return createPortal( /*#__PURE__*/_jsx(DropdownMenuContent, {
+    align: align,
+    side: side,
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["z-dropdown min-w-64 max-w-128"]))), className),
+    sideOffset: 15,
+    children: /*#__PURE__*/_jsx(CollapsibleItemsSingleGroup, {
+      children: /*#__PURE__*/_jsx(Card, {
+        fullBleed: true,
+        elevation: "300",
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col py-1 text-grey-900"]))),
+        children: children
+      })
+    })
+  }));
+};

package/esm/MenuButton/components/DefaultTrigger.d.ts

@@ -1,5 +1,5 @@
-import type { FC } from "react";
+/// <reference types="react" />
 import type { ButtonProps } from "../../Button";
 export declare type DefaultTriggerProps = Omit<ButtonProps, "endIcon">;
-export declare const DefaultTrigger: FC<DefaultTriggerProps>;
+export declare const DefaultTrigger: import("react").ForwardRefExoticComponent<DefaultTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default DefaultTrigger;

package/esm/MenuButton/components/DefaultTrigger.js

@@ -4,10 +4,11 @@ var _excluded = ["children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { forwardRef } from "react";
 import { ChevronDown } from "react-feather";
 import Button from "../../Button";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var DefaultTrigger = function DefaultTrigger(_ref) {
+export var DefaultTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     buttonProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_jsx(DropdownMenu.Trigger, {
@@ -15,8 +16,10 @@ export var DefaultTrigger = function DefaultTrigger(_ref) {
     children: /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
       endIcon: ChevronDown
     }, buttonProps), {}, {
+      ref: ref,
       children: children
     }))
   });
-};
+});
+DefaultTrigger.displayName = "MenuButtonDefaultTrigger";
 export default DefaultTrigger;

package/esm/MenuButton/components/items/Item.d.ts

@@ -0,0 +1,15 @@
+import type { DropdownMenuItemProps } from "@radix-ui/react-dropdown-menu";
+import type { FC } from "react";
+import type { IconComponentType } from "../../../Icons";
+import type { BaseItemProps } from "../../useMenuItemProps";
+export declare type ItemProps = BaseItemProps<HTMLDivElement> & DropdownMenuItemProps & {
+    /** Left aligned icon */
+    startIcon?: IconComponentType;
+    /**
+     * Variant of the item
+     * @default "default"
+     */
+    variant?: "default" | "destructive";
+};
+export declare const Item: FC<ItemProps>;
+export default Item;

package/esm/MenuButton/components/items/{ButtonItem.js → Item.js}

@@ -11,7 +11,7 @@ import stl from "../../../styles/helpers/satellitePrefixer";
 import { useMenuItemProps } from "../../useMenuItemProps";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var ButtonItem = function ButtonItem(props) {
+export var Item = function Item(props) {
   var itemProps = useMenuItemProps(props);
   var _props$itemProps = _objectSpread(_objectSpread({}, props), itemProps),
     children = _props$itemProps.children,
@@ -19,19 +19,16 @@ export var ButtonItem = function ButtonItem(props) {
     StartIcon = _props$itemProps.startIcon,
     mergedProps = _objectWithoutProperties(_props$itemProps, _excluded);
   var showDestructiveVariant = !props.disabled && variant === "destructive";
-  return /*#__PURE__*/_jsx(DropdownMenu.Item, {
-    asChild: true,
-    children: /*#__PURE__*/_jsxs("button", _objectSpread(_objectSpread({}, mergedProps), {}, {
-      className: cx(mergedProps.className, stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full"])))),
-      children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
-        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 shrink-0 ", ""])), showDestructiveVariant ? "text-red-700" : "text-inherit"),
-        width: "1rem",
-        height: "1rem"
-      }), /*#__PURE__*/_jsx("span", {
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700"),
-        children: children
-      })]
-    }))
-  });
+  return /*#__PURE__*/_jsxs(DropdownMenu.Item, _objectSpread(_objectSpread({}, mergedProps), {}, {
+    className: cx(mergedProps.className, stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full"])))),
+    children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 shrink-0 ", ""])), showDestructiveVariant ? "text-red-700" : "text-inherit"),
+      width: "1rem",
+      height: "1rem"
+    }), /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700"),
+      children: children
+    })]
+  }));
 };
-export default ButtonItem;
+export default Item;

package/esm/MenuButton/components/items/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./ButtonItem";
+export * from "./Item";
 export * from "./LinkItem";
 export * from "./RadioItem";
 export * from "./ToggleItem";

package/esm/MenuButton/components/items/index.js

@@ -1,4 +1,4 @@
-export * from "./ButtonItem";
+export * from "./Item";
 export * from "./LinkItem";
 export * from "./RadioItem";
 export * from "./ToggleItem";

package/esm/MenuButton/index.d.ts

@@ -1 +1 @@
-export { default as ExperimentalMenuButton } from "./MenuButton";
+export * from "./MenuButton";

package/esm/MenuButton/index.js

@@ -1 +1 @@
-export { default as ExperimentalMenuButton } from "./MenuButton";
+export * from "./MenuButton";